/* ============================================================
   Dot Domino HRMS — design system
   Brand: warm violet/purple accent, soft neutral surface, rounded
   cards, circular progress rings. Built on top of Bootstrap 5
   utility classes — this file re-themes them rather than fighting
   them, so module markup didn't need to change class-by-class.
   ============================================================ */

:root {
  --dd-primary: #6D4DF2;
  --dd-primary-dark: #4B2FC9;
  --dd-primary-soft: #F1EDFE;
  --dd-primary-soft-2: #E7E0FD;
  --dd-ink: #18142B;
  --dd-muted: #766F8A;
  --dd-muted-2: #9691AA;
  --dd-bg: #F5F4FA;
  --dd-card: #FFFFFF;
  --dd-border: #ECE8F7;
  --dd-success: #16A34A;
  --dd-warning: #E58A00;
  --dd-danger: #E1315A;
  --dd-ring-1: #F0883E;
  --dd-ring-2: #4C8DF5;
  --dd-ring-3: #16B48A;
  --dd-radius-lg: 20px;
  --dd-radius-md: 14px;
  --dd-radius-sm: 10px;
}

* { box-sizing: border-box; }

body {
  background: var(--dd-bg);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--dd-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--dd-ink); font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--dd-primary); }
a:hover { color: var(--dd-primary-dark); }

/* ---------------- Shell layout ---------------- */

.hrms-wrapper {
  display: flex;
  min-height: 100vh;
  max-width: 1600px;
  margin: 0 auto;
}

.hrms-sidebar {
  width: 258px;
  background: var(--dd-card);
  border-right: 1px solid var(--dd-border);
  flex-shrink: 0;
  min-height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
}

.dd-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px 22px;
}
.dd-brand-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--dd-ink);
  line-height: 1.1;
}
.dd-brand-sub {
  font-size: 0.68rem;
  color: var(--dd-muted-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.hrms-sidebar .nav-section {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--dd-muted-2);
  font-weight: 700;
  padding: 16px 10px 6px;
}
.hrms-sidebar .nav-link {
  color: #4A4560;
  padding: 9px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--dd-radius-sm);
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  transition: background .12s ease, color .12s ease;
}
.hrms-sidebar .nav-link i { width: 20px; margin-right: 10px; font-size: 1rem; color: var(--dd-muted); }
.hrms-sidebar .nav-link:hover { background: var(--dd-bg); color: var(--dd-ink); }
.hrms-sidebar .nav-link.active {
  background: var(--dd-primary-soft);
  color: var(--dd-primary-dark);
  font-weight: 700;
}
.hrms-sidebar .nav-link.active i { color: var(--dd-primary); }

.dd-sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border-radius: var(--dd-radius-md);
  background: var(--dd-bg);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dd-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dd-primary), var(--dd-primary-dark));
  color: #fff; font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dd-sidebar-footer .name { font-size: 0.85rem; font-weight: 700; color: var(--dd-ink); line-height: 1.2; }
.dd-sidebar-footer .role { font-size: 0.72rem; color: var(--dd-muted); }
.dd-sidebar-footer .min-w-0 { min-width: 0; }
.dd-logo-mark, .dd-logo-img { flex-shrink: 0; }

.hrms-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hrms-topbar {
  background: transparent;
  border-bottom: none;
  height: 68px;
  padding-top: 8px;
}
.hrms-page-title { font-weight: 800; font-size: 1.15rem; color: var(--dd-ink); }
.hrms-content { flex: 1; padding-top: 0 !important; }
.hrms-footer { background: transparent; border-top: none; color: var(--dd-muted-2) !important; }

/* Topbar icon buttons */
.dd-icon-btn {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dd-card); border: 1px solid var(--dd-border);
  color: var(--dd-ink);
}
.dd-icon-btn:hover { background: var(--dd-bg); color: var(--dd-ink); }

/* ---------------- Cards / surfaces ---------------- */

.card {
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-lg);
  box-shadow: 0 1px 2px rgba(24,20,43,0.03), 0 10px 30px rgba(24,20,43,0.03);
}

.stat-card { border-radius: var(--dd-radius-md); }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 800; color: var(--dd-ink); }
.stat-card .stat-label { font-size: 0.75rem; color: var(--dd-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
/* Neutralize Bootstrap contextual text colors inside stat cards so every
   tile reads as one calm system instead of a traffic-light of hues. */
.stat-card .stat-value.text-success,
.stat-card .stat-value.text-primary,
.stat-card .stat-value.text-warning,
.stat-card .stat-value.text-danger { color: var(--dd-ink) !important; }

/* Ring stat tile (dashboard "attention required" row) */
.dd-ring-tile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.dd-ring-tile .dd-ring-num { font-size: 1.5rem; font-weight: 800; }
.dd-ring-tile .dd-ring-label { font-size: 0.78rem; color: var(--dd-muted); font-weight: 600; }
.dd-ring {
  --pct: 0;
  --ring-color: var(--dd-primary);
  width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--dd-border) 0);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dd-ring::after {
  content: '';
  width: 38px; height: 38px; border-radius: 50%; background: var(--dd-card);
}
.dd-ring-wrap span { position: absolute; font-size: 0.68rem; font-weight: 800; color: var(--dd-ink); }
.dd-ring-wrap { position: relative; display: flex; align-items: center; justify-content: center; }

/* ---------------- Buttons — recolor Bootstrap "success" to brand purple ---------------- */

.btn { border-radius: var(--dd-radius-sm); font-weight: 600; font-size: 0.88rem; }
.btn-success, .btn-success:hover, .btn-success:focus {
  background: var(--dd-primary); border-color: var(--dd-primary); color: #fff;
}
.btn-success:hover { background: var(--dd-primary-dark); border-color: var(--dd-primary-dark); }
.btn-outline-success {
  color: var(--dd-primary); border-color: var(--dd-primary-soft-2); background: transparent;
}
.btn-outline-success:hover { background: var(--dd-primary); border-color: var(--dd-primary); color: #fff; }
.btn-outline-primary { color: var(--dd-primary); border-color: var(--dd-primary-soft-2); }
.btn-outline-primary:hover { background: var(--dd-primary); border-color: var(--dd-primary); }
.btn-outline-secondary { color: var(--dd-muted); border-color: var(--dd-border); }
.btn-outline-secondary:hover { background: var(--dd-bg); color: var(--dd-ink); border-color: var(--dd-border); }
.btn-outline-danger { color: var(--dd-danger); border-color: #F7D9E1; }
.btn-outline-danger:hover { background: var(--dd-danger); border-color: var(--dd-danger); }
.btn-link { color: var(--dd-primary); }

/* ---------------- Badges / status pills ---------------- */

.badge.bg-success { background: var(--dd-primary) !important; }
.badge.bg-warning { background: #FDECD1 !important; color: #9A5B00 !important; }
.badge.bg-danger { background: var(--dd-danger) !important; }
.badge.bg-light { background: var(--dd-bg) !important; border-color: var(--dd-border) !important; }

.badge-status-pending { background: #FDECD1; color: #9A5B00; }
.badge-status-approved { background: var(--dd-primary-soft); color: var(--dd-primary-dark); }
.badge-status-rejected { background: #FBE0E7; color: #A31648; }

/* ---------------- Forms ---------------- */

.form-control, .form-select {
  border-radius: var(--dd-radius-sm);
  border-color: var(--dd-border);
  font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--dd-primary);
  box-shadow: 0 0 0 3px var(--dd-primary-soft);
}
.form-label { font-weight: 600; color: #4A4560; }

/* ---------------- Tables ---------------- */

.table { color: var(--dd-ink); }
.table thead th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--dd-muted); font-weight: 700; border-bottom-color: var(--dd-border);
  background: transparent;
}
.table td, .table th { border-color: var(--dd-border); vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--dd-bg); }

/* ---------------- Alerts ---------------- */

.alert-success { background: var(--dd-primary-soft); color: var(--dd-primary-dark); border-color: var(--dd-primary-soft-2); }
.alert-danger { background: #FBE0E7; color: #A31648; border-color: #F7D9E1; }
.alert-light { background: var(--dd-bg); border-color: var(--dd-border); }

/* ---------------- Login page ---------------- */

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(60% 60% at 15% 10%, rgba(109,77,242,0.16), transparent 60%),
    radial-gradient(50% 50% at 90% 90%, rgba(240,136,62,0.14), transparent 60%),
    var(--dd-bg);
}
.login-card {
  max-width: 400px; width: 100%; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(24,20,43,0.04), 0 24px 60px rgba(24,20,43,0.08);
}

/* ---------------- Calendar / timeline panel (dashboard) ---------------- */

.dd-cal-day { font-size: 0.72rem; font-weight: 700; color: var(--dd-muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 8px; }
.dd-cal-item { display: flex; gap: 10px; padding: 6px 0; }
.dd-cal-time { width: 46px; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: var(--dd-ink); }
.dd-cal-bar { width: 3px; border-radius: 3px; flex-shrink: 0; }
.dd-cal-title { font-size: 0.82rem; font-weight: 700; color: var(--dd-ink); line-height: 1.25; }
.dd-cal-sub { font-size: 0.74rem; color: var(--dd-muted); }

/* ---------------- Misc ---------------- */

@media (max-width: 767px) {
  .hrms-sidebar { position: fixed; left: -280px; z-index: 1050; transition: left .2s ease; height: 100vh; }
  .hrms-sidebar.show { left: 0; }
}