@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================================
   TRENDSIC DYNAMICS - RESOURCE MANAGEMENT (daily allocation board) - Signal
   Verbatim translation of docs/design/export/Resource Management.dc.html into
   the real Durandal/Knockout module. Root class .rmg-root carries every design
   token as a CSS var; markup uses var(--x, fallback) so it degrades gracefully.
   Reuses the EXISTING crewAssignments backend (project/job/crewMembers/
   equipment reads joined client-side + updateStatus POST).

   CRITICAL: this page is PRINTED and physically handed to a foreman. The
   @media print block below produces a dense, high-contrast, page-break-aware
   sheet (rmg-print); controls/board are hidden on paper (rmg-noprint /
   rmg-screen). Status renders as TEXT badges on paper (no color reliance).
   ============================================================================ */

.rmg-root {
    /* shared */
    --brand-50:#EEF1FE; --brand-100:#DDE3FD; --brand-200:#C2CCFB; --brand-400:#7B8FF3; --brand-500:#5E76EE;
    --brand-600:#4C63E6; --brand-700:#3D4FC9; --brand-800:#3340A0; --brand-900:#28297A;
    --brand-grad:linear-gradient(135deg,#5E76EE,#8A63E8);
    --success:#15A06B; --danger:#E04646; --warning:#EE8A2E; --gold:#D99B12; --purple:#8B5CF6; --info:#4C6EF5;
    --r-md:12px; --r-lg:16px;
    --e1:0 1px 2px rgba(20,25,55,.06); --e2:0 8px 28px rgba(20,25,55,.14);
    --ease:cubic-bezier(.2,.8,.2,1);

    /* light (default) */
    --bg:#F5F6FB; --surface:#FFFFFF; --surface-2:#FAFBFE; --border:#E5E8F2; --border-strong:#D2D7E6;
    --text:#1A1D2E; --text-2:#4A4F63; --muted:#767C92; --faint:#A2A7BC;
    --info-bg:#ECEFFB; --info-fg:#3D4FC9; --ok-bg:#E2F6EE; --ok-fg:#0E6B47;
    --warn-bg:#FCEEDD; --warn-fg:#B5651A; --gold-bg:#FBF1D6; --gold-fg:#8A6A0C;
    --bad-bg:#FCE7E7; --bad-fg:#B3262B; --bad-line:#F4D4D4;
    --pur-bg:#EFE9FD; --pur-fg:#6D45C9; --neutral-bg:#F1F2F6; --neutral-fg:#6B7080;

    font-family:'Plus Jakarta Sans',sans-serif;
}

.rmg-root.dark {
    --bg:#0E1430; --surface:#161E3C; --surface-2:#1B2446; --border:#2A335C; --border-strong:#38436F;
    --text:#EEF1FB; --text-2:#B9C2E0; --muted:#8590B5; --faint:#6B7596;
    --info-bg:rgba(94,118,238,.16); --info-fg:#C2CCFB; --ok-bg:rgba(52,211,153,.15); --ok-fg:#5FE3B0;
    --warn-bg:rgba(238,138,46,.16); --warn-fg:#F0A961; --gold-bg:rgba(217,155,18,.16); --gold-fg:#F2C14E;
    --bad-bg:rgba(224,70,70,.16); --bad-fg:#F58A8A; --bad-line:rgba(224,70,70,.32);
    --pur-bg:rgba(139,92,246,.18); --pur-fg:#C3A8FB; --neutral-bg:rgba(255,255,255,.06); --neutral-fg:#8590B5;
}

.rmg-root ::-webkit-scrollbar { width:10px; height:10px; }
.rmg-root ::-webkit-scrollbar-thumb { background:var(--border-strong,#cfd4e4); border-radius:99px; border:2px solid transparent; background-clip:content-box; }

/* interactive surfaces */
.rmg-act { transition:filter .14s, background .14s, border-color .14s, box-shadow .14s; }
.rmg-act:hover { filter:brightness(.98); }
.rmg-act:disabled { opacity:.45; cursor:not-allowed !important; box-shadow:none !important; filter:none; }

/* the print sheet is hidden on screen */
.rmg-print { display:none; }

@keyframes rmg-slide { from { transform:translateY(14px); opacity:.4; } to { transform:translateY(0); opacity:1; } }

/* ---------------------------------------------------------------------------
   RESPONSIVE (screen)
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .rmg-scroll { padding:16px 14px 48px !important; }
    .rmg-toolbar-row { gap:10px !important; }
    .rmg-jobs-grid { grid-template-columns:1fr !important; }
}

/* ---------------------------------------------------------------------------
   PRINT - foreman copy. Dense, high-contrast, single column per project, with
   page-break control, a print header (selected date + generated timestamp),
   and status rendered as TEXT so it survives black & white printing.
   --------------------------------------------------------------------------- */
@media print {
    @page { margin:14mm; }
    html, body { background:#fff !important; }

    /* the Durandal shell chrome (app bar / left nav) should not print - but we
       only control this module's markup; the module root goes static + full so
       the sheet fills the page. */
    .rmg-root {
        position:static !important; inset:auto !important; overflow:visible !important;
        background:#fff !important; color:#000 !important; height:auto !important;
    }

    /* hide everything that is screen-only */
    .rmg-screen, .rmg-noprint { display:none !important; }

    /* show + normalize the print sheet */
    .rmg-print { display:block !important; color:#000; }

    .rmg-pProject { page-break-inside:avoid; break-inside:avoid; }
    .rmg-pJob { page-break-inside:avoid; break-inside:avoid; }
    .rmg-pProject h2 { page-break-after:avoid; }

    .rmg-pTable { width:100%; border-collapse:collapse; margin-bottom:8px; font-size:11px; color:#000; }
    .rmg-pTable td, .rmg-pTable th { color:#000; }
}