:root {
  --black: #080808;
  --black-2: #111111;
  --black-3: #1b1b1b;
  --gold: #d6a62b;
  --gold-light: #f4cf66;
  --gold-pale: #fff7df;
  --silver: #b8bcc2;
  --ink: #171717;
  --muted: #6d7076;
  --line: #e7e3d8;
  --surface: #ffffff;
  --canvas: #f4f2ed;
  --danger: #b83232;
  --success: #18724a;
  --shadow: 0 18px 45px rgba(26, 22, 10, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 285px 1fr; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 28px 20px;
  background:
    radial-gradient(circle at 20% 0%, rgba(214,166,43,.16), transparent 34%),
    linear-gradient(180deg, #0a0a0a 0%, #121212 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid rgba(244,207,102,.22);
}
.brand { display: flex; align-items: center; gap: 14px; padding: 0 6px 26px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-logo { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(244,207,102,.35); }
.brand h1 { margin: 3px 0 0; font-size: 16px; line-height: 1.45; }
.eyebrow, .breadcrumb, .section-kicker { margin: 0; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-list { display: grid; gap: 8px; margin-top: 28px; }
.nav-item {
  width: 100%; padding: 13px 14px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: #c9c9c9; display: flex; gap: 12px; align-items: center; text-align: start;
}
.nav-item:hover:not(:disabled), .nav-item.active { color: #fff; background: rgba(214,166,43,.12); border-color: rgba(214,166,43,.28); }
.nav-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: rgba(255,255,255,.07); color: var(--gold-light); font-size: 11px; font-weight: 800; }
.privacy-note { margin-top: auto; padding: 15px; border-radius: 14px; background: rgba(255,255,255,.05); display: flex; gap: 11px; align-items: flex-start; }
.privacy-note p { margin: 4px 0 0; font-size: 12px; color: #aaa; line-height: 1.55; }
.privacy-dot { margin-top: 5px; width: 9px; height: 9px; background: #34c783; border-radius: 50%; box-shadow: 0 0 0 5px rgba(52,199,131,.12); flex: 0 0 auto; }

.main-content { min-width: 0; }
.topbar { min-height: 96px; padding: 22px 34px; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; }
.topbar h2 { margin: 5px 0 0; font-size: 25px; }
.top-actions { display: flex; gap: 10px; }
.view { display: none; padding: 30px 34px 46px; max-width: 1600px; margin: 0 auto; }
.active-view { display: block; animation: fadeIn .22s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero-card { overflow: hidden; position: relative; min-height: 210px; padding: 36px 38px; border-radius: 24px; color: #fff; background: linear-gradient(118deg, #080808 0%, #17130a 70%, #30220a 100%); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; }
.hero-card::after { content: ""; position: absolute; width: 420px; height: 420px; inset-inline-end: -160px; top: -220px; border: 1px solid rgba(244,207,102,.32); border-radius: 50%; box-shadow: 0 0 0 35px rgba(214,166,43,.05), 0 0 0 70px rgba(214,166,43,.04); }
.hero-copy { max-width: 720px; position: relative; z-index: 1; }
.hero-copy h3 { max-width: 650px; margin: 12px 0; font-size: clamp(26px, 3vw, 42px); line-height: 1.3; }
.hero-copy p { margin: 0; color: #c8c8c8; font-size: 15px; line-height: 1.8; }
.hero-mark { position: relative; z-index: 1; color: var(--gold-light); font-family: Georgia, serif; font-size: 72px; font-weight: 900; letter-spacing: -.12em; padding-inline-end: 22px; text-shadow: 0 3px 15px rgba(214,166,43,.25); }

.setup-grid, .dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.upload-panel, .settings-panel, .chart-panel, .insight-panel, .report-panel { padding: 24px; }
.panel-heading { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.panel-heading h3, .panel-title-row h3, .report-toolbar h3 { margin: 0 0 6px; font-size: 19px; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.step-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #111; background: linear-gradient(135deg, var(--gold-light), var(--gold)); font-weight: 900; flex: 0 0 auto; }
.drop-zone { min-height: 145px; padding: 24px; border: 1.5px dashed #d4cba8; border-radius: 15px; background: #fffcf4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; transition: .2s; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--gold); background: var(--gold-pale); }
.drop-zone small { color: var(--muted); }
.upload-symbol { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: #171717; font-size: 21px; }
.file-status { margin-top: 13px; padding: 10px 12px; border-radius: 10px; background: #f5f5f5; color: var(--muted); font-size: 12px; }
.file-status[data-state="success"] { color: var(--success); background: #eaf7f0; }
.file-status[data-state="error"] { color: var(--danger); background: #fff0f0; }
.split-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 145px; align-content: center; padding: 18px; border-radius: 15px; background: #f8f7f4; }
.compact-upload { cursor: pointer; display: grid; place-items: center; min-height: 54px; padding: 12px; border-radius: 11px; color: #fff; background: #191919; text-align: center; font-weight: 700; font-size: 13px; }
.settings-panel { margin-top: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.form-grid label { color: var(--muted); font-size: 12px; font-weight: 700; }
input, select { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #dcd8ce; border-radius: 10px; background: #fff; color: var(--ink); outline: none; }
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214,166,43,.12); }
.date-entry { direction: ltr; text-align: center; letter-spacing: .04em; }
.date-entry::placeholder { direction: ltr; text-transform: lowercase; }
.validation-row { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.validation-message { color: var(--muted); font-size: 13px; }

.primary-button, .gold-button, .outline-button, .ghost-button { border-radius: 10px; padding: 11px 17px; border: 1px solid transparent; font-weight: 800; }
.primary-button, .gold-button { color: #111; background: linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow: 0 8px 20px rgba(214,166,43,.2); }
.outline-button { color: #171717; background: #fff; border-color: var(--gold); }
.ghost-button { color: var(--ink); background: #fff; border-color: #dedbd2; }
.hidden { display: none !important; }

.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
.kpi-card { position: relative; overflow: hidden; min-height: 135px; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.kpi-card::after { content: ""; position: absolute; width: 75px; height: 75px; border-radius: 50%; inset-inline-end: -28px; top: -28px; background: rgba(214,166,43,.12); }
.kpi-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.kpi-card strong { display: block; margin-top: 13px; font-size: 30px; }
.kpi-card small { color: #999; }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.panel-title-row h3 { margin-top: 5px; }
.bar-chart { display: grid; gap: 13px; }
.bar-item { display: grid; grid-template-columns: minmax(110px, 1fr) 3fr 65px; align-items: center; gap: 12px; font-size: 12px; }
.bar-track { height: 9px; background: #efede7; border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.bar-value { color: var(--muted); font-variant-numeric: tabular-nums; }
.quality-list { display: grid; gap: 10px; }
.quality-item { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-radius: 12px; background: #f7f6f2; }
.quality-item strong { font-size: 22px; }
.quality-item span { color: var(--muted); font-size: 13px; }

.report-panel { padding: 0; overflow: hidden; }
.report-toolbar { padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.report-toolbar h3 { margin-top: 5px; }
.filter-group { display: flex; gap: 10px; min-width: 420px; }
.report-toolbar input, .report-toolbar select { margin-top: 0; }
.edit-hint { margin: 0; padding: 12px 24px; color: #725b16; background: #fff8e5; font-size: 12px; }
.report-legend { padding: 11px 24px; display: flex; flex-wrap: wrap; gap: 10px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.report-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.report-legend b { font-weight: 700; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend-dot.regular { background: #3a79c5; }
.legend-dot.rest { background: #777; }
.legend-dot.holiday { background: #d99a13; }
.legend-dot.leave { background: #2a9a65; }
.legend-dot.permission { background: #8455b8; }
.table-wrap { overflow: auto; max-height: calc(100vh - 270px); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 3; padding: 12px 11px; color: #fff; background: #171717; text-align: start; font-weight: 700; border-bottom: 2px solid var(--gold); }
td { padding: 10px 11px; border-bottom: 1px solid #eeece7; background: #fff; vertical-align: middle; }
tr:hover td { background: #fffcf4; }
th.time-head { background: #24384f; }
th.effect-head { background: #53400f; }
th.leave-head { background: #225b42; }
td.effect-cell { background: #fffaf0; font-weight: 700; }
td.movement-cell { min-width: 155px; }
.movement { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 8px; font-weight: 700; }
.movement.in { color: #12643f; background: #e8f6ee; }
.movement.out { color: #274d78; background: #e9f1fa; }
.movement.missing { color: #9b1c1c; background: #fee9e9; }
.movement input { min-width: 92px; width: 92px; padding: 4px 5px; border-color: rgba(0,0,0,.12); background: rgba(255,255,255,.72); }
td input { min-width: 96px; margin: 0; padding: 7px 8px; font-size: 11px; }
.status-chip { display: inline-flex; padding: 5px 8px; border-radius: 99px; font-weight: 800; font-size: 10px; }
.status-chip.absence { color: #9b1c1c; background: #fee9e9; }
.status-chip.rest { color: #555; background: #eee; }
.status-chip.present { color: #12643f; background: #e8f6ee; }
.status-chip.warning { color: #895f00; background: #fff3cf; }
.status-chip.holiday { color: #755000; background: #fff1c6; }
.status-chip.leave { color: #12643f; background: #e8f6ee; }
.pagination { padding: 14px 22px; display: flex; justify-content: center; align-items: center; gap: 14px; border-top: 1px solid var(--line); }
.pagination span { color: var(--muted); font-size: 12px; }
.toast { position: fixed; inset-inline-end: 26px; bottom: 26px; z-index: 60; max-width: 360px; padding: 14px 18px; color: #fff; background: #171717; border-inline-start: 4px solid var(--gold); border-radius: 10px; box-shadow: 0 15px 35px rgba(0,0,0,.25); transform: translateY(30px); opacity: 0; pointer-events: none; transition: .25s; }
.toast.show { transform: none; opacity: 1; }

[dir="ltr"] .brand-logo { order: 0; }
[dir="ltr"] table { text-align: left; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 88px 1fr; }
  .sidebar { padding: 22px 13px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand > div, .nav-item span:not(.nav-icon), .privacy-note > div { display: none; }
  .brand-logo { width: 58px; height: 58px; }
  .nav-item { justify-content: center; padding: 10px; }
  .privacy-note { justify-content: center; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 14px; flex-direction: row; align-items: center; gap: 10px; overflow-x: auto; }
  .brand { border: 0; padding: 0; }
  .brand-logo { width: 46px; height: 46px; }
  .nav-list { margin: 0; display: flex; }
  .privacy-note { display: none; }
  .topbar { padding: 18px; }
  .topbar h2 { font-size: 20px; }
  .view { padding: 18px; }
  .hero-card { padding: 28px 24px; }
  .hero-mark { display: none; }
  .setup-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .report-toolbar { align-items: stretch; flex-direction: column; }
  .filter-group { min-width: 0; flex-direction: column; }
}

@media (max-width: 520px) {
  .form-grid, .kpi-grid, .split-actions { grid-template-columns: 1fr; }
  .validation-row { align-items: stretch; flex-direction: column; }
  .top-actions { flex-direction: column; }
}