/* ============================================================
   Sistem Cuti — Gold & Black (Axseven theme)
   Pallet: bg #0a0908 · surface #141210 · gold #c9a24b · ivory #f2ede1
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ===== GOLD & BLACK ===== */
  --md-primary: #c9a24b;
  --md-primary-container: #33291a;
  --md-on-primary: #0a0908;
  --md-surface: #141210;
  --md-surface-variant: #1c1916;
  --md-surface-2: #191613;
  --md-background: #0a0908;

  --md-green: #7fae6a;
  --md-green-container: #1e2a1a;
  --md-error: #e0705f;
  --md-error-container: #33201c;
  --md-warn: #d9a441;
  --md-warn-container: #33280f;
  --md-purple: #a98bd9;
  --md-purple-container: #241d33;
  --md-cyan: #6fb2d1;
  --md-cyan-container: #16232b;
  --md-teal: #62b3a8;
  --md-teal-container: #152422;
  --md-slate: #8e8779;

  --md-text: #f2ede1;
  --md-text-secondary: #b7ae9c;
  --md-outline: #4a4030;
  --md-outline-variant: #332c20;

  /* gold helpers */
  --gold: #c9a24b;
  --gold-bright: #e8cd8a;
  --gold-dim: #8a6d34;
  --gold-soft: rgba(201, 162, 75, 0.14);
  --gold-hair: rgba(201, 162, 75, 0.28);
  --line: #332c20;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --elev-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  --elev-3: 0 8px 24px rgba(0, 0, 0, 0.6);

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--md-background);
  color: var(--md-text);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

.material-icons-round {
  font-family: "Material Icons Round";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* ============ LOGIN ============ */
.login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(201,162,75,0.10) 0%, transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(201,162,75,0.06) 0%, transparent 55%),
    var(--md-background);
}
.login-card {
  background: var(--md-surface);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--elev-3);
  border: 1px solid var(--gold-hair);
}
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand .material-icons-round {
  font-size: 44px;
  color: var(--md-primary);
  background: var(--md-primary-container);
  border-radius: 20px;
  padding: 14px;
}
.login-brand h1 { font-size: 26px; font-weight: 700; margin-top: 12px; letter-spacing: -0.02em; }
.login-sub { color: var(--md-text-secondary); margin-top: 4px; }

/* ============ APP SHELL ============ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 236px;
  flex-shrink: 0;
  background: #0f0d0b;
  border-right: 1px solid var(--gold-hair);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  color: var(--md-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.nav-item .material-icons-round { color: var(--md-text-secondary); }
.nav-item:hover { background: var(--md-surface-variant); }
.nav-item.active { background: var(--md-primary-container); color: var(--md-primary); }
.nav-item.active .material-icons-round { color: var(--md-primary); }
.count-badge {
  margin-left: auto;
  background: var(--md-error);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
}

.app-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(20, 18, 16, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gold-hair);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.page-title { font-size: 18px; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.user-block { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  background: var(--md-primary);
  color: var(--md-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-weight: 600; font-size: 14px; }
.user-meta .badge { align-self: flex-start; margin-top: 2px; }

.main { padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.page-sub { color: var(--md-text-secondary); font-size: 14px; margin-top: 3px; }

/* ============ BUTTONS (Material) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: var(--md-surface-variant);
  color: var(--md-text);
  transition: box-shadow 0.15s, background 0.15s, transform 0.05s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--md-primary); color: var(--md-on-primary); box-shadow: var(--elev-1); }
.btn-primary:hover { background: #0e2acf; box-shadow: var(--elev-2); }
.btn-tonal { background: var(--md-primary-container); color: var(--md-primary); }
.btn-tonal:hover { background: #cfd5ff; }
.btn-outline { background: transparent; color: var(--md-text); border: 1px solid var(--md-outline); }
.btn-outline:hover { background: var(--md-surface-variant); }
.btn-green { background: var(--md-green); color: #0a0908; }
.btn-green:hover { background: #3e7f43; }
.btn-red { background: var(--md-error-container); color: var(--md-error); }
.btn-red:hover { background: #442622; }
.btn-ghost { background: transparent; color: var(--md-text-secondary); }
.btn-ghost:hover { background: var(--md-surface-variant); }
.btn-block { width: 100%; justify-content: center; }
.icon-btn { padding: 9px; border-radius: var(--radius-pill); }
.icon-btn .material-icons-round { font-size: 22px; }

/* ============ FIELDS (Material) ============ */
.m-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--md-text-secondary);
  margin-bottom: 4px;
}
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--md-text);
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: 8px;
  transition: border 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px var(--md-primary-container);
}

/* ============ CARD (Material elevation / Shopeers) ============ */
.card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; }
.span-2 { grid-column: span 2; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .span-2 { grid-column: span 1; } }

.settings-card { max-width: 560px; }
.filter-card { margin-bottom: 20px; }
.filter-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ TABLES (Material list style) ============ */
.table-card { padding: 8px 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--md-outline-variant); }
th {
  background: var(--md-surface-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-text-secondary);
}
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: var(--md-surface-2); }
tbody tr:last-child td { border-bottom: none; }
.empty { text-align: center; color: var(--md-text-secondary); padding: 48px 20px !important; background: transparent !important; }

/* ============ BADGES / CHIPS ============ */
.badge, .chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.badge-pending { background: var(--md-warn-container); color: var(--md-warn); }
.badge-approved { background: var(--md-green-container); color: var(--md-green); }
.badge-rejected { background: var(--md-error-container); color: var(--md-error); }
.badge-cancelled { background: var(--md-outline-variant); color: var(--md-text-secondary); }
.badge-role, .chip-neutral { background: var(--md-surface-variant); color: var(--md-text-secondary); }
.chip-warn { background: var(--md-warn-container); color: var(--md-warn); }
.chip { margin-right: 6px; }

.error-text { color: var(--md-error); font-size: 13px; margin: 10px 0; }
.info-text { color: var(--md-slate); font-size: 14px; margin: 12px 0; }
.success-text { color: var(--md-green); font-size: 14px; }

/* ============ DASHBOARD: stat cards (Shopeers style) ============ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.stat-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--elev-1);
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-icon .material-icons-round { font-size: 26px; }
.stat-icon.blue { background: var(--md-primary-container); color: var(--md-primary); }
.stat-icon.green { background: var(--md-green-container); color: var(--md-green); }
.stat-icon.amber { background: var(--md-warn-container); color: var(--md-warn); }
.stat-icon.purple { background: var(--md-purple-container); color: var(--md-purple); }
.stat-card .value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat-card .label { color: var(--md-text-secondary); font-size: 13px; margin-top: 2px; }

/* ============ CHARTS ============ */
.charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-bottom: 22px; }
@media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }
.chart-card { padding: 20px 22px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chart-title { font-weight: 700; font-size: 15px; }
.chart-total { font-size: 13px; color: var(--md-text-secondary); }
.chart-body { width: 100%; }
.chart-body svg { display: block; width: 100%; height: auto; }

.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut {
  width: 132px; height: 132px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.donut::after {
  content: "";
  position: absolute;
  inset: 20px;
  background: var(--md-surface);
  border-radius: 50%;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.donut-center .v { font-size: 20px; font-weight: 700; }
.donut-center .l { font-size: 11px; color: var(--md-text-secondary); }
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 13px; min-width: 0; }
.donut-legend .li { display: flex; align-items: center; gap: 8px; }
.donut-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend .nm { color: var(--md-slate); margin-right: auto; }
.donut-legend .vl { font-weight: 700; }

/* ============ BALANCE CARDS ============ */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-bottom: 22px; }
.balance-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--elev-1);
}
.balance-card .b-type { font-weight: 700; font-size: 15px; }
.balance-card .b-quota { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--md-primary); margin-top: 6px; }
.balance-card .b-used { font-size: 13px; color: var(--md-text-secondary); margin-top: 2px; }
.balance-bar { height: 8px; background: var(--md-surface-variant); border-radius: var(--radius-pill); margin-top: 12px; overflow: hidden; }
.balance-bar > div { height: 100%; background: var(--md-primary); border-radius: var(--radius-pill); }
.balance-bar.warn > div { background: var(--md-warn); }
.balance-bar.danger > div { background: var(--md-error); }

/* ============ CALENDAR ============ */
.calendar-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-label { font-weight: 700; font-size: 16px; min-width: 150px; text-align: center; }
.cal-legend { margin-left: auto; font-size: 13px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--md-text-secondary); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.calendar-grid-wrap { padding: 16px; overflow-x: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); min-width: 680px; }
.cal-head { text-align: center; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--md-text-secondary); padding: 8px 0; border-bottom: 1px solid var(--md-outline-variant); }
.cal-cell { min-height: 92px; border: 1px solid var(--md-outline-variant); padding: 6px; font-size: 12px; }
.cal-cell.other-month { background: var(--md-surface-2); color: var(--md-outline); }
.cal-cell.today { background: var(--md-primary-container); }
.cal-num { font-weight: 700; margin-bottom: 4px; }
.evt {
  background: var(--md-primary);
  color: var(--md-on-primary);
  border-radius: 6px;
  padding: 3px 6px;
  margin-bottom: 3px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.92;
}
.evt.cuti-tahunan { background: var(--md-primary); }
.evt.cuti-sakit { background: var(--md-green); }
.evt.cuti-kecemasan { background: var(--md-error); }
.evt.cuti-tanpa-gaji { background: var(--md-slate); }
.evt.cuti-bersalin { background: var(--md-purple); }
.evt.cuti-isteri-bersalin { background: var(--md-cyan); }
.evt.cuti-wfh { background: var(--md-teal); }
.evt::after { content: ""; display: block; }

/* ============ MODAL ============ */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-card {
  background: var(--md-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--elev-3);
}
.modal-card h3 { font-size: 19px; margin-bottom: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.modal-body-list { display: flex; flex-direction: column; gap: 12px; }

/* ============ TOAST ============ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #141516;
  color: #fff;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  box-shadow: var(--elev-3);
  z-index: 200;
  font-size: 14px;
  font-weight: 500;
  max-width: 90vw;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.success { background: var(--md-green); }
.toast.error { background: var(--md-error); }

/* ============ STAFF ROWS ============ */
.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--md-outline-variant);
}
.user-row:last-child { border-bottom: none; }
.user-row:hover { background: var(--md-surface-2); }
.user-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.table-card > .table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }

@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--elev-3);
    height: 100vh;
  }
  .sidebar.open { transform: translateX(0); }
  .app-content { width: 100%; min-width: 0; }
  .main { padding: 16px; }
  .topbar { padding: 12px 16px; }
  .user-meta { display: none; }
  .btn#btn-logout span { display: none; }
}
/* ============ Date Picker gaya shadcn/ui (vanilla) ============ */
.dp-wrap { position: relative; }
.dp-input { opacity:0; position:absolute; width:1px; height:1px; pointer-events:none; }
.dp-trigger {
  width:100%; height:40px; display:flex; align-items:center; gap:8px;
  padding:0 12px; font:inherit; font-size:14px; cursor:pointer;
  color:var(--md-text); background:var(--md-surface);
  border:1px solid var(--md-outline); border-radius:8px; text-align:left;
  transition: border-color .15s, box-shadow .15s;
}
.dp-trigger:hover { background:var(--md-surface-container); }
.dp-trigger:focus-visible { outline:none; box-shadow:0 0 0 2px var(--md-surface), 0 0 0 4px var(--md-primary); border-color:var(--md-primary); }
.dp-trigger .material-icons-round { font-size:18px; color:var(--md-text-secondary); flex-shrink:0; }
.dp-trigger .dp-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp-trigger .dp-chev { font-size:18px; color:var(--md-text-secondary); flex-shrink:0; }
.dp-trigger.has-value { color:var(--md-text); }
.dp-trigger.has-value .dp-label { font-weight:500; }

.dp-pop {
  position:absolute; z-index:120; top:calc(100% + 6px); left:0; min-width:280px;
  background:var(--md-surface); border:1px solid var(--md-outline);
  border-radius:10px; box-shadow:var(--md-shadow-3); padding:8px;
  animation:dp-in .12s ease;
}
@keyframes dp-in { from { opacity:0; transform:translateY(-4px);} to {opacity:1; transform:none;} }
.dp-pop.dp-range { min-width:340px; }
.dp-head { display:flex; align-items:center; justify-content:space-between; padding:2px 6px 6px; }
.dp-title { font-weight:600; font-size:14px; }
.dp-nav { display:flex; gap:2px; }
.dp-nav button { border:none; background:transparent; border-radius:6px; width:28px; height:28px; cursor:pointer; color:var(--md-text-secondary); display:grid; place-items:center; }
.dp-nav button:hover { background:var(--md-surface-container-hover); color:var(--md-text); }
.dp-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.dp-wday { text-align:center; font-size:12px; color:var(--md-text-secondary); padding:6px 0; font-weight:500; }
.dp-day {
  border:none; background:transparent; border-radius:6px; height:34px; font:inherit; font-size:13px;
  color:var(--md-text); cursor:pointer; display:grid; place-items:center; position:relative;
}
.dp-day:hover:not(:disabled) { background:var(--md-surface-container-hover); }
.dp-day:disabled { color:var(--md-text-disabled); cursor:default; }
.dp-day.dp-out { color:var(--md-text-disabled); }
.dp-day.dp-today { font-weight:700; }
.dp-day.dp-selected { background:var(--md-primary); color:var(--md-on-primary); font-weight:600; }
.dp-day.dp-selected:hover { background:var(--md-primary); }
.dp-day.dp-in-range { background:var(--md-primary-container); border-radius:0; }
.dp-day.dp-range-start, .dp-day.dp-range-end { background:var(--md-primary); color:var(--md-on-primary); font-weight:600; border-radius:6px; }
.dp-day.dp-weekend { color:var(--md-primary); }
.dp-foot { display:flex; justify-content:flex-end; gap:8px; padding:8px 6px 2px; }
.dp-foot .btn { height:32px; padding:0 16px; font-size:13px; }

/* ============ Native date input gaya shadcn/ui (sifar JS, ultas 2-pemangkin) ============ */
/* Semua input[type=date] guna gaya uniform shadcn-field (bukan browser-custom yang tak konsisten).
   Reka bentuk mengikut shadcn: trigger setinggi 40px, border var(--md-outline),
   radius 8px, icon calendar-material + chevron, focus ring 2px offset var(--md-primary).
   Pendekatan: sembunyikan perkara dalaman asal (::-webkit-date-and-time-value/default) utk
   papar teks konsisten + tinted icon shadcn (primary), padan tema Material admin. */
input[type='date'] {
  /* keep the native control so the calendar picker keeps working */
  -webkit-appearance: auto; appearance: auto;
  font: inherit; font-size: 14px; font-weight: 400;
  color: var(--md-text, #f2ede1);
  width: 100%; height: 40px;
  padding: 0 10px 0 12px;
  background: var(--md-surface, #141210);
  border: 1px solid var(--md-outline, #4a4030);
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0,0,0,.4);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input[type='date']:hover { background: var(--md-surface-container-hover, #1c1916); }
input[type='date']:focus-visible {
  outline: none;
  border-color: var(--md-primary, #c9a24b);
  box-shadow: 0 0 0 2px var(--md-surface), 0 0 0 4px color-mix(in srgb, var(--md-primary, #c9a24b) 28%, transparent);
}

/* trigger native tetap boleh diklik (seluruh input buka kalendar) */
input[type='date'] { cursor: pointer; }
input[type='date']:focus { cursor: text; }
/* placeholder & teks bila tiada nilai */
input[type='date']:invalid::-webkit-date-and-time-value,
input[type='date']::-webkit-date-and-time-value { min-width: 0; color: var(--md-text, #f2ede1); }
input[type='date']:placeholder-shown { color: var(--md-text-secondary, #67686b); }

/* ikon kalendar: kekal boleh diklik supaya kalendar boleh dibuka */
input[type='date'] { position: relative; }

/* =====================================================
   DatePicker — gaya shadcn/ui (Material look) sebagai restyle
   ke atas <input type="date"> native. SIFAR JS supaya semua
   .value / change / laporan / pengiraan hari TIDAK patah.
   ===================================================== */
input[type='date'] {
  box-sizing: border-box;
  height: 40px;
  width: 100%;
  padding: 0 8px 0 12px;   /* right side reserves room for the calendar icon */
  font: inherit;
  font-size: 14px;
  color: var(--md-text);
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-md, 8px);
  -webkit-appearance: auto;
  appearance: auto;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input[type='date']:hover:not(:disabled):not(:focus) {
  background: var(--md-surface-container-hover);
}
input[type='date']:focus-visible {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-primary) 24%, transparent);
}
input[type='date']:disabled {
  color: var(--md-text-disabled);
  background: var(--md-surface-container);
  border-color: var(--md-outline-variant);
}



/* whole field opens the picker on click */
input[type='date'] { cursor: pointer; }
input[type='date']::-webkit-datetime-edit { cursor: pointer; }

/* Firefox / non-webkit fallback */
@supports not selector(::-webkit-calendar-picker-indicator) {
  input[type='date'] { cursor: pointer; }
}

/* ---------- Axseven logo ---------- */
.login-brand .login-logo{
  display:block;
  width:220px;
  max-width:78%;
  height:auto;
  margin:0 auto 22px;
}
.topbar-logo{
  height:26px;
  width:auto;
  display:block;
  flex:0 0 auto;
}
@media(max-width:560px){
  .login-brand .login-logo{width:180px;margin-bottom:18px;}
  .topbar-logo{height:20px;}
}


/* ---------- Lupa kata laluan ---------- */
.login-forgot{
  text-align:center;
  margin-top:20px;
  font-size:13.5px;
}
.login-forgot a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .25s;
}
.login-forgot a:hover{border-bottom-color:var(--gold);}

.forgot-hint{
  font-size:13px;
  color:var(--text-dim, #9a9a9a);
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid rgba(201,162,75,.28);
  border-radius:10px;
  background:rgba(201,162,75,.05);
}

.forgot-ok{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  font-size:15px;
  color:#7ed49a;
  margin:8px 0 24px;
}
.forgot-ok .material-icons-round{font-size:22px;}

/* ---------- Date input: gold calendar icon ----------
   The native indicator glyph is black and disappears on this dark surface, and
   `filter` is not applied to it reliably. So we keep the real indicator in place
   (it still opens the picker on click) but make it transparent, then draw our own
   gold calendar glyph via background-image - SVG strokes inlined as data URI so
   the gold is exact, no filter guessing. */
input[type='date']::-webkit-calendar-picker-indicator{
  width:20px;
  height:20px;
  margin:0 0 0 6px;
  padding:0;
  cursor:pointer;
  opacity:1;
  /* hide the native glyph but keep it clickable */
  color:transparent;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  transition:opacity .15s,transform .15s;
}
input[type='date']::-webkit-calendar-picker-indicator:hover{
  opacity:.8;
  transform:scale(1.1);
}


/* ---------- Klik di mana-mana bahagian medan tarikh akan buka kalendar ----------
   Ikon kalendar asal hanya boleh diklik pada 20px di kanan. Klik pada teks
   tarikh cuma meletakkan kursor pada segmen hari/bulan/tahun. Supaya seluruh
   medan berkelakuan seperti satu butang (jadi pengguna tidak perlu tepat),
   kita regangkan penunjuk supaya menutupi seluruh medan dan jadikan ia lutsinar.
   Klik di mana-mana = klik penunjuk = kalendar terbuka. */

input[type='date'] { position: relative; }

/* penunjuk dijadikan lapisan penuh medan */
input[type='date']::-webkit-calendar-picker-indicator{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  opacity:0;                 /* halimunan, tetapi masih menerima klik */
  cursor:pointer;
  z-index:2;
}

/* ikon gold dilukis sebagai lapisan berasingan supaya kekal kelihatan
   walaupun penunjuk di atasnya lutsinar */
input[type='date']{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:20px 20px;
  padding-right:38px;        /* ruang untuk ikon supaya teks tidak bertindih */
}

input[type='date']:hover{
  background-color:color-mix(in srgb, var(--md-primary, #c9a24b) 6%, var(--md-surface, #141210));
}
input[type='date']:focus{
  background-color:var(--md-surface, #141210);
}


/* ---------- Wajib isi: penanda + kiraan perkataan ---------- */
.req-mark{
  color:#e07a7a;
  font-weight:700;
  margin-left:2px;
}
.field-hint{
  display:block;
  margin-top:7px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--md-text-secondary, #9a948a);
  transition:color .15s;
}
.field-hint-warn{
  color:#e0b95a;
}
.field-hint-ok{
  color:#7ed49a;
}