/* Tay HRM — design system
   Bilingual (AR/EN), light theme. Pharmacy palette: deep navy ground,
   jade/teal accent, amber reserved for warnings only. */

:root{
  --tay-navy-950:#0a1730;
  --tay-navy-900:#0d1f3d;
  --tay-navy-800:#122a52;
  --tay-navy-700:#1a3868;
  --tay-teal-600:#0ea47a;
  --tay-teal-500:#12b98a;
  --tay-teal-100:#e3faf2;
  --tay-amber-500:#f68c1e;
  --tay-amber-100:#fdf1dc;
  --tay-red-500:#e5484d;
  --tay-red-100:#fde8e8;
  --tay-blue-500:#3b82f6;
  --tay-blue-100:#e7f0fe;

  --ink-900:#101827;
  --ink-700:#37415a;
  --ink-500:#697086;
  --ink-300:#c3c9d6;
  --ink-100:#eef1f6;

  --bg-app:#f3f5f9;
  --bg-card:#ffffff;
  --border-soft: rgba(16,24,39,.08);
  --shadow-card: 0 1px 2px rgba(16,24,39,.04), 0 8px 24px -12px rgba(16,24,39,.12);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

html{ font-size: 15px; }
body{
  background: var(--bg-app);
  color: var(--ink-900);
  font-family: "Cairo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .1px;
}
h1,h2,h3,h4,h5,h6,.fw-bold{ font-weight:700; }
.text-muted{ color: var(--ink-500) !important; }

/* ---------- Layout shell ---------- */
.tay-shell{ min-height:100vh; }

.tay-sidebar{
  min-height:100vh;
  /* TAY brand: charcoal from the logo, orange accent (same as the phone app) */
  background: linear-gradient(180deg, #303030 0%, #282828 60%, #202020 100%);
  position: sticky; top:0;
}
.tay-sidebar .tay-brand{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  background:#fff; padding:1.1rem 1.25rem .8rem; text-decoration:none;
  border-bottom: 3px solid #f68c1e;
}
.tay-sidebar .tay-brand-logo{ width:150px; max-width:100%; height:auto; }
.tay-sidebar .tay-brand-name{ color:#5b5348; font-weight:700; font-size:.82rem; letter-spacing:.02em; }
.tay-sidebar .nav{ padding: .9rem .65rem; }
.tay-sidebar .nav-link{
  color:#c9c4bf; border-radius: 10px; margin-bottom:.2rem;
  padding:.6rem .8rem; font-size:.92rem; font-weight:600;
  display:flex; align-items:center; gap:.65rem;
  transition: background .15s ease, color .15s ease;
}
.tay-sidebar .nav-link i{ font-size:1.05rem; width:1.2rem; text-align:center; opacity:.85; }
.tay-sidebar .nav-link:hover{ color:#fff; background: rgba(246,140,30,.10); }
.tay-sidebar .nav-link.active{
  color:#fff; background: rgba(246,140,30,.22);
  box-shadow: inset 3px 0 0 #f68c1e;
}
[dir="rtl"] .tay-sidebar .nav-link.active{ box-shadow: inset -3px 0 0 #f68c1e; }
.tay-sidebar .nav-link.active i{ color:#f68c1e; opacity:1; }
.tay-sidebar .nav-section{
  color: rgba(246,140,30,.75); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding: .9rem .9rem .3rem;
}

.tay-topbar{
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
  padding: .85rem 1.5rem;
  position: sticky; top:0; z-index: 20;
}
.tay-content{ padding: 1.75rem; }

.tay-lang-switch .btn{
  border-color: var(--ink-300); color: var(--ink-700); font-weight:700; font-size:.78rem;
}
.tay-lang-switch .btn.active{ background: var(--tay-navy-900); border-color: var(--tay-navy-900); color:#fff; }

.tay-user-chip{
  display:flex; align-items:center; gap:.55rem;
  background: var(--ink-100); border-radius: 999px; padding:.3rem .9rem .3rem .3rem;
}
[dir="rtl"] .tay-user-chip{ padding:.3rem .3rem .3rem .9rem; }
.tay-user-avatar{
  width:30px; height:30px; border-radius:50%;
  background: linear-gradient(135deg, var(--tay-navy-700), var(--tay-navy-900));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem;
}

/* ---------- Cards ---------- */
.card{
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card .card{ box-shadow:none; }

/* ---------- Stat tiles ---------- */
.tay-stat{
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  display:flex; align-items:center; justify-content:space-between;
  height:100%;
}
.tay-stat .tay-stat-value{ font-size:1.9rem; font-weight:800; color:var(--ink-900); line-height:1; }
.tay-stat .tay-stat-label{ color:var(--ink-500); font-size:.82rem; font-weight:600; margin-top:.35rem; }
.tay-stat-icon{
  width:48px; height:48px; border-radius: 13px;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;
}
.tay-stat-icon.teal{ background:var(--tay-teal-100); color:var(--tay-teal-600); }
.tay-stat-icon.navy{ background:var(--ink-100); color:var(--tay-navy-800); }
.tay-stat-icon.amber{ background:var(--tay-amber-100); color:var(--tay-amber-500); }
.tay-stat-icon.blue{ background:var(--tay-blue-100); color:var(--tay-blue-500); }
.tay-stat-icon.red{ background:var(--tay-red-100); color:var(--tay-red-500); }

/* ---------- Buttons ---------- */
.btn{ border-radius: var(--radius-sm); font-weight:600; font-size:.88rem; }
.btn-primary{ background: var(--tay-teal-600); border-color: var(--tay-teal-600); }
.btn-primary:hover, .btn-primary:focus{ background:#0c8f69; border-color:#0c8f69; }
.btn-outline-primary{ color:var(--tay-teal-600); border-color: var(--tay-teal-600); }
.btn-outline-primary:hover{ background:var(--tay-teal-600); border-color:var(--tay-teal-600); }
.btn-outline-secondary{ color:var(--ink-700); border-color:var(--ink-300); }
.btn-sm{ border-radius: 8px; }

/* ---------- Tables ---------- */
.table{ margin-bottom:0; font-size:.9rem; }
.table thead th{
  background: transparent; color: var(--ink-500); font-weight:700; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.05em; border-bottom: 1px solid var(--border-soft);
  padding: .85rem 1rem;
}
.table tbody td{ padding: .85rem 1rem; vertical-align:middle; border-bottom: 1px solid var(--border-soft); color:var(--ink-700); }
.table tbody tr:last-child td{ border-bottom:none; }
.table-hover tbody tr:hover{ background: var(--ink-100); }
.card > .table, .card > .table-responsive > .table{ border-radius: var(--radius-lg); overflow:hidden; }

.tay-avatar-sm{
  width:34px; height:34px; border-radius:50%; object-fit:cover;
  background: linear-gradient(135deg, var(--tay-navy-700), var(--tay-teal-600));
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.82rem; flex-shrink:0;
}

/* ---------- Badges ---------- */
.badge{ font-weight:700; font-size:.72rem; padding:.42em .7em; border-radius:7px; }
.badge.bg-primary{ background: var(--tay-teal-100) !important; color: var(--tay-teal-600) !important; }
.badge.bg-secondary{ background: var(--ink-100) !important; color: var(--ink-500) !important; }
.badge.bg-success{ background: var(--tay-teal-100) !important; color: var(--tay-teal-600) !important; }
.badge.bg-warning{ background: var(--tay-amber-100) !important; color: #93630c !important; }
.badge.bg-danger{ background: var(--tay-red-100) !important; color: var(--tay-red-500) !important; }
.badge.bg-info{ background: var(--tay-blue-100) !important; color: var(--tay-blue-500) !important; }

/* ---------- Forms ---------- */
.form-label{ font-weight:600; font-size:.84rem; color:var(--ink-700); }
.form-control, .form-select{
  border-radius: var(--radius-sm); border-color: var(--ink-300);
  padding:.5rem .8rem; font-size:.9rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--tay-teal-500); box-shadow: 0 0 0 .2rem rgba(18,185,138,.15);
}
.form-control-sm, .form-select-sm{ border-radius:8px; }

/* ---------- Misc ---------- */
.tay-empty{ text-align:center; padding: 3rem 1rem; color: var(--ink-500); }
.tay-empty i{ font-size:2.2rem; color: var(--ink-300); display:block; margin-bottom:.6rem; }
.tay-page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; flex-wrap:wrap; gap:.75rem; }
.tay-page-header h4{ margin:0; }
.tay-page-header .subtitle{ color:var(--ink-500); font-size:.85rem; margin-top:.15rem; }
.tay-section-title{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-500); margin-bottom:.75rem; }
.tay-timeline-item{ border-inline-start: 2px solid var(--border-soft); padding-inline-start: 1rem; padding-bottom: 1rem; position:relative; }
.tay-timeline-item::before{ content:''; position:absolute; inset-inline-start:-5px; top:2px; width:8px; height:8px; border-radius:50%; background:var(--tay-teal-500); }

.pagination .page-link{ border-radius:8px; margin-inline-end:.25rem; border-color:var(--ink-300); color:var(--ink-700); }
.pagination .page-item.active .page-link{ background:var(--tay-navy-900); border-color:var(--tay-navy-900); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: var(--ink-300); border-radius:10px; }

/* ---- Lifecycle stage badges (staff list, employee page). One colour per
   stage, larger than a stock badge so the stage reads at a glance. ---- */
.stage-badge { display: inline-block; font-size: .95rem; font-weight: 600; line-height: 1.3;
    padding: .35em .8em; border-radius: .5rem; white-space: nowrap; }
.stage-applicant  { background: #e9ecef; color: #495057; }
.stage-screening  { background: #cff4fc; color: #055160; }
.stage-interview  { background: #cfe2ff; color: #084298; }
.stage-qualified  { background: #dbe0ff; color: #2f3a8f; }
.stage-training   { background: #e2d9f3; color: #432874; }
.stage-accepted   { background: #e3f1d3; color: #3b6b12; }
.stage-documents  { background: #ffe5d0; color: #7a3e00; }
.stage-contracted { background: #c5f0e6; color: #0b5a49; }
.stage-employee   { background: #198754; color: #fff; }
.stage-inactive   { background: #6c757d; color: #fff; }
.stage-rejected   { background: #f8d7da; color: #842029; }
.stage-on_hold    { background: #ffe69c; color: #664d03; }