/* SpicyWiFi Unified Typography & Readability System v308
   One visual baseline for Web / Android / iOS.
   Readex Pro is preferred for Arabic/Kurdish/English; platform fallbacks remain
   available when the hosted font cannot be reached. */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;600;700;800&display=swap');

:root{
  --sp-ui-font:"Readex Pro","IBM Plex Sans Arabic","Tajawal","Segoe UI",Tahoma,Arial,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --sp-ui-font-mono:"Cascadia Code",Consolas,"SFMono-Regular",monospace;
  --sp-ui-accent:#ff8a00;
  --sp-ui-accent-2:#ff9f1a;
  --sp-ui-bg:#07101b;
  --sp-ui-surface:#0b1522;
  --sp-ui-card:#0f1a2a;
  --sp-ui-card-2:#121f31;
  --sp-ui-border:#2b3c53;
  --sp-ui-border-soft:#223147;
  --sp-ui-text:#ffffff;
  --sp-ui-text-soft:#e4ebf4;
  --sp-ui-muted:#bcc8d7;
  --sp-ui-muted-2:#a2b1c4;
  --sp-ui-green:#35d17d;
  --sp-ui-red:#ff5b6f;
  --sp-ui-blue:#6c86ff;
  --sp-ui-purple:#9672ff;
  --sp-ui-radius:14px;
  --sp-ui-shadow:0 14px 38px rgba(0,0,0,.18);
}

html,body,button,input,select,textarea,option{
  font-family:var(--sp-ui-font)!important;
  font-feature-settings:"kern" 1,"liga" 1;
}
html[lang="ar"],html[lang="ckb"]{letter-spacing:0!important}
html[lang="ar"] body,html[lang="ckb"] body{line-height:1.78}
html[lang="en"] body{line-height:1.62}
html{font-size:16px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{color:var(--sp-ui-text);font-size:16px;font-weight:500}
button,input,select,textarea{font-size:15px;line-height:1.5}
button{font-weight:700}
input,select,textarea{color:var(--sp-ui-text)!important}
input::placeholder,textarea::placeholder{color:var(--sp-ui-muted)!important;opacity:1}
h1,h2,h3,h4,h5,h6{font-family:inherit!important;color:var(--sp-ui-text);font-weight:800!important;line-height:1.38!important;letter-spacing:0!important}
p,label,span,td,th,li,a{font-family:inherit}
small,.muted,.text-muted,.hint,.meta,.description,.subtitle{color:var(--sp-ui-muted)!important}

/* Navigation */
.v3-enterprise #sideNav button,.sidebar nav button{
  font-size:15px!important;font-weight:650!important;min-height:46px!important;
  line-height:1.5!important;padding-block:10px!important;
}
.v3-nav-section{font-size:13px!important;color:var(--sp-ui-muted-2)!important;font-weight:750!important;margin-top:16px!important}
.v3-enterprise .brand b{font-size:21px!important;font-weight:800!important}
.v3-enterprise .brand span{font-size:13px!important;color:var(--sp-ui-accent)!important;font-weight:700!important}
.v3-enterprise .language-select,.v3-enterprise .theme-toggle,.language-select,.theme-toggle{font-size:14px!important;font-weight:700!important;min-height:42px!important}
.v3-global-search input{font-size:15px!important;min-height:46px!important}

/* Dashboard KPI hierarchy */
.v3-kpi{border-color:var(--sp-ui-border)!important;background:linear-gradient(180deg,var(--sp-ui-card),var(--sp-ui-surface))!important;padding:18px!important}
.v3-kpi small{font-size:14.5px!important;line-height:1.55!important;color:var(--sp-ui-text-soft)!important;font-weight:600!important}
.v3-kpi strong{font-size:32px!important;line-height:1.12!important;font-weight:800!important;letter-spacing:-.015em!important}
.v3-kpi em{font-size:13.5px!important;line-height:1.55!important;color:var(--sp-ui-muted)!important;font-style:normal!important}
.v3-panel{border-color:var(--sp-ui-border)!important;background:linear-gradient(180deg,var(--sp-ui-card),var(--sp-ui-surface))!important;box-shadow:var(--sp-ui-shadow)}
.v3-panel-head{padding-bottom:4px!important}
.v3-panel-head h3{font-size:19px!important;font-weight:800!important}
.v3-panel-head span,.v3-panel-head button{font-size:13.5px!important;font-weight:600!important}
.v3-chart-empty{font-size:15px!important;line-height:1.7!important;color:var(--sp-ui-muted)!important}
.v3-donut-center b{font-size:27px!important;font-weight:800!important}.v3-donut-center small{font-size:13px!important}
.v3-status-row{font-size:14.5px!important;line-height:1.55!important;border-color:var(--sp-ui-border-soft)!important;padding:12px 14px!important}
.v3-status-row small{font-size:13px!important;color:var(--sp-ui-muted)!important}
.v3-plan-list{font-size:14px!important;line-height:1.55!important}.v3-plan-list b{font-size:14.5px!important}
.v3-alert b{font-size:14.5px!important}.v3-alert small{font-size:13px!important;color:var(--sp-ui-muted)!important}
.v3-tx{font-size:14px!important}.v3-quick b{font-size:14.5px!important}.v3-quick small{font-size:13px!important;color:var(--sp-ui-muted)!important}

/* Tables / forms: never shrink operational text below readable dashboard size */
.v3-table,.table-card table,.v3-core-table table,table{font-size:15px!important;line-height:1.55!important}
.v3-table th,.table-card th,.v3-core-table th,table th{font-size:14px!important;color:var(--sp-ui-text-soft)!important;font-weight:750!important;padding:12px 14px!important;white-space:nowrap}
.v3-table td,.table-card td,.v3-core-table td,table td{font-size:15px!important;color:var(--sp-ui-text-soft)!important;padding:12px 14px!important;vertical-align:middle}
.v3-sub-name b{font-size:15px!important;font-weight:700!important}.v3-sub-name small{font-size:13px!important;color:var(--sp-ui-muted)!important}
.form-grid,.credential-form{gap:14px!important}
.form-grid label,.credential-form label,.target-label{font-size:14px!important;line-height:1.55!important;color:var(--sp-ui-text-soft)!important;font-weight:650!important}
.form-grid input,.form-grid select,.form-grid textarea,.credential-form input,.credential-form select,.toolbar input,.toolbar select{font-size:15px!important;min-height:44px!important;padding-block:9px!important}
.primary{background:linear-gradient(135deg,var(--sp-ui-accent-2),var(--sp-ui-accent))!important;color:#111827!important;font-weight:800!important;min-height:42px}
.ghost{font-weight:700!important;min-height:40px}

/* Login */
.login-card-head h2{font-size:27px!important}.login-card-head p{font-size:14px!important;color:var(--sp-ui-muted)!important}
.login-card-pro label{font-size:14.5px!important;font-weight:700!important}.login-card-pro .input-shell input{font-size:16px!important}
.login-submit{font-size:17px!important;min-height:54px}.brand-lockup p,.showcase-copy p{color:var(--sp-ui-muted)!important;font-size:14px!important;line-height:1.7!important}
.showcase-features b{font-size:14.5px!important}.showcase-features small{font-size:13px!important;color:var(--sp-ui-muted)!important;line-height:1.55!important}

/* Direction / mixed technical content */
html[dir="ltr"] .v3-enterprise #sideNav button,html[dir="ltr"] .sidebar nav button{text-align:left}
html[dir="rtl"] .v3-enterprise #sideNav button,html[dir="rtl"] .sidebar nav button{text-align:right}
.terminal,code,pre{font-family:var(--sp-ui-font-mono)!important;direction:ltr;text-align:left}

/* Unified dark surfaces */
html[data-theme="dark"] body.v3-enterprise,html[data-theme="dark"] body{--v3-bg:var(--sp-ui-bg);--v3-text:var(--sp-ui-text);--v3-muted:var(--sp-ui-muted);--v3-line:var(--sp-ui-border);--v3-orange:var(--sp-ui-accent)}
html[data-theme="dark"] .v3-enterprise .sidebar{background:#070f1a!important}
html[data-theme="dark"] .v3-enterprise .topbar{background:rgba(7,15,26,.96)!important}
html[data-theme="dark"] .v3-status-row,html[data-theme="dark"] .v3-alert,html[data-theme="dark"] .v3-quick{background:var(--sp-ui-card-2)!important}

/* Unified light palette / stronger WCAG-friendly contrast */
html[data-theme="light"] body,html[data-theme="light"] body.v3-enterprise{
  --v3-bg:#f3f6fa;--v3-surface:#fff;--v3-card:#fff;--v3-card-2:#f8fafc;--v3-line:#d2dce8;--v3-text:#142033;--v3-muted:#52657d;
  --sp-ui-text:#142033;--sp-ui-text-soft:#27384f;--sp-ui-muted:#52657d;--sp-ui-muted-2:#61758d;--sp-ui-border:#d2dce8;--sp-ui-border-soft:#dee6ef;
  color:#142033!important;background:#f3f6fa!important;
}
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,html[data-theme="light"] h4,html[data-theme="light"] h5,html[data-theme="light"] h6{color:#142033!important}
html[data-theme="light"] small,html[data-theme="light"] .muted,html[data-theme="light"] .text-muted,html[data-theme="light"] .hint,html[data-theme="light"] .meta{color:#52657d!important}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{color:#142033!important;background:#fff!important;border-color:#d2dce8!important}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#64778e!important}
html[data-theme="light"] .v3-kpi,html[data-theme="light"] .v3-panel{background:#fff!important;border-color:#d2dce8!important;box-shadow:0 8px 24px rgba(31,55,84,.06)}
html[data-theme="light"] .v3-status-row,html[data-theme="light"] .v3-alert,html[data-theme="light"] .v3-quick{background:#f8fafc!important;border-color:#d9e2ec!important;color:#22344a!important}
html[data-theme="light"] .v3-table td,html[data-theme="light"] .table-card td,html[data-theme="light"] .v3-core-table td{color:#27384f!important}
html[data-theme="light"] .v3-table th,html[data-theme="light"] .table-card th,html[data-theme="light"] .v3-core-table th{color:#455a72!important}
html[data-theme="light"] .v3-enterprise #sideNav button{color:#3c526b!important}
html[data-theme="light"] .v3-enterprise #sideNav button:hover{color:#142033!important;background:#edf3f8!important}

/* Accessibility */
:focus-visible{outline:2px solid var(--sp-ui-accent)!important;outline-offset:2px!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media(max-width:700px){
  html{font-size:16px}
  body{font-size:16px}
  .v3-enterprise .content{padding-inline:12px!important}
  .v3-enterprise #sideNav button,.sidebar nav button{font-size:15px!important}
  .v3-kpi{padding:16px!important}.v3-kpi small{font-size:14px!important}.v3-kpi strong{font-size:29px!important}.v3-kpi em{font-size:13px!important}
  .v3-panel-head h3{font-size:18px!important}
  .login-card-head h2{font-size:25px!important}
  .language-select{min-width:100px!important}
  .v3-table,.table-card table,.v3-core-table table,table{font-size:14.5px!important}
  .v3-table th,.table-card th,.v3-core-table th,table th{font-size:13.5px!important;padding:11px 12px!important}
  .v3-table td,.table-card td,.v3-core-table td,table td{font-size:14.5px!important;padding:11px 12px!important}
}