/* ==========================================================================
   Design tokens — updated to match the "Moen Client Connection" workspace
   mockups: navy sidebar, larger card radius, icon-badge stats, eyebrow
   labels, pill search with kbd shortcut.
   ========================================================================== */
:root {
    --color-primary: #2563EB;
    --color-primary-light: #EFF4FF;
    --color-success: #22C55E;
    --color-success-light: #ECFDF3;
    --color-danger: #EF4444;
    --color-warning: #F59E0B;
    --color-warning-light: #FFF7E6;
    --color-info: #06B6D4;
    --color-purple: #7C6FF0;
    --color-purple-light: #F1EFFE;

    --color-sidebar: #0B1730;
    --color-sidebar-active: #1D4ED8;
    --color-sidebar-hover: #14213F;
    --color-sidebar-border: rgba(255, 255, 255, .08);
    --color-sidebar-text: #A9B3CC;
    --color-sidebar-text-muted: #6B7594;

    --color-bg: #F6F8FB;
    --color-card: #FFFFFF;
    --color-border: #E9EDF3;
    --color-text: #101828;
    --color-text-muted: #667085;

    --sidebar-width: 264px;
    --header-height: 76px;
    --radius: 1rem;
    --radius-lg: 1.25rem;
    --radius-sm: .6rem;
    --shadow-soft: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-modal: 0 20px 60px rgba(16, 24, 40, .25);
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', 'Roboto', -apple-system, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    margin: 0;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; }

/* Dynamic, global heading sizes — browser defaults for h1/h2 are oversized
   for a dashboard-style app UI. Scoped to .app-content so this only
   affects page bodies, not anything unrelated (e.g. inside an emailed
   template preview that intentionally wants normal heading sizes). */
.app-content h1 { font-size: 1.375rem; }
.app-content h2 { font-size: 1.2rem; }
.app-content h3 { font-size: 1.05rem; }
.app-content .page-header h1 { font-size: 1.375rem; margin-bottom: .15rem; }

.btn { font-weight: 500; border-radius: .65rem; }
.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background-color: #1D4ED8; border-color: #1D4ED8; }
.btn-success { background-color: var(--color-success); border-color: var(--color-success); }
.btn-danger  { background-color: var(--color-danger); border-color: var(--color-danger); }
.btn-warning { background-color: var(--color-warning); border-color: var(--color-warning); color: #fff; }
.btn-info    { background-color: var(--color-info); border-color: var(--color-info); color: #fff; }

/* Eyebrow label — "WORKSPACE", "RELATIONSHIP DIRECTORY", "NEW COMPANY" */
.eyebrow {
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-primary);
}
.eyebrow-muted { color: var(--color-text-muted); }

/* ==========================================================================
   App shell layout
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--sidebar-width);
    background: var(--color-sidebar);
    color: var(--color-sidebar-text);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    overflow-y: auto;
    transition: transform .2s ease;
    z-index: 1030;
    padding: 1.25rem 1rem;
}

.app-shell.sidebar-collapsed .app-sidebar { transform: translateX(-100%); }

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: .25rem .25rem 1.25rem;
    color: #fff;
}
.sidebar-brand-icon {
    width: 38px; height: 38px; border-radius: .65rem;
    background: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.15rem; color: #fff; flex-shrink: 0;
}
.sidebar-brand-text { line-height: 1.15; }
.sidebar-brand-text .line1 { font-weight: 700; font-size: 1.02rem; color: #fff; }
.sidebar-brand-text .line2 { font-size: .78rem; color: var(--color-sidebar-text-muted); }

.sidebar-section-label {
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--color-sidebar-text-muted);
    padding: .9rem .6rem .4rem;
    font-weight: 700;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: .65rem;
    color: var(--color-sidebar-text);
    font-size: .89rem;
    font-weight: 500;
    margin-bottom: .15rem;
    position: relative;
}
.sidebar-nav .nav-link i { width: 1.1rem; text-align: center; font-size: 1rem; }
.sidebar-nav .nav-link:hover { background: var(--color-sidebar-hover); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--color-sidebar-active); color: #fff; }
.sidebar-nav .nav-link.active::after {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #fff; margin-left: auto; opacity: .85;
}
.sidebar-nav .nav-link.disabled { opacity: .35; pointer-events: none; }
.sidebar-nav .nav-sublink {
    padding-left: 2.4rem;
    font-size: .84rem;
    font-weight: 400;
    opacity: .88;
}
.sidebar-nav [data-bs-toggle="collapse"] .submenu-caret {
    transition: transform .2s ease;
}
.sidebar-nav [data-bs-toggle="collapse"][aria-expanded="true"] .submenu-caret {
    transform: rotate(180deg);
}

.sidebar-capacity-card {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--color-sidebar-border);
    border-radius: var(--radius-sm);
    padding: .9rem;
    margin: .75rem .1rem;
}
.sidebar-capacity-card .cap-title { font-size: .8rem; font-weight: 600; color: #fff; display: flex; justify-content: space-between; }
.sidebar-capacity-card .cap-note { font-size: .74rem; color: var(--color-sidebar-text-muted); margin-top: .5rem; }

.sidebar-profile {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .5rem; margin-top: .5rem;
    border-top: 1px solid var(--color-sidebar-border);
    padding-top: 1rem;
}
.sidebar-profile .sp-name { font-size: .85rem; font-weight: 600; color: #fff; }
.sidebar-profile .sp-role { font-size: .74rem; color: var(--color-sidebar-text-muted); }

.app-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left .2s ease;
}
.app-shell.sidebar-collapsed .app-main { margin-left: 0; }

/* ==========================================================================
   Header — breadcrumb + title left, search + bell right
   ========================================================================== */
.app-header {
    min-height: var(--header-height);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.75rem .9rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.header-titles { display: flex; flex-direction: column; gap: .15rem; }

/* Global, dynamic fix: table headers should never wrap onto two lines —
   looks broken/"shattered" when a multi-word header (e.g. "Access Code",
   "Last Login") doesn't get enough width. Applies to every table in the
   app automatically; .table-responsive's horizontal scroll (already used
   throughout) takes over gracefully on narrower screens instead. */
.table thead th { white-space: nowrap; }

/* Same problem, different element: button text ("All Settings", "Add
   Option") wrapping onto two lines looks broken. Buttons should size to
   fit their label, not wrap it. */
.btn { white-space: nowrap; }

/* Dynamic, zero-maintenance fix for header/page-heading duplication: any
   page that renders its own .page-header (nearly every page in the app)
   automatically hides the shared header's redundant breadcrumb+title —
   no per-page Blade flag needed, and this applies automatically to any
   new page added later too. Falls back gracefully (header stays visible)
   in the rare browser that doesn't support :has() yet. */
body:has(.page-header) .header-titles { display: none; }
.header-breadcrumb { font-size: .8rem; color: var(--color-text-muted); }
.header-breadcrumb strong { color: var(--color-text); font-weight: 600; }
.header-title { font-size: 1.4rem; font-weight: 700; margin: 0; }

.btn-icon {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 1.05rem;
    padding: .5rem .6rem;
    border-radius: .6rem;
    position: relative;
}
.btn-icon:hover { color: var(--color-text); }
.btn-icon .dot {
    position: absolute; top: 6px; right: 7px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary);
    border: 1.5px solid var(--color-card);
}

.header-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: .65rem;
    padding: .55rem .7rem .55rem 1rem;
    color: var(--color-text-muted);
    min-width: 260px;
}
.header-search input {
    border: none; background: transparent; outline: none; flex: 1; font-size: .875rem; color: var(--color-text);
}
.header-search kbd {
    font-size: .68rem; background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: .35rem; padding: .1rem .4rem; color: var(--color-text-muted); font-family: inherit;
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

/* ==========================================================================
   Content / cards
   ========================================================================== */
.app-content { padding: .25rem 1.75rem 2rem; flex: 1; }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }

.card { border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-soft); }

/* Stat card with icon badge + trend + progress bar */
.stat-card { padding: 1.25rem; }
.stat-icon-badge {
    width: 40px; height: 40px; border-radius: .7rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: .9rem;
}
.stat-icon-badge.blue   { background: var(--color-primary-light); color: var(--color-primary); }
.stat-icon-badge.green  { background: var(--color-success-light); color: var(--color-success); }
.stat-icon-badge.purple { background: var(--color-purple-light); color: var(--color-purple); }
.stat-icon-badge.orange { background: var(--color-warning-light); color: var(--color-warning); }
.stat-card .stat-label { font-size: .85rem; color: var(--color-text-muted); display: flex; justify-content: space-between; align-items: center; }
.stat-card .stat-trend { font-size: .76rem; font-weight: 600; color: var(--color-success); }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; margin: .35rem 0 .8rem; }
.progress-thin { height: 5px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.progress-thin > span { display: block; height: 100%; border-radius: 3px; }
.progress-thin.blue > span   { background: var(--color-primary); }
.progress-thin.green > span  { background: var(--color-success); }
.progress-thin.purple > span { background: var(--color-purple); }
.progress-thin.orange > span { background: var(--color-warning); }

/* Category / audience mix bars */
.mix-row { margin-bottom: .95rem; }
.mix-row:last-child { margin-bottom: 0; }
.mix-row .mix-label { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .4rem; }
.mix-row .mix-label strong { font-weight: 500; }

/* Empty states */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state-icon {
    width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary-light);
    color: var(--color-primary); display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin: 0 auto 1rem;
}
.empty-state h5 { margin-bottom: .35rem; }
.empty-state p { color: var(--color-text-muted); max-width: 360px; margin: 0 auto 1.25rem; }

.app-footer {
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Modal — "eyebrow" styled create dialogs
   ========================================================================== */
.modal-content { border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-modal); }
.modal-header { border-bottom: none; padding: 1.5rem 1.5rem .5rem; }
.modal-body { padding: 0 1.5rem 1rem; }
.modal-footer { border-top: 1px solid var(--color-border); padding: 1rem 1.5rem; }

/* ==========================================================================
   Auth (login) page
   ========================================================================== */
.auth-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-sidebar) 0%, #1D2B53 100%);
    font-family: 'Inter', sans-serif; padding: 1rem;
}
.auth-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); padding: 2.5rem; width: 100%; max-width: 400px; }
.auth-brand { text-align: center; margin-bottom: 1.75rem; }
.auth-brand i { font-size: 2rem; color: var(--color-primary); }
.auth-brand h1 { font-size: 1.25rem; margin: .5rem 0 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .header-search { display: none; }
}