/* ============================================================
   Logged-in chrome refinement - Cosmic Depth accents
   Additive layer over app.dark.css; shares the auth design
   tokens (indigo #6470ff, cyan #22d3ee) from the login series.
   ============================================================ */

:root {
    --enh-bg-deep: #0d1017;
    --enh-bg-raised: #121824;
    --enh-bg-overlay: #18202e;
    --enh-border: #1f2d3d;
    --enh-border-lit: #3a5570;
    --enh-text: #e8f0fb;
    --enh-text-secondary: #8da8c8;
    --enh-accent: #6470ff;
    --enh-accent-hover: #7a84ff;
    --enh-accent-dim: rgba(100, 112, 255, 0.12);
    --enh-accent-dim-strong: rgba(100, 112, 255, 0.18);
    --enh-accent-glow: rgba(100, 112, 255, 0.35);
    --enh-cyan: #22d3ee;
    --enh-gradient: linear-gradient(135deg, #6470ff 0%, #22d3ee 100%);
}

/* ─── Sidebar ──────────────────────────────────────────── */
.slide-menu {
    background: var(--enh-bg-deep) !important;
    border-right: 1px solid var(--enh-border);
    box-shadow: none !important;
}

.slide-menu .navbar-brand h1,
.slide-menu .navbar-brand {
    color: var(--enh-text);
}

.slide-menu .text-muted {
    color: var(--enh-text-secondary) !important;
}

.slide-menu .nav-link {
    color: var(--enh-text-secondary);
    border-radius: 10px;
    margin: 0 0.75rem;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    transition: background 0.2s ease, color 0.2s ease;
}

.slide-menu .nav-link:hover {
    background: var(--enh-accent-dim);
    color: var(--enh-text);
}

.slide-menu .nav-link.active {
    background: var(--enh-accent-dim-strong);
    color: var(--enh-accent-hover) !important;
    box-shadow: none;
}

.slide-menu .sub-menu {
    border-left: 1px solid var(--enh-border);
    margin-left: 1.5rem;
}

.slide-menu .sub-menu .nav-link.active {
    background: var(--enh-accent-dim);
    color: var(--enh-accent-hover) !important;
    box-shadow: none;
}

/* Quota meter + footer card */
.slide-menu .progress {
    background: var(--enh-bg-overlay);
}

.slide-menu .progress-bar {
    background: var(--enh-gradient);
}

.slide-menu .sidebar-footer {
    border-top: 1px solid var(--enh-border);
    background: transparent;
}

/* ─── Cards ────────────────────────────────────────────── */
.card {
    background: var(--enh-bg-raised);
    border: 1px solid var(--enh-border) !important;
    border-radius: 14px;
    box-shadow: none !important;
}

.card:hover {
    border-color: var(--enh-border-lit) !important;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--enh-border);
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--enh-border);
}

/* ─── Primary actions ──────────────────────────────────── */
.btn-primary {
    background: var(--enh-gradient);
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--enh-accent-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--enh-gradient);
    color: #fff !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--enh-accent-glow);
}

.btn-primary.disabled,
.btn-primary:disabled {
    filter: grayscale(0.4) brightness(0.7);
    transform: none;
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--enh-accent-hover) !important;
    border-color: var(--enh-accent) !important;
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--enh-accent-dim) !important;
    color: #fff !important;
    border-color: var(--enh-accent-hover) !important;
}

/* Links pick up the indigo accent */
a {
    transition: color 0.2s ease;
}

/* ─── Accent remap: purple to indigo/cyan ──────────────── */
a {
    color: var(--enh-accent-hover);
}

a:hover {
    color: var(--enh-cyan);
}

.text-primary {
    color: var(--enh-accent-hover) !important;
}

.badge-primary {
    background: var(--enh-gradient);
    color: #fff;
}

.bg-primary {
    background-color: var(--enh-accent) !important;
}

.border-primary {
    border-color: var(--enh-accent) !important;
}

/* Form focus rings match the accent */
.form-control:focus,
.custom-select:focus {
    border-color: var(--enh-accent);
    box-shadow: 0 0 0 3px var(--enh-accent-dim);
}

/* Dropdown + pagination accents */
.dropdown-item:active,
.dropdown-item.active {
    background: var(--enh-accent-dim);
    color: var(--enh-text);
}

.page-item.active .page-link {
    background: var(--enh-gradient);
    border-color: transparent;
    color: #fff;
}

/* Decorative icon buttons: neutral with cyan hover.
   Scoped to .btn so the pink severity coding (low issues)
   on text-secondary dots/bars is untouched. */
.btn.text-secondary {
    color: var(--enh-text-secondary) !important;
}

.btn.text-secondary:hover,
.btn.text-secondary:focus {
    color: var(--enh-cyan) !important;
}

/* ─── Pill tabs (account security, settings) ──────────── */
.nav-pills .nav-link {
    color: var(--enh-text-secondary);
    border-radius: 10px;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.nav-pills .nav-link:hover:not(.active) {
    color: #c7d2fe;
    background-color: var(--enh-accent-dim);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--enh-accent-dim-strong);
    background-color: transparent;
    color: var(--enh-accent-hover);
    box-shadow: none;
}

/* ─── Secondary buttons: slate, not pink ──────────────── */
/* The theme's btn-secondary is solid #ec4899 with dark text. Pink is
   the product's low-severity signal, not a button color - restyle to
   a neutral slate with accent hover. Badge semantics stay untouched. */
.btn-secondary {
    background-color: var(--enh-bg-overlay);
    border-color: var(--enh-border-lit);
    color: var(--enh-text);
    box-shadow: none;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus {
    background-color: var(--enh-accent-dim);
    border-color: var(--enh-accent);
    color: #fff;
    box-shadow: 0 0 0 3px var(--enh-accent-dim);
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
    background-color: var(--enh-accent-dim);
    border-color: var(--enh-accent);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--enh-text-secondary);
    border-color: var(--enh-border-lit);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--enh-cyan);
    border-color: var(--enh-cyan);
    background-color: rgba(34, 211, 238, 0.08);
    box-shadow: none;
}

/* ─── Secondary color: mute the pink, keep severity pink ─ */
/* The theme maps text-secondary/bg-secondary to #ec4899 globally.
   In this product pink means LOW SEVERITY - give severity its own
   explicit classes and render every other "secondary" element in the
   muted blue-gray it was meant to be. */
.text-low-severity {
    color: #ec4899 !important;
}

.bg-low-severity {
    background-color: #ec4899 !important;
}

.text-secondary {
    color: var(--enh-text-secondary) !important;
}

a.text-secondary:hover,
a.text-secondary:focus {
    color: var(--enh-cyan) !important;
}

.bg-secondary {
    background-color: #8da8c8 !important;
}

a.bg-secondary:hover,
a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
    background-color: #a8bdd9 !important;
}

/* ─── Tables ────────────────────────────────────────────── */
/* The theme forces every cell to #262833 (a lighter warm gray)
   with !important, which fights the card surfaces around it.
   Let cells inherit the surface beneath and quiet the borders. */
.table td,
.table th {
    background-color: transparent !important;
    border-top-color: var(--enh-border) !important;
}

.table thead th {
    border-bottom-color: var(--enh-border-lit) !important;
    color: var(--enh-text-secondary);
    font-weight: 500;
}

.table-hover tbody tr:hover {
    background-color: var(--enh-accent-dim) !important;
    color: var(--enh-text);
}

/* Tools directory: readable sections and full labels at every breakpoint. */
.tools-page .tools-category {
    font-size: 14px;
    line-height: 1.4;
    padding: 5px 10px;
    margin-bottom: 0;
}
.tools-page .tool-tile-body {
    min-height: 78px;
}
.tools-page .tool-tile-title {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.tools-page .tools-search-card .form-control {
    min-height: 46px;
    border-radius: 10px;
}
@media (max-width: 767.98px) {
    .tools-page .tools-intro {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }
    .tools-page .tools-intro h1 {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }
    .tools-page .tools-search-card .card-body {
        padding: 16px;
    }
}

/* Dashboard: keep activity rows on the card surface and compact small screens. */
.dashboard-page .dashboard-activity .list-group-item { background: transparent; }
.dashboard-page .dashboard-activity .card-footer { background: transparent !important; border-top: 1px solid rgba(148,163,184,.14) !important; }
.dashboard-page .dashboard-activity [data-toggle="dropdown"] { min-width: 36px; min-height: 36px; justify-content: center; }
.dashboard-page .dashboard-activity img { flex-shrink: 0; }
.dashboard-page .dashboard-profile .flex-grow-1 { min-width: 0; }
.dashboard-page .dashboard-profile h1 { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .dashboard-page .dashboard-profile { padding-top: 24px !important; padding-bottom: 24px !important; }
    .dashboard-page .dashboard-overview { margin-bottom: 28px !important; }
}

/* Reports: stable icon controls and a consistent list surface. */
.reports-page .list-group-item { background: transparent; }
.reports-page .list-group-item img { flex-shrink: 0; }
.reports-page .report-create-card .btn-group .btn { min-width: 44px; padding-inline: 12px; }
.reports-page .report-create-card svg { flex-shrink: 0; }
.reports-page .report-create-card .btn-group .btn.active { background: rgba(100,112,255,.2); color: #a5b4fc; border-color: #6470ff; }
.reports-page .card-header .form-control,
.reports-page .card-header .btn { min-height: 40px; }
.reports-page .card-header .btn { min-width: 40px; justify-content: center; }
.reports-page .list-group-item [data-toggle="dropdown"] { min-width: 36px; min-height: 36px; justify-content: center; }
.reports-page .report-create-card .form-control { min-height: 46px; border-radius: 10px !important; }

/* Projects: match reports list surfaces and comfortable controls. */
.projects-page .list-group-item { background: transparent; }
.projects-page .list-group-item img { flex-shrink: 0; }
.projects-page .card-header .form-control,
.projects-page .card-header .btn { min-height: 40px; }
.projects-page .card-header .btn { min-width: 40px; justify-content: center; }
.projects-page .list-group-item [data-toggle="dropdown"] { min-width: 36px; min-height: 36px; justify-content: center; }
@media (max-width: 575.98px) {
    .projects-page .projects-pagination .row { flex-direction: column; }
    .projects-page .projects-pagination .col,
    .projects-page .projects-pagination .col-auto { width: 100%; }
    .projects-page .projects-pagination .pagination { margin-bottom: 0; }
}