@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --bg: #06090d;
  --top: #0b1020;
  --side: #080c11;
  --panel: #11161f;
  --panel-2: #0d121a;
  --line: #1e2a3b;
  --line-soft: #172130;
  --text: #f7f8fb;
  --muted: #8aa0bd;
  --faint: #526989;
  --teal: #00b8a9;
  --teal-2: #00d1bd;
  --green: #00d084;
  --amber: #ff9900;
  --red: #ff3b57;
  --blue-pill: #21314a;
  --radius: 16px;
}

body.light-theme {
  --bg: #eef3f8;
  --top: #ffffff;
  --side: #ffffff;
  --panel: #ffffff;
  --panel-2: #f6f9fc;
  --line: #d5dfec;
  --line-soft: #e5ebf3;
  --text: #172033;
  --muted: #60728c;
  --faint: #8190a5;
  --blue-pill: #e6eef8;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body, input, select, button, textarea { font-family: "Inter", system-ui, sans-serif; }
h1, h2, h3, h4, .brand-name { font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: 0; }
button { cursor: pointer; }
select option { background: var(--panel); color: var(--text); }
body.light-theme select option { background: #ffffff; color: #172033; }
.hidden { display: none !important; }
body.nav-drawer-open { overflow: hidden; }
.green { color: var(--green) !important; }
.amber { color: var(--amber) !important; }
.red { color: var(--red) !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #070b10; }
::-webkit-scrollbar-thumb { background: #1e2a3b; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }

.icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 16px; }
.icon-sm { width: 13px; height: 13px; }
.icon-lg { width: 34px; height: 34px; }

.login-screen { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 0, rgba(0,184,169,.08), transparent 30%), var(--bg); }
.login-card { width: 420px; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 30px 90px rgba(0,0,0,.4); }
.brand-mark { width: 38px; height: 38px; border-radius: 5px; display: grid; place-items: center; background: var(--teal); color: #061014; font-weight: 900; font-size: 18px; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: .08em; }
.brand-name span { color: var(--teal-2); }
.brand-sub { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.login-card .brand-mark { margin-bottom: 12px; }
.login-card h1 { margin: 18px 0 6px; }
.login-card p { margin: 0 0 20px; color: var(--muted); }
.login-card label, .modal label { display: block; color: var(--muted); font-size: 14px; font-weight: 800; margin: 14px 0 7px; }
.login-card input, .modal input, .modal select, .filters input, .filters select, .period select, .api-box input {
  width: 100%; height: 42px; border-radius: 14px; border: 1px solid #233149; background: #0b111a; color: var(--text); padding: 0 15px; outline: none; font-weight: 700;
}
input[type="date"] { color-scheme: dark; }
body.light-theme input[type="date"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(1) brightness(1.3); opacity: .9; }
body.light-theme input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
.filters select, .table-pager select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.modal select { appearance: auto; background-image: none; }
.modal select option { background: #0b111a; color: #eef5ff; }
body.light-theme .modal select option { background: #ffffff; color: #172033; }
body.light-theme .login-card input, body.light-theme .modal input, body.light-theme .modal select, body.light-theme .filters input, body.light-theme .filters select, body.light-theme .api-box input { background: #f8fbff; border-color: var(--line); color: #172033; }
.login-card input:focus, .modal input:focus, .modal select:focus, .filters input:focus, .filters select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,184,169,.08); }
.hint { margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #0b111a; color: var(--muted); font-size: 12px; line-height: 1.7; }
.demo-login-badge { width: fit-content; margin-top: 14px; border: 1px solid rgba(245,158,11,.45); border-radius: 999px; background: rgba(245,158,11,.12); color: var(--amber); padding: 6px 10px; font-size: 10px; font-weight: 900; letter-spacing: 0; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar-overlay { display: none; }
.sidebar-close, #sidebarOpen { display: none; }
.sidebar { width: 240px; flex: 0 0 240px; min-height: 100vh; border-right: 1px solid var(--line); background: var(--side); padding: 14px; display: flex; flex-direction: column; }
.side-brand { height: 58px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.nav { display: grid; gap: 4px; }
.nav-item { position: relative; width: 100%; border: 0; background: transparent; color: var(--muted); height: 34px; border-radius: 10px; padding: 0 14px; display: flex; align-items: center; gap: 11px; text-align: left; font-size: 12px; font-weight: 800; }
.nav-item b { flex: 1; font-weight: 800; }
.nav-item:hover { background: #0d141d; color: var(--text); }
body.light-theme .nav-item:hover { background: #eef5fb; }
.nav-item.active { color: white; background: #079d90; box-shadow: inset 0 0 0 1px rgba(0,255,230,.14); }
body.light-theme .nav-item.active,
body.light-theme .nav-item.active:hover {
  background: #008f83;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0,126,116,.18), 0 8px 20px rgba(0,143,131,.12);
}
body.light-theme .nav-item.active .icon,
body.light-theme .nav-item.active b,
body.light-theme .nav-item.active em,
body.light-theme .nav-item.active .nav-chevron { color: #ffffff; }
.nav-item em { min-width: 19px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: #263957; color: #dce9ff; font-style: normal; font-size: 10px; }
.nav-item i { width: 6px; height: 6px; border-radius: 999px; background: var(--green); }
.nav-item.accent-amber .icon { color: var(--amber); }
.nav-item.accent-teal .icon { color: var(--teal); }
.nav-group { display: grid; gap: 3px; }
.nav-group-toggle .nav-chevron { min-width: 18px; background: transparent; color: inherit; transform: rotate(-90deg); transition: transform .16s ease; }
.nav-group.open .nav-chevron { transform: rotate(0deg); }
.nav-sub { display: none; gap: 3px; padding-left: 12px; margin: 2px 0 4px; border-left: 1px solid var(--line-soft); }
.nav-group.open .nav-sub { display: grid; }
.nav-item.sub { height: 31px; padding-left: 12px; font-size: 11px; border-radius: 9px; }
.nav-item.sub .icon { width: 15px; height: 15px; }

.side-summary { margin-top: auto; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); font-size: 12px; }
.side-summary h4 { margin: 0 0 12px; color: var(--teal-2); font-size: 10px; }
.side-summary div { display: flex; justify-content: space-between; margin: 9px 0; color: var(--muted); font-weight: 700; }
.side-summary strong { color: white; }
.side-summary .total { border-top: 1px solid var(--line); padding-top: 11px; }
.logout-btn { margin-top: 14px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,59,87,.14); background: transparent; color: var(--red); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; }

.main { flex: 1; min-width: 0; }
.demo-banner { min-height: 38px; border-bottom: 1px solid rgba(245,158,11,.28); background: rgba(245,158,11,.1); color: var(--amber); display: flex; align-items: center; gap: 10px; padding: 8px 18px; font-size: 12px; font-weight: 800; }
.demo-banner b { color: var(--text); text-transform: uppercase; font-size: 11px; }
.demo-banner span { color: var(--muted); }
.license-notice { border-bottom: 1px solid rgba(255,153,0,.26); background: rgba(255,153,0,.1); color: var(--text); padding: 11px 18px; }
.license-notice > div { display: grid; gap: 3px; max-width: 1280px; }
.license-notice b { color: var(--amber); font-size: 12px; font-weight: 900; }
.license-notice span { color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 700; }
.license-notice em { color: var(--faint); font-size: 11px; font-style: normal; font-weight: 800; }
.license-danger { border-color: rgba(255,59,87,.34); background: rgba(255,59,87,.11); }
.license-danger b { color: var(--red); }
.login-card .license-notice { margin: 16px 0 0; border: 1px solid rgba(255,153,0,.28); border-radius: 12px; padding: 11px 12px; background: rgba(255,153,0,.08); }
.login-card .license-danger { border-color: rgba(255,59,87,.34); background: rgba(255,59,87,.09); }
.demo-inline-note { border: 1px solid rgba(245,158,11,.28); border-radius: 10px; background: rgba(245,158,11,.08); color: var(--amber); padding: 10px 12px; font-size: 12px; font-weight: 800; }
.topbar { height: 56px; background: var(--top); border-bottom: 1px solid #0f1726; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; }
.sysline { display: flex; align-items: center; gap: 12px; color: var(--faint); font-family: "JetBrains Mono", monospace; font-size: 10px; }
.sysline b { height: 22px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; display: flex; align-items: center; gap: 7px; color: var(--teal-2); font-size: 9px; }
.sysline i { width: 6px; height: 6px; border-radius: 999px; background: var(--green); }
.sysline em { font-style: normal; min-width: 42px; color: var(--amber); font-weight: 950; text-align: right; }
.sysline em.warn { color: var(--red); }
.top-actions { display: flex; align-items: center; gap: 11px; }
.icon-button { width: 30px; height: 30px; border: 0; background: transparent; display: grid; place-items: center; color: var(--amber); }
.period, .profile { height: 30px; border-radius: 12px; border: 1px solid var(--line); background: #0d131c; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--muted); font-size: 11px; font-weight: 800; }
.period select { width: auto; height: auto; padding: 0 2px; border: 0; background: transparent; color: var(--text); border-radius: 0; font-size: 12px; }
body:not(.light-theme) .period select { color: white; }
body:not(.light-theme) .period select option {
  background: #0d1420;
  color: #eef5ff;
}
body.light-theme .period, body.light-theme .profile { background: #f8fbff; }
body.light-theme .period select {
  color: #172033;
  color-scheme: light;
}
body.light-theme .period select option {
  background: #ffffff;
  color: #172033;
}
body.light-theme .period select option:checked {
  background: #dff7f4;
  color: #006f66;
  font-weight: 900;
}
.native-period-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.period-picker { position: relative; }
.period-picker-button {
  height: 24px;
  min-width: 74px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.period-picker-button:hover,
.period-picker.open .period-picker-button { background: rgba(0,184,169,.12); color: var(--teal-2); }
.period-picker-button i {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .75;
}
.period-picker.open .period-picker-button i { transform: rotate(225deg) translate(-2px,-1px); }
.period-picker-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  min-width: 144px;
  max-height: 270px;
  overflow: auto;
  display: none;
  gap: 3px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b111a;
  box-shadow: 0 18px 45px rgba(0,0,0,.38);
}
.period-picker.open .period-picker-menu { display: grid; }
.period-picker-menu button {
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.period-picker-menu button:hover { background: rgba(255,255,255,.05); color: var(--text); }
.period-picker-menu button[aria-selected="true"] { background: rgba(0,184,169,.16); color: var(--teal-2); }
body.light-theme .period-picker-button { color: #172033; }
body.light-theme .period-picker-button:hover,
body.light-theme .period-picker.open .period-picker-button { background: #e7f8f6; color: #007e74; }
body.light-theme .period-picker-menu {
  background: #ffffff;
  border-color: #cfd9e6;
  box-shadow: 0 18px 45px rgba(22,34,51,.16);
}
body.light-theme .period-picker-menu button { color: #52657d; }
body.light-theme .period-picker-menu button:hover { background: #eef5fb; color: #172033; }
body.light-theme .period-picker-menu button[aria-selected="true"] { background: #dff7f4; color: #006f66; }
.period > button { border: 0; background: transparent; color: var(--teal); font-weight: 900; }
.profile span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--teal); color: white; font-weight: 900; }
.profile strong { color: white; }
.profile.demo-profile em { border: 1px solid rgba(245,158,11,.35); border-radius: 999px; color: var(--amber); padding: 3px 7px; font-size: 9px; font-style: normal; font-weight: 900; }
body.light-theme .profile strong { color: var(--text); }

.content { padding: 24px 28px; }
.view { display: none; }
.view.active { display: block; animation: rise .18s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 22px; }
.page-head h2 { margin: 0; font-size: 24px; line-height: 1.1; }
.page-head p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.page-head strong { color: var(--teal-2); }
.page-actions { margin-left: auto; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.btn { height: 34px; border: 0; border-radius: 10px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 900; }
.btn-primary { background: #079d90; color: #fff; box-shadow: 0 10px 30px rgba(0,184,169,.12); }
.btn-soft { background: #19253a; color: #d9e5f7; border: 1px solid var(--line); }

.metrics, .pay-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric-card, .pay-metrics article { min-width: 0; min-height: 116px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 20px; display: flex; justify-content: space-between; overflow: hidden; }
.metric-card > div { min-width: 0; }
.metric-card h3, .pay-metrics span { margin: 0; color: var(--faint); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.metric-card strong, .pay-metrics strong { display: block; max-width: 100%; margin-top: 13px; font-size: clamp(18px, 1.7vw, 25px); font-weight: 900; overflow-wrap: anywhere; line-height: 1.15; }
.metric-card strong.cyan { color: var(--cyan); }
.metric-subline { display: block; margin-top: 5px; color: var(--cyan); font-size: 11px; font-style: normal; font-weight: 900; line-height: 1.25; }
.metric-subline b { color: var(--amber); font-size: 12px; }
.metric-card p { margin: 7px 0 0; color: var(--faint); font-size: 12px; }
.card-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(0,184,169,.08); color: var(--teal); }
.card-icon.green { background: rgba(0,208,132,.09); color: var(--green); }
.card-icon.amber { background: rgba(255,153,0,.10); color: var(--amber); }
.card-icon.red { background: rgba(255,59,87,.10); color: var(--red); }
.dashboard-exit-metrics { margin-top: -6px; }
.dashboard-exit-metrics .metric-card { min-height: 94px; background: linear-gradient(180deg, rgba(6,182,212,.06), var(--panel)); border-color: rgba(6,182,212,.24); }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel, .table-card, .legend, .matrix-card, .report-ready { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.panel { padding: 24px; }
.panel h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.panel p { color: var(--faint); font-size: 12px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.panel-head button { border: 0; background: transparent; color: var(--teal-2); font-size: 12px; font-weight: 900; }
.title-icon { width: 16px; height: 16px; color: var(--teal); }
.title-icon.amber { color: var(--amber); }
.rank-row, .leave-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; border-bottom: 1px solid var(--line); padding: 13px 0; }
.leave-row-avatar { grid-template-columns: 36px 34px 1fr auto; column-gap: 10px; }
.rank-row:last-child, .leave-row:last-child { border-bottom: 0; }
.rank-row b, .leave-row b { display: block; color: white; }
.rank-row small, .leave-row small { color: var(--faint); font-size: 11px; font-weight: 800; }
.rank-row strong { color: var(--amber); }
.status { border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 900; }
.status.wait { background: rgba(255,153,0,.12); color: var(--amber); }
.status.ok { background: rgba(0,208,132,.12); color: var(--green); }
.status.no { background: rgba(255,59,87,.12); color: var(--red); }

.tabs { height: 36px; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #0d131c; margin-bottom: 20px; }
body.light-theme .tabs { background: #f6f9fc; }
.tabs button { border: 0; border-radius: 9px; padding: 0 16px; background: transparent; color: var(--muted); font-weight: 900; }
.tabs button.active { background: #079d90; color: white; }
.table-card { overflow-x: auto; overflow-y: hidden; }
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.filters { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.search { width: 400px; max-width: 100%; height: 36px; position: relative; display: flex; align-items: center; }
.search.short { width: 280px; }
.search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search input { padding-left: 42px; }
.filter-right { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 900; flex-wrap: wrap; justify-content: flex-end; }
.filter-right b, .filter-right > span { display: inline-flex; align-items: center; height: 34px; padding: 0 2px; color: var(--faint); letter-spacing: .04em; }
.filter-right select { width: auto; max-width: 100%; min-width: 130px; height: 34px; border-radius: 10px; background-color: #0d1420; border-color: #24334a; color: #e8eef9; padding: 0 34px 0 12px; }
.filter-right select:focus { border-color: rgba(0,184,169,.55); }
body.light-theme .filter-right select { background-color: #f8fbff; border-color: #cfd9e6; color: #172033; }
.counter { height: 34px; border-left: 1px solid var(--line); padding-left: 16px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.counter strong { color: var(--teal-2); }
.counter em { color: var(--muted); font-style: normal; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { height: 42px; color: var(--faint); background: #111722; border-bottom: 1px solid var(--line); padding: 0 16px; text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.data-table td { height: 58px; border-bottom: 1px solid var(--line-soft); padding: 0 16px; color: var(--muted); vertical-align: middle; }
.data-table tr:hover td { background: rgba(255,255,255,.015); }
.table-pager { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 900; }
.table-pager label, .table-pager div { display: inline-flex; align-items: center; gap: 10px; }
.table-pager select { height: 32px; width: auto; min-width: 84px; border: 1px solid #24334a; border-radius: 10px; background-color: #0d1420; color: #e8eef9; padding: 0 34px 0 12px; font-weight: 900; }
.table-pager button { height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #0d1420; color: var(--muted); font-weight: 900; padding: 0 12px; }
.table-pager button:not(:disabled):hover { color: var(--teal-2); border-color: rgba(0,184,169,.35); }
.table-pager button:disabled { opacity: .45; cursor: not-allowed; }
body.light-theme .table-pager button, body.light-theme .table-pager select { background-color: #f8fbff; border-color: #cfd9e6; color: #172033; }
body.light-theme .side-summary { background: #f8fbff; border-color: #cfd9e6; color: #334155; }
body.light-theme .side-summary span, body.light-theme .side-summary h4 { color: #315174; }
body.light-theme .side-summary strong { color: #172033; }
.person-cell { display: flex; align-items: center; gap: 13px; min-width: 0; }
.person-cell > div { min-width: 0; }
.avatar { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: rgba(0,184,169,.18); color: var(--teal-2); font-weight: 900; overflow: hidden; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,184,169,.18); }
.avatar.has-photo { background: #0b111a; box-shadow: 0 0 0 1px rgba(0,184,169,.28), 0 8px 18px rgba(0,0,0,.22); }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.table-avatar { width: 34px; height: 34px; font-size: 11px; }
.list-avatar { width: 34px; height: 34px; font-size: 11px; }
.data-table b { color: white; }
body.light-theme .data-table th, body.light-theme .matrix-table th, body.light-theme .matrix-table thead .sticky { background: #f4f7fb; }
body.light-theme .data-table b, body.light-theme .rank-row b, body.light-theme .leave-row b, body.light-theme .report-ready h3 { color: var(--text); }
.dept-pill { display: inline-flex; border-radius: 999px; background: var(--blue-pill); color: #dce7fb; padding: 4px 10px; font-size: 10px; font-weight: 900; }
body.light-theme .dept-pill { background: #e5eefb; color: #315174; }
.count-link { border: 1px solid rgba(0,184,169,.28); background: rgba(0,184,169,.10); color: var(--teal-2); border-radius: 999px; padding: 6px 11px; font-size: 11px; font-weight: 900; cursor: pointer; }
.count-link:hover { background: rgba(0,184,169,.18); color: #fff; }
body.light-theme .count-link { background: #e8fbf8; color: #007e74; border-color: #b8e7df; }
.leave-type-pill { min-width: 86px; justify-content: center; color: #dce7fb; background: rgba(78,121,167,.22); }
body.light-theme .leave-type-pill { background: #dbeafe; color: #1f4f82; }
.salary { color: var(--green); font-size: 15px; font-weight: 900; }
.overtime-rate { color: var(--amber); font-size: 10px; font-weight: 900; }
.payroll-table td { height: 72px; }
.deduction-clean { display: inline-flex; align-items: center; height: 26px; border-radius: 999px; padding: 0 10px; background: rgba(0,208,132,.10); color: var(--green); font-weight: 900; font-size: 11px; }
.deduction-list { display: grid; gap: 5px; align-content: center; min-width: 132px; }
.deduction-list span { display: inline-flex; align-items: center; gap: 6px; color: #f3b4bf; font-size: 11px; font-weight: 800; }
.deduction-list span b { width: 28px; height: 18px; border-radius: 6px; display: inline-grid; place-items: center; background: rgba(255,59,87,.13); color: #ff6b81; font-size: 9px; }
.deduction-list strong, .money-negative { color: #ff6b81; font-weight: 900; }
.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; color: var(--muted); }
.row-actions button { width: 34px; height: 28px; border: 1px solid #2c4262; border-radius: 8px; background: #1d2b42; color: #dce7fb; padding: 0; display: grid; place-items: center; }
.row-actions button:hover { background: #263957; color: #fff; }
.row-actions form button { color: #ff8da0; border-color: rgba(255,59,87,.25); background: rgba(255,59,87,.10); }
body.light-theme .row-actions button { background: #e8f0fb; color: #315174; border-color: #cad9ec; }
body.light-theme .row-actions form button { background: #ffe8ee; color: #b2233d; border-color: #f4bdc8; }

.legend { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; margin-bottom: 22px; }
.legend > div { display: flex; gap: 16px; flex-wrap: wrap; }
.legend span.status-cell { width: 20px; height: 20px; margin-right: 6px; }
.legend p { display: flex; align-items: center; gap: 7px; color: var(--muted); font-style: italic; font-size: 12px; }
.legend p .export-actions { margin-left: 8px; font-style: normal; }
.matrix-card { overflow: auto; max-height: 840px; overscroll-behavior: contain; }
.matrix-table { width: 100%; min-width: 1584px; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.matrix-table th, .matrix-table td { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-align: center; height: 52px; }
.matrix-table th { background: #111722; color: var(--muted); font-size: 11px; }
.matrix-table th:not(.sticky), .matrix-table td:not(.sticky) { width: 44px; }
.matrix-table .sticky { position: sticky; left: 0; z-index: 2; background: var(--panel); width: 220px; min-width: 220px; max-width: 220px; text-align: left; padding: 0 14px; }
.matrix-table thead th { position: sticky; top: 0; z-index: 4; }
.matrix-table tbody .sticky { z-index: 5; }
.matrix-table thead .sticky { left: 0; z-index: 6; background: #111722; }
.matrix-person { line-height: 1.18; }
.matrix-person-wrap { display: flex; align-items: center; gap: 9px; min-width: 0; }
.matrix-person-wrap > div { min-width: 0; }
.matrix-avatar { width: 30px; height: 30px; font-size: 10px; }
.matrix-person b { display: block; max-width: 188px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 12px; font-weight: 900; }
.matrix-person > span, .matrix-person-wrap > div > span { display: block; margin-top: 4px; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .02em; }
body.light-theme .matrix-table tbody .sticky { background: #ffffff; }
body.light-theme .matrix-table thead .sticky { background: #f4f7fb; }
body.light-theme .matrix-table tbody .sticky { box-shadow: 6px 0 14px rgba(22,34,51,.04); }
body.light-theme .matrix-person b { color: #172033; }
body.light-theme .matrix-person > span,
body.light-theme .matrix-person-wrap > div > span { color: #60728c; }
.empty-row, .matrix-empty { height: 96px !important; color: var(--muted); font-weight: 900; text-align: center !important; background: rgba(255,255,255,.015); }
div.empty-row { display: flex; align-items: center; justify-content: center; min-height: 96px; border: 1px dashed var(--line); border-radius: 8px; }
body.light-theme .empty-row, body.light-theme .matrix-empty { background: #f7f9fc; }
.modal-warning { margin: 0 0 12px; padding: 10px 12px; border: 1px solid rgba(255,59,87,.28); border-radius: 8px; color: #ff8da0; background: rgba(255,59,87,.10); font-weight: 800; line-height: 1.45; }
body.light-theme .modal-warning { color: #b4233c; background: #fff0f3; border-color: #f6c1cc; }
.day-weekend { color: var(--red) !important; }
.day-holiday { background: rgba(255,153,0,.08) !important; color: var(--amber) !important; }
.matrix-cell { cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; }
.matrix-cell:hover { background: rgba(0,184,169,.035); box-shadow: inset 0 0 0 1px rgba(0,184,169,.16); }
.matrix-cell.day-weekend { background: rgba(255,59,87,.025); }
.matrix-cell.day-weekend:hover { background: rgba(255,59,87,.06); box-shadow: inset 0 0 0 1px rgba(255,59,87,.15); }
.matrix-cell.day-holiday { background: rgba(255,153,0,.045); }
.matrix-cell.day-holiday:hover { background: rgba(255,153,0,.075); box-shadow: inset 0 0 0 1px rgba(255,153,0,.18); }
.matrix-cell-locked { opacity: .38; cursor: not-allowed; background: rgba(15,23,42,.24); }
.matrix-cell-exited { background: rgba(6,182,212,.035); }
.matrix-cell-locked:hover { box-shadow: none; background: rgba(15,23,42,.24); }
.matrix-cell-exited:hover { background: rgba(6,182,212,.035); }
.matrix-cell-locked:hover .status-cell { transform: none; filter: none; box-shadow: none; }
.status-cell { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid; font-size: 11px; font-weight: 900; position: relative; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease; }
.matrix-cell:hover .status-cell { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.matrix-cell:hover .status-cell:not(.s-empty) { box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 3px rgba(255,255,255,.025); }
body.light-theme .matrix-cell:hover { background: rgba(0,126,116,.055); box-shadow: inset 0 0 0 1px rgba(0,126,116,.14); }
body.light-theme .matrix-cell:hover .status-cell { box-shadow: 0 8px 18px rgba(27,39,60,.13); }
.s-empty { color: var(--faint); background: #0d1420; border-color: #1b2940; }
.s-G { color: var(--green); background: rgba(0,208,132,.14); border-color: rgba(0,208,132,.3); }
.s-X { color: var(--red); background: rgba(255,59,87,.12); border-color: rgba(255,59,87,.28); }
.s-UI-U { color: var(--amber); background: rgba(255,153,0,.12); border-color: rgba(255,153,0,.28); }
.s-UI-P { color: var(--teal-2); background: rgba(0,184,169,.12); border-color: rgba(0,184,169,.28); }
.s-R { color: #a855f7; background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.28); }
.s-YG { color: #06b6d4; background: rgba(6,182,212,.12); border-color: rgba(6,182,212,.28); }
.s-HT { color: #c7d2fe; background: rgba(100,116,139,.28); border-color: rgba(148,163,184,.45); }
.s-RTG { color: #7dd3fc; background: rgba(6,182,212,.16); border-color: rgba(125,211,252,.36); font-size: 9px; }
.s-RTX { color: #cbd5e1; background: rgba(71,85,105,.22); border-color: rgba(148,163,184,.34); font-size: 9px; }
body.light-theme .s-empty {
  color: #60728c;
  background: #eef3f8;
  border-color: #d4e0ec;
}
body.light-theme .matrix-cell-locked {
  opacity: 1;
  background: #f3f7fb;
}
body.light-theme .matrix-cell-locked .s-empty {
  color: #718198;
  background: #e7edf4;
  border-color: #d2deea;
}
body.light-theme .s-HT {
  color: #4b5f7a;
  background: #e3e9f2;
  border-color: #c7d3e3;
}
body.light-theme .s-RTG {
  color: #036981;
  background: #dff7fb;
  border-color: #9ee3ef;
}
body.light-theme .s-RTX {
  color: #52657d;
  background: #e8edf3;
  border-color: #cfd9e6;
}
.ot-stack { position: absolute; inset: -6px -6px -6px auto; pointer-events: none; }
.ot-chip {
  position: absolute;
  right: 0;
  width: 23px;
  min-height: 15px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(255,255,255,.22);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 7px 16px rgba(0,0,0,.24);
}
.ot-chip small { font-size: 7px; font-weight: 950; line-height: 1; }
.ot-hour { top: 0; }
.ot-minute { bottom: 0; }
.ot-hour:only-child,
.ot-minute:only-child { top: 0; bottom: auto; }
.ot-amber { background: #ff9900; color: #111827; }
.ot-blue { background: #00b8a9; color: #06201d; }
.ot-danger { background: #ff3b57; color: #ffffff; }
body.light-theme .ot-chip {
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 7px 16px rgba(22,34,51,.18);
}
.holiday-inline { color: #7dd3fc; font-weight: 900; }
.rtg-pay { display: inline-grid; gap: 2px; margin-top: 4px; color: #7dd3fc; font-size: 10px; font-weight: 900; }
.rtg-pay strong { color: #7dd3fc; }

.pay-metrics { grid-template-columns: repeat(5, minmax(0,1fr)); }
.pay-metrics article { min-height: 74px; display: block; padding: 15px; }
.pay-metrics strong { font-size: clamp(16px, 1.35vw, 20px); }
.pay-metrics.compact { grid-template-columns: repeat(4, minmax(0,1fr)); }
.advance-metrics article { background: linear-gradient(180deg, rgba(0,184,169,.055), var(--panel)); }
.advance-card .filters { background: linear-gradient(90deg, rgba(0,184,169,.05), transparent); }
.advance-table td:nth-child(4) { white-space: nowrap; }
.advance-table td:nth-child(5) { max-width: 340px; overflow-wrap: anywhere; color: var(--muted); font-weight: 700; }
body.light-theme .advance-metrics article { background: linear-gradient(180deg, #ffffff, #f7fbff); }
body.light-theme .advance-card .filters { background: linear-gradient(90deg, #f5fbff, #ffffff); }
.report-toolbar { display: grid; grid-template-columns: 180px 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.report-toolbar label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 900; }
.report-toolbar select { height: 38px; border: 1px solid #24334a; border-radius: 10px; background-color: #0d1420; color: #e8eef9; padding: 0 12px; font-weight: 900; }
.native-report-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.report-multi-picker { position: relative; min-width: 0; }
.report-picker-button { width: 100%; height: 38px; border: 1px solid #24334a; border-radius: 10px; background: #0d1420; color: #e8eef9; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 900; text-align: left; }
.report-picker-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-picker-button i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; flex: 0 0 8px; }
.report-multi-picker.open .report-picker-button { border-color: rgba(0,184,169,.55); box-shadow: 0 0 0 3px rgba(0,184,169,.08); }
.report-multi-picker.open .report-picker-button i { transform: rotate(225deg) translate(-2px,-1px); }
.report-picker-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 230px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #0b111a; box-shadow: 0 18px 45px rgba(0,0,0,.38); padding: 8px; display: none; }
.report-multi-picker.open .report-picker-menu { display: grid; gap: 4px; }
.report-picker-search { width: 100%; min-width: 0; height: 34px; border: 1px solid #24334a; border-radius: 9px; background: #0d1420; color: var(--text); padding: 0 10px; margin-bottom: 4px; font-weight: 850; display: block; }
.report-picker-group { display: grid; gap: 4px; }
.report-picker-group.picker-hidden, .report-picker-menu label.picker-hidden { display: none !important; }
.report-picker-group > b { padding: 7px 8px 3px; color: var(--faint); font-size: 10px; font-weight: 950; text-transform: uppercase; }
.report-picker-menu label { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; border-radius: 8px; color: var(--muted); font-size: 12px; cursor: pointer; }
.report-picker-menu label:hover { background: rgba(255,255,255,.04); color: var(--text); }
.report-picker-menu label input { width: 15px; height: 15px; accent-color: var(--teal); flex: 0 0 auto; }
.report-picker-menu input:checked + span { color: var(--teal-2); }
.report-picker-menu label.report-picker-exited span { color: #ff8fa3; }
.report-picker-menu label.report-picker-exited span::after { content: "İşten ayrıldı"; margin-left: 8px; padding: 2px 6px; border-radius: 999px; background: rgba(255,59,87,.12); color: #ff9aad; font-size: 9px; font-weight: 950; text-transform: uppercase; }
body.light-theme .report-toolbar select { background: #f8fbff; border-color: #cfd9e6; color: #172033; }
body.light-theme .report-picker-button { background: #f8fbff; border-color: #cfd9e6; color: #172033; }
body.light-theme .report-picker-menu { background: #ffffff; border-color: #cfd9e6; box-shadow: 0 18px 45px rgba(22,34,51,.15); }
body.light-theme .report-picker-search { background: #f8fbff; border-color: #cfd9e6; color: #172033; }
body.light-theme .report-picker-menu label:hover { background: #eef5fb; }
.report-actions { display: inline-flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.report-print-area { overflow: hidden; }
.report-metrics { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.report-metrics article { min-height: 94px; border-radius: 14px; }
.report-metrics strong { font-size: clamp(18px, 1.45vw, 24px); white-space: normal; }
.report-metrics article:nth-child(5), .report-metrics article:nth-child(6) { grid-column: span 1; }
.report-charts { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(320px, .95fr) minmax(380px, 1.1fr); gap: 14px; margin: 0 0 14px; }
.report-charts:empty { display: none; margin: 0; }
.report-charts article { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: linear-gradient(180deg, rgba(18,25,37,.96), rgba(14,20,30,.96)); overflow: hidden; }
.report-charts article.wide { grid-column: span 1; }
.report-charts article.full { grid-column: 1 / -1; }
.report-charts h4, .report-visuals h4 { margin: 0 0 10px; color: var(--text); font-size: 13px; }
.apex-host { min-height: 258px; }
.apex-host.trend { min-height: 255px; }
.apex-host.department { min-height: 318px; }
.report-donut-card .apex-host { min-height: 300px; }
.report-donut-card .apex-host { position: relative; }
.donut-center-value { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(38%, 132px); min-height: 64px; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; pointer-events: none; overflow: hidden; }
.donut-center-value span { display: block; width: 100%; color: var(--muted); font-size: 10px; font-weight: 900; line-height: 1.05; white-space: normal; overflow-wrap: anywhere; }
.donut-center-value b { display: block; width: 100%; max-width: 100%; color: var(--donut-accent, var(--green)); font-size: clamp(12px, .82vw, 16px); font-weight: 900; line-height: 1.08; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.donut-center-label + .donut-center-amount { margin-top: 1px; }
.report-bars-card .apex-host { min-height: 300px; }
.report-mini-metrics { padding: 12px !important; }
.report-mini-grid { height: 100%; display: grid !important; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; }
.report-mini-grid article { min-height: 82px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgba(9,15,24,.42); display: grid; align-content: center; }
.report-mini-grid span { color: var(--faint); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.report-mini-grid strong { margin-top: 8px; color: var(--text); font-size: clamp(17px, 1.25vw, 22px); font-weight: 900; }
.report-mini-grid strong.cyan { color: var(--cyan); }
.report-mini-grid .metric-subline { margin-top: 5px; color: var(--amber); font-size: 10px; }
.report-mini-grid .exit-metric { background: linear-gradient(180deg, rgba(6,182,212,.1), rgba(9,15,24,.42)); border-color: rgba(6,182,212,.28); }
.report-mode-summary > .report-metrics { display: none; }
.report-charts article > h4 + p { color: var(--muted); font-size: 11px; font-weight: 900; }
.report-card .apex-host, .report-card .apex-host div { display: block; }
.report-card .apexcharts-legend { display: flex !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 12px; padding: 0 !important; overflow: visible !important; }
.report-card .apexcharts-legend-series { display: inline-flex !important; align-items: center; gap: 5px; margin: 0 6px !important; }
.report-card .apexcharts-tooltip { background: #101722 !important; border: 1px solid var(--line) !important; color: var(--text) !important; box-shadow: 0 12px 30px rgba(0,0,0,.35) !important; }
.report-card .apexcharts-tooltip-title { background: #0b111a !important; border-bottom: 1px solid var(--line) !important; color: var(--text) !important; }
.report-card .apexcharts-datalabel-label { fill: var(--muted) !important; font-size: 11px !important; font-weight: 900 !important; }
.report-card .apexcharts-datalabel-value { fill: var(--text) !important; font-size: 18px !important; font-weight: 900 !important; }
.report-charts article span { color: var(--text); white-space: nowrap; }
.report-charts i { display: block; height: 8px; border-radius: 999px; margin-top: 10px; background: var(--teal); }
.report-charts i.amber { background: var(--amber); }
.report-charts i.red { background: var(--red); }
.report-charts i.green { background: var(--green); }
.report-charts i.cyan { background: var(--cyan); }
.report-donut { width: min(260px, 100%); aspect-ratio: 1; border-radius: 999px; margin: 0 auto; display: grid; place-items: center; }
.report-donut > div { width: 52%; aspect-ratio: 1; border-radius: 999px; background: var(--panel); display: grid; place-items: center; text-align: center; padding: 12px; }
.report-donut span { color: var(--muted); font-size: 10px; font-weight: 900; }
.report-donut b { color: var(--text); font-size: 18px; }
.report-legend { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.report-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 900; }
.report-legend i { width: 10px; height: 10px; border-radius: 999px; margin: 0; }
.stack-bars, .department-bars { display: grid; gap: 10px; }
.stack-bars > div, .department-bars > div { display: grid; grid-template-columns: 100px 1fr auto; gap: 10px; align-items: center; color: var(--muted); font-size: 11px; font-weight: 900; }
.stack-bars em, .department-bars em { display: grid; gap: 2px; justify-items: end; color: var(--text); font-style: normal; }
.stack-bars em small, .department-bars em small { color: var(--cyan); font-size: 9px; font-weight: 900; white-space: nowrap; }
.stack-bars span { height: 16px; border-radius: 999px; background: #0b111a; overflow: hidden; display: flex; }
.stack-bars i { height: 100%; margin: 0; border-radius: 0; min-width: 2px; }
.department-bars span { height: 28px; border-radius: 6px; background: linear-gradient(90deg, var(--green) var(--w), rgba(255,255,255,.04) var(--w)); border: 1px solid var(--line); }
.trend-bars { height: 160px; display: flex !important; align-items: end; justify-content: space-around !important; gap: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.trend-bars span { height: 100%; min-width: 44px; display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; color: var(--muted); }
.trend-bars i { width: 34px; background: linear-gradient(180deg, var(--green), rgba(0,208,132,.18)); border-radius: 8px 8px 0 0; margin: 0; }
.trend-bars b { margin-top: 6px; color: var(--muted); font-size: 11px; }
.report-visuals { margin-bottom: 18px; }
.report-mode-personnel .report-visuals { margin-top: 4px; }
.person-report-grid { display: grid; grid-template-columns: repeat(3, minmax(360px, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: auto; max-height: 620px; }
.person-report-card { min-width: 0; padding: 12px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,.012); display: grid; grid-template-columns: minmax(130px, .95fr) minmax(92px, .62fr) minmax(132px, .9fr); gap: 10px; align-items: stretch; }
.person-report-left { min-width: 0; display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.person-report-head { display: flex; align-items: center; gap: 9px; margin-bottom: 0; }
.person-report-head b { color: var(--text); display: block; font-size: 12px; }
.person-report-head small { color: var(--muted); font-weight: 800; }
.mini-finance-bars { height: 96px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 6px; margin-bottom: 0; }
.mini-finance-bars > span { position: relative; min-width: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 4px; align-items: end; color: var(--muted); font-size: 9px; font-weight: 900; }
.bar-track { width: 100%; height: 58px; display: flex; align-items: flex-end; justify-content: center; border-radius: 5px; background: rgba(16,26,41,.55); overflow: hidden; }
.bar-track i { display: block; width: 100%; height: var(--h); min-height: 3px; background: var(--green); border-radius: 4px 4px 0 0; transition: height .18s ease, filter .14s ease, box-shadow .14s ease; }
.mini-finance-bars > span:hover .bar-track i, .mini-finance-bars > span:focus .bar-track i { filter: brightness(1.14); box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 8px 18px rgba(0,0,0,.22); }
.mini-finance-bars .amber .bar-track i { background: var(--amber); }
.mini-finance-bars .red .bar-track i { background: var(--red); }
.mini-finance-bars .orange .bar-track i { background: #ff7a1a; }
.mini-finance-bars .cyan .bar-track i { background: #06b6d4; }
.mini-finance-bars .green .bar-track i { background: var(--green); }
.mini-finance-bars b { display: block; min-height: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.mini-finance-bars em { position: absolute; left: 50%; bottom: -20px; transform: translate(-50%, 4px); z-index: 4; min-width: max-content; max-width: 150px; border: 1px solid var(--line); border-radius: 8px; background: #0b111a; padding: 4px 7px; color: var(--text); font-style: normal; font-size: 10px; font-weight: 900; opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; }
.mini-finance-bars > span:hover em, .mini-finance-bars > span:focus em { opacity: 1; transform: translate(-50%, 0); }
body.light-theme .bar-track { background: #eaf1f9; }
body.light-theme .mini-finance-bars em { background: #ffffff; color: #172033; border-color: #cfd9e6; box-shadow: 0 10px 26px rgba(22,34,51,.14); }
.person-report-facts { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 34px 0 0; border-left: 1px solid var(--line); padding-left: 10px; }
.person-report-facts span { position: relative; border: 1px solid var(--line); border-radius: 9px; padding: 9px 8px 9px 34px; color: var(--muted); font-size: 10px; font-weight: 900; min-height: 48px; display: grid; align-content: center; }
.person-report-facts span::before { content: "h"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 7px; background: rgba(255,153,0,.14); border: 1px solid rgba(255,153,0,.35); color: var(--amber); display: grid; place-items: center; font-size: 11px; font-weight: 900; line-height: 1; }
.person-report-facts .fact-advance::before { content: "-"; color: var(--red); font-weight: 900; background: rgba(255,59,87,.14); border-color: rgba(255,59,87,.35); }
.person-report-facts .fact-net::before { content: "₺"; color: var(--green); font-weight: 900; background: rgba(0,208,132,.12); border-color: rgba(0,208,132,.32); }
.person-report-facts b { color: var(--amber); display: block; font-size: 16px; line-height: 1; }
.person-report-facts .fact-advance b { color: var(--red); }
.person-report-facts .fact-net b { color: var(--green); }
.report-avatar { overflow: hidden; flex: 0 0 32px; }
.report-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.report-avatar.has-photo { background: #0b111a; border: 1px solid rgba(0,184,169,.35); }
.person-exit-badge { width: fit-content; max-width: 100%; margin-top: 3px; border: 1px solid rgba(6,182,212,.3); border-radius: 999px; background: rgba(6,182,212,.1); color: var(--cyan); padding: 3px 7px; display: inline-flex; font-size: 9px; font-style: normal; font-weight: 900; line-height: 1; white-space: nowrap; }
.person-report-calendar { min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 6px; }
.person-report-calendar .btn { width: 100%; min-width: 0; height: 28px; justify-self: stretch; padding: 0 10px; font-size: 11px; border-radius: 8px; }
.mini-calendar { margin: 0; color: var(--muted); }
.mini-calendar strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 11px; text-align: center; }
.mini-calendar div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mini-calendar small, .mini-calendar span { display: grid; place-items: center; min-height: 17px; border-radius: 999px; font-size: 8px; font-weight: 900; }
.mini-calendar span { background: #101a29; color: var(--muted); }
.mini-calendar span.green { background: rgba(0,208,132,.18); color: var(--green); }
.mini-calendar span.red { background: rgba(255,59,87,.18); color: var(--red); }
.mini-calendar span.purple { background: rgba(167,139,250,.18); color: #a78bfa; }
.mini-calendar span.cyan { background: rgba(0,188,212,.18); color: var(--cyan); }
.mini-calendar span.amber { background: rgba(255,153,0,.18); color: var(--amber); }
.mini-calendar span.muted { background: rgba(127,145,173,.16); color: var(--muted); }
.report-mode-department .report-charts { grid-template-columns: minmax(560px, 1fr) minmax(170px, .18fr) minmax(190px, .2fr); align-items: stretch; }
.report-mode-department .report-card { min-height: 318px; }
.report-exit-summary { margin: 0 0 14px; border: 1px solid rgba(6,182,212,.28); border-radius: 12px; background: linear-gradient(90deg, rgba(6,182,212,.12), rgba(0,184,169,.04)); padding: 10px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.report-exit-summary span, .department-exit-summary span { min-width: 0; color: var(--muted); font-size: 11px; font-weight: 900; }
.report-exit-summary b, .department-exit-summary b { display: block; color: var(--cyan); font-size: 15px; line-height: 1.15; overflow-wrap: anywhere; }
.report-exit-summary .metric-subline { margin-top: 4px; color: var(--amber); font-size: 10px; }
.report-exit-summary .red b, .department-exit-summary span:nth-child(n+3) b { color: var(--red); }
.department-exit-summary { margin-top: 8px; border-top: 1px solid var(--line-soft); padding-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.report-resigned-inline, .report-resigned-net { display: block; margin-top: 4px; color: var(--cyan); font-size: 10px; font-weight: 900; }
.report-resigned-net { color: var(--green); }
.person-report-facts .fact-exit::before { content: "↘"; color: var(--cyan); background: rgba(6,182,212,.14); border-color: rgba(6,182,212,.35); }
.person-report-facts .fact-exit b { color: var(--cyan); }
.department-main-card { overflow: hidden; }
.department-top-overtime, .department-absence-card { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; overflow: hidden; }
.department-top-overtime h4 { font-size: 13px; line-height: 1.15; max-width: 100%; white-space: normal; }
.department-top-overtime .apex-host.mini { min-height: 86px; height: 86px; max-width: 100%; overflow: hidden; }
.department-top-overtime .apexcharts-canvas, .department-top-overtime .apexcharts-svg { max-width: 100% !important; }
.department-top-list { display: grid; gap: 8px; align-content: start; }
.department-top-list span { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 900; }
.department-top-list i { grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(0,208,132,.12); color: var(--green); }
.department-top-list span:nth-child(2) i { background: rgba(255,153,0,.12); color: var(--amber); }
.department-top-list span:nth-child(3) i { background: rgba(6,182,212,.12); color: #06b6d4; }
.department-top-list .icon { width: 15px; height: 15px; }
.department-top-list b { color: var(--text); line-height: 1.1; }
.department-top-list em { grid-column: 2; color: var(--text); font-style: normal; font-weight: 900; }
.department-absence-card h4 span { color: var(--muted); font-size: 11px; }
.department-absence-summary { display: grid; gap: 12px; align-content: start; }
.department-absence-summary > strong { font-size: 30px; line-height: 1; }
.absence-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.absence-breakdown span { min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 8px; background: rgba(255,255,255,.018); display: grid; gap: 4px; }
.absence-breakdown b { color: var(--muted); font-size: 10px; }
.absence-breakdown em { color: var(--text); font-style: normal; font-size: 12px; font-weight: 900; }
.absence-dept-list { display: grid; gap: 6px; }
.absence-dept-list span { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 900; }
.absence-dept-list b { color: var(--text); }
.absence-dept-list em { color: var(--red); font-style: normal; white-space: nowrap; }
.apex-custom-tip { min-width: 150px; display: grid; gap: 5px; padding: 8px; color: var(--text); font-size: 11px; font-weight: 900; }
.apex-custom-tip b { margin-bottom: 3px; }
.apex-custom-tip span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.apex-custom-tip i { width: 9px; height: 9px; border-radius: 2px; margin: 0; flex: 0 0 9px; }
.apex-custom-tip i.green { background: var(--green); }
.apex-custom-tip i.amber { background: var(--amber); }
.apex-custom-tip i.red { background: var(--red); }
.apex-custom-tip i.muted { background: #64748b; }
.apex-custom-tip i.cyan { background: #06b6d4; }
body.light-theme .report-donut > div, body.light-theme .stack-bars span, body.light-theme .mini-calendar span { background: #f8fbff; }
body.light-theme .report-charts article { background: linear-gradient(180deg, #ffffff, #f8fbff); }
body.light-theme .report-mini-grid article { background: #ffffff; }
body.light-theme .report-card .apexcharts-tooltip { background: #ffffff !important; color: #172033 !important; border-color: #cfd9e6 !important; }
body.light-theme .report-card .apexcharts-tooltip-title { background: #f8fbff !important; color: #172033 !important; border-color: #cfd9e6 !important; }

.report-ready { min-height: 210px; border-style: dashed; display: grid; place-items: center; text-align: center; padding: 32px; color: var(--muted); }
.report-ready .icon { color: var(--teal); width: 34px; height: 34px; }
.report-ready h3 { color: white; margin: 8px 0 4px; }
.mysql-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }
.api-box { margin: 20px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #0c121a; display: grid; grid-template-columns: 1fr auto; gap: 12px; }
body.light-theme .api-box, body.light-theme .hint, body.light-theme .info-box, body.light-theme .permission-grid { background: #f8fbff; }
.api-box span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.api-fields { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }
.switch { position: relative; width: 44px; height: 24px; display: inline-flex; }
.switch input { opacity: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #263246; transition: .2s; }
.switch span::after { content: ""; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; border-radius: 50%; background: white; transition: .2s; }
.switch input:checked + span { background: var(--teal); }
.switch input:checked + span::after { transform: translateX(20px); }
.code-box { max-height: 310px; overflow: auto; padding: 16px; border-radius: 8px; border: 1px solid var(--line); background: #060a0f; color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 10px; }
.code-box.small { max-height: 260px; }
.security-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.security-switches { display: grid; gap: 10px; margin-top: 16px; }
.security-toggle { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(11,17,26,.62); }
.security-toggle.stealth { margin-top: 14px; }
.security-toggle span { display: grid; gap: 4px; }
.security-toggle b { color: var(--text); font-size: 13px; }
.security-toggle small { color: var(--muted); font-size: 11px; font-weight: 800; }
.security-toggle.locked { opacity: .78; }
.security-toggle.locked input { cursor: not-allowed; }
.security-protocol { position: relative; border: 1px solid var(--line); border-radius: 12px; background: rgba(11,17,26,.62); overflow: hidden; }
.security-protocol summary { min-height: 56px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.security-protocol summary::-webkit-details-marker { display: none; }
.protocol-title { display: grid; gap: 4px; min-width: 0; }
.protocol-title b { color: var(--text); font-size: 13px; }
.protocol-title small { color: var(--muted); font-size: 11px; font-weight: 800; }
.protocol-actions { position: absolute; right: 42px; top: 10px; min-height: 36px; display: inline-flex; align-items: center; gap: 10px; z-index: 2; }
.summary-arrow { color: var(--muted); font-weight: 900; transition: transform .16s ease; }
.security-protocol[open] .summary-arrow { transform: rotate(180deg); }
.security-protocol p { margin: 0; padding: 0 14px 13px; color: var(--muted); font-size: 12px; line-height: 1.55; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.security-protocol.locked { opacity: .82; }
.security-switch { flex: 0 0 44px; }
.security-switch input:disabled + span { opacity: .45; cursor: not-allowed; }
.help-dot { position: relative; width: 18px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(0,184,169,.12); border: 1px solid rgba(0,184,169,.28); color: var(--teal-2); font-size: 11px; font-weight: 900; font-style: normal; cursor: help; padding: 0; }
.help-dot[data-tooltip]::after { content: attr(data-tooltip); position: absolute; right: -8px; bottom: calc(100% + 10px); width: min(260px, 72vw); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0b111a; color: var(--text); box-shadow: 0 18px 45px rgba(0,0,0,.38); font-size: 11px; font-weight: 800; line-height: 1.45; text-align: left; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; z-index: 20; }
.help-dot[data-tooltip].open::after, .help-dot[data-tooltip]:hover::after { opacity: 1; transform: translateY(0); }
.security-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.security-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 900; }
.security-fields .full { grid-column: 1 / -1; }
.security-fields label > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.security-fields input { width: 100%; height: 38px; border-radius: 12px; border: 1px solid #233149; background: #0b111a; color: var(--text); padding: 0 12px; font-weight: 800; }
.security-fields input:disabled { opacity: .78; cursor: not-allowed; }
.security-fields small { color: var(--faint); font-size: 10px; line-height: 1.35; font-weight: 800; }
.holiday-api-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.holiday-api-box h4 { margin: 0; color: var(--text); font-size: 13px; }
.holiday-api-box label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 900; }
.holiday-api-box label span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.holiday-api-box input { width: 100%; height: 38px; border-radius: 12px; border: 1px solid #233149; background: #0b111a; color: var(--text); padding: 0 12px; font-weight: 800; }
.security-fields select { width: 100%; height: 38px; border-radius: 12px; border: 1px solid #233149; background: #0b111a; color: var(--text); padding: 0 12px; font-weight: 800; }
.log-filter-form { margin-top: 0; }
.log-filter-panel { margin-bottom: 18px; }
#sessionFilterForm.log-filter-form { grid-template-columns: minmax(220px, 1fr) 170px 150px auto; align-items: end; }
#sessionFilterForm .backup-submit-row { margin: 0; }
#logFilterForm.log-filter-form { grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; align-items: end; }
#logFilterForm .backup-submit-row { margin: 0; align-self: end; }
.log-results-card { margin-top: 0; }
.table-card.log-results-card { padding-top: 2px; }
.table-card.log-results-card > .panel-head { min-height: 58px; padding: 12px 18px 10px; margin: 0; border-bottom: 1px solid var(--line); align-items: center; }
.table-card.log-results-card > .panel-head h3 { margin: 0; display: inline-flex; align-items: center; gap: 10px; line-height: 1.2; }
.settings-tabbar { display: inline-flex; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #0d131c; margin: 0 0 18px; flex-wrap: wrap; }
.settings-tabbar button { height: 32px; border: 0; border-radius: 9px; padding: 0 14px; background: transparent; color: var(--muted); font-weight: 900; }
.settings-tabbar button.active { background: #079d90; color: #fff; }
.settings-tab-content { display: none; }
.settings-tab-content.active { display: block; }
.api-status-card { margin: 16px 0 4px; border: 1px solid var(--line); border-radius: 14px; background: #0b111a; padding: 14px; display: grid; gap: 5px; }
.api-status-card b { color: var(--text); font-size: 13px; }
.api-status-card span { color: var(--muted); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.api-status-card.checking { border-color: rgba(255,153,0,.35); background: rgba(255,153,0,.08); }
.api-status-card.ok { border-color: rgba(0,208,132,.35); background: rgba(0,208,132,.08); }
.api-status-card.ok b { color: var(--green); }
.api-status-card.error { border-color: rgba(255,59,87,.35); background: rgba(255,59,87,.08); }
.api-status-card.error b { color: var(--red); }
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 16px; }
.year-card { min-height: 74px; border: 1px solid var(--line); border-radius: 14px; background: #0b111a; padding: 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.year-card.active { border-color: rgba(0,184,169,.45); background: rgba(0,184,169,.09); }
.year-card form button { width: 100%; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 18px; font-weight: 950; text-align: left; }
.year-card.active form button { color: var(--teal-2); }
.year-edit { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: #111722; color: var(--muted); display: grid; place-items: center; }
.year-edit:hover { color: var(--teal-2); border-color: rgba(0,184,169,.35); }
.holiday-manual-form { display: grid; grid-template-columns: 180px minmax(180px, 1fr) minmax(180px, 1fr) auto; align-items: end; gap: 12px; margin-bottom: 16px; }
.holiday-manual-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 900; }
.holiday-manual-form input { width: 100%; height: 38px; border-radius: 12px; border: 1px solid #233149; background: #0b111a; color: var(--text); padding: 0 12px; font-weight: 800; }
.holiday-manual-form .btn { height: 38px; white-space: nowrap; }
.manual-source { background: rgba(0,184,169,.16); color: var(--teal-2); }
.compact-table td, .compact-table th { height: 44px; }
.table-scroll .data-table { min-width: 720px; }
body.light-theme .security-toggle, body.light-theme .security-protocol, body.light-theme .security-fields input, body.light-theme .security-fields select, body.light-theme .holiday-api-box input, body.light-theme .holiday-manual-form input { background: #f8fbff; border-color: #cfd9e6; color: #172033; }
body.light-theme .settings-tabbar { background: #f6f9fc; }
body.light-theme .api-status-card, body.light-theme .year-card { background: #f8fbff; border-color: #cfd9e6; }
body.light-theme .year-card.active { background: #e7f8f6; border-color: #a9e5dc; }
body.light-theme .year-edit { background: #ffffff; border-color: #cfd9e6; color: #52657d; }
body.light-theme .help-dot[data-tooltip]::after { background: #ffffff; border-color: #cfd9e6; color: #172033; box-shadow: 0 18px 45px rgba(22,34,51,.16); }

.modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8,12,17,.68); backdrop-filter: none; }
.modal { position: relative; z-index: 2; border: 1px solid #233149; border-radius: 16px; background: #10151e; box-shadow: 0 30px 90px rgba(0,0,0,.55); padding: 28px; animation: none; will-change: auto; }
.modal-sm { width: 420px; }
.modal-md { width: 560px; }
.modal-lg { width: min(1080px, calc(100vw - 40px)); }
.modal-xl { width: min(1180px, calc(100vw - 40px)); }
body.light-theme .modal { background: #ffffff; border-color: var(--line); }
.modal-close { position: absolute; right: 24px; top: 22px; border: 0; background: transparent; color: var(--muted); font-size: 25px; font-weight: 900; }
.modal h3 { margin: 0; font-size: 21px; }
.modal-line { height: 1px; background: var(--line); margin: 18px 0; }
.modal label { margin-top: 12px; }
.field-title { margin-top: 12px; color: var(--muted); font-size: 12px; font-weight: 900; }
.modal input, .modal select { height: 38px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.amber-label { color: var(--amber) !important; }
.red-label { color: var(--red) !important; }
.form-help { color: var(--muted); font-size: 12px; line-height: 1.45; }
#confirmDeleteDetails {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}
#confirmDeleteDetails:empty { display: none; }
#confirmDeleteDetails b { color: var(--text); font-size: 12px; }
#confirmDeleteDetails span { display: block; }
.file-field input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; height: 100%; padding: 0; }
.file-picker { position: relative; min-height: 38px; border: 1px solid #233149; border-radius: 14px; background: #0b111a; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 12px 5px 5px; overflow: hidden; }
.file-picker b { height: 28px; border-radius: 10px; background: rgba(0,184,169,.12); color: var(--teal-2); display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.file-picker em { min-width: 0; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-picker:hover { border-color: rgba(0,184,169,.45); }
body.light-theme .file-picker { background: #f8fbff; border-color: var(--line); }
.modal-submit { width: 100%; height: 36px; margin-top: 18px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.btn-danger { background: rgba(255,59,87,.9); color: white; }
#personnelSubmitBtn.edit, #deptSubmitBtn.edit, #adminSubmitBtn.edit { background: var(--amber); color: #111; }
.permission-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 374px; gap: 18px; align-items: stretch; }
.permission-form-layout.compact { grid-template-columns: minmax(260px, .72fr) minmax(340px, 1fr); }
.permission-form-main { min-width: 0; }
.permission-side { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: #0b111a; padding: 14px; display: flex; flex-direction: column; }
.permission-side .field-title { margin-bottom: 10px; color: var(--text); font-size: 13px; font-weight: 900; }
.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 180px; overflow: auto; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #0b111a; }
.permission-grid-modern { grid-template-columns: 1fr; flex: 1; max-height: min(64vh, 560px); overflow: auto; padding: 0 4px 0 0; border: 0; background: transparent; gap: 14px; }
.permission-grid label { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; min-height: 30px; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.permission-grid input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; flex: 0 0 17px; border: 1px solid #36506f; border-radius: 5px; background: #121b28; display: grid; place-items: center; }
.permission-grid input[type="checkbox"]:checked { border-color: var(--teal); background: var(--teal); }
.permission-grid input[type="checkbox"]:checked::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #061014; border-bottom: 2px solid #061014; transform: rotate(-45deg) translateY(-1px); }
.permission-grid input[type="checkbox"]:focus-visible { outline: 2px solid rgba(0,184,169,.35); outline-offset: 2px; }
.permission-module { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; display: grid; gap: 10px; align-content: start; }
.permission-grid-modern .permission-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.permission-grid-modern .permission-actions legend, .permission-grid-modern .permission-menus legend { grid-column: 1 / -1; }
.permission-grid-modern .permission-menus { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1; }
.permission-module legend { padding: 0 6px; color: var(--text); font-size: 12px; font-weight: 900; }
.backup-page-head span { color: #008575; font-size: 12px; font-weight: 950; letter-spacing: 1.8px; }
.backup-page-head h2 { margin-top: 8px; font-size: 32px; }
.backup-layout { display: grid; gap: 18px; }
.backup-hero { min-height: 168px; border-radius: 18px; padding: 28px; background: linear-gradient(105deg, #145c54, #12b9a8); color: #ffffff; box-shadow: 0 22px 58px rgba(0,0,0,.20); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.backup-hero h3 { margin: 0 0 12px; font-size: 25px; color: #ffffff; }
.backup-hero p { margin: 0; color: rgba(255,255,255,.84); font-weight: 800; }
.backup-hero-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.backup-hero-actions form { margin: 0; }
.backup-hero-actions .btn { min-height: 44px; border: 0; border-radius: 12px; background: #ffffff; color: #172033; display: inline-flex; align-items: center; gap: 9px; font-weight: 950; padding: 0 18px; text-decoration: none; }
.backup-hero-actions .icon { width: 17px; height: 17px; }
.backup-hero-icon { width: 76px; height: 76px; border: 1px solid rgba(255,255,255,.28); border-radius: 24px; background: rgba(255,255,255,.15); display: grid; place-items: center; flex: 0 0 auto; }
.backup-hero-icon .icon { width: 36px; height: 36px; color: #ffffff; }
.backup-summary-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.backup-summary-cards article { min-height: 168px; border: 1px solid var(--line); border-radius: 16px; background: #0b111a; padding: 18px; box-shadow: 0 16px 42px rgba(0,0,0,.13); display: grid; gap: 14px; align-content: start; }
.backup-summary-cards h3 { margin: 0; font-size: 17px; color: var(--text); }
.backup-summary-cards p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.45; }
.backup-summary-cards article > div { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.backup-summary-cards b { color: var(--text); font-size: 13px; }
.backup-summary-cards small { color: var(--muted); font-size: 11px; font-weight: 850; grid-column: 1; }
.backup-summary-cards .switch { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.backup-summary-cards select { width: 100%; height: 42px; border-radius: 12px; border: 1px solid #233149; background: #0b111a; color: var(--text); padding: 0 12px; font-weight: 900; }
.backup-health { align-self: end; justify-self: start; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 950; }
.backup-health-stack { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.backup-health.ok, .backup-state-pill.ok { background: rgba(0,208,132,.16); color: var(--green); }
.backup-health.warn, .backup-state-pill.warn { background: rgba(255,153,0,.14); color: var(--amber); }
.backup-state-pill { min-width: 68px; height: 30px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 950; }
.backup-settings-form { display: grid; gap: 16px; }
.backup-panels { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr); gap: 18px; align-items: start; }
.backup-card { min-width: 0; }
.backup-overview { padding: 16px; }
.backup-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.backup-status-grid span { min-height: 74px; border: 1px solid var(--line); border-radius: 12px; background: #0b111a; padding: 12px; display: grid; align-content: center; gap: 6px; }
.backup-status-grid b { color: var(--muted); font-size: 11px; }
.backup-status-grid strong { color: var(--teal-2); font-size: 16px; }
.backup-status-grid small { color: var(--faint); font-size: 10px; font-weight: 800; line-height: 1.35; }
.backup-inline-form { margin-top: 16px; }
.backup-master-toggle { margin-top: 12px; }
.backup-section-title { margin-top: 18px; display: grid; gap: 4px; }
.backup-section-title b { color: var(--text); font-size: 13px; }
.backup-section-title span { color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.45; }
.backup-preset-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.backup-preset-list label { min-height: 42px; border: 1px solid var(--line); border-radius: 12px; background: rgba(11,17,26,.62); display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--muted); font-size: 12px; font-weight: 900; cursor: pointer; }
.backup-preset-list input { width: 16px; height: 16px; accent-color: var(--teal); }
.backup-preset-list label:has(input:checked) { border-color: rgba(0,184,169,.5); background: rgba(0,184,169,.10); color: var(--text); }
.backup-retention-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; margin-top: 14px; }
.backup-retention-row.compact { grid-template-columns: minmax(0, 140px); }
.backup-retention-row label, .backup-remote-table label, .backup-muted-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 900; }
.backup-retention-row input, .backup-retention-row select, .backup-remote-table input, .backup-remote-table select, .backup-muted-grid input { width: 100%; height: 38px; border-radius: 12px; border: 1px solid #233149; background: #0b111a; color: var(--text); padding: 0 12px; font-weight: 800; }
.backup-retention-row input:disabled, .backup-retention-row select:disabled, .backup-preset-list input:disabled + span, .backup-submit-row .btn:disabled, .backup-card > .btn:disabled { opacity: .48; cursor: not-allowed; filter: grayscale(.18); }
.backup-muted-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.backup-muted-grid .full { grid-column: 1 / -1; }
.backup-remote-table { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(11,17,26,.62); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.backup-remote-table .full { grid-column: 1 / -1; }
.backup-inline-switch { width: 44px; align-self: end; }
.backup-method-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.backup-method-cards span { min-height: 76px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,184,169,.07); padding: 12px; display: none; align-content: center; gap: 5px; }
.backup-method-cards span.active { display: grid; }
.backup-method-cards b { color: var(--text); font-size: 12px; }
.backup-method-cards small { color: var(--muted); font-size: 11px; line-height: 1.45; font-weight: 800; }
.backup-submit-row { display: flex; justify-content: flex-end; }
.backup-submit-row.split { justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.backup-submit-row.split .btn { min-width: 180px; }
.backup-disabled .backup-remote-table, .backup-disabled .backup-method-cards, .backup-disabled .backup-preset-list, .backup-disabled .backup-retention-row, .backup-disabled .backup-manual-box, .backup-summary-cards article.disabled { opacity: .48; filter: grayscale(.16); }
.backup-disabled .backup-remote-table, .backup-disabled .backup-preset-list, .backup-disabled .backup-retention-row, .backup-disabled .backup-manual-box { pointer-events: none; }
.backup-summary-cards article.disabled select { pointer-events: none; opacity: .55; }
.backup-manual-box { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(11,17,26,.62); padding: 12px; display: grid; gap: 8px; }
.backup-manual-box b { color: var(--text); font-size: 12px; }
.backup-manual-box p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.backup-manual-box code { display: block; padding: 10px; border-radius: 10px; background: #050a10; color: var(--teal-2); font-size: 11px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
body.light-theme .permission-side, body.light-theme .backup-status-grid span { background: #f8fbff; border-color: #cfd9e6; }
body.light-theme .backup-summary-cards article { background: #ffffff; border-color: #dce5ef; box-shadow: 0 18px 45px rgba(22,34,51,.08); }
body.light-theme .backup-summary-cards select { background: #ffffff; border-color: #d7e2ee; color: #172033; }
body.light-theme .backup-preset-list label { background: #f8fbff; border-color: #cfd9e6; }
body.light-theme .backup-retention-row input, body.light-theme .backup-retention-row select, body.light-theme .backup-remote-table input, body.light-theme .backup-remote-table select, body.light-theme .backup-muted-grid input { background: #ffffff; border-color: #cfd9e6; color: #172033; }
body.light-theme .backup-remote-table { background: #f8fbff; border-color: #cfd9e6; }
body.light-theme .backup-method-cards span { background: #edfdf9; border-color: #bbe9df; }
body.light-theme .backup-manual-box { background: #f8fbff; border-color: #cfd9e6; }
body.light-theme .backup-manual-box code { background: #ffffff; color: #007e74; }
body.light-theme .permission-grid input[type="checkbox"] { background: #ffffff; border-color: #bdd0e5; }
.system-stop-card { max-width: 640px; }
.system-stop-card .login-mark { background: rgba(255,59,87,.15); color: var(--red); border-color: rgba(255,59,87,.35); }
.data-table input.log-select,
.data-table input.session-select,
.data-table input.ban-select,
.data-table input#logSelectAll,
.data-table input#sessionSelectAll,
.data-table input#banSelectAll {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid #36506f;
  border-radius: 5px;
  background: #101823;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  cursor: pointer;
}
.data-table input.log-select:checked,
.data-table input.session-select:checked,
.data-table input.ban-select:checked,
.data-table input#logSelectAll:checked,
.data-table input#sessionSelectAll:checked,
.data-table input#banSelectAll:checked {
  border-color: var(--teal);
  background: var(--teal);
}
.data-table input.log-select:checked::after,
.data-table input.session-select:checked::after,
.data-table input.ban-select:checked::after,
.data-table input#logSelectAll:checked::after,
.data-table input#sessionSelectAll:checked::after,
.data-table input#banSelectAll:checked::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #061014;
  border-bottom: 2px solid #061014;
  transform: rotate(-45deg) translateY(-1px);
}
body.light-theme .data-table input.log-select,
body.light-theme .data-table input.session-select,
body.light-theme .data-table input.ban-select,
body.light-theme .data-table input#logSelectAll,
body.light-theme .data-table input#sessionSelectAll,
body.light-theme .data-table input#banSelectAll {
  background: #ffffff;
  border-color: #bdd0e5;
}
.info-box { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #0b111a; color: var(--muted); font-size: 12px; }
#puantajPersonInfo {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 13px 16px;
  border-color: #243650;
  background: linear-gradient(180deg, rgba(15,22,32,.96), rgba(11,17,26,.96));
}
.puantaj-person-line { display: flex; align-items: baseline; gap: 4px; color: var(--muted); font-size: 14px; font-weight: 800; }
.puantaj-person-line b { color: var(--text); font-size: 14px; font-weight: 900; }
.puantaj-person-sub { color: var(--muted); font-size: 12px; font-weight: 800; }
.puantaj-person-sub span { color: #7f91ad; }
body.light-theme #puantajPersonInfo { background: linear-gradient(180deg, #ffffff, #f8fbff); border-color: var(--line); }
.overtime-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.overtime-inputs label { min-width: 0; }

.person-detail-modal { padding: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); overflow: hidden; max-height: calc(100vh - 44px); }
.person-detail-modal .modal-close { right: 18px; top: 14px; width: 34px; height: 34px; border-radius: 10px; background: #101823; border: 1px solid var(--line); display: grid; place-items: center; line-height: 1; }
body.light-theme .person-detail-modal .modal-close { background: #f8fbff; }
.person-profile { padding: 28px; border-right: 1px solid var(--line); text-align: center; overflow: auto; }
.detail-avatar { width: 70px; height: 70px; border-radius: 999px; display: grid; place-items: center; margin: 0 auto 18px; background: rgba(0,184,169,.16); color: var(--teal-2); font-size: 25px; font-weight: 900; }
.detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.detail-avatar.has-photo { background: #0b111a; overflow: hidden; border: 1px solid rgba(0,184,169,.35); }
.person-profile h3 { font-size: 18px; margin: 0 0 10px; }
.detail-chip { display: inline-flex; padding: 6px 16px; border: 1px solid rgba(0,184,169,.6); border-radius: 999px; color: var(--teal-2); font-weight: 900; font-size: 12px; }
.detail-block { margin-top: 18px; text-align: left; display: grid; gap: 8px; color: var(--muted); }
.detail-block small, .detail-role small { color: var(--muted); font-weight: 900; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.detail-block b, .detail-role b { color: var(--text); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.detail-contact-list { display: grid; gap: 6px; }
.detail-contact-list b { min-height: 30px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(255,255,255,.025); padding: 7px 9px; }
.detail-role { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #0b111a; text-align: left; display: grid; gap: 7px; }
body.light-theme .detail-role { background: #f8fbff; }
.readonly-card { min-height: 52px; border: 1px solid var(--line); border-radius: 14px; background: #0b111a; padding: 10px 14px; display: grid; gap: 4px; margin: 14px 0 7px; }
.readonly-card span { color: var(--muted); font-size: 12px; font-weight: 900; }
.readonly-card b { color: var(--text); font-size: 14px; }
body.light-theme .readonly-card { background: #f8fbff; }
.detail-role b:nth-child(2), .detail-role b:nth-child(3) { color: var(--teal-2); }
.detail-permissions { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); display: grid; gap: 7px; }
.detail-permissions span { min-height: 26px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(255,255,255,.025); color: var(--muted); display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 8px; font-size: 11px; font-weight: 900; }
.detail-permissions i { width: 16px; height: 16px; border-radius: 999px; background: rgba(0,184,169,.16); color: var(--teal-2); display: grid; place-items: center; font-style: normal; font-size: 11px; line-height: 1; }
body.light-theme .detail-permissions span { background: #ffffff; border-color: #dce5ef; }
.person-profile #detailEditBtn { width: 100%; margin-top: 18px; justify-content: center; box-shadow: 0 12px 28px rgba(0,184,169,.12); }
.detail-close { width: 100%; margin-top: 8px; }
.person-history { padding: 28px 30px; min-width: 0; overflow: auto; }
.person-history > .panel-head { padding-right: 54px; min-height: 38px; gap: 14px; }
.person-history > .panel-head h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.2; }
.person-history > .panel-head h3 .icon { width: 18px; height: 18px; color: var(--teal-2); }
.person-history > .panel-head .btn { min-width: 116px; }
.person-history h4, .advance-head h4 { margin: 16px 0 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.person-history h4 .icon { color: var(--teal-2); }
.detail-tabbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #0d131c; margin-bottom: 16px; }
.detail-tabbar button { min-height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); padding: 0 12px; font-weight: 900; }
.detail-tabbar button.active { background: #079d90; color: #fff; }
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; }
body.light-theme .detail-tabbar { background: #f6f9fc; }
.advance-head { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.advance-head label { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.advance-head .switch-row { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; }
.advance-head .switch-row > span:first-child { color: var(--muted); }
.advance-head .switch { flex: 0 0 44px; }
.detail-inline-form { display: grid; grid-template-columns: 120px 150px 1fr auto; gap: 10px; align-items: end; margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #0b111a; }
body.light-theme .detail-inline-form { background: #f8fbff; }
.detail-inline-form label { margin: 0; color: var(--muted); font-size: 11px; font-weight: 900; }
.detail-inline-form input { height: 34px; margin-top: 5px; }
.detail-inline-form button { height: 34px; }
.detail-table-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; }
.detail-table-controls label { margin: 0; color: var(--muted); font-size: 11px; font-weight: 900; }
.search.mini { width: 260px; height: 34px; }
.detail-table-controls select { width: auto; min-width: 84px; height: 32px; border: 1px solid #24334a; border-radius: 10px; background-color: #0d1420; color: #e8eef9; padding: 0 10px; font-weight: 900; }
body.light-theme .detail-table-controls select { background-color: #f8fbff; border-color: #cfd9e6; color: #172033; }
.mini-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; }
.mini-table th, .mini-table td { height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); text-align: left; color: var(--muted); }
.mini-table th { background: #111722; color: var(--faint); }
body.light-theme .mini-table th { background: #f4f7fb; }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table th:last-child, .mini-table td:last-child { width: 96px; text-align: right; }
.mini-table td[colspan] { text-align: center; }
.mini-pager { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 900; }
.mini-pager div { display: inline-flex; align-items: center; gap: 8px; }
.mini-pager button { height: 26px; border: 1px solid var(--line); border-radius: 8px; background: #0d1420; color: var(--muted); font-weight: 900; padding: 0 10px; }
.mini-pager button:disabled { opacity: .45; cursor: not-allowed; }
body.light-theme .mini-pager button { background: #f8fbff; }
.advance-actions { min-width: 78px; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.detail-attendance-summary { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.attendance-summary-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.attendance-summary-head h4 { margin: 0; }
.attendance-period-controls { display: flex; align-items: center; gap: 10px; }
.attendance-period-controls label { margin: 0; color: var(--muted); font-size: 11px; font-weight: 900; display: flex; align-items: center; gap: 7px; }
.attendance-period-controls select { width: auto; min-width: 92px; height: 32px; border: 1px solid #24334a; border-radius: 10px; background-color: #0d1420; color: #e8eef9; padding: 0 10px; font-weight: 900; }
body.light-theme .attendance-period-controls select { background-color: #f8fbff; border-color: #cfd9e6; color: #172033; }
.attendance-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.attendance-summary-grid.yearly { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.attendance-summary-card { min-height: 76px; border: 1px solid var(--line); border-radius: 14px; background: #0b111a; padding: 12px; display: grid; gap: 6px; align-content: center; }
body.light-theme .attendance-summary-card { background: #f8fbff; }
.attendance-summary-card span { color: var(--muted); font-size: 11px; font-weight: 900; }
.attendance-summary-card strong { color: var(--text); font-size: 24px; line-height: 1; }
.attendance-summary-card em { font-style: normal; font-size: 11px; font-weight: 900; }
.attendance-summary-card.red em { color: var(--red); }
.attendance-summary-card.purple em { color: #a78bfa; }
.attendance-summary-card.cyan em { color: var(--cyan); }
.attendance-summary-card.green em { color: var(--teal-2); }
.attendance-summary-card.amber em { color: var(--amber); }
.attendance-summary-card.muted em { color: #94a3b8; }
.docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.docs-card { min-height: 180px; }
.docs-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.docs-card p, .docs-card li { color: var(--muted); line-height: 1.55; font-size: 13px; font-weight: 750; }
.docs-card ol, .docs-card ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.docs-code-list { display: grid; gap: 10px; }
.docs-code-list span { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0b111a; }
.docs-code-list code { color: var(--amber); font-weight: 950; }
.docs-code-list b { color: var(--muted); font-size: 12px; line-height: 1.45; }
body.light-theme .docs-code-list span { background: #f8fbff; border-color: #cfd9e6; }
.attendance-year-divider { height: 1px; background: var(--line); margin: 18px 0 14px; }
.attendance-year-title { margin-top: 0 !important; }
.export-actions { display: inline-flex; align-items: center; gap: 8px; }
.page-head > .export-actions { margin-left: auto; }
.filter-right .export-actions { margin-left: 2px; }
.export-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: #0d1420; color: var(--muted); display: inline-grid; place-items: center; padding: 0; }
.export-btn:hover { color: var(--teal-2); border-color: rgba(0,184,169,.45); background: rgba(0,184,169,.08); }
.export-btn .icon { width: 16px; height: 16px; }
body.light-theme .export-btn { background: #f8fbff; border-color: #cfd9e6; color: #52657d; }
.mini-icon, .leave-action { width: 34px; height: 28px; border: 1px solid #2c4262; border-radius: 8px; background: #1d2b42; color: #dce7fb; display: inline-grid; place-items: center; }
.mini-icon:hover { background: #263957; color: #fff; }
.mini-icon.danger { color: #ff8da0; border-color: rgba(255,59,87,.25); background: rgba(255,59,87,.10); }
body.light-theme .mini-icon, body.light-theme .leave-action { background: #e8f0fb; color: #315174; border-color: #cad9ec; }
body.light-theme .mini-icon.danger { background: #ffe8ee; color: #b2233d; border-color: #f4bdc8; }
.leave-summary { min-height: 42px; display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 800; }
.leave-summary b { color: #fff; margin-right: 4px; }
.leave-summary span { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; border-radius: 999px; padding: 0 11px; background: rgba(255,153,0,.10); color: #ffd18a; border: 1px solid rgba(255,153,0,.16); }
.leave-summary .summary-ok { color: var(--green); background: rgba(0,208,132,.10); border-color: rgba(0,208,132,.18); }
.leave-summary strong { color: #fff; }
body.light-theme .leave-summary b, body.light-theme .leave-summary strong { color: #172033; }
body.light-theme .leave-summary span { background: #fff4db; border-color: #ffd38a; color: #9a5a00; }
body.light-theme .leave-summary .summary-ok { background: #e7f8ef; border-color: #bfead2; color: #087342; }
.leave-desc { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leave-table td:last-child, .leave-table th:last-child { text-align: center; }
.leave-actions { display: inline-flex; gap: 8px; justify-content: center; align-items: center; }
.leave-action { width: 34px; height: 28px; border-radius: 8px; color: white; border: 0; }
.leave-action.ok { background: #079d72; box-shadow: 0 8px 18px rgba(0,208,132,.12); }
.leave-action.no { background: #e43752; box-shadow: 0 8px 18px rgba(255,59,87,.12); }
.leave-action.ok:hover { background: #08b581; }
.leave-action.no:hover { background: #f0445f; }
.leave-action.view { background: #1d2b42; color: #dce7fb; border: 1px solid #2c4262; }
.leave-action.view:hover { background: #263957; }
body.light-theme .leave-action.view { background: #e8f0fb; color: #315174; border-color: #cad9ec; }
.muted-dash { color: var(--faint); font-weight: 900; }
.inline-form { display: inline; margin: 0; }
.leave-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.leave-detail-grid article, .leave-detail-note { border: 1px solid var(--line); border-radius: 12px; background: #0b111a; padding: 12px; }
body.light-theme .leave-detail-grid article, body.light-theme .leave-detail-note { background: #f8fbff; }
.leave-detail-grid span, .leave-detail-note span { display: block; color: var(--faint); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.leave-detail-grid b { color: var(--text); }
.leave-detail-note { margin-top: 12px; }
.leave-detail-note p { margin: 0; max-height: 180px; overflow: auto; color: var(--muted); line-height: 1.55; white-space: pre-wrap; }

.toast-host { position: fixed; right: 16px; top: 16px; z-index: 200; display: grid; gap: 8px; }
.toast { min-width: 280px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px; color: var(--teal-2); font-weight: 800; font-size: 12px; animation: toastIn .16s ease both; }
.toast-out { animation: toastOut .2s ease both; }
.toast-error { color: var(--red); border-color: rgba(255,59,87,.28); }
.toast-success { color: var(--teal-2); border-color: rgba(0,184,169,.28); }
.toast-demo { color: var(--amber); border-color: rgba(245,158,11,.35); }

@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 1200px) {
  .metrics, .dashboard-grid, .mysql-grid, .security-grid { grid-template-columns: 1fr 1fr; }
  .backup-overview, .backup-panels { grid-template-columns: 1fr; }
  .backup-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .report-toolbar { grid-template-columns: 1fr 1fr; }
  .report-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .report-charts { grid-template-columns: 1fr 1fr; }
  .report-trend-card.full { grid-column: 1 / -1; }
  .person-report-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 860px) {
  .app-shell { display: block; }
  .demo-banner { align-items: flex-start; flex-direction: column; gap: 3px; padding: 10px 16px; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 90;
    width: min(304px, 86vw);
    height: 100vh;
    min-height: 100vh;
    flex-basis: auto;
    transform: translateX(-105%);
    transition: transform .18s ease;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 18px 0 60px rgba(0,0,0,.38);
    overflow-y: auto;
  }
  body.nav-drawer-open .sidebar { transform: translateX(0); }
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(2,8,16,.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  body.nav-drawer-open .sidebar-overlay { opacity: 1; pointer-events: auto; }
  .sidebar-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--panel);
    color: var(--muted);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
  }
  #sidebarOpen {
    width: 34px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    gap: 3px;
    background: var(--panel);
    color: var(--text);
    padding: 7px 8px;
  }
  #sidebarOpen span { width: 16px; height: 2px; border-radius: 999px; background: currentColor; }
  .nav { display: grid; grid-template-columns: 1fr; max-height: none; overflow: visible; }
  .side-summary { margin-top: 12px; }
  .main { width: 100%; min-width: 0; }
  .topbar { align-items: stretch; flex-direction: column; height: auto; gap: 12px; padding: 12px 16px; }
  .sysline { justify-content: flex-start; }
  .top-actions { flex-wrap: wrap; justify-content: flex-start; }
  .content { padding: 18px; }
  .metrics, .dashboard-grid, .mysql-grid, .security-grid { grid-template-columns: 1fr; }
  .backup-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backup-hero { align-items: flex-start; flex-direction: column; }
  .backup-summary-cards { grid-template-columns: 1fr; }
  .report-toolbar, .report-metrics { grid-template-columns: 1fr; }
  .report-charts { grid-template-columns: 1fr; }
  .report-exit-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .person-report-grid, .department-report-side { grid-template-columns: 1fr; }
  .stack-bars > div, .department-bars > div { grid-template-columns: 76px 1fr; }
  .stack-bars em, .department-bars em { grid-column: 2; }
  .report-actions { justify-content: stretch; }
  .report-actions .btn { flex: 1 1 120px; }
  .filters { align-items: stretch; flex-direction: column; min-width: 760px; }
  .table-card > .data-table, .table-card > .table-pager { min-width: 760px; }
  .filter-right { justify-content: flex-start; width: 100%; }
  .search, .search.short { width: 100%; }
  .modal-lg, .modal-md, .modal-sm { width: calc(100vw - 28px); max-height: calc(100vh - 28px); overflow: auto; }
  .modal-xl { width: calc(100vw - 28px); max-height: calc(100vh - 28px); overflow: auto; }
  .person-detail-modal { grid-template-columns: 1fr; }
  .person-profile { border-right: 0; border-bottom: 1px solid var(--line); }
  .person-history { overflow: visible; }
  .attendance-summary-head { align-items: stretch; flex-direction: column; }
  .attendance-period-controls { justify-content: space-between; }
  .attendance-summary-grid, .attendance-summary-grid.yearly { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-grid { grid-template-columns: 1fr; }
  .detail-inline-form { grid-template-columns: 1fr; }
  .detail-table-controls { align-items: stretch; flex-direction: column; }
  .search.mini { width: 100%; }
  .form-grid, .security-fields, .permission-form-layout, .permission-form-layout.compact, .holiday-manual-form { grid-template-columns: 1fr; }
  .permission-grid-modern { max-height: none; }
  .leave-detail-grid { grid-template-columns: 1fr; }
  .table-pager { align-items: stretch; flex-direction: column; }
  .data-table { min-width: 760px; }
  #reportResult { overflow-x: auto; }
  #reportResult .data-table { min-width: 720px; }
  .table-scroll .data-table { min-width: 720px; }
  .matrix-card { max-height: 840px; }
  .matrix-table { min-width: 1450px; }
  .matrix-table th:not(.sticky), .matrix-table td:not(.sticky) { width: 40px; }
  .matrix-table .sticky { width: 170px; min-width: 170px; max-width: 170px; padding: 0 10px; }
  .matrix-person b { max-width: 148px; }
}
@media (max-width: 520px) {
  .period { flex-wrap: wrap; justify-content: flex-start; }
  .period select { min-width: 110px; }
  .page-head { align-items: stretch; flex-direction: column; }
  .page-actions { margin-left: 0; width: 100%; }
  .page-actions .btn { width: 100%; }
  .btn { width: 100%; }
  .attendance-period-controls { align-items: stretch; flex-direction: column; }
  .attendance-period-controls label { justify-content: space-between; }
  .attendance-summary-grid, .attendance-summary-grid.yearly { grid-template-columns: 1fr; }
  .filter-right { align-items: stretch; flex-direction: column; }
  .filter-right select, .filter-right .counter { width: 100%; }
  .permission-grid-modern .permission-actions, .permission-grid-modern .permission-menus, .backup-status-grid, .backup-retention-row, .backup-remote-table, .backup-method-cards, .backup-muted-grid { grid-template-columns: 1fr; }
  .backup-remote-table .full { grid-column: auto; }
  .backup-muted-grid .full { grid-column: auto; }
  .matrix-card { max-height: 840px; }
}
@media print {
  body { background: #fff !important; color: #111827 !important; }
  .sidebar, .topbar, .page-head, .report-toolbar, #reportReady, .toast-host, .modal-root, #clearReportBtn { display: none !important; }
  .app-shell, .main, .content { display: block !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
  .view { display: none !important; }
  #view-reports { display: block !important; }
  #reportResult { display: block !important; border: 0 !important; box-shadow: none !important; background: #fff !important; color: #111827 !important; }
  .data-table th, .data-table td { color: #111827 !important; border-color: #d1d5db !important; }
}