/*
 * SabronPro V90.8 Phase 9 — Professional UI/UX & Mobile Experience Layer
 * Additive layer only: no database mutation, no route removal, no compatibility breakage.
 */
:root {
  --sbp-ink: #07111f;
  --sbp-navy: #0B1320;
  --sbp-navy-2: #111C2E;
  --sbp-gold: #D4AF37;
  --sbp-gold-2: #B89121;
  --sbp-surface: #FFFFFF;
  --sbp-soft: #F8FAFC;
  --sbp-muted: #64748B;
  --sbp-border: rgba(148, 163, 184, .22);
  --sbp-radius-sm: 12px;
  --sbp-radius-md: 18px;
  --sbp-radius-lg: 26px;
  --sbp-shadow-card: 0 18px 48px rgba(2, 6, 23, .10);
  --sbp-shadow-soft: 0 8px 24px rgba(2, 6, 23, .08);
  --sbp-safe-top: env(safe-area-inset-top, 0px);
  --sbp-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html { scroll-behavior: smooth; }
body { color: var(--sbp-ink); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.sabron-uiux-phase9 { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }

/* PWA / mobile shell refinements */
@media (display-mode: standalone) {
  body.sabron-uiux-phase9 .sabron-navbar,
  body.sabron-uiux-phase9 .admin-layout {
    padding-top: max(0px, var(--sbp-safe-top));
  }
  body.sabron-uiux-phase9::after {
    content: 'SabronPro App';
    position: fixed;
    left: 12px;
    bottom: calc(10px + var(--sbp-safe-bottom));
    z-index: 9998;
    padding: 7px 11px;
    border-radius: 999px;
    color: #fff;
    background: rgba(11, 19, 32, .82);
    backdrop-filter: blur(10px);
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
  }
}

/* Better focus state for keyboard and accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role='button']:focus-visible {
  outline: 3px solid rgba(212, 175, 55, .62) !important;
  outline-offset: 3px !important;
  border-radius: 10px;
}

/* Minimum tap target for mobile */
button,
.button,
.btn,
.mobile-link,
.mobile-login-btn,
.nav-link,
.login-link,
.user-menu-btn,
.mobile-menu-btn,
.sabron-pwa-install-button,
.admin-sidebar a {
  min-height: 44px;
}

.sabron-phase9-card {
  border: 1px solid var(--sbp-border);
  border-radius: var(--sbp-radius-lg);
  background: rgba(255,255,255,.94);
  box-shadow: var(--sbp-shadow-soft);
}

.sabron-phase9-glass {
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(2, 6, 23, .22);
}

/* Public header: more stable mobile drawer */
#mobile-menu.open {
  max-height: calc(100vh - 82px - var(--sbp-safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu-inner a {
  border-radius: 16px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.mobile-menu-inner a:active { transform: scale(.985); }

/* Consistent cards and sections */
.sabron-v60-theme .bg-white,
.sabron-theme-admin .bg-white {
  border-color: rgba(226, 232, 240, .78);
}
.sabron-theme-admin main {
  background:
    radial-gradient(circle at 12% 0%, rgba(212,175,55,.06), transparent 24%),
    radial-gradient(circle at 92% 10%, rgba(15, 23, 42, .055), transparent 28%),
    #f8fafc;
}

/* Admin sidebar mobile polish */
@media (max-width: 1023px) {
  .admin-sidebar {
    max-width: min(92vw, 360px);
    box-shadow: -20px 0 60px rgba(2, 6, 23, .24);
  }
  .admin-main main,
  main.p-6, .p-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .header-spacer { height: 76px; }
}

@media (max-width: 640px) {
  .sabron-navbar { border-bottom-color: rgba(148, 163, 184, .34); }
  .brand-text-title { font-size: 1.08rem !important; }
  .brand-tagline { font-size: .68rem !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-logo-box { width: 78px !important; height: 78px !important; }
  .footer-logo { width: 62px !important; height: 62px !important; }
  table { font-size: .88rem; }
}

/* Scrollable tables on small screens */
@media (max-width: 768px) {
  table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; }
  thead, tbody, tr { width: max-content; min-width: 100%; }
}

/* Image loading polish */
img[loading='lazy'] { content-visibility: auto; }
.sabron-img-ready { transition: opacity .22s ease, filter .22s ease; opacity: 1; filter: none; }
.sabron-img-loading { opacity: .65; filter: blur(4px); }

/* Useful reusable badges */
.sabron-phase9-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .45rem .75rem;
  font-size: .78rem;
  font-weight: 900;
  color: #6b4f05;
  background: rgba(212,175,55,.13);
  border: 1px solid rgba(212,175,55,.24);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* -------------------------------------------------------------------------
 * SabronPro V90.8 Phase 9B — UI Polish & Accessibility Refinement Layer
 * Additive only: no DB change, no route removal, no compatibility breakage.
 * ---------------------------------------------------------------------- */
:root {
  --sbp-content-max: 1180px;
  --sbp-control-h: 46px;
  --sbp-gap: clamp(14px, 2vw, 24px);
  --sbp-text-fluid: clamp(.96rem, .35vw + .86rem, 1.04rem);
  --sbp-heading-fluid: clamp(1.65rem, 2.7vw + .95rem, 3.35rem);
}

html { font-size: 16px; }
body.sabron-uiux-phase9 { font-size: var(--sbp-text-fluid); line-height: 1.72; }
body.sabron-uiux-phase9.sabron-has-touch { -webkit-tap-highlight-color: rgba(212,175,55,.22); }
body.sabron-uiux-phase9 main { scroll-margin-top: 96px; }

/* Keyboard skip-link injected by Phase 9B JS. */
.sabron-skip-link {
  position: fixed;
  inset-inline-start: 16px;
  top: calc(12px + var(--sbp-safe-top));
  z-index: 100000;
  transform: translateY(-160%);
  background: #0B1320;
  color: #fff;
  border: 1px solid rgba(212,175,55,.55);
  border-radius: 999px;
  padding: .72rem 1rem;
  font-weight: 900;
  box-shadow: var(--sbp-shadow-card);
  transition: transform .18s ease;
}
.sabron-skip-link:focus { transform: translateY(0); }

/* Wider consistency for common card styles used across public/admin pages. */
.sabron-uiux-phase9 .card,
.sabron-uiux-phase9 .service-card,
.sabron-uiux-phase9 .course-card,
.sabron-uiux-phase9 .product-card,
.sabron-uiux-phase9 .dashboard-card,
.sabron-uiux-phase9 .stats-card,
.sabron-uiux-phase9 .admin-card,
.sabron-uiux-phase9 .feature-card,
.sabron-uiux-phase9 .bg-white.rounded-2xl,
.sabron-uiux-phase9 .bg-white.rounded-3xl {
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 14px 42px rgba(2, 6, 23, .075);
}
.sabron-uiux-phase9 .card:hover,
.sabron-uiux-phase9 .service-card:hover,
.sabron-uiux-phase9 .course-card:hover,
.sabron-uiux-phase9 .product-card:hover,
.sabron-uiux-phase9 .feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 58px rgba(2, 6, 23, .11);
}

/* Professional form rhythm and validation clarity. */
.sabron-uiux-phase9 input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
.sabron-uiux-phase9 select,
.sabron-uiux-phase9 textarea,
.sabron-uiux-phase9 .form-control,
.sabron-uiux-phase9 .form-input,
.sabron-uiux-phase9 .form-select,
.sabron-uiux-phase9 .form-textarea {
  min-height: var(--sbp-control-h);
  border-radius: 14px;
  border-color: rgba(148, 163, 184, .42);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.sabron-uiux-phase9 textarea { min-height: 118px; resize: vertical; }
.sabron-uiux-phase9 label { font-weight: 800; color: #1e293b; }
.sabron-uiux-phase9 input[aria-invalid='true'],
.sabron-uiux-phase9 select[aria-invalid='true'],
.sabron-uiux-phase9 textarea[aria-invalid='true'] {
  border-color: rgba(220, 38, 38, .8) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .10) !important;
}
.sabron-uiux-phase9 .sabron-form-submitted button[type='submit'][aria-busy='true'] { opacity: .72; cursor: progress; }

/* Button consistency without overriding explicit brand components too aggressively. */
.sabron-uiux-phase9 .btn,
.sabron-uiux-phase9 .button,
.sabron-uiux-phase9 button[type='submit'],
.sabron-uiux-phase9 a[class*='btn'] {
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.sabron-uiux-phase9 .btn-primary,
.sabron-uiux-phase9 .primary-btn,
.sabron-uiux-phase9 button[type='submit'] {
  box-shadow: 0 12px 28px rgba(11, 19, 32, .14);
}

/* Tables: JS wraps tables in this container instead of forcing table itself to block everywhere. */
.sabron-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(255,255,255,.72);
}
.sabron-table-wrap > table { margin: 0; min-width: 720px; }
.sabron-table-wrap thead th { position: sticky; top: 0; z-index: 1; }
.sabron-uiux-phase9 table th,
.sabron-uiux-phase9 table td { vertical-align: middle; }

/* Better empty/loading/error states for admin pages and future modules. */
.sabron-empty-state,
.sabron-loading-state,
.sabron-error-state {
  border: 1px dashed rgba(148, 163, 184, .42);
  border-radius: 24px;
  padding: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.9));
  text-align: center;
  color: #475569;
}
.sabron-error-state { border-color: rgba(220,38,38,.28); background: rgba(254,242,242,.72); color: #991b1b; }

/* Mobile refinements. */
@media (max-width: 768px) {
  body.sabron-uiux-phase9 { overflow-x: hidden; }
  .sabron-uiux-phase9 h1 { font-size: var(--sbp-heading-fluid); line-height: 1.18; }
  .sabron-uiux-phase9 h2 { line-height: 1.24; }
  .sabron-uiux-phase9 .container,
  .sabron-uiux-phase9 .max-w-7xl,
  .sabron-uiux-phase9 .max-w-6xl,
  .sabron-uiux-phase9 .max-w-5xl { padding-inline: 1rem; }
  .sabron-uiux-phase9 .grid { gap: min(var(--sbp-gap), 18px); }
  .sabron-uiux-phase9 .hide-on-mobile-polish { display: none !important; }
}

@media (max-width: 520px) {
  .sabron-uiux-phase9 .btn,
  .sabron-uiux-phase9 .button,
  .sabron-uiux-phase9 button[type='submit'],
  .sabron-uiux-phase9 a[class*='btn'] { width: 100%; justify-content: center; }
  .sabron-uiux-phase9 .sabron-pwa-install-button { width: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .sabron-uiux-phase9 .card,
  .sabron-uiux-phase9 .service-card,
  .sabron-uiux-phase9 .course-card,
  .sabron-uiux-phase9 .product-card,
  .sabron-uiux-phase9 .feature-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
}

/* Phase 9B table wrapper override: keep real table semantics inside the scroller. */
.sabron-table-wrap > table { display: table !important; white-space: normal; border-collapse: separate; border-spacing: 0; }
.sabron-table-wrap > table thead { display: table-header-group !important; }
.sabron-table-wrap > table tbody { display: table-row-group !important; }
.sabron-table-wrap > table tr { display: table-row !important; width: auto !important; min-width: 0 !important; }
.sabron-table-wrap > table th,
.sabron-table-wrap > table td { display: table-cell !important; }

/* =========================================================
   SabronPro V90.8 — Phase 9C Deep Continuation 1/5
   Design Tokens, Layout Rhythm, Empty States, Status System
   ========================================================= */
:root {
  --sabron-navy-950: #050914;
  --sabron-navy-900: #08101d;
  --sabron-navy-800: #0b1320;
  --sabron-navy-700: #101b2d;
  --sabron-gold-500: #d4af37;
  --sabron-gold-600: #b89121;
  --sabron-surface: #ffffff;
  --sabron-surface-soft: #f8fafc;
  --sabron-border: rgba(15, 23, 42, .10);
  --sabron-ring: rgba(212, 175, 55, .38);
  --sabron-shadow-sm: 0 8px 22px rgba(2, 6, 23, .06);
  --sabron-shadow-md: 0 16px 40px rgba(2, 6, 23, .10);
  --sabron-shadow-lg: 0 24px 70px rgba(2, 6, 23, .14);
  --sabron-radius-sm: 12px;
  --sabron-radius-md: 18px;
  --sabron-radius-lg: 24px;
  --sabron-radius-xl: 32px;
  --sabron-space-1: clamp(.35rem, .25rem + .25vw, .55rem);
  --sabron-space-2: clamp(.65rem, .45rem + .45vw, .95rem);
  --sabron-space-3: clamp(.95rem, .70rem + .70vw, 1.35rem);
  --sabron-space-4: clamp(1.25rem, .95rem + .95vw, 1.9rem);
  --sabron-space-5: clamp(1.8rem, 1.25rem + 1.45vw, 3rem);
  --sabron-text-xs: clamp(.76rem, .70rem + .12vw, .84rem);
  --sabron-text-sm: clamp(.88rem, .80rem + .18vw, .98rem);
  --sabron-text-md: clamp(1rem, .92rem + .25vw, 1.13rem);
  --sabron-text-lg: clamp(1.20rem, 1.02rem + .55vw, 1.55rem);
  --sabron-text-xl: clamp(1.65rem, 1.25rem + 1.25vw, 2.35rem);
  --sabron-text-2xl: clamp(2.05rem, 1.45rem + 2vw, 3.35rem);
}
body.sabron-uiux-phase9g, .sabron-uiux-phase9g { color-scheme: light; }
.sabron-section { padding-block: var(--sabron-space-5); }
.sabron-container { width:min(100% - 2rem, 1180px); margin-inline:auto; }
.sabron-stack > * + * { margin-top: var(--sabron-space-3); }
.sabron-cluster { display:flex; flex-wrap:wrap; gap:var(--sabron-space-2); align-items:center; }
.sabron-surface-card, .sabron-empty-state, .sabron-metric-card {
  border: 1px solid var(--sabron-border); border-radius: var(--sabron-radius-lg); background: var(--sabron-surface);
  box-shadow: var(--sabron-shadow-sm); overflow:hidden;
}
.sabron-surface-card { padding: var(--sabron-space-4); }
.sabron-surface-card:hover { box-shadow: var(--sabron-shadow-md); transform: translateY(-1px); }
.sabron-empty-state { padding: clamp(1.4rem, 3vw, 2.4rem); text-align:center; background:linear-gradient(180deg,#fff,#f8fafc); }
.sabron-empty-state i, .sabron-empty-icon { width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; border-radius:22px; background:#fff7db; color:var(--sabron-gold-600); margin-bottom:14px; }
.sabron-status, .sabron-badge { display:inline-flex; align-items:center; gap:.45rem; border-radius:999px; padding:.42rem .76rem; font-weight:900; font-size:.78rem; line-height:1; border:1px solid transparent; white-space:nowrap; }
.sabron-status--success, .status-active, .badge-success { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.sabron-status--warning, .status-pending, .badge-warning { background:#fffbeb; color:#a16207; border-color:#fde68a; }
.sabron-status--danger, .status-danger, .badge-danger { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.sabron-status--info, .badge-info { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.sabron-heading { font-size:var(--sabron-text-xl); line-height:1.18; font-weight:950; letter-spacing:-.025em; color:var(--sabron-navy-900); }
.sabron-kicker { display:inline-flex; align-items:center; gap:.45rem; border-radius:999px; padding:.5rem .85rem; background:#fff8df; color:#8a640e; font-weight:900; font-size:var(--sabron-text-xs); }
.sabron-muted { color:#64748b; }

/* =========================================================
   SabronPro V90.8 — Phase 9D Deep Continuation 2/5
   Mobile App Feel, Sticky Actions, Connectivity, PWA Details
   ========================================================= */
.sabron-mobile-actionbar { position:fixed; inset:auto max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); z-index:80; display:none; gap:10px; padding:10px; border-radius:24px; background:rgba(255,255,255,.92); border:1px solid rgba(15,23,42,.12); box-shadow:0 20px 60px rgba(2,6,23,.18); backdrop-filter: blur(14px); }
.sabron-mobile-actionbar a, .sabron-mobile-actionbar button { flex:1; min-height:48px; border-radius:16px; font-weight:900; }
@media (max-width: 768px) { .sabron-mobile-actionbar[data-active='true'] { display:flex; } body:has(.sabron-mobile-actionbar[data-active='true']) { padding-bottom:86px; } }
.sabron-network-banner { position:fixed; top:calc(10px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%) translateY(-140%); z-index:9999; padding:.75rem 1rem; border-radius:999px; background:#0f172a; color:#fff; font-weight:900; box-shadow:0 14px 44px rgba(2,6,23,.25); transition:transform .25s ease; }
.sabron-network-banner.is-visible { transform:translateX(-50%) translateY(0); }
.sabron-app-shell { min-height:100dvh; background:linear-gradient(180deg,#f8fafc 0%,#fff 45%); }
@media (display-mode: standalone) { body { overscroll-behavior-y: contain; } .sabron-install-btn, .sabron-pwa-install { display:none !important; } }
@media (max-width:640px) { .sabron-container { width:min(100% - 1rem, 1180px); } .sabron-surface-card { border-radius:20px; padding:1rem; } .sabron-heading { letter-spacing:-.01em; } }

/* =========================================================
   SabronPro V90.8 — Phase 9E Deep Continuation 3/5
   Forms, Conversion UX, Toasts, Progressive Disclosure
   ========================================================= */
.sabron-field { position:relative; display:grid; gap:.5rem; margin-bottom:1rem; }
.sabron-field label { font-weight:900; color:#0f172a; }
.sabron-field input, .sabron-field select, .sabron-field textarea,
form input:not([type='checkbox']):not([type='radio']):not([type='file']), form select, form textarea {
  border-radius:16px; border:1px solid rgba(15,23,42,.14); background:#fff; min-height:46px; padding:.75rem .95rem; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sabron-field input:focus, .sabron-field select:focus, .sabron-field textarea:focus,
form input:focus, form select:focus, form textarea:focus { outline:none; border-color:var(--sabron-gold-500); box-shadow:0 0 0 4px var(--sabron-ring); }
.sabron-form-help { font-size:.84rem; color:#64748b; }
.sabron-form-error { display:none; font-size:.84rem; font-weight:800; color:#b91c1c; }
[aria-invalid='true'] + .sabron-form-error, .sabron-field.is-invalid .sabron-form-error { display:block; }
.sabron-toast-stack { position:fixed; z-index:10000; inset:auto max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) auto; display:grid; gap:10px; width:min(360px, calc(100vw - 32px)); }
[dir='rtl'] .sabron-toast-stack { right:auto; left:max(16px, env(safe-area-inset-left)); }
.sabron-toast { border-radius:18px; padding:14px 16px; background:#0f172a; color:#fff; box-shadow:0 18px 50px rgba(2,6,23,.25); font-weight:800; transform:translateY(10px); opacity:0; transition:.22s ease; }
.sabron-toast.is-visible { transform:translateY(0); opacity:1; }
.sabron-stepper { display:flex; gap:8px; align-items:center; margin-block:1rem; }
.sabron-stepper [data-step] { height:8px; flex:1; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.sabron-stepper [data-step].is-active, .sabron-stepper [data-step].is-done { background:linear-gradient(90deg,var(--sabron-gold-500),#f4d06f); }

/* =========================================================
   SabronPro V90.8 — Phase 9F Deep Continuation 4/5
   Admin Data Experience, Tables, Print, Density Controls
   ========================================================= */
.sabron-data-toolbar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.sabron-data-toolbar input[type='search'] { min-width:min(320px,100%); border-radius:999px; padding:.7rem 1rem; border:1px solid rgba(15,23,42,.14); }
.sabron-density-compact table td, .sabron-density-compact table th { padding:.55rem .7rem !important; }
.sabron-table-wrap { position:relative; border-radius:18px; border:1px solid rgba(15,23,42,.08); background:#fff; }
.sabron-table-wrap::after { content:'اسحب لعرض باقي الجدول'; position:absolute; inset:auto 12px 8px auto; font-size:.72rem; font-weight:900; color:#64748b; opacity:0; pointer-events:none; }
@media (max-width:768px) { .sabron-table-wrap::after { opacity:.8; } }
table.sabron-enhanced-table thead th { position:sticky; top:0; z-index:2; background:#f8fafc; box-shadow:0 1px 0 rgba(15,23,42,.08); }
table.sabron-enhanced-table tbody tr:hover { background:#fffdf4; }
.sabron-row-actions { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:flex-end; }
@media print { .sabron-no-print, .sabron-mobile-actionbar, .sabron-network-banner, .sabron-toast-stack, .sabron-pwa-install { display:none !important; } .sabron-surface-card, .bg-white { box-shadow:none !important; border:1px solid #ddd !important; } body { background:#fff !important; } }

/* =========================================================
   SabronPro V90.8 — Phase 9G Deep Continuation 5/5
   Accessibility QA, Final UX Gate, High Contrast, Motion Safety
   ========================================================= */
.sabron-a11y-live { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.sabron-focus-ring :is(a,button,input,select,textarea,[tabindex]):focus-visible { outline:3px solid var(--sabron-gold-500) !important; outline-offset:3px !important; box-shadow:0 0 0 7px var(--sabron-ring) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; } }
@media (prefers-contrast: more) { :root { --sabron-border: rgba(15,23,42,.32); } .sabron-muted { color:#334155; } .sabron-surface-card { border-width:2px; } }
.sabron-touch-target :is(a,button,input,select,textarea,[role='button']) { min-height:44px; }
.sabron-loading-skeleton { border-radius:14px; min-height:1rem; background:linear-gradient(90deg,#e2e8f0,#f8fafc,#e2e8f0); background-size:220% 100%; animation:sabronSkeleton 1.25s ease-in-out infinite; }
@keyframes sabronSkeleton { from { background-position:220% 0; } to { background-position:-220% 0; } }


/* =========================================================
   SabronPro V90.8 — Phase 9H Ultra Continuation 1/5
   Admin Command Surface, Page Headers, Breadcrumbs, Quick Actions
   ========================================================= */
.sabron-uiux-phase9l {
  --sabron-command-bg: rgba(2, 6, 23, .88);
  --sabron-command-border: rgba(255,255,255,.14);
  --sabron-admin-glow: 0 28px 90px rgba(15, 23, 42, .16);
  --sabron-warning-soft: #fff7ed;
}
.sabron-page-header-pro {
  position: relative; overflow: hidden; border-radius: 32px; padding: clamp(1.25rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 10% 0%, rgba(212,175,55,.30), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(15,23,42,.22), transparent 34%),
    linear-gradient(135deg, #020617 0%, #0f172a 56%, #1e293b 100%);
  color:#fff; box-shadow: var(--sabron-admin-glow);
}
.sabron-page-header-pro::after { content:''; position:absolute; inset:auto -10% -45% -10%; height:70%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); transform:rotate(-4deg); }
.sabron-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.82rem; color:#64748b; margin-bottom:1rem; }
.sabron-breadcrumbs a { color:#334155; font-weight:900; text-decoration:none; }
.sabron-breadcrumbs [aria-current='page'] { color:#b89121; font-weight:950; }
.sabron-admin-tabs { display:flex; gap:.6rem; overflow-x:auto; padding:.35rem; border-radius:18px; background:#f1f5f9; scroll-snap-type:x proximity; }
.sabron-admin-tabs a, .sabron-admin-tabs button { scroll-snap-align:start; border-radius:14px; padding:.7rem 1rem; font-weight:900; white-space:nowrap; color:#334155; }
.sabron-admin-tabs .is-active, .sabron-admin-tabs [aria-selected='true'] { background:#fff; color:#0f172a; box-shadow:0 10px 28px rgba(15,23,42,.10); }
.sabron-command-bar { position:fixed; inset:0; z-index:10020; display:none; place-items:start center; padding-top:clamp(72px, 12vh, 120px); background:rgba(2,6,23,.54); backdrop-filter:blur(12px); }
.sabron-command-bar.is-open { display:grid; }
.sabron-command-panel { width:min(720px, calc(100vw - 24px)); border:1px solid var(--sabron-command-border); border-radius:28px; background:var(--sabron-command-bg); color:#fff; box-shadow:0 30px 100px rgba(0,0,0,.34); overflow:hidden; }
.sabron-command-input { width:100%; min-height:58px; padding:0 1.25rem; background:rgba(255,255,255,.08); border:0; color:#fff; font-weight:900; outline:0; }
.sabron-command-list { max-height:min(52vh, 420px); overflow:auto; padding:.75rem; display:grid; gap:.45rem; }
.sabron-command-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-radius:18px; padding:.85rem 1rem; color:#fff; text-decoration:none; background:rgba(255,255,255,.055); }
.sabron-command-item:hover, .sabron-command-item:focus { background:rgba(212,175,55,.20); outline:0; }
.sabron-quick-actions { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1rem; }
.sabron-quick-action-card { border:1px solid rgba(15,23,42,.08); border-radius:24px; padding:1rem; background:#fff; box-shadow:var(--sabron-shadow-sm); display:flex; align-items:center; gap:.85rem; text-decoration:none; color:#0f172a; }
.sabron-quick-action-card:hover { transform:translateY(-2px); box-shadow:var(--sabron-shadow-md); }

/* =========================================================
   SabronPro V90.8 — Phase 9I Ultra Continuation 2/5
   Microinteractions, Loading Feedback, Confirm Layer, Visual Response
   ========================================================= */
.sabron-motion-soft { transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.sabron-motion-soft:hover { transform:translateY(-1px); }
.sabron-pressable { transform:translateZ(0); transition:transform .12s ease, filter .12s ease; }
.sabron-pressable:active { transform:scale(.985); filter:saturate(1.08); }
.sabron-submit-busy, [aria-busy='true'] { position:relative; pointer-events:none; opacity:.78; }
.sabron-submit-busy::after, [aria-busy='true']::after { content:''; display:inline-block; width:1em; height:1em; margin-inline-start:.5rem; vertical-align:-.15em; border-radius:50%; border:2px solid currentColor; border-inline-start-color:transparent; animation:sabronSpin .75s linear infinite; }
@keyframes sabronSpin { to { transform:rotate(360deg); } }
.sabron-confirm-layer { position:fixed; inset:0; z-index:10030; display:none; place-items:center; padding:1rem; background:rgba(2,6,23,.56); backdrop-filter:blur(10px); }
.sabron-confirm-layer.is-open { display:grid; }
.sabron-confirm-card { width:min(460px, 100%); border-radius:28px; background:#fff; color:#0f172a; box-shadow:0 28px 90px rgba(0,0,0,.26); padding:1.35rem; }
.sabron-confirm-actions { display:flex; gap:.75rem; justify-content:flex-end; margin-top:1rem; }
.sabron-flash-highlight { animation:sabronFlashHighlight 1.1s ease both; }
@keyframes sabronFlashHighlight { 0% { box-shadow:0 0 0 0 rgba(212,175,55,.48); } 100% { box-shadow:0 0 0 18px rgba(212,175,55,0); } }
.sabron-ux-progress { position:fixed; top:0; inset-inline-start:0; height:3px; width:0; z-index:10040; background:linear-gradient(90deg,#d4af37,#f6d86b); box-shadow:0 0 18px rgba(212,175,55,.6); transition:width .22s ease, opacity .22s ease; }

/* =========================================================
   SabronPro V90.8 — Phase 9J Ultra Continuation 3/5
   Advanced Accessibility, Error Summary, Landmark QA, Keyboard Help
   ========================================================= */
.sabron-error-summary { border:2px solid #fecaca; background:#fef2f2; color:#7f1d1d; border-radius:22px; padding:1rem; margin-bottom:1rem; }
.sabron-error-summary a { color:#991b1b; font-weight:900; text-decoration:underline; }
.sabron-keyboard-help { position:fixed; inset:auto 16px 16px auto; z-index:10010; display:none; width:min(420px, calc(100vw - 32px)); border-radius:24px; padding:1rem; background:#0f172a; color:#fff; box-shadow:0 24px 80px rgba(2,6,23,.28); }
[dir='rtl'] .sabron-keyboard-help { right:auto; left:16px; }
.sabron-keyboard-help.is-open { display:block; }
.sabron-kbd { display:inline-flex; align-items:center; justify-content:center; min-width:28px; min-height:26px; padding:.15rem .45rem; border-radius:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); font-weight:900; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.sabron-landmark-outline [role='main'], .sabron-landmark-outline main { outline:2px dashed rgba(212,175,55,.55); outline-offset:4px; }
.sabron-visually-readable { max-width:72ch; line-height:1.85; font-size:var(--sabron-text-md); }
.sabron-color-safe .text-gray-400, .sabron-color-safe .text-slate-400 { color:#475569 !important; }
.sabron-required-mark::after { content:' *'; color:#dc2626; font-weight:950; }

/* =========================================================
   SabronPro V90.8 — Phase 9K Ultra Continuation 4/5
   Mobile Control, One-thumb UX, Installed PWA Shell, Touch Navigation
   ========================================================= */
.sabron-bottom-nav { position:fixed; inset:auto 10px max(10px, env(safe-area-inset-bottom)) 10px; z-index:88; display:none; grid-template-columns:repeat(4,1fr); gap:8px; padding:8px; border-radius:24px; background:rgba(255,255,255,.94); border:1px solid rgba(15,23,42,.10); box-shadow:0 20px 70px rgba(2,6,23,.18); backdrop-filter:blur(14px); }
.sabron-bottom-nav a { display:grid; place-items:center; gap:3px; min-height:50px; border-radius:18px; color:#334155; font-size:.74rem; font-weight:900; text-decoration:none; }
.sabron-bottom-nav a.is-active, .sabron-bottom-nav a:hover { background:#fff8df; color:#8a640e; }
@media (max-width:768px) { .sabron-bottom-nav[data-ready='true'] { display:grid; } body:has(.sabron-bottom-nav[data-ready='true']) { padding-bottom:88px; } }
.sabron-thumb-zone { position:sticky; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:50; display:flex; justify-content:flex-end; pointer-events:none; }
.sabron-thumb-zone > * { pointer-events:auto; }
.sabron-mobile-sheet { position:fixed; inset:auto 0 0 0; z-index:10025; max-height:82dvh; overflow:auto; transform:translateY(105%); transition:transform .24s ease; border-radius:28px 28px 0 0; background:#fff; box-shadow:0 -24px 90px rgba(2,6,23,.22); padding:1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.sabron-mobile-sheet.is-open { transform:translateY(0); }
@media (display-mode: standalone) { .sabron-pwa-shell body, body.sabron-uiux-phase9l { -webkit-tap-highlight-color: transparent; } .sabron-navbar { padding-top:env(safe-area-inset-top); } }
.sabron-swipe-hint { width:48px; height:5px; border-radius:999px; background:#cbd5e1; margin:.25rem auto 1rem; }

/* =========================================================
   SabronPro V90.8 — Phase 9L Ultra Continuation 5/5
   Final Visual QA Gate, Resilience, Readiness Markers
   ========================================================= */
.sabron-final-qa-panel { border:1px solid rgba(15,23,42,.08); border-radius:28px; background:linear-gradient(180deg,#fff,#f8fafc); box-shadow:var(--sabron-shadow-md); padding:1.25rem; }
.sabron-final-qa-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.sabron-final-qa-item { border-radius:22px; border:1px solid rgba(15,23,42,.08); background:#fff; padding:1rem; }
.sabron-final-qa-item[data-ok='true'] { border-color:#bbf7d0; background:#f0fdf4; }
.sabron-final-qa-item[data-ok='false'] { border-color:#fecaca; background:#fef2f2; }
.sabron-visual-regression-safe img { max-width:100%; height:auto; }
.sabron-overflow-guard { overflow-wrap:anywhere; word-break:break-word; }
.sabron-no-horizontal-scroll { max-width:100%; overflow-x:clip; }
.sabron-release-chip { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .75rem; border-radius:999px; background:#ecfeff; color:#0e7490; border:1px solid #a5f3fc; font-size:.78rem; font-weight:950; }
@media (max-width:420px) { .sabron-page-header-pro { border-radius:22px; } .sabron-command-panel { border-radius:22px; } .sabron-confirm-actions { flex-direction:column-reverse; } .sabron-confirm-actions > * { width:100%; justify-content:center; } }