/* ── CSS Variables: dark mode is :root default, html.light overrides ── */
:root {
    --primary-color: #123456;
    --bg:            #0f1117;
    --surface:       #1a1d27;
    --surface2:      #242836;
    --border:        #2e3348;
    --text:          #e1e4ed;
    --muted:         #8b92a8;
    --accent:        #4f8cff;
    --accent2:       #6c5ce7;
    --green:         #00d68f;
    --amber:         #ffaa00;
    --red:           #ff6b6b;
    --glass:         rgba(26, 29, 39, 0.85);
    --glow:          rgba(79, 140, 255, 0.12);
    --transition-speed: 0.25s;
}

html.light {
    --bg:      #f5f6fa;
    --surface: #ffffff;
    --surface2:#eef0f6;
    --border:  #d1d5e0;
    --text:    #1a1d27;
    --muted:   #5a6178;
    --accent:  #3b7dff;
    --accent2: #5b4bc9;
    --green:   #00b37a;
    --amber:   #e69500;
    --red:     #e04444;
    --glass:   rgba(255, 255, 255, 0.85);
    --glow:    rgba(59, 125, 255, 0.08);
}

/* ── Base ── */
html {
    background: var(--bg) !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:  var(--bg) !important;
    color:       var(--text) !important;
    min-height:  100vh;
    display:     flex;
    flex-direction: column;
    transition:  background var(--transition-speed), color var(--transition-speed);
}

/* ── Navbar (glassmorphic) ── */
.navbar {
    background:          var(--glass) !important;
    backdrop-filter:     blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom:       1px solid var(--border);
    padding:             10px 24px;
    transition:          background var(--transition-speed), border-color var(--transition-speed);
}

.navbar-brand {
    color:       var(--text) !important;
    font-weight: 600;
    font-size:   1.05rem;
    display:     flex;
    align-items: center;
    gap:         8px;
}

.navbar-brand:hover {
    color: var(--accent) !important;
}

.nav-link {
    color:         var(--muted) !important;
    font-size:     0.875rem;
    padding:       6px 12px !important;
    border-radius: 7px;
    transition:    all 0.2s;
}

.nav-link:hover {
    color:            var(--accent) !important;
    background-color: rgba(79, 140, 255, 0.1);
}

.nav-item.active .nav-link {
    color:            var(--accent) !important;
    background-color: rgba(79, 140, 255, 0.15);
    font-weight:      500;
}

.navbar-toggler {
    border-color: var(--border);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28225,228,237,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html.light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826,29,39,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Navbar logo ── */
.navbar-logo {
    height:        28px;
    width:         28px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
    /* Slight brightness boost so the navy logo pops on a dark navbar */
    filter:        brightness(1.15);
    transition:    filter var(--transition-speed);
}

html.light .navbar-logo {
    /* On light navbar the navy circle looks clean — no extra filter needed */
    filter: none;
}

/* ── Theme toggle (pill slider) ── */
.theme-toggle {
    position:      relative;
    width:         52px;
    height:        28px;
    border-radius: 14px;
    background:    var(--surface2);
    border:        1.5px solid var(--border);
    cursor:        pointer;
    padding:       0;
    flex-shrink:   0;
    transition:    background 0.35s, border-color 0.35s;
}

/* Sliding thumb */
.theme-toggle::before {
    content:       '';
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    var(--muted);
    box-shadow:    0 1px 4px rgba(0, 0, 0, 0.35);
    transition:    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                   background 0.35s;
}

/* Moon icon on the right in dark mode */
.theme-toggle::after {
    content:     '🌙';
    position:    absolute;
    right:       5px;
    top:         50%;
    transform:   translateY(-50%);
    font-size:   11px;
    line-height: 1;
    opacity:     0.6;
    pointer-events: none;
    transition:  opacity 0.3s;
}

/* Light mode: slide thumb right, turn track accent-blue, show sun on left */
html.light .theme-toggle {
    background:   var(--accent);
    border-color: var(--accent);
}

html.light .theme-toggle::before {
    transform:  translateX(24px);
    background: #fff;
}

html.light .theme-toggle::after {
    content: '☀️';
    right:   auto;
    left:    5px;
    opacity: 0.9;
}

.theme-toggle:hover {
    border-color: var(--accent);
    box-shadow:   0 0 0 3px var(--glow);
}

/* ── Logout button ── */
#logout-button {
    background:    transparent;
    border:        1px solid var(--border);
    border-radius: 7px;
    padding:       5px 14px;
    font-size:     0.82rem;
    color:         var(--red);
    cursor:        pointer;
    transition:    all 0.2s;
}

#logout-button:hover {
    background:   rgba(255, 107, 107, 0.12);
    border-color: var(--red);
}

/* ── Admin dropdown ── */
.admin-dropdown-toggle {
    border:        1px solid var(--border) !important;
    border-radius: 7px !important;
    padding:       4px 10px !important;
    color:         var(--muted) !important;
    transition:    all 0.2s;
}

.admin-dropdown-toggle:hover,
.admin-dropdown-toggle.show {
    border-color: var(--accent) !important;
    color:        var(--accent) !important;
    background:   rgba(79, 140, 255, 0.08) !important;
}

.admin-dropdown-menu {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 8px;
    box-shadow:    0 6px 20px rgba(0, 0, 0, 0.25);
    min-width:     160px;
}

.admin-dropdown-menu .dropdown-item {
    color:      var(--text);
    font-size:  0.875rem;
    padding:    7px 14px;
    transition: background 0.15s, color 0.15s;
}

.admin-dropdown-menu .dropdown-item:hover {
    background: rgba(79, 140, 255, 0.1);
    color:      var(--accent);
}

/* ── Welcome tagline + timezone line ── */
.welcome-tz {
    font-size:     0.78rem;
    color:         var(--muted);
    margin-top:    -0.15rem;
    margin-bottom: 0.2rem;
    letter-spacing: 0.02em;
}
.welcome-tagline {
    color:         var(--muted);
    font-size:     0.9rem;
    font-style:    italic;
    margin-top:    0.1rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

/* ── Login hero ── */
.login-hero {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    text-align:     center;
    padding:        4rem 1rem;
    gap:            1rem;
}

.login-logo {
    width:         72px;
    height:        72px;
    border-radius: 50%;
    object-fit:    cover;
    margin-bottom: 0.5rem;
    filter:        brightness(1.1);
}

.login-title {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--text);
    margin:      0;
}

.login-subtitle {
    color:      var(--muted);
    font-size:  0.95rem;
    max-width:  420px;
    margin:     0;
    line-height: 1.6;
}

.login-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           0.5rem;
    margin-top:    0.5rem;
    padding:       0.7rem 2rem;
    background:    var(--accent);
    color:         #fff;
    border:        none;
    border-radius: 10px;
    font-size:     0.95rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow:    0 4px 14px rgba(79, 140, 255, 0.35);
}

.login-btn:hover {
    background:  var(--accent2);
    transform:   translateY(-1px);
    box-shadow:  0 6px 20px rgba(79, 140, 255, 0.45);
}

.login-btn-icon {
    font-size: 1rem;
}

.login-note {
    font-size: 0.75rem;
    color:     var(--muted);
    margin:    0;
}

/* ── Error pages ── */
.error-page {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         5rem 1rem;
    gap:             0.75rem;
}

.error-code {
    font-size:   6rem;
    font-weight: 800;
    line-height: 1;
    background:  linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-title {
    font-size:   1.5rem;
    font-weight: 700;
    color:       var(--text);
    margin:      0;
}

.error-desc {
    color:     var(--muted);
    font-size: 0.9rem;
    max-width: 380px;
    margin:    0;
}

.error-btn {
    margin-top:    0.75rem;
    display:       inline-block;
    padding:       0.55rem 1.5rem;
    border:        1px solid var(--border);
    border-radius: 8px;
    color:         var(--text);
    text-decoration: none;
    font-size:     0.875rem;
    transition:    border-color 0.2s, background 0.2s;
}

.error-btn:hover {
    border-color: var(--accent);
    background:   var(--glow);
    color:        var(--accent);
}

/* ── DataTables loading skeleton ── */
.dt-loading-skeleton {
    padding: 1rem;
}

.skeleton-row {
    display:       flex;
    gap:           1rem;
    margin-bottom: 0.65rem;
    align-items:   center;
}

.skeleton-cell {
    height:        14px;
    border-radius: 6px;
    background:    linear-gradient(
        90deg,
        var(--surface2) 25%,
        var(--border)   50%,
        var(--surface2) 75%
    );
    background-size: 200% 100%;
    animation:     shimmer 1.4s infinite;
    flex:          1;
}

.skeleton-cell.short  { max-width: 100px; }
.skeleton-cell.medium { max-width: 200px; }

@keyframes shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Profile header ── */
.profile-header {
    margin-bottom: 1.5rem;
}

.profile-header h2 {
    font-size:   1.6rem;
    font-weight: 700;
    color:       var(--text);
    margin-bottom: 0.25rem;
}

/* ── Info cards row (GitHub, Computer, etc.) ── */
.info-cards-row {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.75rem;
    margin-bottom: 2rem;
}

.info-card {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 12px;
    padding:       0.75rem 1.25rem;
    transition:    border-color 0.2s, box-shadow 0.2s;
    cursor:        default;
}

.info-card:hover {
    border-color: var(--accent);
    box-shadow:   0 0 0 3px var(--glow);
}

.info-card-icon {
    font-size:  1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.info-card-content {
    display:        flex;
    flex-direction: column;
    gap:            1px;
}

.info-card-label {
    font-size:      0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color:          var(--muted);
    font-weight:    600;
}

.info-card-value {
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--text);
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
}

.info-card-sub {
    font-size: 0.75rem;
    color:     var(--muted);
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
}

/* ── Section label above table cards ── */
.section-label {
    font-size:     0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight:   600;
    color:         var(--muted);
    margin-bottom: 0.6rem;
}

.section-label a {
    color:           var(--accent);
    text-decoration: none;
    font-weight:     500;
    letter-spacing:  0;
    text-transform:  none;
}

.section-label a:hover {
    text-decoration: underline;
}

/* ── Page hero (lookup pages) ── */
.page-hero {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.5rem;
    flex-wrap:       wrap;
}

.page-hero-title {
    font-size:     1.5rem;
    font-weight:   700;
    color:         var(--text);
    margin-bottom: 0.2rem;
}

.page-hero-desc {
    color:     var(--muted);
    font-size: 0.88rem;
    margin:    0;
}

/* ── Table card hint text ── */
.table-card-hint {
    font-size: 0.75rem;
    color:     var(--muted);
    font-style: italic;
}

/* ── Type badge (dl-lookup group_type) ── */
.type-badge {
    display:       inline-block;
    border-radius: 20px;
    padding:       2px 10px;
    font-size:     0.72rem;
    font-weight:   700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space:   nowrap;
}

/* ── DataTable cell helpers ── */
.dt-name {
    font-weight: 500;
    color:       var(--text);
}

.dt-date {
    font-size: 0.82rem;
    color:     var(--muted);
    white-space: nowrap;
}

.gh-username {
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
    font-size:   0.85rem;
}

.gh-icon {
    margin-right: 4px;
    opacity: 0.6;
}

/* ── DataTables controls polish ── */
.dt-controls-top {
    padding: 0.75rem 1rem 0;
}

.dt-controls-bottom {
    padding:    0 1rem 0.5rem;
    border-top: 1px solid var(--border);
}

/* Remove default DataTables label wrapper gap */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    white-space: nowrap;
}

/* Search input full width on its side */
.dataTables_wrapper .dataTables_filter {
    display:         flex;
    justify-content: flex-end;
}

.dataTables_wrapper .dataTables_filter input {
    width:       100%;
    min-width:   300px;
}

.dataTables_wrapper .dataTables_filter {
    flex: 1;
}

/* Hide the "Search" label text, keep only the input */
.dataTables_wrapper .dataTables_filter label {
    font-size: 0;
}

.dataTables_wrapper .dataTables_filter input {
    font-size: 0.85rem;
}

/* ── Table card ── */
.table-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 12px;
    overflow:      hidden;
    margin-bottom: 1.5rem;
    transition:    border-color var(--transition-speed);
}

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

.table-card-title {
    margin:      0;
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--text);
}

.count-badge {
    background:    rgba(79, 140, 255, 0.15);
    color:         var(--accent);
    border:        1px solid rgba(79, 140, 255, 0.3);
    border-radius: 20px;
    padding:       2px 10px;
    font-size:     0.72rem;
    font-weight:   700;
    letter-spacing: 0.03em;
}

.table-card-body {
    padding: 0;
}

/* Remove double borders when table is inside a card */
.table-card .table {
    margin:        0 !important;
    border-radius: 0;
}

.table-card .table thead th {
    border-top: none !important;
}

/* DataTables controls padding inside a card */
.table-card .dataTables_wrapper {
    padding: 0.85rem 1.1rem 0;
}

.table-card .dataTables_wrapper > .row:last-child {
    padding:    0.6rem 0 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0;
}

/* ── Table links — covers both custom .table-link and DB-generated <a> tags ── */
.table-link,
.table td a,
.table-card .table td a {
    color:           var(--accent);
    text-decoration: none;
    font-size:       0.875rem;
}

.table-link:hover,
.table td a:hover,
.table-card .table td a:hover {
    color:           var(--accent2);
    text-decoration: underline;
}

.table td a::after,
.table-card .table td a::after {
    content:      ' →';
    font-size:    0.65em;
    opacity:      0.4;
    transition:   opacity 0.2s, color 0.2s;
}

.table td a:hover::after,
.table-card .table td a:hover::after {
    opacity: 0.9;
}


/* ── Main content ── */
.main-content {
    flex:    1;
    padding: 2rem 0;
}

/* ── Cards / surfaces ── */
.card {
    background:   var(--surface) !important;
    border-color: var(--border) !important;
    color:        var(--text)   !important;
    transition:   background var(--transition-speed), border-color var(--transition-speed);
}

.card-header, .card-footer {
    background:   var(--surface2) !important;
    border-color: var(--border)   !important;
    color:        var(--text)     !important;
}

/* ── Tables — override Bootstrap's CSS variable system ── */
.table {
    /* Override Bootstrap's own CSS variables so internal rules pick up our theme */
    --bs-table-bg:             var(--surface);
    --bs-table-striped-bg:     var(--surface2);
    --bs-table-striped-color:  var(--text);
    --bs-table-hover-bg:       rgba(79, 140, 255, 0.1);
    --bs-table-hover-color:    var(--text);
    --bs-table-border-color:   var(--border);
    --bs-table-color:          var(--text);
    color:        var(--text);
    border-color: var(--border);
    margin-top:   1rem;
    margin-bottom: 1rem;
    transition:   color var(--transition-speed), border-color var(--transition-speed);
}

/* Header cells */
.table thead th,
.table > thead > tr > th {
    background-color: var(--surface2) !important;
    color:            var(--text)     !important;
    border-color:     var(--border)   !important;
    font-weight:      600;
}

/* All body cells — force surface + correct text/border */
.table > tbody > tr > td,
.table > tbody > tr > th {
    background-color: var(--surface)  !important;
    color:            var(--text)     !important;
    border-color:     var(--border)   !important;
}

/* Striped odd rows */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--surface2) !important;
    color:            var(--text)     !important;
}

/* Hover rows */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: rgba(79, 140, 255, 0.1) !important;
    color:            var(--text) !important;
}

/* ── DataTables overrides ── */
.dataTables_wrapper {
    color: var(--text);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 8px;
    color:         var(--text);
    padding:       0.45rem 0.75rem;
    font-size:     0.85rem;
    transition:    background var(--transition-speed),
                   border-color var(--transition-speed),
                   box-shadow var(--transition-speed),
                   color var(--transition-speed);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--accent);
    box-shadow:   0 0 0 3px var(--glow);
    outline:      none;
}

.dataTables_wrapper .dataTables_length select {
    padding-right:     2rem;
    /* style the native dropdown arrow in both themes */
    appearance:        auto;
    -webkit-appearance: auto;
}
/* Ensure length/filter dropdowns look right when opened */
.dataTables_wrapper .dataTables_length select option {
    background: var(--surface);
    color:      var(--text);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color:      var(--muted);
    transition: color var(--transition-speed);
}

/* ── Pagination — wire Bootstrap's own BS variables to our theme vars ── */
/* This makes .page-link / .page-item inherit our palette automatically   */
.dataTables_wrapper .dataTables_paginate .pagination {
    --bs-pagination-color:                 var(--text);
    --bs-pagination-bg:                    var(--surface);
    --bs-pagination-border-color:          var(--border);
    --bs-pagination-hover-color:           var(--accent);
    --bs-pagination-hover-bg:              rgba(79, 140, 255, 0.1);
    --bs-pagination-hover-border-color:    var(--accent);
    --bs-pagination-active-color:          #fff;
    --bs-pagination-active-bg:             var(--accent);
    --bs-pagination-active-border-color:   var(--accent);
    --bs-pagination-disabled-color:        var(--muted);
    --bs-pagination-disabled-bg:           var(--surface);
    --bs-pagination-disabled-border-color: var(--border);
    --bs-pagination-focus-box-shadow:      0 0 0 3px var(--glow);
    gap: 2px;
}

/* Smooth color transitions on every pagination button */
.dataTables_wrapper .dataTables_paginate .pagination .page-item {
    margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
    border-radius: 6px !important;
    font-size:     0.82rem;
    transition:    background-color var(--transition-speed),
                   border-color     var(--transition-speed),
                   color            var(--transition-speed);
}

/* Fallback — handles DataTables without Bootstrap pagination integration */
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item) {
    background:    var(--surface) !important;
    border:        1px solid var(--border) !important;
    border-radius: 6px !important;
    color:         var(--text) !important;
    padding:       0.3rem 0.7rem;
    margin:        0 2px;
    transition:    background-color var(--transition-speed),
                   border-color     var(--transition-speed),
                   color            var(--transition-speed);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:not(.page-item) {
    background:   var(--accent) !important;
    border-color: var(--accent) !important;
    color:        #fff          !important;
    font-weight:  600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.page-item) {
    background:   rgba(79, 140, 255, 0.12) !important;
    border-color: var(--accent)            !important;
    color:        var(--accent)            !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:not(.page-item) {
    color:  var(--muted) !important;
    cursor: default;
    opacity: 0.5;
}

/* ── Form controls ── */
.form-control, .form-select {
    background:   var(--surface);
    border-color: var(--border);
    color:        var(--text);
    transition:   background var(--transition-speed), border-color var(--transition-speed);
}

.form-control:focus, .form-select:focus {
    background:   var(--surface);
    border-color: var(--accent);
    color:        var(--text);
    box-shadow:   0 0 0 3px var(--glow);
}

/* ── Smooth global transitions ── */
*, *::before, *::after {
    transition-property: background-color, border-color, color;
    transition-duration: var(--transition-speed);
    transition-timing-function: ease;
}

/* ── AI Usage Dashboard ──────────────────────────────────────────────────── */

/* Summary stat cards row */
.stat-cards-row {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1rem;
    margin-bottom:         1.5rem;
}
@media (max-width: 900px) { .stat-cards-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-cards-row { grid-template-columns: 1fr; } }

.stat-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 12px;
    padding:       1.25rem 1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           0.25rem;
}
.stat-card-label {
    font-size:     0.7rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         var(--muted);
}
.stat-card-value {
    font-size:     2rem;
    font-weight:   700;
    color:         var(--text);
    line-height:   1.1;
}
.stat-card-sub {
    font-size:     0.75rem;
    color:         var(--muted);
}

/* Tool cards grid */
.tool-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1rem;
    margin-bottom:         1.5rem;
}
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tool-grid { grid-template-columns: 1fr; } }

.tool-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-left:   3px solid var(--tool-color, var(--accent));
    border-radius: 12px;
    padding:       1rem 1.25rem;
    display:       flex;
    flex-direction: column;
    gap:           0.5rem;
}
.tool-card-disabled {
    opacity: 0.5;
    filter:  grayscale(0.6);
}
.tool-card.tool-card-active {
    border-color: var(--tool-color, var(--accent));
    box-shadow: 0 0 0 2px var(--tool-color, var(--accent)), 0 8px 24px rgba(0,0,0,.18);
    transform: translateY(-2px);
}
.tool-card.tool-card-dimmed {
    opacity: .32;
    transition: opacity .2s;
}
.tool-card-skeleton {
    min-height: 110px;
}
.tool-card-header {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}
.tool-card-emoji {
    font-size: 1.1rem;
    line-height: 1;
}
.tool-card-name {
    font-size:   0.85rem;
    font-weight: 600;
    color:       var(--text);
    flex: 1;
}
.tool-card-soon {
    font-size:     0.65rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:         var(--muted);
    background:    var(--surface2);
    border:        1px solid var(--border);
    border-radius: 4px;
    padding:       1px 6px;
}
.tool-card-metrics {
    display: flex;
    gap:     1.25rem;
}
.tool-metric {
    display:        flex;
    flex-direction: column;
    gap:            0.1rem;
}
.tool-metric-val {
    font-size:   1.35rem;
    font-weight: 700;
    color:       var(--text);
    line-height: 1.1;
}
.tool-metric-lbl {
    font-size:     0.65rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:         var(--muted);
}
.tool-card-events {
    font-size:  0.75rem;
    color:      var(--muted);
    margin-top: 0.1rem;
}

/* ── AI Dashboard: custom tables ────────────────────────── */
.ai-table { width:100%; border-collapse:collapse; font-size:.855rem }
.ai-table th { text-align:left; padding:10px 12px; border-bottom:2px solid var(--border); color:var(--muted); font-weight:600; white-space:nowrap }
.ai-table td { padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle }
.ai-table tr:hover td { background:var(--surface2); transition:background .15s }
.ai-prog-cell { display:flex; align-items:center; gap:10px; min-width:140px }
.ai-prog-bar { height:6px; border-radius:3px; background:var(--border); flex:1; min-width:60px; overflow:hidden }
.ai-prog-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),#00d4ff); transition:width .7s ease-out; width:0 }
.ai-table-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:10px }
.ai-search { padding:6px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface2); color:var(--text); font-size:.82rem; width:210px; transition:all .2s; outline:none }
.ai-search:focus { border-color:var(--accent); width:260px }
.ai-search::placeholder { color:var(--muted); opacity:.7 }
.ai-tabs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px }
.ai-tab-btn { padding:4px 14px; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; font-size:.8rem; transition:all .2s; display:inline-flex; align-items:center; gap:6px }
.ai-tab-btn:hover { border-color:var(--accent); color:var(--accent) }
.ai-tab-btn.active { color:#fff; border-color:transparent; background:var(--tab-color, var(--accent)) }
.ai-tab-panel { display:none }
.ai-tab-panel.active { display:block }
.ai-table-controls { display:flex; align-items:center; justify-content:flex-end; padding:10px 14px 0; }
.ai-table-count { font-size:.78rem; color:var(--muted); padding-top:8px }
.ai-tab-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:4px; flex-shrink:0 }
.ai-tab-icon svg { width:14px; height:14px }
.ai-tool-badge { display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 6px; border-radius:20px; font-size:.78rem; font-weight:600; white-space:nowrap }
.ai-rank { color:var(--muted); font-size:.82rem; font-weight:600; min-width:24px; text-align:right }
.ai-stat-big { font-size:2rem; font-weight:700; line-height:1.1; display:block }
.tool-card-icon { display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0 }
.tool-card-icon svg { width:22px; height:22px }
/* Department dropdown */
.ai-select { padding:5px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface2); color:var(--text); font-size:.82rem; cursor:pointer; outline:none; transition:border-color .2s }
.ai-select:focus { border-color:var(--accent) }
/* Tab icon sizing (used by both dept tabs and breakdown tabs) */
.ai-tab-icon svg { width:15px; height:15px }
/* Dept breakdown rank badge */
.ai-rank-badge { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; color:#fff; font-size:.75rem; font-weight:700; flex-shrink:0 }
/* Dept row hover + active */
.dept-row { cursor:pointer; transition:background .12s }
.dept-row:hover td { background:var(--surface2) }
.dept-row-active td { background:rgba(var(--accent-rgb,99,102,241),.08) !important }
/* Dept filter chip */
.ai-filter-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 8px 3px 12px; border-radius:20px; background:var(--accent); color:#fff; font-size:.78rem; font-weight:600 }
.ai-filter-chip-x { background:none; border:none; color:#fff; cursor:pointer; font-size:.85rem; line-height:1; padding:0; opacity:.8 }
.ai-filter-chip-x:hover { opacity:1 }

/* ── AI Source Tab Bar ──────────────────────────────────────────── */
.ai-source-tabbar {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 2px;
    position: sticky;
    top: 56px;
    z-index: 40;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px 20px;
    scrollbar-width: none;
}
.ai-source-tabbar::-webkit-scrollbar { display: none }
.ai-source-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    user-select: none;
    transition: color .2s, border-color .2s;
    flex-shrink: 0;
}
.ai-source-tab:hover { color: var(--text) }
.ai-source-tab.active { color: var(--accent); border-bottom-color: var(--accent) }
.ai-source-tab-disabled { opacity: .4; cursor: default; pointer-events: none }
.ai-src-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    font-size: .65rem;
    font-weight: 700;
    color: var(--muted);
    transition: all .2s;
}
.ai-source-tab.active .ai-src-badge { background: var(--accent); border-color: var(--accent); color: #fff }

/* ── AI Filter Bar ──────────────────────────────────────────────── */
.ai-filter-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    transition: border-color .2s;
}
.ai-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}
.ai-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 200px;
    flex: 1;
    max-width: 320px;
}
.ai-filter-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
}
.ai-filter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-left: auto;
    flex-shrink: 0;
}
.ai-btn-primary {
    padding: 7px 18px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
}
.ai-btn-primary:hover { opacity: .88; transform: translateY(-1px) }
.ai-btn-secondary {
    padding: 7px 18px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .2s, transform .15s;
}
.ai-btn-secondary:hover { border-color: var(--accent); transform: translateY(-1px) }

/* ── Date presets ───────────────────────────────────────────────── */
.ai-date-presets { display: flex; gap: 4px }
.ai-date-preset {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.ai-date-preset:hover { border-color: var(--accent); color: var(--accent) }
.ai-date-preset.active { background: var(--accent); border-color: var(--accent); color: #fff }

/* ── Active filter pills ────────────────────────────────────────── */
.ai-active-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 0 }
.ai-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--accent), var(--accent2, #6c5ce7));
    color: #fff;
    font-size: .73rem;
    font-weight: 600;
    animation: fadeSlideUp .25s ease-out;
    cursor: default;
}
.ai-pill-x {
    opacity: .75;
    cursor: pointer;
    font-size: .78rem;
    background: none;
    border: none;
    color: #fff;
    padding: 0;
    line-height: 1;
}
.ai-pill-x:hover { opacity: 1 }

/* ── Multi-select department dropdown ───────────────────────────── */
.ai-ms-wrapper { position: relative }
.ai-ms-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    font-size: .82rem;
    cursor: pointer;
    min-height: 38px;
    gap: 6px;
    transition: border-color .2s;
    user-select: none;
}
.ai-ms-trigger:hover,
.ai-ms-trigger.open { border-color: var(--accent) }
.ai-ms-trigger.open { border-radius: 8px 8px 0 0 }
.ai-ms-tags { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; min-width: 0 }
.ai-ms-placeholder { color: var(--muted) }
.ai-ms-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-ms-more {
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--surface3);
    color: var(--muted);
    font-size: .7rem;
    font-weight: 600;
}
.ai-ms-arrow { font-size: .6rem; color: var(--muted); flex-shrink: 0; transition: transform .2s }
.ai-ms-trigger.open .ai-ms-arrow { transform: rotate(180deg) }
.ai-ms-panel {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 10px;
    z-index: 50;
    max-height: 260px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    /* animated show/hide */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.ai-ms-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.ai-ms-search {
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: .82rem;
    outline: none;
}
.ai-ms-search::placeholder { color: var(--muted); opacity: .6 }
.ai-ms-list { overflow-y: auto; flex: 1; padding: 4px 0 }
.ai-ms-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: .82rem;
    transition: background .1s;
}
.ai-ms-item:hover { background: var(--surface2) }
.ai-ms-check {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .65rem;
    color: transparent;
    transition: all .15s;
}
.ai-ms-item.selected .ai-ms-check { background: var(--accent); border-color: var(--accent); color: #fff }
.ai-ms-actions {
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    border-top: 1px solid var(--border);
}
.ai-ms-actions button {
    border: none;
    background: none;
    color: var(--accent);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.ai-ms-actions button:hover { text-decoration: underline }
.ai-ms-empty { padding: 12px; text-align: center; color: var(--muted); font-size: .82rem }

/* ── Sortable table headers ─────────────────────────────────────── */
.ai-sortable { cursor: pointer; user-select: none }
.ai-sortable:hover { color: var(--accent) }
.ai-sort-icon { display: inline-block; margin-left: 4px; opacity: .35; font-size: .72rem; transition: opacity .15s }
.ai-sort-icon.active { opacity: 1; color: var(--accent) }

/* ── Activity Breakdown expand rows ─────────────────────────────── */
.bd-app-row { transition: background .12s; }
.bd-app-row:hover { background: var(--surface2); }
.bd-expand-icon { display:inline-block; font-size:.6rem; transition: color .15s; color: var(--muted); }
.bd-expand-row > td { padding: 0 12px 10px 12px; border-top: none !important; }

.bd-expand-inner {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-top: 2px solid var(--bd-color, var(--accent));
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.bd-expand-hdr {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px 8px;
    font-size: .78rem; color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--surface3);
}
.bd-expand-hdr strong { color: var(--text); }
.bd-expand-hdr-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* User cards grid */
.bd-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1px;
    background: var(--border);
}
.bd-user-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--surface2);
    transition: background .12s;
}
.bd-user-card:hover { background: var(--surface3); }

.bd-user-rank {
    flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 700; color: #fff;
    line-height: 1;
}
.bd-user-avatar {
    flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; letter-spacing: -.02em;
}
.bd-user-info { flex: 1; min-width: 0; }
.bd-user-name {
    font-size: .82rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text);
}
.bd-user-dept {
    font-size: .7rem; color: var(--muted);
    margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-user-bar-wrap {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0; width: 110px;
}
.bd-user-bar {
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--border); overflow: hidden;
}
.bd-user-bar-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }
.bd-user-events {
    font-size: .75rem; font-weight: 600;
    min-width: 36px; text-align: right; white-space: nowrap;
}
.bd-no-users {
    padding: 14px 16px; color: var(--muted); font-size: .82rem;
}
.bd-loading { font-style: italic; }

/* ── Show More / Less button in tables ──────────────────────────── */
.tu-show-more-row td { padding: 10px 14px; border-top: 1px solid var(--border); }
.ai-show-more-btn {
    background: none; border: 1px solid var(--border);
    color: var(--accent); font-size: .82rem; font-weight: 500;
    padding: 5px 18px; border-radius: 20px; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ai-show-more-btn:hover { background: var(--surface3); border-color: var(--accent); }

/* ── Dept Breakdown Divider ─────────────────────────────────────── */
.dept-divider-row td { padding: 0; border: none; }
.ai-dept-divider {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px;
    background: var(--surface2);
}
.ai-dept-divider::before,
.ai-dept-divider::after {
    content: ''; flex: 1; height: 1px;
    background: var(--border);
}
.ai-dept-divider-label {
    font-size: .72rem; color: var(--muted);
    white-space: nowrap; letter-spacing: .03em;
    padding: 2px 10px; border-radius: 20px;
    background: var(--surface3);
}

/* ── Drill-down Modal ───────────────────────────────────────────── */
.ai-drill-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.ai-drill-modal.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s;
}
.ai-drill-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: min(740px, 100%);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    transform: scale(.96) translateY(10px);
    transition: transform .2s ease;
}
.ai-drill-modal.open .ai-drill-inner {
    transform: scale(1) translateY(0);
}
.ai-drill-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.ai-drill-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}
.ai-drill-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
}
.ai-drill-close:hover { background: var(--surface2); color: var(--text) }
.ai-drill-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.ai-drill-section-hdr {
    margin: 0 0 10px;
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 700;
}

@keyframes fadeSlideUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── CSV Export Button ──────────────────────────────────────────── */
.ai-export-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 1px solid var(--border);
    color: var(--muted); font-size: .78rem; font-weight: 500;
    padding: 5px 10px; border-radius: 6px; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap; flex-shrink: 0;
}
.ai-export-btn:hover {
    color: var(--accent); border-color: var(--accent);
    background: rgba(79,140,255,.06);
}
.ai-export-btn svg { flex-shrink: 0; }

/* ── Company Adoption Rate strip ────────────────────── */
.ai-adoption-strip {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 18px 24px 14px;
}
.adopt-metric { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 120px; padding: 0 12px; }
.adopt-metric-value { font-size: 1.9rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.adopt-metric-label { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.adopt-metric-sub   { font-size: .68rem; color: var(--muted); margin-top: 1px; }
.adopt-new { color: var(--green) !important; }
.adopt-metric-divider { width: 1px; align-self: stretch; background: var(--border); margin: 4px 0; flex-shrink: 0; }
.adopt-bar-wrap  { width: 100%; margin-top: 14px; }
.adopt-bar-track { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.adopt-bar-fill  { height: 100%; border-radius: 3px; background: var(--green); transition: width .8s cubic-bezier(.4,0,.2,1); }

/* ── Engagement Insights panels ──────────────────────── */
.eng-panels { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; }
@media (max-width: 900px) { .eng-panels { grid-template-columns: 1fr; } }
.eng-panel { padding: 14px 20px 16px; }
.eng-panel-divider { width: 1px; background: var(--border); margin: 12px 0; }
.eng-panel-title { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.eng-panel-body  { display: flex; flex-direction: column; gap: 9px; }
.eng-row { display: flex; align-items: center; gap: 8px; }
.eng-row-lbl { font-size: .76rem; color: var(--text); min-width: 72px; flex-shrink: 0; }
.eng-bar-track { flex: 1; height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.eng-bar-fill  { height: 100%; border-radius: 4px; transition: width .5s; }
.eng-row-pct { font-size: .72rem; color: var(--muted); min-width: 38px; text-align: right; flex-shrink: 0; }
.eng-row-val { font-size: .74rem; font-weight: 600; color: var(--text); min-width: 48px; text-align: right; flex-shrink: 0; }
.eng-empty   { font-size: .8rem; color: var(--muted); padding: 12px 0; }

/* ── Trend Chart ─────────────────────────────────────── */
.ai-trend-wrap { position: relative; }
.ai-trend-svg  { display: block; width: 100%; overflow: visible; }

.ai-trend-legend {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    padding: 2px 64px 10px;
    font-size: .75rem;
}
.ai-trend-legend-item { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.ai-trend-legend-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ai-trend-legend-dash {
    width: 18px; height: 2px; border-radius: 1px; flex-shrink: 0;
    background: var(--muted);
    border-top: 2px dashed var(--muted);
    background: none;
}

/* ── Trend source tab bar ────────────────────────────── */
.ai-trend-src-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 10px 14px 6px;
}
.ai-trend-src-tab {
    padding: 4px 12px; font-size: .76rem; font-weight: 500;
    border: 1px solid var(--border); border-radius: 20px;
    background: none; color: var(--muted); cursor: pointer;
    transition: all .15s;
}
.ai-trend-src-tab:hover { border-color: var(--tc, var(--accent)); color: var(--tc, var(--accent)); }
.ai-trend-src-tab.active {
    background: var(--tc, var(--accent)); color: #fff;
    border-color: var(--tc, var(--accent));
}

.ai-trend-tooltip {
    position: absolute; pointer-events: none;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 12px;
    font-size: .78rem; white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,.22);
    z-index: 10; display: none; top: 8px;
    min-width: 148px;
}
.ai-trend-tt-date { font-weight: 600; margin-bottom: 5px; color: var(--text); font-size: .82rem; }
.ai-trend-tt-row  { display: flex; align-items: center; gap: 6px; padding: 1.5px 0; }
.ai-trend-tt-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ai-trend-tt-lbl  { color: var(--muted); flex: 1; }
.ai-trend-tt-val  { font-weight: 600; color: var(--text); }

.ai-trend-metric {
    padding: 4px 12px; font-size: .78rem; font-weight: 500;
    border: 1px solid var(--border); border-radius: 6px;
    background: none; color: var(--muted); cursor: pointer;
    transition: all .15s;
}
.ai-trend-metric.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ai-trend-metric:not(.active):hover { border-color: var(--accent); color: var(--accent); }

/* ── Adoption Movers ─────────────────────────────────── */
.movers-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
@media (max-width: 860px) { .movers-grid { grid-template-columns: 1fr; } }

.movers-panel { border-right: 1px solid var(--border); }
.movers-panel:last-child { border-right: none; }

.movers-panel-hdr {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px 8px;
    font-size: .8rem; font-weight: 600; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.movers-panel-icon { font-size: .9rem; }
.movers-panel-count {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--surface2); font-size: .7rem; color: var(--muted);
    margin-left: 2px;
}
.movers-panel-body { max-height: 380px; overflow-y: auto; }

.mover-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.mover-row:last-child { border-bottom: none; }
.mover-row:hover { background: var(--surface2); }

.mover-info { display: flex; flex-direction: column; gap: 2px; min-width: 110px; max-width: 140px; }
.mover-dept { font-size: .78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mover-tool { display: flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--muted); }
.mover-tool-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.mover-bars { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mover-bar-row { display: flex; align-items: center; gap: 6px; }
.mover-bar-lbl { font-size: .68rem; color: var(--muted); width: 26px; flex-shrink: 0; }
.mover-bar-track { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.mover-bar-fill  { height: 100%; border-radius: 3px; transition: width .4s; }
.mover-bar-val { font-size: .7rem; color: var(--text); width: 36px; text-align: right; flex-shrink: 0; }

.mover-pct { font-size: .88rem; font-weight: 700; min-width: 54px; text-align: right; flex-shrink: 0; }
.mover-empty { padding: 20px 16px; font-size: .8rem; color: var(--muted); text-align: center; }

/* ── Two-column grid for non-adopters + dept adoption ───────────────────── */
.ai-two-col {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.6fr);
    gap: 16px;
    align-items: start;
}
.ai-two-col .table-card { margin-top: 0; }

/* ── WoW trend chart ─────────────────────────────────────────────────────── */
.wow-chart-wrap { position: relative; width: 100%; }
.wow-chart-wrap svg { display: block; width: 100%; overflow: visible; }
.wow-tooltip {
    position: absolute; pointer-events: none;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 12px; font-size: .78rem;
    color: var(--text); white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    transition: opacity .1s;
    z-index: 10;
}
.wow-xaxis { display: flex; justify-content: space-between; padding: 0 4px;
    font-size: .68rem; color: var(--muted); margin-top: 4px; }

/* ── Dept adoption league table ──────────────────────────────────────────── */
.da-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--border);
}
.da-row:last-child { border-bottom: none; }
.da-dept { font-size: .78rem; font-weight: 500; color: var(--text);
    min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-bar-track { width: 80px; flex-shrink: 0; height: 6px;
    background: var(--border); border-radius: 3px; overflow: hidden; }
.da-bar-fill  { height: 100%; border-radius: 3px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.da-pct  { font-size: .78rem; font-weight: 700; min-width: 44px; text-align: right; flex-shrink: 0; }
.da-hc   { font-size: .7rem; color: var(--muted); min-width: 40px; text-align: right; flex-shrink: 0; padding-right: 2px; }
.da-divider { font-size: .7rem; color: var(--muted); text-align: center;
    padding: 5px 0; border-bottom: 1px dashed var(--border); letter-spacing: .05em; }

/* ── Non-adopter list ────────────────────────────────────────────────────── */
.na-headline {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 0 14px;
}
.na-count { font-size: 2.2rem; font-weight: 800; color: var(--amber); line-height: 1; }
.na-label { font-size: .82rem; color: var(--muted); }
.na-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; border-bottom: 1px solid var(--border);
    font-size: .78rem;
}
.na-row:last-child { border-bottom: none; }
.na-dept { color: var(--text); font-weight: 500;
    min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-bar-track { width: 60px; flex-shrink: 0; height: 5px;
    background: var(--border); border-radius: 3px; overflow: hidden; }
.na-bar-fill  { height: 100%; border-radius: 3px; background: var(--amber);
    transition: width .4s ease; }
.na-n { color: var(--amber); font-weight: 700; flex-shrink: 0; min-width: 40px; text-align: right; padding-right: 2px; }

@media (max-width: 700px) {
    .ai-source-tabbar { top: 0; position: relative; margin: 0 -12px 16px }
    .ai-filter-row { flex-direction: column }
    .ai-filter-actions { margin-left: 0 }
    .ai-filter-group { max-width: 100% }
    .ai-trend-legend { padding-left: 8px; }
    .ai-two-col { grid-template-columns: 1fr; }
}

/* ── AI Chat Widget ────────────────────────────────────────────────────────── */
#ai-chat-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px 10px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 28px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
    font-size: .82rem;
    font-weight: 600;
    transition: transform .15s, box-shadow .15s;
}
#ai-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.3); }
.ai-chat-fab-label { white-space: nowrap; }

.ai-chat-panel {
    position: fixed;
    bottom: 88px;
    right: 28px;
    z-index: 1049;
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 480px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,.22);
    overflow: hidden;
    transform: translateY(16px) scale(.97);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.ai-chat-panel.ai-chat-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.ai-chat-title { font-size: .85rem; font-weight: 700; color: var(--text); }
.ai-chat-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 2px;
    transition: color .15s;
}
.ai-chat-close:hover { color: var(--text); }

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.ai-chat-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: .78rem;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.ai-chat-msg--user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ai-chat-msg--assistant {
    align-self: flex-start;
    background: var(--surface2);
    color: var(--text);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border);
}
.ai-chat-msg--thinking {
    align-self: flex-start;
    background: var(--surface2);
    color: var(--muted);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-chat-dots span {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--muted);
    animation: chatdot .9s infinite ease-in-out;
}
.ai-chat-dots span:nth-child(2) { animation-delay: .15s; }
.ai-chat-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes chatdot {
    0%, 80%, 100% { transform: scale(.7); opacity: .5; }
    40%            { transform: scale(1);  opacity: 1; }
}

.ai-chat-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.ai-chat-input {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: .78rem;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}
.ai-chat-input:focus { border-color: var(--accent); }
.ai-chat-input::placeholder { color: var(--muted); }
.ai-chat-send {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: background .15s, transform .1s;
}
.ai-chat-send:hover { background: var(--accent-hover, var(--accent)); filter: brightness(1.1); }
.ai-chat-send:active { transform: scale(.93); }
.ai-chat-send:disabled { opacity: .45; cursor: not-allowed; }

.ai-chat-error {
    align-self: flex-start;
    background: rgba(239,68,68,.12);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 10px;
    font-size: .75rem;
    padding: 6px 10px;
    max-width: 85%;
}

/* Markdown rendered inside assistant bubbles */
.ai-chat-msg--assistant table.ai-chat-table {
    border-collapse: collapse;
    font-size: .72rem;
    margin: 6px 0;
    width: 100%;
    white-space: nowrap;
}
.ai-chat-msg--assistant table.ai-chat-table th,
.ai-chat-msg--assistant table.ai-chat-table td {
    border: 1px solid var(--border);
    padding: 3px 8px;
    text-align: left;
}
.ai-chat-msg--assistant table.ai-chat-table th {
    background: var(--surface3, var(--surface));
    font-weight: 700;
}
.ai-chat-msg--assistant ol,
.ai-chat-msg--assistant ul {
    padding-left: 18px;
    margin: 4px 0;
}
.ai-chat-msg--assistant li { margin: 2px 0; }
.ai-chat-msg--assistant code {
    background: var(--surface3, var(--surface));
    border-radius: 3px;
    padding: 1px 4px;
    font-size: .72rem;
    font-family: monospace;
}

/* ── Profile Page Enhancements ─────────────────────────────────────────── */

/* Unified card meta grid — matches identity card's horizontal item layout */
.profile-meta-body {
    padding: 1rem 1.5rem;
}

.profile-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.55rem 1rem;
}

.profile-meta-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.85rem 0;
}

.profile-meta-item {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.82rem;
    min-width: 0;
}

.profile-meta-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
    line-height: 1;
}

.profile-meta-svg {
    width:  14px;
    height: 14px;
    fill:   var(--muted);
    flex-shrink: 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.profile-meta-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    min-width: 52px;
}

.profile-meta-value {
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.profile-meta-ok   { color: var(--green); }
.profile-meta-warn { color: var(--amber); }

.profile-meta-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

/* Identity card */
.profile-id-card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: border-color var(--transition-speed);
}
.profile-id-card:hover { border-color: var(--accent); }

.profile-id-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 14px rgba(79, 140, 255, 0.3);
}

.profile-id-body { flex: 1; min-width: 0; }

.profile-id-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.profile-id-title {
    font-size: 0.88rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.profile-id-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.55rem 1rem;
}

.profile-id-meta-item {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.82rem;
    min-width: 0;
}

.profile-id-meta-icon { font-size: 0.85rem; flex-shrink: 0; }

.profile-id-meta-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    min-width: 62px;
}

.profile-id-meta-value {
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Devices */
.profile-device-list { padding: 0.25rem 0; }

.profile-device-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-speed);
}
.profile-device-item:last-child { border-bottom: none; }
.profile-device-item:hover { background: var(--surface2); }

.profile-device-icon { font-size: 1.3rem; flex-shrink: 0; }

.profile-device-info { flex: 1; min-width: 0; }

.profile-device-name {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-device-sub {
    font-size: 0.73rem;
    color: var(--muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-mgmt-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.profile-mgmt-managed {
    background: rgba(0, 214, 143, 0.12);
    color: var(--green);
    border: 1px solid rgba(0, 214, 143, 0.25);
}
.profile-mgmt-unmanaged {
    background: rgba(255, 170, 0, 0.12);
    color: var(--amber);
    border: 1px solid rgba(255, 170, 0, 0.25);
}

/* AI engagement tier badge */
.profile-tier-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.profile-tier-power {
    background: rgba(0, 214, 143, 0.12);
    color: var(--green);
    border: 1px solid rgba(0, 214, 143, 0.25);
}
.profile-tier-regular {
    background: rgba(79, 140, 255, 0.12);
    color: var(--accent);
    border: 1px solid rgba(79, 140, 255, 0.25);
}
.profile-tier-occasional {
    background: rgba(255, 170, 0, 0.12);
    color: var(--amber);
    border: 1px solid rgba(255, 170, 0, 0.25);
}
.profile-tier-light {
    background: rgba(139, 146, 168, 0.1);
    color: var(--muted);
    border: 1px solid rgba(139, 146, 168, 0.2);
}

/* AI usage tool rows */
/* AI list container — matches device/pd list pattern */
.profile-ai-list { padding: 0.25rem 0; }

.profile-ai-tool-row {
    display:       flex;
    align-items:   center;
    gap:           0.85rem;
    padding:       0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition:    background var(--transition-speed);
}
.profile-ai-tool-row:last-child { border-bottom: none; }
.profile-ai-tool-row:hover { background: var(--surface2); }

/* Brand badge icon */
.profile-ai-brand {
    width:           32px;
    height:          32px;
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.profile-ai-brand svg {
    width:  17px;
    height: 17px;
    fill:   #fff;
}

/* Per-tool brand colors */
.profile-ai-brand--gemini   { background: linear-gradient(135deg, #1B73E8, #4285F4); }
.profile-ai-brand--claude   { background: linear-gradient(135deg, #C96437, #E8875A); }
.profile-ai-brand--chatgpt  { background: linear-gradient(135deg, #10A37F, #1DC48D); }
.profile-ai-brand--glean_ai { background: linear-gradient(135deg, #1F5EFF, #5B8DFF); }
.profile-ai-brand--slack_ai { background: linear-gradient(135deg, #4A154B, #7C3F7D); }
.profile-ai-brand--cursor   { background: linear-gradient(135deg, #1C1C1E, #3A3A3C); }

.profile-ai-tool-body { flex: 1; min-width: 0; }

.profile-ai-tool-hdr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.profile-ai-tool-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
}

.profile-ai-tool-stats {
    font-size: 0.7rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.profile-ai-bar-track {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.profile-ai-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), #00d4ff);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0;
}

/* GitHub Copilot badge */
.profile-copilot-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(108, 92, 231, 0.12);
    color: var(--accent2);
    border: 1px solid rgba(108, 92, 231, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* PagerDuty on-call items */
.profile-pd-list { padding: 0.25rem 0; }

.profile-pd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-speed);
}
.profile-pd-item:last-child { border-bottom: none; }
.profile-pd-item:hover { background: var(--surface2); }

.profile-pd-name {
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-pd-level {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 107, 107, 0.1);
    color: var(--red);
    border: 1px solid rgba(255, 107, 107, 0.2);
    flex-shrink: 0;
    white-space: nowrap;
}

/* My Apps pill grid */
.profile-app-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.profile-app-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap;
    cursor: default;
}
.profile-app-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(79, 140, 255, 0.07);
}

/* Device serial number */
.profile-device-serial {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.03em;
}

/* Device SVG icons */
.profile-device-svg {
    width:  22px;
    height: 22px;
    fill:   var(--muted);
    flex-shrink: 0;
    display: block;
}
.profile-device-item:hover .profile-device-svg {
    fill: var(--text);
}

/* GitHub profile card */
.gh-profile-card { overflow: hidden; }

.gh-profile-header {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    padding:     0.85rem 1.25rem;
    background:  #161b22;
    border-bottom: 1px solid #30363d;
}
html.light .gh-profile-header {
    background:    #f6f8fa;
    border-bottom: 1px solid #d0d7de;
}
html.light .gh-logo {
    fill: #1f2328;
}
html.light .gh-profile-title {
    color: #1f2328;
}

.gh-logo {
    width:  18px;
    height: 18px;
    fill:   #f0f6fc;
    flex-shrink: 0;
}

.gh-profile-title {
    font-size:   0.85rem;
    font-weight: 600;
    color:       #f0f6fc;
    flex: 1;
}

.gh-profile-body {
    display:     flex;
    align-items: center;
    gap:         1rem;
    padding:     1.1rem 1.25rem;
}

.gh-avatar-wrap {
    width:        48px;
    height:       48px;
    border-radius: 50%;
    background:   var(--surface2);
    border:       2px solid var(--border);
    display:      flex;
    align-items:  center;
    justify-content: center;
    flex-shrink:  0;
}

.gh-avatar-icon {
    width:  26px;
    height: 26px;
    fill:   var(--muted);
}

.gh-user-info {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    min-width:      0;
}

.gh-username {
    font-size:   1rem;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    color:       var(--text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.gh-link {
    font-size:       0.73rem;
    color:           var(--accent);
    text-decoration: none;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}
.gh-link:hover { text-decoration: underline; }

/* GitHub Teams list */
.profile-gh-teams-list { padding: 0.25rem 0; }

.profile-gh-team-item {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    padding:     0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition:  background var(--transition-speed);
}
.profile-gh-team-item:last-child { border-bottom: none; }
.profile-gh-team-item:hover { background: var(--surface2); }

.profile-gh-team-icon {
    width:      16px;
    height:     16px;
    fill:       var(--muted);
    flex-shrink: 0;
}

.profile-gh-team-info {
    display:        flex;
    align-items:    baseline;
    gap:            0.5rem;
    min-width:      0;
    flex-wrap:      wrap;
}

.profile-gh-team-name {
    font-size:   0.85rem;
    font-weight: 500;
    color:       var(--text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.profile-gh-team-parent {
    font-size:  0.72rem;
    color:      var(--muted);
    white-space: nowrap;
}
.profile-gh-team-parent::before { content: '· '; }

/* Admin org-chart preview badge */
.org-preview-badge {
    font-size:      0.68rem;
    font-weight:    500;
    color:          var(--amber);
    background:     rgba(255, 170, 0, 0.1);
    border:         1px solid rgba(255, 170, 0, 0.25);
    border-radius:  20px;
    padding:        1px 10px;
    margin-left:    0.5rem;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* ── Org Chart v2 (person-centered, drill-down) ─────────────────────────── */
.orgv2 { display: flex; flex-direction: column; }

/* Manager chain strip */
.orgv2-chain {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.25rem;
    padding:     0.75rem 1.25rem 0;
}
.orgv2-chain[style*="none"] { display: none; }

.orgv2-chain-node {
    display:       flex;
    align-items:   center;
    gap:           0.45rem;
    background:    none;
    border:        none;
    padding:       0.3rem 0.55rem;
    border-radius: 8px;
    cursor:        pointer;
    color:         var(--muted);
    font-size:     0.78rem;
    transition:    background var(--transition-speed), color var(--transition-speed);
}
.orgv2-chain-node:hover { background: var(--surface2); color: var(--text); }

.orgv2-chain-av {
    width:           26px;
    height:          26px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.65rem;
    font-weight:     700;
    color:           #fff;
    flex-shrink:     0;
}
.orgv2-chain-name  { font-weight: 500; }
.orgv2-chain-title { font-size: 0.68rem; color: var(--muted); display: none; }
@media (min-width: 640px) { .orgv2-chain-title { display: inline; } }
.orgv2-chain-chevron { font-size: 1rem; color: var(--border); margin-left: auto; }

/* Focus (center) card */
.orgv2-focus {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    margin:        0.6rem 1.25rem;
    padding:       1rem 1.25rem;
    background:    var(--surface2);
    border:        1.5px solid var(--accent);
    border-radius: 14px;
    box-shadow:    0 0 0 3px var(--glow);
    transition:    all var(--transition-speed);
}

.orgv2-focus-av {
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--accent), var(--accent2));
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.1rem;
    font-weight:     700;
    color:           #fff;
    flex-shrink:     0;
    box-shadow:      0 4px 12px rgba(79,140,255,0.3);
    transition:      background var(--transition-speed);
}

.orgv2-focus-info { flex: 1; min-width: 0; }

.orgv2-focus-name {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--text);
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
}
.orgv2-focus-title { font-size: 0.82rem; color: var(--muted); margin: 0.1rem 0; }
.orgv2-focus-meta  { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }

/* Loading spinner — hidden by default; JS sets style="display:flex" to show */
.orgv2-loading {
    display:         none;
    justify-content: center;
    align-items:     center;
    padding:         2rem;
}
.orgv2-spinner {
    width:        32px;
    height:       32px;
    border:       3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation:    orgv2-spin 0.7s linear infinite;
}
@keyframes orgv2-spin { to { transform: rotate(360deg); } }

/* Grid container */
.orgv2-grid {
    padding:    0 1.25rem 1.25rem;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.orgv2-grid-label {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    font-size:     0.72rem;
    font-weight:   600;
    color:         var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    padding-top:   0.25rem;
    border-top:    1px solid var(--border);
    padding-top:   0.75rem;
}
.orgv2-grid-count {
    background:    rgba(79,140,255,0.12);
    color:         var(--accent);
    border:        1px solid rgba(79,140,255,0.25);
    border-radius: 20px;
    padding:       1px 8px;
    font-size:     0.68rem;
}

/* Cards wrapper */
.orgv2-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap:                   0.75rem;
}

/* Individual report card */
.orgv2-card {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    padding:        0.9rem 1rem;
    background:     var(--surface2);
    border:         1px solid var(--border);
    border-radius:  12px;
    transition:     border-color var(--transition-speed),
                    background   var(--transition-speed),
                    transform    0.15s ease;
    user-select:    none;
}
.orgv2-card--mgr {
    cursor: pointer;
}
.orgv2-card--mgr:hover {
    border-color: var(--accent);
    background:   var(--surface);
    transform:    translateY(-2px);
    box-shadow:   0 4px 16px rgba(79,140,255,0.12);
}

.orgv2-card-av {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.82rem;
    font-weight:     700;
    color:           #fff;
    margin-bottom:   0.6rem;
    flex-shrink:     0;
}
.orgv2-card-name {
    font-size:   0.84rem;
    font-weight: 600;
    color:       var(--text);
    line-height: 1.2;
    margin-bottom: 0.15rem;
}
.orgv2-card-title {
    font-size:  0.71rem;
    color:      var(--muted);
    line-height: 1.3;
}
.orgv2-card-meta {
    font-size:  0.67rem;
    color:      var(--muted);
    margin-top: 0.25rem;
    opacity:    0.8;
}
.orgv2-card-reports {
    display:       inline-flex;
    align-items:   center;
    margin-top:    0.5rem;
    font-size:     0.7rem;
    font-weight:   600;
    color:         var(--accent);
    background:    rgba(79,140,255,0.1);
    border:        1px solid rgba(79,140,255,0.2);
    border-radius: 20px;
    padding:       2px 8px;
    transition:    background var(--transition-speed);
}
.orgv2-card--mgr:hover .orgv2-card-reports {
    background: rgba(79,140,255,0.18);
}
.orgv2-card-indirect {
    color:      var(--muted);
    font-weight: 400;
    margin-left: 2px;
}

/* Focus card org-size chips */
.orgv2-focus-orgsize {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    margin-top:  0.4rem;
    flex-wrap:   wrap;
}
.orgv2-size-chip {
    font-size:     0.72rem;
    font-weight:   600;
    color:         var(--accent);
    background:    rgba(79,140,255,0.1);
    border:        1px solid rgba(79,140,255,0.2);
    border-radius: 20px;
    padding:       2px 9px;
}
.orgv2-size-chip--dim {
    color:      var(--muted);
    background: transparent;
    border-color: var(--border);
}
.orgv2-size-sep {
    color:     var(--muted);
    font-size: 0.72rem;
}

.orgv2-empty {
    padding:   2rem 1rem;
    color:     var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

/* ── End Org Chart v2 ── */

/* ── End Profile Page Enhancements ──────────────────────────────────────── */

/* Suggestion chips */
.ai-chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px 0 2px;
    width: 100%;
}
.ai-chat-suggestions-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin: 0 0 2px;
    font-weight: 600;
}
.ai-chat-suggestion {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 5px 12px;
    font-size: .74rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-chat-suggestion:hover {
    background: var(--surface2);
    border-color: var(--accent);
    color: var(--accent);
}