/* ==========================================================================
   Clearspace Design System tokens
   Source: Clearspace Brand Guidelines v2025.04 + design system bundle.
   Adapted from clearspace-design-system/project/colors_and_type.css.
   Paths tuned for Flask static at /static/.
   ========================================================================== */

@font-face {
    font-family: 'Suisse Intl';
    src: url('/static/fonts/SuisseIntl-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* PRIMARY + BRAND NEUTRALS */
    --cs-light-blue:    #3BABFF;
    --cs-dark-blue:     #323D4C;
    --cs-spatial-white: #FFFFFF;
    --cs-charcoal:      #16191A;

    /* SECONDARY */
    --cs-light-red:     #F05A5A;
    --cs-dark-red:      #692729;
    --cs-light-green:   #B3C100;
    --cs-dark-green:    #3F4D32;

    /* Legacy aliases — keep sales_space compatibility */
    --cs-blue:          var(--cs-light-blue);
    --cs-blue-hover:    #2A9AEE;
    --cs-blue-dark:     var(--cs-dark-blue);

    /* BLUE RAMP */
    --cs-blue-50:   #EDF7FF;
    --cs-blue-100:  #D5ECFF;
    --cs-blue-200:  #ACD8FF;
    --cs-blue-300:  #83C5FF;
    --cs-blue-400:  #5BB8FF;
    --cs-blue-500:  #3BABFF;
    --cs-blue-600:  #2A8CD4;
    --cs-blue-700:  #1E6CA7;
    --cs-blue-800:  #163F5E;
    --cs-blue-900:  #323D4C;

    /* GREEN RAMP */
    --cs-green-50:  #F8FAE5;
    --cs-green-500: #B3C100;
    --cs-green-700: #6B7410;
    --cs-green-900: #3F4D32;

    /* RED RAMP */
    --cs-red-50:    #FEF0F0;
    --cs-red-500:   #F05A5A;
    --cs-red-700:   #943636;
    --cs-red-900:   #692729;

    /* NEUTRAL RAMP */
    --cs-n-0:    #FFFFFF;
    --cs-n-50:   #F9FAFB;
    --cs-n-100:  #F3F4F6;
    --cs-n-200:  #E5E7EB;
    --cs-n-300:  #D1D5DB;
    --cs-n-400:  #9CA3AF;
    --cs-n-500:  #6B7280;
    --cs-n-600:  #4B5563;
    --cs-n-700:  #374151;
    --cs-n-800:  #1F2937;
    --cs-n-900:  #16191A;

    /* SEMANTIC FG / BG */
    --fg-1:       var(--cs-charcoal);
    --fg-2:       var(--cs-n-500);
    --fg-muted:   var(--cs-n-400);
    --fg-link:    var(--cs-light-blue);
    --bg-app:     var(--cs-n-50);
    --bg-surface: var(--cs-spatial-white);
    --bg-sidebar: var(--cs-dark-blue);

    /* TYPOGRAPHY — Suisse Intl (brand) with DM Sans fallback */
    --font-primary:  'Suisse Intl', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;

    --tracking-display: -0.02em;
    --tracking-eyebrow: 0.08em;
    --tracking-ui:     -0.01em;

    /* FOCUS RING */
    --focus-ring: 0 0 0 3px rgba(59, 171, 255, 0.10);
    --line-thickness: 6px;
}

/* Apply the brand font stack globally; the existing utility classes continue
   to supply sizes/weights. */
html, body {
    font-family: var(--font-primary);
}

/* ==========================================================================
   BRAND TYPE HELPERS (use sparingly inside the CRM — operational register
   still prefers title case)
   ========================================================================== */
.cs-eyebrow,
.cs-section-title,
.cs-footer-text {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: 12px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
}

.cs-label {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cs-light-blue);
}

.cs-emphasis        { color: var(--cs-light-blue); }
.cs-emphasis--green { color: var(--cs-light-green); }
.cs-emphasis--red   { color: var(--cs-light-red); }

/* ==========================================================================
   BRAND LINE — the underscore from the logo, reused as a visual thread.
   ========================================================================== */
.cs-line {
    display: block;
    height: var(--line-thickness);
    background: currentColor;
    width: 100%;
}
.cs-line--blue  { color: var(--cs-light-blue); }
.cs-line--red   { color: var(--cs-light-red); }
.cs-line--green { color: var(--cs-light-green); }
.cs-line--dark  { color: var(--cs-charcoal); }
.cs-line--white { color: var(--cs-spatial-white); }

/* ==========================================================================
   SIDEBAR — prescribed structure per Clearspace Design System.
   Order: brand → divider → primary → divider → records → divider → utility → user row.
   ========================================================================== */
.cs-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--bg-sidebar);
    color: #fff;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.cs-sidebar-brand {
    padding: 24px 20px 18px;
    min-height: 76px;
}
.cs-sidebar-brand > a { display: block; min-width: 0; }
.cs-collapse-btn {
    position: absolute;
    top: 32px;
    right: -14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--cs-n-500);
    background: #fff;
    border: 1px solid var(--cs-n-200);
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(22, 25, 26, 0.06);
}
.cs-collapse-btn:hover {
    color: var(--cs-charcoal);
    border-color: var(--cs-n-300);
}
.cs-collapse-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    transition: transform 0.2s ease;
}

/* ── Collapsed state ── */
.cs-sidebar.collapsed { width: 72px; }
.cs-sidebar.collapsed .cs-sidebar-brand {
    padding: 24px 10px 18px;
}
.cs-sidebar.collapsed .cs-sidebar-brand > a { display: flex; justify-content: center; }
.cs-sidebar.collapsed .cs-sidebar-brand .cs-brand-wordmark { display: none; }
.cs-sidebar.collapsed .cs-sidebar-brand .cs-brand-mark { display: block; margin-bottom: 0; }
.cs-sidebar.collapsed .cs-system-name { display: none; }
.cs-sidebar.collapsed .cs-collapse-btn svg { transform: rotate(180deg); }
.cs-sidebar.collapsed .cs-sidebar-nav,
.cs-sidebar.collapsed .cs-sidebar-foot { padding-left: 10px; padding-right: 10px; }
.cs-sidebar.collapsed .nav-link { justify-content: center; gap: 0; padding: 11px 0; }
.cs-sidebar.collapsed .nav-link .nav-label { display: none; }
.cs-sidebar.collapsed .cs-nav-divider { margin: 12px 14px; }
.cs-sidebar.collapsed .cs-user-row {
    justify-content: center;
    gap: 0;
    padding: 12px 0;
}
.cs-sidebar.collapsed .cs-user-row .name,
.cs-sidebar.collapsed .cs-user-row .sign-out { display: none; }
.cs-sidebar-brand .cs-brand-wordmark {
    display: block;
    height: 22px;
    margin-bottom: 8px;
}
.cs-sidebar-brand .cs-brand-mark {
    display: none;
    width: 22px;
    height: 22px;
}
.cs-sidebar-brand .cs-system-name {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
    color: #fff;
}
.cs-sidebar-nav {
    flex: 1;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}
.cs-sidebar-nav::-webkit-scrollbar { display: none; }
.cs-sidebar-foot {
    padding: 0 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.cs-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 12px 12px;
    flex-shrink: 0;
}
.cs-sidebar-foot > .cs-nav-divider:first-child {
    margin-top: 0;
}
.cs-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    letter-spacing: var(--tracking-ui);
    transition: all 0.15s ease;
    cursor: pointer;
}
.cs-sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.cs-sidebar .nav-link.active {
    color: var(--cs-light-blue);
    background: rgba(59, 171, 255, 0.12);
    font-weight: 500;
}
.cs-sidebar .nav-link svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    stroke-width: 1.5;
}
/* ── Collapsible nav groups (SALES / SERVICE) ── */
.cs-nav-group {
    display: flex;
    flex-direction: column;
}
.cs-nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    width: 100%;
    transition: color 0.15s ease;
}
.cs-nav-group-header:hover { color: rgba(255, 255, 255, 0.7); }
.cs-nav-group-header:focus { outline: none; }
.cs-nav-group-chevron {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.cs-nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
    margin-left: 18px;
    overflow: hidden;
    transition: max-height 0.2s ease, opacity 0.2s ease;
    max-height: 300px;
    opacity: 1;
}
.cs-nav-group.cs-nav-group-closed .cs-nav-group-items {
    max-height: 0;
    opacity: 0;
}
.cs-nav-group.cs-nav-group-closed .cs-nav-group-chevron {
    transform: rotate(-90deg);
}
.cs-sidebar .nav-link-child {
    font-size: 14px;
    padding: 9px 12px;
}
/* Hide group UI when sidebar is collapsed */
.cs-sidebar.collapsed .cs-nav-group-header { display: none; }
.cs-sidebar.collapsed .cs-nav-group-items {
    padding-left: 0;
    border-left: none;
    margin-left: 0;
    max-height: 300px;
    opacity: 1;
}

.cs-user-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.9);
}
.cs-user-row .user-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    stroke-width: 1.5;
}
.cs-user-row .name {
    color: #fff;
    font-size: 16px;
    letter-spacing: var(--tracking-ui);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.cs-user-row .sign-out {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
}
.cs-user-row .sign-out:hover { color: #fff; }