/* ============================================================
   Bootstrap 5 variable remap.

   Pipes our design tokens into Bootstrap's own `--bs-*` custom
   properties so every Bootstrap component (buttons, cards, forms,
   tables, links, .text-muted, etc.) inherits Geist + token colors
   without per-view restyling.

   Lives in entwineapp.css (not entwine-tokens.css) because
   app.min.css defines these same `--bs-*` variables at :root with
   equal specificity — source order wins. This file loads AFTER
   app.min.css per _Layout.cshtml, so our values prevail.

   Both :root and [data-bs-theme="dark"] are listed so any future
   Bootstrap dark-mode `--bs-*` rebind can't shadow ours; token
   values handle the mode-aware swap via entwine-tokens.css.

   Skipped on purpose:
   - --bs-*-rgb triplets — our OKLCH colors can't be expressed as
     integer RGB. Anything using rgba(var(--bs-*-rgb), alpha)
     keeps Bootstrap defaults (acceptable bleed for now).
   - --bs-body-font-size — Bootstrap derives rem sizes from html
     root, not body, so remapping body size only shrinks loose
     text and creates inconsistency. Defer density tuning.
   ============================================================ */
:root,
[data-bs-theme="dark"] {
    /* Typography */
    --bs-body-font-family: var(--font-sans);
    --bs-body-line-height: 1.45;
    --bs-body-color:       var(--text);
    --bs-body-bg:          var(--bg);

    /* Text variants */
    --bs-secondary-color:  var(--text-2);
    --bs-tertiary-color:   var(--text-3);
    --bs-tertiary-bg:      var(--surface-2);
    --bs-emphasis-color:   var(--text);
    --bs-heading-color:    var(--text);

    /* Surfaces & shape */
    --bs-border-color:             var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius:    var(--r-2);
    --bs-border-radius-sm: var(--r-1);
    --bs-border-radius-lg: var(--r-3);
    --bs-border-radius-xl: var(--r-4);
    --bs-border-radius-xxl: var(--r-5);

    /* Links */
    --bs-link-color:       var(--brand-600);
    --bs-link-hover-color: var(--brand-700);

    /* Brand + semantic */
    --bs-primary:  var(--brand-600);
    --bs-success:  var(--ok);
    --bs-warning:  var(--warn);
    --bs-danger:   var(--risk);
    --bs-info:     var(--info);
}

.menu-item.has-sub .menu-submenu {
    display: none;
    position: static;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.menu-item.has-sub.active > .menu-submenu {
    display: block;
    visibility: visible;
    opacity: 1;
    max-height: 1000px; /* Adjust as needed */
}

.menu-item.has-sub > .menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-caret {
    margin-left: 10px;
    transition: transform 0.2s ease;
}

.menu-item.has-sub.active > .menu-link .menu-caret {
    transform: rotate(180deg);
}

/* ENT-235: insight strip — full-width banner for ecosystem-level observations.
   Mirrors the redesign prototype `.insight-strip` pattern. */
.entw-insight-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-3, 10px);
    background: linear-gradient(135deg, var(--brand-50, #eef2ff) 0%, var(--surface, #fff) 60%);
}
.entw-insight-strip--ok    { background: linear-gradient(135deg, var(--ok-bg, #ecfdf5) 0%, var(--surface, #fff) 60%); }
.entw-insight-strip--warn  { background: linear-gradient(135deg, var(--warn-bg, #fef9c3) 0%, var(--surface, #fff) 60%); }
.entw-insight-strip--risk  { background: linear-gradient(135deg, var(--risk-bg, #fee2e2) 0%, var(--surface, #fff) 60%); }
.entw-insight-strip--info  { background: linear-gradient(135deg, var(--info-bg, #e0f2fe) 0%, var(--surface, #fff) 60%); }
.entw-insight-strip__icon {
    width: 32px; height: 32px;
    border-radius: var(--r-2, 8px);
    display: grid; place-items: center;
    background: var(--brand-600, #4e73df);
    color: #fff;
    font-size: 16px;
    flex: 0 0 32px;
}
.entw-insight-strip--ok   .entw-insight-strip__icon { background: var(--ok,   #16a34a); }
.entw-insight-strip--warn .entw-insight-strip__icon { background: var(--warn, #f59e0b); }
.entw-insight-strip--risk .entw-insight-strip__icon { background: var(--risk, #dc2626); }
.entw-insight-strip--info .entw-insight-strip__icon { background: var(--info, #2563eb); }
.entw-insight-strip__body { flex: 1; min-width: 0; }
.entw-insight-strip__title { font-weight: 600; font-size: 13.5px; color: var(--text, #111827); }
.entw-insight-strip__text  { font-size: 12.5px; color: var(--text-2, #4b5563); margin-top: 2px; }

/* ENT-235: recommendation card — per-entity action tile. Renders an
   AgentProposal payload from EntwineAgents with Accept / Dismiss buttons. */
.entw-rec-card {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-3, 10px);
    padding: 12px;
    background: var(--surface, #fff);
    display: grid;
    gap: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.entw-rec-card:hover {
    border-color: var(--border-strong, #cbd5e1);
    box-shadow: var(--shadow-1, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.entw-rec-card__top { display: flex; align-items: center; gap: 6px; }
.entw-rec-card__title { font-size: 13.5px; font-weight: 600; color: var(--text, #111827); line-height: 1.35; }
.entw-rec-card__body  { font-size: 12.5px; color: var(--text-2, #4b5563); line-height: 1.45; }
.entw-rec-card__impact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ok, #16a34a);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.entw-rec-card__confidence {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-3, #6b7280);
    font-family: var(--font-mono, monospace);
}
.entw-rec-card__ctas { display: flex; gap: 6px; margin-top: 2px; }

/* ENT-232: command palette (⌘K). Mirrors the redesign prototype `.cmd-mask`
   / `.cmd` / `.cmd-item` pattern. Mounted globally from _Layout.cshtml via
   commandPalette.js. */
.entw-cmd-mask {
    position: fixed;
    inset: 0;
    background: oklch(0.10 0.012 260 / 0.45);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: start center;
    padding-top: 18vh;
    z-index: 1080;
}
.entw-cmd {
    width: min(640px, 92vw);
    background: var(--surface, #fff);
    border: 1px solid var(--border-strong, #d1d5db);
    border-radius: var(--r-4, 14px);
    box-shadow: var(--shadow-pop, 0 12px 32px -8px rgba(15, 23, 42, 0.18));
    overflow: hidden;
}
.entw-cmd-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.entw-cmd-input i {
    color: var(--text-3, #6b7280);
    font-size: 16px;
}
.entw-cmd-input input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: var(--text, #111827);
}
.entw-cmd-kbd {
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--surface-2, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    color: var(--text-3, #6b7280);
}
.entw-cmd-list {
    max-height: 360px;
    overflow: auto;
    padding: 6px;
}
.entw-cmd-section-title {
    padding: 8px 10px 4px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4, #9ca3af);
    font-weight: 600;
}
.entw-cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-2, 6px);
    font-size: 13.5px;
    color: var(--text, #111827);
    cursor: pointer;
}
.entw-cmd-item i {
    color: var(--text-3, #6b7280);
    flex: 0 0 16px;
}
.entw-cmd-item.on,
.entw-cmd-item:hover {
    background: var(--surface-2, #f3f4f6);
}
.entw-cmd-meta {
    margin-left: auto;
    color: var(--text-3, #6b7280);
    font-size: 12px;
}
.entw-cmd-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-3, #6b7280);
    font-size: 13px;
}

/* ENT-231 / ENT-233: KPI metric tile, now backed by design tokens. */
.metric-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, rgba(110, 126, 145, 0.18));
    border-left-width: 3px;
    border-radius: var(--r-4, 14px);
    padding: 16px 18px 14px;
    box-shadow: var(--shadow-1, 0 1px 0 rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04));
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2, 0 8px 20px -8px rgba(15, 23, 42, 0.12));
}
.metric-card--primary { border-left-color: #4e73df; }
.metric-card--success { border-left-color: #1cc88a; }
.metric-card--info    { border-left-color: #36b9cc; }
.metric-card--warning { border-left-color: #f6c23e; }
.metric-card--danger  { border-left-color: #e74a3b; }
.metric-card--hero {
    background:
        radial-gradient(900px 200px at 100% 0%, rgba(78, 115, 223, 0.10), transparent 60%),
        #fff;
}
.metric-card__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.metric-card__body { min-width: 0; flex: 1; }
.metric-card__label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    font-weight: 600;
}
.metric-card__value {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: 4px;
    color: #1f2937;
    line-height: 1.1;
}
.metric-card--hero .metric-card__value { font-size: 36px; }
.metric-card__scale {
    font-size: 16px;
    color: #6b7280;
    font-weight: 500;
    margin-left: 4px;
}
.metric-card__sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}
.metric-card__delta {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    min-height: 18px;
}
.metric-card__delta--up   { color: #16a34a; }
.metric-card__delta--down { color: #dc2626; }
.metric-card__delta--flat { color: #6b7280; }
.metric-card__delta-spacer { visibility: hidden; }
.metric-card__glyph {
    color: rgba(110, 126, 145, 0.35);
    font-size: 28px;
    line-height: 1;
    flex: 0 0 32px;
    text-align: right;
}
.metric-card__spark {
    height: 36px;
    margin-top: 4px;
}
.metric-card__spark svg { display: block; width: 100%; height: 36px; }

/* ENT-230: workspace pill — sits at the top of the sidebar above the dynamic
   menu. Avatar tile + client name + tier chip. Hover surfaces a subtle
   border tint. Click routes to /ClientPortal/Subscription. */
.workspace-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(110, 126, 145, 0.18);
    border-radius: 10px;
    background: rgba(110, 126, 145, 0.06);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.workspace-pill:hover {
    border-color: rgba(78, 115, 223, 0.45);
    background: rgba(78, 115, 223, 0.06);
    color: inherit;
    text-decoration: none;
}
.workspace-pill .ws-avatar {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, #e57f3f, #b73d75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
}
.workspace-pill .ws-name {
    font-weight: 600;
    font-size: 13px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workspace-pill .ws-tier {
    font-size: 10px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ============================================================
   Sidebar — rebind the admin template's own `--bs-app-sidebar-*`
   variables to our tokens. The admin template defines these on
   `.app-sidebar` (e.g. `.app-sidebar .menu .menu-item.active:not(.has-sub)
   > .menu-link { background: var(--bs-app-sidebar-menu-link-active-bg) }`)
   with specificity (0,6,0) — higher than any plain `.app-sidebar .menu-link`
   rule we could add. The clean fix is to rebind the variables, not fight
   the cascade.

   Loaded AFTER app.min.css per _Layout.cshtml ordering, so our
   .app-sidebar block wins over the template's defaults on cascade.
   Tokens are mode-aware (see entwine-tokens.css dark-mode block),
   so this one declaration covers both themes.
   ============================================================ */
.app-sidebar {
    /* Surfaces */
    --bs-app-sidebar-border-color:   var(--border);

    /* Menu rows */
    --bs-app-sidebar-menu-link-color:                var(--text-2);
    --bs-app-sidebar-menu-link-active-color:         var(--brand-700);
    --bs-app-sidebar-menu-link-active-bg:            var(--brand-50);
    --bs-app-sidebar-menu-link-active-font-weight:   500;
    --bs-app-sidebar-menu-link-hover-bg:             var(--surface-2);
    --bs-app-sidebar-menu-link-border-radius:        var(--r-2);
    --bs-app-sidebar-menu-link-padding-x:            10px;
    --bs-app-sidebar-menu-link-padding-y:            7px;
    --bs-app-sidebar-menu-link-line-height:          1.45;

    /* Section header */
    --bs-app-sidebar-menu-header-color:       var(--text-4);
    --bs-app-sidebar-menu-header-font-size:   10.5px;
    --bs-app-sidebar-menu-header-font-weight: 600;
}
[data-bs-theme="dark"] .app-sidebar {
    /* Brand-50 in dark mode resolves to a softer brand tint via tokens.
       Re-asserted here so any future template dark-mode block can't shadow it. */
    --bs-app-sidebar-menu-link-active-color: oklch(0.86 0.12 248);
}

/* ============================================================
   Sidebar menu — supplemental bridge rules for things the admin
   template's variables don't cover: hover color, icon opacity,
   transitions, caret rotation, submenu padding. The active-state
   background/color is handled by the variable rebind above; these
   rules add behavioural polish only.
   ============================================================ */

/* Sidebar container — flat surface + right border, matches prototype .sidebar */
.app-sidebar {
    background: var(--surface, #ffffff);
    border-right: 1px solid var(--border, rgba(110, 126, 145, 0.18));
}

/* Menu row — prototype .nav-item, applied to the clickable link */
.app-sidebar .menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--r-2, 6px);
    color: var(--text-2, #4b5563);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 400;
    position: relative;
    user-select: none;
    transition: background .12s, color .12s;
    text-decoration: none;
}
.app-sidebar .menu-link:hover {
    background: var(--surface-2, #f3f4f6);
    color: var(--text, #111827);
    text-decoration: none;
}

/* Active row — prototype .nav-item.active */
.app-sidebar .menu-item.active > .menu-link,
.app-sidebar .menu-item.has-sub.active > .menu-link {
    background: var(--brand-50, oklch(0.97 0.02 248));
    color: var(--brand-700, oklch(0.46 0.19 260));
    font-weight: 500;
}
[data-bs-theme="dark"] .app-sidebar .menu-item.active > .menu-link {
    color: oklch(0.86 0.12 248);
}

/* Row internals — icon, label, caret */
.app-sidebar .menu-link .menu-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: currentColor;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-sidebar .menu-link .menu-icon i { font-size: 14px; }
.app-sidebar .menu-link .menu-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-sidebar .menu-link .menu-caret {
    margin-left: 4px;
    color: var(--text-3, #6b7280);
    font-size: 10px;
    transition: transform .15s;
}
.app-sidebar .menu-item.expand > .menu-link .menu-caret,
.app-sidebar .menu-item.has-sub.active > .menu-link .menu-caret {
    transform: rotate(90deg);
}

/* Section header — prototype .nav-section-title */
.app-sidebar .menu-header {
    padding: 12px 16px 4px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4, #9ca3af);
    font-weight: 600;
}

/* Divider — token-based separator */
.app-sidebar .menu-divider {
    height: 1px;
    margin: 8px 12px;
    background: var(--border, rgba(110, 126, 145, 0.18));
}

/* Submenu — slight indent + slightly smaller rows */
.app-sidebar .menu-submenu {
    padding-left: 10px;
}
.app-sidebar .menu-submenu .menu-link {
    font-size: 13px;
    padding: 6px 10px;
}

/* ENT-229: sidebar count badges — prototype .nav-item .count pattern,
   pill + tabular numerics, brand tint when its row is active. */
.menu-count {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-3, rgba(110, 126, 145, 0.12));
    color: var(--text-3, #6b7280);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.menu-item.active > .menu-link .menu-count,
.menu-item.has-sub.active > .menu-link .menu-count {
    background: var(--brand-100, rgba(78, 115, 223, 0.15));
    color: var(--brand-700, #4e73df);
}
/* When the menu has a caret, the badge sits between text and caret;
   the caret claims its own margin so the badge tucks neatly to its left. */
.menu-item.has-sub > .menu-link .menu-count {
    margin-left: auto;
    margin-right: 6px;
}
.ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
}

    .ibox.collapsed .ibox-content {
        display: none;
    }

    .ibox.collapsed .fa.fa-chevron-up:before {
        content: "\f078";
    }

    .ibox.collapsed .fa.fa-chevron-down:before {
        content: "\f077";
    }

    .ibox:after,
    .ibox:before {
        display: table;
    }

.ibox-title {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 2px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 15px 90px 8px 15px;
    min-height: 48px;
    position: relative;
    clear: both;
}

.ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
}

.ibox-footer {
    color: inherit;
    border-top: 1px solid #e7eaec;
    font-size: 90%;
    background: #ffffff;
    padding: 10px 15px;
}
.user-drop-zone {
    min-width: 200px;
    padding: 5px;
}

.drop-zone-active {
    background-color: #e9ecef;
    border: 2px dashed #007bff;
}

.potential-drop-zone {
    background-color: #f8f9fa;
}
.badge .btn-close {
    font-size: 0.5rem;
    transform: translate(50%, -50%);
    color: red;
}
.avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.btn.btn-icon-xxs {
    padding: 0.075rem 0.2375rem;
}