/* ATHAR — black & white pass for all desktop tabs. Loaded last. Colors stay only on status chips, severity and compliance bands. */
html:root.mr-desktop-ui {
  --pg-fg: #0a0a0a; --pg-mu: #6b6b6b; --pg-ln: #e4e4e4; --pg-bg: #fff; --pg-sf: #f5f5f5; --pg-on: #0a0a0a; --pg-off: #cfcfcf; --pg-onf: #fff;
}
html:root.mr-desktop-ui[data-theme="dark"] {
  --pg-fg: #f2f2f2; --pg-mu: #a3a3a3; --pg-ln: #262626; --pg-bg: #0f0f0f; --pg-sf: #181818; --pg-on: #f2f2f2; --pg-off: #3a3a3a; --pg-onf: #0a0a0a;
}
/* page titles */
html:root.mr-desktop-ui .tab-content h1, html:root.mr-desktop-ui .tab-content h2,
html:root.mr-desktop-ui .tab-content [class*="__title"], html:root.mr-desktop-ui .tab-content [class*="page-title"] {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif; font-weight: 600; letter-spacing: -.01em;
}
/* flat cards / panels, 4px */
html:root.mr-desktop-ui .tab-content [class*="card"]:not([class*="__ico"]),
html:root.mr-desktop-ui .tab-content [class*="panel"], html:root.mr-desktop-ui .tab-content .glass,
html:root.mr-desktop-ui .tab-content [class*="metric"]:not([class*="__ico"]):not(i) {
  border-radius: 4px !important; box-shadow: none !important; backdrop-filter: none !important;
}
/* fields + primary actions, 4px */
html:root.mr-desktop-ui .tab-content input:not([type="checkbox"]):not([type="radio"]),
html:root.mr-desktop-ui .tab-content select, html:root.mr-desktop-ui .tab-content textarea,
html:root.mr-desktop-ui .tab-content [class*="cta"], html:root.mr-desktop-ui .tab-content .btn {
  border-radius: 4px !important;
}
html:root.mr-desktop-ui .tab-content [class*="cta"], html:root.mr-desktop-ui .tab-content .btn-primary {
  background: var(--pg-on) !important; color: var(--pg-onf) !important; box-shadow: none !important; border-color: var(--pg-on) !important;
}
html:root.mr-desktop-ui .tab-content [class*="cta"] * { color: inherit !important; }
/* neutral icon chips (stats, metrics) */
html:root.mr-desktop-ui .tab-content [class*="__ico"] { background: var(--pg-sf) !important; color: var(--pg-fg) !important; border-radius: 4px !important; }
html:root.mr-desktop-ui .tab-content [class*="__ico"] i { color: var(--pg-fg) !important; }
/* permission toggles: black / white instead of green */
html:root.mr-desktop-ui .mr-perm-toggle__track { background: var(--pg-off) !important; }
html:root.mr-desktop-ui .mr-perm-toggle input:checked + .mr-perm-toggle__track { background: var(--pg-on) !important; }
html:root.mr-desktop-ui .mr-perm-toggle__track::after, html:root.mr-desktop-ui .mr-perm-toggle__track::before { background-color: var(--pg-onf); }
html:root.mr-desktop-ui .mr-perm-toggle input:not(:checked) + .mr-perm-toggle__track::after { background-color: #fff; }
/* tables: hairlines, mono column heads */
html:root.mr-desktop-ui .tab-content table th { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 11px; letter-spacing: .04em; color: var(--pg-mu); }

/* ---- ticket details (side panel) ---- */
html:root.mr-desktop-ui #ticketModal .td-tab { color: var(--pg-mu) !important; border-radius: 4px !important; }
html:root.mr-desktop-ui #ticketModal .td-tab.active { background: var(--pg-on) !important; color: var(--pg-onf) !important; }
html:root.mr-desktop-ui #ticketModal .td-tab--needs-action { color: var(--pg-fg) !important; text-decoration: underline; text-underline-offset: 4px; }
html:root.mr-desktop-ui #ticketModal .td-tab.active * { color: inherit !important; }
html:root.mr-desktop-ui #ticketModal .rd-td-step__ico { background: var(--pg-sf) !important; color: var(--pg-fg) !important; border: 1px solid var(--pg-ln) !important; }
html:root.mr-desktop-ui #ticketModal .rd-td-step--done .rd-td-step__ico { background: var(--pg-on) !important; color: var(--pg-onf) !important; border-color: var(--pg-on) !important; }
html:root.mr-desktop-ui #ticketModal .rd-td-step--done .rd-td-step__ico i { color: var(--pg-onf) !important; }
html:root.mr-desktop-ui #ticketModal .rd-td-step__line { background: var(--pg-ln) !important; }
html:root.mr-desktop-ui #ticketModal .rd-td-step--done .rd-td-step__line { background: var(--pg-on) !important; }
html:root.mr-desktop-ui #ticketModal .rd-td-step--current .rd-td-step__ico, html:root.mr-desktop-ui #ticketModal .rd-td-step--active .rd-td-step__ico { background: var(--pg-bg) !important; color: var(--pg-fg) !important; border: 2px solid var(--pg-on) !important; }
html:root.mr-desktop-ui #ticketModal .td-admin-att-edit, html:root.mr-desktop-ui #ticketModal .log-compose-attach {
  background: transparent !important; color: var(--pg-fg) !important; border: 1px solid var(--pg-ln) !important; border-radius: 4px !important; padding: 6px 12px; cursor: pointer; font-family: inherit;
}
html:root.mr-desktop-ui #ticketModal .td-resp-action { border-radius: 4px !important; box-shadow: none !important; }
html:root.mr-desktop-ui #ticketModal .td-resp-action.btn-primary { background: var(--pg-on) !important; color: var(--pg-onf) !important; border-color: var(--pg-on) !important; }
html:root.mr-desktop-ui #ticketModal .td-resp-action.btn-warning { background: transparent !important; color: var(--pg-fg) !important; border: 1px solid var(--pg-fg) !important; }
html:root.mr-desktop-ui #ticketModal .td-resp-action.btn-danger { background: transparent !important; color: var(--pg-fg) !important; border: 1px solid var(--pg-ln) !important; }
html:root.mr-desktop-ui #ticketModal .td-tab--needs-action, html:root.mr-desktop-ui #ticketModal .td-tab--needs-action * { color: var(--pg-fg) !important; -webkit-text-fill-color: currentColor !important; }

/* ---- toasts: flat, hairline, severity only on the icon chip ---- */
html:root .mk-toast { border-radius: 4px !important; box-shadow: 0 6px 24px rgba(0,0,0,.12) !important; background: #fff !important; color: #0a0a0a !important; border: 1px solid #e4e4e4 !important; backdrop-filter: none !important; }
html:root[data-theme="dark"] .mk-toast { background: #151515 !important; color: #f2f2f2 !important; border-color: #303030 !important; }
html:root .mk-toast__icon { border-radius: 4px !important; }
html:root .mk-toast--success .mk-toast__icon { background: #DDF3E8 !important; color: #11623F !important; }
html:root .mk-toast--error .mk-toast__icon { background: #FDE3E0 !important; color: #A3261E !important; }
html:root .mk-toast--warning .mk-toast__icon, html:root .mk-toast--warn .mk-toast__icon { background: #FDF0CF !important; color: #7A4F00 !important; }
html:root .mk-toast--info .mk-toast__icon { background: #E4EEFC !important; color: #1B4F9E !important; }
html:root .mk-toast__text { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; }

/* ---- page canvas as in the design: #F4F4F4 / #0B0B0B, white / #151515 cards ---- */
html:root.mr-desktop-ui body, html:root.mr-desktop-ui .content, html:root.mr-desktop-ui .app-body { background: #F4F4F4 !important; }
html:root.mr-desktop-ui[data-theme="dark"] body, html:root.mr-desktop-ui[data-theme="dark"] .content, html:root.mr-desktop-ui[data-theme="dark"] .app-body { background: #0B0B0B !important; }
html:root.mr-desktop-ui .rd-h-theme { display: inline-flex; border: 1px solid var(--pg-ln); border-radius: 4px; overflow: hidden; background: var(--pg-bg); margin-inline-end: 8px; }
html:root.mr-desktop-ui .rd-h-theme button { width: 38px; height: 36px; border: 0; background: transparent; color: var(--pg-mu); cursor: pointer; }
html:root.mr-desktop-ui .rd-h-theme button.is-on { background: var(--pg-on); color: var(--pg-onf); }

/* ---- tickets: detail docked beside the list (as in the design), no scrim ---- */
html:root.athar-staging-redesign.mr-desktop-ui #ticketModal.modal.open { background: transparent !important; pointer-events: none !important; animation: none !important; }
html:root.athar-staging-redesign.mr-desktop-ui #ticketModal .modal-card.modal-detail.td-mob-sheet {
  pointer-events: auto; top: 12px !important; bottom: 12px !important; height: auto !important; inset-inline-end: 16px !important;
  border: 1px solid var(--pg-ln) !important; border-radius: 4px !important; background: var(--pg-bg) !important; width: 440px !important;
}
html:root.mr-desktop-ui:has(#ticketModal.open) #tab-workflow.tab-content:not([hidden]),
html:root.mr-desktop-ui:has(#ticketModal.open) #tab-workflow { padding-left: 480px !important; transition: padding .2s; }
html:root.mr-desktop-ui #ticketModal .rd-tk-close {
  position: absolute; inset-block-start: 14px; inset-inline-start: 14px; width: 30px; height: 30px; border: 1px solid var(--pg-ln); border-radius: 4px;
  background: var(--pg-bg); color: var(--pg-fg); cursor: pointer; z-index: 3;
}
html:root.mr-desktop-ui #ticketModal .rd-tk-close:hover { background: var(--pg-sf); }
/* ticket rows as cards on the list */
html:root.mr-desktop-ui #tab-workflow .wf-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html:root.mr-desktop-ui #tab-workflow table { background: var(--pg-bg); border: 1px solid var(--pg-ln); border-radius: 4px; overflow: hidden; }
html:root.mr-desktop-ui #tab-workflow tbody tr { cursor: pointer; }
html:root.mr-desktop-ui #tab-workflow tbody tr:hover td { background: var(--pg-sf); }
html:root.mr-desktop-ui #tab-workflow tbody tr.is-selected td { background: var(--pg-sf); box-shadow: inset 3px 0 0 var(--pg-on); }
html:root.mr-desktop-ui #ticketModal .rd-tk-close { inset-inline-start: auto; inset-inline-end: 14px; }
html:root.mr-desktop-ui #ticketModal .rd-td-hd__toolbar { padding-inline-end: 44px; }
html:root.mr-desktop-ui #tab-workflow td .badge, html:root.mr-desktop-ui #tab-workflow td [class*="status"], html:root.mr-desktop-ui #tab-workflow td [class*="badge"] { white-space: nowrap; }
html:root.mr-desktop-ui .rd-desk-ticket-badge { white-space: nowrap !important; width: auto !important; max-width: none !important; border-radius: 999px !important; padding: 3px 12px !important; }

/* ---- breaks ---- */
html:root.mr-desktop-ui #tab-breaks .breaks-panel, html:root.mr-desktop-ui #tab-breaks .wf-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html:root.mr-desktop-ui #tab-breaks .rd-break-card { border-radius: 4px !important; box-shadow: none !important; border: 1px solid var(--pg-ln) !important; background: var(--pg-bg) !important; }
html:root.mr-desktop-ui #tab-breaks .rd-break-card button { border-radius: 4px !important; box-shadow: none !important; }

/* ---- complaints: form docked beside the list ---- */
html:root.mr-desktop-ui #newComplaintModal.modal.open { position: fixed !important; top: var(--unified-topbar-h, 68px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: transparent !important; pointer-events: none !important; backdrop-filter: none !important; align-items: flex-start !important; justify-content: flex-start !important; padding: 12px 16px !important; z-index: 1100 !important; }
html:root.mr-desktop-ui #newComplaintModal .modal-card.cp-new-sheet { pointer-events: auto; position: relative !important; width: 440px !important; max-width: 440px !important; max-height: calc(100vh - 110px) !important; overflow: auto; margin: 0 !important; border: 1px solid var(--pg-ln) !important; border-radius: 4px !important; box-shadow: none !important; background: var(--pg-bg) !important; transform: none !important; animation: none !important; }
html:root.mr-desktop-ui:has(#newComplaintModal.open) #tab-complaints { padding-left: 480px !important; }
html:root.mr-desktop-ui #newComplaintModal .cp-new-close-btn, html:root.mr-desktop-ui #newComplaintModal .cp-new-cancel-btn { display: none !important; }
html:root.mr-desktop-ui #newComplaintModal .btn-primary { background: var(--pg-on) !important; color: var(--pg-onf) !important; border-radius: 4px !important; }
html:root.mr-desktop-ui #newComplaintModal .form-input { border-radius: 4px !important; }
html:root.mr-desktop-ui #newComplaintModal #cpKindOptions > *, html:root.mr-desktop-ui #newComplaintModal #cpCategoryOptions > * { border-radius: 4px !important; }
html:root.mr-desktop-ui #newComplaintModal #cpKindOptions > .active, html:root.mr-desktop-ui #newComplaintModal #cpKindOptions > [aria-pressed="true"], html:root.mr-desktop-ui #newComplaintModal #cpCategoryOptions > .active, html:root.mr-desktop-ui #newComplaintModal #cpCategoryOptions > [aria-pressed="true"] { background: var(--pg-on) !important; color: var(--pg-onf) !important; border-color: var(--pg-on) !important; }
html:root.mr-desktop-ui #newComplaintModal.modal.open { display: block !important; padding: 0 !important; }
html:root.mr-desktop-ui #newComplaintModal .modal-card.cp-new-sheet { position: absolute !important; left: 16px !important; right: auto !important; top: 12px !important; }
/* running / over-time break = black timer card (design) */
html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="active"], html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="overage"] { background: var(--pg-on) !important; color: var(--pg-onf) !important; border-color: var(--pg-on) !important; }
html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="active"] *, html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="overage"] * { color: var(--pg-onf) !important; }
html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="active"] [data-break-clock], html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="overage"] [data-break-clock] { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-weight: 500; }
html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="active"] svg circle:first-child, html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="overage"] svg circle:first-child { stroke: rgba(128,128,128,.35) !important; }
html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="active"] svg circle[data-break-ring-progress], html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="overage"] svg circle[data-break-ring-progress] { stroke: var(--pg-onf) !important; }
html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="active"] button, html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="overage"] button { background: var(--pg-onf) !important; color: var(--pg-on) !important; border: 0 !important; }
html:root.mr-desktop-ui #tab-breaks .rd-break-card[data-break-kind="active"] button * { color: var(--pg-on) !important; }

/* complaints (admin / internal audit): docked form replaces the top banner; page gets a standard heading */
html:root.mr-desktop-ui:has(#newComplaintModal.open) #tab-complaints .rd-cmpl-head{display:flex !important;flex-direction:column;gap:2px;align-items:flex-start;padding:0 0 4px;border:0 !important;background:transparent !important;box-shadow:none !important}
html:root.mr-desktop-ui:has(#newComplaintModal.open) #tab-complaints .rd-cmpl-head>*{display:none !important}
html:root.mr-desktop-ui:has(#newComplaintModal.open) #tab-complaints .rd-cmpl-head::before{content:"COMPLAINTS & SUGGESTIONS";font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:12px;letter-spacing:.14em;color:var(--pg-mu,#6b6b6b)}
html:root.mr-desktop-ui:has(#newComplaintModal.open) #tab-complaints .rd-cmpl-head::after{content:"الشكاوى والاقتراحات";font-size:32px;font-weight:600;color:var(--pg-fg,#0a0a0a);line-height:1.2;font-family:'Readex Pro','IBM Plex Sans Arabic',sans-serif}
html:root.mr-desktop-ui #newComplaintModal.modal.open{padding:var(--cmpl-dock-top,112px) 24px 12px 24px !important}
html:root.mr-desktop-ui #newComplaintModal .modal-card.cp-new-sheet{border-radius:6px !important}
html:root.mr-desktop-ui #newComplaintModal .btn-primary{box-shadow:none !important;height:46px;padding:0 22px;border-radius:4px !important}
html:root.mr-desktop-ui #newComplaintModal .modal-footer{display:flex;justify-content:stretch}
html:root.mr-desktop-ui #newComplaintModal .modal-footer .btn-primary{flex:1 1 auto}
html:root.mr-desktop-ui #newComplaintModal.modal.open{padding:112px 24px 12px 24px !important}
html:root.mr-desktop-ui:has(#newComplaintModal.open) #tab-complaints .rd-cmpl-head{align-self:stretch !important;width:100%;text-align:start;align-items:flex-start !important;justify-content:flex-start !important}
html:root.mr-desktop-ui:has(#newComplaintModal.open) #tab-complaints .rd-cmpl-head::before,html:root.mr-desktop-ui:has(#newComplaintModal.open) #tab-complaints .rd-cmpl-head::after{align-self:flex-start;text-align:start}