@font-face {
  font-family: 'Vazir';
  src: url('../fonts/Vazir.woff2') format('woff2'), url('../fonts/Vazir.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('../fonts/Vazir-Bold.woff2') format('woff2'), url('../fonts/Vazir-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root{
  --primary:#4f46e5; --primary-light:#6366f1; --primary-dark:#4338ca;
  --accent:#0ea5a4;
  --success:#16a34a; --warning:#d97706; --danger:#dc2626; --info:#0891b2;
  --bg:#f4f5f9; --surface:#ffffff; --border:#e5e7eb;
  --text:#1f2937; --text-muted:#6b7280;
  --radius:12px; --radius-lg:16px;
  --shadow:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
  --sidebar-w:268px;
}
[data-theme="dark"]{
  --bg:#0d0f16; --surface:#161923; --border:#272b38;
  --text:#e7e9ee; --text-muted:#98a0b3;
  --shadow:0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Vazir', Tahoma, sans-serif;
  direction:rtl; text-align:right;
  background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0 0 8px;}
input,select,textarea,button{font-family:inherit; font-size:inherit;}
::selection{background:var(--primary-light); color:#fff;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:20px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}

/* ---------- Layout ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--surface);
  border-left:1px solid var(--border); position:fixed; right:0; top:0; bottom:0;
  overflow-y:auto; z-index:40; transition:transform .2s;
}
.sidebar-brand{display:flex; align-items:center; gap:11px; padding:20px 18px; border-bottom:1px solid var(--border); background:linear-gradient(160deg, color-mix(in srgb, var(--primary) 6%, var(--surface)), var(--surface));}
.sidebar-brand .logo-badge{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;box-shadow:0 4px 10px rgba(79,70,229,.35);}
.sidebar-brand strong{font-size:16px;}
.sidebar nav{padding:14px 10px;}
.nav-group-title{font-size:11px; color:var(--text-muted); padding:16px 12px 6px; letter-spacing:.5px; font-weight:700; text-transform:uppercase; opacity:.75;}
.nav-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--text); margin-bottom:2px; font-size:13.5px; position:relative; transition:background .15s, color .15s;}
.nav-item:hover{background:var(--bg);}
.nav-item.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:0 4px 10px rgba(79,70,229,.25);}
.nav-item .ic{width:18px; text-align:center;}
.nav-badge{margin-inline-start:auto; background:var(--danger); color:#fff; font-size:11px; border-radius:20px; padding:1px 7px;}

.main{margin-right:var(--sidebar-w); flex:1; min-width:0;}
.topbar{
  height:64px; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 20px; position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(1.2);
}
.topbar .search-box{flex:1; max-width:420px; position:relative;}
.topbar .search-box input{width:100%; padding:9px 14px 9px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); transition:border-color .15s, box-shadow .15s;}
.topbar .search-box input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,.12);}
.topbar-actions{display:flex; align-items:center; gap:14px;}
.icon-btn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);cursor:pointer;position:relative;transition:background .15s, transform .1s;}
.icon-btn:hover{background:var(--border);}
.icon-btn:active{transform:scale(.94);}
.user-chip{display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 6px; border-radius:10px; transition:background .15s;}
.user-chip:hover{background:var(--bg);}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}

.page{padding:22px;}
.page-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.page-header h1{font-size:19px;}
.breadcrumb{font-size:12.5px; color:var(--text-muted); margin-bottom:4px;}
.breadcrumb a{color:var(--primary);}

/* ---------- Cards / grid ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); transition:box-shadow .2s, transform .15s;}
a.card:hover, .card.hoverable:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-body{padding:18px;}
.card-header{padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-weight:700;}
.grid{display:grid; gap:16px;}
.grid-cols-2{grid-template-columns:repeat(2,1fr);}
.grid-cols-3{grid-template-columns:repeat(3,1fr);}
.grid-cols-4{grid-template-columns:repeat(4,1fr);}
.grid-cols-6{grid-template-columns:repeat(6,1fr);}
@media(max-width:1100px){.grid-cols-4{grid-template-columns:repeat(2,1fr);} .grid-cols-6{grid-template-columns:repeat(3,1fr);} .grid-cols-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-cols-2,.grid-cols-3,.grid-cols-4,.grid-cols-6{grid-template-columns:1fr;}}

.stat-card{padding:16px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; gap:6px; transition:box-shadow .2s, transform .15s;}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-card .stat-top{display:flex;align-items:center;justify-content:space-between;}
.stat-card .stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.stat-card .stat-value{font-size:25px; font-weight:800; letter-spacing:-.02em;}
.stat-card .stat-label{color:var(--text-muted); font-size:12.5px;}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;}
table.table{width:100%; border-collapse:collapse; font-size:13px;}
table.table th{background:var(--bg); color:var(--text-muted); font-weight:600; padding:11px 12px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--border);}
table.table td{padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.table tbody tr:hover{background:var(--bg);}
.table-actions{display:flex; gap:6px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:600; font-size:13px; transition:.15s; white-space:nowrap;}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:0 2px 8px rgba(79,70,229,.28);}
.btn-primary:hover{filter:brightness(1.07); box-shadow:0 4px 12px rgba(79,70,229,.35);}
.btn-primary:active{transform:translateY(1px);}
.btn-outline{background:transparent; border-color:var(--border); color:var(--text);}
.btn-outline:hover{background:var(--bg); border-color:var(--text-muted);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-danger:hover{filter:brightness(1.08);}
.btn-success{background:var(--success); color:#fff;}
.btn-sm{padding:6px 11px; font-size:12px;}
.btn-icon{width:34px;height:34px;padding:0;justify-content:center;}

/* ---------- Forms ---------- */
.form-group{margin-bottom:14px;}
.form-label{display:block; margin-bottom:6px; font-size:13px; font-weight:600;}
.form-control{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text);}
.form-control:focus{outline:none; border-color:var(--primary);}
textarea.form-control{resize:vertical; min-height:100px;}
.form-hint{font-size:11.5px; color:var(--text-muted); margin-top:4px;}
.form-error{font-size:12px; color:var(--danger); margin-top:4px;}
.input-group{display:flex; gap:8px;}

/* ---------- Badges ---------- */
.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700;}

/* ---------- Page header accent ---------- */
.page-header h1{position:relative; padding-inline-start:12px;}
.page-header h1::before{content:''; position:absolute; inline-size:4px; inset-inline-start:0; top:2px; bottom:2px; border-radius:4px; background:linear-gradient(180deg,var(--primary),var(--accent));}

/* ---------- Ticket detail layout ---------- */
.ticket-layout{display:grid; grid-template-columns:1fr 320px; gap:18px;}
@media(max-width:1000px){.ticket-layout{grid-template-columns:1fr;}}
.timeline{display:flex; flex-direction:column; gap:14px;}
.timeline-item{border-radius:var(--radius); padding:14px 16px; border:1px solid var(--border); background:var(--surface);}
.timeline-item.internal{background:#fff7ed; border-color:#fed7aa;}
[data-theme="dark"] .timeline-item.internal{background:#2a1e10; border-color:#7c4a12;}
.timeline-item.system{background:var(--bg); font-size:12.5px; color:var(--text-muted); text-align:center; border-style:dashed;}
.timeline-item .ti-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:12.5px; color:var(--text-muted);}
.ti-attachments{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.ti-attachments a{font-size:12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:5px 10px;}

.side-info-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;}
.side-info-row:last-child{border-bottom:none;}

.reply-box{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
.reply-tabs{display:flex; border-bottom:1px solid var(--border);}
.reply-tab{padding:10px 16px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent;}
.reply-tab.active{color:var(--primary); border-color:var(--primary);}

/* ---------- Misc ---------- */
.toast-container{position:fixed; top:18px; left:18px; z-index:999; display:flex; flex-direction:column; gap:10px;}
.toast{background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md); border-radius:10px; padding:12px 16px; min-width:260px; border-inline-start:4px solid var(--primary); animation:toastIn .25s ease;}
.toast.success{border-inline-start-color:var(--success);}
.toast.error{border-inline-start-color:var(--danger);}
.toast.warning{border-inline-start-color:var(--warning);}
@keyframes toastIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}

.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:200;}
.modal-backdrop.show{display:flex;}
.modal-box{background:var(--surface); border-radius:var(--radius); width:480px; max-width:92vw; max-height:88vh; overflow-y:auto;}
.modal-head{padding:16px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-weight:700;}
.modal-body{padding:18px;}
.modal-foot{padding:14px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px;}

.dropdown{position:relative;}
.dropdown-menu{position:absolute; left:0; top:110%; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); min-width:200px; display:none; z-index:100; overflow:hidden;}
.dropdown-menu.show{display:block;}
.dropdown-menu a, .dropdown-menu button{display:block; width:100%; text-align:right; padding:10px 14px; background:none; border:none; cursor:pointer; color:var(--text); font-size:13px;}
.dropdown-menu a:hover, .dropdown-menu button:hover{background:var(--bg);}
.dropdown-divider{border-top:1px solid var(--border); margin:4px 0;}

.pagination{display:flex; gap:6px; justify-content:center; margin-top:18px;}
.pagination a, .pagination span{padding:7px 12px; border-radius:8px; border:1px solid var(--border); font-size:13px;}
.pagination a.active{background:var(--primary); color:#fff; border-color:var(--primary);}

.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; align-items:flex-end;}
.filter-bar .form-group{margin-bottom:0; min-width:150px;}

.empty-state{text-align:center; padding:60px 20px; color:var(--text-muted);}
.empty-state::before{content:'🗂️'; display:block; font-size:34px; margin-bottom:10px; opacity:.6;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 45%),
             radial-gradient(circle at 85% 80%, rgba(255,255,255,.10), transparent 40%),
             linear-gradient(135deg,var(--primary-dark),var(--primary-light) 60%, var(--accent));
  padding:20px;}
.login-card{background:var(--surface); width:380px; max-width:92vw; border-radius:20px; padding:36px; box-shadow:0 25px 60px rgba(0,0,0,.3); animation:loginPop .35s ease;}
@keyframes loginPop{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}

.text-muted{color:var(--text-muted);}
.text-success{color:var(--success);}
.text-danger{color:var(--danger);}
.text-center{text-align:center;}
.mb-0{margin-bottom:0;}
.d-flex{display:flex;}
.gap-2{gap:8px;}
.gap-3{gap:12px;}
.align-center{align-items:center;}
.justify-between{justify-content:space-between;}
.w-100{width:100%;}

/* ---------- Print ---------- */
@media print{
  .sidebar, .topbar, .no-print, .filter-bar, .table-actions, .page-actions{display:none !important;}
  .main{margin:0 !important;}
  body{background:#fff; font-size:12px;}
  .print-header{display:flex !important; justify-content:space-between; align-items:center; border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:16px;}
  .print-footer{display:block !important; text-align:center; border-top:1px solid #000; padding-top:8px; margin-top:16px; font-size:11px;}
  table.table th, table.table td{border:1px solid #000 !important;}
  @page{size:A4; margin:14mm;}
}
.print-header,.print-footer{display:none;}