/* مكونات مستقل. كل القيم متغيرات من tokens.css. */
.mq-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-5);border:1.5px solid transparent;border-radius:var(--radius-md);font-family:var(--font-text);font-size:16px;line-height:24px;font-weight:600;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.mq-btn--primary{background:var(--brand);color:var(--on-brand)}
.mq-btn--accent{background:var(--accent);color:var(--on-accent)}
.mq-btn--outline{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.mq-btn--ghost{background:transparent;color:var(--link);padding:0 var(--space-3)}
.mq-btn--sm{min-height:44px;padding:0 var(--space-4);font-size:14px}
.mq-btn:hover{filter:brightness(1.08)}
.mq-btn--outline:hover,.mq-btn--ghost:hover{background:var(--surface-sunken);filter:none}
.mq-btn:focus-visible,.mq-input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.mq-btn[disabled]{background:var(--surface-sunken);color:var(--ink-muted);border-color:var(--border);cursor:not-allowed;filter:none}
.mq-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-text)}
.mq-field__label{font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.mq-input{min-height:48px;padding:0 var(--space-4);border:1.5px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font-family:var(--font-text);font-size:16px;line-height:24px}
.mq-input::placeholder{color:var(--ink-muted)}
.mq-field__hint{font-size:14px;line-height:24px;color:var(--ink-muted)}
.mq-field--error .mq-input{border-color:var(--danger)}
.mq-field__error{font-size:14px;line-height:24px;color:var(--danger);font-weight:600}
.mq-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-4);font-family:var(--font-text);color:var(--ink);transition:box-shadow .15s ease}
.mq-card:hover{box-shadow:var(--shadow-md)}
.mq-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}
.mq-card__title{margin:0;font-family:var(--font-display);font-size:22px;line-height:34px;font-weight:700}
.mq-card__meta{margin:0;font-size:14px;line-height:24px;color:var(--ink-muted)}
.mq-card__amount{font-size:28px;line-height:40px;font-weight:700;font-variant-numeric:tabular-nums}
.mq-chip{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-3);border-radius:var(--radius-pill);font-family:var(--font-text);font-size:14px;line-height:24px;font-weight:600;white-space:nowrap}
.mq-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.mq-chip--draft{background:var(--surface-sunken);color:var(--ink-muted)}
.mq-chip--sent{background:var(--info-soft);color:var(--info)}
.mq-chip--pending{background:var(--warning-soft);color:var(--warning)}
.mq-chip--paid{background:var(--success-soft);color:var(--success)}
.mq-chip--late{background:var(--danger-soft);color:var(--danger)}
@media (prefers-reduced-motion:reduce){.mq-btn,.mq-card{transition:none}}
/* ---- واجهات ---- */
.mq-logo{height:40px;width:auto;display:block}
html[data-theme="dark"] .mq-logo--light{display:none}
html:not([data-theme="dark"]) .mq-logo--dark{display:none}
.mq-avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--panel);color:var(--on-panel);font-family:var(--font-display);font-weight:700;font-size:16px}
.mq-nav{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-3) var(--space-5);background:var(--surface);border-bottom:1px solid var(--border);font-family:var(--font-text)}
.mq-nav__links{display:flex;gap:var(--space-2);list-style:none;margin:0;padding:0}
.mq-nav__link{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);color:var(--ink-muted);font-size:16px;font-weight:600;text-decoration:none}
.mq-nav__link:hover{background:var(--surface-sunken);color:var(--ink)}
.mq-nav__link[aria-current="page"]{background:var(--surface-sunken);color:var(--ink)}
.mq-nav__end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-3)}
.mq-nav a:focus-visible,.mq-bottomnav a:focus-visible,.mq-tab:focus-visible,.mq-choice input:focus-visible,.mq-switch input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.mq-bottomnav{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--border);font-family:var(--font-text);padding-bottom:env(safe-area-inset-bottom,0px)}
.mq-bottomnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);min-height:56px;padding:var(--space-2);color:var(--ink-muted);font-size:12px;line-height:18px;font-weight:600;text-decoration:none}
.mq-bottomnav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 3px 0 var(--brand)}
.mq-tabs{display:flex;gap:var(--space-5);border-bottom:1px solid var(--border);font-family:var(--font-text);overflow-x:auto}
.mq-tab{display:inline-flex;align-items:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-1);background:none;border:0;border-bottom:3px solid transparent;color:var(--ink-muted);font-family:var(--font-text);font-size:16px;font-weight:600;cursor:pointer;white-space:nowrap}
.mq-tab:hover{color:var(--ink)}
.mq-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.mq-tab__count{padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--ink);font-size:14px;line-height:22px;font-variant-numeric:tabular-nums}
.mq-choice{display:flex;align-items:center;gap:var(--space-3);min-height:44px;font-family:var(--font-text);font-size:16px;color:var(--ink);cursor:pointer}
.mq-choice input{width:24px;height:24px;margin:0;accent-color:var(--brand);cursor:pointer}
.mq-switch{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:44px;font-family:var(--font-text);font-size:16px;color:var(--ink);cursor:pointer}
.mq-switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:52px;height:32px;margin:0;border-radius:var(--radius-pill);background:var(--border-strong);cursor:pointer;transition:background-color .15s ease}
.mq-switch input::after{content:"";position:absolute;top:4px;inset-inline-start:4px;width:24px;height:24px;border-radius:50%;background:var(--surface);transition:transform .15s ease,background-color .15s ease}
.mq-switch input:checked{background:var(--brand)}
.mq-switch input:checked::after{background:var(--on-brand);transform:translateX(-20px)}
.mq-alert{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border-radius:var(--radius-md);font-family:var(--font-text);color:var(--ink);font-size:16px;line-height:28px}
.mq-alert svg{flex:none;margin-top:2px}
.mq-alert__title{display:block;font-weight:700}
.mq-alert__body{display:block;color:var(--ink)}
.mq-alert--success{background:var(--success-soft)}.mq-alert--success svg,.mq-alert--success .mq-alert__title{color:var(--success)}
.mq-alert--info{background:var(--info-soft)}.mq-alert--info svg,.mq-alert--info .mq-alert__title{color:var(--info)}
.mq-alert--warning{background:var(--warning-soft)}.mq-alert--warning svg,.mq-alert--warning .mq-alert__title{color:var(--warning)}
.mq-alert--danger{background:var(--danger-soft)}.mq-alert--danger svg,.mq-alert--danger .mq-alert__title{color:var(--danger)}
.mq-toast{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);font-family:var(--font-text);font-size:16px;line-height:28px}
.mq-toast svg{flex:none;color:var(--success)}
.mq-table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);font-family:var(--font-text)}
.mq-table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px;color:var(--ink)}
.mq-table th{padding:var(--space-3) var(--space-4);background:var(--surface-sunken);color:var(--ink-muted);font-size:14px;line-height:20px;font-weight:600;text-align:start;white-space:nowrap}
.mq-table td{padding:var(--space-4);border-top:1px solid var(--border);white-space:nowrap}
.mq-table tbody tr:hover td{background:var(--surface-sunken)}
.mq-table .mq-num{font-variant-numeric:tabular-nums;font-weight:600}
.mq-table td small{display:block;color:var(--ink-muted);font-size:14px}
.mq-scrim{display:grid;place-items:center;padding:var(--space-5);background:var(--scrim)}
.mq-dialog{display:flex;flex-direction:column;gap:var(--space-4);width:100%;max-width:420px;padding:var(--space-5);background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);font-family:var(--font-text)}
.mq-dialog__title{margin:0;font-family:var(--font-display);font-size:22px;line-height:34px;font-weight:700}
.mq-dialog__body{margin:0;font-size:16px;line-height:28px;color:var(--ink-muted)}
.mq-dialog__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.mq-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-7) var(--space-5);text-align:center;background:var(--surface);border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);font-family:var(--font-text);color:var(--ink)}
.mq-empty__icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface-sunken);color:var(--ink)}
.mq-empty__title{margin:0;font-family:var(--font-display);font-size:22px;line-height:34px;font-weight:700}
.mq-empty__text{margin:0;max-width:320px;font-size:16px;line-height:28px;color:var(--ink-muted)}
.mq-steps{display:flex;align-items:center;gap:var(--space-3);list-style:none;margin:0;padding:0;font-family:var(--font-text)}
.mq-step{display:flex;align-items:center;gap:var(--space-2);color:var(--ink-muted);font-size:16px;font-weight:600}
.mq-step:not(:last-child)::after{content:"";width:32px;height:2px;margin-inline-start:var(--space-1);background:var(--border-strong)}
.mq-step__n{display:grid;place-items:center;width:32px;height:32px;border:1.5px solid var(--border-strong);border-radius:50%;font-size:14px;font-variant-numeric:tabular-nums}
.mq-step[aria-current="step"]{color:var(--ink)}
.mq-step[aria-current="step"] .mq-step__n,.mq-step--done .mq-step__n{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.mq-step--done{color:var(--ink)}
@media (max-width:480px){.mq-step__label{display:none}.mq-step[aria-current="step"] .mq-step__label{display:inline}}
.mq-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);font-family:var(--font-text)}
.mq-tile{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-5);background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-lg)}
.mq-tile__label{font-size:14px;line-height:24px;color:var(--ink-muted);font-weight:600}
.mq-tile__value{font-family:var(--font-display);font-size:28px;line-height:40px;font-weight:700;font-variant-numeric:tabular-nums}
.mq-tile__note{font-size:14px;line-height:24px;color:var(--ink-muted)}
.mq-tile--panel{background:var(--panel);border-color:var(--panel);color:var(--on-panel)}
.mq-tile--panel .mq-tile__label,.mq-tile--panel .mq-tile__note{color:var(--on-panel)}
.mq-tile--panel .mq-tile__value{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.mq-switch input,.mq-switch input::after{transition:none}}