/* =========================================================
   نظام إدارة ساعات العمل والمهام - Design Tokens
   Palette: Deep Ink Navy + Warm Amber accent (بطاقة الدوام)
   ========================================================= */
:root{
  --ink-950:#0f172a;
  --ink-900:#141c2e;
  --ink-800:#1c2740;
  --ink-700:#28365a;
  --ink-100:#eef1f7;
  --paper:#f6f4ef;
  --amber:#e0972a;
  --amber-dark:#b9740f;
  --teal:#1f7a6c;
  --teal-light:#e6f2ef;
  --red:#c0392b;
  --red-light:#fbeae8;
  --text-soft:#5b6478;
  --radius:14px;
  --shadow-card:0 2px 14px rgba(15,23,42,.06);
  --font-display:'Cairo', 'Tajawal', sans-serif;
  --font-body:'Tajawal', 'Cairo', sans-serif;
}

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink-950);
}

h1,h2,h3,h4,h5,.brand-font{
  font-family:var(--font-display);
  font-weight:700;
}

/* ---------- Auth / Login ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(224,151,42,.18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(31,122,108,.20), transparent 45%),
    var(--ink-950);
}
.auth-card{
  width:100%;
  max-width:960px;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  display:flex;
  min-height:520px;
}
.auth-side{
  flex:1;
  background:linear-gradient(160deg, var(--ink-900), var(--ink-700));
  color:#fff;
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
}
.auth-side::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(224,151,42,.08) 0 2px, transparent 2px 40px);
  pointer-events:none;
}
.auth-side .clock-badge{
  width:64px;height:64px;border-radius:50%;
  background:var(--amber);
  display:flex;align-items:center;justify-content:center;
  font-size:28px; color:var(--ink-950);
}
.auth-form{
  flex:1;
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.demo-hint{
  background:var(--teal-light);
  border:1px dashed var(--teal);
  border-radius:10px;
  padding:10px 14px;
  font-size:.85rem;
  color:var(--teal);
}

/* ---------- App Shell ---------- */
.app-sidebar{
  width:250px;
  min-height:100vh;
  background:var(--ink-950);
  color:#cbd3e6;
  position:fixed;
  top:0; right:0;
  padding:20px 0;
  z-index:1030;
}
.app-sidebar .brand{
  padding:0 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:14px;
}
.app-sidebar .brand .clock-icon{
  width:38px;height:38px;border-radius:10px;
  background:var(--amber);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-950); font-weight:700;
}
.app-sidebar .nav-link{
  color:#aab3c5;
  padding:11px 20px;
  border-radius:0;
  display:flex; align-items:center; gap:10px;
  font-size:.93rem;
  border-right:3px solid transparent;
}
.app-sidebar .nav-link i{width:20px; text-align:center;}
.app-sidebar .nav-link:hover{ color:#fff; background:rgba(255,255,255,.05); }
.app-sidebar .nav-link.active{
  color:#fff;
  background:rgba(224,151,42,.12);
  border-right-color:var(--amber);
}
.app-sidebar .nav-section-title{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:#5f6a85; padding:14px 20px 6px;
}

.app-main{
  margin-right:250px;
  min-height:100vh;
}
.app-topbar{
  background:#fff;
  border-bottom:1px solid #eae7de;
  padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:1020;
}
.app-content{ padding:28px; }

.avatar-circle{
  width:40px;height:40px;border-radius:50%;
  background:var(--ink-800); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem;
}

/* ---------- Cards / KPIs ---------- */
.kpi-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:20px 22px;
  border-right:4px solid var(--amber);
}
.kpi-card.teal{ border-right-color:var(--teal); }
.kpi-card.red{ border-right-color:var(--red); }
.kpi-card.ink{ border-right-color:var(--ink-700); }
.kpi-card .kpi-value{ font-size:1.9rem; font-weight:700; font-family:var(--font-display); }
.kpi-card .kpi-label{ color:var(--text-soft); font-size:.85rem; }

.card-panel{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  border:none;
}
.card-panel .card-header{
  background:transparent;
  border-bottom:1px solid #f0eee6;
  font-weight:700;
  font-family:var(--font-display);
  padding:16px 20px;
}

/* ---------- Clock widget ---------- */
.clock-widget{
  background:linear-gradient(135deg, var(--ink-900), var(--ink-700));
  color:#fff;
  border-radius:var(--radius);
  padding:26px;
  position:relative;
  overflow:hidden;
}
.clock-widget .time-now{
  font-family:var(--font-display);
  font-size:2.4rem;
  font-weight:700;
  letter-spacing:.02em;
}
.clock-widget .btn-clock{
  border-radius:50px;
  padding:10px 26px;
  font-weight:700;
  border:none;
}
.clock-widget .btn-in{ background:var(--amber); color:var(--ink-950); }
.clock-widget .btn-out{ background:#fff; color:var(--red); }

/* ---------- Badges ---------- */
.badge-status{ font-weight:600; padding:6px 12px; border-radius:50px; font-size:.75rem; }
.badge-present{ background:var(--teal-light); color:var(--teal); }
.badge-late{ background:#fdf3e2; color:var(--amber-dark); }
.badge-absent{ background:var(--red-light); color:var(--red); }
.badge-leave{ background:#eef1f7; color:var(--ink-700); }

.badge-priority-low{ background:#eef1f7; color:var(--ink-700); }
.badge-priority-medium{ background:#fdf3e2; color:var(--amber-dark); }
.badge-priority-high{ background:#fde6e0; color:#c0392b; }
.badge-priority-urgent{ background:var(--red); color:#fff; }

.badge-task-pending{ background:#eef1f7; color:var(--ink-700); }
.badge-task-in_progress{ background:#e2ecfb; color:#2058b0; }
.badge-task-completed{ background:var(--teal-light); color:var(--teal); }
.badge-task-cancelled{ background:var(--red-light); color:var(--red); }

/* ---------- Table ---------- */
.table-hr thead th{
  background:var(--ink-100);
  color:var(--ink-800);
  font-weight:700;
  border:none;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.table-hr td, .table-hr th{ vertical-align:middle; padding:12px 14px; }
.table-hr tbody tr{ border-bottom:1px solid #f1efe7; }

/* ---------- Misc ---------- */
.btn-amber{ background:var(--amber); border-color:var(--amber); color:var(--ink-950); font-weight:600; }
.btn-amber:hover{ background:var(--amber-dark); border-color:var(--amber-dark); color:#fff; }
.text-amber{ color:var(--amber-dark); }
.progress-thin{ height:6px; border-radius:50px; }
.progress-thin .progress-bar{ background:var(--amber); }

.task-card{
  border-radius:12px;
  border:1px solid #eee9dd;
  padding:16px;
  background:#fff;
  transition:box-shadow .15s ease, transform .15s ease;
}
.task-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-1px); }
.task-card.priority-urgent{ border-right:4px solid var(--red); }
.task-card.priority-high{ border-right:4px solid var(--amber); }
.task-card.priority-medium{ border-right:4px solid var(--teal); }
.task-card.priority-low{ border-right:4px solid #c7cede; }

@media (max-width: 991px){
  .app-sidebar{ transform:translateX(100%); transition:transform .2s ease; }
  .app-sidebar.show{ transform:translateX(0); }
  .app-main{ margin-right:0; }
  .auth-card{ flex-direction:column; }
  .auth-side{ padding:32px; }
  .auth-form{ padding:32px; }
}