/*
  CarbonSifr admin theme — Corporate Navy.
  Overrides the Metronic/KTUI Tailwind token layer in styles.css — every kt- and Tailwind
  utility class already reads its color from these CSS custom properties, so redefining
  them here reskins the app without touching the compiled utility classes.
  Loaded after styles.css.
*/

:root {
  /* Matches the rendered height of .cs-topbar (padding + crumb/title text) so the
     sidebar logo panel lines up exactly with the topbar row on desktop. */
  --cs-topbar-height: 86px;

  /* Brand palette — grounded in Dubai Holding's own logo navy/blue */
  --cs-navy: #0b2036;
  --cs-navy-elevated: #12314f;
  --cs-navy-border: #1c3a57;
  --cs-navy-foreground: #ffffff;
  --cs-navy-muted-foreground: #a9b6c9;

  --cs-paper: #f5f6f8;
  --cs-blue: #1d4ed8;
  --cs-blue-bright: #3b78e7;
  --cs-success: #1f7a4c;
  --cs-success-soft: #e7f3ec;
  --cs-warning: #92620a;
  --cs-warning-soft: #faf0d9;
  --cs-danger: #a12b21;
  --cs-danger-soft: #fbe9e7;
  --cs-neutral: #414a5c;
  --cs-neutral-soft: #eef0f3;

  /* Back-compat aliases for the previous palette naming, still referenced inline in a
     few views (Campaign/Add, Edit, Detail) — point them at the current semantic tones. */
  --cs-ink: var(--cs-navy);
  --cs-emerald: var(--cs-success);
  --cs-gold: var(--cs-warning);
  --cs-ember: var(--cs-danger);

  --font-display: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Semantic token overrides (consumed by existing kt- and Tailwind utility classes) */
  --background: #ffffff;
  --foreground: #17202e;
  --card: #ffffff;
  --card-foreground: #17202e;
  --popover: #ffffff;
  --popover-foreground: #17202e;
  --primary: var(--cs-blue);
  --primary-foreground: #ffffff;
  --secondary: var(--cs-neutral-soft);
  --secondary-foreground: var(--cs-neutral);
  --muted: var(--cs-paper);
  --muted-foreground: #5b6576;
  --accent: var(--cs-neutral-soft);
  --accent-foreground: #17202e;
  --destructive: var(--cs-danger);
  --destructive-foreground: #ffffff;
  --mono: #17202e;
  --mono-foreground: #ffffff;
  --border: #dfe3ea;
  --input: #dfe3ea;
  --ring: var(--cs-blue);
  --radius: 0.375rem;
}

.dark {
  --background: var(--cs-navy);
  --foreground: var(--cs-navy-foreground);
  --card: var(--cs-navy-elevated);
  --card-foreground: var(--cs-navy-foreground);
  --popover: var(--cs-navy-elevated);
  --popover-foreground: var(--cs-navy-foreground);
  --primary: var(--cs-blue-bright);
  --primary-foreground: #06111f;
  --secondary: #16324d;
  --secondary-foreground: #cfd9e6;
  --muted: #0e2135;
  --muted-foreground: #8fa0b6;
  --accent: #16324d;
  --accent-foreground: var(--cs-navy-foreground);
  --destructive: #e2685a;
  --destructive-foreground: #200604;
  --mono: var(--cs-navy-foreground);
  --mono-foreground: var(--cs-navy);
  --border: var(--cs-navy-border);
  --input: var(--cs-navy-border);
  --ring: var(--cs-blue-bright);
}

/* ============================================================================
   Component library — self-contained, no dependency on the old kt-* classes.
   Only Tailwind's plain layout utilities (flex, grid, gap-*, p-*, rounded-*,
   text-*) are still used alongside these; every kt-card/kt-btn/kt-badge/
   kt-table/kt-input/kt-container-fixed usage should be replaced by these.
   ============================================================================ */

.cs-heading,
.cs-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Container — replaces kt-container-fixed */
.cs-container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Card — replaces kt-card / kt-card-header / kt-card-title / kt-card-content / kt-card-table */
.cs-card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(11, 32, 54, 0.04);
  display: flex;
  flex-direction: column;
}

.cs-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.cs-card-title {
  font-size: 0.95rem;
  margin: 0;
}

.cs-card-body {
  padding: 1.25rem;
}

.cs-card-table {
  padding: 0;
  overflow-x: auto;
}

.cs-card-footer {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: 1rem 1.25rem;
}

/* Buttons — replaces kt-btn and its variants */
.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: "Inter", sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cs-btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.cs-btn-primary:hover { background: var(--cs-blue-bright); }

.cs-btn-outline {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
}

.cs-btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.cs-btn-ghost {
  background: transparent;
  color: var(--muted-foreground);
}

.cs-btn-ghost:hover { background: var(--muted); color: var(--foreground); }

.cs-btn-danger {
  background: var(--destructive);
  color: var(--destructive-foreground);
}

.cs-btn-sm { padding: 0.35rem 0.65rem; font-size: 0.76rem; }

.cs-btn-icon { padding: 0.4rem; width: 2rem; height: 2rem; }
.cs-btn-icon.cs-btn-sm { width: 1.7rem; height: 1.7rem; padding: 0.3rem; }

/* KeenIcons default size — the vendor font has no font-size of its own, so a bare
   <i class="ki-filled ki-eye"> just inherits whatever ambient size surrounds it
   (e.g. a cs-btn-sm's 0.76rem), which reads as too small. :where() keeps this at
   zero specificity so any existing text-xs/sm/lg (or inline style) on a specific
   icon still wins and is left untouched — only unsized icons get bigger. */
:where(.ki-filled, .ki-outline, .ki-duotone) {
  font-size: 1.05rem;
}

/* Badges — replaces kt-badge and its variants */
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.32rem 0.55rem;
  border-radius: 5px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cs-badge-sm { padding: 0.24rem 0.45rem; font-size: 0.66rem; }

.cs-badge-primary   { background: var(--cs-neutral-soft); color: var(--cs-blue); }
.cs-badge-success   { background: var(--cs-success-soft); color: var(--cs-success); }
.cs-badge-warning   { background: var(--cs-warning-soft); color: var(--cs-warning); }
.cs-badge-danger    { background: var(--cs-danger-soft);  color: var(--cs-danger); }
.cs-badge-secondary { background: var(--cs-neutral-soft); color: var(--cs-neutral); }
.cs-badge-outline   { background: transparent; border-color: var(--border); color: var(--muted-foreground); }

/* Table — replaces kt-table / kt-table-border */
.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.cs-table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  padding: 0.6rem 1.1rem;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.cs-table td {
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
}

.cs-table tbody tr:last-child td { border-bottom: none; }
.cs-table tbody tr:hover { background: var(--muted); }

/* Company > Unit hierarchy in grouped tenant tables (e.g. Campaign/Add) —
   indents the unit's own cell so it reads as nested under its company row. */
.cs-unit-cell {
  padding-left: 2.75rem !important;
  position: relative;
}
.cs-unit-cell::before {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

/* Accordion toggle on the company header row — click anywhere on the row
   (outside its select-all checkbox) to expand/collapse its unit rows. */
.cs-group-row { cursor: pointer; }

.cs-group-chevron {
  display: inline-flex;
  font-size: 0.6rem;
  color: var(--muted-foreground);
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
  transform: rotate(0deg);
}

.cs-group-row[data-expanded="true"] .cs-group-chevron {
  transform: rotate(90deg);
}

/* Form controls — replaces kt-input / kt-form-label / kt-select / kt-checkbox */
.cs-label {
  display: block;
  /* Old .kt-form-label had width:100% too — in the "label | input" row layout (label capped by
     max-w-56, input wrapper grow) this is what forces every label onto the same fixed column
     width instead of shrinking to its own text, which is what kept inputs from lining up.
     In stacked layouts (label above input, e.g. the login form) this is a no-op. */
  width: 100%;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.4rem;
}

.cs-input,
.cs-select,
.cs-textarea {
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: 6px;
  padding: 0.58rem 0.7rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-input::placeholder,
.cs-textarea::placeholder { color: var(--muted-foreground); }

.cs-input:focus,
.cs-select:focus,
.cs-textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 15%, transparent);
}

/* Compound cs-input (icon + bare <input>, e.g. a table search box) */
.cs-input:not(input) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cs-input:not(input) i { color: var(--muted-foreground); font-size: 0.85rem; }

.cs-input:not(input) input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  width: 100%;
  font: inherit;
  color: inherit;
}

.cs-input:not(input):focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 15%, transparent);
}

.cs-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

.cs-select-wrap { position: relative; }
.cs-select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2rem; }
.cs-select-wrap::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  top: 47%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.cs-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--input);
  accent-color: var(--primary);
}

/* Avatar — replaces kt-avatar. Corporate Navy mockup uses a rounded square (border-radius:5px),
   not a circle, matching the same 6px radius as the rest of the icon/badge language. */
.cs-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Topbar — the white, bordered strip above the page content (Corporate Navy mockup's .topbar).
   Sits flush above the gray page background so it reads as a distinct header, not part of the
   scrolling content. */
.cs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  min-height: var(--cs-topbar-height);
  padding: 1.46rem 1.6rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.cs-topbar-crumb {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cs-topbar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0.1rem 0 0;
  color: var(--foreground);
}

/* Dropdown menu panel — pairs with data-kt-dropdown-menu (JS is attribute-driven, not class-driven) */
.cs-dropdown-menu {
  min-width: 220px;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11, 32, 54, 0.14);
  padding: 0.4rem;
}

/* KTUI's dropdown JS toggles an "open" class on this element (via Popper) and only adds
   its own "hidden" utility class after the close transition finishes — so without this rule
   every dropdown (profile menu, status filter, per-row "..." menus) renders open inline on
   first page load instead of staying collapsed until clicked. */
.cs-dropdown-menu:not(.open) {
  display: none;
}

.cs-dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  font-size: 0.83rem;
  color: var(--foreground);
  text-decoration: none;
}

.cs-dropdown-link:hover { background: var(--muted); }

.cs-dropdown-separator {
  height: 1px;
  background: var(--border);
  margin: 0.35rem 0;
}

/* Switch (dark mode toggle etc.) — replaces kt-switch */
.cs-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.cs-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}

.cs-switch:checked { background: var(--primary); }
.cs-switch:checked::after { left: 17px; }

.cs-data {
  font-family: var(--font-data);
  font-feature-settings: "tnum";
}

/* Sidebar always renders as a fixed navy rail, independent of the light/dark toggle */
#sidebar {
  --background: var(--cs-navy);
  --muted: var(--cs-navy);
  --foreground: var(--cs-navy-foreground);
  --secondary-foreground: var(--cs-navy-muted-foreground);
  --muted-foreground: var(--cs-navy-muted-foreground);
  --border: var(--cs-navy-border);
  --primary: var(--cs-blue-bright);
  background-color: var(--cs-navy) !important;
}

.cs-sidebar-logo {
  display: flex;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  height: var(--cs-topbar-height);
  align-items: center;
  justify-content: center;
  margin-right: 2px;
  background-color: #ffffff;
  border-radius: 0;
}

.cs-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #ffffff;
  border-radius: 6px;
  padding: 4px;
}
.cs-logo-badge img {
  display: block;
}

.cs-sidebar-logo .cs-logo-badge {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}

/* Labeled navigation list (replaces the icon-only rail) */
.cs-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.65rem;
  border-radius: 6px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--cs-navy-muted-foreground);
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cs-nav-link svg { flex-shrink: 0; opacity: 0.85; }

#sidebar .kt-menu-item:hover .cs-nav-link,
.cs-nav-link:hover {
  color: #ffffff;
}

#sidebar .kt-menu-item.active .cs-nav-link,
#sidebar .kt-menu-item.here .cs-nav-link {
  background: var(--cs-navy-elevated);
  color: #ffffff;
  border-left-color: var(--cs-blue-bright);
}

#sidebar .kt-menu-item.active .cs-nav-link svg,
#sidebar .kt-menu-item.here .cs-nav-link svg {
  opacity: 1;
}

/* Quick actions / KPI grid — replaces per-page inline layout styles */
.cs-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  padding: 1.1rem;
}

.cs-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
}

.cs-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.85rem;
}

@media (max-width: 1024px) {
  .cs-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .cs-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .cs-grid-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .cs-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

.cs-quick-action {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-quick-action:hover {
  border-color: var(--primary);
  box-shadow: 0 1px 6px rgba(29, 78, 216, 0.1);
}

.cs-quick-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 6px;
  font-size: 1rem;
  flex-shrink: 0;
}

.cs-quick-action-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--foreground);
}

.cs-kpi {
  padding: 0.9rem 1.1rem;
}

/* Icon bubble for KPI cards that pair a stat with an icon (Campaign/Index, Campaign/Detail) */
.cs-kpi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.cs-kpi-value {
  font-family: var(--font-data);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--foreground);
}

.cs-kpi-label {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  font-weight: 500;
  margin-top: 0.2rem;
}

/* Tone helpers — named semantic states instead of ad-hoc hex per view */
.cs-tone-emerald  { color: var(--cs-success); background: var(--cs-success-soft); box-shadow: inset 0 0 0 1px rgba(31, 122, 76, 0.18); }
.cs-tone-gold     { color: var(--cs-warning); background: var(--cs-warning-soft); box-shadow: inset 0 0 0 1px rgba(146, 98, 10, 0.22); }
.cs-tone-ember    { color: var(--cs-danger);  background: var(--cs-danger-soft);  box-shadow: inset 0 0 0 1px rgba(161, 43, 33, 0.2); }
.cs-tone-slate    { color: var(--cs-neutral); background: var(--cs-neutral-soft); box-shadow: inset 0 0 0 1px rgba(65, 74, 92, 0.15); }
.dark .cs-tone-emerald { background: rgba(52, 211, 153, 0.14); }
.dark .cs-tone-gold    { background: rgba(251, 191, 36, 0.14); color: #f0b429; }
.dark .cs-tone-ember   { background: rgba(226, 104, 90, 0.14); color: #e2685a; }
.dark .cs-tone-slate   { background: rgba(255, 255, 255, 0.06); color: var(--muted-foreground); }

/*
  Flat completion bar — the shared "how much is done" component.
  Usage: <div class="cs-bar-track"><div class="cs-bar-fill" style="width:63%"></div></div>
*/
.cs-bar-track {
  height: 6px;
  background: var(--secondary);
  border-radius: 3px;
  overflow: hidden;
  min-width: 72px;
}

.cs-bar-fill {
  height: 100%;
  background: var(--primary);
}

/*
  Ring completion indicator — same "how much is done" data as .cs-bar-track,
  drawn as a donut instead of a bar (used on the Campaign/Index cards).
  Usage: <div class="cs-ring" style="--cs-ring-pct:63;"><span class="cs-ring-value">63%</span></div>
*/
.cs-ring {
  position: relative;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(
    var(--primary) calc(var(--cs-ring-pct, 0) * 1%),
    var(--secondary) 0
  );
}

.cs-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--card);
}

.cs-ring-value {
  position: relative;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.02em;
}

.cs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.7rem;
  color: var(--muted-foreground);
}

.cs-legend-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  margin-inline-end: 4px;
}

.cs-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.cs-activity-row:last-child {
  border-bottom: none;
}

.cs-activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  flex-shrink: 0;
  margin-top: 6px;
}

/* Form components — matches the approved Corporate Navy form mockup */
.cs-field { margin-bottom: 1.05rem; }
.cs-field:last-child { margin-bottom: 0; }
.cs-field-req { color: var(--cs-danger); margin-left: 2px; }
.cs-field-hint { font-size: 0.72rem; color: var(--muted-foreground); margin-top: 0.35rem; }
.cs-field-err { font-size: 0.72rem; color: var(--cs-danger); margin-top: 0.35rem; font-weight: 500; }
.cs-dropzone {
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 1.3rem 1rem;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.79rem;
  background: var(--muted);
  line-height: 1.6;
}
.cs-dropzone strong { color: var(--primary); font-weight: 600; }