/* ============================================================
   SPhone Service — shared styles for the production app.
   Same design tokens as the approved prototype: RTL, Vazirmatn,
   flat/pastel, orange accent, Light/Dark/Pure-Black themes.
   ============================================================ */

@font-face{ font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --brand-orange:#F2701A; --brand-orange-dark:#C9590F; --brand-orange-light:#FFE7D6;
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#F8F9FB; --border:#E4E6EB;
  --text:#17181C; --text-muted:#6B7280; --text-faint:#9AA1AC;
  --success:#1E9E5A; --success-bg:#E4F7EC;
  --yellow:#E0A400; --yellow-bg:#FFF6DC;
  --orange-warn:#E06A1B; --orange-warn-bg:#FFEADA;
  --danger:#D8402F; --danger-bg:#FCE7E4;
  --info:#2E6FE0; --info-bg:#E8EFFE;
  --pink:#D6336C; --pink-bg:#FCE4EC;
  --radius-sm:8px; --radius:12px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(20,20,25,.06); --shadow:0 4px 16px rgba(20,20,25,.08);
  --header-h:60px; --sidebar-w:252px;
}
[data-theme="dark"]{ --bg:#16171B; --surface:#1E2024; --surface-2:#232529; --border:#303338; --text:#F0F1F3; --text-muted:#A2A7B0; --text-faint:#71767F; --brand-orange-light:#3A2416; --success-bg:#123320; --yellow-bg:#332B0A; --orange-warn-bg:#3A2312; --danger-bg:#3A1714; --info-bg:#12213E; --pink-bg:#3A1626; }
[data-theme="black"]{ --bg:#000; --surface:#000; --surface-2:#0B0B0C; --border:#232323; --text:#F2F2F2; --text-muted:#9A9A9A; --text-faint:#6E6E6E; --brand-orange-light:#2A1A0F; --success-bg:#0E2417; --yellow-bg:#262009; --orange-warn-bg:#2A190C; --danger-bg:#2A1210; --info-bg:#0D1930; --pink-bg:#25101B; }

*{ box-sizing:border-box; }
html{ overflow-x:hidden; }
body{ margin:0; direction:rtl; text-align:right; font-family:'Vazirmatn',Tahoma,sans-serif; background:var(--bg); color:var(--text); font-size:15px; line-height:1.75; }
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:700; }
p{ margin:0 0 1em; color:var(--text-muted); }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
.ic{ display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; }
.ic svg{ width:100%; height:100%; display:block; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:42px; padding:0 18px; border-radius:var(--radius-sm); border:1px solid transparent; background:var(--surface-2); color:var(--text); font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap; }
.btn-sm{ height:34px; padding:0 13px; font-size:13px; border-radius:8px; }
.btn-block{ width:100%; }
.btn-primary{ background:var(--brand-orange); color:#fff; }
.btn-outline{ background:transparent; border-color:var(--border); }
.btn-ghost{ background:transparent; }
.btn-danger{ background:var(--danger-bg); color:var(--danger); }
.btn-icon{ width:40px; height:40px; padding:0; border-radius:10px; }
.btn-icon.btn-sm{ width:32px; height:32px; border-radius:8px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.field{ margin-bottom:16px; } .field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.input,.select,textarea.input{ width:100%; height:44px; padding:0 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); color:var(--text); }
.input:focus,.select:focus,textarea.input:focus{ border-color:var(--brand-orange); box-shadow:0 0 0 3px var(--brand-orange-light); outline:none; }
textarea.input{ height:auto; min-height:90px; padding:12px 14px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.card-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.badge-success{ background:var(--success-bg); color:var(--success); }
.badge-yellow{ background:var(--yellow-bg); color:var(--yellow); }
.badge-orange{ background:var(--orange-warn-bg); color:var(--orange-warn); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }
.badge-info{ background:var(--info-bg); color:var(--info); }
.badge-neutral{ background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }

.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
table.data-table{ width:100%; border-collapse:collapse; }
.data-table th{ text-align:right; font-size:12px; color:var(--text-muted); font-weight:600; background:var(--surface-2); padding:12px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td{ padding:12px 14px; border-bottom:1px solid var(--border); font-size:13.5px; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.row-actions{ display:flex; gap:6px; flex-wrap:wrap; }

.alert{ padding:14px 16px; border-radius:var(--radius-sm); font-size:13px; }
.alert-danger{ background:var(--danger-bg); color:var(--danger); }
.alert-info{ background:var(--info-bg); color:var(--info); }
.alert-success{ background:var(--success-bg); color:var(--success); }

.flex{ display:flex; flex-wrap:wrap; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-1{ gap:6px; } .gap-2{ gap:10px; }
.text-muted{ color:var(--text-muted); } .text-faint{ color:var(--text-faint); }
.text-sm{ font-size:12.5px; } .fw-600{ font-weight:600; }
.hidden{ display:none!important; }

/* Layout: sidebar + topbar (shared shell, included via partials/header.php + footer.php) */
.app-shell{ min-height:100vh; display:flex; }
.sidebar{ width:var(--sidebar-w); flex-shrink:0; background:var(--surface); border-left:1px solid var(--border); position:fixed; top:0; right:0; bottom:0; z-index:40; display:flex; flex-direction:column; transition:transform .2s ease; }
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border); }
.sidebar-brand .logo{ width:36px; height:36px; border-radius:10px; background:var(--brand-orange); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.sidebar-nav{ padding:10px; overflow-y:auto; flex:1; }
.sidebar-nav .group-label{ font-size:11px; color:var(--text-faint); font-weight:700; margin:14px 10px 6px; text-transform:uppercase; }
.nav-link{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--text-muted); font-size:13.5px; font-weight:600; margin-bottom:2px; cursor:pointer; }
.nav-link .ic{ font-size:17px; }
.nav-link:hover{ background:var(--surface-2); color:var(--text); }
.nav-link.active{ background:var(--brand-orange-light); color:var(--brand-orange-dark); }
[data-theme="dark"] .nav-link.active,[data-theme="black"] .nav-link.active{ color:var(--brand-orange); }

.main{ flex:1; margin-right:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }
.topbar{ height:var(--header-h); position:sticky; top:0; z-index:30; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; padding:0 16px; }
.topbar .page-title{ font-weight:700; font-size:15px; }
.topbar .spacer{ flex:1; }
.icon-btn{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border:1px solid var(--border); cursor:pointer; color:var(--text-muted); }
.menu-btn{ display:none; }
.theme-switch{ display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:5px 7px; }
.swatch{ width:19px; height:19px; border-radius:50%; border:2px solid var(--border); cursor:pointer; padding:0; }
.swatch-light{ background:#fff; } .swatch-dark{ background:#2b2d31; } .swatch-blk{ background:#000; }
.swatch.active{ border-color:var(--brand-orange); box-shadow:0 0 0 2px var(--brand-orange-light); }

.page{ padding:20px; max-width:1280px; flex:1; }
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:39; opacity:0; pointer-events:none; transition:opacity .2s; }
.overlay.show{ opacity:1; pointer-events:auto; }
@media (max-width:980px){ .sidebar{ transform:translateX(101%); } .sidebar.open{ transform:translateX(0); } .main{ margin-right:0; } .menu-btn{ display:flex; } .hide-sm{ display:none!important; } }

.panel-footer{ text-align:center; padding:16px; font-size:11.5px; color:var(--text-faint); border-top:1px solid var(--border); }

.modal-back{ position:fixed; inset:0; background:rgba(10,10,12,.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.modal-back.show{ opacity:1; pointer-events:auto; }
.modal{ background:var(--surface); border-radius:var(--radius-lg); max-width:460px; width:100%; padding:22px; box-shadow:var(--shadow); max-height:88vh; overflow-y:auto; transform:translateY(10px) scale(.97); opacity:0; transition:transform .2s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.modal-back.show .modal{ transform:translateY(0) scale(1); opacity:1; }
.modal.modal-lg{ max-width:640px; }
.modal-foot{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
[data-ajax-row].is-done [data-toggle-text]{ text-decoration:line-through; color:var(--text-faint); }

/* Smooth, non-flashy transitions for anything that changes state in place */
.data-table tbody tr, [data-ajax-row], .card, .btn, .nav-link{ transition:background-color .25s ease, border-color .2s ease, opacity .2s ease; }
.icon-btn, .swatch{ transition:background-color .2s ease, transform .15s ease; }
.icon-btn:active, .btn:active{ transform:scale(.96); }
.toast{ animation:toast-in .22s cubic-bezier(.22,1,.36,1); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.overlay{ transition:opacity .25s ease; }
.sidebar{ transition:transform .25s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce){
  .modal, .modal-back, .data-table tbody tr, [data-ajax-row], .card, .btn, .nav-link, .icon-btn, .swatch, .toast, .overlay, .sidebar{ transition:none!important; animation:none!important; }
}

.toast-wrap{ position:fixed; bottom:20px; left:20px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast{ background:var(--text); color:var(--bg); padding:12px 16px; border-radius:10px; font-size:13px; box-shadow:var(--shadow); }

/* Skeleton loading placeholders — used on pages with several slow queries (stats.php) */
.skeleton{ background:linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%); background-size:400% 100%; animation:skeleton-shimmer 1.4s ease infinite; border-radius:8px; }
@keyframes skeleton-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
.skeleton-line{ height:14px; margin-bottom:8px; }
.skeleton-block{ height:210px; }
.skeleton-card{ height:70px; }
@media (prefers-reduced-motion: reduce){ .skeleton{ animation:none; } }

.privacy-overlay{ position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center; background:rgba(15,15,18,.4); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); opacity:0; pointer-events:none; transition:opacity .2s; cursor:pointer; }
.privacy-overlay.show{ opacity:1; pointer-events:auto; }
.privacy-card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:30px 40px; text-align:center; }

/* Login screen */
.login-screen{ background:var(--bg); display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-wrap{ width:100%; max-width:400px; }
.login-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 28px; box-shadow:var(--shadow); }
.login-logo{ width:54px; height:54px; border-radius:16px; background:var(--brand-orange); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:19px; margin:0 auto 14px; }
.login-title{ text-align:center; font-size:17px; font-weight:700; margin-bottom:2px; }
.login-sub{ text-align:center; font-size:13px; color:var(--text-muted); margin-bottom:20px; }
.support-line{ text-align:center; font-size:12.5px; color:var(--text-faint); margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.support-line b{ color:var(--brand-orange); direction:ltr; display:inline-block; }
.forgot-line{ text-align:center; font-size:12.5px; color:var(--text-faint); margin-top:16px; }
.login-footer{ text-align:center; font-size:11.5px; color:var(--text-faint); margin-top:20px; line-height:2; }

/* AJAX navigation progress bar — thin strip at the very top, appears
   during a background page-fetch so a slower connection doesn't feel
   frozen/unresponsive; invisible and inert otherwise. */
#navProgressBar{ position:fixed; top:0; right:0; left:0; height:3px; background:var(--brand-orange); width:0%; opacity:0; z-index:999; transition:width .3s ease, opacity .2s ease; pointer-events:none; }
#navProgressBar.active{ width:80%; opacity:1; transition:width 2.5s cubic-bezier(0.1,0.8,0.3,1), opacity .2s ease; }