/*
 * MIYAAR Design System v15.5.0
 * Stage 1 — centralized visual language for the public site and application shells.
 *
 * Principles:
 * - The organization identity remains the source of truth through the existing
 *   --primary / --secondary / --bg / --panel / --text / --muted / --line / --radius tokens.
 * - New components are opt-in through the mi-* namespace to avoid regressions in
 *   stable v15.4.x screens while the redesign is rolled out page by page.
 * - Semantic tokens below are the only layer future v15.5.x UI should consume.
 */

:root{
  /* Brand / semantic color bridge */
  --mi-brand:var(--primary,#078a87);
  --mi-brand-strong:color-mix(in srgb,var(--mi-brand) 82%,#0f172a);
  --mi-brand-soft:color-mix(in srgb,var(--mi-brand) 9%,#fff);
  --mi-brand-softer:color-mix(in srgb,var(--mi-brand) 4%,#fff);
  --mi-accent:var(--secondary,#2563eb);
  --mi-accent-strong:color-mix(in srgb,var(--mi-accent) 82%,#0f172a);
  --mi-accent-soft:color-mix(in srgb,var(--mi-accent) 9%,#fff);

  --mi-bg:var(--bg,#f7f9ff);
  --mi-surface:var(--panel,#fff);
  --mi-surface-soft:color-mix(in srgb,var(--mi-surface) 76%,var(--mi-bg));
  --mi-surface-raised:#fff;
  --mi-text:var(--text,#111827);
  --mi-text-soft:color-mix(in srgb,var(--mi-text) 78%,#fff);
  --mi-muted:var(--muted,#64748b);
  --mi-line:var(--line,#e2e8f0);
  --mi-line-strong:color-mix(in srgb,var(--mi-line) 70%,var(--mi-text));

  --mi-success:#15803d;
  --mi-success-soft:#f0fdf4;
  --mi-warning:#b45309;
  --mi-warning-soft:#fffbeb;
  --mi-danger:#be123c;
  --mi-danger-soft:#fff1f2;
  --mi-info:#0369a1;
  --mi-info-soft:#f0f9ff;

  /* Typography */
  --mi-font:"Tajawal",Arial,sans-serif;
  --mi-font-size-xs:.75rem;
  --mi-font-size-sm:.875rem;
  --mi-font-size-md:1rem;
  --mi-font-size-lg:1.125rem;
  --mi-font-size-xl:1.25rem;
  --mi-font-size-2xl:1.5rem;
  --mi-font-size-3xl:clamp(1.75rem,2.7vw,2.25rem);
  --mi-font-size-display:clamp(2.25rem,5vw,4rem);
  --mi-line-tight:1.3;
  --mi-line-heading:1.45;
  --mi-line-body:1.85;
  --mi-weight-regular:500;
  --mi-weight-medium:650;
  --mi-weight-bold:800;
  --mi-weight-black:900;

  /* Spacing — 4px base rhythm */
  --mi-space-1:4px;
  --mi-space-2:8px;
  --mi-space-3:12px;
  --mi-space-4:16px;
  --mi-space-5:20px;
  --mi-space-6:24px;
  --mi-space-8:32px;
  --mi-space-10:40px;
  --mi-space-12:48px;
  --mi-space-14:56px;
  --mi-space-16:64px;
  --mi-space-20:80px;
  --mi-space-24:96px;

  /* Shape */
  --mi-radius-xs:8px;
  --mi-radius-sm:12px;
  --mi-radius-md:16px;
  --mi-radius-lg:20px;
  --mi-radius-xl:24px;
  --mi-radius-2xl:28px;
  --mi-radius-pill:999px;
  --mi-radius-brand:var(--radius,18px);

  /* Elevation: deliberately quiet, content-first */
  --mi-shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --mi-shadow-sm:0 7px 20px rgba(15,23,42,.055),0 1px 2px rgba(15,23,42,.035);
  --mi-shadow-md:0 14px 34px rgba(15,23,42,.075),0 2px 5px rgba(15,23,42,.04);
  --mi-shadow-lg:0 24px 58px rgba(15,23,42,.10),0 5px 14px rgba(15,23,42,.04);
  --mi-shadow-focus:0 0 0 4px color-mix(in srgb,var(--mi-brand) 14%,transparent);

  /* Layout */
  --mi-container:1240px;
  --mi-container-wide:1440px;
  --mi-reading:760px;
  --mi-section-space:clamp(56px,7vw,88px);
  --mi-section-space-compact:clamp(38px,5vw,64px);
  --mi-grid-gap:clamp(16px,2vw,24px);

  /* Controls */
  --mi-control-h:50px;
  --mi-control-h-sm:42px;
  --mi-control-h-lg:56px;
  --mi-control-radius:14px;

  /* Motion */
  --mi-ease:cubic-bezier(.2,.8,.2,1);
  --mi-duration-fast:140ms;
  --mi-duration:220ms;

  /* Layering */
  --mi-z-sticky:40;
  --mi-z-dropdown:80;
  --mi-z-modal:120;
  --mi-z-toast:160;
}

/* Shared low-risk accessibility baseline */
:where(.miyaar-design-system,.unified-admin-body) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--mi-brand) 40%,transparent);
  outline-offset:3px;
}
:where(.miyaar-design-system,.unified-admin-body) :where(button,[role="button"],summary){cursor:pointer}
:where(.miyaar-design-system,.unified-admin-body) img{max-width:100%}

/* Layout primitives */
.mi-container{width:min(var(--mi-container),calc(100% - 40px));margin-inline:auto}
.mi-container--wide{width:min(var(--mi-container-wide),calc(100% - 40px));margin-inline:auto}
.mi-reading{width:min(var(--mi-reading),100%)}
.mi-section{padding-block:var(--mi-section-space)}
.mi-section--compact{padding-block:var(--mi-section-space-compact)}
.mi-section--surface{background:var(--mi-surface)}
.mi-section--soft{background:var(--mi-surface-soft)}
.mi-stack{display:grid;gap:var(--mi-space-4)}
.mi-stack--sm{gap:var(--mi-space-2)}
.mi-stack--lg{gap:var(--mi-space-6)}
.mi-cluster{display:flex;align-items:center;gap:var(--mi-space-3);flex-wrap:wrap}
.mi-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mi-grid-gap)}
.mi-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mi-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Type hierarchy */
.mi-kicker{display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;padding:7px 11px;border:1px solid color-mix(in srgb,var(--mi-brand) 18%,var(--mi-line));border-radius:var(--mi-radius-pill);background:var(--mi-brand-soft);color:var(--mi-brand-strong);font-size:var(--mi-font-size-xs);font-weight:var(--mi-weight-black);line-height:1.4}
.mi-display{margin:0;color:var(--mi-text);font-size:var(--mi-font-size-display);font-weight:var(--mi-weight-black);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.mi-title{margin:0;color:var(--mi-text);font-size:var(--mi-font-size-3xl);font-weight:var(--mi-weight-black);line-height:var(--mi-line-heading);text-wrap:balance}
.mi-subtitle{margin:0;color:var(--mi-text);font-size:var(--mi-font-size-xl);font-weight:var(--mi-weight-bold);line-height:var(--mi-line-heading)}
.mi-lead{margin:0;color:var(--mi-muted);font-size:var(--mi-font-size-lg);font-weight:var(--mi-weight-medium);line-height:var(--mi-line-body)}
.mi-copy{margin:0;color:var(--mi-text-soft);font-size:var(--mi-font-size-md);line-height:var(--mi-line-body)}
.mi-muted{color:var(--mi-muted)!important}
.mi-section-head{display:grid;gap:var(--mi-space-3);max-width:var(--mi-reading);margin-bottom:var(--mi-space-8)}
.mi-section-head--center{margin-inline:auto;text-align:center;justify-items:center}

/* Buttons */
.mi-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--mi-control-h);padding-inline:20px;border:1px solid transparent;border-radius:var(--mi-control-radius);font:inherit;font-size:var(--mi-font-size-sm);font-weight:var(--mi-weight-black);line-height:1.2;text-decoration:none!important;white-space:nowrap;cursor:pointer;transition:transform var(--mi-duration-fast) var(--mi-ease),background var(--mi-duration) var(--mi-ease),border-color var(--mi-duration) var(--mi-ease),box-shadow var(--mi-duration) var(--mi-ease),color var(--mi-duration) var(--mi-ease)}
.mi-btn:hover{transform:translateY(-1px)}
.mi-btn:active{transform:translateY(0)}
.mi-btn:disabled,.mi-btn[aria-disabled="true"]{opacity:.55;pointer-events:none;transform:none}
.mi-btn--primary{background:var(--mi-brand);border-color:var(--mi-brand);color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--mi-brand) 18%,transparent)}
.mi-btn--primary:hover{background:var(--mi-brand-strong);border-color:var(--mi-brand-strong);color:#fff}
.mi-btn--secondary{background:var(--mi-accent);border-color:var(--mi-accent);color:#fff}
.mi-btn--secondary:hover{background:var(--mi-accent-strong);border-color:var(--mi-accent-strong);color:#fff}
.mi-btn--outline{background:var(--mi-surface);border-color:var(--mi-line);color:var(--mi-text);box-shadow:var(--mi-shadow-xs)}
.mi-btn--outline:hover{border-color:color-mix(in srgb,var(--mi-brand) 30%,var(--mi-line));background:var(--mi-brand-softer);color:var(--mi-brand-strong)}
.mi-btn--ghost{background:transparent;border-color:transparent;color:var(--mi-text)}
.mi-btn--ghost:hover{background:var(--mi-surface-soft);color:var(--mi-brand-strong)}
.mi-btn--danger{background:var(--mi-danger);border-color:var(--mi-danger);color:#fff}
.mi-btn--sm{min-height:var(--mi-control-h-sm);padding-inline:15px;border-radius:12px;font-size:var(--mi-font-size-xs)}
.mi-btn--lg{min-height:var(--mi-control-h-lg);padding-inline:25px;border-radius:16px;font-size:var(--mi-font-size-md)}
.mi-btn--icon{width:var(--mi-control-h);padding:0}
.mi-btn svg{width:1em;height:1em;flex:0 0 auto}

/* Cards / surfaces */
.mi-card{background:var(--mi-surface);border:1px solid var(--mi-line);border-radius:var(--mi-radius-xl);padding:var(--mi-space-6);box-shadow:var(--mi-shadow-xs)}
.mi-card--soft{background:var(--mi-surface-soft)}
.mi-card--raised{background:var(--mi-surface-raised);box-shadow:var(--mi-shadow-sm)}
.mi-card--interactive{transition:transform var(--mi-duration) var(--mi-ease),box-shadow var(--mi-duration) var(--mi-ease),border-color var(--mi-duration) var(--mi-ease)}
.mi-card--interactive:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--mi-brand) 22%,var(--mi-line));box-shadow:var(--mi-shadow-md)}
.mi-card__media{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--mi-radius-xl) - 6px);background:var(--mi-surface-soft)}
.mi-card__title{margin:0;font-size:var(--mi-font-size-xl);font-weight:var(--mi-weight-black);line-height:var(--mi-line-heading);color:var(--mi-text)}
.mi-card__copy{margin:0;color:var(--mi-muted);font-size:var(--mi-font-size-sm);line-height:1.8}

/* Badges / status */
.mi-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:28px;padding:4px 9px;border:1px solid var(--mi-line);border-radius:var(--mi-radius-pill);background:var(--mi-surface);color:var(--mi-text-soft);font-size:var(--mi-font-size-xs);font-weight:var(--mi-weight-bold);line-height:1.3}
.mi-badge--brand{border-color:color-mix(in srgb,var(--mi-brand) 20%,var(--mi-line));background:var(--mi-brand-soft);color:var(--mi-brand-strong)}
.mi-badge--success{border-color:#bbf7d0;background:var(--mi-success-soft);color:var(--mi-success)}
.mi-badge--warning{border-color:#fde68a;background:var(--mi-warning-soft);color:var(--mi-warning)}
.mi-badge--danger{border-color:#fecdd3;background:var(--mi-danger-soft);color:var(--mi-danger)}
.mi-badge--info{border-color:#bae6fd;background:var(--mi-info-soft);color:var(--mi-info)}

/* Form controls — opt-in, compatible with Select2 wrappers */
.mi-field{display:grid;gap:7px;min-width:0}
.mi-label{color:var(--mi-text-soft);font-size:var(--mi-font-size-sm);font-weight:var(--mi-weight-bold)}
.mi-label small{color:var(--mi-muted);font-weight:var(--mi-weight-regular)}
.mi-control{display:block;width:100%;min-height:var(--mi-control-h);margin:0;padding:12px 14px;border:1px solid var(--mi-line);border-radius:var(--mi-control-radius);background:var(--mi-surface);color:var(--mi-text);font:inherit;font-size:var(--mi-font-size-md);line-height:1.55;box-shadow:var(--mi-shadow-xs);transition:border-color var(--mi-duration-fast),box-shadow var(--mi-duration-fast),background var(--mi-duration-fast)}
textarea.mi-control{min-height:128px;resize:vertical}
.mi-control::placeholder{color:color-mix(in srgb,var(--mi-muted) 72%,#fff)}
.mi-control:hover{border-color:color-mix(in srgb,var(--mi-brand) 22%,var(--mi-line))}
.mi-control:focus{outline:0;border-color:color-mix(in srgb,var(--mi-brand) 70%,var(--mi-line));box-shadow:var(--mi-shadow-focus)}
.mi-control[aria-invalid="true"],.mi-control.is-invalid{border-color:color-mix(in srgb,var(--mi-danger) 65%,var(--mi-line));box-shadow:0 0 0 4px color-mix(in srgb,var(--mi-danger) 10%,transparent)}
.mi-help{margin:0;color:var(--mi-muted);font-size:var(--mi-font-size-xs);line-height:1.65}
.mi-error{margin:0;color:var(--mi-danger);font-size:var(--mi-font-size-xs);font-weight:var(--mi-weight-bold);line-height:1.65}
.mi-choice{display:flex;align-items:flex-start;gap:10px;color:var(--mi-text-soft);font-size:var(--mi-font-size-sm);line-height:1.65;cursor:pointer}
.mi-choice input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--mi-brand);flex:0 0 auto}

/* Alerts */
.mi-alert{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--mi-line);border-radius:var(--mi-radius-md);background:var(--mi-surface);color:var(--mi-text-soft);font-size:var(--mi-font-size-sm);line-height:1.75}
.mi-alert--success{border-color:#bbf7d0;background:var(--mi-success-soft);color:#166534}
.mi-alert--warning{border-color:#fde68a;background:var(--mi-warning-soft);color:#92400e}
.mi-alert--danger{border-color:#fecdd3;background:var(--mi-danger-soft);color:#9f1239}
.mi-alert--info{border-color:#bae6fd;background:var(--mi-info-soft);color:#075985}

/* Navigation primitives */
.mi-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none;color:var(--mi-muted);font-size:var(--mi-font-size-sm)}
.mi-breadcrumb a{color:var(--mi-muted);text-decoration:none}
.mi-breadcrumb a:hover{color:var(--mi-brand)}
.mi-breadcrumb li+li::before{content:"/";margin-inline-end:8px;color:color-mix(in srgb,var(--mi-muted) 58%,#fff)}
.mi-tabs{display:flex;align-items:center;gap:5px;padding:5px;border:1px solid var(--mi-line);border-radius:var(--mi-radius-md);background:var(--mi-surface);overflow:auto}
.mi-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:7px 13px;border:0;border-radius:11px;background:transparent;color:var(--mi-muted);font:inherit;font-size:var(--mi-font-size-sm);font-weight:var(--mi-weight-bold);text-decoration:none;white-space:nowrap}
.mi-tab:hover{background:var(--mi-surface-soft);color:var(--mi-text)}
.mi-tab.is-active,.mi-tab[aria-current="page"]{background:var(--mi-brand-soft);color:var(--mi-brand-strong)}

/* Tables */
.mi-table-wrap{width:100%;overflow:auto;border:1px solid var(--mi-line);border-radius:var(--mi-radius-lg);background:var(--mi-surface);box-shadow:var(--mi-shadow-xs)}
.mi-table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
.mi-table th,.mi-table td{padding:15px 16px;border-bottom:1px solid var(--mi-line);text-align:start;vertical-align:middle;font-size:var(--mi-font-size-sm)}
.mi-table th{background:var(--mi-surface-soft);color:var(--mi-muted);font-size:var(--mi-font-size-xs);font-weight:var(--mi-weight-black);white-space:nowrap}
.mi-table td{color:var(--mi-text-soft)}
.mi-table tbody tr:last-child td{border-bottom:0}
.mi-table tbody tr:hover td{background:var(--mi-brand-softer)}

/* Pagination */
.mi-pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.mi-page{display:inline-grid;place-items:center;min-width:40px;height:40px;padding-inline:10px;border:1px solid var(--mi-line);border-radius:11px;background:var(--mi-surface);color:var(--mi-text-soft);font-size:var(--mi-font-size-sm);font-weight:var(--mi-weight-bold);text-decoration:none}
.mi-page:hover{border-color:color-mix(in srgb,var(--mi-brand) 28%,var(--mi-line));color:var(--mi-brand-strong)}
.mi-page.is-active,.mi-page[aria-current="page"]{background:var(--mi-brand);border-color:var(--mi-brand);color:#fff}

/* Empty / loading states */
.mi-empty{display:grid;justify-items:center;gap:var(--mi-space-3);padding:clamp(28px,5vw,56px) 20px;text-align:center;border:1px dashed color-mix(in srgb,var(--mi-line) 78%,var(--mi-muted));border-radius:var(--mi-radius-xl);background:var(--mi-surface-soft)}
.mi-empty__icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:var(--mi-brand-soft);color:var(--mi-brand);font-size:22px}
.mi-empty h2,.mi-empty h3{margin:0;color:var(--mi-text);font-size:var(--mi-font-size-xl)}
.mi-empty p{max-width:560px;margin:0;color:var(--mi-muted);font-size:var(--mi-font-size-sm);line-height:1.75}
.mi-skeleton{position:relative;overflow:hidden;background:color-mix(in srgb,var(--mi-line) 65%,var(--mi-surface));border-radius:10px;color:transparent!important;user-select:none}
.mi-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);animation:mi-skeleton 1.35s infinite}
@keyframes mi-skeleton{to{transform:translateX(-100%)}}

/* Responsive rules */
@media(max-width:960px){
  .mi-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mi-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  :root{--mi-control-h:48px;--mi-section-space:52px;--mi-section-space-compact:38px}
  .mi-container,.mi-container--wide{width:min(100% - 24px,var(--mi-container))}
  .mi-grid--4,.mi-grid--3{grid-template-columns:1fr}
  .mi-section-head{margin-bottom:var(--mi-space-6)}
  .mi-display{font-size:clamp(2rem,11vw,2.75rem)}
  .mi-title{font-size:1.7rem}
  .mi-lead{font-size:1rem}
  .mi-btn--mobile-block{width:100%}
  .mi-card{padding:20px;border-radius:20px}
}

/* Respect the user's motion preference. */
@media(prefers-reduced-motion:reduce){
  :where(.miyaar-design-system,.unified-admin-body){scroll-behavior:auto!important}
  :where(.miyaar-design-system,.unified-admin-body) *,
  :where(.miyaar-design-system,.unified-admin-body) *::before,
  :where(.miyaar-design-system,.unified-admin-body) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}