/* App-wide non-component styles. MudBlazor handles the bulk of the theme;
   this file is only for layout-level rules that span multiple pages. */

/* ============================================================================
   NAMED COLOR PALETTE — single source of truth. Tweak a value here and it
   propagates everywhere; never hard-code a color below this block.
   (Brand navy/gold mirror MudBlazor's Primary/Secondary in Theme/AppTheme.cs.)
   ============================================================================ */
:root {
    /* Brand */
    --app-navy: #1e3a5f;
    --app-gold: #c9a84c;
    --app-navy-tint: rgba(30, 58, 95, 0.08);
    --app-navy-ring: rgba(30, 58, 95, 0.15);
    --app-gold-tint: rgba(201, 168, 76, 0.16);

    /* Text */
    --app-text: #1f2937;
    --app-text-strong: #111827;
    --app-text-soft: #6b7280;
    --app-muted: #94a3b8;
    --app-nav-section: #7c8ba1;
    --app-arrow: #cbd5e1;
    --app-on-dark: #ffffff;
    --app-divider-light: rgba(255, 255, 255, 0.10);

    /* Surfaces & borders */
    --app-bg: #f0f4f8;
    --app-surface: #ffffff;
    --app-border: #d3dbe6;
    --app-card-border: #edf1f5;
    --app-tile-bg: #f8fafc;
    --app-tile-border: #eef2f6;
    --app-row-hover: #f1f5f9;

    /* Shadows */
    --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --app-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.10);
    --app-shadow-lg: 0 6px 16px rgba(16, 24, 40, 0.10);

    /* Status palette — background / foreground pairs (units + pills). */
    --app-status-available-bg: #dcfce7; --app-status-available-fg: #166534;
    --app-status-booked-bg:    #fef3c7; --app-status-booked-fg:    #92400e;
    --app-status-reserved-bg:  #dbeafe; --app-status-reserved-fg:  #1d4ed8;
    --app-status-sold-bg:      #bbf7d0; --app-status-sold-fg:      #14532d;
    --app-status-handover-bg:  #ccfbf1; --app-status-handover-fg:  #0f766e;
    --app-status-handed-bg:    #e0e7ff; --app-status-handed-fg:    #3730a3;
    --app-status-declined-bg:  #fee2e2; --app-status-declined-fg:  #991b1b;
    --app-danger: #dc2626;
    --app-aging-warn: #fff7ed;
    --app-aging-severe: #fef2f2;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    background: var(--app-bg);
    color: var(--app-text);
}

/* Sidebar drawer overrides — match the navy/gold brand. */
.app-drawer .mud-nav-link.active {
    background: var(--app-gold-tint);
    color: var(--app-gold);
    border-left: 3px solid var(--app-gold);
}

/* User view-state pinned to the bottom of the sidebar. */
.nav-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border-top: 1px solid var(--app-divider-light);
}
.nav-user-text { line-height: 1.15; min-width: 0; }
.nav-user-name {
    font-weight: 600;
    color: var(--app-on-dark);
    font-size: 0.83rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-user-role { font-size: 0.7rem; color: var(--app-muted); }

/* Tabs were too tall by default — tighten the header strip + drop the forced
   panel min-height app-wide (ProjectDetail / UnitDetail / Sales & Agency, etc.). */
.mud-tabs-toolbar { min-height: 40px !important; height: 40px; }
.mud-tabs-toolbar .mud-tab { min-height: 40px !important; }
.mud-tabs-panels { min-height: 0 !important; }

/* ============================================================================
   GLOBAL FORM-INPUT STYLE — single source of truth for every input in the app
   (text / numeric / select / date / autocomplete). Fields only carry
   Variant="Outlined" in markup (a MudBlazor render param CSS can't set); all
   visual styling — border, radius, focus accent, adornment icon, label — is here.
   ============================================================================ */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--app-border);
    border-radius: 8px;
    transition: border-color .15s ease;
}
.mud-input.mud-input-outlined:hover:not(.mud-disabled):not(.mud-error) .mud-input-outlined-border {
    border-color: var(--app-navy);
}
.mud-input.mud-input-outlined.mud-focused:not(.mud-error) .mud-input-outlined-border {
    border-color: var(--app-navy);
    border-width: 2px;
}
/* Leading adornment icons: muted by default, brand-navy on focus. */
.mud-input-adornment-start .mud-icon-root { color: var(--app-muted); font-size: 1.15rem; }
.mud-input.mud-focused .mud-input-adornment-start .mud-icon-root { color: var(--app-navy); }
/* Field labels: consistent colour across all forms. */
.mud-input-label { color: var(--app-text-soft); }

/* Grouped-section headers in the sidebar. */
.nav-section {
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--app-nav-section);
    font-weight: 600;
    padding: 0.9rem 1rem 0.3rem;
}

/* Count badge inside a nav link (e.g. overdue receivables, pending POs). */
.nav-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.nav-badge {
    background: var(--app-danger);
    color: var(--app-on-dark);
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 7px;
    margin-left: 0.5rem;
}

/* Stacking-plan cell colors keyed by unit status. */
.unit-cell { width: 100%; min-height: 40px; border-radius: 6px;
             display: flex; flex-direction: column; align-items: center; justify-content: center;
             font-size: 0.72rem; font-weight: 600; cursor: pointer; line-height: 1.15;
             padding: 3px 2px; transition: transform 120ms ease-in-out;
             -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.unit-cell:hover { transform: scale(1.05); }
.unit-cell .unit-cell-contract { font-size: 0.6rem; font-weight: 600; opacity: 0.85; }
.unit-cell.dimmed { opacity: 0.12; }

/* Unit-cell backgrounds match the StatusChip pill palette exactly. */
.unit-cell.status-available  { background: var(--app-status-available-bg); color: var(--app-status-available-fg); }
.unit-cell.status-booked     { background: var(--app-status-booked-bg);    color: var(--app-status-booked-fg); }
.unit-cell.status-reserved   { background: var(--app-status-reserved-bg);  color: var(--app-status-reserved-fg); }
.unit-cell.status-sold       { background: var(--app-status-sold-bg);      color: var(--app-status-sold-fg); }
.unit-cell.status-handover   { background: var(--app-status-handover-bg);  color: var(--app-status-handover-fg); }
.unit-cell.status-handedover { background: var(--app-status-handed-bg);    color: var(--app-status-handed-fg); }
.unit-cell.status-declined   { background: var(--app-status-declined-bg);  color: var(--app-status-declined-fg); }

/* Clickable status filter chips (double as the legend). */
.filter-chip { cursor: pointer; border-radius: 9999px; border: 2px solid transparent;
               display: inline-flex; align-items: center; }
.filter-chip.selected { border-color: var(--app-navy); }

/* Aging-report row severity. */
tr.aging-warn   td { background: var(--app-aging-warn); }
tr.aging-severe td { background: var(--app-aging-severe); }

/* CRM funnel summary bar (clickable stage filter). */
.funnel-bar { display: flex; align-items: stretch; gap: 0.25rem; flex-wrap: wrap; }
.funnel-cell { flex: 1; min-width: 110px; background: var(--app-surface); border: 1px solid var(--app-card-border); border-radius: 12px;
               box-shadow: var(--app-shadow-sm); padding: 0.6rem 0.9rem; cursor: pointer;
               transition: border-color 120ms, box-shadow 120ms; text-align: center; }
.funnel-cell:hover { box-shadow: var(--app-shadow-md); }
.funnel-cell.selected { border-color: var(--app-navy); box-shadow: 0 0 0 2px var(--app-navy-ring); }
.funnel-count { font-size: 1.4rem; font-weight: 700; color: var(--app-text-strong); line-height: 1.1; }
.funnel-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--app-text-soft); font-weight: 600; margin-top: 2px; }
.funnel-arrow { color: var(--app-arrow); align-self: center; }

/* KPI cards — plain surface; the colored accent now lives in the icon tile. */
.kpi-card { border-radius: 10px; }

/* Reusable elevated-but-flat card used across detail pages. */
.app-card { background: var(--app-surface); border: 1px solid var(--app-card-border); border-radius: 12px;
            box-shadow: var(--app-shadow-sm); }

/* Breathing room inside tab panels (Project detail, Unit detail, etc.). The
   MudTabs PanelClass param didn't reliably pad the panel content, so pad the
   panel element directly. */
.mud-tab-panel { padding: 0.5rem 1.5rem 0.5rem !important; }

/* Grouped form sections on detail/edit forms. */
.form-section { margin-bottom: 0.5rem; }
.form-section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em;
                      color: var(--app-navy); font-weight: 700; margin-bottom: 0.9rem;
                      display: flex; align-items: center; gap: 0.5rem; }
.form-section-title .mud-icon-root { font-size: 1.1rem; color: var(--app-gold); }

/* Hero summary strip at the top of a detail form. */
.detail-hero { display: flex; align-items: center; gap: 1.25rem; }
.detail-hero .hero-name { font-size: 1.25rem; font-weight: 700; color: var(--app-text-strong); line-height: 1.2; }
.detail-hero .hero-sub  { font-size: 0.8rem; color: var(--app-text-soft); margin-top: 2px; }

/* Mobile staff "My Leads" page (token-gated, bare layout). */
.mobile-shell { max-width: 560px; margin: 0 auto; padding: 1rem 0.9rem 2.5rem; }
.mobile-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mobile-hello { font-size: 1.3rem; font-weight: 700; color: var(--app-navy); line-height: 1.15; }
.mobile-sub { font-size: 0.8rem; color: var(--app-text-soft); margin-top: 2px; }
.mobile-section-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem;
                        text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-navy);
                        font-weight: 700; margin: 1.1rem 0 0.6rem; }
.mobile-section-title .mud-icon-root { font-size: 1.05rem; color: var(--app-gold); }
.mobile-lead { padding: 0.85rem 0.9rem; margin-bottom: 0.6rem; }
.mobile-lead.todo { border-left: 3px solid var(--app-gold); }
.mobile-lead-top { display: flex; justify-content: space-between; align-items: flex-start; }
.mobile-lead-name { font-size: 1rem; font-weight: 700; color: var(--app-text-strong); }
.mobile-lead-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
                    font-size: 0.75rem; color: var(--app-text-soft); margin-top: 0.35rem; }
.mobile-lead-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

/* Setup hub navigation tiles. */
.setup-tile { display: flex; align-items: center; gap: 1rem; height: 100%; cursor: pointer;
              transition: box-shadow 120ms ease, transform 120ms ease; }
.setup-tile:hover { box-shadow: var(--app-shadow-lg); transform: translateY(-2px); }
.setup-tile-icon { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
                   display: flex; align-items: center; justify-content: center;
                   background: var(--app-navy-tint); color: var(--app-navy); }
.setup-tile-icon .mud-icon-root { font-size: 1.5rem; }

/* Compact label/value stat tile (spec grids, summaries). */
.stat-tile { background: var(--app-tile-bg); border: 1px solid var(--app-tile-border); border-radius: 10px; padding: 0.6rem 0.75rem; }
.stat-tile .stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
                         color: var(--app-text-soft); font-weight: 600; }
.stat-tile .stat-value { font-size: 1rem; font-weight: 700; color: var(--app-text-strong); margin-top: 2px; }

/* Clickable agency rows on the Sales page. */
.agency-row { padding: 0.5rem 0.4rem; border-radius: 8px; cursor: pointer; transition: background 120ms; }
.agency-row:hover { background: var(--app-row-hover); }
.agency-row.selected { background: var(--app-navy-tint); }

/* Print: hide app chrome + non-printable controls; keep cell colors. */
@media print {
    .mud-appbar, .mud-drawer, .no-print { display: none !important; }
    .mud-main-content { margin: 0 !important; padding: 0 !important; }
    body { background: var(--app-surface) !important; }
    .unit-cell:hover { transform: none; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}