/* ════════════════════════════════════════════
   BimehKar — Main Stylesheet
   طراحی جدید بر اساس دموی تأییدشده — کاملاً آفلاین
   ════════════════════════════════════════════ */

:root {
  --bg-color: #f4f6fa;
  --card-bg: #ffffff;
  --primary-blue: #0068f8;
  --primary-dark: #0050c4;
  --primary-light: #4d9bff;
  --text-primary: #1a2c3e;
  --text-secondary: #2c3e50;
  --text-tertiary: #6b7c93;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 25px -5px rgba(0,0,0,.08);
  --sidebar-bg: #02337a;
  --sidebar-text: #ffffff;
  --sidebar-text-secondary: rgba(255,255,255,.65);
  --hover-bg: rgba(0,0,0,.03);
  --dropdown-bg: #ffffff;
  --search-bg: rgba(255,255,255,.08);
  --star-color: #fbbf24;
  --star-inactive: rgba(255,255,255,.2);
  --danger: #dc4a4a;
  --warning: #d97706;
  --success: #16a34a;

  /* ─── Alias های سازگاری با کدهای قبلی (thirdparty.php, installments.php, admin.php) ─── */
  --bg: var(--bg-color);
  --bg-card: var(--card-bg);
  --border: var(--border-color);
  --primary: var(--primary-blue);
  --text: var(--text-primary);
  --text-light: var(--text-tertiary);
  --text-muted: var(--text-tertiary);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
}

[data-theme="dark"] {
  --bg-color: #05070b;
  --card-bg: #0d1118;
  --primary-blue: #4d9bff;
  --primary-dark: #357ee0;
  --primary-light: #7fb8ff;
  --text-primary: #f4f6f9;
  --text-secondary: #d4dae3;
  --text-tertiary: #7b8699;
  --border-color: #1c222d;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 32px -8px rgba(0,0,0,.6);
  --sidebar-bg: #060a12;
  --sidebar-text: #f4f6f9;
  --sidebar-text-secondary: #7b8699;
  --hover-bg: rgba(110,168,254,.06);
  --dropdown-bg: #1e293b;
  --search-bg: rgba(255,255,255,.06);
  --star-color: #fbbf24;
  --star-inactive: rgba(255,255,255,.15);

  /* ─── Alias های سازگاری با کدهای قبلی ─── */
  --bg: var(--bg-color);
  --bg-card: var(--card-bg);
  --border: var(--border-color);
  --primary: var(--primary-blue);
  --text: var(--text-primary);
  --text-light: var(--text-tertiary);
  --text-muted: var(--text-tertiary);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: var(--bg-color);
  color: var(--text-primary);
  direction: rtl;
  line-height: 1.5;
  transition: background .25s ease, color .2s ease;
  min-height: 100vh;
  overflow-x: hidden;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; }
input, select, textarea { font-family:inherit; }

[data-theme="dark"] body {
  background-color: #080d14;
  background-image: radial-gradient(ellipse 1400px 800px at 50% -10%, #0c1d40 0%, transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.app { display:flex; min-height:100vh; overflow-x:hidden; }

/* ========== SIDEBAR ========== */
.sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  position: fixed;
  right: 0; top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease;
  z-index: 100;
  border-left: 1px solid var(--border-color);
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width:3px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px; }

.sidebar-header { padding:24px 14px 16px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; }

.logo { display:flex; align-items:center; justify-content:center; margin-bottom:18px; cursor:pointer; width:100%; }
.logo .logo-image { height:auto; width: var(--sidebar-logo-width, 130px); max-width:88%; flex-shrink:0; object-fit:contain; display:block; filter: drop-shadow(0 2px 14px rgba(0,100,248,.35)); }

.search-box { position:relative; width:100%; }
.search-box input {
  width:100%; padding:5px 30px 5px 10px; border:1px solid var(--border-color); border-radius:8px;
  background: var(--search-bg); color: var(--sidebar-text); font-size:.72rem; font-family:inherit;
  transition: all .25s ease; outline:none;
}
.search-box input::placeholder { color:var(--sidebar-text-secondary); opacity:.7; }
.search-box input:focus { border-color:var(--primary-blue); background:rgba(255,255,255,.12); box-shadow:0 0 0 3px rgba(110,168,254,.12); }
.search-box .search-icon { position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--sidebar-text-secondary); font-size:.7rem; pointer-events:none; }
.search-box .clear-search { position:absolute; left:8px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--sidebar-text-secondary); cursor:pointer; font-size:.65rem; padding:2px 4px; display:none; }
.search-box .clear-search.visible { display:block; }

.sidebar-menu { flex:1; padding:8px 8px 14px; overflow-y:auto; }
.menu-group { margin-bottom:1px; }
.menu-group-header {
  display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; cursor:pointer;
  color: var(--sidebar-text-secondary); font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; transition: all .2s ease; user-select:none;
}
.menu-group-header:hover { background:rgba(255,255,255,.06); color:var(--sidebar-text); }
.menu-group-header .group-icon { font-size:.75rem; width:16px; opacity:.7; }
.menu-group-header .group-title { flex:1; }
.menu-group-header .group-arrow { font-size:.5rem; transition: transform .3s ease; opacity:.5; }
.menu-group.open .group-arrow { transform: rotate(180deg); }
.menu-items { display:none; padding-right:12px; margin-top:1px; }
.menu-group.open .menu-items { display:block; }

.menu-item {
  display:flex; align-items:center; gap:6px; padding:5px 10px; margin:1px 0; border-radius:6px;
  color: var(--sidebar-text-secondary); font-size:.75rem; transition: all .2s ease; cursor:pointer; position:relative;
}
.menu-item:hover { background:rgba(255,255,255,.06); color:var(--sidebar-text); }
.menu-item.active { background:rgba(110,168,254,.14); color:var(--primary-blue); }
[data-theme="light"] .menu-item.active { background:rgba(30,111,159,.07); color:var(--primary-blue); }
.menu-item .item-icon { width:14px; font-size:.7rem; opacity:.7; text-align:center; color:var(--sidebar-text-secondary); }
.menu-item.active .item-icon { color:var(--primary-blue); opacity:1; }
.menu-item .item-text { flex:1; white-space:nowrap; }

.dev-dot { width:6px; height:6px; border-radius:50%; background:var(--warning); flex-shrink:0; }

.star-btn { background:none; border:none; cursor:pointer; color:var(--star-inactive); font-size:.6rem; padding:2px 3px; transition: all .2s ease; line-height:1; }
.star-btn:hover { color:var(--star-color); transform:scale(1.1); }
.star-btn.active { color:var(--star-color); }

/* ========== MAIN ========== */
.main { flex:1; margin-right:240px; min-height:100vh; display:flex; flex-direction:column; }

.header {
  background:var(--card-bg); border-bottom:1px solid var(--border-color); padding:0 28px; height:60px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50;
}
.date { color:var(--text-tertiary); font-size:.82rem; display:flex; align-items:center; }
.header-left { display:flex; align-items:center; gap:10px; }

.menu-toggle { display:none; background:none; border:none; font-size:1.1rem; color:var(--text-secondary); cursor:pointer; margin-left:10px; }
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); z-index:99; }
.overlay.active { display:block; }
.sidebar.open { transform: translateX(0); }

.theme-btn {
  background:transparent; border:none; color:var(--text-secondary); font-size:1rem; cursor:pointer; padding:6px;
  transition:.2s; border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
}
.theme-btn:hover { background:var(--hover-bg); color:var(--primary-blue); }

.user-menu { position:relative; }
.avatar-btn { background:transparent; border:none; cursor:pointer; padding:0; display:flex; align-items:center; gap:6px; }
.avatar-icon {
  width:34px; height:34px; background:linear-gradient(135deg,var(--primary-blue),var(--primary-light));
  border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem;
  box-shadow:0 2px 6px rgba(0,0,0,.08); border:2.5px solid var(--primary-blue);
}
.chevron-icon { color:var(--text-tertiary); font-size:.7rem; transition: transform .2s; }
.avatar-btn[aria-expanded="true"] .chevron-icon { transform:rotate(180deg); }

.dropdown {
  position:absolute; top:calc(100% + 6px); left:0; min-width:230px; background:var(--dropdown-bg);
  border-radius:14px; box-shadow:var(--shadow-lg); border:1px solid var(--border-color);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px); transition:all .2s ease; z-index:1000;
}
.dropdown.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.dropdown-header { padding:14px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:10px; }
.dropdown-avatar {
  width:40px; height:40px; background:linear-gradient(135deg,var(--primary-blue),var(--primary-light));
  border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem;
}
.dropdown-user-info { flex:1; }
.dropdown-user-name { font-weight:700; color:var(--text-primary); font-size:.85rem; }
.dropdown-user-role { font-size:.65rem; color:var(--text-tertiary); margin-top:1px; }
.dropdown-menu { padding:6px; }
.dropdown-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px; color:var(--text-secondary);
  font-size:.82rem; cursor:pointer; transition:all .15s; width:100%; background:transparent; border:none;
  font-family:inherit; text-align:right;
}
.dropdown-item i { width:16px; font-size:.85rem; color:var(--text-tertiary); }
.dropdown-item:hover { background:var(--hover-bg); color:var(--text-primary); }
.dropdown-divider { height:1px; background:var(--border-color); margin:6px; }
.logout-item { color:var(--danger); }
.logout-item i { color:var(--danger); }
.logout-item:hover { background:rgba(220,74,74,.08); }

/* ========== CONTENT ========== */
.content { flex:1; padding:24px 28px; }
.page-title { font-size:1.4rem; font-weight:700; margin-bottom:22px; color:var(--text-primary); display:flex; align-items:center; gap:10px; }
.page-title i { color:var(--primary-blue); }

.stats-grid, .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card {
  background:var(--card-bg); border-radius:18px; padding:16px 18px; border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm); transition:all .2s; display:flex; align-items:center; gap:14px;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-icon {
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0; background:rgba(110,168,254,.12); color:var(--primary-blue);
}
.stat-icon.blue   { background:rgba(30,111,159,.12); color:var(--primary-blue); }
.stat-icon.red    { background:rgba(220,38,38,.12); color:#dc2626; }
.stat-icon.orange { background:rgba(217,119,6,.12); color:#d97706; }
.stat-icon.green  { background:rgba(22,163,74,.12); color:#16a34a; }
.stat-icon.purple { background:rgba(147,51,234,.12); color:#9333ea; }
.stat-icon.yellow { background:rgba(250,204,21,.16); color:#ca8a04; }
.stat-info { flex:1; }
.stat-value { font-size:1.6rem; font-weight:800; color:var(--text-primary); margin-bottom:2px; }
.stat-label { color:var(--text-tertiary); font-size:.75rem; }

/* ─── دارک‌مود: کارت‌ها باید با border روشن از پس‌زمینه جدا شوند (سایه در تاریکی دیده نمی‌شود) ─── */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .chart-card {
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.55);
}
[data-theme="dark"] .stat-card:hover { border-color: rgba(77,155,255,.45); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(77,155,255,.15); }

/* آیکون‌های دارک‌مود: درخشان‌تر و با عمق بیشتر، نه کدر */
[data-theme="dark"] .stat-icon.blue   { background:rgba(114,173,255,.16); color:#8fc0ff; }
[data-theme="dark"] .stat-icon.red    { background:rgba(248,81,73,.16);  color:#ff8783; }
[data-theme="dark"] .stat-icon.orange { background:rgba(255,166,87,.16); color:#ffb366; }
[data-theme="dark"] .stat-icon.green  { background:rgba(63,211,140,.16); color:#5ee6a3; }
[data-theme="dark"] .stat-icon.purple { background:rgba(180,130,255,.16);color:#c9a6ff; }
[data-theme="dark"] .stat-icon.yellow { background:rgba(255,209,87,.18); color:#ffd957; }

.charts-grid, .charts { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; }
.chart-card { background:var(--card-bg); border-radius:18px; padding:18px; border:1px solid var(--border-color); }
.chart-card-title, .chart-title { font-weight:600; color:var(--text-secondary); margin-bottom:14px; font-size:.85rem; display:flex; align-items:center; gap:6px; }
.chart-card-title i, .chart-title i { color:var(--primary-blue); }
.chart-container { position:relative; height:220px; }

.progress-list { display:flex; flex-direction:column; gap:14px; }
.progress-row { display:flex; align-items:center; gap:10px; }
.progress-label { width:110px; color:var(--text-secondary); font-size:.78rem; }
.progress-bar-bg { flex:1; height:5px; background:var(--border-color); border-radius:8px; overflow:hidden; }
.progress-fill { height:100%; background:var(--primary-blue); border-radius:8px; }
.progress-percent { width:40px; color:var(--text-tertiary); font-size:.75rem; }

.card { background:var(--card-bg); border-radius:18px; border:1px solid var(--border-color); box-shadow:var(--shadow-sm); padding:18px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-title { font-weight:600; font-size:.9rem; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.card-title i { color:var(--primary-blue); }

.table-card { background:var(--card-bg); border-radius:18px; border:1px solid var(--border-color); overflow:hidden; }
.table-header { padding:14px 18px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.table-header h3 { font-weight:600; font-size:.9rem; color:var(--text-primary); }
.table-container, .table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:right; padding:12px 18px; background:var(--bg-color); color:var(--text-tertiary); font-weight:600; font-size:.7rem; border-bottom:1px solid var(--border-color); white-space:nowrap; }
td { padding:11px 18px; border-bottom:1px solid var(--border-color); color:var(--text-secondary); font-size:.8rem; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--hover-bg); }

.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:30px; font-size:.65rem; font-weight:600; }
.badge-success { background:rgba(34,197,94,.12); color:#2b8a45; }
.badge-warning { background:rgba(249,115,22,.12); color:#c46a1a; }
.badge-danger  { background:rgba(220,38,38,.12); color:#b91c1c; }
[data-theme="dark"] .badge-success { color:#4ade80; }
[data-theme="dark"] .badge-warning { color:#fbbf24; }
[data-theme="dark"] .badge-danger  { color:#f87171; }

.btn { background:var(--primary-blue); color:#fff; border:none; padding:7px 18px; border-radius:40px; font-size:.78rem; font-weight:500; cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:6px; }
.btn:hover { background:var(--primary-dark); transform:scale(1.02); }
.btn-secondary { background:var(--bg-color); color:var(--text-secondary); border:1px solid var(--border-color); }
.btn-secondary:hover { background:var(--hover-bg); }
.btn-danger { background:#dc2626; }
.btn-danger:hover { background:#b91c1c; }
.btn-warning { background:#d97706; }
.btn-warning:hover { background:#b45309; }
.btn-sm { padding:5px 14px; font-size:.72rem; }
.btn-xs { padding:3px 10px; font-size:.68rem; }

.expiry-alert-bar {
  display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px;
  border:1px solid rgba(220,38,38,.2); background:linear-gradient(135deg,rgba(220,38,38,.07) 0%, transparent 100%);
}
.expiry-alert-bar .alert-text { flex:1; font-size:.82rem; color:var(--text-secondary); }
.expiry-tag { padding:2px 10px; border-radius:30px; font-size:.7rem; font-weight:600; }
.expiry-tag.expiry-expired { background:rgba(220,38,38,.12); color:#dc2626; }
.expiry-tag.expiry-soon { background:rgba(217,119,6,.12); color:#d97706; }
[data-theme="dark"] .expiry-tag.expiry-expired { color:#f87171; }
[data-theme="dark"] .expiry-tag.expiry-soon { color:#fbbf24; }

.alert { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; margin-bottom:16px; font-size:.85rem; }
.alert-danger { background:rgba(220,38,38,.08); color:#b91c1c; border:1px solid rgba(220,38,38,.2); }
.alert-success { background:rgba(22,163,74,.08); color:#15803d; border:1px solid rgba(22,163,74,.2); }
[data-theme="dark"] .alert-danger { color:#f87171; }
[data-theme="dark"] .alert-success { color:#4ade80; }

.btn-primary { background:var(--primary-blue); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-info { background:#0891b2; color:#fff; }
.btn-info:hover { background:#0e7490; }
.btn-success { background:#16a34a; color:#fff; }
.btn-success:hover { background:#15803d; }

.badge-gray { background:rgba(107,124,147,.12); color:var(--text-tertiary); }
[data-theme="dark"] .badge-gray { color:var(--text-secondary); }

.thirdparty-stats, .installments-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }

.filter-section { background:var(--card-bg); border-radius:18px; padding:18px; border:1px solid var(--border-color); margin-bottom:20px; }
.filter-section-title { font-weight:600; font-size:.85rem; color:var(--text-secondary); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.filter-section-title i { color:var(--primary-blue); }
.filter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; align-items:end; }
.filter-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:20px; }
.filter-group { display:flex; flex-direction:column; gap:4px; }
.filter-group label { font-size:.7rem; color:var(--text-tertiary); }

.empty-row td, .empty-state { text-align:center; padding:40px 20px; color:var(--text-tertiary); }
.pagination { display:flex; justify-content:center; gap:8px; padding:16px; border-top:1px solid var(--border-color); flex-wrap:wrap; }
.sort-link { text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:4px; }
.sort-link:hover { color:var(--primary-blue); }

.form-control { width:100%; padding:8px 12px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-color); color:var(--text-primary); font-size:.82rem; outline:none; transition:.2s; }
.form-control:focus { border-color:var(--primary-blue); box-shadow:0 0 0 3px rgba(30,111,159,.12); }

/* ========== SMS / WHATSAPP SENDER ========== */
.sms-grid { display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; }
@media (max-width:900px) { .sms-grid { grid-template-columns:1fr; } }

.add-contact-box { display:none; }
.add-contact-box.open { display:block; }

.contact-list-wrap { max-height:380px; overflow-y:auto; }
.contact-row { display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; transition:.15s; border-bottom:1px solid var(--border-color); }
.contact-row:last-child { border-bottom:none; }
.contact-row:hover { background:var(--hover-bg); }
.contact-check { width:16px; height:16px; accent-color:var(--primary-blue); cursor:pointer; flex-shrink:0; }
.btn-icon-only { background:none; border:none; color:var(--text-tertiary); cursor:pointer; padding:4px 6px; font-size:.8rem; flex-shrink:0; }
.btn-icon-only:hover { color:#dc2626; }

.send-queue { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; max-height:160px; overflow-y:auto; padding:10px; background:var(--bg-color); border-radius:10px; }
.send-queue-item { font-size:.78rem; color:var(--text-tertiary); display:flex; align-items:center; gap:6px; }
.send-queue-item i { font-size:.7rem; }
.send-queue-item.done { color:#16a34a; }
.send-queue-item.current { color:var(--primary-blue); font-weight:700; }
.att-clock-card {
  background:linear-gradient(135deg,var(--primary-blue) 0%,var(--primary-dark) 100%);
  border-radius:22px; padding:32px 24px; text-align:center; color:#fff; margin-bottom:24px;
  max-width:440px; box-shadow:0 8px 24px rgba(30,111,159,.25);
}
.att-clock-time { font-size:2.6rem; font-weight:800; letter-spacing:1px; font-family:'Vazirmatn',monospace; direction:ltr; }
.att-clock-date { font-size:.85rem; opacity:.85; margin-top:4px; margin-bottom:22px; }
.att-clock-status p { font-size:.85rem; opacity:.9; margin-bottom:14px; }
.att-clock-btn { background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.4); color:#fff; padding:11px 28px; font-size:.88rem; }
.att-clock-btn:hover { background:rgba(255,255,255,.28); }
.att-clock-btn.att-out { background:rgba(220,38,38,.25); border-color:rgba(255,255,255,.4); }
.att-progress-row { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:18px; }
.att-progress-point { display:flex; flex-direction:column; align-items:center; gap:6px; width:90px; opacity:.6; }
.att-progress-point.done { opacity:1; }
.att-progress-point i { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.att-progress-point.done i { background:#fff; color:var(--primary-blue); }
.att-progress-point span { font-size:.75rem; font-weight:600; }
.att-progress-line { width:60px; height:2px; background:rgba(255,255,255,.25); margin-top:-22px; }
.att-progress-line.active { background:#fff; }
.tg-app {
  display:flex; flex-direction:row; height:640px; background:var(--card-bg);
  border-radius:18px; border:1px solid var(--border-color); overflow:hidden; box-shadow:var(--shadow-sm);
}
.tg-sidebar { width:280px; flex-shrink:0; border-left:1px solid var(--border-color); display:flex; flex-direction:column; background:var(--bg-color); }
.tg-sidebar-header { padding:16px 16px 10px; font-weight:700; font-size:.95rem; color:var(--text-primary); flex-shrink:0; }
.tg-contact-list { flex:1; overflow-y:auto; }
.tg-contact {
  display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer;
  transition:.15s; border-right:3px solid transparent; text-decoration:none;
}
.tg-contact:hover { background:var(--hover-bg); }
.tg-contact.active { background:var(--card-bg); border-right-color:var(--primary-blue); }
.tg-avatar {
  width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--primary-blue),var(--primary-light));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; flex-shrink:0;
}
.tg-avatar-sm { width:38px; height:38px; font-size:.9rem; }
.tg-contact-body { flex:1; min-width:0; }
.tg-contact-top { display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.tg-contact-name { font-size:.86rem; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-contact-time { font-size:.66rem; color:var(--text-tertiary); flex-shrink:0; }
.tg-contact-preview { font-size:.74rem; color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }

.tg-main { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--bg-color); }
.tg-topbar { display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--card-bg); border-bottom:1px solid var(--border-color); flex-shrink:0; }
.tg-topbar-name { font-weight:700; font-size:.9rem; color:var(--text-primary); }
.tg-topbar-sub { font-size:.7rem; color:var(--text-tertiary); }

.tg-messages { flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:2px; }
.tg-day-sep { text-align:center; margin:14px 0; }
.tg-day-sep span { background:rgba(0,0,0,.06); color:var(--text-tertiary); font-size:.68rem; padding:3px 12px; border-radius:30px; }
[data-theme="dark"] .tg-day-sep span { background:rgba(255,255,255,.08); }

.tg-row { display:flex; margin:2px 0; }
.tg-row.mine { justify-content:flex-start; flex-direction:row-reverse; }
.tg-bubble {
  max-width:62%; padding:7px 12px 6px; border-radius:14px; background:var(--card-bg);
  color:var(--text-primary); font-size:.85rem; line-height:1.55; box-shadow:var(--shadow-sm);
  position:relative; display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px;
}
.tg-bubble:not(.mine) { border-bottom-right-radius:4px; }
.tg-bubble.mine { background:var(--primary-blue); color:#fff; border-bottom-left-radius:4px; margin-right:0; }
.tg-text { white-space:pre-wrap; word-break:break-word; }
.tg-meta { font-size:.62rem; opacity:.7; white-space:nowrap; margin-right:auto; align-self:flex-end; }
.tg-tick { font-size:.62rem; opacity:.75; }
.tg-tick.seen { color:#4fc3f7; opacity:1; }

.tg-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text-tertiary); gap:8px; }
.tg-empty i { font-size:1.8rem; opacity:.5; }

.tg-input-bar { display:flex; align-items:center; gap:8px; padding:12px 14px; background:var(--card-bg); border-top:1px solid var(--border-color); flex-shrink:0; }
.tg-icon-btn { background:none; border:none; color:var(--text-tertiary); font-size:1.1rem; cursor:pointer; padding:6px; }
.tg-icon-btn:hover { color:var(--primary-blue); }
.tg-input { flex:1; border:1px solid var(--border-color); background:var(--bg-color); border-radius:22px; padding:10px 16px; font-size:.85rem; color:var(--text-primary); outline:none; transition:.2s; }
.tg-input:focus { border-color:var(--primary-blue); box-shadow:0 0 0 3px rgba(30,111,159,.1); }
.tg-send-btn { width:40px; height:40px; border-radius:50%; background:var(--primary-blue); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; transition:.2s; }
.tg-send-btn:hover { background:var(--primary-dark); transform:scale(1.05); }

@media (max-width:768px) {
  .tg-app { flex-direction:column; height:560px; }
  .tg-sidebar { width:100%; max-height:130px; border-left:none; border-bottom:1px solid var(--border-color); }
  .tg-bubble { max-width:80%; }
}
.badge-green { background:rgba(22,163,74,.12); color:#16a34a; }
[data-theme="dark"] .badge-green { color:#4ade80; }

.admin-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:18px; }
@media (max-width:900px) { .admin-grid { grid-template-columns:1fr; } }
.form-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.form-row > * { flex:1; min-width:120px; }
.permissions-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin:10px 0; }
.perm-item { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text-secondary); }

.placeholder-content, .dev-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:60px 20px; color:var(--text-tertiary); gap:10px;
}
.dev-placeholder { background:var(--card-bg); border-radius:18px; border:1px dashed var(--border-color); }
.dev-placeholder i { font-size:2.4rem; color:var(--warning); opacity:.7; margin-bottom:6px; }
.dev-placeholder h3 { color:var(--text-primary); font-size:1.05rem; }
.dev-placeholder p { font-size:.85rem; max-width:380px; }
.placeholder-content i { font-size:2rem; opacity:.6; }

/* ========== FOOTER ========== */
.footer { margin-top:36px; padding:14px 28px; border-top:1px solid var(--border-color); background:transparent; }
.footer-content { display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap; font-size:.75rem; color:var(--text-tertiary); }
.footer-item { display:flex; align-items:center; gap:5px; }
.footer-item i { font-size:.8rem; color:var(--primary-blue); }
.footer-brand { font-weight:700; color:var(--text-secondary); }
.footer-brand span { color:var(--primary-blue); }
.separator { color:var(--border-color); font-size:.6rem; }

/* ========== LOGIN PAGE ========== */
.login-body { background:var(--bg-color); }
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-box { background:var(--card-bg); border-radius:22px; padding:36px 32px; width:100%; max-width:380px; box-shadow:var(--shadow-lg); border:1px solid var(--border-color); }
.login-header { text-align:center; margin-bottom:24px; }
.login-logo { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; }
.login-logo-image { height:88px; width:auto; object-fit:contain; }
.login-logo-text { font-size:1.5rem; font-weight:800; color:var(--text-primary); }
.login-logo-text span { color:var(--primary-blue); }
.login-subtitle { color:var(--text-tertiary); font-size:.82rem; }
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:.8rem; color:var(--text-secondary); margin-bottom:6px; font-weight:500; }
.login-input-wrapper { position:relative; display:flex; align-items:center; }
.login-input-wrapper i { position:absolute; right:14px; color:var(--text-tertiary); font-size:.85rem; }
.form-control {
  width:100%; padding:11px 40px 11px 14px; border:1px solid var(--border-color); border-radius:10px;
  background:var(--bg-color); color:var(--text-primary); font-size:.85rem; outline:none; transition:.2s;
}
.form-control:focus { border-color:var(--primary-blue); box-shadow:0 0 0 3px rgba(30,111,159,.12); }
.login-remember-row { display:flex; align-items:center; }
.form-check { display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--text-secondary); cursor:pointer; }
.login-btn { width:100%; justify-content:center; padding:12px; font-size:.88rem; border-radius:10px; margin-top:6px; }
.login-footer { text-align:center; margin-top:20px; font-size:.72rem; color:var(--text-tertiary); }

/* ========== RESPONSIVE ========== */
@media (max-width:600px) {
  .footer-content { gap:10px; flex-direction:column; }
  .separator { display:none; }
  .dropdown { left:-60px; min-width:200px; }
}
@media (max-width:1100px) {
  .stats-grid, .stats { grid-template-columns:repeat(2,1fr); gap:12px; }
}
@media (max-width:900px) {
  .charts-grid, .charts { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(100%); width:280px; }
  .sidebar.open { transform:translateX(0); }
  .main { margin-right:0; }
  .menu-toggle { display:inline-block; }
  .content { padding:16px; }
  .stats-grid, .stats { grid-template-columns:1fr; }
  .header { padding:0 14px; height:54px; }
  .footer { padding:12px 16px; margin-top:24px; }
  .sidebar-header { padding:14px 10px 10px; }
  .logo { margin-bottom:12px; }
  .logo .logo-image { height:36px; }
  .search-box input { font-size:.65rem; padding:4px 28px 4px 8px; }
  .sidebar-menu { padding:6px 6px 12px; }
}

/* ========== BULK UPLOAD: COLUMN PICKER + EXCEL-LIKE PREVIEW ========== */
.col-check-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:6px; max-height:340px; overflow-y:auto; padding:4px; }
.col-check-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border-color); border-radius:10px; cursor:pointer; font-size:.78rem; transition:.15s; background:var(--bg-color); }
.col-check-item:hover { border-color:var(--primary-blue); background:var(--hover-bg); }
.col-check-item input { width:15px; height:15px; accent-color:var(--primary-blue); flex-shrink:0; }
.col-check-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.excel-scroll-wrap { overflow-x:auto; overflow-y:auto; max-height:420px; border:1px solid var(--border-color); border-radius:10px; }
.excel-like-table { border-collapse:separate; border-spacing:0; font-size:.76rem; white-space:nowrap; }
.excel-like-table thead th { position:sticky; top:0; background:var(--bg-color); z-index:2; padding:0; border:1px solid var(--border-color); border-top:none; }
.excel-like-table thead th:first-child { z-index:3; }
.excel-col-header { padding:6px 10px; font-size:.68rem; color:var(--text-tertiary); border-bottom:1px solid var(--border-color); white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
.excel-like-table .col-mapping-select { border:none; border-radius:0; padding:6px 8px; font-size:.7rem; min-width:130px; background:var(--card-bg); }
.excel-like-table td { padding:7px 10px; border:1px solid var(--border-color); color:var(--text-secondary); background:var(--card-bg); }
.excel-like-table tbody tr:nth-child(even) td { background:var(--bg-color); }
.excel-row-num-col { background:var(--bg-color) !important; color:var(--text-tertiary); text-align:center; font-weight:600; position:sticky; right:0; z-index:1; min-width:36px; }

/* ========== NOTIFICATION BELL ========== */
.notif-menu { position:relative; }
.notif-btn {
  background:transparent; border:none; color:var(--text-secondary); font-size:1.05rem; cursor:pointer;
  padding:6px; border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  position:relative; transition:.2s;
}
.notif-btn:hover { background:var(--hover-bg); color:var(--primary-blue); }
.notif-badge {
  position:absolute; top:2px; left:2px; background:#dc2626; color:#fff; font-size:.6rem; font-weight:700;
  min-width:16px; height:16px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 3px;
  border:2px solid var(--card-bg);
}
.notif-dropdown { width:320px; left:0; right:auto; }
.notif-list { max-height:360px; overflow-y:auto; padding:6px; }
.notif-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px; transition:.15s; text-decoration:none; }
.notif-item:hover { background:var(--hover-bg); }
.notif-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; }
.notif-icon.blue { background:rgba(30,111,159,.12); color:var(--primary-blue); }
.notif-icon.red { background:rgba(220,38,38,.12); color:#dc2626; }
.notif-icon.orange { background:rgba(217,119,6,.12); color:#d97706; }
.notif-item-body { flex:1; min-width:0; }
.notif-item-text { font-size:.8rem; font-weight:600; color:var(--text-primary); line-height:1.4; }
.notif-item-detail { font-size:.72rem; color:var(--text-tertiary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 16px; color:var(--text-tertiary); }
.notif-empty i { font-size:1.6rem; opacity:.5; }
@media (max-width:600px) { .notif-dropdown { width:280px; left:-40px; right:auto; } }

/* ========== FOLLOW-UP REPORT IN SMS PAGE ========== */
.report-card { margin-bottom:20px; }
.report-box { display:none; margin-top:12px; }
.report-box.open { display:block; }
.report-group { margin-bottom:14px; }
.report-group-title { font-size:.8rem; font-weight:700; color:var(--text-secondary); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.report-group-title i { color:var(--primary-blue); }
.report-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:.15s; }
.report-item:hover { background:var(--hover-bg); }
.report-check { width:16px; height:16px; accent-color:var(--primary-blue); cursor:pointer; flex-shrink:0; }

/* ========== MY DESK - FAVORITE SHORTCUTS ========== */
.desk-shortcut-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.desk-shortcut-card {
  background:var(--card-bg); border:1px solid var(--border-color); border-radius:16px; padding:18px 14px;
  text-align:center; text-decoration:none; transition:.2s; position:relative; box-shadow:var(--shadow-sm);
}
.desk-shortcut-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--primary-blue); }
.desk-shortcut-icon {
  width:48px; height:48px; border-radius:14px; background:rgba(30,111,159,.1); color:var(--primary-blue);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin:0 auto 10px;
}
.desk-shortcut-name { font-size:.85rem; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.desk-shortcut-cat { font-size:.68rem; color:var(--text-tertiary); display:flex; align-items:center; justify-content:center; gap:4px; }

/* ========== DASHBOARD BANNER SLIDER ========== */
.banner-slider { position:relative; border-radius:16px; overflow:hidden; margin-bottom:22px; box-shadow:var(--shadow-md); background:#0a1a3a; }
.banner-track { display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.banner-slide { flex:0 0 100%; width:100%; aspect-ratio:1568/616; }
.banner-slide img { width:100%; height:100%; object-fit:cover; display:block; }

.banner-nav {
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#0a1a3a; border:none; cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:.85rem; box-shadow:0 2px 8px rgba(0,0,0,.2); transition:.2s; z-index:5;
}
.banner-nav:hover { background:#fff; transform:translateY(-50%) scale(1.08); }
.banner-prev { right:14px; }
.banner-next { left:14px; }

.banner-dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:7px; z-index:5; }
.banner-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); border:none; cursor:pointer; padding:0; transition:.2s; }
.banner-dot.active { background:#fff; width:22px; border-radius:5px; }

@media (max-width:768px) {
  .banner-nav { width:30px; height:30px; font-size:.7rem; }
  .banner-prev { right:8px; } .banner-next { left:8px; }
}

/* ========== BANNER MANAGEMENT GRID (site settings) ========== */
.banner-manage-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
.banner-manage-item { position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1568/616; border:1px solid var(--border-color); }
.banner-manage-item img { width:100%; height:100%; object-fit:cover; display:block; }
.banner-manage-item form { position:absolute; top:4px; left:4px; margin:0; }
.banner-manage-remove {
  width:24px; height:24px; border-radius:50%; background:rgba(220,38,38,.9); color:#fff; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.65rem; transition:.2s;
}
.banner-manage-remove:hover { background:#b91c1c; transform:scale(1.1); }

/* ========== BULK UPLOAD: STICKY CONFIRM BAR (مهم برای موبایل) ========== */
.bulk-sticky-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--card-bg);
  border-top:1px solid var(--border-color); padding:12px 18px; display:flex; align-items:center;
  justify-content:space-between; gap:12px; box-shadow:0 -4px 16px rgba(0,0,0,.1);
  transform:translateY(100%); transition:transform .3s ease;
}
.bulk-sticky-bar.visible { transform:translateY(0); }
.bulk-sticky-info { font-size:.8rem; color:var(--text-tertiary); flex:1; }
.bulk-sticky-info.has-mapping { color:#16a34a; font-weight:700; }
.bulk-sticky-bar #confirmImportBtn { flex-shrink:0; white-space:nowrap; }
@media (max-width:600px) {
  .bulk-sticky-bar { flex-direction:column; align-items:stretch; gap:8px; padding:10px 14px; }
  .bulk-sticky-info { text-align:center; font-size:.74rem; }
  .bulk-sticky-bar #confirmImportBtn { width:100%; justify-content:center; }
}
/* فاصله پایین برای جلوگیری از قرارگیری محتوا پشت sticky bar */
body:has(.bulk-sticky-bar.visible) .content { padding-bottom:80px; }

/* ========== MODAL (ویرایش کاربر و موارد مشابه) ========== */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000; display:flex;
  align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden;
  pointer-events:none; transition:opacity .2s ease;
}
.modal-overlay.open { opacity:1; visibility:visible; pointer-events:auto; }
.modal-box {
  background:var(--card-bg); border-radius:18px; padding:24px; max-width:480px; width:100%;
  max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); border:1px solid var(--border-color);
}
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-header h3 { font-size:1.05rem; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.modal-close { background:none; border:none; color:var(--text-tertiary); font-size:1.1rem; cursor:pointer; padding:4px; }
.modal-close:hover { color:var(--text-primary); }

/* بهبود permissions-grid برای موبایل و کلی */
.permissions-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; max-height:220px; overflow-y:auto; padding:8px; border:1px solid var(--border-color); border-radius:10px; }
.perm-item { display:flex; align-items:center; gap:6px; font-size:.78rem; cursor:pointer; padding:4px; }
.perm-item input { width:14px; height:14px; accent-color:var(--primary-blue); flex-shrink:0; }

/* ========== CHAT: FILE / IMAGE / EMOJI ========== */
.tg-bubble-image { padding:4px !important; background:transparent !important; box-shadow:none !important; }
.tg-chat-image { max-width:220px; max-height:220px; border-radius:12px; display:block; object-fit:cover; cursor:pointer; }
.tg-bubble-image .tg-meta { position:absolute; bottom:6px; left:10px; background:rgba(0,0,0,.45); color:#fff; padding:2px 8px; border-radius:10px; }
.tg-bubble-image { position:relative; }

.tg-file-attachment { display:flex; align-items:center; gap:8px; padding:4px 2px; text-decoration:none; color:inherit; }
.tg-file-attachment i { font-size:1.3rem; color:var(--primary-blue); }
.tg-bubble.mine .tg-file-attachment i { color:#fff; }
.tg-file-attachment span { font-size:.8rem; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tg-emoji-picker {
  position:absolute; bottom:64px; right:14px; background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:10px; display:none; grid-template-columns:repeat(5,1fr);
  gap:4px; z-index:50; width:220px;
}
.tg-emoji-picker.open { display:grid; }
.tg-emoji-item { font-size:1.3rem; text-align:center; cursor:pointer; padding:5px; border-radius:8px; transition:.15s; }
.tg-emoji-item:hover { background:var(--hover-bg); }
.tg-app { position:relative; }

/* ========== INSTALLMENTS: REDESIGN ========== */
.installments-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
@media (max-width:900px) { .installments-stats { grid-template-columns:repeat(2,1fr); } }

.filter-bar { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.filter-bar .filter-group { display:flex; flex-direction:column; gap:5px; }
.filter-bar .filter-group label { font-size:.72rem; font-weight:600; color:var(--text-tertiary); }
.filter-bar .filter-group button,
.filter-bar .filter-group a.btn { margin-top:0 !important; height:38px; display:flex; align-items:center; }

.installments-stats .stat-card { transition:.2s; }
.installments-stats .stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ========== CHAT: STICKERS ========== */
.tg-bubble-sticker { background:transparent !important; box-shadow:none !important; padding:2px !important; position:relative; }
.tg-sticker-display { width:96px; height:96px; display:block; }
.tg-bubble-sticker .tg-meta { position:absolute; bottom:-2px; left:6px; font-size:.62rem; opacity:.7; }

.tg-sticker-picker {
  position:absolute; bottom:64px; right:14px; background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:10px; display:none; grid-template-columns:repeat(4,1fr);
  gap:8px; z-index:50; width:260px;
}
.tg-sticker-picker.open { display:grid; }
.tg-sticker-item { width:54px; height:54px; cursor:pointer; transition:.15s; border-radius:8px; }
.tg-sticker-item:hover { transform:scale(1.12); }


/* ════════════════════════════════════════════
   BimehKar v12 — Blue Enterprise Clean UI
   فقط ظاهر: رنگ، فاصله، دارک‌مود، لوگو، سایدبار، فرم، جدول
   ════════════════════════════════════════════ */
:root{
  --bk-blue-950:#031a3a;
  --bk-blue-900:#062a5b;
  --bk-blue-850:#07346f;
  --bk-blue-750:#0a4fa8;
  --bk-blue-650:#0b63ce;
  --bk-blue-550:#1683f7;
  --bk-blue-350:#72bdff;
  --bk-cyan:#22b8e8;
  --bg-color:#f2f6fc;
  --card-bg:#ffffff;
  --surface-2:#f8fbff;
  --surface-3:#edf4fd;
  --primary-blue:#0b63ce;
  --primary-dark:#062a5b;
  --primary-light:#72bdff;
  --text-primary:#13233a;
  --text-secondary:#34435a;
  --text-tertiary:#6d7c91;
  --border-color:#dce7f5;
  --border-soft:#eaf1fa;
  --shadow-sm:0 8px 24px rgba(8,39,86,.07);
  --shadow-md:0 16px 38px rgba(8,39,86,.10);
  --shadow-lg:0 26px 66px rgba(8,39,86,.16);
  --sidebar-bg:#062a5b;
  --sidebar-bg-2:#0a438a;
  --sidebar-text:#f4f9ff;
  --sidebar-text-secondary:#b3cae8;
  --hover-bg:rgba(11,99,206,.075);
  --dropdown-bg:#fff;
  --search-bg:rgba(255,255,255,.10);
  --input-bg:#fff;
  --danger:#df4e60;
  --warning:#df8a16;
  --success:#16a66e;
  --violet:#7758e7;
  --radius:22px;
  --radius-sm:16px;
  --radius-xs:11px;
  --bg:var(--bg-color);
  --bg-card:var(--card-bg);
  --border:var(--border-color);
  --primary:var(--primary-blue);
  --text:var(--text-primary);
  --text-light:var(--text-tertiary);
  --text-muted:var(--text-tertiary);
}
[data-theme="dark"]{
  --bg-color:#07111f;
  --card-bg:#0f1c2f;
  --surface-2:#13243b;
  --surface-3:#172d4c;
  --primary-blue:#5aa9ff;
  --primary-dark:#2d82df;
  --primary-light:#99d3ff;
  --text-primary:#f2f7ff;
  --text-secondary:#d5dfed;
  --text-tertiary:#9fadc1;
  --border-color:#21334d;
  --border-soft:#17283f;
  --shadow-sm:0 10px 26px rgba(0,0,0,.24);
  --shadow-md:0 18px 44px rgba(0,0,0,.32);
  --shadow-lg:0 28px 72px rgba(0,0,0,.45);
  --sidebar-bg:#06101f;
  --sidebar-bg-2:#0b2444;
  --sidebar-text:#f2f8ff;
  --sidebar-text-secondary:#88a2c3;
  --hover-bg:rgba(90,169,255,.11);
  --dropdown-bg:#101f33;
  --search-bg:rgba(255,255,255,.08);
  --input-bg:#101f33;
  --danger:#ff7182;
  --warning:#ffb84d;
  --success:#40d89b;
  --violet:#aa92ff;
  --bg:var(--bg-color);
  --bg-card:var(--card-bg);
  --border:var(--border-color);
  --primary:var(--primary-blue);
  --text:var(--text-primary);
  --text-light:var(--text-tertiary);
  --text-muted:var(--text-tertiary);
}
*{scrollbar-color:rgba(11,99,206,.35) transparent;scrollbar-width:thin}
html{background:var(--bg-color)}
body{
  background:
    radial-gradient(950px 520px at 72% -12%, rgba(22,131,247,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.48), transparent 300px),
    var(--bg-color) !important;
  color:var(--text-primary);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[data-theme="dark"] body{
  background:
    radial-gradient(950px 520px at 72% -12%, rgba(90,169,255,.14), transparent 58%),
    linear-gradient(180deg, rgba(23,45,76,.18), transparent 300px),
    var(--bg-color) !important;
}
body:before{display:none!important}

/* layout */
.sidebar{
  width:274px;
  background:
    radial-gradient(520px 420px at 100% -12%, rgba(34,184,232,.22), transparent 58%),
    linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg-2));
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-18px 0 46px rgba(3,26,58,.20);
}
.main{margin-right:274px;}
.sidebar-header{padding:18px 14px 16px;border-bottom:1px solid rgba(255,255,255,.10)}
.sidebar .logo{
  min-height:104px;
  padding:12px;
  margin-bottom:14px;
  border-radius:28px;
  background:linear-gradient(180deg,#fff,#f4f9ff);
  border:1px solid rgba(255,255,255,.94);
  box-shadow:0 18px 36px rgba(0,0,0,.17), inset 0 0 0 1px rgba(6,42,91,.08);
  overflow:hidden;
}
[data-theme="dark"] .sidebar .logo{background:linear-gradient(180deg,#ffffff,#eef6ff);border-color:rgba(255,255,255,.90)}
.sidebar .logo .logo-image{
  width:auto!important;
  max-width:88%!important;
  max-height:78px!important;
  height:auto!important;
  object-fit:contain!important;
  filter:none!important;
}
.sidebar .logo:focus-visible{outline:3px solid rgba(114,189,255,.50);outline-offset:3px}
.search-box{position:relative}
.sidebar .search-box input,
[data-theme="light"] .sidebar .search-box input,
[data-theme="dark"] .sidebar .search-box input{
  height:40px!important;
  border-radius:15px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(3,18,39,.26)!important;
  color:#fff!important;
  padding:8px 36px 8px 34px!important;
  font-size:.78rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.sidebar .search-box input::placeholder{color:rgba(231,243,255,.62)!important}
.sidebar .search-box input:focus{background:rgba(3,18,39,.34)!important;border-color:rgba(114,189,255,.56)!important;box-shadow:0 0 0 4px rgba(90,169,255,.16)!important}
.sidebar .search-box .search-icon{right:12px;color:rgba(231,243,255,.78);font-size:.78rem}
.sidebar .search-box .clear-search{left:10px;color:rgba(231,243,255,.75);border-radius:8px}
.sidebar .search-box .clear-search:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-menu{padding:11px 10px 18px}
.menu-group{margin-bottom:7px;border-radius:18px}
.menu-group-header{
  min-height:42px;
  padding:8px 10px;
  border-radius:15px;
  color:var(--sidebar-text-secondary);
  font-size:.75rem;
  letter-spacing:0;
}
.menu-group-header:hover{background:rgba(255,255,255,.075);color:#fff}
.menu-group-header .group-icon{
  width:28px;height:28px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.09);
  color:#d9edff;opacity:1;font-size:.78rem;
}
.menu-group-header .group-arrow{opacity:.55}
.menu-items{padding:4px 8px 2px 0;margin-top:0}
.menu-item{
  min-height:38px;
  padding:8px 10px;
  margin:2px 0;
  border-radius:14px;
  color:var(--sidebar-text-secondary);
  font-size:.80rem;
  border:1px solid transparent;
}
.menu-item:hover{background:rgba(255,255,255,.075);color:var(--sidebar-text)}
.menu-item.active{
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(114,189,255,.13));
  color:#fff!important;
  border-color:rgba(255,255,255,.15);
  box-shadow:inset 3px 0 0 #8ed0ff;
}
.menu-item .item-icon{width:22px;font-size:.82rem;color:currentColor!important;opacity:.92;text-align:center}
.menu-item.active .item-icon{opacity:1;color:#fff!important}.dev-dot{background:#ffb84d}.star-btn{border-radius:9px}.star-btn:hover{background:rgba(255,255,255,.10)}

.header{
  height:68px;
  margin:18px 24px 0;
  padding:0 18px;
  border:1px solid rgba(220,231,245,.88);
  border-radius:24px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm);
}
[data-theme="dark"] .header{background:rgba(15,28,47,.82);border-color:var(--border-color)}
.date{gap:10px;color:var(--text-secondary);font-weight:700}.date span{white-space:nowrap}
.header-left{gap:9px}.menu-toggle,.theme-btn,.notif-btn{width:40px;height:40px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border-color);color:var(--text-secondary)}
.menu-toggle:hover,.theme-btn:hover,.notif-btn:hover{background:var(--hover-bg);color:var(--primary-blue);border-color:rgba(11,99,206,.24)}
.avatar-btn{height:42px;padding:0 4px;border-radius:16px}.avatar-icon{width:40px;height:40px;border-radius:15px;border:0;background:linear-gradient(135deg,var(--primary-blue),var(--bk-cyan));box-shadow:0 10px 24px rgba(11,99,206,.22)}
.chevron-icon{margin-left:4px}.dropdown{border-radius:20px;border-color:var(--border-color);box-shadow:var(--shadow-lg);overflow:hidden}.dropdown-header{background:linear-gradient(180deg,var(--surface-2),var(--card-bg))}
.content{padding:26px 24px 14px}.page-title{font-size:1.34rem;margin:10px 0 22px;font-weight:900;color:var(--text-primary);position:relative;padding-right:18px}.page-title:before{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:5px;height:30px;border-radius:9px;background:linear-gradient(180deg,var(--primary-blue),var(--bk-cyan))}.page-title i{color:var(--primary-blue)}

/* cards, tables, forms */
.stats-grid,.stats,.thirdparty-stats,.installments-stats{gap:16px;margin-bottom:24px}.stat-card,.card,.table-card,.chart-card,.filter-section,.desk-shortcut-card,.report-card{background:linear-gradient(180deg,var(--card-bg),var(--surface-2));border:1px solid var(--border-color);border-radius:24px;box-shadow:var(--shadow-sm)}
.stat-card{min-height:100px;padding:18px;position:relative;overflow:hidden}.stat-card:after{display:none!important;content:none!important}.stat-card:hover,.card:hover,.table-card:hover,.desk-shortcut-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(11,99,206,.22)}
.stat-icon{width:50px;height:50px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}.stat-icon.blue{background:rgba(11,99,206,.11);color:var(--primary-blue)}.stat-icon.red{background:rgba(223,78,96,.12);color:var(--danger)}.stat-icon.orange,.stat-icon.yellow{background:rgba(223,138,22,.13);color:var(--warning)}.stat-icon.green{background:rgba(22,166,110,.13);color:var(--success)}.stat-icon.purple{background:rgba(119,88,231,.12);color:var(--violet)}.stat-value{font-size:1.58rem;line-height:1.1;font-weight:900;color:var(--text-primary)}.stat-label{font-size:.78rem;color:var(--text-tertiary);font-weight:700}.card{padding:20px}.card-header{border-bottom:1px solid var(--border-soft);padding-bottom:14px}.card-title{font-weight:900;color:var(--text-primary)}.card-title i{color:var(--primary-blue)}
.table-wrapper{border:1px solid var(--border-color);border-radius:18px;overflow:auto;background:var(--card-bg)}table{width:100%;border-collapse:separate;border-spacing:0;background:transparent}thead th{background:var(--surface-2)!important;color:var(--text-secondary);font-size:.76rem;font-weight:900;border-bottom:1px solid var(--border-color);padding:12px 13px;white-space:nowrap}tbody td{padding:12px 13px;border-bottom:1px solid var(--border-soft);color:var(--text-secondary);font-size:.82rem}tbody tr:hover td{background:var(--hover-bg)}tbody tr:last-child td{border-bottom:0}.form-control,input[type="text"],input[type="password"],input[type="number"],input[type="date"],input[type="search"],select,textarea{background:var(--input-bg)!important;color:var(--text-primary)!important;border:1px solid var(--border-color)!important;border-radius:14px!important;min-height:42px;outline:none}.form-control:focus,input:focus,select:focus,textarea:focus{border-color:rgba(11,99,206,.55)!important;box-shadow:0 0 0 4px rgba(11,99,206,.10)!important}.form-label,label{color:var(--text-secondary);font-weight:800}.btn,button.btn,a.btn{border-radius:14px;border:1px solid transparent;min-height:38px;align-items:center;gap:7px;font-weight:900;box-shadow:none}.btn:not(.btn-secondary):not(.btn-danger):not(.btn-warning){background:linear-gradient(135deg,var(--primary-blue),var(--bk-cyan));color:#fff}.btn-secondary{background:var(--surface-2)!important;border-color:var(--border-color)!important;color:var(--text-secondary)!important}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.alert,.expiry-alert-bar{border-radius:18px;border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}.placeholder-content,.dev-placeholder{background:linear-gradient(180deg,var(--card-bg),var(--surface-2));border:1px dashed rgba(11,99,206,.24);border-radius:24px;color:var(--text-tertiary)}
.footer{margin:34px 24px 18px;border-radius:20px;background:rgba(255,255,255,.52);border:1px solid var(--border-color);box-shadow:none}[data-theme="dark"] .footer{background:rgba(15,28,47,.46)}

/* login: logo has its own compatible background */
.login-body{min-height:100vh;background:radial-gradient(900px 520px at 76% 0%,rgba(34,184,232,.20),transparent 58%),linear-gradient(135deg,#062a5b 0%,#0b63ce 58%,#eef6ff 58%,#f7fbff 100%)!important}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.login-box{width:min(430px,100%);border-radius:30px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.72);box-shadow:0 28px 72px rgba(3,26,58,.24);backdrop-filter:blur(14px);padding:30px}.login-logo{gap:10px}.login-logo-image{height:112px!important;width:auto!important;max-width:138px!important;object-fit:contain!important;background:linear-gradient(180deg,#fff,#f3f8ff);border-radius:30px;padding:15px;box-shadow:0 16px 34px rgba(6,42,91,.14),inset 0 0 0 1px rgba(6,42,91,.06)}.login-logo-text{font-size:1.36rem;color:#10233d}.login-subtitle{color:#64748b}.login-input-wrapper i{right:16px;color:var(--primary-blue)}.login-input-wrapper .form-control{padding-right:44px!important;background:#f8fbff!important}.login-footer{color:#7a8799}

/* dark details */
[data-theme="dark"] .stat-card,[data-theme="dark"] .card,[data-theme="dark"] .table-card,[data-theme="dark"] .chart-card,[data-theme="dark"] .filter-section,[data-theme="dark"] .desk-shortcut-card,[data-theme="dark"] .report-card{background:linear-gradient(180deg,var(--card-bg),var(--surface-2));border-color:var(--border-color);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 36px rgba(0,0,0,.28)}[data-theme="dark"] thead th{background:var(--surface-3)!important}[data-theme="dark"] .table-wrapper{background:var(--card-bg)}[data-theme="dark"] .stat-icon{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}[data-theme="dark"] .stat-icon.blue{background:rgba(90,169,255,.15);color:#8ed0ff}[data-theme="dark"] .stat-icon.red{background:rgba(255,113,130,.13);color:#ff8f9d}[data-theme="dark"] .stat-icon.orange,[data-theme="dark"] .stat-icon.yellow{background:rgba(255,184,77,.14);color:#ffd08a}[data-theme="dark"] .stat-icon.green{background:rgba(64,216,155,.13);color:#70eab9}[data-theme="dark"] .stat-icon.purple{background:rgba(170,146,255,.14);color:#c4b5ff}

@media (max-width:1100px){.sidebar{width:256px}.main{margin-right:256px}.stats-grid,.stats,.thirdparty-stats,.installments-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.sidebar{width:min(86vw,320px);transform:translateX(100%)}.sidebar.open{transform:translateX(0)}.main{margin-right:0}.header{height:auto;min-height:62px;margin:12px 12px 0;padding:10px 12px;border-radius:20px}.date span{font-size:.74rem}.content{padding:16px 12px}.page-title{font-size:1.08rem;margin-top:6px}.stats-grid,.stats,.thirdparty-stats,.installments-stats{grid-template-columns:1fr;gap:12px}.stat-card{min-height:88px}.card{padding:15px;border-radius:20px}.table-wrapper{border-radius:16px}table{min-width:640px}.footer{margin:24px 12px 12px}.sidebar .logo{min-height:94px}.sidebar .logo .logo-image{max-height:68px!important}.login-page{padding:18px}.login-box{padding:24px 20px;border-radius:26px}.login-logo-image{height:98px!important}}
@media (max-width:520px){.header-left{gap:6px}.theme-btn,.notif-btn,.menu-toggle{width:36px;height:36px;border-radius:13px}.avatar-icon{width:36px;height:36px}.content{padding-left:10px;padding-right:10px}.stat-value{font-size:1.42rem}.dropdown{left:-70px}.notif-dropdown{width:286px;left:-66px}.login-body{background:linear-gradient(180deg,#062a5b 0%,#0b63ce 38%,#f4f8ff 38%,#f8fbff 100%)!important}}


/* ===== BimehKar v12.3 final professional polish ===== */
.status-badge.info{background:rgba(11,99,206,.10);color:var(--primary-blue);border:1px solid rgba(11,99,206,.18)}
.status-badge.warning{background:rgba(217,119,6,.10);color:#b45309;border:1px solid rgba(217,119,6,.18)}
.status-badge.success{background:rgba(22,163,74,.10);color:#15803d;border:1px solid rgba(22,163,74,.18)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full{grid-column:1/-1}.form-actions{display:flex;gap:10px;align-items:center}.inline-form{display:flex;gap:8px;align-items:center}.mini-select{min-width:128px;min-height:36px;padding:6px 10px}.empty-cell{text-align:center;color:var(--text-tertiary);padding:24px!important}.small{font-size:.78rem}.muted{color:var(--text-tertiary)}
.ticket-layout{align-items:start}.compact-stats{margin-bottom:16px}.card-title i,.page-title i{color:var(--primary-blue)}
.sidebar .search-box input{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important}.sidebar .search-box input:focus{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.24)!important}
.login-logo-image{max-width:180px;max-height:82px;object-fit:contain}.login-logo{background:rgba(255,255,255,.72);border:1px solid rgba(11,99,206,.12);border-radius:18px;padding:14px}
[data-theme=dark] .status-badge.info{color:#93c5fd}[data-theme=dark] .status-badge.warning{color:#fbbf24}[data-theme=dark] .status-badge.success{color:#86efac}[data-theme=dark] .login-logo{background:rgba(255,255,255,.92)}
@media(max-width:900px){.form-grid,.grid-2{grid-template-columns:1fr!important}.admin-grid{grid-template-columns:1fr!important}}
@media(max-width:620px){.form-actions,.inline-form{flex-direction:column;align-items:stretch}.mini-select{width:100%}.ticket-layout{display:block}.stats-grid.compact-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}


/* BimehKar v12.4 audited professional polish */
.dev-placeholder{position:relative;overflow:hidden;border:1px solid var(--border);background:linear-gradient(135deg,rgba(11,99,206,.08),rgba(34,168,232,.06)),var(--card-bg);box-shadow:0 14px 36px rgba(15,35,70,.07)}
.dev-placeholder:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 20%,rgba(11,99,206,.12),transparent 30%);pointer-events:none}.dev-placeholder i{color:var(--primary-blue);background:rgba(11,99,206,.1);width:58px;height:58px;display:inline-flex;align-items:center;justify-content:center;border-radius:18px}.dev-placeholder h3{font-size:1.05rem;color:var(--text-primary)}.dev-placeholder p{max-width:560px;margin-left:auto;margin-right:auto;line-height:1.9}
.status-badge.success,.status-badge.info,.status-badge.warning{white-space:nowrap}.data-table td,.data-table th{vertical-align:middle}.page-title span{line-height:1.7}.muted.small{font-size:.74rem;color:var(--text-tertiary)}
.form-card .form-grid .full{grid-column:1/-1}.ticket-layout .table-card{min-width:0}.mini-select{min-width:130px}.inline-form{margin:0}
[data-theme=dark] .dev-placeholder{background:linear-gradient(135deg,rgba(11,99,206,.18),rgba(34,168,232,.08)),var(--card-bg)}[data-theme=dark] iframe{background:#fff}

/* BimehKar v12.5 — transparent logo surfaces */
.sidebar .logo,
[data-theme="light"] .sidebar .logo,
[data-theme="dark"] .sidebar .logo{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(8px);
}
.sidebar .logo .logo-image{
  background:transparent!important;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.22))!important;
}
.login-logo,
[data-theme="dark"] .login-logo{
  background:linear-gradient(180deg,rgba(11,99,206,.055),rgba(34,168,232,.025))!important;
  border:1px solid rgba(11,99,206,.12)!important;
  box-shadow:none!important;
}
.login-logo-image,
[data-theme="dark"] .login-logo-image{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 10px 18px rgba(6,42,91,.20))!important;
}

/* v12.6 existing-tabs upgrade */
.claim-tool-shell{background:var(--card-bg);border:1px solid var(--border-color);border-radius:16px;padding:14px;overflow:hidden}.claim-tool-shell iframe{display:block;width:100%;min-height:760px;border:0;background:transparent}.badge-blue{background:rgba(11,99,206,.12);color:var(--primary-blue)}@media(max-width:768px){.claim-tool-shell{padding:8px}.claim-tool-shell iframe{min-height:980px}.stats-grid[style*="repeat(3"]{grid-template-columns:1fr!important}}

/* v14 unified tools and complete settings */
.app-header,.top-header,.header{background:var(--header-bg-custom,var(--card-bg))}
.settings-tabbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.settings-tabbar button{border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-secondary);padding:9px 14px;border-radius:10px;cursor:pointer;font-family:inherit}.settings-tabbar button.active{background:var(--primary);color:#fff;border-color:var(--primary)}.settings-panel{display:none}.settings-panel.active{display:block}.settings-colors{grid-template-columns:repeat(4,minmax(120px,1fr))}.settings-colors input[type=color]{width:100%;height:48px;border:1px solid var(--border-color);border-radius:10px;background:var(--card-bg);padding:4px}.settings-live-preview{--pv-primary:#0B63CE;--pv-side:#062A5B;--pv-head:#fff;--pv-radius:14px;display:grid;grid-template-columns:110px 1fr;min-height:220px;border:1px solid var(--border-color);border-radius:14px;overflow:hidden;margin-top:18px;background:var(--surface-soft)}.preview-sidebar{background:var(--pv-side)}.preview-main{display:flex;flex-direction:column}.preview-header{height:48px;background:var(--pv-head);border-bottom:1px solid var(--border-color)}.preview-card{margin:18px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--pv-radius);padding:20px;display:flex;flex-direction:column;gap:8px}.preview-card button{align-self:flex-start;background:var(--pv-primary);color:#fff;border:0;padding:8px 14px;border-radius:8px}.logo-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.logo-preview{min-height:120px;border:1px solid var(--border-color);border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface-soft);margin-bottom:10px}.logo-preview.sidebar{background:var(--sidebar-bg)}.logo-preview img{max-width:180px;max-height:100px;object-fit:contain}.setting-switch{display:flex;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border-color)}.setting-switch input{width:18px;height:18px}.settings-actions{margin:16px 0 8px}.tool-note{background:color-mix(in srgb,var(--primary) 7%,var(--card-bg));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border-color));border-radius:12px;padding:11px 14px;margin-bottom:14px;color:var(--text-secondary);display:flex;gap:8px;align-items:center}.tool-note i{color:var(--primary)}
@media(max-width:900px){.settings-colors{grid-template-columns:1fr 1fr}.logo-settings-grid{grid-template-columns:1fr}.settings-live-preview{grid-template-columns:72px 1fr}}


/* BimehKar v15 — Unified production UI */
:root{--success:#16A66E;--warning:#DF8A16;--danger:#DF4E60;--surface-app:#F3F7FD;--button-radius:12px;--font-scale:1;}
html{font-size:calc(16px * var(--font-scale))}body{background:var(--bg-primary,var(--surface-app));}
.card,.table-card,.chart-card,.filter-section,.report-card,.stat-card{border-radius:var(--radius-lg,18px)!important}
.btn,button.btn,a.btn{border-radius:var(--button-radius,12px)!important}
.content>.card,.content>.table-card,.content>.admin-grid,.content>.settings-pro,.content>.page-title{animation:none!important}
.header,.top-header,.app-header{background:var(--header-bg-custom,var(--card-bg))!important}
.settings-pro{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start}.settings-nav{position:sticky;top:86px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:18px;padding:10px;box-shadow:var(--shadow-sm)}.settings-nav button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text-secondary);padding:12px 13px;border-radius:12px;cursor:pointer;font:inherit;font-weight:800;text-align:right}.settings-nav button i{width:20px;color:var(--text-tertiary)}.settings-nav button:hover{background:var(--hover-bg)}.settings-nav button.active{background:linear-gradient(135deg,var(--primary),var(--bk-cyan));color:#fff}.settings-nav button.active i{color:#fff}.settings-workspace{min-width:0}.settings-panel{display:none}.settings-panel.active{display:block}.settings-section-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:0 0 14px}.settings-section-head h3{margin:0 0 5px;color:var(--text-primary);font-size:1.05rem}.settings-section-head p{margin:0;color:var(--text-tertiary);font-size:.8rem}.settings-colors{grid-template-columns:repeat(4,minmax(150px,1fr))}.color-control{display:grid;grid-template-columns:54px 1fr;gap:8px}.color-control input[type=color]{width:54px;height:42px;padding:3px;border:1px solid var(--border-color);border-radius:11px;background:var(--card-bg)}.color-text{direction:ltr;text-align:center;text-transform:uppercase}.settings-live-preview{--pv-primary:#0B63CE;--pv-side:#062A5B;--pv-head:#fff;--pv-accent:#22A8E8;--pv-surface:#F3F7FD;--pv-radius:18px;display:grid;grid-template-columns:150px 1fr;min-height:330px;border:1px solid var(--border-color);border-radius:22px;overflow:hidden;margin-top:18px;background:var(--pv-surface);box-shadow:var(--shadow-md)}.preview-sidebar{background:var(--pv-side);padding:22px 14px;display:flex;flex-direction:column;gap:12px}.preview-sidebar .preview-logo{width:74px;height:48px;border-radius:12px;background:rgba(255,255,255,.92);margin:0 auto 15px}.preview-sidebar span{display:block;height:12px;border-radius:7px;background:rgba(255,255,255,.17)}.preview-sidebar span.active{background:linear-gradient(90deg,var(--pv-primary),var(--pv-accent));height:32px}.preview-main{display:flex;flex-direction:column}.preview-header{height:62px;background:var(--pv-head);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid rgba(0,0,0,.07)}.preview-header i{width:28px;height:28px;border-radius:50%;background:var(--pv-primary)}.preview-content{padding:20px}.preview-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.preview-stat-row div{height:72px;border-radius:var(--pv-radius);background:#fff;border:1px solid rgba(0,0,0,.06)}.preview-card{margin-top:14px;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:var(--pv-radius);padding:18px;display:flex;flex-direction:column;gap:10px}.preview-card input{border:1px solid #dbe4ef;border-radius:10px;padding:10px}.preview-card button{align-self:flex-start;background:linear-gradient(135deg,var(--pv-primary),var(--pv-accent));color:#fff;border:0;padding:9px 16px;border-radius:10px}.logo-manager-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.logo-manager{text-align:center}.logo-manager h4{margin:10px 0}.inline-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.settings-savebar{position:sticky;bottom:12px;z-index:20;background:color-mix(in srgb,var(--card-bg) 92%,transparent);backdrop-filter:blur(14px);border:1px solid var(--border-color);border-radius:18px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px;box-shadow:var(--shadow-lg);margin-top:18px}.settings-savebar>div:first-child{display:flex;flex-direction:column}.settings-savebar span{font-size:.72rem;color:var(--text-tertiary)}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.setting-switch{display:flex!important;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--border-soft);cursor:pointer}.setting-switch input{width:20px;height:20px;accent-color:var(--primary)}.setting-switch span{display:flex;flex-direction:column;gap:3px}.setting-switch small{color:var(--text-tertiary);font-weight:500}.archive-danger-zone{margin-top:16px;padding:14px;border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border-color));background:color-mix(in srgb,var(--danger) 7%,var(--card-bg));border-radius:16px}.range-value{margin-top:6px;color:var(--text-tertiary);font-size:.8rem}
/* Force tool pages to inherit one visual system */
.content .tool-page,.content [class*="tool-"],.content .native-tool{--tool-primary:var(--primary);--tool-accent:var(--bk-cyan);color:var(--text-primary)}
.content .tool-page .card,.content [class*="tool-"] .card,.content .native-tool .card{background:var(--card-bg)!important;border-color:var(--border-color)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important}
.content .tool-page input,.content .tool-page select,.content .tool-page textarea,.content [class*="tool-"] input,.content [class*="tool-"] select,.content [class*="tool-"] textarea{background:var(--input-bg)!important;color:var(--text-primary)!important;border-color:var(--border-color)!important;border-radius:12px!important}
.content .tool-page table,.content [class*="tool-"] table{background:transparent!important}.content .tool-page th,.content [class*="tool-"] th{background:var(--surface-2)!important;color:var(--text-secondary)!important}.content .tool-page td,.content [class*="tool-"] td{color:var(--text-secondary)!important;border-color:var(--border-soft)!important}
@media(max-width:1050px){.settings-pro{grid-template-columns:1fr}.settings-nav{position:static;display:flex;overflow:auto}.settings-nav button{width:auto;min-width:max-content}.settings-colors{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:680px){.settings-colors,.logo-manager-grid,.feature-grid{grid-template-columns:1fr}.settings-live-preview{grid-template-columns:92px 1fr;min-height:280px}.preview-stat-row{grid-template-columns:1fr}.preview-stat-row div:nth-child(n+2){display:none}.settings-savebar{align-items:flex-start;flex-direction:column}.settings-savebar .inline-actions{width:100%}.settings-savebar .btn{flex:1}.settings-nav button span{display:none}.settings-nav button{min-width:46px;justify-content:center}.settings-nav button i{width:auto}}
/* v16 payroll + unified interaction layer */
:root{--motion-fast:120ms;--motion-normal:180ms}
*,*:before,*:after{transition-duration:var(--motion-fast)}
body{font-variant-numeric:tabular-nums}
.payroll-pro-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.payroll-pro-tabs button{border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-secondary);padding:10px 14px;border-radius:var(--radius-sm);font:inherit;font-weight:700;cursor:pointer}.payroll-pro-tabs button.active{background:var(--primary);color:#fff;border-color:var(--primary)}.payroll-pane{display:none}.payroll-pane.active{display:block}.payroll-toolbar{display:flex;justify-content:space-between;align-items:end;gap:16px}.payroll-toolbar form{display:flex;align-items:end;gap:8px}.payroll-toolbar label{font-size:.78rem}.payroll-stats .stat-value{font-size:1.15rem}.cell-sub{display:block;color:var(--text-tertiary);font-size:.72rem;margin-top:3px}.export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.export-card{display:flex;flex-direction:column;gap:7px;padding:18px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface-soft);color:var(--text-primary);text-decoration:none}.export-card i{font-size:1.5rem;color:var(--primary)}.export-card span{font-size:.78rem;color:var(--text-tertiary);line-height:1.7}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings-grid label{font-size:.78rem;font-weight:700}.settings-grid input{margin-top:6px}.section-mini-title{margin:22px 0 10px}.tax-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}.tax-grid>div{display:grid;grid-template-columns:2fr 1fr;gap:6px}.payroll-slip-modal{max-width:720px}.pay-slip{padding:28px;background:#fff;color:#172033}.pay-slip-head{display:flex;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:2px solid #0b63ce}.pay-slip-head>div{display:flex;flex-direction:column;gap:4px}.pay-slip-head span{font-size:12px;color:#667085}.pay-slip-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:18px}.pay-slip-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #e7edf5;font-size:13px}.pay-slip-row strong{direction:ltr}.pay-slip-row .ded{color:#c83232}.pay-slip-footer{text-align:center;font-size:11px;color:#667085;margin-top:22px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--border-color)}
@media(max-width:850px){.export-grid,.settings-grid,.tax-grid{grid-template-columns:1fr}.payroll-toolbar{align-items:stretch;flex-direction:column}.payroll-toolbar form{width:100%;flex-wrap:wrap}.pay-slip-grid{grid-template-columns:1fr}}
@media print{body *{visibility:hidden!important}#slipPrintArea,#slipPrintArea *{visibility:visible!important}#slipPrintArea{position:absolute;inset:0;width:100%;background:#fff}.modal-header,.modal-footer{display:none!important}.pay-slip{padding:12mm}}

/* v17 organization, import and sample files */
.sample-file-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;margin:0 0 14px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border-color));border-radius:var(--radius);font-size:.78rem}.sample-file-bar>i{color:var(--success);font-size:1.2rem}.sample-file-bar span{flex:1;min-width:220px}.upload-action-row{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;align-items:center}.import-preview{margin-top:10px}.form-hint{font-size:.75rem;color:var(--text-muted);margin:-4px 0 12px}@media(max-width:780px){.upload-action-row{grid-template-columns:1fr}.sample-file-bar .btn{width:100%}}

/* v18 professional system refinements */
.global-search{display:flex;align-items:center;min-width:280px;max-width:420px;background:var(--surface,#fff);border:1px solid var(--border-color);border-radius:12px;overflow:hidden}.global-search input{border:0!important;background:transparent!important;box-shadow:none!important;min-width:0;height:40px;padding:0 12px}.global-search button{width:42px;height:40px;border:0;background:transparent;color:var(--primary);cursor:pointer}.permission-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.permission-actions label{display:flex;align-items:center;gap:7px;padding:10px;border:1px solid var(--border-color);border-radius:10px;background:var(--surface-secondary);cursor:pointer}.permission-actions input{accent-color:var(--primary)}.action-matrix small{display:block;margin-top:8px;color:var(--text-tertiary)}.settings-panel[data-panel=backup] form{margin:0}.attendance-month-summary{margin-top:16px}.import-governance .stat-card{min-height:88px}.global-results{margin-bottom:18px}@media(max-width:900px){.global-search{display:none}.permission-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.permission-actions{grid-template-columns:1fr}}