@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 - EQUIPMENT - Signal design language
   Verbatim translation of docs/design/export/Equipment.dc.html into the real
   Durandal/Knockout equipment module. Root class .eq-root carries every design
   token as a CSS var; markup uses var(--x, fallback) so it degrades gracefully.
   Reuses the EXISTING equipment backend:
     GET    /v1/project/                 -> project filter options
     GET    /v1/equipment/               -> equipment list (with Projects[])
     DELETE /v1/equipment                -> remove
     project/modalEditEquipment          -> the real Add / Edit form
   The design's tabbed drawer (Details+Ownership+RateLadder / Use History /
   Maintenance / Audit) is now backed by real endpoints (EquipmentBackend_Deploy.sql):
   ownership + rate-ladder + maintenance + derived usage + change-log audit. The
   full bootstrap create form is still used for "Add New Equipment".
   ============================================================================ */

.eq-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; --gold-line:#EED9A8;
    --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;
}

.eq-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; --gold-line:rgba(217,155,18,.32);
    --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;
}

.eq-root *{box-sizing:border-box}
.eq-root ::selection{background:#C2CCFB}
.eq-root .eq-scroll::-webkit-scrollbar{width:10px;height:10px}
.eq-root .eq-scroll::-webkit-scrollbar-thumb{background:var(--border-strong,#cfd4e4);border-radius:99px;border:2px solid transparent;background-clip:content-box}
.eq-root .eq-act{transition:filter .14s,background .14s,border-color .14s,box-shadow .14s,color .14s}
.eq-root .eq-act:hover{filter:brightness(.98)}
.eq-root .eq-row{transition:background .12s}
.eq-root .eq-row:hover{background:var(--surface-2,#FAFBFE)}
.eq-root .eq-in{border:none;background:transparent;outline:none}
.eq-root .eq-in:focus{outline:none}
.eq-root .eq-sel:focus{outline:none;border-color:var(--brand-400,#7B8FF3);box-shadow:0 0 0 3px rgba(94,118,238,.14)}

/* mobile: collapse the desktop grid into stacked cards */
.eq-root .eq-mobile-only{display:none}
.eq-root.eq-mobile .eq-desktop-only{display:none}
.eq-root.eq-mobile .eq-mobile-only{display:block}

/* ============================================================================
   TABBED DRAWER (Details / Use History / Maintenance / Audit) + rate ladder +
   ownership editor. Slides in from the right; hosts the real backend data.
   ============================================================================ */
.eq-root .eq-drawer-scrim{position:fixed;inset:0;z-index:1080;background:rgba(20,25,55,.42);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.eq-root .eq-drawer-scrim.open{opacity:1;pointer-events:auto}
.eq-root .eq-drawer{position:fixed;top:0;right:0;bottom:0;z-index:1081;width:640px;max-width:100vw;background:var(--surface,#fff);border-left:1px solid var(--border,#E5E8F2);box-shadow:var(--e2,-8px 0 28px rgba(20,25,55,.14));display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s var(--ease)}
.eq-root .eq-drawer.open{transform:translateX(0)}
.eq-root .eq-dhead{display:flex;align-items:flex-start;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border,#E5E8F2)}
.eq-root .eq-dtabs{display:flex;gap:4px;padding:8px 16px 0;border-bottom:1px solid var(--border,#E5E8F2);flex-wrap:wrap}
.eq-root .eq-dtab{cursor:pointer;padding:9px 14px;border-radius:9px 9px 0 0;font:700 12.5px 'Plus Jakarta Sans';color:var(--muted,#767C92);border:1px solid transparent;border-bottom:none;background:transparent}
.eq-root .eq-dtab.on{color:var(--brand-700,#3D4FC9);background:var(--surface,#fff);border-color:var(--border,#E5E8F2)}
.eq-root .eq-dbody{flex:1;min-height:0;overflow:auto;padding:20px 22px 40px}
.eq-root .eq-dfoot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--border,#E5E8F2);background:var(--surface-2,#FAFBFE)}
.eq-root .eq-field{margin-bottom:14px}
.eq-root .eq-lbl{display:block;font:600 10px 'Plus Jakarta Sans';letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#767C92);margin-bottom:5px}
.eq-root .eq-inp{width:100%;height:40px;padding:0 12px;border:1px solid var(--border-strong,#D2D7E6);border-radius:9px;background:var(--surface,#fff);color:var(--text,#1A1D2E);font:500 13px 'Plus Jakarta Sans';outline:none}
.eq-root textarea.eq-inp{height:auto;padding:10px 12px}
.eq-root .eq-inp:focus{border-color:var(--brand-400,#7B8FF3);box-shadow:0 0 0 3px rgba(94,118,238,.14)}
.eq-root .eq-seg{display:inline-flex;background:var(--surface-2,#FAFBFE);border:1px solid var(--border,#E5E8F2);border-radius:10px;padding:3px;gap:3px}
.eq-root .eq-seg-btn{cursor:pointer;padding:7px 14px;border-radius:7px;font:700 12px 'Plus Jakarta Sans';color:var(--text-2,#4A4F63);border:none;background:transparent}
.eq-root .eq-seg-btn.on{background:var(--brand-600,#4C63E6);color:#fff}
.eq-root .eq-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.eq-root .eq-btn{cursor:pointer;height:40px;padding:0 16px;border-radius:10px;font:700 12.5px 'Plus Jakarta Sans';border:1px solid var(--border-strong,#D2D7E6);background:var(--surface,#fff);color:var(--text-2,#4A4F63)}
.eq-root .eq-btn.pri{border:none;background:var(--brand-600,#4C63E6);color:#fff}
.eq-root .eq-btn.sm{height:32px;padding:0 12px;font-size:12px}
.eq-root .eq-ladder{width:100%;border-collapse:collapse}
.eq-root .eq-ladder th{font:600 10px 'Plus Jakarta Sans';letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#767C92);text-align:left;padding:6px 8px;border-bottom:1px solid var(--border,#E5E8F2)}
.eq-root .eq-ladder td{padding:6px 8px;border-bottom:1px solid var(--border,#E5E8F2);font-size:12.5px;color:var(--text,#1A1D2E)}
.eq-root .eq-ladder td .eq-inp{height:34px}
.eq-root .eq-tl{border-left:2px solid var(--border,#E5E8F2);margin-left:6px;padding-left:16px}
.eq-root .eq-tl-item{position:relative;padding:8px 0}
.eq-root .eq-tl-item::before{content:'';position:absolute;left:-23px;top:12px;width:9px;height:9px;border-radius:99px;background:var(--brand-500,#5E76EE);border:2px solid var(--surface,#fff)}
.eq-root .eq-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;font:700 10.5px 'Plus Jakarta Sans'}
.eq-root .eq-empty{padding:36px 8px;text-align:center;color:var(--muted,#767C92);font-size:12.5px}
@media (max-width:820px){.eq-root .eq-drawer{width:100vw}.eq-root .eq-grid2{grid-template-columns:1fr}}