:root {
  --bg:#0f1115; --card:#1c1f27; --fg:#e8eaf0; --muted:#9aa3b2;
  --primary:#4f46e5; --warn:#f97316;
}

* { box-sizing:border-box }
body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:IRANSans,Segoe UI,system-ui,Arial;
  font-size:14px; /* ← کوچیک‌تر شد */
}

.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px; /* ← از 12/16 به 8/12 */
  background:#12141a;
  border-bottom:1px solid #232634;
}

.card {
  background:var(--card);
  border:1px solid #262a36;
  border-radius:10px; /* ← از 14px به 10px */
  padding:12px;       /* ← از 16px به 12px */
  margin:12px;
}
.tag{display:inline-block;font-size:11px;padding:2px 6px;border-radius:8px;background:#eef3ff;margin-right:6px}

.card.narrow { max-width:340px; margin:8vh auto }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.card.full { grid-column:1/-1 }

.btn-row { display:flex; gap:6px; flex-wrap:wrap }

button {
  background:#2a2f3d;
  color:var(--fg);
  border:1px solid #3a4052;
  border-radius:8px;       /* ← از 10px */
  padding:8px 12px;        /* ← از 10px 14px */
  font-size:13px;          /* ← کوچیک‌تر */
  cursor:pointer;
}
button.primary { background:var(--primary); border-color:transparent }
button.warn    { background:var(--warn);    border-color:transparent }

input,select {
  background:#11131a;
  border:1px solid #2c3242;
  color:var(--fg);
  padding:8px;         /* ← از 10px */
  border-radius:8px;   /* ← از 10px */
  font-size:13px;
}

.row { display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.muted { color:var(--muted); font-size:13px }

.three { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }

ul { list-style:none; padding:0; margin:0 }
ul li { padding:4px 0; border-bottom:1px dashed #2a2f3d }

.leave-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px;
  border:1px solid #2c3242;
  border-radius:8px;
  margin:6px 0;
  font-size:13px;
}
.leave-item.approved { border-color:#22c55e }
.leave-item.rejected { border-color:#ef4444 }

.table { width:100%; border-collapse:collapse; font-size:13px }
.table th,.table td { border-bottom:1px solid #2a2f3d; padding:6px }


/* Calendar */
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-legend{display:flex;align-items:center;gap:12px;margin-bottom:8px;color:var(--muted);font-size:12px}
.cal-legend .dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-left:6px}
.cal-legend .dot.approved{background:#22c55e}
.cal-legend .dot.pending{background:#eab308}
.cal-legend .dot.rejected{background:#ef4444}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-day{border:1px solid #2c3242;border-radius:10px;padding:8px;min-height:110px;position:relative;background:#11131a}
.cal-day.out{opacity:.5}
.cal-day-head{font-weight:700;color:#cbd5e1;margin-bottom:6px}
.cal-badge{font-size:12px;line-height:1.3;border-radius:6px;padding:4px 6px;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent}
.cal-badge.approved{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35)}
.cal-badge.pending{background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.35)}
.cal-badge.rejected{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}
.cal-more{position:absolute;bottom:8px;left:8px;font-size:12px;color:var(--muted)}
/* Tabs */
.tab-nav{display:flex;gap:8px;align-items:center}
.tab-btn{background:#2a2f3d;color:var(--fg);border:1px solid #3a4052;border-radius:10px;padding:8px 12px;cursor:pointer}
.tab-btn.active{background:var(--primary);border-color:transparent}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Filter pills */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pill{background:#11131a;border:1px solid #2c3242;color:var(--fg);padding:6px 10px;border-radius:999px;cursor:pointer}
.pill.active{background:#3b82f6;border-color:transparent}

/* Modal */
.modal[aria-hidden="true"]{display:none}
.modal[aria-hidden="false"]{position:fixed;inset:0;z-index:9999}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-card{
  position:relative;max-width:720px;margin:6vh auto;background:var(--card);
  border:1px solid #2c3242;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.modal-head, .modal-foot{padding:12px 16px;border-bottom:1px solid #2a2f3d}
.modal-foot{border-top:1px solid #2a2f3d;border-bottom:none}
.modal-head{display:flex;align-items:center;justify-content:space-between}
.modal-body{padding:12px 16px;max-height:60vh;overflow:auto}
.modal-close{background:#2a2f3d;border:1px solid #3a4052;color:var(--fg);border-radius:10px;padding:6px 10px;cursor:pointer}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:10px}
.tl-row{display:flex;gap:10px;align-items:flex-start}
.tl-dot{
  flex:0 0 34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#11131a;border:1px solid #2c3242;font-size:16px
}
.tl-body{flex:1;min-width:0;background:#11131a;border:1px solid #2c3242;border-radius:10px;padding:8px 10px}
.tl-time{font-weight:700;color:#cbd5e1;margin-bottom:2px}
.tl-text{color:#e8eaf0}

/* رنگ‌های خفیف برای نوع رویداد (اختیاری) */
.tl-row.shift_start .tl-body{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.tl-row.shift_end   .tl-body{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.tl-row.afk_start   .tl-body{border-color:rgba(234,179,8,.35); background:rgba(234,179,8,.08)}
.tl-row.afk_end     .tl-body{border-color:rgba(59,130,246,.35); background:rgba(59,130,246,.08)}

/* Modal tabs */
.modal-tabs{
  display:flex; gap:8px; align-items:center;
  padding:10px 16px; border-bottom:1px solid #2a2f3d; background:#0f1115;
}
.modal-tabs .tab-btn{
  background:#2a2f3d; color:var(--fg); border:1px solid #3a4052;
  border-radius:10px; padding:8px 12px; cursor:pointer;
}
.modal-tabs .tab-btn.active{
  background:var(--primary); border-color:transparent;
}

/* Jalali date widget */
.jdate-box{display:inline-flex;gap:6px;align-items:center;background:#11131a;border:1px solid #2c3242;border-radius:10px;padding:6px}
.jdate-box select{background:transparent;border:0;color:var(--fg);outline:none}
.jdate-box select:focus{outline:none}

/* سطر عنوان روزهای هفته */
.cal-wd{
  text-align:center;
  font-weight:700;
  padding:8px 0;
  border-bottom:1px solid #2c3242;
  position:sticky; /* اگر ارتفاع کارت زیاد شد، ثابت بالای گرید می‌مونه */
  top:0;
  background:#0f131a;
  z-index:1;
  color:var(--fg);
  opacity:.9;
}

/* برای یکنواختی گرید (۷ ستون) */
.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
}

/* اگر لازم است سرستون‌ها کمی جمع‌وجورتر از سلول روزها باشند */
.cal-day{
  background:#11131a;
  border:1px solid #2c3242;
  border-radius:10px;
  padding:6px;
  min-height:88px; /* هرچی خودت می‌خوای */
}

.cal-day.out{ opacity:.55; }
.cal-day-head{ font-weight:700; margin-bottom:6px; }

.cal-badge.approved{
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
  background:#1f3b21;
  border:1px solid #2e6b33;
  margin:2px 0;
  display:inline-block;
}

.cal-more{ font-size:12px; opacity:.8; margin-top:4px; }
/* استایل لیست انتخاب (بازشده) */
.jdate-box select option {
  background: #1a1d24;   /* بک‌گراند تیره مثل سایت */
  color: #fff;           /* متن سفید */
}

/* وقتی موس روش میره (highlight) */
.jdate-box select option:hover,
.jdate-box select option:checked,
.jdate-box select option:focus {
  background: #4caf50;   /* رنگ هایلایت (سبز روشن یا هر رنگ دلخواه) */
  color: #fff;           /* متن سفید خوانا */
}

/* === Custom Scrollbar === */

/* Chrome/Edge/Safari */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1a1d24; }
::-webkit-scrollbar-thumb { background-color: #4caf50; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background-color: #66bb6a; }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #4caf50 #1a1d24;
}

.seg .pill.active{ background:#2f855a; }

/* ردیف روزهای هفته */


/* کانتینرِ badge ها داخل هر سلول */
.cal-day .badges{
  display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;
}

/* badge پایه */
.cal-day .badge{
  background:#444; border:1px solid #555;
  color:#e5e9f0; border-radius:999px; padding:2px 8px;
  line-height:1; font-size:12px; white-space:nowrap;
}

/* تغییر اندازه بر اساس تعداد */
.cal-day .badge.sm{ font-size:11px; padding:2px 7px; }
.cal-day .badge.xs{ font-size:10px; padding:1px 6px; }

/* انواع */
.badge-off-others{ background:#444; }
.badge-off-mine{ background:#666; }
.badge-will{ background:#2a6; border-color:#3c8; }
.badge-shift{ background:#1f3b66; border-color:#2d5aa3; }

/* دکمهٔ تاگل کوچک */
.cal-day .pill{
  margin-top:6px; font-size:11px; padding:2px 8px;
}

/* کانتینر نام‌ها (چیپ‌ها) */
.names-wrap { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }

/* چیپ نام */
.name-chip{
  background:#2b303b; border:1px solid #3b4252; color:#e5e9f0;
  border-radius:999px; padding:4px 10px; line-height:1; white-space:nowrap;
  font-size:12px;
}
.name-chip.sm{ font-size:11px; padding:3px 9px; }
.name-chip.xs{ font-size:10px; padding:2px 8px; }

/* نشان "می‌آید" کنار نام */
.will-pill{
  background:#2a6; border:1px solid #3c8; color:#eaffea;
  border-radius:999px; padding:2px 6px; font-size:10px; line-height:1;
}

/* بج شیفت اگر داری */
.cal-badge.badge-shift{ background:#1f3b66; border:1px solid #2d5aa3; }

/* ردیف روزهای هفته باید خارج از cal-grid باشد */
.cal-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:8px 0 6px;
}
.cal-weekdays>div{ text-align:center; font-weight:600; color:#a7b1c2; padding:4px 0; }


/* نوار قرمز AFK */
#afkAlertBar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #d32f2f;   /* قرمز تیره */
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 12px;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  font-size: 16px;
}
body.afk-active { padding-top: 50px; } /* برای اینکه محتوا نره زیر نوار */

/* چیپ عمومی که داری: .name-chip و اندازه‌ها (sm/xs) همون قبلی */

.off-pill  { background:#7a7a7a; color:#fff; border-radius:999px; padding:0 6px; font-size:12px; }
.abs-pill  { background:#b33a3a; color:#fff; border-radius:999px; padding:0 6px; font-size:12px; }

/* اگر خواستی رنگ پس‌زمینه‌ی چیپ‌ها هم فرق کنه */
.off-chip { background:#3a3a3a; }
.abs-chip { background:#402a2a; }

/* کارت‌های تایم‌لاین */
.tl-row.policy { 
  border: 1px dashed rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}
.tl-row.policy .tl-dot { filter: grayscale(0); }

.tl-row.policy-late  { border-color: #d97706; background-color: rgba(217,119,6,0.10); }  /* amber */
.tl-row.policy-early { border-color: #8b5cf6; background-color: rgba(139,92,246,0.10); } /* violet */

/* اگر می‌خواهی متنش هم کمی متمایز باشد */
.tl-row.policy .tl-text { font-weight: 500; }