/* ============================================================================
   HOMEFER — SHARED DESIGN SYSTEM
   Brand colours come from the logo: navy #1D2B55, gold #B8963E, green #1F9E78.
   tailwind.css (pre-built) supplies the utility classes; this file defines the
   shared components, the phone layout, and dark mode.
   ============================================================================ */

:root {
    --brand: #2c3f7d;
    --brand-dark: #1d2b55;
    --navy: #1d2b55;
    --navy-deep: #131d3d;
    --gold: #b8963e;
    --green: #1f9e78;
    --surface: #f4f6fb;
    --panel: #ffffff;
    --ink: #1e293b;
    --muted: #64748b;
    --line: #e6e9f1;
    --focus: rgba(44, 63, 125, 0.18);
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 16px -8px rgba(15, 23, 42, 0.10);
    --radius: 16px;
    --bottom-nav-h: 64px;
}

[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--surface); color: var(--ink); font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- Login / auth screens ---- */
.login-body { background: radial-gradient(circle at 20% 0%, #e9edf8 0%, #dfe4f3 45%, #cdd5ec 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); border-radius: 24px; box-shadow: 0 20px 60px -20px rgba(29,43,85,0.35); padding: 32px; width: 100%; max-width: 420px; border-top: 4px solid var(--gold); }

/* ---- Form controls & buttons ---- */
/* Round 20: fields stand out from the white cards — a visible border, a light tint inside, a darker placeholder. */
.input-field { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1.5px solid #b9c3d6; background: #f7f9fd; color: var(--ink); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06); transition: border-color .15s, box-shadow .15s, background .15s; }
.input-field:hover:not(:disabled):not([readonly]) { border-color: #8f9cb5; }
.input-field:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--focus); }
.input-field::placeholder { color: #8590a4; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--brand); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
[data-theme="dark"] .input-field { background: #1b2542; border-color: #33426b; }
[data-theme="dark"] .input-field:focus { background: #1f2a4a; }
.input-field:disabled, .input-field[readonly] { background: #f1f4f9; color: #475569; border-color: #e6e9f1; cursor: not-allowed; }
[data-theme="dark"] .input-field:disabled { background: #111a30; color: #94a3b8; }
.btn-primary, .btn-secondary, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border-radius: 12px; cursor: pointer; transition: background .15s, box-shadow .15s, transform .05s; white-space: nowrap; }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: translateY(1px); }
.btn-primary { padding: 11px 18px; background: var(--brand); color: #fff; border: none; box-shadow: 0 8px 20px -10px rgba(29,43,85,0.7); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:disabled, .btn-secondary:disabled { opacity: .55; cursor: not-allowed; }
.btn-secondary { padding: 10px 16px; background: #fff; color: var(--ink); border: 1px solid #dbe1ec; }
.btn-secondary:hover { background: #f7f8fc; }
.btn-danger { padding: 10px 16px; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* ---- App shell ---- */
.app-shell { min-height: 100vh; display: flex; }
.app-sidebar { width: 256px; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color: #e5e7eb; flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.app-sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; color: #c7cfe3; font-size: 14px; font-weight: 500; transition: background .15s, color .15s; position: relative; }
.app-sidebar-link svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .9; }
.app-sidebar-link:hover { background: rgba(255,255,255,0.07); color: #fff; }
.app-sidebar-link.active { background: rgba(255,255,255,0.12); color: #fff; }
.app-sidebar-section { padding: 16px 14px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8892b0; }
.app-sidebar-section:first-child { padding-top: 2px; }
.app-sidebar-link.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--gold); }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.app-main { flex: 1; min-width: 0; }
.app-topbar { background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 10px 24px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 30; min-height: 64px; }
.app-content { padding: 24px; max-width: 1400px; margin: 0 auto; }
.icon-btn { position: relative; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #475569; background: #f1f4f9; border: none; cursor: pointer; flex-shrink: 0; }
.icon-btn:hover { background: #e7ebf3; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.icon-btn .count.gold { background: var(--gold); }
.topbar-search { position: relative; flex: 1; max-width: 420px; }
.topbar-search input { width: 100%; padding: 10px 14px 10px 40px; border-radius: 12px; border: 1px solid transparent; background: #f1f4f9; font-size: 14px; }
.topbar-search input:focus { outline: none; background: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus); }
.topbar-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #94a3b8; }
.dropdown-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 380px; max-width: calc(100vw - 24px); max-height: 460px; overflow-y: auto; background: var(--panel); border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(15,23,42,0.35); border: 1px solid var(--line); z-index: 60; }
.search-results { left: 0; right: auto; width: 100%; min-width: 320px; }
.task-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; }
.task-row:hover { background: #f8fafc; }
.task-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.tone-amber { background: #f59e0b; } .tone-red { background: #ef4444; } .tone-green { background: var(--green); } .tone-blue { background: #3b82f6; } .tone-purple { background: #8b5cf6; }

/* "My tasks" strip at the top of each dashboard */
.task-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; scrollbar-width: thin; }
.task-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ink); }
.task-chip b { font-size: 18px; }

/* ---- Cards / KPIs ---- */
.card { background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.kpi-tile { background: var(--panel); border-radius: var(--radius); padding: 18px 20px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; font-weight: 600; }

/* ---- Status badges ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-blue { background: #e0e7ff; color: #273a78; }
.badge-green { background: #d9f5ea; color: #0f6b50; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-slate { background: #f1f5f9; color: #475569; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-gold { background: #f5ecd2; color: #7a5f28; }
.badge-teal { background: #ccfbf1; color: #0f5f58; }

/* ---- Tables ---- */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.data-table tbody tr:hover { background: #fafbff; }
.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Status stepper (the Pending → Paid → On the way → Arrived line) ---- */
.stepper { display: flex; align-items: flex-start; gap: 0; margin: 8px 0 4px; }
.stepper .step { flex: 1; text-align: center; position: relative; font-size: 12px; color: #94a3b8; font-weight: 600; }
.stepper .step::before { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 4px; background: #e2e8f0; z-index: 0; }
.stepper .step:first-child::before { display: none; }
.stepper .dot { width: 26px; height: 26px; border-radius: 999px; background: #e2e8f0; color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; position: relative; z-index: 1; font-size: 12px; }
.stepper .step.done { color: var(--ink); }
.stepper .step.done .dot { background: var(--green); }
.stepper .step.done::before { background: var(--green); }
.stepper .step.current .dot { background: var(--gold); box-shadow: 0 0 0 5px rgba(184,150,62,0.2); }
.stepper .step.current { color: var(--ink); }
.stepper .step.bad .dot { background: #ef4444; }

/* ---- Empty states & loading ---- */
.empty-state { text-align: center; padding: 40px 16px; color: #94a3b8; }
.empty-state svg { width: 40px; height: 40px; margin: 0 auto 10px; opacity: .6; }
.stars { display: inline-flex; gap: 2px; }
.stars button { font-size: 24px; line-height: 1; color: #d6dbe5; background: none; border: none; cursor: pointer; padding: 2px; }
.stars button.on { color: var(--gold); }

/* ---- Management / CEO hero panels ---- */
.hero-dark { background: linear-gradient(135deg, #0f172a 0%, var(--navy) 60%, #2c3f7d 100%); border-radius: 24px; color: #e2e8f0; position: relative; overflow: hidden; }
.hero-dark::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(184,150,62,0.22), transparent 55%); pointer-events: none; }
.stat-glow { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; backdrop-filter: blur(6px); }
.hero-ceo { background: linear-gradient(135deg, #05070f 0%, #0b1020 45%, #1a1408 100%); border-radius: 28px; color: #f1f5f9; position: relative; overflow: hidden; border: 1px solid rgba(212,175,55,0.25); }
.hero-ceo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 0%, rgba(212,175,55,0.16), transparent 50%), radial-gradient(circle at 90% 100%, rgba(129,140,248,0.14), transparent 55%); pointer-events: none; }
.hero-ceo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(212,175,55,0.06) 50%, transparent 70%); background-size: 200% 200%; animation: ceo-shimmer 8s ease-in-out infinite; pointer-events: none; }
@keyframes ceo-shimmer { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .hero-ceo::before { animation: none; } }
.gold-text { color: #d4af37; }
.gold-tile { background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.3); border-radius: 16px; backdrop-filter: blur(6px); }
.ceo-badge { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #d4af37, #f5d576); color: #1a1408; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }

/* ---- Notification bell (legacy names kept) ---- */

/* ---- Pipeline timeline ---- */
.pipeline-step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.pipeline-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--brand); margin-top: 5px; flex-shrink: 0; }

/* ---- Bottom navigation (phones) ---- */
.bottom-nav { display: none; }

/* ===========================================================================
   TABLET & PHONE
   =========================================================================== */
@media (max-width: 1023px) {
    .app-sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .22s ease; z-index: 70; box-shadow: 20px 0 60px -20px rgba(0,0,0,0.5); }
    .app-sidebar.open { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 65; }
    .app-content { padding: 16px; }
    .app-topbar { padding: 8px 12px; }
}

@media (max-width: 767px) {
    body { font-size: 15px; }
    .app-content { padding: 14px 12px calc(var(--bottom-nav-h) + 24px); }
    .topbar-title { font-size: 16px; }
    .topbar-search.desktop-only { display: none; }

    /* Fixed bottom bar with the role's main pages */
    .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line); z-index: 40; box-shadow: 0 -8px 24px -16px rgba(15,23,42,0.3); }
    .bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: #64748b; background: none; border: none; position: relative; }
    .bottom-nav a.active { color: var(--navy); }
    .bottom-nav a.active::after { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
    .bottom-nav svg { width: 22px; height: 22px; }
    .bottom-nav .count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }

    /* Bigger touch targets; 16px inputs stop iPhones zooming into the form */
    .input-field, select.input-field, textarea.input-field { font-size: 16px; min-height: 46px; }
    .btn-primary, .btn-secondary, .btn-danger { min-height: 46px; }
    .data-table button, .data-table a { min-height: 36px; display: inline-flex; align-items: center; }

    /* Tables become stacked cards: each cell shows its column name (added by app.js) */
    .data-table.cardify thead { display: none; }
    .data-table.cardify, .data-table.cardify tbody { display: block; }
    .data-table.cardify tr { display: block; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
    .data-table.cardify tbody tr:hover { background: var(--panel); }
    .data-table.cardify td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #eef1f6; text-align: right; }
    .data-table.cardify td:last-child { border-bottom: none; }
    .data-table.cardify td::before { content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; text-align: left; flex-shrink: 0; max-width: 45%; }
    .data-table.cardify td[data-label=""]::before { content: none; }
    .data-table.cardify td[colspan] { display: block; text-align: center; }
    .data-table.cardify td[colspan]::before { content: none; }
    .card.overflow-x-auto:has(.cardify) { background: transparent; border: none; box-shadow: none; }

    /* Item-entry tables in forms (MRF items, order items, receiving): each row becomes a small
       card with the field names shown above the inputs */
    .form-rows.cardify thead { display: none; }
    .form-rows.cardify, .form-rows.cardify tbody { display: block; }
    .form-rows.cardify tr { display: block; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
    .form-rows.cardify td { display: block; padding: 4px 0 !important; width: 100% !important; }
    .form-rows.cardify td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin-bottom: 2px; }
    .form-rows.cardify td[data-label=""]::before { content: none; }
    .form-rows.cardify td:last-child button { width: 100%; padding: 8px; border: 1px dashed #fecaca; border-radius: 10px; }

    /* Pop-up forms become full-height sheets that slide up from the bottom */
    .fixed.inset-0.z-50 { align-items: flex-end !important; padding: 0 !important; }
    .fixed.inset-0.z-50 > .card, .fixed.inset-0.z-50 > div:not(.fixed) { width: 100% !important; max-width: 100% !important; max-height: 94vh !important; border-radius: 22px 22px 0 0 !important; margin: 0 !important; animation: sheet-up .22s ease; }
    @keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }

    .dropdown-panel { position: fixed; left: 8px; right: 8px; top: 64px; width: auto; max-width: none; max-height: 70vh; }
    .kpi-value { font-size: 22px; }
}

/* ===========================================================================
   DARK MODE (Profile & Settings → Theme). Remaps the common surfaces and text
   colours used across the screens.
   =========================================================================== */
[data-theme="dark"] {
    --surface: #0d1323; --panel: #151d33; --ink: #e5e9f3; --muted: #94a3b8; --line: #243050;
    --shadow: 0 1px 2px rgba(0,0,0,0.3);
    color-scheme: dark;
}
[data-theme="dark"] body { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .app-topbar { background: rgba(21,29,51,0.92); }
[data-theme="dark"] .bg-white, [data-theme="dark"] .login-card, [data-theme="dark"] .bottom-nav { background: var(--panel) !important; }
[data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-slate-100, [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .hover\:bg-slate-50:hover, [data-theme="dark"] .data-table tbody tr:hover { background: #1b2542 !important; }
[data-theme="dark"] .bg-amber-50, [data-theme="dark"] .bg-yellow-50 { background: #2e2715 !important; }
[data-theme="dark"] .bg-red-50 { background: #34181b !important; }
[data-theme="dark"] .bg-emerald-50, [data-theme="dark"] .bg-green-50 { background: #13302a !important; }
[data-theme="dark"] .bg-blue-50 { background: #16233f !important; }
[data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-gray-800 { color: var(--ink) !important; }
[data-theme="dark"] .text-slate-600, [data-theme="dark"] .text-slate-500 { color: #a4afc6 !important; }
[data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-slate-50 { border-color: var(--line) !important; }
[data-theme="dark"] .input-field, [data-theme="dark"] .btn-secondary, [data-theme="dark"] .topbar-search input, [data-theme="dark"] .icon-btn { background: #1b2542; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .data-table td { border-bottom-color: #1f2a47; }
[data-theme="dark"] .badge-slate { background: #243050; color: #cbd5e1; }
[data-theme="dark"] .badge-teal { background: #0f3d3a; color: #99f6e4; }
[data-theme="dark"] .dropdown-panel { background: var(--panel); }
[data-theme="dark"] .task-row:hover { background: #1b2542; }
[data-theme="dark"] .bottom-nav a.active { color: #e2c98a; }
[data-theme="dark"] .bottom-nav a, [data-theme="dark"] .bottom-nav button { color: #94a3b8; }
[data-theme="dark"] .card.overflow-x-auto:has(.cardify) { background: transparent; }

/* ---- Print (downloaded documents are PDFs; this keeps browser printing clean) ---- */
@media print {
    .app-sidebar, .app-topbar, .bottom-nav, .task-strip { display: none !important; }
    .app-content { padding: 0; }
}

/* Responsive show/hide for the round icon buttons (their display rule would otherwise win). */
@media (min-width: 768px) { .icon-btn.md\:hidden { display: none; } }
@media (min-width: 1024px) { .icon-btn.lg\:hidden, .sidebar-backdrop { display: none !important; } }

/* ---------------------------------------------------------------------------
   Leadership calendar (modules/shared/calendar.php, deadlines box)
   Colours: deadline red · meeting navy-blue · reminder gold · task teal
   --------------------------------------------------------------------------- */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cal-title { font-size: 20px; font-weight: 800; color: #1e293b; margin-left: 6px; }
.cal-seg { display: inline-flex; background: #eef1f7; border-radius: 12px; padding: 3px; gap: 2px; }
.cal-seg button { flex: 1; padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #64748b; background: none; border: none; white-space: nowrap; }
.cal-seg button.on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(15,23,42,.15); }
.cal-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.cal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid transparent; background: #fff; }
.cal-chip b { font-size: 15px; }
.cal-chip.red { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.cal-chip.amber { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.cal-chip.blue { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.cal-chip.muted { opacity: .55; }
.cal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.cal-filter { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid #dbe1ec; background: #fff; color: #64748b; }
.cal-filter.on { color: #fff; border-color: transparent; background: var(--navy); }
.cal-filter.k-deadline.on { background: #dc2626; } .cal-filter.k-meeting.on { background: #3949ab; }
.cal-filter.k-reminder.on { background: #b8963e; } .cal-filter.k-task.on { background: #0d9488; }
.cal-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; }

.cal-month { padding: 0; overflow: hidden; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays div { padding: 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; border-bottom: 1px solid var(--line); }
.cal-day { min-height: 112px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; overflow: hidden; }
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: #f8fafc; }
.cal-day.weekend { background: #fbfcfe; }
.cal-day.out { background: #f8f9fb; }
.cal-day.out .cal-day-num { color: #cbd5e1; }
.cal-day.picked { box-shadow: inset 0 0 0 2px var(--gold); }
.cal-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin-bottom: 4px; }
.cal-day-num { font-size: 13px; font-weight: 700; color: #334155; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.cal-day.today .cal-day-num { background: var(--navy); color: #fff; }
.cal-eth { font-size: 10px; color: #a0aec0; white-space: nowrap; }
.cal-pill { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 6px; border-radius: 6px; margin-bottom: 3px; border-left: 3px solid; background: #f1f5f9; color: #1e293b; min-width: 0; }
.cal-pill-time { color: #64748b; font-weight: 500; flex-shrink: 0; }
.cal-pill.k-deadline { border-color: #dc2626; background: #fef2f2; } .cal-pill.k-meeting { border-color: #3949ab; background: #eef0fb; }
.cal-pill.k-reminder { border-color: #b8963e; background: #fbf6ea; } .cal-pill.k-task { border-color: #0d9488; background: #ecfdf8; }
.cal-pill.crit { font-weight: 800; } .cal-pill.over { background: #fee2e2; }
.cal-pill.done { opacity: .5; text-decoration: line-through; } .cal-pill.proj { opacity: .55; border-style: dashed; }
.cal-more { font-size: 11px; font-weight: 600; color: #64748b; padding-left: 4px; }
.cal-dots { display: none; gap: 3px; flex-wrap: wrap; }
.cal-dots i { width: 7px; height: 7px; border-radius: 999px; background: #94a3b8; }
.cal-dots i.k-deadline { background: #dc2626; } .cal-dots i.k-meeting { background: #3949ab; } .cal-dots i.k-reminder { background: #b8963e; } .cal-dots i.k-task { background: #0d9488; }
.cal-dots i.done { opacity: .35; }

.cal-group { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px 4px; color: #64748b; }
.cal-group.red { color: #dc2626; } .cal-group.amber { color: #b45309; } .cal-group.blue { color: #1d4ed8; }
.cal-row { padding: 12px 14px; cursor: pointer; transition: background .12s; }
.cal-row:hover { background: #f8fafc; }
.cal-row-in { display: flex; align-items: center; gap: 12px; }
.cal-row-when { width: 92px; flex-shrink: 0; display: flex; flex-direction: column; font-size: 12px; color: #64748b; }
.cal-row-when b { color: #334155; font-size: 13px; }
.cal-bar { width: 4px; align-self: stretch; min-height: 34px; border-radius: 4px; background: #94a3b8; flex-shrink: 0; }
.cal-bar.k-deadline { background: #dc2626; } .cal-bar.k-meeting { background: #3949ab; } .cal-bar.k-reminder { background: #b8963e; } .cal-bar.k-task { background: #0d9488; }
.cal-row-title { font-weight: 700; color: #1e293b; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-row-sub { font-size: 12px; color: #64748b; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-row-flags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.cal-kind { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; background: #64748b; }
.cal-kind.k-deadline { background: #dc2626; } .cal-kind.k-meeting { background: #3949ab; } .cal-kind.k-reminder { background: #b8963e; } .cal-kind.k-task { background: #0d9488; }
.cal-facts { display: grid; gap: 8px; margin-top: 14px; font-size: 14px; color: #334155; }
.cal-facts > div { display: flex; align-items: center; gap: 10px; }
.cal-facts svg { width: 17px; height: 17px; color: #94a3b8; flex-shrink: 0; }
.cal-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; font-size: 13px; color: #334155; }
.cal-file svg { color: #94a3b8; flex-shrink: 0; }
a.cal-file:hover { border-color: var(--gold); }
.cal-box-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid #f1f5f9; font-size: 14px; }
.cal-box-row .cal-bar { min-height: 22px; }
.cal-box-row:hover { background: #f8fafc; }
.cal-box-when { width: 112px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: #64748b; }

@media (max-width: 640px) {
    .cal-title { font-size: 17px; }
    .cal-filters { margin-left: 0; }
    .cal-day { min-height: 58px; padding: 4px; }
    .cal-day .cal-pill, .cal-day .cal-more, .cal-eth { display: none; }
    .cal-dots { display: flex; }
    .cal-row-when { width: 74px; }
    .cal-row-flags { display: none; }
    .cal-box-when { width: 86px; }
}
[data-theme="dark"] .cal-title, [data-theme="dark"] .cal-row-title, [data-theme="dark"] .cal-row-when b { color: #e2e8f0; }
[data-theme="dark"] .cal-seg { background: #1e293b; } [data-theme="dark"] .cal-seg button.on { background: #334155; color: #fff; }
[data-theme="dark"] .cal-day:hover, [data-theme="dark"] .cal-row:hover, [data-theme="dark"] .cal-box-row:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .cal-day.weekend, [data-theme="dark"] .cal-day.out { background: rgba(255,255,255,.02); }
[data-theme="dark"] .cal-day-num { color: #cbd5e1; }
[data-theme="dark"] .cal-pill { background: rgba(255,255,255,.06); color: #e2e8f0; }
[data-theme="dark"] .cal-filter, [data-theme="dark"] .cal-chip { background: transparent; }

/* ---------------------------------------------------------------------------
   Supplier list (Admin → Suppliers)
   --------------------------------------------------------------------------- */
.sup-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sup-stat { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }
.sup-stat span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.sup-stat b { font-size: 20px; font-weight: 800; color: var(--navy); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-stat small { font-size: 12px; color: #64748b; }
.sup-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: #eef1f7; color: var(--navy); letter-spacing: .02em; }
.sup-place { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; min-width: 130px; }
.sup-place b { font-size: 14px; color: var(--navy); }
.sup-place span { color: #64748b; }
.sup-place em { font-style: normal; font-weight: 700; color: #334155; margin-top: 2px; }
.sup-cat-box { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-top: 6px; }
.sup-cat-group { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; margin: 6px 0 4px; }
.sup-cat { font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid #dbe1ec; background: #fff; color: #475569; }
.sup-cat b { color: var(--navy); }
.sup-cat.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.sup-cat.on b { color: #e2c98a; }
@media (max-width: 900px) { .sup-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
[data-theme="dark"] .sup-stat b, [data-theme="dark"] .sup-place b { color: #e2c98a; }
[data-theme="dark"] .sup-chip { background: rgba(255,255,255,.08); color: #e2e8f0; }
[data-theme="dark"] .sup-cat { background: transparent; color: #cbd5e1; }

/* Utility sizes used by the calendar and supplier screens that the pre-built Tailwind file does not contain. */
.mt-5 { margin-top: 1.25rem; }
.max-w-\[130px\] { max-width: 130px; }
.max-w-\[150px\] { max-width: 150px; }
.max-w-\[170px\] { max-width: 170px; }
.max-w-\[230px\] { max-width: 230px; }
.max-w-\[260px\] { max-width: 260px; }
.max-w-\[280px\] { max-width: 280px; }

/* ---------------------------------------------------------------------------
   Connection (company chat). Computers: list + conversation side by side.
   Phones: full-screen list; a chat opens full screen with a back arrow.
   --------------------------------------------------------------------------- */
.chat-app { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100vh - 112px); height: calc(100dvh - 112px); background: var(--panel, #fff);
            border: 1px solid var(--line); border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 10px 30px -22px rgba(15,23,42,.35); }
.chat-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: #fbfcfe; }
.chat-list-head { padding: 12px; border-bottom: 1px solid var(--line); }
.chat-search { position: relative; }
.chat-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #94a3b8; }
.chat-search input { width: 100%; padding: 10px 12px 10px 38px; border-radius: 12px; border: 1px solid transparent; background: #eef1f7; font-size: 14px; }
.chat-search input:focus { outline: none; background: #fff; border-color: var(--brand); }
.chat-list-scroll { flex: 1; overflow-y: auto; padding: 6px; }
.chat-section { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; padding: 12px 10px 6px; }
.chat-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; text-align: left; background: none; border: none; transition: background .12s; }
.chat-item:hover { background: #f1f4f9; }
.chat-item.on { background: #e8ecf8; }
.chat-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-item-top b { font-size: 14.5px; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-top small { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.chat-role { font-size: 11.5px; color: #6366f1; font-weight: 600; }
.chat-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #64748b; min-width: 0; }
.chat-badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.chat-avatar { width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; background: #475569; }
.chat-avatar.channel { background: linear-gradient(135deg, var(--navy), #3949ab); }
.chat-avatar.sm { width: 30px; height: 30px; font-size: 11px; align-self: flex-end; }
.chat-avatar.ghost { visibility: hidden; }
.chat-empty { padding: 24px; text-align: center; color: #94a3b8; font-size: 14px; }
.chat-empty.big { padding: 60px 20px; }

.chat-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative;
               background: #f5f7fb radial-gradient(circle at 1px 1px, rgba(29,43,85,.05) 1px, transparent 0) 0 0 / 22px 22px; }
.chat-thread-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--panel, #fff); border-bottom: 1px solid var(--line); min-height: 64px; }
.chat-thread-title { font-weight: 800; color: #1e293b; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread-sub { font-size: 12px; color: #64748b; }
.chat-back { display: none; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px 18px 10px; overscroll-behavior: contain; }
.chat-day { display: flex; justify-content: center; margin: 14px 0 10px; }
.chat-day span { font-size: 12px; font-weight: 600; color: #64748b; background: rgba(255,255,255,.9); border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.chat-row.cont { margin-top: 3px; }
.chat-row.me { justify-content: flex-end; }
.chat-bubble { max-width: min(78%, 560px); padding: 8px 12px 6px; border-radius: 18px; background: #fff; color: #1e293b; box-shadow: 0 1px 2px rgba(15,23,42,.08); position: relative; min-width: 64px; }
.chat-row.them .chat-bubble { border-bottom-left-radius: 6px; }
.chat-row.me .chat-bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
.chat-row.cont.them .chat-bubble { border-top-left-radius: 6px; }
.chat-row.cont.me .chat-bubble { border-top-right-radius: 6px; }
.chat-sender { font-size: 12px; margin-bottom: 2px; color: #64748b; }
.chat-sender b { color: #3949ab; }
.chat-text { font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.chat-text a { text-decoration: underline; }
.chat-row.me .chat-text a { color: #fde7a8; }
.chat-code { background: rgba(184,150,62,.18); border-radius: 5px; padding: 0 4px; font-weight: 700; }
.chat-row.me .chat-code { background: rgba(255,255,255,.18); }
.chat-mention { color: #3949ab; }
.chat-row.me .chat-mention { color: #fde7a8; }
.chat-time { font-size: 10.5px; text-align: right; margin-top: 2px; color: #94a3b8; }
.chat-row.me .chat-time { color: rgba(255,255,255,.65); }
.chat-image { display: block; max-width: 100%; width: 260px; max-height: 300px; object-fit: cover; border-radius: 12px; margin: 2px 0 4px; cursor: zoom-in; background: #e2e8f0; }
.chat-file { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: rgba(15,23,42,.06); margin: 2px 0 4px; font-size: 13.5px; font-weight: 600; max-width: 280px; }
.chat-row.me .chat-file { background: rgba(255,255,255,.14); color: #fff; }
.chat-file svg { flex-shrink: 0; }
.chat-jump { position: absolute; right: 18px; bottom: 86px; width: 40px; height: 40px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 16px -8px rgba(15,23,42,.4); display: flex; align-items: center; justify-content: center; color: var(--navy); }
.chat-jump svg { transform: rotate(-90deg); }

.chat-compose { padding: 10px 12px; background: var(--panel, #fff); border-top: 1px solid var(--line); }
.chat-pending { display: flex; align-items: center; gap: 8px; font-size: 13px; background: #f1f4f9; border-radius: 10px; padding: 7px 10px; margin-bottom: 8px; }
.chat-pending button { margin-left: auto; color: #dc2626; background: none; border: none; }
.chat-compose-row { display: flex; align-items: flex-end; gap: 6px; }
.chat-compose textarea { flex: 1; resize: none; border: 1px solid transparent; background: #eef1f7; border-radius: 20px; padding: 10px 14px; font-size: 15px; line-height: 1.4; max-height: 140px; min-height: 42px; }
.chat-compose textarea:focus { outline: none; background: #fff; border-color: var(--brand); }
.chat-tool { width: 42px; height: 42px; flex-shrink: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #64748b; cursor: pointer; }
.chat-tool:hover { background: #f1f4f9; color: var(--navy); }
.chat-tool svg { width: 21px; height: 21px; }
.chat-send { width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; border: none; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform .1s, opacity .15s; }
.chat-send:disabled { opacity: .35; }
.chat-send:not(:disabled):active { transform: scale(.92); }
.chat-send svg { width: 19px; height: 19px; margin-left: -2px; }
.phone-only { display: none; }
.chat-viewer { position: fixed; inset: 0; z-index: 80; background: rgba(2,6,23,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; }
.chat-viewer img { max-width: 100%; max-height: 82vh; border-radius: 10px; }

@media (max-width: 767px) {
    .chat-app { position: fixed; left: 0; right: 0; top: 64px; bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); height: auto; border: none; border-radius: 0; z-index: 20;
                grid-template-columns: minmax(0, 1fr); box-shadow: none; }
    .chat-list, .chat-thread { min-width: 0; }
    .chat-thread-open .chat-app { bottom: 0; }
    .chat-thread-open .bottom-nav { display: none; }
    .chat-app.show-list .chat-thread { display: none; }
    .chat-app.show-thread .chat-list { display: none; }
    .chat-list { border-right: none; background: var(--panel, #fff); }
    .chat-back { display: inline-flex; margin-left: -6px; }
    .chat-thread-head { padding: 8px 10px; min-height: 58px; }
    .chat-messages { padding: 12px 10px 8px; }
    .chat-bubble { max-width: 84%; }
    .chat-compose { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
    .phone-only { display: inline-flex; }
    .chat-tool { width: 38px; }
    .chat-jump { bottom: 78px; right: 12px; }
}
[data-theme="dark"] .chat-list { background: #121a2e; }
[data-theme="dark"] .chat-item:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .chat-item.on { background: rgba(99,102,241,.16); }
[data-theme="dark"] .chat-item-top b, [data-theme="dark"] .chat-thread-title { color: #e2e8f0; }
[data-theme="dark"] .chat-thread { background-color: #0f1628; }
[data-theme="dark"] .chat-row.them .chat-bubble { background: #1b2542; color: #e5e9f3; }
[data-theme="dark"] .chat-row.me .chat-bubble { background: #3949ab; }
[data-theme="dark"] .chat-search input, [data-theme="dark"] .chat-compose textarea { background: #1b2542; color: var(--ink); }
[data-theme="dark"] .chat-day span { background: #151d33; }
.chat-item-bottom > .truncate { min-width: 0; flex: 1; }

/* Round 14 — place codes and the Codes page */
.place-code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; white-space: nowrap; }
.place-code.place-head_office { background: #fef3c7; color: #92400e; }
.place-code.place-showroom { background: #fce7f3; color: #9d174d; }
.code-read { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; }
.code-part { display: flex; flex-direction: column; min-width: 70px; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; }
.code-part b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; color: #1d2b55; }
.code-part span { font-size: 11px; color: #64748b; }
.code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.code-grid > div { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 2px 0; }
.code-grid b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #1d2b55; min-width: 38px; }
.code-grid span { color: #475569; }
.codes-list { list-style: disc; padding-left: 18px; font-size: 13px; color: #334155; }
.codes-list li { margin-bottom: 6px; }
[data-theme="dark"] .place-code { background: #243050; color: #c7d2fe; }
[data-theme="dark"] .place-code.place-head_office { background: #3b2f12; color: #fcd34d; }
[data-theme="dark"] .place-code.place-showroom { background: #3b1730; color: #f9a8d4; }
[data-theme="dark"] .code-read, [data-theme="dark"] .code-part { background: #151d33; border-color: #2a3657; }
[data-theme="dark"] .code-part b, [data-theme="dark"] .code-grid b { color: #c7d2fe; }
[data-theme="dark"] .code-grid span, [data-theme="dark"] .codes-list { color: #cbd5e1; }
.items-baseline { align-items: baseline; }
.opacity-60 { opacity: .6; }
/* Round 15 — classes the prebuilt Tailwind file does not have */
.border-indigo-200 { border-color: #c7d2fe; }
.bg-indigo-50\/50 { background-color: rgba(238, 242, 255, .5); }
@media (min-width: 640px) { .sm\:mt-6 { margin-top: 1.5rem; } }
@media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Round 16 — guide page and "What's new" */
.whats-new-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 13px; font-weight: 600; white-space: nowrap; }
.whats-new-pill b { background: #4f46e5; color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; line-height: 18px; }
.guide-hero { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, #1d2b55, #273a78); color: #fff; border-radius: 20px; padding: 22px 24px; margin-bottom: 20px; }
.guide-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #e7c873; font-weight: 700; }
.guide-title { font-size: 26px; font-weight: 800; margin: 2px 0 6px; }
.guide-intro { max-width: 640px; font-size: 15px; line-height: 1.55; color: #dfe5f5; }
.guide-hero .btn-secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.guide-hero select.input-field { background: #fff; color: #1e293b; }
.guide-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 13px; margin-right: 8px; }
.guide-steps { list-style: decimal; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: #334155; }
.guide-steps li { margin-bottom: 8px; padding-left: 2px; }
.guide-list { list-style: disc; padding-left: 20px; font-size: 14px; line-height: 1.6; color: #334155; }
.guide-list li { margin-bottom: 7px; }
.guide-update { padding: 12px 0; border-bottom: 1px solid #eef1f6; }
.guide-update:last-child { border-bottom: 0; }
.guide-update.is-new { background: #f5f7ff; margin: 0 -12px; padding: 12px; border-radius: 12px; border-bottom: 0; margin-bottom: 4px; }
[data-theme="dark"] .whats-new-pill { background: #243050; color: #c7d2fe; }
[data-theme="dark"] .guide-steps, [data-theme="dark"] .guide-list { color: #cbd5e1; }
[data-theme="dark"] .guide-num { background: #243050; color: #c7d2fe; }
[data-theme="dark"] .guide-update { border-color: #2a3657; }
[data-theme="dark"] .guide-update.is-new { background: #1b2542; }

/* Round 17 — HR & Payroll */
.hr-att { display: inline-flex; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.hr-att button { width: 30px; height: 30px; font-size: 13px; font-weight: 700; color: #64748b; background: #fff; border-right: 1px solid #e2e8f0; }
.hr-att button:last-child { border-right: 0; }
.hr-att button.on { color: #fff; }
.hr-att button.att-present { background: #16a34a; } .hr-att button.att-half { background: #65a30d; } .hr-att button.att-absent { background: #dc2626; }
.hr-att button.att-leave { background: #2563eb; } .hr-att button.att-sick { background: #7c3aed; } .hr-att button.att-holiday { background: #0891b2; } .hr-att button.att-rest { background: #64748b; }
.hr-pay .input-field { padding: 4px 6px; font-size: 13px; }
[data-theme="dark"] .hr-att { border-color: #2a3657; } [data-theme="dark"] .hr-att button { background: #151d33; border-color: #2a3657; color: #94a3b8; }

/* Round 18: utilities the inventory and showroom pages use that the prebuilt Tailwind file does not have
   (max-h-[94vh] also keeps the HR windows inside the screen). sm:grid-cols-6 is repeated after grid-cols-3 so
   the wider layout still wins on bigger screens. */
.max-h-60 { max-height: 15rem; }
.max-h-\[94vh\] { max-height: 94vh; }
.max-w-6xl { max-width: 72rem; }
.min-w-\[160px\] { min-width: 160px; }
.min-w-\[180px\] { min-width: 180px; }
.mr-2 { margin-right: .5rem; }
.mr-4 { margin-right: 1rem; }
.ml-2 { margin-left: .5rem; }
.my-2 { margin-top: .5rem; margin-bottom: .5rem; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) {
    .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sm\:col-span-3 { grid-column: span 3 / span 3; }
}
@media (min-width: 1024px) { .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.place-code.place-warehouse { background: #ccfbf1; color: #0f5f58; }
[data-theme="dark"] .place-code.place-warehouse { background: #0f3d3a; color: #99f6e4; }
.sticky { position: sticky; }
/* The CEO's "Approve selected" bar stays just under the top bar (64px high) while the list scrolls. */
.ceo-approve-bar { top: 72px; }

/* Round 19: chat replies (the quoted message, the Reply button), @mention suggestions, the jump highlight */
.chat-quote { display: block; width: 100%; text-align: left; border-left: 3px solid #0f766e; background: rgba(15, 118, 110, .08); border-radius: 8px; padding: 4px 8px; margin: 2px 0 6px; font-size: 12px; line-height: 1.35; color: inherit; }
.chat-quote b { display: block; font-size: 11px; color: #0f766e; }
.chat-quote span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.chat-row.me .chat-quote { border-left-color: #99f6e4; background: rgba(255, 255, 255, .14); }
.chat-row.me .chat-quote b { color: #99f6e4; }
.chat-reply-btn { background: none; border: none; padding: 0 4px 0 0; font-size: 11px; opacity: .55; color: inherit; cursor: pointer; }
.chat-reply-btn:hover { opacity: 1; text-decoration: underline; }
.chat-replying { border-left: 3px solid #0f766e; }
.chat-mentions { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; max-height: 220px; overflow-y: auto; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.chat-mentions button { text-align: left; padding: 7px 12px; font-size: 13px; background: none; border: none; border-bottom: 1px solid #f1f4f9; }
.chat-mentions button:hover { background: #eef2ff; }
.chat-mentions button span { color: #94a3b8; font-size: 11px; }
.chat-flash .chat-bubble { box-shadow: 0 0 0 3px #fbbf24; transition: box-shadow .3s; }
[data-theme="dark"] .chat-mentions { background: #1b2540; }

/* Round 19: utilities the site work pages use that the prebuilt Tailwind file does not have */
.\!bg-slate-800 { background-color: #1e293b !important; }
.bg-slate-300 { background-color: #cbd5e1; }
.bg-emerald-600 { background-color: #059669; }
.border-emerald-600 { border-color: #059669; }
.border-red-600 { border-color: #dc2626; }
.rounded-t { border-top-left-radius: .25rem; border-top-right-radius: .25rem; }
.max-h-48 { max-height: 12rem; }
.normal-case { text-transform: none; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
@media (min-width: 640px) {
    .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .sm\:col-span-4 { grid-column: span 4 / span 4; }
    .sm\:col-span-5 { grid-column: span 5 / span 5; }
}

/* Round 20: utilities the new site, store and control screens use that the prebuilt Tailwind file does not have */
.bg-amber-50\/40 { background-color: rgba(255, 251, 235, .4); }
.border-indigo-600 { border-color: #2c3f7d; }
.border-l-4 { border-left-width: 4px; }
.gap-px { gap: 1px; }
.h-2\.5 { height: .625rem; }
.h-32 { height: 8rem; }
.inline-block { display: inline-block; }
.max-w-7xl { max-width: 80rem; }
.pl-3 { padding-left: .75rem; }
.px-1\.5 { padding-left: .375rem; padding-right: .375rem; }
.right-1 { right: .25rem; }
.top-1 { top: .25rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
@media (min-width: 640px) { .sm\:w-56 { width: 14rem; } }
@media (min-width: 1024px) { .lg\:col-span-6 { grid-column: span 6 / span 6; } }

/* Round 20: "How it works" flows on the guide page */
.guide-flow-title { font-weight: 700; color: var(--navy, #1d2b55); font-size: 14px; margin: 6px 0 8px; }
.guide-flow { display: flex; align-items: stretch; gap: 6px; margin-bottom: 10px; }
.gf-step { flex: 1 1 0; min-width: 0; background: #f5f7fc; border: 1px solid #dde3f0; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.gf-icon { font-size: 22px; line-height: 1; }
.gf-text { font-size: 13px; color: #1e293b; line-height: 1.35; }
.gf-who { margin-top: auto; font-size: 11px; font-weight: 600; color: #2c3f7d; text-transform: uppercase; letter-spacing: .02em; }
.gf-arrow { align-self: center; color: #94a3b8; font-size: 20px; font-weight: 700; flex: 0 0 auto; }
@media (max-width: 900px) { .guide-flow { flex-direction: column; } .gf-arrow { transform: rotate(90deg); align-self: center; line-height: 1; } }
[data-theme="dark"] .gf-step { background: #1b2542; border-color: #2a3760; }
[data-theme="dark"] .gf-text { color: var(--ink); }
[data-theme="dark"] .gf-who { color: #a5b4fc; }

/* Round 21: utilities the new pages use that the prebuilt Tailwind file does not have */
.bg-indigo-300 { background-color: #a5b4fc; }
.border-amber-400 { border-color: #fbbf24; }
.border-red-300 { border-color: #fca5a5; }
.text-red-300 { color: #fca5a5; }
.font-sans { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Ethiopic', Ebrima, sans-serif; }
.min-w-\[12rem\] { min-width: 12rem; }
.min-w-\[14rem\] { min-width: 14rem; }
.pl-5 { padding-left: 1.25rem; }
.whitespace-normal { white-space: normal; }
.ring-2 { box-shadow: 0 0 0 2px var(--hf-ring, #818cf8); }
.ring-indigo-400 { --hf-ring: #818cf8; }
@media (min-width: 640px) { .sm\:inline { display: inline; } }