@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; font-family:'Vazirmatn',Tahoma,sans-serif; }

:root, [data-theme="بنفش"] {
  --primary:#4f46e5; --gradient:linear-gradient(135deg,#4f46e5,#7c3aed);
  --bg:#f1f5f9; --card:#fff; --text:#1e293b; --muted:#64748b;
  --border:#e2e8f0; --sidebar-bg:#0f172a; --sidebar-text:#cbd5e1;
  --success:#22c55e; --danger:#ef4444; --warning:#f59e0b;
  --accent:#7c3aed;
  --radius:16px; --shadow:0 10px 25px -5px rgba(0,0,0,.1); --shadow-lg:0 25px 50px -12px rgba(0,0,0,.25);
}
[data-theme="آبی اقیانوسی"] {
  --primary:#0284c7; --gradient:linear-gradient(135deg,#0284c7,#0ea5e9);
  --bg:#eef6fc; --card:#ffffff; --text:#0c2433; --muted:#4b6a7d;
  --border:#cfe6f4; --sidebar-bg:#0b3a5c; --sidebar-text:#cfe8f7;
  --success:#059669; --danger:#dc2626; --warning:#d97706;
  --accent:#0ea5e9;
  --shadow:0 10px 25px -5px rgba(2,132,199,.18); --shadow-lg:0 25px 50px -12px rgba(2,132,199,.35);
}
[data-theme="سبز زمردی"] {
  --primary:#059669; --gradient:linear-gradient(135deg,#059669,#10b981);
  --bg:#eefaf2; --card:#ffffff; --text:#10251c; --muted:#4d6b5e;
  --border:#c3ead4; --sidebar-bg:#06382a; --sidebar-text:#c9f2df;
  --success:#16a34a; --danger:#dc2626; --warning:#d97706;
  --accent:#10b981;
  --shadow:0 10px 25px -5px rgba(5,150,105,.18); --shadow-lg:0 25px 50px -12px rgba(5,150,105,.32);
}
[data-theme="صورتی رز"] {
  --primary:#db2777; --gradient:linear-gradient(135deg,#db2777,#ec4899);
  --bg:#fdf0f5; --card:#ffffff; --text:#31141f; --muted:#7d5061;
  --border:#f4c6d8; --sidebar-bg:#4a0f28; --sidebar-text:#f6cfe0;
  --success:#e11d48; --danger:#dc2626; --warning:#d97706;
  --accent:#ec4899;
  --shadow:0 10px 25px -5px rgba(219,39,119,.18); --shadow-lg:0 25px 50px -12px rgba(219,39,119,.32);
}
[data-theme="نارنجی کهربایی"] {
  --primary:#ea580c; --gradient:linear-gradient(135deg,#ea580c,#f59e0b);
  --bg:#fff8ef; --card:#ffffff; --text:#2b1a07; --muted:#7d6a4e;
  --border:#ffddb0; --sidebar-bg:#3a1f02; --sidebar-text:#ffe2bd;
  --success:#ca8a04; --danger:#dc2626; --warning:#ea580c;
  --accent:#f59e0b;
  --shadow:0 10px 25px -5px rgba(234,88,12,.18); --shadow-lg:0 25px 50px -12px rgba(234,88,12,.32);
}
[data-theme="شب تیره"] {
  --primary:#818cf8; --gradient:linear-gradient(135deg,#6366f1,#a78bfa);
  --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --muted:#94a3b8;
  --border:#334155; --sidebar-bg:#020617; --sidebar-text:#cbd5e1;
  --success:#34d399; --danger:#f87171; --warning:#fbbf24;
  --accent:#a78bfa;
  --shadow:0 10px 25px -5px rgba(0,0,0,.5); --shadow-lg:0 25px 50px -12px rgba(0,0,0,.7);
}
[data-theme="جنگل سوئیس"] {
  --primary:#166534; --gradient:linear-gradient(135deg,#14532d,#16a34a 60%,#4d7c0f);
  --bg:#e6efe7; --card:#ffffff; --text:#14281a; --muted:#55705c;
  --border:#c4dcc7; --sidebar-bg:#0d2b18; --sidebar-text:#cde8d4;
  --success:#16a34a; --danger:#dc2626; --warning:#d97706;
  --accent:#4d7c0f;
  --shadow:0 10px 25px -5px rgba(22,101,52,.18); --shadow-lg:0 25px 50px -12px rgba(22,101,52,.32);
}
[data-theme="کوهستان"] {
  --primary:#475569; --gradient:linear-gradient(135deg,#334155,#64748b 55%,#94a3b8);
  --bg:#edf1f5; --card:#ffffff; --text:#1c2733; --muted:#5b6b7a;
  --border:#cfd9e2; --sidebar-bg:#1e293b; --sidebar-text:#d3dde6;
  --success:#059669; --danger:#dc2626; --warning:#d97706;
  --accent:#64748b;
  --shadow:0 10px 25px -5px rgba(71,85,105,.18); --shadow-lg:0 25px 50px -12px rgba(71,85,105,.32);
}
[data-theme="صحرا"] {
  --primary:#b45309; --gradient:linear-gradient(135deg,#92400e,#d97706 55%,#fbbf24);
  --bg:#faf1e3; --card:#fffdf8; --text:#33230f; --muted:#7d6a4e;
  --border:#eed9b5; --sidebar-bg:#3a2408; --sidebar-text:#f3ddb8;
  --success:#65a30d; --danger:#dc2626; --warning:#ea580c;
  --accent:#d97706;
  --shadow:0 10px 25px -5px rgba(180,83,9,.18); --shadow-lg:0 25px 50px -12px rgba(180,83,9,.32);
}

body { background:var(--bg); color:var(--text); min-height:100vh; transition:background .4s ease, color .4s ease; }
.muted { color:var(--muted); }
#app-root { min-height:100vh; }

/* ============ Auth - Pharmacy Interior + Transparent Box + Real Pharmacist ============ */
.auth-page { display:flex; justify-content:center; align-items:center; min-height:100vh; padding:20px; position:relative; overflow:hidden;
  background: url('/assets/pharmacy-interior.jpg') center/cover no-repeat fixed;
  cursor: auto; }
.auth-page::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(241,245,249,0.92) 50%, rgba(224,242,254,0.85) 100%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events:none; }
.auth-card { background: rgba(255,255,255,0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border:1px solid rgba(255,255,255,0.7); border-radius:28px; padding:0; width:100%; max-width:540px; box-shadow: 0 25px 80px -15px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.9) inset; animation: fadeUp .7s cubic-bezier(.16,1,.3,1); overflow:hidden; position:relative; z-index:10; }
.auth-card::before { content:''; position:absolute; inset:0; background-image: url('/assets/pharmacy-banner.jpg'); background-size: 92% auto; background-position: center 48%; background-repeat: no-repeat; opacity:0.09; pointer-events:none; z-index:0; filter: saturate(0.9) contrast(0.95); }
.auth-card::after { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: var(--gradient); z-index:2; }
[data-theme="شب تیره"] .auth-card { background: rgba(30,41,59,0.92); border-color: rgba(255,255,255,0.15); }
[data-theme="شب تیره"] .auth-card::before { opacity:0.04; }
.pharmacy-banner { display:none; }
.pharmacy-banner-wrap { display:none; }
.auth-card-inner { padding:32px 36px 36px; position:relative; z-index:1; }
.auth-logo { font-size:52px; text-align:center; filter: drop-shadow(0 4px 12px rgba(79,70,229,0.3)); animation: floatLogo 3s ease-in-out infinite; }
.auth-title { text-align:center; font-size:24px; font-weight:800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin:10px 0 6px; letter-spacing:-0.5px; }
.auth-sub { text-align:center; color:var(--muted); font-size:13.5px; margin-bottom:22px; font-weight:500; }
@keyframes floatLogo { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.auth-form .form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.form-input { width:100%; padding:11px 14px; border:2px solid var(--border); border-radius:12px; font-size:15px; transition:all .3s; background:#f8fafc; }
.form-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(79,70,229,.1); background:#fff; }
select.form-input { cursor:pointer; background:#fff; color:#0f172a; color-scheme:light; }
select.form-input option { color:#0f172a; background:#fff; }
textarea.form-input { resize:vertical; }
.auth-card .form-group { position:relative; }
.auth-card .form-input { background: rgba(248,250,252,0.85); border:2px solid rgba(226,232,240,0.9); backdrop-filter: blur(4px); font-weight:500; }
.auth-card .form-input:focus { background:#fff; border-color:var(--primary); box-shadow: 0 0 0 4px rgba(79,70,229,0.12), 0 8px 20px rgba(79,70,229,0.1); transform: translateY(-1px); }
.auth-card .btn-primary { background: var(--gradient); position:relative; overflow:hidden; font-weight:700; letter-spacing:0.3px; padding:13px 24px; font-size:15px; box-shadow: 0 8px 20px -6px rgba(79,70,229,0.5); }
.auth-card .btn-primary::before { content:''; position:absolute; inset:0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: translateX(-100%); transition: transform .6s; }
.auth-card .btn-primary:hover::before { transform: translateX(100%); }
.auth-card .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(79,70,229,0.6); }
.auth-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.auth-particle { position:absolute; width:4px; height:4px; background: rgba(255,255,255,0.6); border-radius:50%; animation: particleFloat 6s ease-in-out infinite; }
#login-eyes { display:flex; justify-content:center; gap:22px; margin:0 auto 14px; padding:6px 0 2px; }
#login-eyes .eye { width:34px; height:34px; background:#fff; border:2.5px solid #0ea5e9; border-radius:50%; position:relative; overflow:hidden; box-shadow:0 3px 10px rgba(14,165,233,0.15); transition: transform 0.12s; }
#login-eyes .pupil { width:14px; height:14px; background: radial-gradient(circle, #0f172a 0%, #1e3a5f 100%); border-radius:50%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); transition: transform 0.12s ease-out; }
#login-eyes .pupil::after { content:''; position:absolute; width:4px; height:4px; background:#fff; border-radius:50%; top:3px; left:3px; opacity:0.9; }
@keyframes particleFloat { 0%,100%{transform:translateY(0) translateX(0); opacity:0.6} 50%{transform:translateY(-30px) translateX(10px); opacity:1} }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border:none; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; transition:all .3s cubic-bezier(.4,0,.2,1); color:#fff; text-decoration:none; font-family:inherit; }
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); filter:brightness(1.05); }
.btn:active { transform:translateY(0) scale(.97); }
.btn-primary { background:var(--gradient); }
.btn-success { background:var(--success); }
.btn-danger { background:var(--danger); }
.btn-warning { background:var(--warning); }
.btn-info { background:var(--primary); }
.btn-ghost { background:#e2e8f0; color:var(--text); }
.btn-outline { background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn-block { width:100%; }
.btn-sm { padding:7px 13px; font-size:12.5px; border-radius:10px; }
.btn-lift:hover { box-shadow:var(--shadow-lg); }

.btn-shine { position:relative; overflow:hidden; }
.btn-shine::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent); animation:shine 3s infinite; }
@keyframes shine { 0%{left:-60%} 60%{left:120%} 100%{left:120%} }

/* ============ Layout ============ */
.sidebar { width:260px; background:var(--sidebar-bg); color:var(--sidebar-text); min-height:100vh; position:fixed; right:0; top:0; display:flex; flex-direction:column; transition:transform .4s ease; z-index:100; box-shadow:4px 0 20px rgba(0,0,0,.2); }
.sidebar-header { padding:22px 18px; border-bottom:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:12px; }
.logo-mini { font-size:34px; filter:drop-shadow(0 0 12px rgba(139,92,246,.6)); }
.brand { display:flex; align-items:center; gap:12px; }
.pharmacy-name { font-size:15px; font-weight:800; color:var(--text); }
.user-info { font-size:13px; color:var(--muted); line-height:1.5; }
.user-info strong { font-size:16px; color:var(--text); font-weight:800; display:block; margin-bottom:2px; }
.user-info .badge-role { background:var(--gradient); color:#fff; font-size:10px; padding:2px 8px; border-radius:20px; margin-inline-start:3px; }
.nav-menu { list-style:none; padding:14px 10px; flex:1; overflow-y:auto; }
.nav-link { display:flex; align-items:center; gap:12px; padding:11px 15px; border-radius:12px; color:var(--sidebar-text); text-decoration:none; font-size:14px; margin-bottom:4px; transition:all .3s; cursor:pointer; }
.nav-link:hover { background:rgba(255,255,255,.08); color:#fff; transform:translateX(-5px); }
.nav-link.active { background:var(--gradient); color:#fff; box-shadow:0 10px 20px -10px color-mix(in srgb, var(--primary) 60%, transparent); }
.sidebar-status { padding:14px 18px; font-size:13px; border-top:1px solid rgba(255,255,255,.1); }

.main-content { flex:1; margin-right:260px; padding:0; transition:margin .4s ease; min-height:100vh; }
.topbar { background:var(--card); padding:16px 26px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow); position:sticky; top:0; z-index:50; transition:background .4s ease, color .4s ease; }
.topbar h2 { font-size:20px; font-weight:800; color:var(--primary); }
.topbar-left { margin-inline-start:auto; display:flex; align-items:center; gap:12px; }
.hamburger { display:none; background:none; border:none; font-size:26px; cursor:pointer; }
.status-tag { padding:7px 15px; border-radius:20px; font-size:13px; font-weight:600; }
.status-open { background:#dcfce7; color:#166534; }
.status-closed { background:#fee2e2; color:#991b1b; }

.content-area { padding:28px; animation:fadeIn .4s ease; }

/* ============ Cards & grid ============ */
.card { background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); margin-bottom:20px; transition:all .4s ease; }
.card:hover { box-shadow:var(--shadow-lg); }
.card-title { font-size:17px; font-weight:700; margin-bottom:14px; color:var(--text); }
.card-anim { animation:fadeUp .4s ease; }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; margin-bottom:22px; }.stat-card { background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:all .3s; }
.stat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.report-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.report-tab.active { box-shadow:var(--shadow); }
.user-code { font-size:11px; color:var(--muted); direction:ltr; display:inline-block; margin-inline-start:6px; }
.stat-icon { font-size:30px; }
.stat-label { font-size:13px; color:var(--muted); }
.stat-value { font-size:26px; font-weight:800; }
.stat-card::after { content:''; position:absolute; top:0; right:0; width:6px; height:100%; }
.stat-card.green::after{background:var(--success)} .stat-card.blue::after{background:var(--primary)}
.stat-card.yellow::after{background:var(--warning)} .stat-card.red::after{background:var(--danger)}

/* ============ Table ============ */
.table-responsive { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { background:#f8fafc; text-align:right; padding:11px 13px; font-weight:700; color:var(--muted); border-bottom:2px solid var(--border); white-space:nowrap; }
td { padding:11px 13px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
tbody tr { transition:background .2s; }
tbody tr:hover { background:#f8fafc; }

.badge { display:inline-block; padding:3px 11px; border-radius:20px; font-size:12px; font-weight:600; }
.badge-green{background:#dcfce7;color:#166534} .badge-red{background:#fee2e2;color:#991b1b}
.badge-yellow{background:#fef9c3;color:#854d0e} .badge-blue{background:#dbeafe;color:#1e40af}
.badge-purple{background:#ede9fe;color:#6d28d9} .badge-gray{background:#f1f5f9;color:#475569}

.tag { display:inline-flex; align-items:center; gap:4px; background:#ede9fe; color:#6d28d9; padding:3px 9px; border-radius:18px; font-size:11.5px; font-weight:600; margin:2px; }
.tag-rel { background:#dbeafe; color:#1e40af; }
.tag-cust { background:#fef3c7; color:#92400e; }

.wait-zone { padding:6px 13px; border-radius:10px; font-weight:700; font-size:12.5px; color:#fff; display:inline-block; animation:pulse 2s infinite; }
.zone-green{background:var(--success)} .zone-yellow{background:var(--warning)} .zone-red{background:var(--danger)}

/* ============ Timeline ============ */
.timeline { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.timeline-step { padding:5px 12px; border-radius:20px; font-size:11.5px; font-weight:600; background:#f1f5f9; color:var(--muted); transition:all .3s; }
.timeline-step.done { background:var(--success); color:#fff; }
.timeline-step.current { background:var(--warning); color:#fff; animation:pulse 2s infinite; }

/* ============ Form layout ============ */
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:14px; }
.action-inline { display:flex; gap:6px; flex-wrap:wrap; }

/* ============ Modal ============ */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.7); backdrop-filter:blur(4px); display:flex; justify-content:center; align-items:center; z-index:200; opacity:0; transition:opacity .25s; }
.modal-overlay.show { opacity:1; }
.modal.modal-wide { max-width:1200px; width:96%; padding:22px 26px; }
.lt-compass { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:500; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.94); box-shadow:0 2px 8px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; }
.lt-compass .needle { font-size:22px; line-height:1; transition:transform .3s linear; display:inline-block; }
.lt-compass .n-label { position:absolute; top:1px; font-size:9px; font-weight:800; color:#dc2626; }
.gps-map { position:relative; }
.modal.modal-wide table { min-width:980px; width:100%; font-size:14px; }
.modal.modal-wide th, .modal.modal-wide td { padding:10px 8px; vertical-align:middle; }
.modal { background:#fff; border-radius:20px; padding:28px; max-width:540px; width:92%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); transform:translateY(20px) scale(.98); transition:transform .3s; }
.modal-wide { max-width:860px; width:96%; padding:20px; }
.compact-table { font-size:12px; table-layout:auto; }
.compact-table th { padding:7px 8px; font-size:11.5px; white-space:nowrap; }
.compact-table td { padding:7px 8px; font-size:12px; vertical-align:middle; word-break:break-word; }
.compact-table .table-responsive, .table-responsive.compact-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.modal-overlay.show .modal { transform:none; }
.modal h3 { margin-bottom:18px; color:var(--primary); font-weight:800; }
.detail-line { margin-bottom:8px; font-size:14px; }
.detail-line span { color:var(--muted); }

/* ============ Role / perm grid ============ */
.role-card { padding:18px; }
.perm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; margin-bottom:14px; }
.perm-item { display:flex; gap:6px; align-items:center; font-size:13px; cursor:pointer; padding:6px; background:#f8fafc; border-radius:8px; }

.search-box { padding:10px 14px; border:2px solid var(--border); border-radius:10px; margin-bottom:14px; width:100%; max-width:380px; transition:all .3s; }
.search-box:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(79,70,229,.1); }

.alert { padding:12px 16px; border-radius:12px; font-size:14px; margin-bottom:12px; }
.alert-error { background:#fee2e2; color:#991b1b; }
.alert-warn { background:#fef9c3; color:#854d0e; }

.legend { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }

.loading { text-align:center; padding:70px; color:var(--muted); font-size:16px; }
.loading::before { content:''; display:inline-block; width:28px; height:28px; border:4px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin 1s linear infinite; margin-left:10px; vertical-align:middle; }

.toast { position:fixed; bottom:22px; left:50%; transform:translate(-50%,100px); background:var(--text); color:#fff; padding:13px 24px; border-radius:12px; font-size:14px; z-index:300; transition:transform .4s ease; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; }
.toast.show { transform:translate(-50%,0); opacity:1; }
.toast.success { background:var(--success); }
.toast.error { background:var(--danger); }
.toast.info { background:var(--primary); }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.65} }
@keyframes spin { to{transform:rotate(360deg)} }

.pulse { animation:pulse 2s infinite; }

/* ============ Top action tiles ============ */
.top-nav-wrap { padding:16px 26px 0; }
.top-nav { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.nav-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:120px; padding:14px 16px; background:var(--card); border:2px solid var(--border); border-radius:16px; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--text); transition:all .3s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow); }
.nav-tile:hover { transform:translateY(-4px); border-color:var(--primary); box-shadow:var(--shadow-lg); }
.nav-tile.active { background:var(--gradient); color:#fff; border-color:transparent; box-shadow:0 15px 30px -10px color-mix(in srgb, var(--primary) 60%, transparent); }
.tile-icon { font-size:26px; }
.pharm-cross { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#22c55e,#15803d); color:#fff; font-size:22px; font-weight:900; line-height:1; box-shadow:0 2px 8px rgba(34,197,94,.45); }
.nav-tile { position:relative; }
.nav-badges { position:absolute; inset:4px; pointer-events:none; z-index:2; }
.nav-badge { position:absolute; background:#ef4444; color:#fff; border-radius:999px; font-size:10.5px; min-width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; font-weight:800; box-shadow:0 1px 4px rgba(0,0,0,.3); pointer-events:none; }
#nav-badge-approval { top:0; inset-inline-start:0; }
#nav-badge-smsnav { top:0; inset-inline-end:0; }
#nav-badge-otcnav { bottom:0; inset-inline-start:0; }
#nav-badge-eynav { bottom:0; inset-inline-end:0; }
.nav-badge.orange { background:#f97316; }
.nav-badge.yellow { background:#ca8a04; }
.nav-badge.blue { background:#0284c7; }
.tab-badge { background:#ef4444; color:#fff; border-radius:999px; font-size:10.5px; min-width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; font-weight:800; vertical-align:middle; }
.tab-badge.orange { background:#f97316; }
.tab-badge.yellow { background:#ca8a04; }
.tab-badge.blue { background:#0284c7; }

/* ============ انتخابگر نقشه GPS ============ */
.gps-map { height:230px; border-radius:12px; border:1px solid var(--border); direction:ltr; z-index:0; }
.gps-map .leaflet-container { font-family:inherit; }

/* ============ مینی‌تقویم شمسی ============ */
.shcal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.shcal-week { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11px; color:var(--muted); margin-bottom:4px; }
.shcal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.shcal-day { aspect-ratio:1; border:1px solid var(--border); background:var(--card); border-radius:8px; font-size:12px; cursor:pointer; font-family:inherit; color:var(--text); }
.shcal-day:hover:not(:disabled) { border-color:var(--primary); }
.shcal-day.empty { border:none; background:transparent; }
.shcal-day.selected { background:var(--gradient); color:#fff; border-color:transparent; font-weight:800; }
.shcal-day.today { border-color:var(--primary); border-width:2px; }
.shcal-day.disabled, .shcal-day:disabled { opacity:.3; cursor:not-allowed; background:#f1f5f9; }
.shcal-nav:disabled { opacity:.3; cursor:not-allowed; }

/* ============ چیدمان نمودارهای داشبورد ============ */
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.charts-grid.dense { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.charts-grid.dense .card { padding:12px; }
.charts-grid.dense .card-title { font-size:13px; margin-bottom:8px; }
@media (max-width:1200px) { .charts-grid.dense { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .charts-grid { grid-template-columns:1fr; } }

/* ============ نمودارهای داشبورد ============ */
.chart-row { display:flex; align-items:center; gap:10px; margin:7px 0; }
.chart-label { min-width:90px; max-width:140px; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chart-track { flex:1; background:#f1f5f9; border-radius:999px; height:16px; overflow:hidden; }
.chart-fill { display:block; height:100%; border-radius:999px; min-width:4px; transition:width .5s; }
.chart-num { min-width:70px; font-size:12.5px; font-weight:800; text-align:left; }
.chart-cols { display:flex; align-items:flex-end; gap:10px; justify-content:space-around; padding-top:6px; }
.chart-col { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; max-width:90px; }
.chart-col-num { font-size:12.5px; font-weight:800; }
.chart-col-bar { width:34px; background:#e0f2fe; border-radius:8px 8px 4px 4px; position:relative; overflow:hidden; display:flex; align-items:flex-end; }
.chart-col-del { width:100%; background:#10b981; border-radius:4px 4px 0 0; }
.chart-col-label { font-size:11px; color:var(--muted); white-space:nowrap; }

/* ============ Gear admin menu ============ */
.gear-wrap { position:relative; }
.gear-btn { background:var(--gradient); border:none; width:42px; height:42px; border-radius:12px; color:#fff; font-size:20px; cursor:pointer; box-shadow:var(--shadow); transition:transform .5s; }
.gear-btn:hover { transform:rotate(90deg); }
.gear-menu { position:absolute; top:50px; left:0; background:var(--card); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; min-width:210px; z-index:120; opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; transition:all .25s; }
.gear-menu.open { opacity:1; transform:none; pointer-events:auto; }
.gear-item { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; border:none; background:none; border-radius:9px; font-family:inherit; font-size:14px; font-weight:600; color:var(--text); cursor:pointer; text-align:right; transition:background .2s; white-space:nowrap; }
.gear-item:hover { background:var(--bg); }
.theme-wrap { position:relative; }
.theme-opt { gap:9px; }
.theme-dot { width:14px; height:14px; border-radius:50%; display:inline-block; flex-shrink:0; box-shadow:0 0 0 2px rgba(255,255,255,.6); }

/* ============ Family approval grouping ============ */
.family-head-row td { background:color-mix(in srgb, var(--primary) 8%, #fff); border-bottom:2px solid color-mix(in srgb, var(--primary) 20%, #e0e7ff); padding:10px 13px; }
.family-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.family-tag { font-weight:800; color:var(--primary); }
.family-row td { background:color-mix(in srgb, var(--primary) 4%, #f8faff); }
.family-row:last-child td { border-bottom:1px solid color-mix(in srgb, var(--primary) 20%, #e0e7ff); }
.btn.disabled { opacity:.4; pointer-events:none; }

/* ============ Sub box (household join) ============ */
.sub-box { background:#f8fafc; border:1px dashed var(--border); border-radius:12px; padding:14px; margin-bottom:14px; }

/* ============ Job title / brand ============ */
.job-title { color:#6d28d9; font-size:12px; font-weight:600; margin-inline-start:4px; background:#ede9fe; padding:1px 7px; border-radius:12px; }

/* ============ Colored tag chips ============ */
.tag-select { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; background:#f8fafc; border:1px solid var(--border); border-radius:12px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:18px; font-size:12.5px; font-weight:700; cursor:pointer; user-select:none; background:#f1f5f9; color:var(--text); border:2px solid transparent; transition:all .2s; }
.tag-chip { background:color-mix(in srgb, var(--tc) 18%, transparent); color:var(--tc); }
.chip.tag-chip.checked { background:var(--tc); color:#fff; border-color:var(--tc); box-shadow:0 4px 10px -2px color-mix(in srgb, var(--tc) 60%, transparent); }
.chip-x { background:rgba(0,0,0,.18); color:#fff; border:none; border-radius:50%; width:18px; height:18px; font-size:13px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }

/* ============ Tag palette ============ */
.tag-palette { display:flex; gap:8px; flex-wrap:wrap; }
.color-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:transform .15s; }
.color-swatch:hover { transform:scale(1.15); }
.color-swatch.active { border-color:var(--text); transform:scale(1.15); }

/* ============ Tracking code ============ */
.tracking-code { display:inline-block; font-weight:800; background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); padding:2px 9px; border-radius:8px; font-size:12.5px; letter-spacing:1px; }

/* ============ Rx filter bar ============ */
.rx-filter { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; background:#f8fafc; border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:16px; }
.rx-filter .form-group { margin-bottom:0; }
.filter-actions { display:flex; gap:8px; }

/* ============ Divider ============ */
.divider { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:14px 0; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ============ Family member suggestion (new Rx) ============ */
.family-suggest { margin-top:12px; background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; padding:12px; }
.family-suggest-title { font-size:13px; font-weight:700; color:#9a3412; margin-bottom:9px; }
.family-suggest-list { display:flex; gap:8px; flex-wrap:wrap; }
.fs-chip { display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:8px 14px; border-radius:12px; border:2px solid var(--border); background:#fff; cursor:pointer; font-family:inherit; color:var(--text); transition:all .2s; }
.fs-chip:hover { border-color:var(--primary); transform:translateY(-2px); }
.fs-chip.fs-active { border-color:var(--primary); background:var(--gradient); color:#fff; }
.fs-chip small { font-size:10.5px; opacity:.8; }

/* Narrow tracking field */
input[name="tracking"] { max-width:130px; letter-spacing:1px; font-weight:700; }

/* ============ Rx delivery model badges ============ */
.rx-type { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:14px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.rx-type-courier { background:#eef2ff; color:#4f46e5; border:1px solid #c7d2fe; }
.rx-type-person { background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }

/* patient insurance in tables */
.ins-base { display:inline-block; background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary); padding:2px 9px; border-radius:12px; font-size:12px; font-weight:700; white-space:nowrap; }
.ins-base.ins-health { background:#dcfce7; color:#166534; }
.ins-base.ins-tamin { background:#dbeafe; color:#1e40af; }
.ins-base.ins-armed { background:#ffedd5; color:#9a3412; }
.ins-base + small { margin-top:2px; display:block; }

/* ============ Notifications ============ */
.notif-wrap { position:relative; }
.notif-btn { position:relative; }
.notif-badge { position:absolute; top:-6px; right:-6px; background:#ef4444; color:#fff; font-size:10.5px; font-weight:800; min-width:18px; height:18px; line-height:18px; border-radius:10px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(239,68,68,.5); }
.notif-badge.pulse { animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.notif-menu { width:320px; max-height:420px; display:flex; flex-direction:column; padding:0; overflow:hidden; }
.notif-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); }
.notif-list { overflow-y:auto; max-height:340px; min-height:80px; padding:6px; }
.notif-empty { padding:18px; text-align:center; }
.notif-item { display:flex; gap:10px; padding:10px 12px; border-radius:10px; cursor:default; align-items:flex-start; }
.notif-item:hover { background:var(--bg); }
.notif-item.notif-unread { background:#eef2ff; border-right:3px solid #6366f1; }
.notif-icon { font-size:16px; margin-top:1px; }
.notif-body { flex:1; }
.notif-msg { font-size:13px; color:var(--text); line-height:1.5; }
.notif-time { margin-top:3px; }
.notif-body .btn { margin-top:6px; }

/* ============ Responsive ============ */
@media (max-width:768px) {
  .sidebar { transform:translateX(100%); }
  .sidebar.show { transform:translateX(0); }
  .main-content { margin-right:0; }
  .hamburger { display:block; }
  .content-area { padding:16px; }
  .stats-grid { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .topbar { padding:12px 16px; flex-wrap:wrap; }
  .topbar-left { margin-inline-start:0; }
}
.tint-gold{background:linear-gradient(135deg,#fcd34d 0%,#f59e0b 45%,#b45309 100%);color:#451a03;border:2px solid #92400e;font-weight:700;}
.tint-forest{background:linear-gradient(135deg,#4ade80 0%,#15803d 55%,#14532d 100%);color:#fff;border:2px solid #14532d;font-weight:700;}
.tint-yellow{background:linear-gradient(135deg,#fde047 0%,#eab308 55%,#a16207 100%);color:#422006;border:2px solid #854d0e;font-weight:700;}
.tint-teal{background:linear-gradient(135deg,#5eead4 0%,#0d9488 55%,#115e59 100%);color:#fff;border:2px solid #115e59;font-weight:700;}
.tint-pink{background:linear-gradient(135deg,#f9a8d4 0%,#ec4899 55%,#9d174d 100%);color:#fff;border:2px solid #9d174d;font-weight:700;}
.sub-isar td{background:#eef1f5;}