/* app.css — CFO Advisory TMS · Light Theme */

/* ── Google Fonts fallback stack ────────────────────────────────── */
html, body {
    font-family: 'Sora', 'Segoe UI', system-ui, sans-serif;
}

/* ── Design System Tokens ───────────────────────────────────────── */
:root {
    /* CFO Advisory brand */
    --navy:      #192537;
    --navy-mid:  #243448;
    --navy-dim:  #2e4260;
    --navy-50:   rgba(25, 37, 55, 0.08);
    --navy-200:  rgba(25, 37, 55, 0.22);
    --navy-500:  var(--navy-dim);
    --navy-700:  var(--navy-mid);
    --navy-800:  var(--navy);
    --gold:      #B09E80;
    --gold-d:    #716551;
    --gold-l:    #d4c9b0;
    --gold-xl:   #f0ead9;
    --gold-400:  var(--gold);
    --gold-500:  var(--gold-d);

    /* Surface / grey scale */
    --white:     #ffffff;
    --grey-50:   #f8f7f4;   /* app background */
    --grey-100:  #f3f0ea;   /* warm paper */
    --grey-200:  #e9e5db;   /* panels / sidebar in light mode */
    --grey-300:  #d6d0c4;   /* borders / dividers */
    --grey-400:  #a89e90;   /* muted borders */
    --grey-500:  #6b6256;   /* muted text */
    --grey-600:  #3d3730;   /* body text */
    --grey-700:  #2a2520;   /* strong text */
    --grey-800:  #1a1713;   /* headings */
    --grey-900:  #0d0b09;   /* max contrast */
    --red-600:   var(--status-red);
    --green-600: var(--status-green);

    /* Status — semantic palette */
    --status-teal:    #0d7a6e;
    --status-teal-bg: rgba(13, 122, 110, 0.10);
    --status-red:     #c0392b;
    --status-red-bg:  rgba(192, 57, 43, 0.10);
    --status-amber:   #b8860b;
    --status-amber-bg:rgba(184, 134, 11, 0.10);
    --status-green:   #197a45;
    --status-green-bg:rgba(25, 122, 69, 0.10);
    --status-violet:  #5b3db5;
    --status-violet-bg:rgba(91, 61, 181, 0.10);
    --status-blue:    #1a56a4;
    --status-blue-bg: rgba(26, 86, 164, 0.10);

    /* Legacy aliases (keep existing pages working) */
    --primary:       var(--navy);
    --primary-light: var(--navy-dim);
    --primary-dim:   var(--navy-mid);
    --primary-dark:  var(--navy);
    --on-primary:    #ffffff;
    --danger:        var(--status-red);
    --danger-light:  var(--status-red-bg);
    --warning:       var(--status-amber);
    --success:       var(--status-green);
    --success-light: var(--status-green-bg);

    /* Legacy gray aliases */
    --gray-50:   var(--grey-50);
    --gray-100:  var(--white);
    --gray-200:  var(--grey-100);
    --gray-300:  var(--grey-300);
    --gray-400:  var(--grey-400);
    --gray-500:  var(--grey-500);
    --gray-600:  var(--grey-600);
    --gray-700:  var(--grey-700);
    --gray-800:  var(--grey-800);
    --gray-900:  var(--grey-900);

    /* Container tokens */
    --secondary-container:    rgba(176, 158, 128, 0.14);
    --on-secondary-container: var(--gold-d);
    --tertiary-container:     rgba(25, 37, 55, 0.08);
    --on-tertiary-container:  var(--navy);
    --error-container:        var(--status-red-bg);
    --on-error-container:     var(--status-red);

    /* Shadows */
    --shadow-sm: 0 1px 3px  rgba(26, 23, 19, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 23, 19, 0.08);
    --shadow-lg: 0 8px 24px rgba(26, 23, 19, 0.09);
    --shadow-xl: 0 16px 48px rgba(26, 23, 19, 0.12);

    /* Border radius */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* Layout */
    --sidebar-width:           256px;
    --sidebar-collapsed-width: 72px;
    --topbar-height:           56px;

    /* Motion */
    --transition: 150ms ease;
}

/* ── Global baseline ─────────────────────────────────────────────── */
html {
    overflow-x: clip; /* clip instead of hidden so position:sticky still works */
}

html, body {
    background: var(--grey-50);
    color: var(--grey-600);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
}

#msg-file-input,
#cwp-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Typography ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--grey-800);
    font-weight: 700;
}

.font-mono, code, kbd, samp {
    font-family: 'JetBrains Mono', 'Fira Mono', monospace;
}

/* ── Layout shell ────────────────────────────────────────────────── */
.tc-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-left: var(--sidebar-width);
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    background: rgba(248, 247, 244, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 2rem;
    border-bottom: 1px solid var(--grey-300);
    transition: margin-left 250ms ease;
}

.tc-main {
    margin-left: var(--sidebar-width);
    min-height: calc(100vh - var(--topbar-height));
    transition: margin-left 250ms ease;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.tc-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh; /* tracks actual visible viewport on mobile browsers */
    background: var(--navy);
    border-right: none;
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 250ms ease;
}

/* Sidebar brand / logo area */
.tc-sidebar-brand {
    padding: 1.5rem 1.25rem 1rem;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.tc-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}

.tc-brand-favicon, .tc-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    padding: 4px;
}

.tc-brand-mark {
    background: rgba(255,255,255,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-weight: 700;
    font-size: 0.75rem;
    font-family: 'Playfair Display', serif;
    padding: 0;
}

.tc-brand-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* Sidebar navigation */
.tc-sidebar-nav {
    flex: 1;
    padding: 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tc-sidebar-section-label {
    padding: 1.25rem 0.625rem 0.375rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: 'JetBrains Mono', monospace;
}

/* Nav links */
.tc-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255,255,255,0.60);
    transition: background var(--transition), color var(--transition);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.tc-sidebar-link i {
    width: 16px;
    text-align: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    color: rgba(255,255,255,0.40);
    transition: color var(--transition);
}

.tc-sidebar-link:hover {
    background: rgba(255,255,255,0.08);
    color: var(--white);
    text-decoration: none;
}

.tc-sidebar-link:hover i {
    color: var(--gold);
}

.tc-sidebar-link.active {
    background: rgba(176,158,128,0.18);
    color: var(--gold);
    font-weight: 600;
}

.tc-sidebar-link.active i {
    color: var(--gold);
}

.tc-sidebar-link-danger {
    color: rgba(255,120,100,0.80) !important;
}

.tc-sidebar-link-danger:hover {
    background: rgba(192,57,43,0.20) !important;
    color: #ff9f9f !important;
}

/* Sidebar footer */
.tc-sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Mobile backdrop */
.tc-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(10, 14, 20, 0.55);
    z-index: 150;
}

.tc-sidebar-backdrop--visible {
    display: block;
}

/* Notification badge in sidebar */
.tc-notif-badge {
    margin-left: auto;
    background: var(--status-red);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Topbar ──────────────────────────────────────────────────────── */
.tc-topbar-search {
    position: relative;
    flex: 1;
    max-width: 360px;
}

.tc-topbar-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grey-400);
    font-size: 0.75rem;
    pointer-events: none;
}

.tc-topbar-search-input {
    width: 100%;
    background: var(--grey-100);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-full);
    padding: 0.4rem 0.75rem 0.4rem 2.25rem;
    font-size: 0.85rem;
    color: var(--grey-600);
    outline: none;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    font-family: 'Sora', sans-serif;
}

.tc-topbar-search-input:focus {
    background: var(--white);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(176, 158, 128, 0.15);
}

.tc-topbar-search-input::placeholder {
    color: var(--grey-400);
}

/* Topbar right actions */
.tc-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Topbar icon buttons */
.tc-topbar-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-500);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
    text-decoration: none;
    border: none;
    background: transparent;
}

.tc-topbar-icon-btn:hover {
    background: var(--grey-100);
    color: var(--navy);
    text-decoration: none;
}

.tc-topbar-notif-badge, .tc-topbar-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--status-red);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--grey-50);
    font-family: 'JetBrains Mono', monospace;
}

/* Topbar user chip / wrap */
.tc-topbar-user-wrap {
    position: relative;
}

.tc-topbar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.625rem 0.3rem 0.375rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition);
    border: none;
    background: transparent;
    color: inherit;
}

.tc-topbar-user:hover {
    background: var(--grey-100);
}

.tc-topbar-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grey-700);
    white-space: nowrap;
    font-family: 'Sora', sans-serif;
}

.tc-topbar-caret {
    font-size: 0.6rem;
    color: var(--grey-400);
    transition: transform 150ms ease;
}

.tc-topbar-caret.rotated {
    transform: rotate(180deg);
}

/* User avatar */
.tc-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold-l);
    flex-shrink: 0;
}

.tc-user-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
    font-family: 'Playfair Display', serif;
    border: 2px solid var(--gold-l);
}

/* User dropdown */
.tc-user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--white);
    min-width: 220px;
    box-shadow: var(--shadow-xl);
    z-index: 9000;
    border-radius: var(--radius-lg);
    border: 1px solid var(--grey-300);
    padding: 4px 0;
    animation: dd-in 120ms ease;
}

@keyframes dd-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tc-user-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 8999;
}

.tc-user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 12px 14px;
    border-bottom: 1px solid var(--grey-200);
}

.tc-user-dropdown-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--grey-800);
    font-family: 'Sora', sans-serif;
}

.tc-user-dropdown-divider {
    border: 0;
    border-top: 1px solid var(--grey-200);
    margin: 4px 0;
}

.tc-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--grey-600);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.tc-user-dropdown-item:hover {
    background: var(--grey-100);
    color: var(--navy);
    text-decoration: none;
}

.tc-user-dropdown-item.danger {
    color: var(--status-red);
}

.tc-user-dropdown-item.danger:hover {
    background: var(--status-red-bg);
    color: var(--status-red);
}

/* Mobile burger */
.tc-burger {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--grey-300);
    background: var(--white);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--grey-500);
    transition: background var(--transition), border-color var(--transition);
    flex-shrink: 0;
}

.tc-burger:hover {
    background: var(--grey-100);
    border-color: var(--grey-400);
}

/* ── Sidebar collapsed state ─────────────────────────────────────── */
.tc-sidebar--collapsed {
    width: var(--sidebar-collapsed-width);
}

.tc-sidebar--collapsed .tc-brand-text,
.tc-sidebar--collapsed .tc-sidebar-link-text,
.tc-sidebar--collapsed .tc-sidebar-section-label,
.tc-sidebar--collapsed .tc-nav-badge,
.tc-sidebar--collapsed .tc-notif-badge {
    display: none;
}

.tc-sidebar--collapsed .tc-sidebar-link {
    justify-content: center;
    padding: 0.55rem;
}

.tc-sidebar--collapsed .tc-sidebar-link i {
    width: auto;
}

.tc-sidebar--collapsed .tc-brand {
    justify-content: center;
}

.tc-sidebar--collapsed .tc-brand-favicon,
.tc-sidebar--collapsed .tc-brand-mark {
    margin: 0 auto;
}

.tc-topbar--collapsed {
    margin-left: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed .tc-main {
    margin-left: var(--sidebar-collapsed-width);
}

/* Nav badge (notification count) */
.tc-nav-badge {
    margin-left: auto;
    background: var(--status-red);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
}

.tc-has-badge { position: relative; }

.tc-sidebar-link-disabled {
    opacity: 0.35;
    cursor: default;
}

.tc-sidebar-link-disabled:hover {
    transform: none !important;
    background: transparent !important;
    color: rgba(255,255,255,0.35) !important;
}

.tc-collapse-btn {
    background: transparent;
    border: none;
    cursor: pointer;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.tc-btn {
    border: 1px solid var(--grey-300);
    background: var(--white);
    color: var(--grey-700);
    padding: 0.45rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    font-family: 'Sora', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.tc-btn:hover:not(:disabled) {
    background: var(--grey-100);
    border-color: var(--grey-400);
    text-decoration: none;
}

.tc-btn:disabled {
    opacity: 0.50;
    cursor: not-allowed;
    pointer-events: none;
}

.tc-btn-primary {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(25, 37, 55, 0.20);
}

.tc-btn-primary:hover:not(:disabled) {
    background: var(--navy-mid);
    border-color: var(--navy-mid);
    box-shadow: 0 4px 14px rgba(25, 37, 55, 0.28);
    color: var(--white);
}

.tc-btn-gold {
    background: var(--gold);
    border-color: var(--gold-d);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(176, 158, 128, 0.30);
}

.tc-btn-gold:hover:not(:disabled) {
    background: var(--gold-d);
    border-color: var(--gold-d);
    color: var(--white);
}

.tc-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--grey-500);
}

.tc-btn-ghost:hover:not(:disabled) {
    background: var(--grey-100);
    border-color: transparent;
    color: var(--grey-700);
}

.tc-btn-danger {
    background: var(--status-red);
    border-color: var(--status-red);
    color: #ffffff;
}

.tc-btn-danger:hover:not(:disabled) {
    background: #a93226;
    border-color: #a93226;
    color: #ffffff;
}

.tc-btn-warning {
    background: #b07d1a;
    border-color: #b07d1a;
    color: #ffffff;
}

.tc-btn-warning:hover:not(:disabled) {
    background: #8c6213;
    border-color: #8c6213;
    color: #ffffff;
}

.tc-btn-outline-danger {
    background: transparent;
    border-color: var(--status-red);
    color: var(--status-red);
}

.tc-btn-outline-danger:hover:not(:disabled) {
    background: var(--status-red);
    color: #ffffff;
}

/* Icon button */
.tc-icon-btn {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--grey-300);
    background: var(--white);
    color: var(--grey-500);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tc-icon-btn:hover:not(:disabled) {
    background: var(--grey-100);
    border-color: var(--grey-400);
    color: var(--navy);
}

.tc-icon-danger {
    color: var(--status-red);
    border-color: rgba(192, 57, 43, 0.30);
}

/* ── Cards / surfaces ────────────────────────────────────────────── */
.tc-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--grey-200);
    box-shadow: var(--shadow-sm);
}

/* ── Inputs / selects / textareas ───────────────────────────────── */
.tc-input,
.tc-select,
.tc-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--grey-300);
    background: var(--white);
    color: var(--grey-700);
    font-size: 0.875rem;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    font-family: 'Sora', sans-serif;
    box-sizing: border-box;
}

.tc-input:focus,
.tc-select:focus,
.tc-textarea:focus {
    border-color: var(--gold);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(176, 158, 128, 0.15);
}

.tc-input::placeholder,
.tc-textarea::placeholder {
    color: var(--grey-400);
}

.tc-textarea {
    resize: vertical;
    min-height: 88px;
}

/* ── Labels ──────────────────────────────────────────────────────── */
.tc-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--grey-500);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.375rem;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Form field group ────────────────────────────────────────────── */
.tc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 2px;
}

/* ── Toast / alert ───────────────────────────────────────────────── */
.tc-toast,
.tc-alert {
    background: var(--white);
    color: var(--grey-600);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border: 1px solid var(--grey-300);
}

.tc-toast-ok {
    border-color: rgba(25, 122, 69, 0.30);
    background: rgba(25, 122, 69, 0.07);
    color: #155c37;
}

.tc-toast-error,
.tc-alert-error {
    border-color: rgba(192, 57, 43, 0.30);
    background: rgba(192, 57, 43, 0.07);
    color: #8c2318;
}

/* ── Modal backdrop / overlay ────────────────────────────────────── */
.tc-overlay,
.tc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(25, 37, 55, 0.50);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
    animation: tc-fade-in 140ms ease;
}

@keyframes tc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal panel ─────────────────────────────────────────────────── */
.tc-modal {
    background: var(--white);
    border-radius: var(--radius-xl);
    width: min(520px, 95vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 0 1px rgba(26, 23, 19, .05),
        0 8px 24px rgba(26, 23, 19, .12),
        0 32px 64px rgba(26, 23, 19, .10);
    animation: tc-modal-in 180ms cubic-bezier(.34, 1.16, .64, 1);
    overflow: hidden;
}

@keyframes tc-modal-in {
    from { transform: translateY(20px) scale(.97); opacity: 0; }
    to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* Modal header */
.tc-modal-header,
.tc-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--grey-200);
    flex-shrink: 0;
}

.tc-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Playfair Display', serif;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 9px;
}

.tc-modal-title i,
.tc-modal-title .fa-solid,
.tc-modal-title .fas {
    font-size: .9rem;
    color: var(--gold-d);
    flex-shrink: 0;
}

.tc-modal-title .fa-triangle-exclamation,
.tc-modal-title .fa-trash {
    color: var(--status-red);
}

.tc-modal-sub,
.tc-modal-subtitle,
.tc-modal-desc {
    margin: 5px 0 0;
    font-size: 0.83rem;
    color: var(--grey-500);
    line-height: 1.45;
}

.tc-modal-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--grey-400);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms, color 120ms;
    margin-top: 1px;
}

.tc-modal-close:hover {
    background: var(--grey-100);
    color: var(--navy);
}

/* Modal body */
.tc-modal-body {
    padding: 20px 22px 16px;
    overflow-y: auto;
    flex: 1;
}

.tc-modal-body p {
    margin: 0;
    font-size: .9rem;
    color: var(--grey-600);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tc-modal-body p i,
.tc-modal-body p .fa-solid,
.tc-modal-body p .fas {
    color: var(--grey-400);
    margin-top: 3px;
    flex-shrink: 0;
}

/* Modal footer */
.tc-modal-footer,
.tc-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--grey-200);
    background: var(--grey-50);
    flex-shrink: 0;
}

/* In-modal toast */
.tc-toast-modal {
    margin: 0 22px 4px;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: .82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Modal helpers */
.tc-modal-loading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
}

.tc-modal-list {
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tc-modal-row {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--grey-50);
    cursor: pointer;
    transition: background 130ms;
    border: 1px solid var(--grey-200);
}

.tc-modal-row:hover {
    background: var(--gold-xl);
    border-color: var(--gold-l);
}

.tc-modal-row-main { flex: 1; min-width: 0; }

.tc-modal-row-title {
    font-weight: 600;
    color: var(--grey-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .88rem;
}

.tc-modal-row-sub {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--grey-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-modal-row-arrow {
    flex-shrink: 0;
    color: var(--grey-300);
    font-size: .8rem;
}

.modal-due        { color: var(--grey-500); }
.modal-due-danger { color: var(--status-red); font-weight: 700; }
.modal-due-done   { color: var(--status-green); }

.tc-modal-cap {
    padding: 8px 22px 14px;
    font-size: 0.78rem;
    color: var(--grey-400);
    text-align: center;
    flex-shrink: 0;
}

/* ── Status pills ────────────────────────────────────────────────── */
.tc-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tc-pill-teal    { background: var(--status-teal-bg);   color: var(--status-teal);   }
.tc-pill-red     { background: var(--status-red-bg);    color: var(--status-red);    }
.tc-pill-amber   { background: var(--status-amber-bg);  color: var(--status-amber);  }
.tc-pill-green   { background: var(--status-green-bg);  color: var(--status-green);  }
.tc-pill-violet  { background: var(--status-violet-bg); color: var(--status-violet); }
.tc-pill-blue    { background: var(--status-blue-bg);   color: var(--status-blue);   }
.tc-pill-gold    { background: var(--gold-xl);          color: var(--gold-d);        }
.tc-pill-navy    { background: var(--tertiary-container); color: var(--navy);        }
.tc-pill-grey    { background: var(--grey-100);         color: var(--grey-500);      border: 1px solid var(--grey-300); }

/* Priority badges */
.tc-priority {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tc-priority-critical { background: var(--status-red-bg);    color: var(--status-red);   }
.tc-priority-high     { background: var(--status-amber-bg);  color: var(--status-amber); }
.tc-priority-medium   { background: var(--status-blue-bg);   color: var(--status-blue);  }
.tc-priority-low      { background: var(--grey-100);         color: var(--grey-500);     border: 1px solid var(--grey-300); }

/* ── Avatar group ────────────────────────────────────────────────── */
.tc-avatar-group {
    display: flex;
}

.tc-avatar-group .tc-user-badge,
.tc-avatar-group .tc-user-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
    margin-left: -6px;
    border: 2px solid var(--white);
    box-shadow: var(--shadow-sm);
}

.tc-avatar-group .tc-user-badge:first-child,
.tc-avatar-group .tc-user-avatar:first-child {
    margin-left: 0;
}

/* ── Stat cards ──────────────────────────────────────────────────── */
.stat-clickable {
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform 80ms ease;
}

.stat-clickable:hover {
    background: var(--grey-50);
    box-shadow: var(--shadow-md);
}

.stat-clickable:active {
    transform: scale(0.985);
}

.stat-click-hint {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gold-d);
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity var(--transition);
    font-family: 'JetBrains Mono', monospace;
}

.stat-clickable:hover .stat-click-hint {
    opacity: 1;
}

/* ── Board / kanban reset ────────────────────────────────────────── */
.tc-board, .tc-board * { box-sizing: border-box; }
.tc-board p, .tc-board h1, .tc-board h2, .tc-board h3 { margin: 0; }

/* ── Page links ──────────────────────────────────────────────────── */
.tc-page a {
    color: var(--gold-d);
    text-decoration: none;
}

.tc-page a:hover {
    color: var(--navy);
    text-decoration: underline;
}

/* ── Bootstrap overrides ─────────────────────────────────────────── */
a, .btn-link { color: var(--gold-d); }

.btn-primary {
    color: #fff;
    background-color: var(--navy);
    border-color: var(--navy-mid);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(176, 158, 128, 0.35);
}

.content { padding-top: 1.1rem; }
h1:focus  { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--status-green); }
.invalid                             { outline: 1px solid var(--status-red); }
.validation-message                  { color: var(--status-red); }

/* ── Blazor error boundary ───────────────────────────────────────── */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjxwYXRoIGQ9Ik0yNjMuNTA2IDUxQzI2NC43MTcgNTEgMjY1LjgxMyA1MS40ODM3IDI2Ni42MDYgNTIuMjY1OEwyNjcuMDUyIDUyLjc5ODcgMjY3LjUzOSA1My42MjgzIDI5MC4xODUgOTIuMTgzMSAyOTAuNTQ1IDkyLjc5NSAyOTAuNjU2IDkyLjk5NkMyOTAuODc3IDkzLjUxMyAyOTEgOTQuMDgxNSAyOTEgOTQuNjc4MiAyOTEgOTcuMDY1MSAyODkuMDM4IDk5IDI4Ni42MTcgOTlMMjQwLjM4MyA5OUMyMzcuOTYzIDk5IDIzNiA5Ny4wNjUxIDIzNiA5NC42NzgyIDIzNiA5NC4zNzk5IDIzNi4wMzEgOTQuMDg4NiAyMzYuMDg5IDkzLjgwNzJMMjM2LjMzOCA5My4wMTYyIDIzNi44NTggOTIuMTMxNCAyNTkuNDczIDUzLjYyOTQgMjU5Ljk2MSA1Mi43OTg1IDI2MC40MDcgNTIuMjY1OEMyNjEuMiA1MS40ODM3IDI2Mi4yOTYgNTEgMjYzLjUwNiA1MVoiIGZpbGw9IiNGRkU1MDAiLz48L3N2Zz4=) no-repeat 1rem/1.8rem, #7c1c1c;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--grey-400);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Gold accent line / divider ──────────────────────────────────── */
.tc-gold-line {
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
    border: none;
    margin: 0;
}

/* ── Section header pattern (page title + action row) ────────────── */
.tc-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.tc-page-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    margin: 0;
}

.tc-page-sub {
    font-size: 0.85rem;
    color: var(--grey-500);
    margin-top: 0.25rem;
}

/* ── Dropdown (generic class kept for legacy navmenu.css) ────────── */
.tc-user-dropdown-wrap { position: relative; display: inline-block; }

.tc-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--white);
    min-width: 220px;
    box-shadow: var(--shadow-xl);
    z-index: 9000;
    border-radius: var(--radius-lg);
    border: 1px solid var(--grey-300);
    padding: 4px 0;
    animation: dd-in 100ms ease;
}

.tc-user-dropdown-wrap:hover .tc-dropdown-content { display: block; }

.tc-dropdown-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--grey-200);
    margin-bottom: 4px;
}

.tc-dropdown-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--grey-800);
}

.tc-dropdown-subtext {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--grey-500);
}

.tc-dropdown-divider {
    border: 0;
    border-top: 1px solid var(--grey-200);
    margin: 4px 0;
}

.tc-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--grey-600);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.tc-dropdown-item:hover {
    background: var(--grey-100);
    color: var(--navy);
    text-decoration: none;
}

.tc-dropdown-item-danger { color: var(--status-red); }

.tc-dropdown-item-danger:hover {
    background: var(--status-red-bg);
    color: var(--status-red);
    text-decoration: none;
}

.tc-spacer { flex: 1; }

/* ── Reduce motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ── Admin / Manager shared layout ──────────────────────────────── */
.admin-dashboard {
    max-width: 1200px;
    margin: 0 auto;
}

.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.admin-header h1 {
    margin: 0 0 .25rem;
    font-size: 1.6rem;
    color: var(--navy);
    font-family: 'Playfair Display', Georgia, serif;
}

.admin-subtitle {
    margin: 0;
    color: var(--grey-500);
    font-size: .9rem;
}

.admin-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}

.admin-loading {
    padding: 2rem;
    text-align: center;
    color: var(--grey-500);
    font-size: .95rem;
}

/* Stats grid (4 cols) */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
    .admin-stats-grid { grid-template-columns: 1fr; }
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.25rem 1.5rem;
}

.stat-card.clickable {
    cursor: pointer;
    transition: box-shadow 150ms, transform 150ms;
}

.stat-card.clickable:hover {
    box-shadow: 0 4px 16px rgba(25, 37, 55, .12);
    transform: translateY(-2px);
}

.stat-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--grey-500);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}

/* Activity grid (2 cols) */
.admin-activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 700px) {
    .admin-activity-grid { grid-template-columns: 1fr; }
}

.activity-card {
    padding: 1.25rem 1.5rem;
}

.activity-card h3 {
    margin: 0 0 1rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy);
}

.activity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--grey-200);
}

.activity-row:last-child { border-bottom: none; }

.activity-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--grey-700);
}

.activity-sub {
    font-size: .78rem;
    color: var(--grey-500);
    margin-top: .15rem;
}

.activity-date {
    font-size: .78rem;
    color: var(--grey-400);
    white-space: nowrap;
}

.activity-user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.activity-user-photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.activity-empty {
    padding: 1.5rem 0;
    text-align: center;
    color: var(--grey-400);
    font-size: .88rem;
}

/* Admin table (reports / time pages) */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.admin-table th {
    padding: .6rem .9rem;
    text-align: left;
    font-size: .75rem;
    font-weight: 700;
    color: var(--grey-500);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid var(--grey-200);
}

.admin-table td {
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--grey-100);
    color: var(--grey-700);
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background: var(--grey-50);
}

/* Workspace Detail — manager badge in members table */
.wd-manager-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .4rem;
    padding: .15rem .5rem;
    border-radius: 4px;
    background: var(--gold-xl);
    color: var(--gold-d);
    font-size: .72rem;
    font-weight: 700;
    vertical-align: middle;
}

/* ── Mobile layout ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tc-burger { display: inline-flex; }

    .tc-sidebar {
        transform: translateX(-100%);
        transition: transform 200ms ease;
        z-index: 300;
    }

    .tc-sidebar--open {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }

    .tc-topbar,
    .tc-main {
        margin-left: 0 !important;
    }

    .tc-topbar {
        padding: 0 1rem;
    }

    /* Compress search box to leave room for actions */
    .tc-topbar-search { max-width: 180px; }

    /* Wrap admin headers */
    .admin-header { flex-direction: column; gap: .75rem; }
    .admin-actions { width: 100%; }

    /* Tables always scrollable */
    .admin-table { min-width: 480px; }
}

@media (max-width: 480px) {
    .tc-topbar-search { max-width: 120px; }

    /* Hide username text — avatar alone is enough on narrow phones */
    .tc-topbar-user-name { display: none; }

    .tc-modal {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .tc-modal-overlay,
    .tc-overlay {
        align-items: flex-end;
        padding: 0;
    }
}

/* ── iOS/Android safe-area padding ──────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    .tc-topbar {
        padding-left: max(2rem, env(safe-area-inset-left));
        padding-right: max(2rem, env(safe-area-inset-right));
    }

    @media (max-width: 768px) {
        .tc-topbar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
        .tc-sidebar { padding-bottom: env(safe-area-inset-bottom); }
    }

    .tc-modal {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}