/* =========================
   THEME VARIABLES
========================= */

:root{

--bg:#f6f8fc;
--card:#ffffff;
--text:#1a1a1a;
--text-soft:#666;
--border:#e5e7eb;

--accent:#2563eb;
--accent-hover:#1d4ed8;

--danger:#ef4444;

--radius:14px;
--shadow:0 8px 25px rgba(0,0,0,0.08);

}

/* DARK MODE */

[data-theme="dark"]{

--bg:#0f172a;
--card:#1e293b;
--text:#f1f5f9;
--text-soft:#cbd5e1;
--border:#334155;

--accent:#3b82f6;
--accent-hover:#2563eb;

--danger:#ef4444;

--shadow:0 10px 35px rgba(0,0,0,0.5);

}


/* =========================
   GLOBAL
========================= */

*{
box-sizing:border-box;
transition:all .25s ease;
}

body{

background:var(--bg);
color:var(--text);

margin:0;
padding:30px 40px;

font-family:"Vazirmatn",sans-serif;

}


/* =========================
   HEADER
========================= */

.header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:35px;

}

.header h1{

margin:0;
font-size:30px;
font-weight:800;

animation:fadeDown .6s;

}

.header-actions{

display:flex;
gap:10px;

}


/* =========================
   BUTTONS
========================= */

.btn{

border:none;
padding:10px 18px;
border-radius:12px;

cursor:pointer;

font-weight:600;
font-size:14px;

position:relative;
overflow:hidden;

}

/* PRIMARY BUTTON */

.btn-primary{

background:var(--accent);
color:white;

box-shadow:0 6px 16px rgba(37,99,235,0.35);

}

.btn-primary:hover{

background:var(--accent-hover);

transform:translateY(-3px);

box-shadow:0 10px 24px rgba(37,99,235,0.45);

}

/* SECONDARY */

.btn-secondary{

background:var(--card);
color:var(--text);

border:1px solid var(--border);

}

.btn-secondary:hover{

background:var(--accent);
color:white;

}


/* small buttons */

.btn-small{

padding:6px 12px;
font-size:13px;
border-radius:8px;
border:none;
cursor:pointer;

}

.btn-edit{

background:var(--accent);
color:white;

}

.btn-edit:hover{

transform:scale(1.05);
box-shadow:0 6px 18px rgba(37,99,235,0.4);

}

.btn-delete{

background:var(--danger);
color:white;

}

.btn-delete:hover{

transform:scale(1.05);
box-shadow:0 6px 18px rgba(239,68,68,0.4);

}


/* =========================
   STATS CARDS
========================= */

.stats{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;

margin-bottom:35px;

}

.card{

background:var(--card);
border-radius:var(--radius);

padding:25px;

box-shadow:var(--shadow);

animation:fadeUp .6s;

}

.card h3{

margin:0;
color:var(--text-soft);
font-weight:600;

}

.card p{

margin-top:12px;

font-size:30px;
font-weight:800;

}

.export-card{

text-decoration:none;
text-align:center;

background:linear-gradient(135deg,#3b82f6,#6366f1);
color:white;

}

.export-card:hover{

transform:translateY(-5px) scale(1.03);

box-shadow:0 12px 30px rgba(59,130,246,0.4);

}


/* =========================
   FILTERS
========================= */

.filters{

display:flex;
gap:12px;

margin-bottom:25px;

}

.filters input,
.filters select{

padding:10px 12px;

border-radius:10px;
border:1px solid var(--border);

background:var(--card);
color:var(--text);

}

.filters input:focus,
.filters select:focus{

outline:none;
border-color:var(--accent);
box-shadow:0 0 0 2px rgba(37,99,235,0.25);

}


/* =========================
   TABLE
========================= */

.table-wrapper{

background:var(--card);

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:12px;

}

table{

width:100%;
border-collapse:collapse;

}

thead th{

padding:12px 10px;
text-align:right;

color:var(--text-soft);

border-bottom:1px solid var(--border);

}

tbody td{

padding:14px 10px;
border-bottom:1px solid var(--border);

}

tbody tr{

transition:all .2s;

}

tbody tr:hover{

background:rgba(100,100,100,0.08);
transform:scale(1.01);

}

/* =========================
   TABLE (IMPROVED)
========================= */

.table-wrapper{
background:var(--card);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:0;
overflow:hidden;
}

table{
width:100%;
border-collapse:separate;
border-spacing:0;
}

thead{
background:linear-gradient(to right,var(--accent),var(--accent-hover));
color:white;
}

thead th{
padding:16px 14px;
font-weight:600;
text-align:right;
font-size:14px;
}

tbody td{
padding:16px 14px;
border-bottom:1px solid var(--border);
font-size:14px;
}

tbody tr{
background:var(--card);
}

tbody tr:nth-child(even){
background:rgba(100,100,100,0.03);
}

tbody tr:hover{
background:rgba(37,99,235,0.08);
transform:scale(1.005);
}

tbody tr:last-child td{
border-bottom:none;
}

/* =========================
   MODAL
========================= */

.modal{

position:fixed;
inset:0;

background:rgba(0,0,0,.5);

display:none;
align-items:center;
justify-content:center;

backdrop-filter:blur(6px);

}

.modal.active{

display:flex;

}

.modal-content{

background:var(--card);

width:380px;

border-radius:16px;

padding:25px;

box-shadow:var(--shadow);

animation:modalPop .35s;

}

.modal-content input,
.modal-content textarea{

width:100%;

padding:9px 12px;

border-radius:8px;

border:1px solid var(--border);

background:var(--bg);
color:var(--text);

margin-bottom:12px;

}

.modal-actions{

display:flex;
justify-content:flex-end;
gap:10px;

}


/* =========================
   TOAST
========================= */

#toast{

position:fixed;

bottom:25px;
right:25px;

background:var(--accent);
color:white;

padding:12px 18px;

border-radius:10px;

opacity:0;
transform:translateY(20px);

}

#toast.show{

animation:toastAnim 2s forwards;

}


/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{

background:var(--accent);
border-radius:10px;

}


/* =========================
   ANIMATIONS
========================= */

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(15px);
}

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes fadeDown{

from{
opacity:0;
transform:translateY(-15px);
}

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes modalPop{

from{
opacity:0;
transform:scale(.8);
}

to{
opacity:1;
transform:scale(1);
}

}

@keyframes toastAnim{

0%{opacity:0;transform:translateY(20px)}
15%{opacity:1;transform:translateY(0)}
85%{opacity:1}
100%{opacity:0;transform:translateY(20px)}

}
/* =========================
   CONFIRM MODAL (NEW)
========================= */

.confirm-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
backdrop-filter:blur(8px);
display:flex;
align-items:center;
justify-content:center;
z-index:999;
opacity:0;
pointer-events:none;
}

.confirm-modal.active{
opacity:1;
pointer-events:auto;
}

.confirm-box{

background:var(--card);
width:420px;
border-radius:18px;
padding:28px;
box-shadow:var(--shadow);
animation:modalPop .3s ease;
border:1px solid var(--border);

}

.confirm-title{
font-size:18px;
font-weight:700;
margin-bottom:14px;
}

.confirm-text{
font-size:14px;
color:var(--text-soft);
line-height:1.8;
margin-bottom:22px;
white-space:pre-line;
}

.confirm-actions{
display:flex;
justify-content:flex-end;
gap:10px;
}

.btn-cancel{
background:var(--card);
border:1px solid var(--border);
color:var(--text);
}

.btn-cancel:hover{
background:var(--danger);
color:white;
}

.btn-confirm{
background:var(--accent);
color:white;
box-shadow:0 6px 18px rgba(37,99,235,.35);
}

.btn-confirm:hover{
background:var(--accent-hover);
transform:translateY(-2px);
}
.modal {
    pointer-events: none;
}

.modal.active {
    pointer-events: auto;
}

.modal .modal-content {
    pointer-events: auto;
}