/* commergenix-shell-adminlte.css
 * Commergenix application-shell chrome for the AdminLTE/Razor host (Phase 2).
 * HAND-AUTHORED — safe to edit. Consumes tokens (var(--cg-*)) from
 * commergenix-tokens.css. Load order in _Layout.cshtml:
 *   adminlte.min.css -> commergenix-tokens.css -> commergenix-adminlte.css -> THIS FILE
 * Scope: shell only (top bar, sidebar, canvas, buttons, focus, footer).
 * Does not alter markup, routes, permissions, or page content.
 */

/* ---- App canvas ---- */
body.sidebar-mini { background-color: var(--cg-canvas); }
.content-wrapper { background-color: var(--cg-canvas); }

/* ---- Top bar ---- */
.main-header.navbar {
  min-height: var(--cg-header-h);
  background-color: var(--cg-surface);
  border-bottom: var(--cg-border-thin) solid var(--cg-border);
  box-shadow: none;
}
.main-header .nav-link { color: var(--cg-text-muted); }
.main-header .nav-link:hover { color: var(--cg-text); }
.main-header .navbar-badge { background-color: var(--cg-danger); color: #fff; }

/* Tenant AI-usage (month-to-date $) indicator — a brand-tinted pill, not a clickable link. */
.main-header .cg-ai-usage {
  display: inline-flex;
  align-items: center;
  gap: var(--cg-space-3);
  padding: 3px var(--cg-space-4);
  border-radius: var(--cg-radius-pill);
  background: var(--cg-green-soft);
  cursor: default;
}
.main-header .cg-ai-usage:hover { color: var(--cg-text-muted); }
.main-header .cg-ai-usage .fa-robot { color: var(--cg-green-deep); }
.main-header .cg-ai-usage__amount {
  font-weight: var(--cg-font-weight-semibold);
  color: var(--cg-text);
}

/* ---- Sidebar (near-black Commergenix identity) ---- */
.main-sidebar.sidebar-dark-primary,
.sidebar-dark-primary { background-color: var(--cg-dark-surface); }
.main-sidebar {
  box-shadow: none !important;
  border-right: var(--cg-border-thin) solid var(--cg-border-dark);
}

/* Brand / identity block — extra gutter below the logo before the border/user panel */
.main-sidebar .brand-link {
  border-bottom: var(--cg-border-thin) solid var(--cg-border-dark);
  padding-top: var(--cg-space-4);
  padding-bottom: var(--cg-space-7);
}

/* Room below the last menu item so it scrolls clear of the window edge (and the browser's link preview) */
.sidebar #mainMenu { padding-bottom: var(--cg-space-10); }

/* User panel */
.sidebar .user-panel { border-bottom: var(--cg-border-thin) solid var(--cg-border-dark); }
.sidebar .user-panel .info,
.sidebar .user-panel .info a { color: var(--cg-text-on-dark); }

/* Page search (menu.js): opens the Ctrl+K switcher */
.cg-nav-search {
  display: flex; align-items: center; gap: var(--cg-space-2);
  width: calc(100% - 2 * var(--cg-space-3)); margin: 0 var(--cg-space-3) var(--cg-space-3);
  padding: var(--cg-space-2) var(--cg-space-3);
  background-color: var(--cg-dark-elevated); color: var(--cg-text-on-dark-muted);
  border: var(--cg-border-thin) solid var(--cg-border-dark); border-radius: var(--cg-radius-md);
  font-size: var(--cg-font-size-sm); text-align: left; cursor: pointer;
}
.cg-nav-search:hover, .cg-nav-search:focus-visible { color: var(--cg-text-on-dark); }
.cg-nav-search:focus-visible { outline: var(--cg-focus-ring-width) solid var(--cg-focus-ring); outline-offset: var(--cg-focus-ring-offset); }
.cg-nav-search-text { flex: 1; }
.cg-nav-search kbd, .cg-quick kbd {
  font-family: var(--cg-font-sans); font-size: var(--cg-font-size-xs); padding: 0 var(--cg-space-1);
  border: var(--cg-border-thin) solid currentColor; border-radius: var(--cg-radius-sm); background: transparent; color: inherit; opacity: .8;
}
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .cg-nav-search { justify-content: center; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .cg-nav-search-text,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .cg-nav-search kbd { display: none; }

/* Module families: a header that folds its modules away */
.nav-sidebar .nav-header.cg-nav-group { padding: var(--cg-space-4) var(--cg-space-3) var(--cg-space-1); }
.cg-nav-group-toggle {
  display: flex; align-items: center; width: 100%; padding: 0 var(--cg-space-3);
  background: none; border: 0; color: var(--cg-text-on-dark-muted); cursor: pointer;
  font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold); letter-spacing: .06em; text-transform: uppercase; text-align: left;
}
.cg-nav-pinned .cg-nav-group-label {
  display: block; padding: 0 var(--cg-space-3); color: var(--cg-text-on-dark-muted);
  font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold); letter-spacing: .06em; text-transform: uppercase;
}
.cg-nav-pinned .cg-nav-group-label i { margin-right: var(--cg-space-2); }
.cg-nav-group-toggle:hover { color: var(--cg-text-on-dark); }
.cg-nav-group-toggle:focus-visible { outline: var(--cg-focus-ring-width) solid var(--cg-focus-ring); border-radius: var(--cg-radius-sm); }
.cg-nav-group-label { flex: 1; }
.cg-nav-group-chevron { font-size: var(--cg-font-size-xs); transition: transform var(--cg-transition-fast) var(--cg-ease); }
.cg-nav-folded .cg-nav-group-chevron { transform: rotate(-90deg); }
.nav-sidebar .cg-nav-hidden { display: none; }

/* Pins: a thumbtack on hover; pinned pages sit under "Pinned" */
.nav-sidebar .cg-nav-pinnable { position: relative; }
.cg-nav-pin {
  position: absolute; top: 50%; left: var(--cg-space-1); transform: translateY(-50%);
  display: none; padding: var(--cg-space-1); background: none; border: 0; line-height: 1;
  color: var(--cg-text-on-dark-muted); font-size: var(--cg-font-size-xs); cursor: pointer;
}
/* Level with the item itself, not the middle of its open submenu */
.nav-sidebar .has-treeview > .cg-nav-pin { top: 1.25rem; }
.cg-nav-pinnable:hover > .cg-nav-pin, .cg-nav-pinned-item:hover > .cg-nav-pin, .cg-nav-pin:focus-visible { display: block; }
.cg-nav-pin:hover, .cg-nav-pin.cg-nav-pin-on { color: var(--cg-text-on-dark); }
.cg-nav-pinned-item { position: relative; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .cg-nav-pin { display: none; }

/* SuperAdmin: every module, or this tenant's only */
.cg-nav-scope { margin-top: var(--cg-space-4); }
.cg-nav-scope-toggle {
  width: calc(100% - 2 * var(--cg-space-3)); margin: 0 var(--cg-space-3); padding: var(--cg-space-2) var(--cg-space-3);
  background: none; border: var(--cg-border-thin) dashed var(--cg-border-dark); border-radius: var(--cg-radius-md);
  color: var(--cg-text-on-dark-muted); font-size: var(--cg-font-size-xs); text-align: left; cursor: pointer;
}
.cg-nav-scope-toggle i { margin-right: var(--cg-space-2); }
.cg-nav-scope-toggle:hover { color: var(--cg-text-on-dark); }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .cg-nav-scope { display: none; }

/* Ctrl+K page switcher */
.cg-quick {
  position: fixed; inset: 0; z-index: var(--cg-z-modal); display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh var(--cg-space-4) var(--cg-space-4); background: rgba(0, 0, 0, .45);
}
.cg-quick[hidden] { display: none; }
.cg-quick-panel {
  width: 100%; max-width: 560px; background: var(--cg-surface); color: var(--cg-text);
  border: var(--cg-border-thin) solid var(--cg-border); border-radius: var(--cg-radius-lg); box-shadow: var(--cg-shadow-lg); overflow: hidden;
}
.cg-quick-input-row {
  display: flex; align-items: center; gap: var(--cg-space-3); padding: var(--cg-space-3) var(--cg-space-4);
  border-bottom: var(--cg-border-thin) solid var(--cg-border); color: var(--cg-text-muted);
}
.cg-quick-input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--cg-text); font-size: var(--cg-font-size-md); }
.cg-quick-list { list-style: none; margin: 0; padding: var(--cg-space-2); max-height: 50vh; overflow-y: auto; }
.cg-quick-item {
  display: flex; align-items: center; gap: var(--cg-space-3); padding: var(--cg-space-2) var(--cg-space-3);
  border-radius: var(--cg-radius-md); cursor: pointer;
}
.cg-quick-item i { width: 1.25rem; text-align: center; color: var(--cg-text-muted); }
.cg-quick-label { flex: 0 1 auto; font-weight: var(--cg-font-weight-medium); }
.cg-quick-where { flex: 1; text-align: right; color: var(--cg-text-muted); font-size: var(--cg-font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-quick-selected { background: var(--cg-green-soft); }
.cg-quick-selected i { color: var(--cg-green-deep); }
.cg-quick-empty { padding: var(--cg-space-3); color: var(--cg-text-muted); }
.cg-quick-foot { padding: var(--cg-space-2) var(--cg-space-4); border-top: var(--cg-border-thin) solid var(--cg-border); color: var(--cg-text-muted); font-size: var(--cg-font-size-xs); }

/* Nav items — improved vertical rhythm + restrained hover.
   NOTE: no transition here by default, so the active state site.js applies on
   load paints instantly (no green fade-in flash on every navigation). Hover
   transitions are enabled only after site.js flags <body class="cg-nav-ready">. */
.nav-sidebar .nav-link {
  color: var(--cg-text-on-dark-muted);
  border-radius: var(--cg-radius-md);
  margin: 1px var(--cg-space-3);
}
body.cg-nav-ready .nav-sidebar .nav-link {
  transition: background-color var(--cg-transition-fast) var(--cg-ease),
              color var(--cg-transition-fast) var(--cg-ease);
}
.nav-sidebar .nav-link .nav-icon { color: var(--cg-text-on-dark-muted); }
.nav-sidebar .nav-link:hover {
  background-color: var(--cg-dark-elevated);
  color: var(--cg-text-on-dark);
}
.nav-sidebar .nav-link:hover .nav-icon { color: var(--cg-text-on-dark); }

/* Active module/leaf — green is the interaction color */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-link.active {
  background-color: var(--cg-green);
  color: var(--cg-text-on-brand);
  box-shadow: none;
}
.nav-sidebar .nav-link.active .nav-icon { color: var(--cg-text-on-brand); }

/* Treeview children */
.nav-treeview .nav-link {
  color: var(--cg-text-on-dark-muted);
  font-size: var(--cg-font-size-sm);
}
.nav-treeview .nav-link:hover {
  background-color: var(--cg-dark-elevated);
  color: var(--cg-text-on-dark);
}
.nav-treeview .nav-link.active {
  background-color: var(--cg-green-dark);
  color: var(--cg-text-on-brand);
}

/* Divider between platform (SuperAdmin/Admin) and modules */
.sidebar .dropdown-divider,
.nav-sidebar .dropdown-divider {
  border-top-color: var(--cg-border-dark);
  margin: var(--cg-space-4) var(--cg-space-5);
}

/* ---- Buttons ---- */
.btn-primary {
  --bs-btn-bg: var(--cg-green);
  --bs-btn-border-color: var(--cg-green);
  --bs-btn-hover-bg: var(--cg-green-dark);
  --bs-btn-hover-border-color: var(--cg-green-dark);
  --bs-btn-active-bg: var(--cg-green-dark);
  --bs-btn-active-border-color: var(--cg-green-dark);
  --bs-btn-color: var(--cg-text-on-brand);
  --bs-btn-hover-color: var(--cg-text-on-brand);
  --bs-btn-active-color: var(--cg-text-on-brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--cg-green-deep);
  --bs-btn-border-color: var(--cg-green);
  --bs-btn-hover-bg: var(--cg-green);
  --bs-btn-hover-border-color: var(--cg-green);
  --bs-btn-hover-color: var(--cg-text-on-brand);
}
/* AdminLTE 3 bundles Bootstrap 4, which colors buttons with plain properties and ignores the --bs-btn-* variables above. */
.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
  background-color: var(--cg-green);
  border-color: var(--cg-green);
  color: var(--cg-text-on-brand);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--cg-green-dark);
  border-color: var(--cg-green-dark);
  color: var(--cg-text-on-brand);
}
.btn-outline-primary { color: var(--cg-green-deep); border-color: var(--cg-green); }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active {
  background-color: var(--cg-green);
  border-color: var(--cg-green);
  color: var(--cg-text-on-brand);
}

/* ---- Focus ---- */
.btn:focus-visible,
.form-control:focus,
.nav-sidebar .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--cg-focus-ring-width) var(--cg-focus-ring);
  border-color: var(--cg-green);
}

/* ---- Cards ----
   AdminLTE's outline cards carry a hardcoded blue top accent that --bs-primary
   doesn't reach; neutralize it to a token border so panels read calm/on-brand. */
.card { border-color: var(--cg-border); }
.card.card-outline { border-top-color: var(--cg-border); }
.card.card-primary:not(.card-outline) > .card-header { background-color: var(--cg-green); color: var(--cg-text-on-brand); }

/* ---- Footer ---- */
footer.footer {
  background-color: var(--cg-surface);
  border-top-color: var(--cg-border) !important;
  color: var(--cg-text-muted);
  font-size: var(--cg-font-size-sm);
}