/* Break overtime reason dialog — black & white design (square, thin borders) */
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) { --ot-bg:#fff; --ot-fg:#0a0a0a; --ot-mu:#5f5f5f; --ot-ln:#e4e4e4; --ot-ct:#8a8a8a; }
html[data-theme="dark"]:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) { --ot-bg:#111; --ot-fg:#f2f2f2; --ot-mu:#a3a3a3; --ot-ln:#2a2a2a; --ot-ct:#6e6e6e; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-card { background: var(--ot-bg) !important; color: var(--ot-fg); border: 1px solid var(--ot-ln); border-radius: 6px !important; box-shadow: 0 24px 60px rgba(0,0,0,.28) !important; max-width: min(440px, calc(100vw - 32px)); overflow: hidden; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-header { padding: 18px 20px; border-bottom: 1px solid var(--ot-ln); flex-direction: row; align-items: center; background: transparent; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-header h3 { font-family: 'Readex Pro','IBM Plex Sans Arabic',sans-serif; font-size: 16px; font-weight: 600; color: var(--ot-fg); margin: 0; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-header .btn-ghost { width: 34px; height: 34px; min-width: 34px; padding: 0; border: 1px solid var(--ot-ln) !important; border-radius: 4px !important; background: transparent !important; color: var(--ot-fg); display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-body { padding: 18px 20px 6px; }
html:root #breakOvertimeModal #breakOtHint { color: var(--ot-mu) !important; font-size: 13px; line-height: 1.7; margin: 0 0 14px !important; padding: 10px 12px; border: 1px solid var(--ot-ln); border-inline-start: 3px solid var(--ot-fg); border-radius: 4px; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .form-label { color: var(--ot-fg); font-weight: 600; font-size: 13px; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .required-mark { color: var(--ot-fg) !important; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) textarea.form-input, html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) input.form-input, html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) select.form-select { border: 1px solid var(--ot-ct) !important; border-radius: 4px !important; background: var(--ot-bg) !important; color: var(--ot-fg) !important; box-shadow: none !important; padding: 12px; }
html:root :is(#breakOvertimeModal) textarea.form-input { min-height: 96px; }
html:root :is(#regionModal,#branchModal,#userModal,#violModal) :is(input.form-input,select.form-select) { height: 46px; padding: 0 12px; }
html:root :is(#regionModal,#branchModal,#userModal,#violModal) .form-group { margin-bottom: 16px; }
html:root :is(#regionModal,#branchModal,#userModal,#violModal) .form-group div[style*="font-size:11px"] { color: var(--ot-mu) !important; font-size: 12px !important; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) textarea.form-input:focus, html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) input.form-input:focus, html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) select.form-select:focus { outline: 2px solid var(--ot-fg); outline-offset: 0; border-color: var(--ot-fg) !important; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-footer { padding: 14px 20px 18px; border-top: 1px solid var(--ot-ln); display: flex; gap: 10px; flex-direction: row; background: transparent; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-footer .btn { height: 44px; padding: 0 20px; border-radius: 4px !important; font-weight: 600; box-shadow: none !important; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-footer .btn-primary { background: var(--ot-fg) !important; color: var(--ot-bg) !important; border: 1px solid var(--ot-fg) !important; order: -1; }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-footer .btn:not(.btn-primary) { background: transparent !important; color: var(--ot-fg) !important; border: 1px solid var(--ot-ct) !important; }
@media (max-width: 700px) { html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-card { border-radius: 12px 12px 0 0 !important; max-width: 100%; border-inline: 0; border-bottom: 0; } html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-footer { flex-direction: column; } }

html:root #userModal .modal-card { max-width: min(720px, calc(100vw - 32px)); max-height: 92vh; overflow-y: auto; }
html:root #userModal .form-grid { gap: 4px 18px; }
html:root #userModal .modal-footer .btn { flex: 0 0 auto; min-width: 150px; }
html:root #userModal .modal-header { position: sticky; top: 0; z-index: 2; background: var(--ot-bg); }
html:root #userModal .modal-footer { position: sticky; bottom: 0; background: var(--ot-bg); }
@media (max-width: 700px) { html:root #userModal .modal-footer .btn { flex: 1 1 0; } }
html:root :is(#breakOvertimeModal,#regionModal,#branchModal,#userModal,#violModal) .modal-header { justify-content: space-between; gap: 16px; }

/* ===== Confirm dialog (حذف / تعطيل / تأكيد) — B&W on every device ===== */
html:root #confirmOverlay{--cf-sf:#fff;--cf-fg:#0A0A0A;--cf-mu:#5F5F5F;--cf-ln:#D9D9D9;--cf-hv:#F7F7F7;--cf-pb:#0A0A0A;--cf-pf:#fff}
html[data-theme="dark"]:root #confirmOverlay{--cf-sf:#151515;--cf-fg:#F2F2F2;--cf-mu:#A3A3A3;--cf-ln:#303030;--cf-hv:#1C1C1C;--cf-pb:#F2F2F2;--cf-pf:#0A0A0A}
html:root #confirmOverlay .confirm-box{background:var(--cf-sf) !important;color:var(--cf-fg) !important;border:1px solid var(--cf-ln) !important;border-radius:8px !important;box-shadow:0 18px 48px rgba(0,0,0,.28) !important}
html:root #confirmOverlay .confirm-icon{background:var(--cf-hv) !important;color:var(--cf-fg) !important;border:1px solid var(--cf-ln) !important;border-radius:6px !important;box-shadow:none !important}
html:root #confirmOverlay .confirm-icon i{color:var(--cf-fg) !important}
html:root #confirmOverlay .confirm-title{color:var(--cf-fg) !important}
html:root #confirmOverlay .confirm-msg{color:var(--cf-mu) !important}
html:root #confirmOverlay .confirm-btn{border-radius:6px !important;box-shadow:none !important;font-weight:600 !important;outline:0 !important}
html:root #confirmOverlay .confirm-btn.confirm-cancel{background:var(--cf-sf) !important;color:var(--cf-fg) !important;border:1px solid var(--cf-ln) !important}
html:root #confirmOverlay .confirm-btn.confirm-ok,html:root #confirmOverlay .confirm-btn.confirm-ok.warn,html:root #confirmOverlay .confirm-btn.confirm-ok.info{background:var(--cf-pb) !important;color:var(--cf-pf) !important;border:1px solid var(--cf-pb) !important}
html:root #confirmOverlay .confirm-btn:focus-visible{outline:2px solid var(--cf-fg) !important;outline-offset:2px !important}