/* ============================================================
   iCare V2 — Maintenance module, ported VERBATIM from Legacy's
   panels/maintenance/maintenance.css. Owner's explicit instruction
   (2026-08-29): Maintenance keeps Legacy's own literal visual design
   (colors/spacing/KPI-card structure/icons), NOT V2's shared lg-* or
   ab-* component look used by every other module. Every rule below
   traces to a specific line range in the real maintenance.css —
   nothing invented. Shared across every Maintenance sub-screen
   (Main Board now; Intake/Execution/Delivery/History/Settings/
   Reports later) so the look stays identical across all of them,
   loaded once globally rather than duplicated per Blazor component.

   Variables are scoped under .maint-page (not :root) so they only
   affect Maintenance pages and never leak into/collide with the
   rest of V2's admin shell. ============================================================ */

.maint-page {
    --m-bg-card:      rgba(var(--th-n-900-rgb),0.52);
    --m-bg-input:      rgba(255,255,255,0.05);
    --m-bg-hover:      rgba(255,255,255,0.06);
    --m-border:        rgba(255,255,255,0.08);
    --m-border-focus:  rgba(var(--th-accent-500-rgb),0.7);
    --m-card-border:   rgba(255,255,255,0.07);
    --m-text:          var(--th-n-200);
    --m-text-muted:    var(--th-n-500);
    --m-text-sub:      var(--th-n-400);
    --m-accent:        var(--th-accent-500);
    --m-accent-2:      var(--th-accent2-500);
    --m-accent-glow:   rgba(var(--th-accent-500-rgb),0.20);
    --m-success:       #10b981;
    --m-danger:        #ef4444;
    --m-warn:          #f59e0b;
    --m-info:          #06b6d4;
    --m-wa:            #25d366;
    --m-radius:        14px;
}
[data-theme="light"] .maint-page {
    --m-bg-card:      rgba(255,255,255,0.80);
    --m-bg-input:      rgba(var(--th-n-900-rgb),0.04);
    --m-bg-hover:      rgba(var(--th-accent-500-rgb),0.05);
    --m-border:        rgba(var(--th-n-900-rgb),0.10);
    --m-border-focus:  rgba(var(--th-accent-500-rgb),0.50);
    --m-card-border:   rgba(var(--th-n-900-rgb),0.08);
    --m-text:          var(--th-n-800);
    --m-text-muted:    #54627a;
    --m-text-sub:      var(--th-n-600);
    --m-accent-glow:   rgba(var(--th-accent-500-rgb),0.15);
}

/* Legacy's real body background (maintenance.css L86: "background: var(--th-d-1)") — V2's own global
   body background (--bg: var(--th-d-0), app.css L64) is darker/near-black, so Legacy's semi-transparent
   card/table/input overlays (rgba(var(--th-n-900-rgb),.52) etc.) barely registered against it — everything
   looked flat and "squished together" (owner's live-screenshot feedback, 2026-08-29). Restoring
   Legacy's own base color here brings back the depth those overlays were designed against. */
/* Cairo is now the app.css global body font (owner's 2026-08-29 instruction — applies to the whole
   V2 system, not just Maintenance), so no local override is needed here anymore. */
.maint-page {
    color: var(--m-text);
    background: var(--th-d-1);
    margin: -24px; padding: 24px;
    width: calc(100% + 48px); display: flex; flex-direction: column; gap: 0;
    min-height: calc(100% + 48px);
}
[data-theme="light"] .maint-page { background: var(--th-l-0); }

/* ══ PANEL HEADER (maintenance.css L95-155) ══ */
.maint-page .panel-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--m-border);
    flex-shrink: 0; position: relative; overflow: hidden;
}
.maint-page .panel-header::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg,rgba(var(--th-accent-500-rgb),.09) 0%,rgba(var(--th-accent2-500-rgb),.05) 50%,transparent 100%);
    pointer-events: none;
}
.maint-page .panel-header::after {
    content: ''; position: absolute; bottom: 0; right: 0; left: 0; height: 1px;
    background: linear-gradient(90deg,var(--m-accent),var(--m-accent-2),transparent);
    opacity: .4;
}
/* Responsive (2026-09-12) — Legacy's own maint-reports.html has ".panel-header { flex-wrap: wrap }"
   at ≤480px (its own copy of this shared header CSS, comment: "Panel header stack on tiny screens").
   V2's ONE shared .panel-header (maintenance-legacy.css, reused by Board/History/Settings/Reports
   alike) never had it at all, which — combined with .panel-header-left's own flex-shrink:0 and the
   parent's overflow:hidden (there to clip the decorative gradient pseudo-elements below, not
   content) — meant a wide filter bar (Reports' 2 date inputs + 3 buttons is the worst case) never
   wrapped, it silently CLIPPED off past the header's own edge instead: buttons became genuinely
   unreachable with zero page-level horizontal scroll to reveal them (found live via an explicit
   off-screen-element sweep, not by the page-overflow check alone — that check alone cannot see this
   class of bug, since clipped content produces no scrollbar). 768px chosen (wider than Legacy's own
   480px) so it's actually verified clean at every one of this hardening pass's own tested widths
   (400/700/768), not just Legacy's specific number — same "wider deliberate breakpoint" reasoning
   Legacy itself already uses elsewhere (the Receive Modal's own 768px, not the rest's 640px). */
@media (max-width: 768px) {
    .maint-page .panel-header { flex-wrap: wrap; }
}
.maint-page .panel-header-right { display: flex; align-items: center; gap: 13px; position: relative; }
.maint-page .panel-icon {
    width: 44px; height: 44px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2));
    box-shadow: 0 4px 18px rgba(var(--th-accent-500-rgb),.45), 0 0 0 1px rgba(255,255,255,.14) inset;
    position: relative;
}
.maint-page .panel-icon svg { width: 20px; height: 20px; color: #fff; }
.maint-page .panel-title { font-size: 17px; font-weight: 900; color: var(--m-text); line-height: 1.2; letter-spacing: -.02em; }
.maint-page .panel-subtitle { font-size: 11px; color: var(--m-text-muted); font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.maint-page .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m-accent); box-shadow: 0 0 6px var(--m-accent); flex-shrink: 0; animation: m-pulseDot 2.2s ease-in-out infinite; }
@keyframes m-pulseDot { 0%,100%{box-shadow:0 0 4px var(--m-accent)} 50%{box-shadow:0 0 10px var(--m-accent)} }
.maint-page .panel-header-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.maint-page .header-date-badge {
    display: flex; align-items: center; gap: 6px;
    background: var(--m-bg-input); border: 1px solid var(--m-card-border);
    border-radius: 10px; padding: 6px 12px;
    font-size: 11px; font-weight: 700; color: var(--m-text-sub); white-space: nowrap;
}
.maint-page .header-date-badge svg { width: 12px; height: 12px; color: var(--m-text-muted); flex-shrink: 0; }
.maint-page .header-icon-btn {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--m-bg-input); border: 1px solid var(--m-card-border);
    color: var(--m-text-muted); cursor: pointer; transition: all 170ms; flex-shrink: 0;
}
.maint-page .header-icon-btn svg { width: 14px; height: 14px; }
.maint-page .header-icon-btn:hover { background: var(--m-bg-hover); color: var(--m-accent); border-color: var(--m-border-focus); }
.maint-page .header-icon-btn.spinning svg { animation: m-spin 0.8s linear infinite; }
@keyframes m-spin { to{transform:rotate(360deg)} }

/* ══ Connectivity badge (maintenance.css L174-189). Blazor Server has no meaningful client-offline
   mode of its own (a dropped SignalR circuit shows Blazor's own reconnect overlay over the whole
   page instead) — shown statically as "متصل" in Legacy's exact position/shape rather than wiring a
   fake dynamic online/offline state, per the owner's "transfer the shape even where the behavior
   isn't applicable" instruction. ══ */
.maint-page .connectivity-badge {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: 9px;
    background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2);
    flex-shrink: 0;
}
.maint-page .connectivity-badge .status-dot { background: #3b82f6; box-shadow: none; animation: m-pulse 2s infinite; }
.maint-page .connectivity-badge .connectivity-text { font-size: 11px; font-weight: 800; color: #3b82f6; }
@keyframes m-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.7; transform:scale(1.1); } }

/* ══ New Ticket / Reserved Parts buttons (L191-205, L5480-5511) ══ */
.maint-page .new-ticket-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 0 18px; height: 38px;
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2));
    border: none; border-radius: 11px;
    color: #fff; font-family: 'Cairo', sans-serif; font-size: 13.5px; font-weight: 800;
    cursor: pointer; transition: all 170ms;
    box-shadow: 0 3px 14px rgba(var(--th-accent-500-rgb),0.4);
    white-space: nowrap; flex-shrink: 0;
}
.maint-page .new-ticket-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--th-accent-500-rgb),0.5); }
.maint-page .new-ticket-btn:active { transform: scale(.96); }
.maint-page .new-ticket-btn svg { width: 16px; height: 16px; }

.maint-page .parts-reserved-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 0 16px; height: 38px;
    background: rgba(var(--th-accent2-500-rgb),.12);
    border: 1px solid rgba(var(--th-accent2-500-rgb),.35);
    border-radius: 11px;
    color: var(--th-accent2-200); font-family: 'Cairo', sans-serif; font-size: 13.5px; font-weight: 800;
    cursor: pointer; transition: all 170ms; white-space: nowrap; flex-shrink: 0;
}
.maint-page .parts-reserved-btn:hover { background: rgba(var(--th-accent2-500-rgb),.20); transform: translateY(-1px); }
.maint-page .parts-reserved-btn:active { transform: scale(.96); }
.maint-page .parts-reserved-btn svg { width: 16px; height: 16px; }
.maint-page .parts-reserved-btn .prb-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--th-accent2-500); color: #fff; border-radius: 9px; font-size: 10.5px; font-weight: 800;
}
[data-theme="light"] .maint-page .parts-reserved-btn { background: rgba(var(--th-accent2-500-rgb),.10); color: #7e22ce; }

/* ══ KPI STRIP (L207-273) ══ */
.maint-page .kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 12px 0 10px; flex-shrink: 0; }
@media (max-width: 1100px) { .maint-page .kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .maint-page .kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 7px; } }

.maint-page .kpi-card {
    background: var(--m-bg-card); border: 1px solid var(--m-card-border);
    border-radius: var(--m-radius); padding: 8px 10px;
    display: flex; flex-direction: column; gap: 3px;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; overflow: hidden;
    cursor: pointer; user-select: none;
    transition: border-color 170ms, transform 170ms, box-shadow 170ms, background 170ms;
}
.maint-page .kpi-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.maint-page .kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:99px 99px 0 0; }
.maint-page .kpi-card.c-amber::before  { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.maint-page .kpi-card.c-blue::before   { background: linear-gradient(90deg,#3b82f6,#60a5fa); }
.maint-page .kpi-card.c-purple::before { background: linear-gradient(90deg,var(--th-accent2-500),var(--th-accent2-400)); }
.maint-page .kpi-card.c-green::before  { background: linear-gradient(90deg,#10b981,#34d399); }
.maint-page .kpi-card.c-gray::before   { background: linear-gradient(90deg,var(--th-n-500),var(--th-n-400)); }
.maint-page .kpi-card.c-red::before    { background: linear-gradient(90deg,#ef4444,#f87171); }

.maint-page .kpi-card.active { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }
.maint-page .kpi-card.c-amber.active  { color: #fbbf24; background: rgba(245,158,11,0.08); }
.maint-page .kpi-card.c-blue.active   { color: #60a5fa; background: rgba(59,130,246,0.08); }
.maint-page .kpi-card.c-purple.active { color: var(--th-accent2-200); background: rgba(var(--th-accent2-500-rgb),0.08); }
.maint-page .kpi-card.c-green.active  { color: #34d399; background: rgba(16,185,129,0.08); }
.maint-page .kpi-card.c-gray.active   { color: var(--th-n-400); background: rgba(var(--th-n-500-rgb),0.08); }
.maint-page .kpi-card.c-red.active    { color: #f87171; background: rgba(239,68,68,0.08); }

.maint-page .kpi-header { display: flex; align-items: center; justify-content: space-between; }
.maint-page .kpi-label  { font-size: 10px; font-weight: 700; color: var(--m-text-muted); letter-spacing: .03em; }
.maint-page .kpi-icon   { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.maint-page .kpi-icon svg { width: 11px; height: 11px; }
.maint-page .c-amber  .kpi-icon { background: rgba(245,158,11,0.12);  color: #fbbf24; }
.maint-page .c-blue   .kpi-icon { background: rgba(59,130,246,0.12);  color: #60a5fa; }
.maint-page .c-purple .kpi-icon { background: rgba(var(--th-accent2-500-rgb),0.12);  color: var(--th-accent2-200); }
.maint-page .c-green  .kpi-icon { background: rgba(16,185,129,0.12);  color: #34d399; }
.maint-page .c-gray   .kpi-icon { background: rgba(var(--th-n-500-rgb),0.12); color: var(--th-n-400); }
.maint-page .c-red    .kpi-icon { background: rgba(239,68,68,0.12);   color: #f87171; }
[data-theme="light"] .maint-page .c-amber  .kpi-icon { background: rgba(245,158,11,0.10); }
[data-theme="light"] .maint-page .c-blue   .kpi-icon { background: rgba(59,130,246,0.10); }
[data-theme="light"] .maint-page .c-purple .kpi-icon { background: rgba(var(--th-accent2-500-rgb),0.10); }
[data-theme="light"] .maint-page .c-green  .kpi-icon { background: rgba(16,185,129,0.10); }
[data-theme="light"] .maint-page .c-gray   .kpi-icon { background: rgba(var(--th-n-500-rgb),0.10); }
[data-theme="light"] .maint-page .c-red    .kpi-icon { background: rgba(239,68,68,0.10); }

.maint-page .kpi-value { font-size: 18px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.maint-page .c-amber  .kpi-value { color: #fbbf24; }
.maint-page .c-blue   .kpi-value { color: #60a5fa; }
.maint-page .c-purple .kpi-value { color: var(--th-accent2-200); }
.maint-page .c-green  .kpi-value { color: #34d399; }
.maint-page .c-gray   .kpi-value { color: var(--th-n-400); }
.maint-page .c-red    .kpi-value { color: #f87171; }
.maint-page .kpi-sub { font-size: 9.5px; color: var(--m-text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══ FILTER BAR (L301-366) ══ */
.maint-page .filter-bar { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--m-border); flex-shrink: 0; flex-wrap: wrap; }
.maint-page .sl-search-wrap {
    width: 230px; flex-shrink: 0; display: flex; align-items: center; gap: 7px;
    background: var(--m-bg-input); border: 1px solid var(--m-card-border);
    border-radius: 11px; padding: 0 10px; height: 36px;
    transition: border-color 170ms, box-shadow 170ms, width 280ms;
}
.maint-page .sl-search-wrap:focus-within { border-color: var(--m-border-focus); box-shadow: 0 0 0 3px var(--m-accent-glow); width: 270px; }
.maint-page .sl-search-wrap svg { width: 13px; height: 13px; color: var(--m-text-muted); flex-shrink: 0; }
.maint-page .sl-search-input { flex: 1; background: none; border: none; outline: none; color: var(--m-text); font-family: 'Cairo', sans-serif; font-size: 12.5px; min-width: 0; direction: rtl; }
.maint-page .sl-search-input::placeholder { color: var(--m-text-muted); }
.maint-page .filter-divider { width: 1px; height: 24px; background: var(--m-border); flex-shrink: 0; }
.maint-page .filter-spacer { flex: 1; }
.maint-page .filter-group { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.maint-page .filter-label { font-size: 11px; font-weight: 700; color: var(--m-text-muted); white-space: nowrap; }
.maint-page .filter-sel {
    background: var(--m-bg-input); border: 1px solid var(--m-card-border);
    border-radius: 9px; padding: 0 8px 0 28px; height: 34px;
    color: var(--m-text); font-family: 'Cairo', sans-serif; font-size: 12px;
    cursor: pointer; outline: none; transition: border-color 170ms, box-shadow 170ms;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 8px center; background-size: 16px;
}
.maint-page .filter-sel option { background: var(--th-n-900); color: var(--m-text); }
[data-theme="light"] .maint-page .filter-sel option { background: #fff; color: var(--th-n-800); }
.maint-page .filter-sel:focus { border-color: var(--m-border-focus); box-shadow: 0 0 0 3px var(--m-accent-glow); }
.maint-page .date-input {
    background: var(--m-bg-input); border: 1px solid var(--m-card-border);
    border-radius: 9px; padding: 0 8px; height: 34px;
    color: var(--m-text); font-family: 'Cairo', sans-serif; font-size: 12px;
    cursor: pointer; outline: none; transition: border-color 170ms, box-shadow 170ms;
    flex-shrink: 0; color-scheme: dark;
}
[data-theme="light"] .maint-page .date-input { color-scheme: light; }
.maint-page .date-input:focus { border-color: var(--m-border-focus); box-shadow: 0 0 0 3px var(--m-accent-glow); }
.maint-page .date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
.maint-page .date-sep { color: var(--m-text-muted); font-size: 12px; flex-shrink: 0; }
.maint-page .clear-filter-btn {
    display: flex; align-items: center; gap: 5px; padding: 0 10px; height: 34px;
    background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
    border-radius: 9px; cursor: pointer;
    font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700; color: var(--m-danger);
    transition: all 170ms;
}
.maint-page .clear-filter-btn:hover { background: rgba(239,68,68,.22); }
.maint-page .clear-filter-btn svg { width: 13px; height: 13px; }

/* ══ TABS BAR (L369-389) ══ */
.maint-page .sl-tabs-bar { display: flex; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--m-border); flex-shrink: 0; flex-wrap: wrap; }
.maint-page .sl-tab {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px;
    background: none; border: 1px solid transparent; border-radius: 9px;
    cursor: pointer; font-family: 'Cairo', sans-serif;
    font-size: 12.5px; font-weight: 700; color: var(--m-text-muted);
    transition: all 170ms;
}
.maint-page .sl-tab svg { width: 14px; height: 14px; }
.maint-page .sl-tab:hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .sl-tab.active { background: rgba(var(--th-accent-500-rgb),.10); border-color: rgba(var(--th-accent-500-rgb),.3); color: var(--m-accent); }
.maint-page .tab-count {
    min-width: 20px; height: 18px; border-radius: 99px; padding: 0 6px;
    background: rgba(var(--th-accent-500-rgb),.18); color: var(--m-accent);
    font-size: 10.5px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.maint-page .sl-tab.active .tab-count { background: var(--m-accent); color: #fff; }
.maint-page .tab-spacer { flex: 1; }

/* ══ TABLE (L391-421) ══ */
.maint-page .sl-table-wrap { flex: 1; overflow-y: auto; overflow-x: auto; min-height: 0; }
.maint-page .sl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; direction: rtl; min-width: 900px; }
.maint-page .sl-table thead { position: sticky; top: 0; z-index: 20; }
.maint-page .sl-table th {
    padding: 8px 12px; text-align: right; font-weight: 800; font-size: 11px;
    color: var(--m-text-muted); letter-spacing: .04em; white-space: nowrap;
    background: var(--th-d-1); border-bottom: 1px solid var(--m-border);
}
[data-theme="light"] .maint-page .sl-table th { background: var(--th-l-0); }
.maint-page .sl-table td { padding: 9px 12px; border-bottom: 1px solid var(--m-border); vertical-align: middle; }
.maint-page .sl-table tbody tr { transition: background 170ms; cursor: pointer; }
.maint-page .sl-table tbody tr:hover { background: var(--m-bg-hover); }
.maint-page .sl-table tbody tr:last-child td { border-bottom: none; }
.maint-page .sl-table th[data-sort] { cursor: pointer; user-select: none; }
.maint-page .sl-table th[data-sort]:hover { color: var(--m-text); }
.maint-page .sl-table th.sort-active { color: var(--m-accent); }

.maint-page .cell-id { display: flex; align-items: center; gap: 5px; font-weight: 900; color: var(--m-accent); font-size: 11px; font-family: 'Courier New', monospace; }
.maint-page .cell-date { font-weight: 700; color: var(--m-text); white-space: nowrap; }
.maint-page .cell-name { font-weight: 800; color: var(--m-text); font-size: 13px; }
.maint-page .cell-phone { display: block; font-size: 10.5px; color: var(--m-text-muted); margin-top: 2px; direction: ltr; text-align: right; }
.maint-page .cell-model { display: block; font-size: 10.5px; color: var(--m-text-muted); margin-top: 2px; }
.maint-page .cell-problem { color: var(--m-text-sub); font-size: 12px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maint-page .cell-amount { font-weight: 900; color: var(--th-accent-400); font-size: 13px; }
.maint-page .cell-paid { font-weight: 800; color: var(--m-success); font-size: 13px; }

/* ══ EMPTY STATE (L438-444) ══ */
.maint-page .sl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 60px 20px; text-align: center; }
.maint-page .sl-empty svg { width: 44px; height: 44px; color: var(--m-text-muted); opacity: .5; }
.maint-page .sl-empty-title { font-size: 14px; font-weight: 800; color: var(--m-text-muted); }
.maint-page .sl-empty-sub { font-size: 12px; color: var(--m-text-muted); opacity: .7; }

/* ══ FOOTER + PAGINATION (L446-453, L687-715) ══ */
.maint-page .sl-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--m-border); flex-shrink: 0; }
.maint-page .sl-count { font-size: 11.5px; color: var(--m-text-muted); font-weight: 600; }
.maint-page .sl-count strong { color: var(--m-text); font-weight: 900; }
.maint-page .pagination { display: flex; align-items: center; gap: 4px; }
/* 2026-10-17 — the maintenance log wraps its buttons in .page-btns (Legacy L687): one row, never stacked */
.maint-page .page-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.maint-page .page-btn {
    min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px;
    border: 1px solid var(--m-border); background: transparent; color: var(--m-text-sub);
    font-size: 11px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cairo', sans-serif;
    transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.maint-page .page-btn:hover:not(:disabled) { background: var(--m-bg-hover); color: var(--m-text); transform: translateY(-1px); }
.maint-page .page-btn.active { background: rgba(var(--th-accent-500-rgb),.15); border-color: rgba(var(--th-accent-500-rgb),.4); color: var(--th-accent-400); box-shadow: 0 1px 4px rgba(var(--th-accent-500-rgb),.15); }
.maint-page .page-btn:disabled { opacity: .3; pointer-events: none; }
.maint-page .page-btn svg { width: 11px; height: 11px; }

/* ══════════════════════════════════════════════════════════════
   Responsive (2026-09-12) — ported verbatim from Legacy's OWN real, live mobile layout
   (panels/maintenance/maintenance.css's ≤640px block + its "Repair Card Component" section) —
   the owner's explicit direction was to follow Legacy's actual live mobile behavior, not this
   project's separate .lg-* responsive convention used by every other already-closed module.

   Unconditional hide MUST come before the @media override below (same order Legacy's own source
   uses) — two equal-specificity rules, the later one in source order always wins regardless of the
   @media condition, so putting this after the media block would silently defeat it at every width.
   ══════════════════════════════════════════════════════════════ */
.maint-page .repair-cards-list { display: none; }
@media (max-width: 640px) {
    .maint-page .sl-tabs-bar { padding: 4px 0; gap: 2px; }
    .maint-page .sl-tab { padding: 5px 8px; font-size: 11.5px; border-radius: 7px; }
    .maint-page .sl-tab svg { display: none; }
    .maint-page .tab-count { min-width: 17px; height: 16px; font-size: 9.5px; }

    /* Table → Cards */
    .maint-page .sl-table-wrap { padding: 0; background: transparent; }
    /* 2026-10-23 — only a page that HAS its own phone cards (the board's .repair-cards-list) hides its table; the maintenance log
       (/maintenance/log) has none, so this rule used to hide its whole list on phones (owner: «سجل الصيانات مش مظبوط بنظام عرض
       الموبايل»). Its table now becomes cards through the system-wide table-cards layout, as on tablets. */
    .maint-page:has(.repair-cards-list) .sl-table { display: none; }
    .maint-page .repair-cards-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }

    .maint-page .sl-footer { padding: 6px 0; }
    .maint-page .sl-count { font-size: 10.5px; }
    .maint-page .page-btn { min-width: 26px; height: 26px; font-size: 11px; }

    /* Detail/Action Modal → bottom sheet */
    .maint-page .action-modal-overlay { align-items: flex-end; padding: 0; }
    .maint-page .action-modal {
        width: 100% !important; height: auto !important; max-height: calc(90 * var(--vh)) !important;
        border-radius: 20px 20px 0 0;
    }
    .maint-page .action-modal.maximized { height: calc(100 * var(--vh)) !important; max-height: calc(100 * var(--vh)) !important; border-radius: 0 !important; }
    .maint-page .action-info-strip { grid-template-columns: repeat(2, 1fr); }
    .maint-page .action-btns-grid { grid-template-columns: repeat(2, 1fr); }
    .maint-page .am-wa-btns, .maint-page .wa-btns-row { grid-template-columns: repeat(2, 1fr); }
}

/* ══ Repair Card Component (Legacy: maintenance.css "Repair Card Component") ══
   Hidden on desktop, shown ≤640px — the unconditional hide + @media override live together above. */
.maint-page .repair-card {
    background: var(--m-bg-card); border: 1px solid var(--m-card-border); border-radius: 14px;
    padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 10px;
    transition: border-color 170ms, background 170ms, transform 170ms;
    position: relative; overflow: hidden;
}
.maint-page .repair-card:active { background: var(--m-bg-hover); transform: scale(.985); }
.maint-page .repair-card::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; border-radius: 0 14px 14px 0;
    background: var(--m-accent);
}
.maint-page .repair-card[data-status="check"]::before    { background: #fbbf24; }
.maint-page .repair-card[data-status="progress"]::before { background: #60a5fa; }
.maint-page .repair-card[data-status="parts"]::before    { background: var(--th-violet-400); }
.maint-page .repair-card[data-status="ready"]::before    { background: #34d399; }
.maint-page .repair-card[data-status="done"]::before     { background: var(--th-n-400); }
.maint-page .repair-card[data-status="rejected"]::before { background: #f87171; }

.maint-page .rc-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.maint-page .rc-wo { font-size: 12px; font-weight: 900; color: var(--m-accent); font-family: 'Courier New', monospace; letter-spacing: .02em; display: flex; align-items: center; gap: 5px; }
.maint-page .rc-wo-icon { width: 11px; height: 11px; }

.maint-page .rc-row2 { display: flex; align-items: flex-start; gap: 8px; }
.maint-page .rc-avatar {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--m-accent), var(--th-accent-400));
    display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: #fff;
}
.maint-page .rc-info { flex: 1; min-width: 0; }
.maint-page .rc-customer { font-size: 13px; font-weight: 800; color: var(--m-text); }
.maint-page .rc-phone { font-size: 10.5px; color: var(--m-text-muted); margin-top: 1px; direction: ltr; text-align: right; }
.maint-page .rc-device { font-size: 11px; color: var(--m-text-sub); margin-top: 3px; }

.maint-page .rc-problem {
    font-size: 11.5px; color: var(--m-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 6px 10px; background: var(--m-bg-input); border-radius: 8px; border: 1px solid var(--m-border);
}

.maint-page .rc-row4 { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.maint-page .rc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.maint-page .rc-cost { font-size: 12px; font-weight: 900; color: var(--th-accent-400); }
.maint-page .rc-paid { font-size: 11px; color: var(--m-success, #34d399); font-weight: 700; }
.maint-page .rc-date { font-size: 10.5px; color: var(--m-text-muted); font-weight: 600; }
.maint-page .rc-row4 .status-combo-btn { height: 28px; font-size: 11.5px; }

/* ══ Status badges (L631-654, L3065-3066) ══ */
.maint-page .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 16px; font-size: 10px; font-weight: 800; white-space: nowrap; border: 1px solid; }
.maint-page .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.maint-page .b-check   { background: rgba(251,191,36,.12); color:#fbbf24; border-color:rgba(251,191,36,.25); }
.maint-page .b-check::before { background:#fbbf24; }
.maint-page .b-prog    { background: rgba(96,165,250,.12);  color:#60a5fa; border-color:rgba(96,165,250,.25); }
.maint-page .b-prog::before  { background:#60a5fa; }
.maint-page .b-parts   { background: rgba(var(--th-accent2-500-rgb),.12);  color:var(--th-accent2-400); border-color:rgba(var(--th-accent2-500-rgb),.25); }
.maint-page .b-parts::before { background:var(--th-accent2-400); }
.maint-page .b-ready   { background: rgba(16,185,129,.12);  color:#34d399; border-color:rgba(16,185,129,.25); }
.maint-page .b-ready::before { background:#34d399; }
.maint-page .b-done    { background: rgba(var(--th-n-500-rgb),.12); color:var(--th-n-400); border-color:rgba(var(--th-n-500-rgb),.25); }
.maint-page .b-done::before  { background:var(--th-n-400); }
.maint-page .b-rejected { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.25); }
.maint-page .b-rejected::before { background:#f87171; }
[data-theme="light"] .maint-page .b-rejected { background: rgba(239,68,68,.08); color: #dc2626; border-color: rgba(239,68,68,.3); }

/* ══ Priority badge (Board — عادية/عالية/عاجلة) ══ */
/* Restored 2026-09-11: an earlier V2 build showed priority as a text+emoji badge; it was then swapped
   for a bare colored dot (matching Legacy's own always-visible dot, maintenance.js:1732,1776-1779)
   because the badge rendered nothing at all for Normal priority (the majority of rows) — unlike every
   other status indicator, which always shows something. Rebuilt as a badge again, on the same
   always-visible-pill formula as the status badges above (.badge/.b-*) and the sibling pattern already
   proven in PurchaseRequestSidePanel.razor's PriorityBadge — every tier, Normal included, gets its own
   visible emoji+label, so the old vanishing bug can't recur. */
.maint-page .prio-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 14px; font-size: 10px; font-weight: 800; white-space: nowrap; border: 1px solid; }
.maint-page .prio-badge.prio-h { background: rgba(248,113,113,.12); color: #f87171; border-color: rgba(248,113,113,.3); }
.maint-page .prio-badge.prio-m { background: rgba(251,191,36,.12); color: #fbbf24; border-color: rgba(251,191,36,.3); }
.maint-page .prio-badge.prio-l { background: rgba(52,211,153,.12); color: #34d399; border-color: rgba(52,211,153,.3); }
[data-theme="light"] .maint-page .prio-badge.prio-h { background: rgba(239,68,68,.08); color: #dc2626; border-color: rgba(239,68,68,.3); }

/* ══ Shared modal chrome reused across every Maintenance sub-modal (Action/Receive/Execute/Delivery/Reject-Return) ══ */
.maint-page .m-modal-overlay {
    position: fixed; inset: 0; z-index: 9500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.72); backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.maint-page .m-modal-dialog {
    background: var(--m-bg-card); width: min(640px, calc(92 * var(--vw))); max-height: calc(88 * var(--vh));
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 20px; border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 0 0 1px rgba(var(--th-accent-500-rgb),0.12), 0 32px 80px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
}
[data-theme="light"] .maint-page .m-modal-dialog { background: rgba(255,255,255,0.98); border-color: #e5e7eb; }
.maint-page .m-modal-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--m-border); flex-shrink: 0; }
.maint-page .m-modal-title { font-size: 15px; font-weight: 900; color: var(--m-text); }
.maint-page .m-modal-close { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #f87171; cursor: pointer; }
.maint-page .m-modal-close svg { width: 14px; height: 14px; }
.maint-page .m-modal-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.maint-page .m-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--m-border); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   RECEIVE MODAL — ported verbatim from maintenance.css's own
   real "RECEIVE MODAL OVERLAY" section (L717-1470 approx).
   ══════════════════════════════════════════════════════════ */
.maint-page .modal-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
}
.maint-page .recv-modal {
    background: rgb(13,19,33);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    width: calc(85 * var(--vw)); height: calc(92 * var(--vh));
    display: flex; flex-direction: column;
    box-shadow: 0 4px 6px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.22), 0 0 0 1px rgba(var(--th-n-400-rgb),.06);
    overflow: hidden;
}
[data-theme="light"] .maint-page .recv-modal {
    background: rgba(255,255,255,0.98); border-color: #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 10px 30px rgba(0,0,0,0.08);
}
.maint-page .recv-header {
    padding: 16px 22px 13px; border-bottom: 1px solid var(--m-border);
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.maint-page .recv-header-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.2);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #34d399;
}
.maint-page .recv-header-icon svg { width: 17px; height: 17px; }
.maint-page .recv-header-title { font-size: 15px; font-weight: 800; color: var(--m-text); flex: 1; }
.maint-page .recv-header-sub { font-size: 11px; color: var(--m-text-muted); font-weight: 600; margin-top: 1px; }
.maint-page .recv-close {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--m-border); background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--m-text-muted); transition: all .14s; flex-shrink: 0;
}
.maint-page .recv-close:hover { background: rgba(239,68,68,.08); color: #f87171; border-color: rgba(239,68,68,.2); }
.maint-page .recv-close svg { width: 14px; height: 14px; }

.maint-page .type-toggle { display: flex; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--m-border); flex-shrink: 0; }
.maint-page .type-btn {
    flex: 1; padding: 10px 14px; border-radius: 11px; border: 1.5px solid var(--m-border);
    background: var(--m-bg-input); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 13px; font-weight: 800; color: var(--m-text-muted); transition: all .18s;
}
.maint-page .type-btn svg { width: 17px; height: 17px; }
.maint-page .type-btn:hover { border-color: rgba(var(--th-accent-500-rgb),.4); color: var(--m-text); background: rgba(var(--th-accent-500-rgb),.05); }
.maint-page .type-btn.selected { border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.07); color: #34d399; }

.maint-page .recv-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }

.maint-page .sec-label {
    font-size: 10.5px; font-weight: 800; color: var(--m-text-muted); letter-spacing: .12em;
    text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.maint-page .sec-label::after { content: ''; flex: 1; height: 1px; background: var(--m-border); }

.maint-page .form-row { display: grid; gap: 12px; }
.maint-page .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.maint-page .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.maint-page .form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 860px) {
    .maint-page .form-row.cols-4 { grid-template-columns: 1fr 1fr; }
    .maint-page .form-row.cols-3 { grid-template-columns: 1fr 1fr; }
}

.maint-page .field { display: flex; flex-direction: column; gap: 5px; }
.maint-page .field label { font-size: 11.5px; font-weight: 700; color: var(--m-text-sub); letter-spacing: .02em; }
.maint-page .field label .req { color: #ef4444; margin-right: 2px; }
.maint-page .field label .opt { font-size: 10px; color: var(--m-text-muted); font-weight: 600; }

.maint-page .finput, .maint-page .fselect, .maint-page .ftextarea {
    background: var(--m-bg-input); border: 1px solid var(--m-border);
    border-radius: 10px; padding: 9px 12px;
    color: var(--m-text); font-size: 13px; font-weight: 600; outline: none;
    transition: border-color .18s, box-shadow .18s; width: 100%; direction: rtl;
}
[data-theme="light"] .maint-page .finput, [data-theme="light"] .maint-page .fselect, [data-theme="light"] .maint-page .ftextarea {
    background: #ffffff; border-color: #e5e7eb;
}
.maint-page .finput:focus, .maint-page .fselect:focus, .maint-page .ftextarea:focus {
    border-color: var(--m-border-focus); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.10);
}
.maint-page .fselect { appearance: none; cursor: pointer; }
.maint-page .fselect option { background: var(--th-n-900); color: var(--th-n-200); }
.maint-page .ftextarea { resize: vertical; min-height: 72px; line-height: 1.6; }

.maint-page .cust-wrap { position: relative; }
.maint-page .cust-prefix {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    font-size: 12px; font-weight: 700; color: var(--m-text-muted); pointer-events: none;
    display: flex; align-items: center; gap: 5px;
}
.maint-page .cust-prefix svg { width: 14px; height: 14px; }
.maint-page .cust-input { padding-right: 38px !important; }
.maint-page .cust-status { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.maint-page .cust-status.new-cust { color: #fbbf24; }
.maint-page .cust-status.exist-cust { color: #34d399; }
.maint-page .cust-name-wrap { position: relative; }

.maint-page .regmode-wrap { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--m-border); background: rgba(255,255,255,.015); }
[data-theme="light"] .maint-page .regmode-wrap { background: rgba(59,130,246,.03); }
.maint-page .regmode-label { font-size: 11px; font-weight: 700; color: var(--m-text-muted); white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; }
.maint-page .regmode-pills { display: flex; gap: 6px; }
.maint-page .regmode-pill {
    display: flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 20px;
    border: 1.5px solid var(--m-border); background: var(--m-bg-input); cursor: pointer;
    font-size: 12px; font-weight: 700; color: var(--m-text-sub); transition: all .15s; user-select: none; line-height: 1;
}
.maint-page .regmode-pill.active { background: rgba(var(--th-accent-500-rgb),.14); border-color: var(--m-accent); color: var(--m-accent); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.08); }
.maint-page .regmode-pill:hover:not(.active) { border-color: rgba(var(--th-accent-500-rgb),.35); background: rgba(var(--th-accent-500-rgb),.06); color: var(--m-text); }
.maint-page .regmode-icon { font-size: 13px; line-height: 1; }

.maint-page .problem-label-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--m-text-sub); gap: 8px; }
.maint-page .fault-type-sel {
    background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 8px;
    padding: 3px 10px; font-size: 11.5px; font-weight: 700; color: var(--m-text-sub);
    cursor: pointer; outline: none; direction: rtl; max-width: 150px;
}
.maint-page .fault-type-sel:focus { border-color: var(--m-border-focus); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.10); }

.maint-page .deposit-combo { margin-top: 8px; border: 1px solid var(--m-border); border-radius: 10px; overflow: hidden; background: var(--m-bg-card); }
.maint-page .deposit-combo-tabs { display: flex; border-bottom: 1px solid var(--m-border); }
.maint-page .dct-btn { flex: 1; padding: 7px 10px; font-size: 12px; font-weight: 700; background: none; border: none; color: var(--m-text-muted); cursor: pointer; transition: background .15s, color .15s; }
.maint-page .dct-btn + .dct-btn { border-right: 1px solid var(--m-border); }
.maint-page .dct-btn.active { background: var(--m-accent); color: #fff; }
.maint-page .dct-btn:hover:not(.active) { background: rgba(var(--th-accent-500-rgb),.1); color: var(--m-text); }
.maint-page .deposit-combo-list { max-height: 180px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.maint-page .deposit-combo-item { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 7px 9px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: background .13s, border-color .13s; font-size: 12.5px; }
.maint-page .deposit-combo-item:hover { background: rgba(var(--th-accent-500-rgb),.08); }
.maint-page .deposit-combo-item.selected { background: rgba(var(--th-accent-500-rgb),.12); border-color: rgba(var(--th-accent-500-rgb),.35); }

.maint-page .recv-grid-2col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: start; }
.maint-page .recv-col-primary, .maint-page .recv-col-secondary { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .maint-page .recv-grid-2col { grid-template-columns: 1fr; } }
.maint-page .recv-lock-wide { width: 100%; justify-content: center; }

.maint-page .recv-accordions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.maint-page .recv-acc { border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-bg-input); overflow: hidden; }
.maint-page .recv-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; }
.maint-page .recv-acc-head-left { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--m-text); }
.maint-page .recv-acc-head-left svg { width: 14px; height: 14px; color: var(--m-text-muted); flex-shrink: 0; }
.maint-page .recv-acc-head-right { display: flex; align-items: center; gap: 8px; }
.maint-page .recv-acc-badge { font-size: 10px; font-weight: 800; color: var(--m-text-muted); background: var(--m-bg-card); border: 1px solid var(--m-border); border-radius: 99px; padding: 2px 9px; }
.maint-page .recv-acc-chevron { width: 14px; height: 14px; color: var(--m-text-muted); transition: transform .18s; flex-shrink: 0; }
.maint-page .recv-acc.open .recv-acc-chevron { transform: rotate(180deg); }
.maint-page .recv-acc-body { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.maint-page .recv-acc.open .recv-acc-body { max-height: 2000px; }
.maint-page .recv-acc-body-inner { padding: 0 16px 16px; border-top: 1px solid var(--m-border); padding-top: 14px; }

.maint-page .autocomplete-drop {
    position: absolute; top: calc(100% + 5px); right: 0; left: 0;
    background: rgba(8,13,26,0.98); border: 1px solid rgba(var(--th-accent-500-rgb),.25);
    border-radius: 11px; z-index: 9999; box-shadow: 0 12px 40px rgba(0,0,0,.6);
    overflow-y: auto; max-height: 220px;
}
[data-theme="light"] .maint-page .autocomplete-drop { background: rgba(255,255,255,.99); border-color: #e0e7ff; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.maint-page .ac-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; transition: background .12s; border-bottom: 1px solid var(--m-border); }
.maint-page .ac-item:last-child { border-bottom: none; }
.maint-page .ac-item:hover { background: rgba(var(--th-accent-500-rgb),.1); }
.maint-page .ac-avatar { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; flex-shrink: 0; background: var(--m-accent); }
.maint-page .ac-name { font-size: 13px; font-weight: 700; color: var(--m-text); }
.maint-page .ac-phone { font-size: 11px; color: var(--m-text-muted); font-weight: 600; }
.maint-page .ac-no-result { padding: 14px 12px; text-align: center; color: var(--m-text-muted); font-size: 12px; font-weight: 600; }

.maint-page .field-err { font-size: 11px; color: #f87171; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.maint-page .field-err svg { width: 12px; height: 12px; flex-shrink: 0; }
/* Legacy maintenance.css .finput.valid / .finput.error / .shake-anim (phone check) + the network-name hint (2026-10-21) */
.maint-page .finput.valid { border-color: rgba(16,185,129,.5); }
.maint-page .finput.error { border-color: rgba(248,113,113,.7); }
.maint-page .shake-anim { animation: shakeInput .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes shakeInput { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.maint-page .phone-hint { font-size: 11px; font-weight: 700; color: var(--m-text-muted); margin-top: 4px; }
.maint-page .phone-hint.ok { color: #10b981; }
.maint-page .field-err { margin-top: 4px; }

.maint-page .lock-btn {
    padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--m-border);
    background: var(--m-bg-input); cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 800; color: var(--m-text-muted); transition: all .18s; white-space: nowrap;
}
.maint-page .lock-btn:hover { border-color: rgba(245,158,11,.5); color: #fbbf24; background: rgba(245,158,11,.08); }
.maint-page .lock-btn.locked { border-color: rgba(245,158,11,.6); color: #fbbf24; background: rgba(245,158,11,.10); }
.maint-page .lock-btn svg { width: 15px; height: 15px; }

.maint-page .acc-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.maint-page .acc-tag {
    padding: 4px 11px; border-radius: 99px; border: 1px solid var(--m-border); background: var(--m-bg-input);
    font-size: 12px; font-weight: 700; color: var(--m-text-muted); cursor: pointer; transition: all .14s; user-select: none;
}
.maint-page .acc-tag:hover { border-color: rgba(var(--th-accent-500-rgb),.4); color: var(--th-accent-400); }
.maint-page .acc-tag.selected { border-color: rgba(var(--th-accent-500-rgb),.5); background: rgba(var(--th-accent-500-rgb),.12); color: var(--th-accent-400); }
.maint-page .acc-custom-input {
    background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 99px; padding: 4px 12px;
    color: var(--m-text); font-size: 12px; font-weight: 600; outline: none; min-width: 100px; max-width: 160px; transition: border-color .15s;
}
.maint-page .acc-custom-input:focus { border-color: var(--m-border-focus); }

.maint-page .inspect-toggle { display: flex; gap: 6px; border-radius: 10px; overflow: hidden; border: 1px solid var(--m-border); padding: 3px; background: var(--m-bg-input); }
.maint-page .ins-btn {
    flex: 1; padding: 7px 10px; border-radius: 8px; border: none; background: transparent; cursor: pointer;
    font-size: 12px; font-weight: 800; color: var(--m-text-muted); transition: all .16s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.maint-page .ins-btn svg { width: 14px; height: 14px; }
.maint-page .ins-btn.active { background: rgba(var(--th-accent-500-rgb),.2); color: var(--th-accent-400); box-shadow: 0 1px 4px rgba(0,0,0,.2); }

.maint-page .amount-wrap { position: relative; }
.maint-page .amount-suffix { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 800; color: var(--m-text-muted); pointer-events: none; }
.maint-page .amount-input { padding-left: 40px !important; direction: ltr; text-align: left; }

.maint-page .recv-footer { padding: 12px 22px; border-top: 1px solid var(--m-border); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.maint-page .btn-save {
    padding: 10px 28px; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2));
    border: none; border-radius: 11px; color: #fff; font-size: 14px; font-weight: 900; cursor: pointer;
    box-shadow: 0 4px 16px rgba(var(--th-accent-500-rgb),.35); transition: all .18s; display: flex; align-items: center; gap: 8px;
}
.maint-page .btn-save:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(var(--th-accent-500-rgb),.45); }
.maint-page .btn-save:disabled { opacity: .6; transform: none; cursor: not-allowed; }
.maint-page .btn-save svg { width: 16px; height: 16px; }
.maint-page .btn-cancel {
    padding: 10px 20px; border: 1px solid var(--m-border); background: transparent; border-radius: 11px;
    color: var(--m-text-sub); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.maint-page .btn-cancel:hover { background: var(--m-bg-hover); color: var(--m-text); }

.maint-page .warranty-inline-wrap { background: rgba(var(--th-accent-500-rgb),.07); border: 1px solid rgba(var(--th-accent-500-rgb),.2); border-radius: 10px; padding: 8px 12px; }
.maint-page .warranty-inline-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.maint-page .warranty-inline-label { font-size: 12px; font-weight: 700; color: var(--m-text-muted); white-space: nowrap; flex-shrink: 0; }
.maint-page .warranty-inline-row .warranty-field-row { flex: 1; min-width: 200px; }
.maint-page .warranty-switch-wrap { display: flex; align-items: center; gap: 10px; }
.maint-page .warranty-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.maint-page .warranty-switch input { opacity: 0; width: 0; height: 0; }
.maint-page .warranty-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--th-n-700); transition: .3s; border-radius: 24px; }
.maint-page .warranty-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: var(--th-n-200); transition: .3s; border-radius: 50%; }
.maint-page .warranty-switch input:checked + .warranty-slider { background: #10b981; }
.maint-page .warranty-switch input:checked + .warranty-slider::before { transform: translateX(20px); }
.maint-page .warranty-switch-label { font-size: 12px; font-weight: 700; color: var(--m-text-muted); transition: color .2s; user-select: none; }
.maint-page .warranty-switch input:checked ~ .warranty-switch-label { color: #34d399; }
.maint-page .warranty-field-row { display: flex; align-items: center; gap: 10px; }
.maint-page .warranty-field-row .finput { flex: 1; }
.maint-page .warranty-field-row .warranty-switch-wrap { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   LOCK SUB-MODAL — ported verbatim (maintenance.css real
   "LOCK SUB-MODAL" section, approx L1312-1390).
   ══════════════════════════════════════════════════════════ */
.maint-page .sub-modal-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.65); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center; padding: 12px;
}
.maint-page .sub-modal {
    background: rgba(6,9,18,0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
    width: 100%; max-width: 480px; box-shadow: 0 24px 70px rgba(0,0,0,.8); overflow: hidden;
}
[data-theme="light"] .maint-page .sub-modal { background: rgba(255,255,255,.99); border-color: #e5e7eb; }
.maint-page .sub-modal-header { padding: 16px 18px 12px; border-bottom: 1px solid var(--m-border); display: flex; align-items: center; gap: 10px; }
.maint-page .sub-modal-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(245,158,11,.15); color: #fbbf24; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.maint-page .sub-modal-icon svg { width: 17px; height: 17px; }
.maint-page .sub-modal-title { font-size: 14px; font-weight: 900; color: var(--m-text); flex: 1; }
.maint-page .sub-modal-close {
    width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--m-border); background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--m-text-muted); transition: all .14s;
}
.maint-page .sub-modal-close:hover { background: rgba(239,68,68,.1); color: #f87171; }
.maint-page .sub-modal-close svg { width: 13px; height: 13px; }
.maint-page .sub-modal-body { padding: 16px 18px; }

.maint-page .lock-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.maint-page .lock-opt {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px;
    border: 1.5px solid var(--m-border); background: var(--m-bg-input); cursor: pointer; transition: all .16s;
}
.maint-page .lock-opt:hover { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.05); }
.maint-page .lock-opt.selected { border-color: rgba(245,158,11,.6); background: rgba(245,158,11,.10); }
.maint-page .lock-opt-icon { width: 34px; height: 34px; border-radius: 9px; background: rgba(245,158,11,.12); color: #fbbf24; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.maint-page .lock-opt-icon svg { width: 16px; height: 16px; }
.maint-page .lock-opt-label { font-size: 13px; font-weight: 800; color: var(--m-text); }
.maint-page .lock-opt-sub { font-size: 11px; color: var(--m-text-muted); font-weight: 600; }
.maint-page .lock-opt-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--m-border); margin-right: auto; flex-shrink: 0; }
.maint-page .lock-opt.selected .lock-opt-radio { border-color: #fbbf24; background: radial-gradient(circle, #fbbf24 40%, transparent 42%); }
.maint-page .lock-val-input {
    width: 100%; background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 10px;
    padding: 10px 14px; color: var(--m-text); font-size: 14px; font-weight: 700; outline: none; direction: ltr; text-align: center;
}
.maint-page .lock-val-input:focus { border-color: rgba(245,158,11,.5); box-shadow: 0 0 0 3px rgba(245,158,11,.10); }
.maint-page .sub-modal-footer { padding: 12px 18px; border-top: 1px solid var(--m-border); display: flex; justify-content: flex-end; gap: 10px; }
.maint-page .btn-lock-save {
    padding: 9px 22px; background: linear-gradient(135deg,#f59e0b,#d97706); border: none; border-radius: 10px;
    color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; transition: all .18s;
}
.maint-page .btn-lock-save:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(245,158,11,.4); }

/* ══════════════════════════════════════════════════════════
   EXECUTE PANEL — ported verbatim from maintenance.css's own
   "EXECUTE REPAIR PANEL" section (L441-972 in the real HTML,
   CSS scattered across the file, exec- / fin- / ecs- / fuc- / cv-
   prefixes — every rule below traces to a specific selector in
   the real maintenance.css, nothing invented). Card/tabs view
   toggle reuses ONE set of bound fields (single source of truth)
   instead of Legacy's own DOM-duplication + JS cv-sync mirroring
   — same visible behavior, IMPROVE in implementation (same
   reasoning already accepted for ExecuteInTransactionAsync reuse
   on the backend side, Phase 1 §14).
   ══════════════════════════════════════════════════════════ */
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.maint-page .exec-modal-overlay {
    position: fixed; inset: 0; z-index: 9500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.72); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.maint-page .exec-modal-dialog {
    background: var(--m-bg-card); width: calc(85 * var(--vw)); height: calc(85 * var(--vh));
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 20px; border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 0 0 1px rgba(var(--th-accent-500-rgb),0.12), 0 32px 80px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
}
[data-theme="light"] .maint-page .exec-modal-dialog { background: rgba(255,255,255,0.98); border-color: #e5e7eb; }
.maint-page .exec-modal-dialog.exec-fullscreen { width: calc(100 * var(--vw)) !important; height: calc(100 * var(--vh)) !important; border-radius: 0 !important; border: none !important; }
.maint-page .exec-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.maint-page .exec-body { flex: 1; overflow-y: auto; min-height: 0; padding: 18px 20px; }
.maint-page .exec-card.view-card .exec-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; align-content: start; overflow-y: auto; }
.maint-page .exec-card.view-card .exec-pane { display: flex !important; flex-direction: column; gap: 12px; }
.maint-page .exec-card.view-card .exec-pane[data-pane="0"] { display: none !important; }
.maint-page .exec-card.view-card .exec-pane[data-pane="1"] { order: -5; grid-column: 1 / -1; }
.maint-page .exec-card.view-card .exec-pane[data-pane="2"] { order: 0; grid-column: 1 / -1; }
.maint-page .exec-card.view-tabs .exec-tabs-nav { display: flex; }
.maint-page .exec-card.view-tabs .exec-body { display: block; }
.maint-page .exec-card.view-tabs .exec-pane { display: none !important; }
.maint-page .exec-card.view-tabs .exec-pane.active { display: flex !important; flex-direction: column; gap: 12px; }
.maint-page .exec-card.view-card .exec-tabs-nav { display: none !important; }
.maint-page .exec-card.view-card .fin-services-parts-row { grid-template-columns: 1fr; gap: 0; }

/* ── Header ── */
.maint-page .exec-hd {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 20px;
    border-bottom: 1px solid var(--m-border); gap: 12px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(var(--th-accent-500-rgb),.06) 0%, rgba(var(--th-accent2-500-rgb),.04) 100%);
}
.maint-page .exec-hd-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.maint-page .exec-hd-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.maint-page .exec-hd-icon {
    width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg,var(--m-accent),var(--m-accent-2));
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(var(--th-accent-500-rgb),.35); color: #fff;
}
.maint-page .exec-hd-icon svg { width: 18px; height: 18px; }
.maint-page .exec-hd-info { min-width: 0; }
.maint-page .exec-hd-title { font-size: 14px; font-weight: 800; color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maint-page .exec-wo-accent { color: var(--m-accent); }
.maint-page .exec-hd-meta { font-size: 11.5px; color: var(--m-text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maint-page .exec-hd-sep { margin: 0 5px; opacity: .4; }
.maint-page .exec-status-line { margin-top: 5px; display: flex; align-items: center; }
.maint-page .exec-view-toggle { display: flex; background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 9px; overflow: hidden; padding: 2px; gap: 2px; }
.maint-page .exec-vt-btn { width: 30px; height: 30px; border: none; background: transparent; border-radius: 7px; cursor: pointer; color: var(--m-text-muted); display: flex; align-items: center; justify-content: center; transition: all .14s; padding: 0; }
.maint-page .exec-vt-btn svg { width: 15px; height: 15px; }
.maint-page .exec-vt-btn.active { background: var(--m-accent); color: #fff; }
.maint-page .exec-vt-btn:not(.active):hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .exec-hd-fullscreen { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-sub); cursor: pointer; transition: all .15s; flex-shrink: 0; }
.maint-page .exec-hd-fullscreen:hover { background: rgba(var(--th-accent-500-rgb),.14); border-color: var(--m-accent); color: var(--m-accent); transform: scale(1.07); }
.maint-page .exec-hd-fullscreen svg { width: 15px; height: 15px; }
.maint-page .exec-hd-fullscreen .fs-icon-compress { display: none; }
.maint-page .exec-fullscreen .fs-icon-expand { display: none; }
.maint-page .exec-fullscreen .fs-icon-compress { display: block; }
.maint-page .exec-hd-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-sub); cursor: pointer; transition: all .15s; flex-shrink: 0; }
.maint-page .exec-hd-close:hover { background: rgba(239,68,68,.15); border-color: #f87171; color: #f87171; }
.maint-page .exec-hd-close svg { width: 15px; height: 15px; }

/* ── WhatsApp/Print actions bar ── */
.maint-page .exec-actions-bar { display: flex; align-items: center; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--m-border); background: rgba(255,255,255,.015); flex-wrap: wrap; }
[data-theme="light"] .maint-page .exec-actions-bar { background: rgba(var(--th-n-900-rgb),.015); }
.maint-page .exec-wa-btn { text-decoration: none;
    display: flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px;
    border: 1px solid rgba(37,211,102,.25); background: rgba(37,211,102,.08); color: #4ade80;
    font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.maint-page .exec-wa-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.maint-page .exec-wa-btn:hover:not(:disabled) { background: rgba(37,211,102,.16); border-color: rgba(37,211,102,.45); transform: translateY(-1px); }
.maint-page .exec-wa-btn:disabled { opacity: .5; cursor: not-allowed; }
[data-theme="light"] .maint-page .exec-wa-btn { color: #15803d; background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); }
.maint-page .exec-wa-ready { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.09); color: #34d399; }
.maint-page .exec-wa-reject { border-color: rgba(239,68,68,.22); background: rgba(239,68,68,.07); color: #f87171; }
[data-theme="light"] .maint-page .exec-wa-reject { color: #dc2626; background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); }
.maint-page .exec-actions-sep { width: 1px; height: 22px; background: var(--m-border); flex-shrink: 0; margin: 0 2px; }
.maint-page .exec-print-btn {
    display: flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px;
    border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-sub);
    font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.maint-page .exec-print-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.maint-page .exec-print-btn:hover:not(:disabled) { background: var(--m-bg-hover); color: var(--m-text); transform: translateY(-1px); }
.maint-page .exec-print-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Tabs nav ── */
.maint-page .exec-tabs-nav { display: none; gap: 0; border-bottom: 1px solid var(--m-border); padding: 0 16px; background: rgba(255,255,255,.012); overflow-x: auto; scrollbar-width: none; }
.maint-page .exec-tabs-nav::-webkit-scrollbar { display: none; }
.maint-page .exec-tab-btn {
    display: flex; align-items: center; gap: 6px; padding: 12px 16px; border: none; background: transparent;
    font-size: 13px; font-weight: 700; color: var(--m-text-muted); cursor: pointer;
    border-bottom: 2.5px solid transparent; transition: all .15s; margin-bottom: -1px; white-space: nowrap;
}
.maint-page .exec-tab-btn svg { width: 15px; height: 15px; }
.maint-page .exec-tab-btn.active { color: var(--m-accent); border-bottom-color: var(--m-accent); }
.maint-page .exec-tab-btn:not(.active):hover { color: var(--m-text); background: var(--m-bg-hover); }
.maint-page .exec-tab-btn .tab-count { margin-inline-start: 2px; }
.maint-page .exec-tab-btn.active .tab-count { background: var(--m-accent); color: #fff; }

/* ── Pane 0: بيانات الصيانة (editable info) ── */
.maint-page .exec-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.maint-page .exec-info-wide { grid-column: 1 / -1; }
.maint-page .exec-info-section-title {
    grid-column: 1 / -1; font-size: 10px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase;
    letter-spacing: .08em; padding: 4px 2px 2px; border-bottom: 1px solid var(--m-border); margin-top: 4px;
    display: flex; align-items: center; gap: 6px;
}
.maint-page .exec-info-section-title:first-child { margin-top: 0; }
.maint-page .exec-info-edit-badge { margin-right: auto; font-size: 9px; font-weight: 700; color: #34d399; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.25); border-radius: 5px; padding: 2px 7px; letter-spacing: normal; text-transform: none; }
.maint-page .exec-info-item { background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.maint-page .exec-info-item.exec-info-editable { gap: 0; }
.maint-page .exec-info-lbl { font-size: 10.5px; font-weight: 700; color: var(--m-text-muted); letter-spacing: .05em; text-transform: uppercase; }
.maint-page .exec-info-editable .exec-info-lbl { display: block; margin-bottom: 4px; }
.maint-page .exec-info-val { font-size: 13.5px; font-weight: 700; color: var(--m-text); }
.maint-page .exec-info-input {
    width: 100%; background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 8px; color: var(--m-text);
    font-size: 13px; font-weight: 600; padding: 7px 10px; transition: border-color .2s, box-shadow .2s; outline: none;
}
.maint-page .exec-info-input:focus { border-color: var(--m-border-focus); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.12); }

/* ── Card-view info strip (mirrors pane-0 fields in card layout) ── */
.maint-page .cv-info-strip { display: none; background: var(--m-bg-card); border-radius: 12px; border: 1px solid var(--m-border); padding: 14px 16px 10px; flex-direction: column; gap: 10px; }
.maint-page .exec-card.view-card .cv-info-strip { display: flex !important; grid-column: 1 / -1; order: -10; }
.maint-page .cv-info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.maint-page .cv-info-col { display: flex; flex-direction: column; gap: 8px; }
.maint-page .cv-info-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; }
.maint-page .cv-field-pair { display: flex; flex-direction: column; gap: 3px; }
.maint-page .cv-field-pair label { font-size: 11px; font-weight: 700; color: var(--m-text-muted); padding-right: 2px; }
.maint-page .cv-readonly-val { font-size: 13px; font-weight: 700; color: var(--m-text); padding: 7px 10px; }
.maint-page .cv-info-wide-row { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.maint-page .cv-lock-strip { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--m-border); background: var(--m-bg-input); cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--m-text-muted); transition: all .18s; width: 100%; }
.maint-page .cv-lock-strip:hover, .maint-page .cv-lock-strip.locked { border-color: rgba(245,158,11,.5); color: #fbbf24; background: rgba(245,158,11,.08); }
.maint-page .cv-lock-strip svg { width: 15px; height: 15px; flex-shrink: 0; }
.maint-page .cv-readonly-strip { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--m-border); background: var(--m-bg-input); }
.maint-page .cv-readonly-strip-lbl { font-size: 12px; font-weight: 700; color: var(--m-text-muted); white-space: nowrap; }
.maint-page .cv-readonly-strip-val { font-size: 12.5px; font-weight: 700; color: var(--m-text); }

/* ── Pane 1: الحالة والتشخيص ── */
.maint-page .exec-top-strip { display: flex; flex-direction: column; gap: 10px; }
.maint-page .exec-problem-row { background: var(--m-bg-input); border-radius: 9px; padding: 9px 13px; font-size: 12.5px; color: var(--m-text-sub); display: flex; align-items: flex-start; gap: 6px; border: 1px solid var(--m-border); }
.maint-page .exec-problem-edit-row { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
.maint-page .exec-problem-lbl { font-weight: 800; color: var(--m-text); flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.maint-page .exec-problem-textarea { width: 100%; min-height: 56px; font-size: 13px !important; resize: vertical; }
.maint-page .exec-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.maint-page .exec-field-col { display: flex; flex-direction: column; gap: 10px; }
.maint-page .exec-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Pane 2: المالية والدفع (Smart Part Picker + summary + payment) ── */
.maint-page .fin-services-parts-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.maint-page .fin-section { border: 1px solid var(--m-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--m-bg-input); }
.maint-page .fin-services-parts-row .fin-section { margin-bottom: 0; }
.maint-page .fin-services-section, .maint-page .recv-sp-card.fin-services-section { border-color: rgba(6,182,212,.35); background: linear-gradient(135deg, rgba(6,182,212,.08) 0%, rgba(6,182,212,.02) 100%); }
.maint-page .fin-section-title { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.maint-page .fin-services-section .fin-section-title, .maint-page .recv-sp-card.fin-services-section .fin-section-title { color: #67e8f9; }
.maint-page .fin-lock-badge { margin-right: auto; font-size: 10px; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25); border-radius: 5px; padding: 2px 7px; letter-spacing: normal; text-transform: none; }
.maint-page .fin-add-btn { margin-right: auto; font-size: 11px; font-weight: 700; color: var(--m-accent); background: none; border: 1px solid var(--m-accent); border-radius: 6px; padding: 3px 9px; cursor: pointer; letter-spacing: normal; text-transform: none; transition: all .18s; }
.maint-page .fin-services-section .fin-add-btn, .maint-page .recv-sp-card.fin-services-section .fin-add-btn { color: #67e8f9; border-color: rgba(103,232,249,.5); background: rgba(6,182,212,.10); }
.maint-page .fin-add-btn:hover { background: rgba(var(--th-accent-500-rgb),.1); }
.maint-page .fin-services-section .fin-add-btn:hover, .maint-page .recv-sp-card.fin-services-section .fin-add-btn:hover { background: rgba(6,182,212,.20); border-color: rgba(103,232,249,.8); }

.maint-page .svc-type-filter { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.maint-page .svc-type-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 700; cursor: pointer; border: 1.5px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--m-text-muted); transition: all .2s; }
.maint-page .svc-type-btn:hover { border-color: rgba(var(--th-accent-500-rgb),.35); color: var(--m-text); background: rgba(var(--th-accent-500-rgb),.08); }
.maint-page .svc-type-btn.active[data-type="hardware"] { background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.45); color: #93c5fd; }
.maint-page .svc-type-btn.active[data-type="software"] { background: rgba(var(--th-violet-500-rgb),.15); border-color: rgba(var(--th-violet-500-rgb),.45); color: #c4b5fd; }
.maint-page .svc-type-btn.active[data-type="other"] { background: rgba(var(--th-n-500-rgb),.2); border-color: rgba(var(--th-n-500-rgb),.45); color: var(--th-n-300); }
[data-theme="light"] .maint-page .svc-type-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: var(--m-text-muted); }
[data-theme="light"] .maint-page .svc-type-btn.active[data-type="hardware"] { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.4); color: #2563eb; }
[data-theme="light"] .maint-page .svc-type-btn.active[data-type="software"] { background: rgba(var(--th-violet-500-rgb),.1); border-color: rgba(var(--th-violet-500-rgb),.4); color: var(--th-violet-600); }
[data-theme="light"] .maint-page .svc-type-btn.active[data-type="other"] { background: rgba(var(--th-n-500-rgb),.1); border-color: rgba(var(--th-n-500-rgb),.4); color: var(--th-n-600); }

.maint-page .common-faults-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.maint-page .service-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, transform .1s; user-select: none; white-space: nowrap; border: 1.5px solid transparent; background: rgba(16,185,129,.10); color: #6ee7b7; border-color: rgba(16,185,129,.2); }
.maint-page .service-chip:hover { background: rgba(16,185,129,.22); color: #a7f3d0; border-color: rgba(16,185,129,.4); transform: translateY(-1px); }
.maint-page .service-chip.used { background: rgba(16,185,129,.35); color: #d1fae5; transform: scale(.95); }
[data-theme="light"] .maint-page .service-chip { background: rgba(16,185,129,.12); color: #059669; border-color: rgba(16,185,129,.5); }
[data-theme="light"] .maint-page .service-chip:hover { background: rgba(16,185,129,.20); }

.maint-page .exec-cost-summary { background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.maint-page .ecs-total-paid-block { background: linear-gradient(135deg, rgba(16,185,129,.08) 0%, rgba(16,185,129,.03) 100%); border: 1px solid rgba(16,185,129,.25); border-radius: 10px; padding: 9px 12px; margin: 2px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.maint-page .ecs-tp-row { display: flex; justify-content: space-between; align-items: center; }
.maint-page .ecs-tp-sub-lbl { font-size: 11px; font-weight: 600; color: var(--m-text-muted); }
.maint-page .ecs-tp-sub-val { font-size: 11.5px; font-weight: 700; color: var(--m-text-sub); }
.maint-page .ecs-tp-divider { height: 1px; background: rgba(16,185,129,.2); margin: 2px 0; }
.maint-page .ecs-tp-total-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.maint-page .ecs-tp-lbl { font-size: 12px; font-weight: 800; color: #10b981; }
.maint-page .ecs-tp-val { font-size: 15px; font-weight: 900; color: #10b981; font-variant-numeric: tabular-nums; }
.maint-page .ecs-divider { height: 1px; background: var(--m-border); margin: 2px 0; }
.maint-page .ecs-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.maint-page .ecs-lbl { color: var(--m-text-muted); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.maint-page .ecs-val { font-weight: 700; }
.maint-page .ecs-total { font-size: 14px; font-weight: 800; }
.maint-page .ecs-remaining-highlight { background: rgba(var(--th-accent-500-rgb),.07); border-radius: 8px; padding: 6px 10px; margin: 2px 0; }
.maint-page .ecs-profit { background: rgba(16,185,129,.06); border-radius: 8px; padding: 6px 10px; margin: 0 -4px; }
.maint-page .ecs-profit .ecs-lbl { color: var(--m-text-sub); font-weight: 700; }
.maint-page .ecs-profit-val { font-weight: 800; font-size: 13.5px; }
.maint-page .ecs-tax { background: rgba(245,158,11,.05); border-radius: 8px; padding: 5px 10px; margin: 0 -4px; }
.maint-page .ecs-commission { background: rgba(var(--th-accent2-500-rgb),.05); border-radius: 8px; padding: 5px 10px; margin: 0 -4px; }
.maint-page .ecs-commission .ecs-lbl { color: var(--m-text-sub); font-weight: 700; }
.maint-page .ecs-labor-block { background: linear-gradient(135deg, rgba(var(--th-accent-500-rgb),.08), rgba(var(--th-accent2-500-rgb),.05)); border: 1.5px solid rgba(var(--th-accent-500-rgb),.3); border-radius: 12px; padding: 12px 14px; margin: 2px -2px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s; }
.maint-page .ecs-labor-block:focus-within { border-color: rgba(var(--th-accent-500-rgb),.65); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.1); }
[data-theme="light"] .maint-page .ecs-labor-block { background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(var(--th-violet-500-rgb),.03)); border-color: rgba(59,130,246,.3); }
.maint-page .ecs-labor-header { display: flex; align-items: center; gap: 8px; }
.maint-page .ecs-labor-icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(var(--th-accent-500-rgb),.15); color: var(--th-accent-300); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.maint-page .ecs-labor-icon svg { width: 16px; height: 16px; }
.maint-page .ecs-labor-title { font-size: 12.5px; font-weight: 800; color: var(--m-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.maint-page .ecs-labor-required { font-size: 10px; font-weight: 800; color: #f87171; background: rgba(239,68,68,.1); border-radius: 4px; padding: 1px 5px; }
.maint-page .ecs-labor-optional { font-size: 10px; font-weight: 600; color: var(--m-text-muted); }
.maint-page .ecs-labor-input-wrap { position: relative; display: flex; align-items: center; }
.maint-page .ecs-labor-suffix { position: absolute; left: 12px; font-size: 13px; font-weight: 800; color: var(--th-accent-300); pointer-events: none; z-index: 1; }
.maint-page .ecs-labor-input { width: 100%; background: rgba(255,255,255,.05); border: 1.5px solid rgba(var(--th-accent-500-rgb),.3); border-radius: 10px; padding: 11px 14px 11px 44px; color: var(--m-text); font-size: 20px; font-weight: 900; outline: none; direction: ltr; text-align: left; transition: all .2s; -moz-appearance: textfield; }
.maint-page .ecs-labor-input::placeholder { color: var(--m-text-muted); font-weight: 600; font-size: 16px; }
.maint-page .ecs-labor-input:focus { border-color: var(--th-accent-400); background: rgba(var(--th-accent-500-rgb),.08); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.15); }
[data-theme="light"] .maint-page .ecs-labor-input { background: rgba(59,130,246,.05); border-color: rgba(59,130,246,.3); color: #111827; }
[data-theme="light"] .maint-page .ecs-labor-suffix { color: #3b82f6; }

.maint-page .fin-unified-card { border: 1px solid var(--m-border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: var(--m-bg-input); }
.maint-page .fuc-deposit-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; background: linear-gradient(135deg, rgba(251,191,36,.1) 0%, rgba(251,191,36,.04) 100%); border-bottom: 1px solid rgba(251,191,36,.2); flex-wrap: wrap; }
.maint-page .fuc-deposit-bar-right { display: flex; align-items: center; gap: 6px; }
.maint-page .fuc-deposit-bar-left { display: flex; align-items: center; gap: 10px; }
.maint-page .fuc-label { font-size: 11.5px; font-weight: 800; color: var(--m-text); letter-spacing: .03em; }
.maint-page .fuc-deposit-val { font-size: 16px; font-weight: 900; color: #f59e0b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.maint-page .fuc-deposit-sub { font-size: 10.5px; color: var(--m-text-muted); font-weight: 600; white-space: nowrap; }
.maint-page .fuc-divider { height: 1px; background: var(--m-border); }
.maint-page .fuc-payment-body { padding: 10px 14px 12px; }
.maint-page .fuc-payment-header { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 9px; }
.maint-page .fuc-input-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: center; margin-bottom: 4px; }
.maint-page .fuc-amount-wrap { min-width: 0; }
.maint-page .fuc-amount-wrap .amount-input { font-size: 13px !important; }
.maint-page .fuc-dest-selector { min-width: 0; }
.maint-page .fuc-pay-btn { white-space: nowrap; padding: 9px 13px !important; font-size: 12px !important; }

.maint-page .fin-dest-selector { position: relative; }
.maint-page .fin-dest-btn { width: 100%; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1.5px solid var(--m-border); border-radius: 9px; background: var(--m-bg-input); color: var(--m-text); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: right; transition: all .18s; }
.maint-page .fin-dest-btn:hover { border-color: var(--m-accent); }
.maint-page .fin-dest-btn-icon { font-size: 15px; flex-shrink: 0; }
.maint-page .fin-dest-btn-label { flex: 1; }
/* position:fixed, not absolute (owner report, 2026-09-04, live screenshot): this control sits inside
   .fin-unified-card, which has overflow:hidden purely to round its own header's corners (L900) — an
   absolutely-positioned dropdown opening downward from a button near the bottom of that card was
   silently clipped to invisibility by it, reachable neither by scroll nor click. top/left are now
   computed and clamped in TogglePaymentDestAsync, same viewport-aware technique as
   MaintenanceBoard.razor's OpenStatusMenuAsync/.scf-panel — position:fixed also escapes the
   .exec-body/.exec-modal-dialog overflow:hidden further up the tree, not just this one card. */
.maint-page .fin-dest-dropdown { display: none; position: fixed; background: var(--th-n-900); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) inset; z-index: 9999; overflow: hidden; min-width: 220px; }
[data-theme="light"] .maint-page .fin-dest-dropdown { background: #ffffff; border-color: rgba(var(--th-n-900-rgb),0.12); box-shadow: 0 16px 40px rgba(0,0,0,.15), 0 0 0 1px rgba(var(--th-n-900-rgb),.06) inset; }
.maint-page .fin-dest-dropdown.open { display: block; }
.maint-page .fin-dest-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
[data-theme="light"] .maint-page .fin-dest-tabs { border-bottom-color: rgba(var(--th-n-900-rgb),0.08); background: rgba(var(--th-n-900-rgb),0.03); }
.maint-page .fin-dest-tab { flex: 1; padding: 9px; font-size: 11.5px; font-weight: 700; color: var(--m-text-muted); background: none; border: none; cursor: pointer; transition: all .15s; }
.maint-page .fin-dest-tab.active { color: var(--m-accent); border-bottom: 2px solid var(--m-accent); }
.maint-page .fin-dest-list { max-height: 200px; overflow-y: auto; }
.maint-page .fin-dest-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: all .15s; border-bottom: 1px solid var(--m-border); }
.maint-page .fin-dest-item:last-child { border-bottom: none; }
.maint-page .fin-dest-item:hover { background: rgba(var(--th-accent-500-rgb),.07); }
.maint-page .fin-dest-item.selected { background: rgba(var(--th-accent-500-rgb),.1); }
.maint-page .fin-dest-item-icon { font-size: 16px; flex-shrink: 0; }
.maint-page .fin-pay-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border: none; border-radius: 10px; background: linear-gradient(135deg, #10b981, #34d399); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(16,185,129,.3); transition: all .2s; }
.maint-page .fin-pay-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(16,185,129,.4); }
.maint-page .fin-pay-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.maint-page .exec-payments-log { margin-top: 12px; border: 1px solid var(--m-border); border-radius: 10px; overflow: hidden; font-size: 12px; }
.maint-page .exec-payment-log-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--m-border); }
.maint-page .exec-payment-log-row:last-child { border-bottom: none; }

/* ── Smart Part Picker rows table ── */
.maint-page .exec-sp-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.maint-page .exec-sp-table thead { background: rgba(var(--th-accent-500-rgb),.1); }
.maint-page .exec-sp-table th { padding: 7px 8px; text-align: right; font-weight: 800; color: var(--th-accent-300); font-size: 11px; }
.maint-page .exec-sp-table td { padding: 6px 8px; vertical-align: middle; border-top: 1px solid var(--m-border); }
.maint-page .exec-sp-table-wrap { border: 1px solid rgba(var(--th-accent-500-rgb),.25); border-radius: 10px; overflow: visible; }
.maint-page .exec-sp-name-input, .maint-page .exec-sp-part-input { width: 100%; background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 7px; padding: 5px 8px; color: var(--m-text); font-size: 12px; outline: none; }
.maint-page .exec-sp-name-input:focus, .maint-page .exec-sp-part-input:focus { border-color: var(--m-border-focus); }
.maint-page .exec-sp-qty-input, .maint-page .exec-sp-price-input { width: 100%; background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 7px; padding: 5px 4px; color: var(--m-text); font-size: 12px; text-align: center; outline: none; }
.maint-page .exec-sp-remove-btn { width: 22px; height: 22px; border-radius: 6px; border: none; background: rgba(239,68,68,.12); color: #f87171; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.maint-page .exec-sp-remove-btn:hover { background: rgba(239,68,68,.25); }
/* Legacy parity (2026-09-10, panels/maintenance/maintenance.css:3695-3796) — exact chip colors per
   part source: inventory=purple, external=amber, temporary=blue (was wrongly reusing external's
   amber before this pass — a real visible divergence the owner flagged live). */
.maint-page .exec-sp-part-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; margin-right: 4px; white-space: nowrap; }
.maint-page .exec-sp-part-badge.src-inventory { background: rgba(var(--th-accent2-400-rgb),.1); color: var(--th-accent2-400); }
.maint-page .exec-sp-part-badge.src-external { background: rgba(245,158,11,.08); color: #fbbf24; }
.maint-page .exec-sp-part-badge.src-temporary { background: rgba(96,165,250,.08); color: #60a5fa; }
.maint-page .exec-sp-empty { text-align: center; padding: 16px; color: var(--m-text-muted); font-size: 12px; font-weight: 600; }
.maint-page .exec-sp-part-hint { font-size: 10.5px; color: var(--m-text-muted); font-weight: 600; margin-top: 3px; width: 100%; }

/* Legacy parity (2026-09-10, service-part-select.js's "⚠️ عجز متوقّع" deficit banner) — appears under
   an Inventory-linked part row whenever its available stock is short of what the line needs. Red
   variant = no request raised yet; blue "linked/queued" variant is deliberately NOT red (Legacy's own
   comment: "الوضع تحت السيطرة" — the situation is under control once a request already exists). */
.maint-page .sps-deficit-row { width: 100%; margin-top: 4px; padding: 5px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.maint-page .sps-deficit-warn { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.maint-page .sps-deficit-warn.sps-deficit-linked-info { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.3); color: #93c5fd; }
.maint-page .sps-reqpart-btn { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); color: #34d399; border-radius: 6px; padding: 3px 9px; font-size: 10.5px; font-weight: 800; cursor: pointer; white-space: nowrap; font-family: inherit; }
.maint-page .sps-reqpart-btn:hover:not(:disabled) { background: rgba(16,185,129,.2); }
.maint-page .sps-reqpart-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Legacy parity (2026-09-10, maintenance.css:3686-3834) — "شراء خارجي" inline entry form (unconfirmed)
   + confirmed chip, the dropdown's own "إضافة إلى الطلبات" no-match row, the in-place Disposition card,
   and the small choice/add-to-orders dialogs (§5.1/§5.2 decision engine + Temporary "case 3"). */
.maint-page .sps-part-ext { display: flex; flex-direction: column; gap: 3px; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3); border-radius: 8px; padding: 5px; }
.maint-page .sps-ext-row { display: flex; gap: 3px; align-items: center; }
.maint-page .sps-ext-row input { padding: 3px 6px; font-size: 11px; background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 6px; color: var(--m-text); outline: none; }
.maint-page .sps-ext-confirm { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); color: #34d399; font-size: 10px; font-weight: 800; border-radius: 6px; padding: 4px 6px; cursor: pointer; font-family: inherit; }
.maint-page .sps-ext-confirm:hover { background: rgba(16,185,129,.2); border-color: rgba(16,185,129,.5); }
/* Legacy parity (2026-09-11, maintenance.css:3739-3748) — صف مُجمَّد: قطعة استُبدِلت بعد استهلاك فعلي،
   سجل تاريخي بلا تعديل. يبقى داخل الجدول (رمادي باهت)، لا يُخفى بالكامل. */
.maint-page .sps-row-frozen { opacity: .55; }
.maint-page .sps-frozen-text { font-size: 12px; color: var(--m-text-muted); }
.maint-page .sps-frozen-badge { display: inline-block; font-size: 10px; font-weight: 700; color: var(--m-text-muted); background: rgba(255,255,255,.05); border: 1px dashed var(--m-border); border-radius: 6px; padding: 3px 8px; }
.maint-page .sps-part-linked { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: rgba(var(--th-accent2-400-rgb),.1); border: 1px solid rgba(var(--th-accent2-400-rgb),.3); border-radius: 8px; padding: 4px 6px; }
.maint-page .sps-part-chip { font-size: 11px; font-weight: 700; color: var(--th-accent2-400); }
.maint-page .sps-part-chip-ext { color: #fbbf24; }
.maint-page .sps-part-linked-ext { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); }
.maint-page .sps-part-stock { width: 100%; font-size: 9px; color: var(--m-text-muted); }
.maint-page .sps-unlink, .maint-page .sps-edit { width: 18px; height: 18px; min-width: 18px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; }
.maint-page .sps-unlink { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #f87171; }
.maint-page .sps-unlink:hover { background: rgba(239,68,68,.22); }
.maint-page .sps-edit { background: rgba(255,255,255,.06); border: 1px solid var(--m-border); color: var(--m-text-muted); }
.maint-page .sps-edit:hover { color: var(--th-accent-300); border-color: var(--th-accent-300); }

/* عنصر "إضافة إلى الطلبات" بقائمة البحث المنسدلة — يظهر فقط عند عدم وجود تطابق (Legacy §1.5) */
.maint-page .ac-item.ac-item-savenew { border-top: 1px solid rgba(52,211,153,.18); color: #34d399; }
.maint-page .ac-item.ac-item-savenew:hover { background: rgba(16,185,129,.14); }

.maint-page .sps-disposition-card { background: rgba(var(--th-accent-500-rgb),.08); border: 1px solid rgba(var(--th-accent-500-rgb),.3); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.maint-page .sps-disposition-title { font-size: 11px; font-weight: 700; color: var(--m-text); line-height: 1.6; }
.maint-page .sps-disposition-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.maint-page .sps-disp-btn { background: var(--m-bg-input); border: 1.5px solid var(--m-border); color: var(--m-text); font-size: 11px; font-weight: 700; border-radius: 7px; padding: 5px 10px; cursor: pointer; font-family: inherit; }
.maint-page .sps-disp-btn:hover { border-color: var(--m-accent); color: var(--m-accent); }
.maint-page .sps-disp-danger:hover { border-color: #f87171; color: #f87171; }
.maint-page .sps-disposition-reason-wrap { display: flex; gap: 6px; align-items: center; }
.maint-page .sps-disposition-reason-wrap input { flex: 1; background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 6px; padding: 5px 8px; color: var(--m-text); outline: none; }
.maint-page .sps-disp-confirm { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); color: #34d399; font-size: 11px; font-weight: 800; border-radius: 7px; padding: 5px 10px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.maint-page .sps-disp-cancel { align-self: flex-start; background: none; border: none; color: var(--m-text-muted); font-size: 10px; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }

.maint-page .sps-atod-overlay { position: fixed; inset: 0; z-index: 9600; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.maint-page .sps-atod-card { background: var(--m-bg-card, var(--th-n-900)); border: 1px solid rgba(var(--th-accent-500-rgb),.35); border-radius: 12px; padding: 16px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.maint-page .sps-atod-title { font-size: 13px; font-weight: 800; color: var(--m-text); }
.maint-page .sps-atod-field { display: flex; flex-direction: column; gap: 4px; }
.maint-page .sps-atod-field label { font-size: 10.5px; font-weight: 700; color: var(--m-text-muted); }
.maint-page .sps-atod-field input, .maint-page .sps-atod-field textarea { background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 7px; padding: 6px 9px; font-size: 12px; color: var(--m-text); font-family: inherit; outline: none; }
/* 2026-10-24 (owner) — part type buttons (the name builds itself) + the category list styled like the other fields */
.maint-page .sps-atod-field select { background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 7px; padding: 7px 9px; font-size: 12px; color: var(--m-text); font-family: inherit; outline: none; min-height: 34px; }
.maint-page .sps-atod-quality { display: flex; flex-wrap: wrap; gap: 6px; }
.maint-page .sps-atod-qbtn { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-muted); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.maint-page .sps-atod-qbtn.on { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.55); color: #34d399; }
.maint-page .sps-atod-field input:focus, .maint-page .sps-atod-field textarea:focus { border-color: var(--m-accent); }
.maint-page .sps-atod-row { display: flex; gap: 8px; }
.maint-page .sps-atod-row .sps-atod-field { flex: 1; }
.maint-page .sps-atod-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.maint-page .sps-choice-actions { flex-direction: column; }
.maint-page .sps-choice-msg { font-size: 11.5px; color: var(--m-text-sub, var(--m-text-muted)); line-height: 1.7; }
.maint-page .sps-atod-btn-primary, .maint-page .sps-atod-btn-muted { border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid; }
.maint-page .sps-atod-btn-primary { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.4); color: #34d399; }
.maint-page .sps-atod-btn-primary:hover:not(:disabled) { background: rgba(16,185,129,.24); }
.maint-page .sps-atod-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.maint-page .sps-atod-btn-muted { background: var(--m-bg-input); border-color: var(--m-border); color: var(--m-text-muted); }
.maint-page .sps-atod-btn-muted:hover { color: var(--m-text); }
/* Receive-time parts/services running total (owner request, 2026-09-04) — the Execute panel gets
   this same number for free from its own exec-cost-summary block, which Receive's accordion doesn't
   have room for; this one-line footer is enough context for "how much am I about to record". */
.maint-page .exec-sp-total-hint { text-align: left; font-size: 12.5px; font-weight: 800; color: var(--m-accent); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--m-border); }

/* ── WA confirm banner (visible, disabled — WhatsApp sending is a disclosed deferred Backend item) ── */
.maint-page .exec-wa-confirm { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: rgba(37,211,102,.07); border-top: 1px solid rgba(37,211,102,.2); flex-wrap: wrap; animation: dropIn .2s cubic-bezier(.34,1.56,.64,1); }
.maint-page .exec-wa-confirm-icon { flex-shrink: 0; line-height: 0; }
.maint-page .exec-wa-confirm-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.maint-page .exec-wa-confirm-text strong { font-size: 13px; color: var(--m-text); }
.maint-page .exec-wa-confirm-sub { font-size: 11.5px; color: var(--m-text-muted); }
.maint-page .exec-wa-confirm-btns { display: flex; gap: 8px; }

/* ── Footer ── */
.maint-page .exec-footer { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--m-border); background: rgba(255,255,255,.012); }
[data-theme="light"] .maint-page .exec-footer { background: rgba(var(--th-n-900-rgb),.012); }
.maint-page .exec-footer .btn-cancel { padding: 9px 18px; font-size: 12.5px; }
.maint-page .exec-footer .btn-save { flex: 1; padding: 10px 18px; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.maint-page .exec-footer .btn-save svg { width: 14px; height: 14px; }

/* ── Responsive (mirrors Legacy's own exec-* breakpoints) ── */
@media (max-width: 1024px) {
    .maint-page .exec-card.view-card .exec-body { grid-template-columns: 1fr; }
    .maint-page .exec-hd { padding: 14px 16px; }
    .maint-page .exec-actions-bar { padding: 8px 16px; gap: 5px; }
    .maint-page .exec-body { padding: 14px 16px; }
    .maint-page .exec-footer { padding: 12px 16px; }
    .maint-page .exec-tabs-nav { padding: 0 12px; }
}
@media (max-width: 768px) {
    .maint-page .exec-hd { padding: 12px 14px; gap: 8px; }
    .maint-page .exec-hd-title { font-size: 13px; }
    .maint-page .exec-hd-meta { font-size: 10.5px; }
    .maint-page .exec-view-toggle { display: none; }
    .maint-page .exec-actions-bar { padding: 7px 12px; gap: 4px; }
    .maint-page .exec-wa-btn span, .maint-page .exec-print-btn span { display: none; }
    .maint-page .exec-wa-btn, .maint-page .exec-print-btn { padding: 7px 9px; }
    .maint-page .exec-body { padding: 12px 12px; }
    .maint-page .exec-footer { padding: 10px 12px; }
    .maint-page .exec-fields-row, .maint-page .exec-mini-grid { grid-template-columns: 1fr; }
    .maint-page .exec-info-grid { grid-template-columns: 1fr; }
    .maint-page .exec-tab-btn { padding: 10px 12px; font-size: 12px; }
    .maint-page .exec-modal-dialog { width: calc(96 * var(--vw)) !important; height: calc(92 * var(--vh)) !important; }
    .maint-page .fuc-input-row { grid-template-columns: 1fr 1fr; }
    .maint-page .fuc-pay-btn { grid-column: span 2; }
}

/* ══════════════════════════════════════════════════════════
   RESERVED PARTS PANEL (قطع الغيار المحجوزة) — reuses the exec-*
   modal chrome/tabs/pane classes above verbatim (Legacy's own
   #parts-panel literally shares the same exec-card/exec-modal-dialog
   classes as the Execute panel) plus these panel-specific pieces.
   ══════════════════════════════════════════════════════════ */
@keyframes prp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.maint-page .prp-summary {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; margin-bottom: 12px;
    background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 12px;
    font-size: 12px; color: var(--m-text-sub); font-weight: 700;
}
.maint-page .prp-summary b { color: var(--m-text); font-weight: 800; }
.maint-page .prp-summary .prp-sep { opacity: .4; }

.maint-page .badge.b-po-draft { background: rgba(var(--th-n-400-rgb),.12); color: var(--th-n-400); border-color: rgba(var(--th-n-400-rgb),.25); }
.maint-page .badge.b-po-draft::before { background: var(--th-n-400); }
.maint-page .badge.b-po-pending { background: rgba(251,191,36,.12); color: #fbbf24; border-color: rgba(251,191,36,.25); }
.maint-page .badge.b-po-pending::before { background: #fbbf24; }
.maint-page .badge.b-po-ordered { background: rgba(96,165,250,.12); color: #60a5fa; border-color: rgba(96,165,250,.25); }
.maint-page .badge.b-po-ordered::before { background: #60a5fa; animation: prp-blink 1.2s infinite; }
.maint-page .badge.b-po-partial { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(16,185,129,.25); }
.maint-page .badge.b-po-partial::before { background: #34d399; }

.maint-page .prp-device-link { display: flex; flex-direction: column; gap: 1px; }
.maint-page .prp-device-link .prp-wo { font-size: 11px; font-weight: 800; color: var(--m-accent); }
.maint-page .prp-device-link .prp-dev { font-size: 11.5px; color: var(--m-text); }
.maint-page .prp-device-link .prp-cust { font-size: 10.5px; color: var(--m-text-muted); }

.maint-page .prp-search-wrap { margin-bottom: 12px; }

.maint-page .prp-deduct-btn {
    padding: 5px 12px; height: 28px;
    background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); border-radius: 8px; cursor: pointer;
    font-size: 11.5px; font-weight: 800; color: #34d399; transition: all 170ms; white-space: nowrap;
}
.maint-page .prp-deduct-btn:hover:not(:disabled) { background: rgba(16,185,129,.22); }
.maint-page .prp-deduct-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 640px) {
    .maint-page #parts-panel .sl-table { display: block !important; }
    .maint-page #parts-panel .sl-table tbody tr td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
}

/* ══════════════════════════════════════════════════════════
   LOCK — Pattern Canvas + Lock-View popup (Lock phase, 2026-09-02).
   Ported from maintenance.css's own "Pattern Canvas" / "Lock View
   Popup" sections. Canvas classes (not the literal Legacy #ids —
   this is a reusable Blazor component, JS interop targets these
   classes) but pixel-identical sizing/colors/behavior.
   ══════════════════════════════════════════════════════════ */
.maint-page .pattern-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.maint-page .pattern-canvas-el {
    border-radius: 16px; border: 1.5px solid rgba(245,158,11,.3); background: rgba(0,0,0,.3);
    touch-action: none; cursor: crosshair; display: block; width: 280px; height: 280px;
}
[data-theme="light"] .maint-page .pattern-canvas-el { background: rgba(59,130,246,.04); border-color: rgba(59,130,246,.35); }
.maint-page .pattern-hint { font-size: 11.5px; color: var(--m-text-muted); font-weight: 600; text-align: center; }
.maint-page .btn-clear-pattern {
    padding: 6px 16px; border-radius: 8px; border: 1px solid var(--m-border); background: transparent;
    color: var(--m-text-muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .14s;
}
.maint-page .btn-clear-pattern:hover { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.25); }

.maint-page .lock-view-type { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--m-text-muted); text-align: center; margin-bottom: 16px; text-transform: uppercase; }
.maint-page .lock-view-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 8px; }
.maint-page .lock-view-chip {
    min-width: 36px; height: 46px; padding: 0 10px; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(245,158,11,.5); border-radius: 10px; background: rgba(245,158,11,.08); color: #fbbf24;
    font-size: 19px; font-weight: 900; font-family: 'Courier New', monospace; box-shadow: 0 2px 8px rgba(245,158,11,.12);
}
[data-theme="light"] .maint-page .lock-view-chip { color: #b45309; background: rgba(245,158,11,.10); }
.maint-page .lock-view-pattern-canvas-el { display: block; margin: 4px auto 8px; border-radius: 14px; background: rgba(245,158,11,.05); border: 1px solid rgba(245,158,11,.15); }
.maint-page .am-lock-btn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fbbf24; }

/* ══════════════════════════════════════════════════════════
   REJECT / RETURN MODAL (رفض/إرجاع) — ported from maintenance.css's
   own rr-* section (L4825-5378), its own distinct modal design (not a
   reuse of exec- or sub-modal- classes — Legacy itself gives this
   modal its own dedicated CSS family). Everything below traces to a specific
   selector in the real maintenance.css, nothing invented.
   ══════════════════════════════════════════════════════════ */
@keyframes rr-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rr-spin { to { transform: rotate(360deg); } }

.maint-page .rr-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9500; display: flex; align-items: center; justify-content: center; }
.maint-page .rr-dialog {
    background: var(--m-bg-card); border: 1px solid var(--m-card-border); border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
    width: 480px; max-width: calc(calc(100 * var(--vw)) - 32px); max-height: calc(calc(100 * var(--vh)) - 60px);
    display: flex; flex-direction: column; overflow: hidden;
}
[data-theme="light"] .maint-page .rr-dialog { background: rgba(255,255,255,.96); border-color: rgba(var(--th-n-900-rgb),.10); }

.maint-page .rr-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px 16px; border-bottom: 1px solid var(--m-border); flex-shrink: 0; }
.maint-page .rr-dialog.rr-mode-reject .rr-header { background: linear-gradient(135deg, rgba(239,68,68,.07) 0%, rgba(244,63,94,.04) 100%); }
.maint-page .rr-dialog.rr-mode-return .rr-header { background: linear-gradient(135deg, rgba(245,158,11,.07) 0%, rgba(251,191,36,.04) 100%); }
.maint-page .rr-header-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }
.maint-page .rr-mode-reject .rr-header-icon { background: rgba(239,68,68,.15); box-shadow: 0 6px 20px rgba(239,68,68,.2); }
.maint-page .rr-mode-return .rr-header-icon { background: rgba(245,158,11,.15); box-shadow: 0 6px 20px rgba(245,158,11,.2); }
.maint-page .rr-header-text { flex: 1; min-width: 0; }
.maint-page .rr-header-title { font-size: 17px; font-weight: 900; color: var(--m-text); line-height: 1.2; }
.maint-page .rr-mode-reject .rr-header-title { color: #fb7185; }
.maint-page .rr-mode-return .rr-header-title { color: #fbbf24; }
.maint-page .rr-header-sub { font-size: 12px; font-weight: 600; color: var(--m-text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maint-page .rr-close-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .15s; }
.maint-page .rr-close-btn svg { width: 15px; height: 15px; }
.maint-page .rr-close-btn:hover { background: rgba(239,68,68,.12); color: #fb7185; border-color: rgba(239,68,68,.35); }

.maint-page .rr-info-strip { display: flex; gap: 0; background: var(--m-bg-input); border-bottom: 1px solid var(--m-border); flex-shrink: 0; overflow-x: auto; }
[data-theme="light"] .maint-page .rr-info-strip { background: rgba(var(--th-n-900-rgb),.04); }
.maint-page .rr-info-cell { flex: 1; padding: 10px 16px; border-left: 1px solid var(--m-border); min-width: 0; }
.maint-page .rr-info-cell:last-child { border-left: none; }
.maint-page .rr-info-label { font-size: 9.5px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.maint-page .rr-info-val { font-size: 12.5px; font-weight: 800; color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maint-page .rr-wo { color: var(--th-accent-400); font-family: monospace; letter-spacing: .04em; }
.maint-page .rr-paid-val { color: #34d399; }

.maint-page .rr-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.maint-page .rr-warn-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.maint-page .rr-mode-reject .rr-warn-banner { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22); color: #fca5a5; }
.maint-page .rr-mode-return .rr-warn-banner { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.22); color: #fde68a; }
.maint-page .rr-warn-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

.maint-page .rr-section { background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.maint-page .rr-section-title { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; color: var(--m-text-sub); text-transform: uppercase; letter-spacing: .06em; }
.maint-page .rr-section-icon { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.maint-page .rr-section-icon svg { width: 13px; height: 13px; }

.maint-page .rr-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.maint-page .rr-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.maint-page .rr-toggle-check { display: none; }
.maint-page .rr-toggle-switch { width: 40px; height: 22px; background: var(--m-border); border-radius: 99px; position: relative; flex-shrink: 0; transition: background .18s; }
.maint-page .rr-toggle-switch::after { content: ''; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.maint-page .rr-toggle-check:checked + .rr-toggle-switch { background: #10b981; }
.maint-page .rr-toggle-check:checked + .rr-toggle-switch::after { transform: translateX(-18px); }
.maint-page .rr-toggle-text { font-size: 13px; font-weight: 700; color: var(--m-text); }
.maint-page .rr-refund-hint { font-size: 13px; font-weight: 900; color: #34d399; font-family: monospace; letter-spacing: .03em; }

.maint-page .rr-refund-details { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; border-top: 1px solid var(--m-border); animation: rr-fade-in .18s ease; }
.maint-page .rr-field-row { display: flex; flex-direction: column; gap: 6px; }
.maint-page .rr-field-label { font-size: 11px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 4px; }
.maint-page .rr-required { color: #fb7185; }
.maint-page .rr-amount-wrap { display: flex; align-items: center; gap: 0; border: 1px solid var(--m-border); border-radius: 10px; overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.maint-page .rr-amount-wrap:focus-within { border-color: var(--m-border-focus); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.1); }
.maint-page .rr-input-num { flex: 1; background: transparent; border: none; outline: none; font-size: 16px; font-weight: 900; color: var(--m-text); padding: 10px 14px; direction: ltr; text-align: left; }
.maint-page .rr-input-num::placeholder { color: var(--m-text-muted); font-weight: 600; font-size: 14px; }
.maint-page .rr-currency { padding: 0 14px; font-size: 12px; font-weight: 800; color: var(--m-text-muted); background: var(--m-bg-hover); border-right: 1px solid var(--m-border); height: 100%; display: flex; align-items: center; white-space: nowrap; }

.maint-page .rr-parts-hint { font-size: 10.5px; color: var(--m-text-muted); }
.maint-page .rr-parts-list { display: flex; flex-direction: column; gap: 8px; }
.maint-page .rr-part-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; background: var(--m-bg-hover); border: 1px solid var(--m-border); border-radius: 10px; padding: 8px 10px; }
.maint-page .rr-part-name { font-size: 12px; font-weight: 700; color: var(--m-text); }
.maint-page .rr-part-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.maint-page .rr-part-choice { background: var(--m-bg-input); border: 1.5px solid var(--m-border); color: var(--m-text-muted); font-size: 10.5px; font-weight: 700; border-radius: 7px; padding: 5px 9px; cursor: pointer; white-space: nowrap; }
.maint-page .rr-debt-choices.rr-part-choices, .maint-page .rr-shift-open-choices.rr-part-choices { gap: 8px; }
.maint-page .rr-debt-choices .rr-part-choice, .maint-page .rr-shift-open-choices .rr-part-choice { white-space: normal; text-align: center; line-height: 1.35; flex: 1 1 calc(50% - 4px); }
.maint-page .rr-part-choice:hover { border-color: var(--m-accent); }
.maint-page .rr-part-choice.active { border-color: var(--m-accent); color: var(--m-accent); background: rgba(var(--th-accent-500-rgb),.12); }
.maint-page .rr-part-choice[data-choice="returned"].active { border-color: #34d399; color: #34d399; background: rgba(16,185,129,.12); }
.maint-page .rr-part-choice[data-choice="scrapped"].active { border-color: #f87171; color: #f87171; background: rgba(239,68,68,.12); }
.maint-page .rr-part-choice[data-choice="reverse"].active { border-color: #f87171; color: #f87171; background: rgba(239,68,68,.12); }

.maint-page .rr-debt-info { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.maint-page .rr-debt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.maint-page .rr-debt-row > span:first-child { color: var(--m-text-muted); font-weight: 600; }
.maint-page .rr-debt-row > span:last-child { color: var(--m-text); font-weight: 800; font-family: monospace; white-space: nowrap; }
.maint-page .rr-debt-warning { font-size: 10.5px; font-weight: 600; line-height: 1.6; color: #fde68a; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.22); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.maint-page .rr-debt-preview { font-size: 11px; font-weight: 700; color: var(--m-text-muted); margin-top: 8px; font-family: monospace; }
.maint-page .rr-shift-stats-note { font-size: 10.5px; font-weight: 600; line-height: 1.6; color: var(--m-text-muted); background: var(--m-bg-hover); border: 1px solid var(--m-border); border-radius: 8px; padding: 8px 10px; margin-top: 6px; }

.maint-page .rr-dest-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.maint-page .rr-dest-loading { display: flex; align-items: center; gap: 8px; padding: 12px; font-size: 12px; font-weight: 600; color: var(--m-text-muted); }
.maint-page .rr-spin { width: 15px; height: 15px; animation: rr-spin 1s linear infinite; }
.maint-page .rr-dest-empty { padding: 12px; text-align: center; font-size: 12px; font-weight: 600; color: var(--m-text-muted); }
.maint-page .rr-dest-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--m-border); border-radius: 10px; cursor: pointer; transition: all .15s; background: transparent; }
[data-theme="light"] .maint-page .rr-dest-item { background: rgba(var(--th-n-900-rgb),.03); }
.maint-page .rr-dest-item:hover { background: var(--m-bg-hover); border-color: rgba(255,255,255,.14); }
[data-theme="light"] .maint-page .rr-dest-item:hover { background: rgba(var(--th-accent-500-rgb),.06); }
.maint-page .rr-dest-item.selected { background: rgba(var(--th-accent-500-rgb),.12); border-color: rgba(var(--th-accent-500-rgb),.45); box-shadow: 0 0 0 2px rgba(var(--th-accent-500-rgb),.15); }
.maint-page .rr-dest-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.maint-page .rr-dest-name { font-size: 13px; font-weight: 700; color: var(--m-text); flex: 1; min-width: 0; }
.maint-page .rr-dest-sub { font-size: 10.5px; font-weight: 600; color: var(--m-text-muted); margin-top: 1px; }
.maint-page .rr-dest-balance { font-size: 12px; font-weight: 800; font-family: monospace; white-space: nowrap; }
.maint-page .rr-dest-check { width: 18px; height: 18px; border-radius: 50%; background: var(--m-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transition: opacity .15s, transform .15s; transform: scale(.6); }
.maint-page .rr-dest-item.selected .rr-dest-check { opacity: 1; transform: scale(1); }
.maint-page .rr-dest-check svg { width: 10px; height: 10px; color: #fff; }

.maint-page .rr-textarea { width: 100%; background: transparent; border: 1px solid var(--m-border); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--m-text); resize: vertical; min-height: 72px; outline: none; direction: rtl; line-height: 1.6; transition: border-color .18s, box-shadow .18s; }
.maint-page .rr-textarea::placeholder { color: var(--m-text-muted); font-weight: 500; }
.maint-page .rr-textarea:focus { border-color: var(--m-border-focus); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.1); }

.maint-page .rr-footer { display: flex; align-items: center; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--m-border); flex-shrink: 0; justify-content: flex-end; }
.maint-page .rr-btn { display: flex; align-items: center; gap: 7px; padding: 10px 22px; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer; transition: all .18s; border: 1px solid transparent; }
.maint-page .rr-btn-cancel { background: var(--m-bg-input); border-color: var(--m-border); color: var(--m-text-muted); }
.maint-page .rr-btn-cancel:hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .rr-btn-confirm { gap: 8px; padding: 10px 26px; }
.maint-page .rr-mode-reject .rr-btn-confirm { background: linear-gradient(135deg, #ef4444, #f43f5e); color: #fff; box-shadow: 0 6px 20px rgba(239,68,68,.3); }
.maint-page .rr-mode-reject .rr-btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(239,68,68,.4); }
.maint-page .rr-mode-return .rr-btn-confirm { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #1c1400; box-shadow: 0 6px 20px rgba(245,158,11,.3); }
.maint-page .rr-mode-return .rr-btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(245,158,11,.4); }
.maint-page .rr-btn-confirm:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.maint-page .rr-btn-confirm .rr-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: rr-spin 0.7s linear infinite; flex-shrink: 0; }

/* ── Delivery modal (mcd-* — Cash Destination Modal family, shared shape with
   Legacy's own deposit-destination picker; dlv-* — Delivery-specific extras) ── */
.maint-page .mcd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.maint-page .mcd-dialog {
    background: var(--m-bg-card); border: 1px solid var(--m-card-border); border-radius: 20px;
    width: 100%; max-width: 480px; box-shadow: 0 32px 80px rgba(0,0,0,.55);
    overflow: hidden; display: flex; flex-direction: column; max-height: calc(88 * var(--vh));
}
[data-theme="light"] .maint-page .mcd-dialog { background: rgba(255,255,255,.96); border-color: rgba(var(--th-n-900-rgb),.10); }

.maint-page .mcd-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--m-border); flex-shrink: 0; }
.maint-page .mcd-header-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.maint-page .mcd-header-title { font-size: 15px; font-weight: 800; color: var(--m-text); flex: 1; }
.maint-page .mcd-header-sub { font-size: 11px; color: var(--m-text-muted); margin-top: 2px; }
.maint-page .mcd-close { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--m-border); background: transparent; color: var(--m-text-muted); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .18s; flex-shrink: 0; }
.maint-page .mcd-close:hover { background: rgba(239,68,68,.12); color: #ef4444; border-color: rgba(239,68,68,.3); }

.maint-page .mcd-body { padding: 18px 20px; overflow-y: auto; flex: 1; }

.maint-page .mcd-summary { background: linear-gradient(135deg, rgba(var(--th-accent-500-rgb),.08), rgba(16,185,129,.05)); border: 1px solid rgba(var(--th-accent-500-rgb),.15); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.maint-page .mcd-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.maint-page .mcd-summary-row + .mcd-summary-row { border-top: 1px solid var(--m-border); }
.maint-page .mcd-summary-lbl { font-size: 12px; color: var(--m-text-muted); font-weight: 600; }
.maint-page .mcd-summary-val { font-size: 13px; font-weight: 800; color: var(--m-text); }
.maint-page .mcd-summary-row.highlight .mcd-summary-lbl, .maint-page .mcd-summary-row.highlight .mcd-summary-val { font-size: 15px; color: var(--m-accent); }
.maint-page .mcd-summary-row.paid .mcd-summary-val { color: var(--m-success); }
.maint-page .mcd-summary-row.due .mcd-summary-val { color: var(--m-warn); }

.maint-page .dlv-warranty-row { background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.2); border-radius: 10px; margin-top: 8px; padding: 10px 14px; }
.maint-page .dlv-warranty-val { color: var(--m-success); font-weight: 700; }
.maint-page .dlv-warranty-val.none { color: var(--m-text-muted); }

.maint-page .dlv-pay-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.maint-page .dlv-pay-tab { flex: 1; padding: 9px 6px; border-radius: 10px; border: 1.5px solid var(--m-border); background: transparent; color: var(--m-text-sub); font-family: Cairo, sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: .18s; }
.maint-page .dlv-pay-tab.active { border-color: var(--m-accent); background: rgba(var(--th-accent-500-rgb),.12); color: var(--m-accent); }

.maint-page .dlv-partial-wrap { margin-bottom: 14px; }
.maint-page .dlv-amount-row { display: flex; align-items: center; gap: 8px; background: var(--m-bg-input); border: 1.5px solid var(--m-border); border-radius: 10px; padding: 8px 12px; }
.maint-page .dlv-amount-input { flex: 1; background: transparent; border: none; outline: none; font-family: Cairo, sans-serif; font-size: 15px; font-weight: 700; color: var(--m-text); direction: rtl; text-align: right; }
.maint-page .dlv-amount-input::placeholder { color: var(--m-text-muted); }
.maint-page .dlv-currency { font-size: 12px; color: var(--m-text-muted); white-space: nowrap; }
.maint-page .dlv-partial-summary { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.2); font-size: 12px; }
.maint-page .dlv-ps-row { display: flex; justify-content: space-between; }
.maint-page .dlv-ps-row + .dlv-ps-row { margin-top: 3px; }
.maint-page .dlv-ps-row span:first-child { color: var(--m-text-sub); }
.maint-page .dlv-ps-now { font-weight: 700; color: var(--m-success); }
.maint-page .dlv-ps-debt { font-weight: 700; color: var(--m-warn); }

.maint-page .dlv-deferred-msg { margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); font-size: 12px; color: #fca5a5; font-weight: 600; line-height: 1.6; }
.maint-page .dlv-deferred-amount { color: #fb923c; }

.maint-page .dlv-zero-msg { padding: 10px 14px; border-radius: 10px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); font-size: 13px; color: #34d399; font-weight: 600; text-align: center; }

.maint-page .mcd-dest-label { font-size: 11px; font-weight: 700; color: var(--m-text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.maint-page .mcd-destinations { display: flex; flex-direction: column; gap: 7px; }
.maint-page .mcd-dest-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--m-border); background: var(--m-bg-input); cursor: pointer; transition: all .18s; user-select: none; }
.maint-page .mcd-dest-item:hover { border-color: rgba(var(--th-accent-500-rgb),.4); background: rgba(var(--th-accent-500-rgb),.07); transform: translateX(-2px); }
.maint-page .mcd-dest-item.selected { border-color: var(--m-accent); background: rgba(var(--th-accent-500-rgb),.1); box-shadow: 0 0 0 3px rgba(var(--th-accent-500-rgb),.15); }
.maint-page .mcd-dest-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; background: rgba(16,185,129,.13); }
.maint-page .mcd-dest-info { flex: 1; min-width: 0; }
.maint-page .mcd-dest-name { font-size: 13px; font-weight: 700; color: var(--m-text); }
.maint-page .mcd-dest-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--m-border); flex-shrink: 0; transition: all .18s; display: flex; align-items: center; justify-content: center; }
.maint-page .mcd-dest-item.selected .mcd-dest-radio { border-color: var(--m-accent); background: var(--m-accent); }
.maint-page .mcd-dest-item.selected .mcd-dest-radio::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.maint-page .mcd-no-dest { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; font-size: 12px; color: #fbbf24; font-weight: 600; }
.maint-page .mcd-empty { text-align: center; padding: 24px; color: var(--m-text-muted); font-size: 13px; }

.maint-page .mcd-footer { display: flex; gap: 9px; padding: 14px 20px 18px; border-top: 1px solid var(--m-border); flex-shrink: 0; }
.maint-page .mcd-btn-cancel { padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 700; border: 1px solid var(--m-border); background: transparent; color: var(--m-text-muted); cursor: pointer; transition: all .18s; font-family: Cairo, sans-serif; }
.maint-page .mcd-btn-cancel:hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .mcd-btn-confirm { flex: 1; padding: 11px 20px; border-radius: 10px; font-size: 13px; font-weight: 800; border: none; cursor: pointer; transition: all .2s; font-family: Cairo, sans-serif; display: flex; align-items: center; justify-content: center; gap: 7px; background: linear-gradient(135deg, #10b981, #34d399); color: #fff; box-shadow: 0 4px 16px rgba(16,185,129,.35); }
.maint-page .mcd-btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 7px 22px rgba(16,185,129,.45); }
.maint-page .mcd-btn-confirm:disabled { opacity: .55; cursor: not-allowed; transform: none; }

@media (max-width: 640px) {
    .maint-page .mcd-dialog { width: calc(calc(100 * var(--vw)) - 24px); max-height: calc(calc(100 * var(--vh)) - 40px); }
    .maint-page .rr-dialog { width: calc(calc(100 * var(--vw)) - 24px); max-height: calc(calc(100 * var(--vh)) - 40px); }
}

/* ── History screen (سجل الصيانات) — ported from repair-history.html, reusing every already-
   ported piece (kpi-strip/kpi-card, filter-bar/sl-search-wrap/filter-sel/date-input, sl-table-wrap/
   sl-table, badge.b-*, sl-footer/page-btn, m-modal-* for the detail modal shell) and adding only
   what's genuinely new to this screen below. ── */

/* 2 new KPI color variants History needs beyond Main Board's amber/blue/purple/green/gray/red */
.maint-page .kpi-card.c-violet::before { background: linear-gradient(90deg,var(--th-violet-500),var(--th-violet-400)); }
.maint-page .kpi-card.c-rose::before   { background: linear-gradient(90deg,#f43f5e,#fb7185); }
.maint-page .c-violet .kpi-icon  { background: rgba(var(--th-violet-500-rgb),0.12); color: var(--th-violet-400); }
.maint-page .c-rose   .kpi-icon  { background: rgba(244,63,94,0.12);  color: #fb7185; }
.maint-page .c-violet .kpi-value { color: var(--th-violet-400); }
.maint-page .c-rose   .kpi-value { color: #fb7185; }

/* Period chips bar (كل الوقت/اليوم/هذا الأسبوع/...) */
.maint-page .chips-bar { display: flex; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--m-border); flex-shrink: 0; flex-wrap: wrap; }
.maint-page .chip { display: flex; align-items: center; gap: 5px; padding: 5px 12px; background: none; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-family: Cairo, sans-serif; font-size: 12px; font-weight: 700; color: var(--m-text-muted); transition: all 170ms; white-space: nowrap; }
.maint-page .chip:hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .chip.active { background: rgba(var(--th-accent-500-rgb),.10); border-color: rgba(var(--th-accent-500-rgb),.3); color: var(--m-accent); }

/* WO number / customer / device table cells (distinct classes from Main Board's own .cell-* —
   History's table is a richer, wider report grid with its own avatar+2-line cells) */
.maint-page .wo-num { font-size: 12px; font-weight: 800; color: var(--th-accent-400); letter-spacing: .04em; font-family: monospace; }
.maint-page .avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; }
.maint-page .customer-cell { display: flex; align-items: center; gap: 9px; }
.maint-page .customer-name { font-size: 13px; font-weight: 800; color: var(--m-text); }
.maint-page .customer-phone { font-size: 11px; font-weight: 600; color: var(--m-text-muted); margin-top: 1px; direction: ltr; }
.maint-page .device-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.maint-page .device-icon svg { width: 15px; height: 15px; }
.maint-page .di-mobile { background: rgba(var(--th-accent-500-rgb),.15); color: var(--th-accent-400); }
.maint-page .di-generic { background: rgba(var(--th-n-400-rgb),.15); color: var(--th-n-400); }
.maint-page .di-laptop { background: rgba(14,165,233,.15);  color: #38bdf8; }
.maint-page .di-tablet { background: rgba(var(--th-accent2-500-rgb),.15);  color: var(--th-accent2-400); }
.maint-page .device-cell { display: flex; align-items: center; gap: 8px; }
.maint-page .device-model { font-size: 12px; font-weight: 700; color: var(--m-text-sub); margin-top: 1px; }

/* Duration / cost / tech / rating cells */
.maint-page .duration-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.maint-page .dur-fast   { background: rgba(16,185,129,0.1); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
.maint-page .dur-normal { background: rgba(59,130,246,0.1); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
.maint-page .dur-slow   { background: rgba(245,158,11,0.1); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.maint-page .dur-over   { background: rgba(239,68,68,0.1);  color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.maint-page .cost-val { font-size: 13px; font-weight: 900; color: var(--m-text); direction: ltr; display: inline-block; }
.maint-page .cost-paid    { font-size: 10px; font-weight: 700; color: #34d399; margin-top: 2px; }
.maint-page .cost-unpaid  { font-size: 10px; font-weight: 700; color: #fb7185; margin-top: 2px; }
.maint-page .cost-partial { font-size: 10px; font-weight: 700; color: #fbbf24; margin-top: 2px; }
.maint-page .cost-debt     { font-size: 10px; font-weight: 700; color: var(--th-violet-400); margin-top: 2px; }
.maint-page .tech-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: rgba(var(--th-accent-500-rgb),0.1); border: 1px solid rgba(var(--th-accent-500-rgb),0.2); font-size: 11px; font-weight: 800; color: var(--th-accent-300); }
.maint-page .stars { color: #fbbf24; font-size: 12px; letter-spacing: 1px; }
.maint-page .stars.no-rate { color: var(--m-text-muted); font-size: 11px; font-weight: 700; }

/* Row action button + empty-state + loading skeleton (History's own table needs all 3, none yet ported) */
.maint-page .row-acts { display: flex; gap: 4px; justify-content: flex-end; }
.maint-page .act-btn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--m-border); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--m-text-muted); transition: all .15s; }
.maint-page .act-btn:hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .act-btn.ab-violet:hover { background: rgba(var(--th-violet-500-rgb),.12); color: var(--th-violet-400); border-color: rgba(var(--th-violet-500-rgb),.3); }
.maint-page .act-btn svg { width: 13px; height: 13px; }
.maint-page .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 60px 20px; text-align: center; }
.maint-page .empty-state svg { width: 44px; height: 44px; color: var(--m-text-muted); opacity: .5; }
.maint-page .empty-state .et { font-size: 14px; font-weight: 800; color: var(--m-text-muted); }
.maint-page .empty-state .es { font-size: 12px; color: var(--m-text-muted); opacity: .7; }
.maint-page .sk-row td { padding: 10px 12px; }
.maint-page .sk-line { height: 10px; background: linear-gradient(90deg, var(--m-bg-input) 25%, var(--m-bg-hover) 50%, var(--m-bg-input) 75%); background-size: 400% 100%; border-radius: 6px; animation: hist-shimmer 1.4s ease infinite; }
@keyframes hist-shimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }
.maint-page .sk-line.w30{width:30%} .maint-page .sk-line.w40{width:40%} .maint-page .sk-line.w50{width:50%}
.maint-page .sk-line.w60{width:60%} .maint-page .sk-line.w70{width:70%} .maint-page .sk-line.w80{width:80%}
.maint-page .sk-line.pill { width: 60px; height: 18px; border-radius: 12px; }

/* Detail modal's own inner content (History reuses Main Board's m-modal-* shell for the
   overlay/dialog/header/close/body — these are the info-grid/timeline/fin-box pieces that shell
   never needed before) */
.maint-page .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--m-border); border: 1px solid var(--m-border); border-radius: 12px; overflow: hidden; }
@media (max-width: 600px) { .maint-page .info-grid { grid-template-columns: 1fr 1fr; } }
.maint-page .info-cell { background: var(--m-bg-card); padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px; }
.maint-page .info-cell-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.maint-page .info-cell-icon svg { width: 15px; height: 15px; }
.maint-page .ic-violet { background: rgba(var(--th-violet-500-rgb),.12); color: var(--th-violet-400); }
.maint-page .ic-blue   { background: rgba(59,130,246,.12); color: #60a5fa; }
.maint-page .ic-amber  { background: rgba(245,158,11,.12); color: #fbbf24; }
.maint-page .ic-green  { background: rgba(16,185,129,.12); color: #34d399; }
.maint-page .ic-rose   { background: rgba(244,63,94,.12);  color: #fb7185; }
.maint-page .ic-teal   { background: rgba(6,182,212,.12);  color: #22d3ee; }
.maint-page .info-cell-label { font-size: 10px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.maint-page .info-cell-val   { font-size: 13px; font-weight: 800; color: var(--m-text); line-height: 1.4; }
.maint-page .info-cell-sub   { font-size: 11px; font-weight: 600; color: var(--m-text-muted); margin-top: 2px; }

.maint-page .section-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .08em; padding-bottom: 8px; border-bottom: 1px solid var(--m-border); }
.maint-page .section-title-icon { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.maint-page .section-title-icon svg { width: 11px; height: 11px; }
.maint-page .sti-violet { background: rgba(var(--th-violet-500-rgb),.15); color: var(--th-violet-400); }
.maint-page .sti-green  { background: rgba(16,185,129,.15); color: #34d399; }
.maint-page .sti-amber  { background: rgba(245,158,11,.15); color: #fbbf24; }

.maint-page .timeline { display: flex; flex-direction: column; gap: 0; }
.maint-page .tl-item { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.maint-page .tl-item:last-child { padding-bottom: 0; }
.maint-page .tl-dot-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 3px; }
.maint-page .tl-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; border: 2px solid; }
.maint-page .tl-line { width: 2px; flex: 1; min-height: 12px; margin-top: 4px; background: var(--m-border); border-radius: 1px; }
.maint-page .tl-item:last-child .tl-line { display: none; }
.maint-page .tl-dot.td-check    { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #fbbf24; }
.maint-page .tl-dot.td-progress { background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.4);  color: #60a5fa; }
.maint-page .tl-dot.td-parts    { background: rgba(var(--th-accent2-500-rgb),.12);  border-color: rgba(var(--th-accent2-500-rgb),.4);  color: var(--th-accent2-400); }
.maint-page .tl-dot.td-ready    { background: rgba(16,185,129,.12);  border-color: rgba(16,185,129,.4);  color: #34d399; }
.maint-page .tl-dot.td-done     { background: rgba(var(--th-n-500-rgb),.12); border-color: rgba(var(--th-n-500-rgb),.4); color: var(--th-n-400); }
.maint-page .tl-dot.td-rejected { background: rgba(239,68,68,.12);   border-color: rgba(239,68,68,.4);   color: #f87171; }
.maint-page .tl-content { flex: 1; min-width: 0; padding-top: 2px; }
.maint-page .tl-event { font-size: 13px; font-weight: 800; color: var(--m-text); }
.maint-page .tl-time  { font-size: 11px; font-weight: 600; color: var(--m-text-muted); margin-top: 2px; }
.maint-page .tl-note  { font-size: 12px; font-weight: 600; color: var(--m-text-sub); margin-top: 4px; background: var(--m-bg-input); border-radius: 8px; padding: 6px 10px; }

.maint-page .parts-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.maint-page .parts-mini-table thead th { padding: 8px 10px; text-align: right; font-size: 10px; font-weight: 800; color: var(--m-text-muted); border-bottom: 1px solid var(--m-border); background: var(--m-bg-input); text-transform: uppercase; letter-spacing: .05em; }
.maint-page .parts-mini-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--m-border); color: var(--m-text); font-weight: 600; }
.maint-page .parts-mini-table tbody tr:last-child td { border-bottom: none; }
.maint-page .part-type-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; }
.maint-page .pt-internal { background: rgba(var(--th-accent-500-rgb),0.1); color: var(--th-accent-400); border: 1px solid rgba(var(--th-accent-500-rgb),0.2); }
.maint-page .pt-external { background: rgba(245,158,11,0.1); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }

.maint-page .fin-box { background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(6,182,212,0.04)); border: 1px solid rgba(16,185,129,0.15); border-radius: 12px; padding: 14px 16px; }
.maint-page .fin-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--m-border); font-size: 13px; }
.maint-page .fin-row:last-child { border-bottom: none; padding-top: 8px; }
.maint-page .fin-row.fin-total { font-weight: 900; font-size: 15px; }
.maint-page .fin-label { color: var(--m-text-muted); font-weight: 700; }
.maint-page .fin-val   { color: var(--m-text); font-weight: 800; font-family: monospace; direction: ltr; }
.maint-page .fin-val.green  { color: #34d399; }
.maint-page .fin-val.red    { color: #f87171; }
.maint-page .fin-val.yellow { color: #fbbf24; }

/* History's own detail modal is a richer report (3-column info-grid, parts table, financial
   breakdown, timeline) than Main Board's compact action-grid detail — same m-modal-* chrome,
   just wider, matching Legacy's real detail-modal max-width (820px) instead of the 640px default. */
.maint-page .m-modal-dialog.hist-detail-dialog { width: min(820px, calc(96 * var(--vw))); }

/* WhatsApp bottom bar — visible-but-disabled, same as every other Maintenance sub-screen's WA
   buttons (real sending is a project-wide, already-disclosed deferred item, not new to History) */
.maint-page .modal-wa-bar { padding: 12px 16px 16px; border-top: 1px solid var(--m-border); background: rgba(37,211,102,0.025); flex-shrink: 0; }
.maint-page .wa-bar-title { font-size: 10px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.maint-page .wa-btns-row { display: flex; gap: 7px; flex-wrap: wrap; }
.maint-page .wa-btn { text-decoration: none; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1.5px solid rgba(37,211,102,0.2); background: rgba(37,211,102,0.06); color: #25d366; font-family: Cairo, sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
.maint-page .wa-btn:hover:not(:disabled) { background: rgba(37,211,102,.16); border-color: rgba(37,211,102,.45); transform: translateY(-1px); }
.maint-page .wa-btn:disabled { cursor: not-allowed; opacity: .6; }

@media (max-width: 600px) {
    .maint-page .m-card { background: var(--m-bg-card); border: 1px solid var(--m-card-border); border-radius: 13px; padding: 12px 13px; cursor: pointer; transition: border-color 170ms, background 170ms; position: relative; overflow: hidden; }
    .maint-page .mc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .maint-page .mc-info { flex: 1; min-width: 0; }
    .maint-page .mc-name { font-size: 13px; font-weight: 800; color: var(--m-text); }
    .maint-page .mc-phone { font-size: 11px; color: var(--m-text-muted); direction: ltr; }
    .maint-page .mc-wo { font-size: 10.5px; font-weight: 800; color: var(--th-accent-400); font-family: monospace; margin-top: 1px; }
    .maint-page .mc-device-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--m-text-sub); margin-bottom: 8px; flex-wrap: wrap; }
    .maint-page .mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
    .maint-page .mc-item-label { font-size: 9.5px; font-weight: 700; color: var(--m-text-muted); text-transform: uppercase; }
    .maint-page .mc-item-val { font-size: 12px; font-weight: 800; color: var(--m-text); margin-top: 2px; }
    .maint-page .mc-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--m-border); }
    .maint-page .mc-cost { font-size: 15px; font-weight: 900; color: var(--m-text); direction: ltr; }
    .maint-page .mc-cost-sub { font-size: 10px; font-weight: 700; margin-top: 1px; }
    .maint-page .mc-act-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--m-border); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--m-text-muted); }
    .maint-page .mc-act-btn svg { width: 14px; height: 14px; }
}

/* ============================================================
   إعدادات الصيانة (Maintenance Settings) — ported from Legacy's
   panels/maintenance/maintenance-settings.html (both inline
   <style> blocks). Legacy CSS variables mapped 1:1 onto this
   file's existing --m-* tokens (--accent -> --m-accent, --bg-card
   -> --m-bg-card, etc.) — same reasoning as the file header above:
   one shared token set for every Maintenance sub-screen, not a
   second competing variable system. Structural shell classes
   (layout/sidebar/nav/pane) prefixed "stg-" to stay unambiguous
   even though everything here is already scoped under .maint-page.
   ============================================================ */

/* ── Settings Layout ── */
.maint-page .stg-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .maint-page .stg-layout { grid-template-columns: 1fr; } }

.maint-page .stg-sidebar {
    background: var(--m-bg-card); border: 1px solid var(--m-border); border-radius: 18px;
    padding: 12px; backdrop-filter: blur(24px); box-shadow: var(--m-shadow-card, 0 8px 32px rgba(0,0,0,.3));
    position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px;
}
.maint-page .stg-nav-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px;
    cursor: pointer; color: var(--m-text-muted); font-size: 14px; font-weight: 700;
    transition: all .2s; border: 1px solid transparent; background: transparent; text-align: right; width: 100%;
}
.maint-page .stg-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform .2s; }
.maint-page .stg-nav-item:hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .stg-nav-item.active {
    background: linear-gradient(135deg, rgba(var(--th-accent-500-rgb),.1), rgba(var(--th-accent2-500-rgb),.05));
    border-color: rgba(var(--th-accent-500-rgb),.3); color: var(--m-accent); box-shadow: inset 3px 0 0 var(--m-accent);
}
.maint-page .stg-nav-item.active svg { transform: scale(1.1); color: var(--m-accent); }

.maint-page .stg-content { display: flex; flex-direction: column; gap: 20px; padding-bottom: 90px; }
.maint-page .stg-pane { display: none; animation: stgFadeIn .3s ease forwards; }
.maint-page .stg-pane.active { display: block; }
@keyframes stgFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Card ── */
.maint-page .card {
    background: var(--m-bg-card); border: 1px solid var(--m-border); border-radius: 18px;
    padding: 24px; backdrop-filter: blur(24px); margin-bottom: 20px;
}
.maint-page .card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.maint-page .card-header-icon {
    width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05); color: var(--m-text); flex-shrink: 0;
}
[data-theme="light"] .maint-page .card-header-icon { background: rgba(0,0,0,.05); }
.maint-page .ch-wa { background: rgba(37,211,102,.1); color: var(--m-wa); }
.maint-page .ch-fin { background: rgba(16,185,129,.1); color: var(--m-success); }
.maint-page .card-title { font-size: 16px; font-weight: 900; color: var(--m-text); }
.maint-page .card-subtitle { font-size: 12px; font-weight: 600; color: var(--m-text-muted); margin-top: 2px; }

/* ── Forms ── */
.maint-page .form-grid { display: grid; gap: 16px; }
.maint-page .form-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .maint-page .form-grid-2 { grid-template-columns: 1fr; } }
/* 2026-10-24 (owner) — «تسمية قطع الغيار» rows in maintenance settings */
.maint-page .form-grid-3 { display: grid; gap: 12px; grid-template-columns: 1fr 1.4fr 1.6fr; }
@media (max-width: 900px) { .maint-page .form-grid-3 { grid-template-columns: 1fr; } }
.maint-page .part-naming-row { margin: 0 18px 12px; padding: 12px 14px; border: 1px solid var(--m-border); border-radius: 12px; background: var(--m-bg-input); }
.maint-page .part-naming-name { font-size: 12.5px; color: var(--m-text-muted); margin-bottom: 8px; }
.maint-page .part-naming-name b { color: var(--m-text); font-size: 13.5px; }
.maint-page .part-naming-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.maint-page .btn-save-sm { padding: 7px 18px; border-radius: 9px; border: none; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.maint-page .btn-save-sm:disabled { opacity: .6; cursor: default; }
.maint-page .field { display: flex; flex-direction: column; gap: 6px; }
.maint-page .flabel { font-size: 13px; font-weight: 800; color: var(--m-text-sub); }
.maint-page .helper-text { font-size: 11px; color: var(--m-text-muted); font-weight: 600; margin-top: 4px; }

/* ── Toggle Switch ── */
.maint-page .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.maint-page .switch input { opacity: 0; width: 0; height: 0; }
.maint-page .switch .slider {
    position: absolute; cursor: pointer; inset: 0; background-color: rgba(255,255,255,.1);
    transition: .3s; border-radius: 24px; border: 1px solid var(--m-border);
}
[data-theme="light"] .maint-page .switch .slider { background-color: rgba(0,0,0,.1); }
.maint-page .switch .slider:before {
    position: absolute; content: ''; height: 18px; width: 18px; left: 2px; bottom: 2px;
    background-color: var(--m-text-sub); transition: .3s; border-radius: 50%;
}
.maint-page .switch input:checked + .slider { background-color: var(--m-accent); border-color: var(--m-accent); }
.maint-page .switch input:checked + .slider.wa-switch { background-color: var(--m-wa); border-color: var(--m-wa); }
.maint-page .switch input:checked + .slider:before { transform: translateX(19px); background-color: #fff; }

/* ── Financial Tab ── */
.maint-page .fin-section-title { font-size: 12px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
.maint-page .fin-toggle-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 12px; }
.maint-page .fin-toggle-card-sub { background: rgba(var(--th-accent-500-rgb),.04); border-color: rgba(var(--th-accent-500-rgb),.2); }
.maint-page .fin-subsection { background: rgba(var(--th-accent-500-rgb),.04); border: 1px solid rgba(var(--th-accent-500-rgb),.15); border-radius: 12px; padding: 16px; margin-bottom: 4px; }
.maint-page .toggle-info { flex: 1; min-width: 0; }
.maint-page .toggle-title { font-size: 13.5px; font-weight: 800; color: var(--m-text); margin-bottom: 3px; }
.maint-page .toggle-desc { font-size: 11.5px; font-weight: 600; color: var(--m-text-muted); line-height: 1.45; }
.maint-page .fin-radio-group { display: flex; flex-direction: column; gap: 8px; }
.maint-page .fin-radio-group-sm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) { .maint-page .fin-radio-group-sm { grid-template-columns: 1fr; } }
.maint-page .fin-radio-card {
    display: flex; align-items: center; padding: 14px 16px; border: 1.5px solid var(--m-border); border-radius: 12px;
    cursor: pointer; transition: border-color .15s, background .15s; background: var(--m-bg-input);
}
.maint-page .fin-radio-card:has(input:checked) { border-color: rgba(var(--th-accent-500-rgb),.55); background: rgba(var(--th-accent-500-rgb),.07); }
.maint-page .fin-radio-card input[type="radio"] { display: none; }
.maint-page .fin-radio-body { display: flex; align-items: center; gap: 14px; flex: 1; }
.maint-page .fin-radio-body-sm { gap: 10px; }
.maint-page .fin-radio-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.maint-page .fin-radio-icon svg { width: 18px; height: 18px; }
.maint-page .fin-radio-title { font-size: 13.5px; font-weight: 800; color: var(--m-text); margin-bottom: 3px; }
.maint-page .fin-radio-desc { font-size: 11.5px; font-weight: 600; color: var(--m-text-muted); line-height: 1.45; }
.maint-page .fin-radio-card:has(input:checked) .fin-radio-title { color: var(--th-accent-300); }

/* ── WhatsApp Tab ── */
.maint-page .wa-tab-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .maint-page .wa-tab-layout { grid-template-columns: 1fr; } }
.maint-page .wa-msg-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: rgba(0,0,0,.15); border-radius: 12px; margin-bottom: 16px; border: 1px solid var(--m-border); }
[data-theme="light"] .maint-page .wa-msg-tabs { background: rgba(0,0,0,.04); }
.maint-page .wa-msg-tab {
    flex: 1; min-width: 60px; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 6px; border-radius: 9px; cursor: pointer; border: 1px solid transparent;
    font-size: 11px; font-weight: 800; color: var(--m-text-muted); background: transparent; transition: all .2s; white-space: nowrap;
}
.maint-page .wa-msg-tab svg { width: 16px; height: 16px; }
.maint-page .wa-msg-tab:hover { background: rgba(37,211,102,.06); color: var(--m-wa); }
.maint-page .wa-msg-tab.active { background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.35); color: var(--m-wa); box-shadow: 0 2px 8px rgba(37,211,102,.12); }
.maint-page .wa-tab-badge { width: 7px; height: 7px; border-radius: 50%; background: var(--m-text-muted); opacity: .4; transition: all .2s; }
.maint-page .wa-msg-tab.active .wa-tab-badge { background: var(--m-wa); opacity: 1; }
.maint-page .wa-msg-tab.tab-enabled .wa-tab-badge { background: var(--m-wa); opacity: .7; }
.maint-page .wa-block { border: 1px solid var(--m-border); border-radius: 12px; overflow: hidden; transition: border-color .2s; }
.maint-page .wa-block:focus-within { border-color: var(--m-wa); }
.maint-page .wa-block-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(37,211,102,.05); border-bottom: 1px solid var(--m-border); }
.maint-page .wa-block-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 900; color: var(--m-text); }
.maint-page .wa-block-title svg { width: 18px; height: 18px; color: var(--m-wa); }
.maint-page .wa-block-body { padding: 16px; }
.maint-page .wa-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.maint-page .wa-var-chip { padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--m-border); font-size: 11px; font-weight: 700; color: var(--m-text-muted); cursor: pointer; transition: all .15s; user-select: none; direction: ltr; }
[data-theme="light"] .maint-page .wa-var-chip { background: rgba(0,0,0,.03); }
.maint-page .wa-var-chip:hover { background: rgba(37,211,102,.1); color: var(--m-wa); border-color: rgba(37,211,102,.3); }
.maint-page .wa-var-chip-link { background: rgba(37,211,102,.08); border-color: rgba(37,211,102,.25); color: var(--m-wa); direction: rtl; }
.maint-page .wa-var-chip-link:hover { background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.5); }
.maint-page .wa-action-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(0,0,0,.06); border-bottom: 1px solid var(--m-border); font-size: 12px; font-weight: 700; color: var(--m-text-sub); }
[data-theme="light"] .maint-page .wa-action-row { background: rgba(0,0,0,.02); }
.maint-page .wa-action-label { flex-shrink: 0; }
.maint-page .wa-action-select { background: var(--m-bg-card); border: 1px solid var(--m-border); border-radius: 8px; padding: 6px 10px; color: var(--m-text); font-size: 12px; font-weight: 700; cursor: pointer; outline: none; flex: 1; }
.maint-page .wa-action-select:focus { border-color: var(--m-wa); }

/* WhatsApp phone-style preview */
.maint-page .wa-preview-card { position: sticky; top: 20px; background: #0d1f0f; border: 1.5px solid rgba(37,211,102,.22); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
[data-theme="light"] .maint-page .wa-preview-card { background: #e8f5e9; border-color: rgba(37,211,102,.35); }
.maint-page .wa-preview-topbar { background: #1a2e1c; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
[data-theme="light"] .maint-page .wa-preview-topbar { background: #25d366; border-bottom-color: rgba(0,0,0,.08); }
.maint-page .wa-preview-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #25d366, #128c44); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.maint-page .wa-preview-contact { flex: 1; }
.maint-page .wa-preview-contact-name { font-size: 13px; font-weight: 900; color: #fff; line-height: 1.2; }
.maint-page .wa-preview-contact-status { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.6); }
.maint-page .wa-preview-chat { min-height: 200px; padding: 16px 12px; background: #0b1a0d; }
[data-theme="light"] .maint-page .wa-preview-chat { background: #e5ddd5; }
.maint-page .wa-preview-bubble-wrap { display: flex; justify-content: flex-end; animation: stgBubblePop .4s ease both; }
@keyframes stgBubblePop { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: none; } }
.maint-page .wa-preview-bubble { max-width: 88%; background: #1e4d23; border-radius: 14px 4px 14px 14px; padding: 10px 14px 22px; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
[data-theme="light"] .maint-page .wa-preview-bubble { background: #dcf8c6; }
.maint-page .wa-preview-text { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.92); white-space: pre-wrap; word-break: break-word; line-height: 1.65; direction: rtl; }
[data-theme="light"] .maint-page .wa-preview-text { color: #1a1a1a; }
.maint-page .wa-preview-footer { padding: 10px 14px; background: rgba(0,0,0,.25); border-top: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
[data-theme="light"] .maint-page .wa-preview-footer { background: rgba(0,0,0,.04); }
.maint-page .btn-test-wa { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; border: none; background: linear-gradient(135deg, #25d366, #128c44); color: #fff; font-size: 12px; font-weight: 900; cursor: not-allowed; opacity: .55; flex-shrink: 0; }
.maint-page .btn-test-wa svg { width: 15px; height: 15px; }
.maint-page .wa-preview-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 800; border: 1px solid; }
.maint-page .wa-preview-badge.auto { color: #25d366; border-color: rgba(37,211,102,.3); background: rgba(37,211,102,.08); }
.maint-page .wa-preview-badge.confirm { color: #f59e0b; border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.08); }
.maint-page .wa-preview-badge.manual { color: var(--th-n-500); border-color: rgba(var(--th-n-500-rgb),.3); background: rgba(var(--th-n-500-rgb),.08); }
.maint-page .wa-preview-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.maint-page .wa-preview-type-label { font-size: 10px; font-weight: 700; color: var(--m-text-muted); }
.maint-page .wa-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; gap: 8px; color: var(--m-text-muted); }
.maint-page .wa-preview-empty svg { width: 32px; height: 32px; opacity: .35; }
.maint-page .wa-deferred-note { font-size: 10.5px; font-weight: 700; color: var(--m-text-muted); text-align: center; padding: 6px 14px 12px; }

/* ── Devices/Faults/Services toolbar & grids (shared shell) ── */
.maint-page .dev-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.maint-page .dev-search-wrap { flex: 1; min-width: 200px; position: relative; display: flex; align-items: center; }
.maint-page .dev-search-wrap svg { position: absolute; right: 12px; width: 16px; height: 16px; color: var(--m-text-muted); pointer-events: none; }
.maint-page .dev-search-input { width: 100%; padding: 10px 40px 10px 14px; background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 10px; color: var(--m-text); font-size: 13px; font-weight: 600; outline: none; transition: border-color .2s; }
.maint-page .dev-search-input:focus { border-color: var(--m-border-focus); }
.maint-page .dev-btn-add-brand { display: flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; white-space: nowrap; transition: all .2s; }
.maint-page .dev-btn-add-brand svg { width: 16px; height: 16px; }
.maint-page .dev-btn-add-brand:hover { transform: translateY(-1px); }
.maint-page .dev-stats-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.maint-page .dev-stat-chip { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--m-bg-card); border: 1px solid var(--m-border); border-radius: 30px; }
.maint-page .dev-stat-val { font-size: 18px; font-weight: 900; color: var(--m-accent); }
.maint-page .dev-stat-val.fault-stat-cost { color: var(--m-success); }
.maint-page .dev-stat-lbl { font-size: 12px; font-weight: 700; color: var(--m-text-muted); }
.maint-page .fault-filter-select { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text); font-size: 13px; font-weight: 700; cursor: pointer; outline: none; min-width: 160px; }
.maint-page .dev-empty-state { grid-column: 1/-1; text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--m-text-muted); }
.maint-page .dev-empty-state svg { width: 40px; height: 40px; opacity: .3; }
.maint-page .dev-empty-title { font-size: 16px; font-weight: 900; opacity: .5; }
.maint-page .dev-empty-sub { font-size: 12px; font-weight: 700; opacity: .4; }

/* Devices & Brands — link-out card (V2 reuses /phones/models, no duplicate CRUD here) */
.maint-page .dev-link-card { display: flex; align-items: center; gap: 16px; padding: 22px; }
.maint-page .dev-link-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(var(--th-accent-500-rgb),.12); color: var(--m-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.maint-page .dev-link-icon svg { width: 26px; height: 26px; }
.maint-page .dev-link-title { font-size: 15px; font-weight: 900; color: var(--m-text); margin-bottom: 3px; }
.maint-page .dev-link-desc { font-size: 12.5px; font-weight: 600; color: var(--m-text-muted); line-height: 1.6; }
.maint-page .dev-link-btn { display: flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; white-space: nowrap; flex-shrink: 0; text-decoration: none; }
.maint-page .dev-link-btn:hover { transform: translateY(-1px); }
.maint-page .dev-link-btn svg { width: 15px; height: 15px; }

/* Devices & Brands (2026-10-16, owner: managed in Maintenance Settings like Legacy) — maintenance-settings.html
   .dev-brands-grid/.dev-brand-card/.dev-model-*/.dev-modal-* ported with the --m-* tokens (Legacy indigo -> theme accent). */
.maint-page .dev-brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
@media (max-width: 700px) { .maint-page .dev-brands-grid { grid-template-columns: 1fr; } }
.maint-page .dev-brand-card { background: var(--m-bg-card); border: 1px solid var(--m-border); border-radius: 18px; backdrop-filter: blur(20px); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.maint-page .dev-brand-card:hover { border-color: rgba(var(--th-accent-500-rgb),0.3); box-shadow: 0 8px 32px rgba(var(--th-accent-500-rgb),0.1); }
.maint-page .dev-brand-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--m-border); background: rgba(255,255,255,0.02); }
[data-theme="light"] .maint-page .dev-brand-header { background: rgba(0,0,0,0.02); }
.maint-page .dev-brand-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; background: rgba(var(--th-accent-500-rgb),0.1); border: 1px solid rgba(var(--th-accent-500-rgb),0.2); }
.maint-page .dev-brand-info { flex: 1; min-width: 0; }
.maint-page .dev-brand-name { font-size: 15px; font-weight: 900; color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maint-page .dev-brand-meta { font-size: 11px; font-weight: 700; color: var(--m-text-muted); margin-top: 2px; }
.maint-page .dev-brand-actions { display: flex; gap: 6px; flex-shrink: 0; }
.maint-page .dev-icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.maint-page .dev-icon-btn svg { width: 14px; height: 14px; }
.maint-page .dev-icon-btn:hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .dev-icon-btn.danger:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #f87171; }
.maint-page .dev-models-section { padding: 10px 14px 14px; }
.maint-page .dev-models-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.maint-page .dev-models-label { font-size: 10px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .8px; }
.maint-page .dev-btn-add-model { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(var(--th-accent-500-rgb),0.3); background: rgba(var(--th-accent-500-rgb),0.06); color: var(--m-accent); font-family: inherit; font-size: 11px; font-weight: 900; cursor: pointer; transition: all .15s; }
.maint-page .dev-btn-add-model svg { width: 12px; height: 12px; }
.maint-page .dev-btn-add-model:hover { background: rgba(var(--th-accent-500-rgb),0.12); border-color: rgba(var(--th-accent-500-rgb),0.5); }
.maint-page .dev-models-list { display: flex; flex-direction: column; gap: 5px; }
.maint-page .dev-model-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--m-bg-input); border: 1px solid transparent; transition: border-color .15s, background .15s; }
.maint-page .dev-model-item:hover { border-color: var(--m-border); background: var(--m-bg-hover); }
.maint-page .dev-model-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--m-accent); flex-shrink: 0; opacity: .6; }
.maint-page .dev-model-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--m-text); overflow-wrap: anywhere; }
.maint-page .dev-model-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.maint-page .dev-model-item:hover .dev-model-actions { opacity: 1; }
.maint-page .dev-model-btn { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; }
.maint-page .dev-model-btn svg { width: 11px; height: 11px; }
.maint-page .dev-model-btn:hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .dev-model-btn.danger:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #f87171; }
.maint-page .dev-models-empty { text-align: center; padding: 16px; font-size: 12px; font-weight: 700; color: var(--m-text-muted); font-style: italic; }
.maint-page .dev-no-results { grid-column: 1 / -1; text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--m-text-muted); }
.maint-page .dev-no-results svg { width: 40px; height: 40px; opacity: .3; }
.maint-page .dev-no-results-title { font-size: 16px; font-weight: 900; opacity: .5; }
.maint-page .dev-no-results-sub { font-size: 12px; font-weight: 700; opacity: .4; }
.maint-page .dev-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.maint-page .dev-modal { background: var(--th-n-900, #0e1a2e); border: 1px solid var(--m-border); border-radius: 18px; width: 100%; max-width: 440px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
[data-theme="light"] .maint-page .dev-modal { background: #ffffff; }
.maint-page .dev-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--m-border); }
.maint-page .dev-modal-title { font-size: 16px; font-weight: 900; color: var(--m-text); }
.maint-page .dev-modal-close { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.maint-page .dev-modal-close svg { width: 14px; height: 14px; }
.maint-page .dev-modal-close:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #f87171; }
.maint-page .dev-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.maint-page .dev-modal-footer { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--m-border); justify-content: flex-end; }
.maint-page .dev-modal-save { padding: 10px 28px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); color: #fff; font-family: inherit; font-size: 14px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 14px rgba(var(--th-accent-500-rgb),0.35); transition: all .2s; }
.maint-page .dev-modal-save:hover { transform: translateY(-1px); }
.maint-page .dev-modal-save:disabled { opacity: .6; cursor: wait; transform: none; }
.maint-page .dev-modal-cancel { padding: 10px 20px; border-radius: 10px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-muted); font-family: inherit; font-size: 14px; font-weight: 900; cursor: pointer; transition: all .15s; }
.maint-page .dev-modal-cancel:hover { background: var(--m-bg-hover); color: var(--m-text); }
/* Legacy phone rules (max-width 768): roomier tap targets; touch has no hover, so the model actions stay visible. */
@media (max-width: 768px), (pointer: coarse) {
    .maint-page .dev-brand-header { gap: 10px; }
    .maint-page .dev-brand-icon { width: 36px; height: 36px; border-radius: 9px; font-size: 18px; }
    .maint-page .dev-brand-name { font-size: 14px; }
    .maint-page .dev-model-actions { opacity: 1; }
    .maint-page .dev-model-btn { width: 34px; height: 34px; }
    .maint-page .dev-model-btn svg { width: 14px; height: 14px; }
}

/* Faults grid + card */
.maint-page .faults-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
@media (max-width: 700px) { .maint-page .faults-grid { grid-template-columns: 1fr; } }
.maint-page .fault-card { background: var(--m-bg-card); border: 1px solid var(--m-border); border-radius: 18px; padding: 16px; transition: border-color .2s; position: relative; overflow: hidden; }
.maint-page .fault-card::before { content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: var(--fault-color, var(--m-accent)); }
.maint-page .fault-card:hover { border-color: rgba(239,68,68,.3); }
.maint-page .fault-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.maint-page .fault-cat-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; border: 1px solid; flex-shrink: 0; margin-top: 2px; }
.maint-page .fault-cat-badge.hardware { color: #3b82f6; border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.08); }
.maint-page .fault-cat-badge.software { color: var(--th-violet-500); border-color: rgba(var(--th-violet-500-rgb),.3); background: rgba(var(--th-violet-500-rgb),.08); }
.maint-page .fault-cat-badge.other { color: var(--th-n-500); border-color: rgba(var(--th-n-500-rgb),.3); background: rgba(var(--th-n-500-rgb),.08); }
.maint-page .fault-title { font-size: 14px; font-weight: 900; color: var(--m-text); line-height: 1.3; flex: 1; }
.maint-page .fault-actions { display: flex; gap: 4px; flex-shrink: 0; }
.maint-page .fault-body { margin-bottom: 10px; }
.maint-page .fault-desc { font-size: 12.5px; font-weight: 600; color: var(--m-text-sub); line-height: 1.6; margin-bottom: 8px; }
.maint-page .fault-diagnosis-block { background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.2); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.maint-page .fault-diagnosis-label { font-size: 10px; font-weight: 900; color: var(--m-success); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .5px; }
.maint-page .fault-diagnosis-text { font-size: 12px; font-weight: 700; color: var(--m-text-sub); line-height: 1.5; }
.maint-page .fault-footer { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--m-border); flex-wrap: wrap; }
.maint-page .fault-cost-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: var(--m-success); font-size: 12px; font-weight: 900; }
.maint-page .fault-freq-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); color: var(--m-warn); font-size: 11px; font-weight: 800; }
/* 2026-10-16 — fault links (specialty / linked services / part category / usage) */
.maint-page .fault-link-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; background: rgba(var(--th-accent-500-rgb),.07); border: 1px solid rgba(var(--th-accent-500-rgb),.2); color: var(--m-accent); font-size: 11px; font-weight: 800; }
.maint-page .fault-usage-badge { background: var(--m-bg-input); border-color: var(--m-border); color: var(--m-text-muted); }
.maint-page .fault-links-box { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px dashed rgba(var(--th-accent-500-rgb),.35); border-radius: 12px; background: rgba(var(--th-accent-500-rgb),.03); }
.maint-page .fault-links-title { font-size: 13px; font-weight: 900; color: var(--m-text); }
.maint-page .fault-links-sub { font-size: 11px; font-weight: 700; color: var(--m-text-muted); }
.maint-page .fault-links-empty { font-size: 12px; color: var(--m-text-muted); padding: 6px 0; }
.maint-page .fault-svc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.maint-page .fault-svc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-muted); font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; transition: all .15s; }
.maint-page .fault-svc-chip:hover { border-color: rgba(var(--th-accent-500-rgb),.4); color: var(--m-text); }
.maint-page .fault-svc-chip.on { background: rgba(var(--th-accent-500-rgb),.12); border-color: rgba(var(--th-accent-500-rgb),.45); color: var(--m-accent); }
.maint-page .fault-svc-chip-price { font-size: 10.5px; opacity: .75; }

/* Services grid + card */
.maint-page .svc-cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.maint-page .svc-cat-tab { display: flex; align-items: center; gap: 5px; padding: 8px 16px; border-radius: 30px; border: 1px solid var(--m-border); background: var(--m-bg-card); color: var(--m-text-muted); font-size: 12.5px; font-weight: 800; cursor: pointer; transition: all .2s; }
.maint-page .svc-cat-tab:hover { border-color: rgba(var(--th-accent-500-rgb),.4); color: var(--m-text); }
.maint-page .svc-cat-tab.active { background: linear-gradient(135deg, rgba(var(--th-accent-500-rgb),.15), rgba(var(--th-accent2-500-rgb),.1)); border-color: rgba(var(--th-accent-500-rgb),.4); color: var(--m-accent); }
.maint-page .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
@media (max-width: 700px) { .maint-page .services-grid { grid-template-columns: 1fr; } }
.maint-page .svc-card { background: var(--m-bg-card); border: 1px solid var(--m-border); border-radius: 18px; padding: 14px 16px; transition: border-color .2s, transform .2s; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.maint-page .svc-card::before { content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: var(--m-accent); }
.maint-page .svc-card:hover { border-color: rgba(var(--th-accent-500-rgb),.3); transform: translateY(-2px); }
.maint-page .svc-card-header { display: flex; align-items: center; gap: 8px; }
.maint-page .svc-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: rgba(var(--th-accent-500-rgb),.08); border: 1px solid rgba(var(--th-accent-500-rgb),.15); }
.maint-page .svc-title { font-size: 13.5px; font-weight: 900; color: var(--m-text); flex: 1; line-height: 1.3; }
.maint-page .svc-actions { display: flex; gap: 4px; flex-shrink: 0; }
.maint-page .svc-desc { font-size: 12px; font-weight: 600; color: var(--m-text-muted); line-height: 1.55; margin-right: 44px; }
.maint-page .svc-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-right: 44px; }
.maint-page .svc-price-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: var(--m-success); font-size: 12px; font-weight: 900; }
.maint-page .svc-duration-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; background: rgba(6,182,212,.08); border: 1px solid rgba(6,182,212,.2); color: var(--m-info); font-size: 11px; font-weight: 800; }

/* Shared row action buttons (edit/delete) on Fault/Service cards */
.maint-page .stg-icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.maint-page .stg-icon-btn svg { width: 14px; height: 14px; }
.maint-page .stg-icon-btn:hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .stg-icon-btn.danger:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #f87171; }

/* ── Fault/Service Modal ── */
.maint-page .fault-modal-overlay, .maint-page .svc-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
    z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.maint-page .fault-modal, .maint-page .svc-modal {
    background: var(--m-bg-card, #0e1a2e); border: 1px solid var(--m-border); border-radius: 18px;
    width: 100%; max-width: 560px; max-height: calc(90 * var(--vh)); overflow-y: auto; box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.maint-page .svc-modal { max-width: 520px; }
.maint-page .fault-modal-header, .maint-page .svc-modal-header {
    display: flex; align-items: center; justify-content: space-between; padding: 18px 20px;
    border-bottom: 1px solid var(--m-border); position: sticky; top: 0; background: inherit; z-index: 1;
}
.maint-page .fault-modal-title, .maint-page .svc-modal-title { font-size: 16px; font-weight: 900; color: var(--m-text); }
.maint-page .fault-modal-body, .maint-page .svc-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.maint-page .fault-modal-footer, .maint-page .svc-modal-footer { padding: 16px 20px; border-top: 1px solid var(--m-border); display: flex; justify-content: flex-end; gap: 10px; }
.maint-page .fault-modal-save { padding: 10px 28px; border-radius: 10px; border: none; background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; }
.maint-page .svc-modal-save { padding: 10px 28px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; }
.maint-page .stg-modal-cancel { padding: 10px 20px; border-radius: 10px; border: 1px solid var(--m-border); background: var(--m-bg-input); color: var(--m-text-muted); font-size: 14px; font-weight: 900; cursor: pointer; }
.maint-page .stg-modal-cancel:hover { background: var(--m-bg-hover); color: var(--m-text); }
.maint-page .optional-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 10px; cursor: pointer; user-select: none; transition: border-color .2s; }
.maint-page .optional-toggle:hover { border-color: rgba(var(--th-accent-500-rgb),.4); }
.maint-page .optional-toggle-label { font-size: 13px; font-weight: 800; color: var(--m-text-sub); flex: 1; }
.maint-page .optional-section { display: none; animation: stgFadeIn .25s ease forwards; }
.maint-page .optional-section.visible { display: block; }

/* ── Fab Save Bar ── */
.maint-page .stg-fab-bar {
    position: sticky; bottom: 0; left: 0; right: 0; background: var(--m-bg-card);
    border-top: 1px solid var(--m-border); padding: 16px 24px; display: flex; justify-content: flex-end;
    align-items: center; backdrop-filter: blur(24px); z-index: 40; margin: 0 -24px -24px; border-radius: 0 0 14px 14px;
}
.maint-page .stg-fab-bar .btn-save { min-width: 180px; padding: 12px 32px; font-size: 15px; }

/* ── Mobile (≤ 640px) ── */
@media (max-width: 640px) {
    .maint-page .stg-layout { grid-template-columns: 1fr; gap: 0; }
    .maint-page .stg-sidebar {
        border-radius: 0; padding: 8px 10px; position: sticky; top: 0; z-index: 30;
        display: flex; flex-direction: row; gap: 4px; overflow-x: auto; overflow-y: hidden;
    }
    .maint-page .stg-nav-item { flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; font-size: 10.5px; white-space: nowrap; flex-shrink: 0; min-width: 58px; box-shadow: none; }
    .maint-page .stg-nav-item svg { width: 18px; height: 18px; }
    .maint-page .stg-nav-item.active { box-shadow: none; border-color: rgba(var(--th-accent-500-rgb),.35); }
    .maint-page .stg-content { padding: 0; gap: 12px; }
    .maint-page .card { padding: 16px; border-radius: 14px; margin-bottom: 12px; }
    .maint-page .form-grid-2 { grid-template-columns: 1fr; }
    .maint-page .wa-tab-layout { grid-template-columns: 1fr; gap: 12px; }
    .maint-page .wa-preview-card { position: static; }
    .maint-page .dev-toolbar { flex-wrap: wrap; gap: 8px; }
    .maint-page .dev-btn-add-brand { flex: 1; justify-content: center; }
    .maint-page .fault-filter-select { width: 100%; }
    .maint-page .faults-grid, .maint-page .services-grid { grid-template-columns: 1fr; }
    .maint-page .stg-fab-bar { padding: 12px 16px; margin: 0 -12px -12px; }
    .maint-page .stg-fab-bar .btn-save { width: 100%; }
}

/* ============================================================
   تقارير الصيانة (Maintenance Reports) — ported from Legacy's
   panels/maintenance/maint-reports.html. Every "rpt-" prefix here
   is deliberate: this page's own panel-card, panel-title, kpi
   (star), filter-bar, btn-primary and btn-outline names would
   collide with the DIFFERENT existing classes already in this
   file (the page-shell panel-header/panel-title, Settings' own
   card, etc.) — same defensive-prefixing reasoning already used
   for the "stg-" prefix.
   ============================================================ */

.maint-page .rpt-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.maint-page .rpt-filter-input {
    background: var(--m-bg-input); border: 1px solid var(--m-border); border-radius: 10px;
    padding: 8px 12px; color: var(--m-text); font-size: 12px; font-weight: 600; outline: none;
    transition: border-color .18s; direction: ltr; min-width: 130px; color-scheme: dark;
}
[data-theme="light"] .maint-page .rpt-filter-input { color-scheme: light; }
.maint-page .rpt-filter-input:focus { border-color: var(--m-border-focus); }
.maint-page .rpt-filter-label { font-size: 11px; color: var(--m-text-muted); font-weight: 700; white-space: nowrap; }
.maint-page .rpt-btn-primary {
    display: flex; align-items: center; gap: 7px; padding: 8px 18px;
    background: linear-gradient(135deg, var(--th-accent2-500), var(--th-accent-500)); border: none; border-radius: 10px;
    color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; transition: all .17s;
    box-shadow: 0 4px 14px rgba(var(--th-accent2-500-rgb),.3); white-space: nowrap;
}
.maint-page .rpt-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--th-accent2-500-rgb),.45); }
.maint-page .rpt-btn-primary svg { width: 15px; height: 15px; }
.maint-page .rpt-btn-outline {
    display: flex; align-items: center; gap: 7px; padding: 8px 16px; background: transparent;
    border: 1px solid var(--m-border); border-radius: 10px; color: var(--m-text-sub); font-size: 12px;
    font-weight: 700; cursor: pointer; transition: all .17s; white-space: nowrap;
}
.maint-page .rpt-btn-outline:hover { border-color: rgba(var(--th-accent-500-rgb),.4); color: var(--m-text); background: var(--m-bg-hover); }
.maint-page .rpt-btn-outline svg { width: 14px; height: 14px; }

.maint-page .rpt-briefing-bar {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, rgba(6,182,212,.10), rgba(var(--th-accent-500-rgb),.06));
    border: 1px solid rgba(6,182,212,.2); border-radius: 14px; padding: 14px 18px; margin: 14px 0;
}
.maint-page .rpt-briefing-ico { font-size: 20px; flex-shrink: 0; }
.maint-page .rpt-briefing-bar p { font-size: 13px; color: var(--m-text-sub); line-height: 1.7; margin: 0; }
.maint-page .rpt-briefing-bar p b { color: var(--m-text); font-weight: 800; }

.maint-page .rpt-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
.maint-page .rpt-kpi-card {
    background: var(--m-bg-card); border: 1px solid var(--m-card-border); border-radius: 14px;
    padding: 18px 20px; backdrop-filter: blur(20px); position: relative; overflow: hidden;
    transition: transform .2s, border-color .2s;
}
.maint-page .rpt-kpi-card:hover { transform: translateY(-2px); border-color: rgba(var(--th-accent-500-rgb),.25); }
.maint-page .rpt-kpi-card::before { content: ''; position: absolute; top: 0; right: 0; width: 60px; height: 60px; border-radius: 50%; filter: blur(30px); opacity: .5; }
.maint-page .rpt-kpi-card.purple::before { background: var(--th-accent2-500); } .maint-page .rpt-kpi-card.blue::before { background: #3b82f6; }
.maint-page .rpt-kpi-card.green::before  { background: #10b981; } .maint-page .rpt-kpi-card.amber::before { background: #f59e0b; }
.maint-page .rpt-kpi-card.rose::before   { background: #f43f5e; } .maint-page .rpt-kpi-card.cyan::before  { background: #06b6d4; }
.maint-page .rpt-kpi-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; position: relative; z-index: 1; }
.maint-page .rpt-kpi-icon svg { width: 18px; height: 18px; }
.maint-page .rpt-kpi-card.purple .rpt-kpi-icon { background: rgba(var(--th-accent2-500-rgb),.15); color: var(--th-accent2-400); }
.maint-page .rpt-kpi-card.blue   .rpt-kpi-icon { background: rgba(59,130,246,.15);  color: #60a5fa; }
.maint-page .rpt-kpi-card.green  .rpt-kpi-icon { background: rgba(16,185,129,.15);  color: #34d399; }
.maint-page .rpt-kpi-card.amber  .rpt-kpi-icon { background: rgba(245,158,11,.15);  color: #fbbf24; }
.maint-page .rpt-kpi-card.rose   .rpt-kpi-icon { background: rgba(244,63,94,.15);   color: #fb7185; }
.maint-page .rpt-kpi-card.cyan   .rpt-kpi-icon { background: rgba(6,182,212,.15);   color: #22d3ee; }
.maint-page .rpt-kpi-val { font-size: 26px; font-weight: 900; line-height: 1; margin-bottom: 5px; position: relative; z-index: 1; }
.maint-page .rpt-kpi-card.purple .rpt-kpi-val { color: var(--th-accent2-400); } .maint-page .rpt-kpi-card.blue .rpt-kpi-val { color: #60a5fa; }
.maint-page .rpt-kpi-card.green  .rpt-kpi-val { color: #34d399; } .maint-page .rpt-kpi-card.amber .rpt-kpi-val { color: #fbbf24; }
.maint-page .rpt-kpi-card.rose   .rpt-kpi-val { color: #fb7185; } .maint-page .rpt-kpi-card.cyan  .rpt-kpi-val { color: #22d3ee; }
.maint-page .rpt-kpi-label { font-size: 11.5px; font-weight: 700; color: var(--m-text-muted); position: relative; z-index: 1; }

.maint-page .rpt-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.maint-page .rpt-content-grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .maint-page .rpt-content-grid, .maint-page .rpt-content-grid-3 { grid-template-columns: 1fr; } }
.maint-page .rpt-side-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .maint-page .rpt-side-row { grid-template-columns: 1fr; } }

.maint-page .rpt-panel-card { background: var(--m-bg-card); border: 1px solid var(--m-card-border); border-radius: 14px; backdrop-filter: blur(20px); overflow: hidden; }
.maint-page .rpt-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--m-border); gap: 10px; }
.maint-page .rpt-panel-title { font-size: 13px; font-weight: 800; color: var(--m-text); display: flex; align-items: center; gap: 8px; }
.maint-page .rpt-panel-title-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--th-accent2-500), var(--th-accent-500)); flex-shrink: 0; }
.maint-page .rpt-panel-body { padding: 18px 20px; }

.maint-page .rpt-bar-chart { display: flex; flex-direction: column; gap: 12px; }
.maint-page .rpt-bar-row { display: grid; grid-template-columns: 100px 1fr 50px; align-items: center; gap: 10px; }
.maint-page .rpt-bar-label { font-size: 11.5px; font-weight: 700; color: var(--m-text-sub); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maint-page .rpt-bar-track { height: 8px; background: var(--m-bg-input); border-radius: 99px; overflow: hidden; }
.maint-page .rpt-bar-fill { height: 100%; border-radius: 99px; transition: width 1s ease; }
.maint-page .rpt-bar-value { font-size: 12px; font-weight: 800; color: var(--m-text); text-align: left; }

.maint-page .rpt-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 0; }
.maint-page .rpt-donut-svg-wrap { position: relative; width: 140px; height: 140px; }
.maint-page .rpt-donut-svg { transform: rotate(-90deg); }
.maint-page .rpt-donut-center-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.maint-page .rpt-donut-center-val { font-size: 22px; font-weight: 900; color: var(--m-text); }
.maint-page .rpt-donut-center-sub { font-size: 10px; font-weight: 700; color: var(--m-text-muted); }
.maint-page .rpt-donut-legend { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.maint-page .rpt-donut-legend-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 8px; background: var(--m-bg-input); }
.maint-page .rpt-donut-legend-left { display: flex; align-items: center; gap: 8px; }
.maint-page .rpt-donut-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.maint-page .rpt-donut-legend-name { font-size: 12px; font-weight: 700; color: var(--m-text-sub); }
.maint-page .rpt-donut-legend-val { font-size: 12px; font-weight: 900; color: var(--m-text); }
.maint-page .rpt-donut-legend-pct { font-size: 10px; font-weight: 700; color: var(--m-text-muted); }
.maint-page .rpt-donut-legend-sm { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--m-text-sub); }
.maint-page .rpt-donut-legend-sm span { display: inline-flex; align-items: center; gap: 6px; }
.maint-page .rpt-donut-legend-sm i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; display: inline-block; }

.maint-page .rpt-device-grid { display: flex; flex-direction: column; gap: 10px; }
.maint-page .rpt-device-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--m-bg-input); border-radius: 10px; border: 1px solid var(--m-border); }
.maint-page .rpt-device-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(var(--th-accent-500-rgb),.12); color: var(--th-accent-400); }
.maint-page .rpt-device-icon svg { width: 16px; height: 16px; }
.maint-page .rpt-device-info { flex: 1; min-width: 0; }
.maint-page .rpt-device-name { font-size: 12px; font-weight: 800; color: var(--m-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maint-page .rpt-device-bar-track { height: 4px; background: var(--m-bg-card); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.maint-page .rpt-device-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,var(--th-accent-500),var(--th-accent2-500)); }
.maint-page .rpt-device-count { font-size: 12px; font-weight: 900; color: var(--m-text); white-space: nowrap; }

.maint-page .rpt-trend-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; padding: 0 4px; }
.maint-page .rpt-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.maint-page .rpt-trend-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.maint-page .rpt-trend-bar { width: 70%; border-radius: 6px 6px 0 0; background: linear-gradient(to top, rgba(var(--th-accent-500-rgb),.6), rgba(var(--th-accent2-500-rgb),.8)); min-height: 4px; }
.maint-page .rpt-trend-bar.active { background: linear-gradient(to top, var(--th-accent-500), var(--th-accent2-500)); box-shadow: 0 0 12px rgba(var(--th-accent2-500-rgb),.4); }
.maint-page .rpt-trend-label { font-size: 10px; font-weight: 700; color: var(--m-text-muted); }

.maint-page .rpt-tech-table-wrap { overflow-x: auto; border-radius: 0 0 14px 14px; }
.maint-page .rpt-tech-table { width: 100%; border-collapse: collapse; }
.maint-page .rpt-tech-table th { font-size: 10.5px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .06em; padding: 0 12px 12px; text-align: right; border-bottom: 1px solid var(--m-border); white-space: nowrap; }
.maint-page .rpt-tech-table th:last-child { text-align: left; }
.maint-page .rpt-tech-table td { padding: 11px 12px; font-size: 12.5px; font-weight: 600; color: var(--m-text); border-bottom: 1px solid var(--m-border); vertical-align: middle; }
.maint-page .rpt-tech-table tr:last-child td { border-bottom: none; }
.maint-page .rpt-tech-table tr:hover td { background: var(--m-bg-hover); }
.maint-page .rpt-tech-avatar { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; flex-shrink: 0; }
.maint-page .rpt-tech-name-wrap { display: flex; align-items: center; gap: 10px; }
.maint-page .rpt-tech-name { font-size: 12.5px; font-weight: 800; }
.maint-page .rpt-tech-role { font-size: 10.5px; color: var(--m-text-muted); font-weight: 600; }
.maint-page .rpt-tech-radar-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--m-border); background: var(--m-bg-input); cursor: pointer; font-size: 13px; }
.maint-page .rpt-tech-radar-btn:hover { background: var(--m-bg-hover); }
.maint-page .rpt-summary-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--m-border); font-size: 12px; font-weight: 700; color: var(--m-text-muted); flex-wrap: wrap; gap: 8px; }
.maint-page .rpt-summary-row strong { color: var(--m-text); font-weight: 900; }

.maint-page .rpt-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; }
.maint-page .rpt-badge-green { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.2); }
.maint-page .rpt-badge-amber { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.2); }

.maint-page .rpt-feed-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.maint-page .rpt-feed-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--m-border); font-size: 12px; color: var(--m-text-sub); }
.maint-page .rpt-feed-row:last-child { border-bottom: none; }
.maint-page .rpt-feed-ico { font-size: 14px; flex-shrink: 0; }
.maint-page .rpt-feed-txt { flex: 1; }
.maint-page .rpt-feed-txt b { color: var(--m-text); }
.maint-page .rpt-feed-time { font-size: 10.5px; color: var(--m-text-muted); flex-shrink: 0; white-space: nowrap; }

.maint-page .rpt-ds-search-wrap { position: relative; margin-bottom: 4px; }
.maint-page .rpt-ds-search-input { width: 100%; height: 40px; border-radius: 10px; padding: 0 14px; background: var(--m-bg-input); border: 1px solid var(--m-card-border); color: var(--m-text); font-size: 13px; outline: none; }
.maint-page .rpt-ds-search-input:focus { border-color: var(--m-border-focus); }
.maint-page .rpt-ds-search-results { position: absolute; top: 46px; right: 0; left: 0; z-index: 20; background: var(--m-bg-card); backdrop-filter: blur(20px); border: 1px solid var(--m-card-border); border-radius: 10px; max-height: 240px; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.maint-page .rpt-ds-result { padding: 9px 14px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--m-border); color: var(--m-text-sub); display: flex; flex-direction: column; gap: 2px; }
.maint-page .rpt-ds-result:hover { background: var(--m-bg-hover); }
.maint-page .rpt-ds-result b { color: var(--m-text); }
.maint-page .rpt-ds-empty { padding: 14px; font-size: 12px; color: var(--m-text-muted); text-align: center; }

.maint-page .rpt-mr-modal-overlay { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.65); backdrop-filter: blur(10px); padding: 20px; }
.maint-page .rpt-mr-modal-box { background: var(--m-bg-card, var(--th-d-3)); border: 1px solid rgba(6,182,212,.2); border-radius: 18px; width: 100%; max-width: 480px; max-height: calc(82 * var(--vh)); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.maint-page .rpt-mr-modal-head { padding: 16px 20px; border-bottom: 1px solid var(--m-border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.maint-page .rpt-mr-modal-title { font-size: 14px; font-weight: 800; color: var(--m-text); }
.maint-page .rpt-mr-modal-sub { font-size: 11.5px; color: var(--m-text-muted); margin-top: 2px; }
.maint-page .rpt-mr-modal-close { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--m-card-border); background: var(--m-bg-input); color: var(--m-text-muted); cursor: pointer; flex-shrink: 0; }
.maint-page .rpt-mr-modal-body { padding: 16px 20px; overflow-y: auto; }

.maint-page .rpt-ds-cycle { border-right: 2px solid var(--m-border); padding: 4px 16px 16px 0; margin-right: 6px; position: relative; }
.maint-page .rpt-ds-cycle:last-child { border-color: transparent; }
.maint-page .rpt-ds-cycle-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.maint-page .rpt-ds-cycle-num { font-size: 12px; font-weight: 800; color: var(--m-text); }
.maint-page .rpt-ds-cycle-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m-text-muted); }
.maint-page .rpt-ds-cycle-dot.done { background: #34d399; }
.maint-page .rpt-ds-cycle-dot.bad  { background: #fb7185; }
.maint-page .rpt-ds-cycle-dot.now  { background: #fbbf24; }
.maint-page .rpt-ds-cycle-status { font-size: 11px; color: var(--m-text-sub); font-weight: 700; }
.maint-page .rpt-ds-cycle-body { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--m-text-muted); }
.maint-page .rpt-ds-reason { color: #fb7185; }

.maint-page .rpt-radar-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.maint-page .rpt-radar-stat { background: var(--m-bg-input); border: 1px solid var(--m-card-border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.maint-page .rpt-radar-stat span { font-size: 10px; color: var(--m-text-muted); }
.maint-page .rpt-radar-stat b { font-size: 14px; color: var(--m-text); }

.maint-page .rpt-wait-widget { display: flex; align-items: center; gap: 14px; }
.maint-page .rpt-wait-badge { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--m-warn); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--m-warn); flex-shrink: 0; }
.maint-page .rpt-wait-badge b { font-size: 18px; line-height: 1; }
.maint-page .rpt-wait-badge span { font-size: 9px; }
.maint-page .rpt-wait-txt { font-size: 12.5px; color: var(--m-text-sub); line-height: 1.6; }
.maint-page .rpt-fate-widget { display: flex; align-items: center; gap: 16px; }

.maint-page .rpt-heat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (max-width: 500px) { .maint-page .rpt-heat-grid { grid-template-columns: repeat(4, 1fr); } }
.maint-page .rpt-heat-cell { aspect-ratio: 1; border-radius: 8px; background: #06b6d4; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.maint-page .rpt-heat-cell span { font-size: 9.5px; font-weight: 700; }
.maint-page .rpt-heat-cell b { font-size: 13px; font-weight: 900; }

.maint-page .rpt-alert-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--m-bg-input); border: 1px solid var(--m-card-border); font-size: 12px; color: var(--m-text-sub); margin-bottom: 7px; }
.maint-page .rpt-alert-row:last-child { margin-bottom: 0; }
.maint-page .rpt-alert-ico { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.maint-page .rpt-alert-ico.w { background: rgba(245,158,11,.18); color: #fbbf24; }
.maint-page .rpt-alert-ico.b { background: rgba(244,63,94,.18); color: #fb7185; }

.maint-page .rpt-aging-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--m-border); }
.maint-page .rpt-aging-row:last-child { border-bottom: none; }
.maint-page .rpt-aging-info { display: flex; flex-direction: column; gap: 2px; min-width: 110px; flex-shrink: 0; }
.maint-page .rpt-aging-info b { font-size: 12px; color: var(--m-text); }
.maint-page .rpt-aging-info span { font-size: 10.5px; color: var(--m-text-muted); }
.maint-page .rpt-aging-track { flex: 1; height: 7px; border-radius: 99px; background: var(--m-bg-input); overflow: hidden; }
.maint-page .rpt-aging-fill { height: 100%; border-radius: 99px; }
.maint-page .rpt-aging-fill.good { background: #34d399; } .maint-page .rpt-aging-fill.warn { background: #fbbf24; } .maint-page .rpt-aging-fill.bad { background: #fb7185; }
.maint-page .rpt-aging-days { font-size: 11.5px; font-weight: 800; flex-shrink: 0; width: 50px; text-align: left; }
.maint-page .rpt-aging-days.good { color: #34d399; } .maint-page .rpt-aging-days.warn { color: #fbbf24; } .maint-page .rpt-aging-days.bad { color: #fb7185; }

@media (max-width: 640px) {
    .maint-page .rpt-feed-time { display: none; }
    .maint-page .rpt-radar-stats { grid-template-columns: 1fr; }
    .maint-page .rpt-kpi-val { font-size: 22px; }
}

@media print {
    .maint-page .stg-sidebar, .maint-page .rpt-filter-bar .rpt-btn-outline, .maint-page .rpt-filter-bar .rpt-btn-primary { display: none !important; }

    /* Legacy's own print rules (maint-reports.html:1109-1147), missing here entirely before this —
       printing/exporting to PDF in dark mode came out dark: wasted ink or genuinely unreadable on
       paper. Forces the exact light-mode --m-* values regardless of the live [data-theme], same
       variable set [data-theme="light"] .maint-page already defines above. */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .maint-page, .maint-page[data-theme], html[data-theme] .maint-page {
        --m-bg-card:      #ffffff;
        --m-bg-input:      rgba(var(--th-n-900-rgb),0.04);
        --m-bg-hover:      transparent;
        --m-border:        rgba(var(--th-n-900-rgb),0.12);
        --m-border-focus:  rgba(var(--th-accent-500-rgb),0.4);
        --m-card-border:   rgba(var(--th-n-900-rgb),0.14);
        --m-text:          var(--th-n-800);
        --m-text-muted:    var(--th-n-500);
        --m-text-sub:      var(--th-n-600);
    }
    .maint-page { background: #fff !important; }
    .maint-page .rpt-panel-card, .maint-page .rpt-kpi-card {
        break-inside: avoid;
        box-shadow: none;
        border-color: #ddd;
    }
    .maint-page .rpt-feed-list { max-height: none; overflow: visible; }
}

/* ============================================================
   ACTION MODAL — ported VERBATIM from Legacy's maintenance.css
   L2023-2246 (owner's 2026-09-03 visual-regression report: the
   repair detail/action panel had drifted from Legacy — plain
   uncolored buttons, one generic disabled print button instead of
   3 distinct print actions, WhatsApp row missing entirely). Same
   --m-* token remap as the rest of this file; --ease-smooth/
   --ease-spring have no --m- equivalent so inlined as their real
   Legacy cubic-bezier values (maintenance.css L40-41), matching
   this file's own established substitution (see .exec-wa-confirm).
   ============================================================ */
.maint-page .action-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    opacity: 0; pointer-events: none;
    transition: opacity .25s cubic-bezier(.22,.61,.36,1);
}
.maint-page .action-modal-overlay.open { opacity: 1; pointer-events: all; }
.maint-page .action-modal {
    background: var(--m-bg-card); border: 1px solid var(--m-card-border);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
    backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
    /* 2026-10-16 (owner): sized to its content (was a fixed calc(60 * var(--vh)) that forced a scroll to reach the WhatsApp row despite free space). */
    width: 65%; max-width: none; height: auto; max-height: calc(92 * var(--vh));
    overflow-y: auto;
    transform: translateY(18px) scale(.97);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), width .3s cubic-bezier(.34,1.56,.64,1), height .3s cubic-bezier(.34,1.56,.64,1), border-radius .3s cubic-bezier(.34,1.56,.64,1);
}
.maint-page .action-modal.maximized { width: calc(96 * var(--vw)) !important; height: calc(96 * var(--vh)) !important; max-height: calc(96 * var(--vh)) !important; border-radius: 12px; }
[data-theme="light"] .maint-page .action-modal { box-shadow: 0 10px 40px rgba(30,60,120,0.12), 0 0 0 1px rgba(var(--th-n-900-rgb),0.05) inset; }
.maint-page .action-modal-overlay.open .action-modal { transform: translateY(0) scale(1); }

.maint-page .action-modal-header { display: flex; align-items: center; padding: 18px 20px 14px; border-bottom: 1px solid var(--m-border); gap: 10px; }
.maint-page .am-header-right { flex: 1; display: flex; align-items: center; }
.maint-page .am-header-center { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.maint-page .am-header-left { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.maint-page .action-modal-wo { font-size: 18px; font-weight: 900; color: var(--m-text); letter-spacing: -.3px; }
.maint-page .action-modal-status-badge-wrap { margin-top: 0; }
.maint-page .action-modal-close, .maint-page .action-modal-maximize {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--m-bg-input); border: 1px solid var(--m-border);
    color: var(--m-text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s; flex-shrink: 0;
}
.maint-page .action-modal-close svg, .maint-page .action-modal-maximize svg { width: 16px; height: 16px; }
.maint-page .action-modal-close:hover { background: rgba(239,68,68,.15); color: #f87171; }
.maint-page .action-modal-maximize:hover { background: rgba(59,130,246,.15); color: #60a5fa; }

.maint-page .action-info-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: 1px solid var(--m-border); }
@media (max-width: 600px) { .maint-page .action-info-strip { grid-template-columns: repeat(2, 1fr); } }
.maint-page .action-info-cell { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-left: 1px solid var(--m-border); }
.maint-page .action-info-cell:last-child { border-left: none; }
html[dir="rtl"] .maint-page .action-info-cell { border-left: none; border-right: 1px solid var(--m-border); }
html[dir="rtl"] .maint-page .action-info-cell:last-child { border-right: none; }
.maint-page .action-info-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.maint-page .action-info-icon svg { width: 16px; height: 16px; }
.maint-page .ai-blue   { background: rgba(59,130,246,.12);  color: #60a5fa; }
.maint-page .ai-violet { background: rgba(var(--th-violet-500-rgb),.12);  color: var(--th-violet-400); }
.maint-page .ai-amber  { background: rgba(245,158,11,.12);  color: #fbbf24; }
.maint-page .ai-green  { background: rgba(16,185,129,.12);  color: #34d399; }
.maint-page .action-info-label { font-size: 10px; font-weight: 700; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.maint-page .action-info-val { font-size: 13px; font-weight: 700; color: var(--m-text); line-height: 1.3; }
.maint-page .action-info-problem { font-size: 12px; color: var(--m-text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.maint-page .action-info-sub { font-size: 11px; color: var(--m-text-muted); font-weight: 600; margin-top: 2px; }

.maint-page .action-section-title { font-size: 10px; font-weight: 800; color: var(--m-text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 14px 20px 8px; }

.maint-page .action-btns-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 18px; }
@media (max-width: 500px) { .maint-page .action-btns-grid { grid-template-columns: repeat(2, 1fr); } }
.maint-page .action-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 8px 12px; border-radius: 14px; border: 1px solid var(--m-border);
    background: var(--m-bg-input); cursor: pointer;
    transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .15s, border-color .15s, box-shadow .15s;
    position: relative; overflow: hidden;
}
.maint-page .action-btn:disabled { cursor: not-allowed; opacity: .45; }
.maint-page .action-btn::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .2s; border-radius: 14px; }
.maint-page .action-btn:not(:disabled):hover { transform: translateY(-2px) scale(1.02); }
.maint-page .action-btn:not(:disabled):hover::before { opacity: 1; }
.maint-page .action-btn:not(:disabled):active { transform: scale(.97); }
.maint-page .action-btn-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.maint-page .action-btn-icon svg { width: 17px; height: 17px; }
.maint-page .action-btn-label { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.3; }

.maint-page .aa-blue   { --ab-color: #3b82f6; }
.maint-page .aa-blue::before   { background: linear-gradient(135deg, rgba(59,130,246,.1), transparent); }
.maint-page .aa-blue:not(:disabled):hover   { border-color: rgba(59,130,246,.4); box-shadow: 0 4px 16px rgba(59,130,246,.15); }
.maint-page .aa-blue   .action-btn-icon { background: rgba(59,130,246,.12); color: #60a5fa; }
.maint-page .aa-blue   .action-btn-label { color: #93c5fd; }
.maint-page .aa-violet { --ab-color: var(--th-violet-500); }
.maint-page .aa-violet::before { background: linear-gradient(135deg, rgba(var(--th-violet-500-rgb),.1), transparent); }
.maint-page .aa-violet:not(:disabled):hover { border-color: rgba(var(--th-violet-500-rgb),.4); box-shadow: 0 4px 16px rgba(var(--th-violet-500-rgb),.15); }
.maint-page .aa-violet .action-btn-icon { background: rgba(var(--th-violet-500-rgb),.12); color: var(--th-violet-400); }
.maint-page .aa-violet .action-btn-label { color: #c4b5fd; }
.maint-page .aa-green  { --ab-color: #10b981; }
.maint-page .aa-green::before  { background: linear-gradient(135deg, rgba(16,185,129,.1), transparent); }
.maint-page .aa-green:not(:disabled):hover  { border-color: rgba(16,185,129,.4); box-shadow: 0 4px 16px rgba(16,185,129,.15); }
.maint-page .aa-green  .action-btn-icon { background: rgba(16,185,129,.12); color: #34d399; }
.maint-page .aa-green  .action-btn-label { color: #6ee7b7; }
.maint-page .aa-amber  { --ab-color: #f59e0b; }
.maint-page .aa-amber::before  { background: linear-gradient(135deg, rgba(245,158,11,.1), transparent); }
.maint-page .aa-amber:not(:disabled):hover  { border-color: rgba(245,158,11,.4); box-shadow: 0 4px 16px rgba(245,158,11,.15); }
.maint-page .aa-amber  .action-btn-icon { background: rgba(245,158,11,.12); color: #fbbf24; }
.maint-page .aa-amber  .action-btn-label { color: #fcd34d; }
.maint-page .aa-rose   { --ab-color: #f43f5e; }
.maint-page .aa-rose::before   { background: linear-gradient(135deg, rgba(244,63,94,.1), transparent); }
.maint-page .aa-rose:not(:disabled):hover   { border-color: rgba(244,63,94,.4); box-shadow: 0 4px 16px rgba(244,63,94,.15); }
.maint-page .aa-rose   .action-btn-icon { background: rgba(244,63,94,.12); color: #fb7185; }
.maint-page .aa-rose   .action-btn-label { color: #fda4af; }
.maint-page .aa-danger { --ab-color: #ef4444; }
.maint-page .aa-danger::before { background: linear-gradient(135deg, rgba(239,68,68,.12), transparent); }
.maint-page .aa-danger:not(:disabled):hover { border-color: rgba(239,68,68,.45); box-shadow: 0 4px 16px rgba(239,68,68,.2); }
.maint-page .aa-danger .action-btn-icon { background: rgba(239,68,68,.12); color: #f87171; }
.maint-page .aa-danger .action-btn-label { color: #fca5a5; }

[data-theme="light"] .maint-page .action-btn-label { color: var(--m-text-sub); }
[data-theme="light"] .maint-page .aa-blue .action-btn-label   { color: #2563eb; }
[data-theme="light"] .maint-page .aa-violet .action-btn-label { color: var(--th-violet-600); }
[data-theme="light"] .maint-page .aa-green .action-btn-label  { color: #059669; }
[data-theme="light"] .maint-page .aa-amber .action-btn-label  { color: #d97706; }
[data-theme="light"] .maint-page .aa-rose .action-btn-label   { color: #e11d48; }
[data-theme="light"] .maint-page .aa-danger .action-btn-label { color: #dc2626; }

/* ============================================================
   STATUS COMBO — external quick status change, ported from
   Legacy's maintenance.css L2330-2426 (owner's 2026-09-03 report:
   V2 has no way to change a repair's status from outside the full
   Execute/Deliver/Reject workflows, unlike Legacy's status pill in
   the list row + inside the action modal header). V2 uses a
   click-anchored fixed panel (.scf-panel) instead of Legacy's
   body-delegated floating panel — same visual result (escapes the
   table's overflow-y:auto), simpler Blazor-native implementation
   (MouseEventArgs coordinates, no JS interop). ============================================================ */
.maint-page .status-combo-wrap { position: relative; display: inline-flex; align-items: center; }
.maint-page .status-combo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 8px 5px 6px; border-radius: 20px; border: 1.5px solid transparent;
    background: transparent; cursor: pointer; font-family: 'Cairo', sans-serif;
    font-size: 12px; font-weight: 700; transition: all .2s cubic-bezier(.22,.61,.36,1);
    white-space: nowrap; user-select: none; position: relative; z-index: 1;
}
.maint-page .status-combo-btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
.maint-page .status-combo-btn:active { transform: scale(.97); }
.maint-page .status-combo-btn .scb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; animation: m-pulse-dot 2s infinite; }
@keyframes m-pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(.85); } }
.maint-page .status-combo-btn .scb-chevron { width: 13px; height: 13px; opacity: .7; transition: transform .2s cubic-bezier(.22,.61,.36,1); flex-shrink: 0; }

.maint-page .status-locked-wrap { position: relative; display: inline-flex; align-items: center; }
.maint-page .status-locked-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 20px;
    border: 1.5px solid transparent; font-family: 'Cairo', sans-serif; font-size: 12px; font-weight: 700;
    white-space: nowrap; cursor: pointer; opacity: .92; background: none;
}
.maint-page .status-locked-badge .scb-dot { animation: none !important; }

.maint-page .scb-check   { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #fbbf24; }
.maint-page .scb-prog    { background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.35);  color: #60a5fa; }
.maint-page .scb-parts   { background: rgba(var(--th-violet-500-rgb),.12);  border-color: rgba(var(--th-violet-500-rgb),.35);  color: var(--th-violet-400); }
.maint-page .scb-ready   { background: rgba(16,185,129,.12);  border-color: rgba(16,185,129,.35);  color: #34d399; }
.maint-page .scb-done    { background: rgba(var(--th-n-500-rgb),.12); border-color: rgba(var(--th-n-500-rgb),.3);  color: var(--th-n-400); }
.maint-page .scb-rejected { background: rgba(239,68,68,.12);   border-color: rgba(239,68,68,.35);   color: #f87171; }
.maint-page .scb-dot-check  { background: #fbbf24; box-shadow: 0 0 5px rgba(251,191,36,.5); }
.maint-page .scb-dot-prog   { background: #60a5fa; box-shadow: 0 0 5px rgba(96,165,250,.5); }
.maint-page .scb-dot-parts  { background: var(--th-violet-400); box-shadow: 0 0 5px rgba(var(--th-violet-400-rgb),.5); }
.maint-page .scb-dot-ready  { background: #34d399; box-shadow: 0 0 5px rgba(52,211,153,.5); }
.maint-page .scb-dot-done     { background: var(--th-n-400); }
.maint-page .scb-dot-rejected { background: #f87171; box-shadow: 0 0 5px rgba(248,113,113,.5); }
[data-theme="light"] .maint-page .scb-check  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.6); color: #d97706; }
[data-theme="light"] .maint-page .scb-prog   { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.6); color: #0284c7; }
[data-theme="light"] .maint-page .scb-parts  { background: rgba(var(--th-violet-500-rgb),.12); border-color: rgba(var(--th-violet-500-rgb),.6); color: var(--th-violet-600); }
[data-theme="light"] .maint-page .scb-ready  { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.6); color: #059669; }
[data-theme="light"] .maint-page .scb-done     { background: rgba(var(--th-n-500-rgb),.12);border-color: rgba(var(--th-n-500-rgb),.5);color: #4b5563; }
[data-theme="light"] .maint-page .scb-rejected { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.6);  color: #dc2626; }

.maint-page .scf-overlay { position: fixed; inset: 0; z-index: 9998; background: transparent; }
.maint-page .scf-panel {
    position: fixed; z-index: 9999; min-width: 200px;
    background: #0f1729; border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06) inset;
    /* Safety net alongside OpenStatusMenuAsync's own viewport clamp (owner report, 2026-09-04) — if
       the JS viewport-size read ever fails and falls back to the wrong size, this still guarantees
       every option stays reachable via scroll instead of silently exceeding the screen. */
    max-height: min(320px, calc(calc(100 * var(--vh)) - 24px));
    overflow-y: auto;
}
[data-theme="light"] .maint-page .scf-panel { background: #fff; border-color: rgba(var(--th-n-900-rgb),.1); box-shadow: 0 8px 32px rgba(30,60,120,.12), 0 0 0 1px rgba(var(--th-n-900-rgb),.06) inset; }
.maint-page .scf-header { padding: 10px 12px 6px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--m-text-muted); border-bottom: 1px solid var(--m-border); }
.maint-page .scd-option {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px;
    background: none; border: none; cursor: pointer; font-family: 'Cairo', sans-serif;
    font-size: 12.5px; font-weight: 700; color: var(--m-text); text-align: right;
    transition: background .12s;
}
.maint-page .scd-option:hover { background: var(--m-bg-hover); }
.maint-page .scd-option.active { background: rgba(var(--th-accent-500-rgb),.08); }
.maint-page .scd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.maint-page .scd-emoji { font-size: 13px; flex-shrink: 0; }
.maint-page .scd-label { flex: 1; }
.maint-page .scd-check-icon { width: 14px; height: 14px; color: #34d399; flex-shrink: 0; opacity: 0; }
.maint-page .scd-option.active .scd-check-icon { opacity: 1; }

/* ============================================================
   Board parity audit fixes (2026-09-03) — search clear button,
   numbered-pagination ellipsis, and the 6-state due-date cell
   (Legacy: maintenance.js L1511-1613/1927-1946/4118-4131). Every
   due-date state carries its own Arabic text, not color alone.
   ============================================================ */
.maint-page .sl-search-clear {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 18px; height: 18px; border-radius: 50%; border: none; padding: 0;
    background: var(--m-bg-hover); color: var(--m-text-muted); cursor: pointer;
    transition: background .15s, color .15s;
}
.maint-page .sl-search-clear svg { width: 10px; height: 10px; }
.maint-page .sl-search-clear:hover { background: rgba(239,68,68,.15); color: #f87171; }

.maint-page .page-ellipsis { color: var(--m-text-muted); font-size: 12px; padding: 0 2px; user-select: none; }

.maint-page .due-cell { font-weight: 700; }
.maint-page .due-cell.due-overdue  { color: #f87171; }
.maint-page .due-cell.due-today    { color: #fbbf24; }
.maint-page .due-cell.due-tomorrow { color: #60a5fa; }
.maint-page .due-cell.due-soon     { color: #2dd4bf; }
.maint-page .due-cell.due-normal   { color: var(--m-text-sub); font-weight: 600; }
.maint-page .due-cell.due-delivered { color: var(--m-text-muted); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   RECEIVE MODAL — bottom sheet (Legacy's own comment, verbatim reasoning: "نطاق أوسع من باقي
   الـoverhaul عمدًا: 768px مش 640px، عشان ميحصلش قفزة شكل بين البريكبوينتين" — deliberately a WIDER
   breakpoint than the rest of the responsive pass, so there's no jarring shape-jump between the
   768px and 640px tiers). This closes the audit's worst-flagged gap: .recv-modal had ZERO @media
   override anywhere, fixed at calc(85 * var(--vw))/calc(92 * var(--vh)) at every width down to a phone.

   Deliberately placed at the VERY END of this file (2026-09-12): .recv-modal/.modal-overlay/
   .action-modal's own base (non-responsive) rules live much earlier in the file (~line 510-2234).
   Two equal-specificity, non-!important rules — the later one in FILE ORDER always wins regardless
   of which one has the @media condition; a first attempt at this same override placed near the top
   of the file was silently defeated by those later base rules for exactly that reason (confirmed
   live: computed width stayed at the old fixed calc(85 * var(--vw)) instead of switching to 100%). Appending here
   guarantees this always comes after every rule it needs to override.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .maint-page .modal-overlay { align-items: flex-end; padding: 0; }
    .maint-page .recv-modal { width: 100%; max-width: 100%; height: calc(96 * var(--vh)); border-radius: 20px 20px 0 0; }
    .maint-page .recv-modal::before {
        content: ''; display: block; width: 36px; height: 4px;
        background: rgba(255,255,255,.15); border-radius: 2px; margin: 10px auto -4px; flex-shrink: 0;
    }
    [data-theme="light"] .maint-page .recv-modal::before { background: rgba(59,130,246,.08); }
    .maint-page .recv-header { padding: 14px 16px 12px; }
    .maint-page .recv-body { padding: 14px 16px; gap: 14px; }
    .maint-page .recv-footer { padding: 12px 16px; }
    .maint-page .type-toggle { padding: 10px 16px; gap: 8px; }

    .maint-page .exec-modal-dialog { width: 100% !important; height: calc(100 * var(--vh)) !important; border-radius: 0 !important; }
    .maint-page .action-modal { width: 95%; max-width: none; }
}
@media (max-height: 500px) and (max-width: 900px) {
    .maint-page .recv-modal { height: calc(100 * var(--vh)); border-radius: 0; }
    .maint-page .exec-modal-dialog { height: calc(100 * var(--vh)) !important; border-radius: 0 !important; }
    .maint-page .action-modal { max-height: calc(95 * var(--vh)); }
}

/* ══════════════════════════════════════════════════════════════
   LockEditor (.sub-modal, shared with WarrantyModal) + ExecuteModal's own narrower-tier refinement
   — Legacy's real ≤640px block (maintenance.css line ~4078+): a nicer rounded-top/calc(95 * var(--vh)) variant of
   the exec-modal-dialog bottom sheet than the simpler ≤768px one above, plus .sub-modal/#pattern-
   canvas sizing so the lock-pattern canvas doesn't overflow a narrow sheet.
   Placed at file end for the same cascade-order reason as the block above.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .maint-page .exec-modal-dialog { height: calc(95 * var(--vh)) !important; border-radius: 20px 20px 0 0 !important; }
    .maint-page .sub-modal { max-width: calc(96 * var(--vw)); }
    .maint-page #pattern-canvas { width: 240px !important; height: 240px !important; }
}

/* ReservedPartsPanel (.parts-panel, Legacy: #parts-panel) — its 3 tabs each render their OWN
   .sl-table; Board's ≤640px .sl-table{display:none} rule above is scoped by .maint-page broadly
   (not to the Board specifically) and would otherwise silently hide these with no card-list
   fallback ever built for them. Legacy's own maintenance.css documents and fixes the exact same
   collision for its #parts-panel — ported verbatim: keep the table but reflow each row into
   stacked label/value pairs via the data-label attributes already present on every <td> in
   ReservedPartsPanel.razor. Safe to place anywhere in this file (not just at the end) — the
   .parts-panel prefix makes this selector strictly MORE specific than the plain .sl-table rule
   it needs to beat, so it wins regardless of source order. */
@media (max-width: 640px) {
    .maint-page .parts-panel .sl-table { display: block !important; }
    /* Owner-requested polish (2026-09-12): Legacy's own equivalent rule never hides its <thead>
       either (confirmed against maintenance.css directly), but leaving a raw <thead><tr><th> mixed
       into a display:block table looks genuinely unpolished (a stray, oddly-laid-out header row
       above the stacked cards) rather than matching any deliberate Legacy visual — hiding it here
       is a presentation refinement scoped entirely to .parts-panel, not a Legacy behavior port, and
       touches no other table in the system (Board/History keep their own separate rules untouched). */
    .maint-page .parts-panel .sl-table thead { display: none; }
    .maint-page .parts-panel .sl-table tbody tr td {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    }
    .maint-page .parts-panel .sl-table tbody tr td::before {
        content: attr(data-label); font-size: 10.5px; font-weight: 800; color: var(--m-text-muted);
        flex-shrink: 0; padding-top: 1px;
    }
}

/* ═══ 2026-10-23 — سجل الصيانات (/maintenance/log) on phones (owner: «مش مظبوط بنظام عرض الموبايل»): the filter bar becomes a
   tidy grid — search + camera on one line, each filter with its label above, the two dates side by side, no divider lines. ═══ */
/* tablets (and touch screens up to 1180px): search + camera, then the four filters on one line, then the two dates */
@media (min-width: 641px) and (max-width: 1180px) {
    .maint-page.rh-page .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .maint-page.rh-page .filter-divider, .maint-page.rh-page .date-sep { display: none; }
    .maint-page.rh-page .filter-bar > .sl-search-wrap,
    .maint-page.rh-page .filter-bar > .sl-search-wrap:focus-within { flex: 1 1 calc(100% - 64px); width: auto !important; min-width: 0; }
    .maint-page.rh-page .filter-bar > .sl-search-wrap + * { flex: 0 0 auto; }
    .maint-page.rh-page .filter-group { flex: 1 1 calc(25% - 6px); min-width: 0; }
    .maint-page.rh-page .filter-group .filter-sel { flex: 1 1 auto; width: auto; min-width: 0; }
    .maint-page.rh-page .date-input { flex: 1 1 calc(50% - 4px); width: auto; min-width: 0; }
}
@media (max-width: 640px) {
    .maint-page.rh-page .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
    .maint-page.rh-page .filter-divider, .maint-page.rh-page .date-sep { display: none; }
    /* line 1: the search box fills the line next to the camera button */
    .maint-page.rh-page .filter-bar > .sl-search-wrap,
    .maint-page.rh-page .filter-bar > .sl-search-wrap:focus-within { flex: 1 1 calc(100% - 64px); width: auto !important; min-width: 0; }
    .maint-page.rh-page .filter-bar > .sl-search-wrap + * { flex: 0 0 auto; }
    /* then two per line: each filter with its label above, then the two dates */
    .maint-page.rh-page .filter-group { flex: 1 1 calc(50% - 4px); min-width: 0; flex-direction: column; align-items: stretch; gap: 3px; }
    .maint-page.rh-page .filter-group .filter-sel { width: 100%; min-width: 0; }
    .maint-page.rh-page .date-input { flex: 1 1 calc(50% - 4px); width: auto; min-width: 0; }
}