/* ANTEKS time accounting. Loaded after tabel.html's legacy inline styles. */
:root {
  --bg: #f4f6f8; --surface: #fff; --surface-soft: #f7f9fb; --surface-panel: #fff;
  --surface-tile: #fff; --text: #17212b; --muted: #526171; --line: #d9e1e8;
  --input-line: #c7d2dc; --accent-rgb: 0,110,182; --accent: #006eb6;
  --accent-dark: #005b98; --accent-soft: #eaf3f9; --button-soft: #f4f7fa;
  --button-soft-hover: #eaf0f5; --ghost-hover: #eaf3f9;
  --shadow: 0 2px 8px rgb(23 33 43 / 4%);
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
}
:root[data-theme="dark"] { --bg:#101820; --surface:#18232d; --surface-soft:#1d2a36; --surface-panel:#18232d; --surface-tile:#18232d; --text:#edf3f8; --muted:#a5b4c1; --line:#354654; --input-line:#4c6273; --accent:#76c3f4; --accent-dark:#8fd0fa; --accent-soft:#19384d; --button-soft:#22323f; --button-soft-hover:#2b4050; --ghost-hover:#243f52; }
:root body { --text:#17212b; --muted:#526171; --bg:#f4f6f8; color:var(--text); }
:root[data-theme="dark"] body { --text:#edf3f8; --muted:#a5b4c1; --bg:#101820; --ui-text:#edf3f8; --ui-muted:#a5b4c1; --ui-bg:#101820; --ui-surface:#18232d; --ui-surface-muted:#1d2a36; --ui-accent:#76c3f4; --ui-accent-hover:#8fd0fa; --ui-border:#354654; color:var(--text); }
body,:root[data-theme="dark"] body { background: var(--bg); line-height: 1.45; }
.brand-logo { filter: none; width: 64px; }
h1 { font-size: clamp(26px,3vw,36px); font-weight: 650; letter-spacing: -.04em; line-height: 1.15; }
h2 { font-size: 24px; font-weight: 650; line-height: 1.25; letter-spacing: -.03em; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.topbar { align-items: center; gap: 18px; margin-bottom: 20px; }
.calendar-panel,.entry-panel { border-color: var(--line); border-radius: 12px; background: var(--surface); box-shadow: none; }
:root:not([data-theme="dark"]) :is(.calendar-panel,.entry-panel,.summary-tile,.salary-panel,.records-open-button,.record-card) { border-color: var(--line); }
.calendar-toolbar { gap: 12px; margin-bottom: 18px; }
.month-heading p,#selected-date-meta { font-size: 12px; line-height: 1.5; }
.salary-panel { gap: 12px; padding: 12px; border: 0; border-radius: 10px; background: var(--surface-soft); }
.salary-result,.salary-stats div { border: 0; border-radius: 8px; background: var(--surface); padding: 10px; }
.salary-result strong { color: var(--text); font-size: 24px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.salary-stats span { font-size: 12px; line-height: 1.4; font-weight: 500; }
.salary-stats strong { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.salary-settings-button { gap: 5px; padding: 10px; border-color: var(--line); background: var(--surface); min-height: 52px; }
.salary-settings-button > strong,.salary-settings-button > small { font-size: 12px; font-weight: 600; line-height: 1.4; }
.salary-settings-button > small { color: var(--muted); }
.weekday-row span { font-size: 12px; font-weight: 500; }
.weekday-row span:nth-child(6),.weekday-row span:nth-child(7) { color: var(--muted); }
.calendar-grid { gap: 6px; }
.calendar-day { border-color: var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; }
.calendar-day:hover { border-color: var(--accent); background: var(--surface-soft); transform: none; box-shadow: none; }
.calendar-day.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.calendar-day.weekend:not(.selected),.calendar-day.holiday:not(.selected) { border-color: var(--line); background: var(--surface-soft); }
.calendar-day.weekend :is(.day-number,.day-hours,.day-shift-times,.day-shifts),.calendar-day.holiday :is(.day-number,.day-hours,.day-shift-times,.day-shifts) { color: var(--muted); }
.calendar-day.weekend .day-number,.calendar-day.holiday .day-number { background: transparent; }
.calendar-day.has-hours:not(.weekend):not(.holiday) { background: var(--accent-soft); }
.calendar-day.today .day-number { border-radius: 6px; background: var(--accent); color: var(--accent-contrast); }
.day-number { font-weight: 600; font-variant-numeric: tabular-nums; }
.day-hours { font-size: 14px; font-weight: 600; line-height: 1.3; }
.day-shifts,.day-shift-times,.day-holiday { font-size: 12px; font-weight: 400; line-height: 1.3; }
.day-holiday { padding: 2px 4px; background: var(--surface-soft); color: var(--muted); }
.day-shift-times { font-variant-numeric: tabular-nums; }
.field span { color: var(--muted); font-size: 13px; font-weight: 600; }
input,select,textarea { min-height: 40px; border: 1px solid var(--input-line); border-radius: 8px; background: var(--surface); font-size: 14px; font-weight: 400; }
textarea { min-height: 72px; line-height: 1.5; }
input:focus,select:focus,textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
button:focus-visible,a:focus-visible,[tabindex="0"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.primary-button,.ghost-button,.icon-button,.tabel-profile-back,.tabel-profile-logout { min-height: 40px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: none; }
.primary-button { background: var(--accent-dark); color: var(--accent-contrast); }
.primary-button:hover { background: var(--accent); }
.icon-button,.ghost-button,.tabel-profile-back,.tabel-profile-logout { border: 1px solid var(--line); background: var(--surface); }
.nonwork-toggle-button { font-size: 12px; min-height: 40px; border-color: var(--line); background: var(--surface-soft); color: var(--muted); box-shadow: none; }
.nonwork-toggle-button.active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
#selected-day-total { min-height: 40px; border-radius: 8px; font-size: 18px; font-weight: 650; background: var(--accent-soft); color: var(--accent-dark); }
.records-open-button { min-height: 68px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); box-shadow: none; }
.records-open-button:hover { background: var(--accent-soft); border-color: var(--accent); transform: none; box-shadow: none; }
.records-open-button-title { font-size: 14px; font-weight: 600; }
.records-open-button-subtitle,.records-open-button-meta { font-size: 12px; font-weight: 400; }
.empty-state { padding: 28px 18px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-soft); font-size: 13px; }
.record-card { padding: 14px; border-radius: 10px; background: var(--surface); box-shadow: none; }
.record-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.record-time strong { font-size: 14px; font-weight: 600; }
.record-note { font-size: 13px; line-height: 1.5; }
.duration-pill { border-radius: 6px; color: var(--accent-dark); background: var(--accent-soft); font-size: 12px; font-weight: 600; }
.settings-popover,.records-modal-panel,.salary-settings-dialog { border-color: var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 16px 48px rgb(23 33 43 / 16%); }
.settings-action { min-height: 40px; border-radius: 8px; font-size: 13px; }
.settings-label,.settings-note,.holiday-empty,.records-modal-kicker,.records-modal-meta,.salary-calculation > p,.salary-calculation-row span { font-size: 12px; line-height: 1.5; }
.salary-calculation { border-color: var(--line); background: var(--surface-soft); }
.salary-calculation-row.is-total strong { color: var(--text); }
.tabel-profile-name { font-size: 13px; font-weight: 600; }
.tabel-save-status { font-size: 12px; }
.tabel-auth-gate { background: var(--bg); }
.tabel-auth-card { gap: 18px; padding: 32px; border-radius: 16px; background: var(--surface); box-shadow: 0 8px 32px rgb(23 33 43 / 7%); }
.tabel-auth-logo { width: 86px; }
.tabel-auth-card h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.04em; }
.tabel-auth-kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.tabel-auth-card label { font-size: 13px; font-weight: 500; }
.tabel-auth-card input { border-radius: 8px; font-size: 15px; }
.tabel-auth-card .primary-button { font-size: 14px; }
.tabel-loading-progress > span { background: var(--accent); }
@media (min-width: 981px) {
  html,body { height: auto; min-height: 100%; overflow: auto; }
  .app-shell { height: auto; min-height: 100dvh; overflow: visible; padding: 24px; }
  .workspace { height: auto; grid-template-rows: auto auto; }
  .calendar-panel { grid-template-rows: auto auto auto auto; padding: 20px; overflow: visible; }
  .entry-panel { height: max-content; padding: 20px; gap: 16px; }
  .calendar-grid { grid-template-rows: repeat(6,minmax(84px,1fr)); }
  .calendar-day { min-height: 84px; gap: 3px; padding: 8px; }
  .salary-panel { grid-template-columns: minmax(0,1fr); }
  .salary-main { grid-template-columns: 1fr 1fr; }
  .salary-stats { grid-template-columns: repeat(5,minmax(0,1fr)); }
  h1 { font-size: 30px; line-height: 1.2; }
  .day-shifts,.day-shift-times,.day-holiday { font-size: 12px; }
}
@media (max-width: 980px) {
  .app-shell { padding: 18px; }
  .header-tools { justify-self: stretch; }
  .tabel-profile-tools { justify-content: flex-end; flex-wrap: wrap; }
  .tabel-profile-status { margin-right: auto; justify-items: start; }
  .salary-panel { padding: 10px; }
}
@media (max-width: 640px) {
  .app-shell { padding: 12px; }
  .topbar { gap: 16px; margin-bottom: 18px; }
  .brand-line { gap: 12px; }
  .brand-logo { width: 52px; }
  h1 { font-size: 28px; line-height: 1.15; }
  .calendar-panel,.entry-panel { padding: 12px; }
  .calendar-toolbar { gap: 8px; }
  .month-heading h2 { font-size: 19px; }
  .month-heading p { font-size: 12px; }
  .primary-button,.ghost-button,.icon-button,.tabel-profile-back,.tabel-profile-logout,.nonwork-toggle-button,input,select { min-height: 44px; }
  .salary-panel { padding: 8px; }
  .salary-result { padding: 10px; }
  .salary-result strong { font-size: 22px; }
  .salary-stats span { font-size: 12px; }
  .calendar-grid,.weekday-row { gap: 4px; }
  .calendar-day { min-height: 84px; padding: 4px 2px; gap: 3px; }
  .calendar-day .day-number { width: 26px; height: 26px; font-size: 13px; }
  .day-hours { font-size: 12px; line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip; }
  .day-shift-times { display: none; }
  .day-holiday { font-size: 12px; }
  .entry-panel { border-radius: 14px; padding: 18px; }
  .selected-day-head { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 12px; align-items: start; }
  .selected-day-head > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
  .selected-day-head h2 { font-size: 21px; line-height: 1.3; }
  .selected-day-actions { display: contents; }
  #selected-day-total { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  #close-day-panel { grid-column: 2; grid-row: 1; align-self: start; }
  .tabel-profile-name { max-width: none; }
  .tabel-profile-status { flex: 1 1 100%; }
  .tabel-save-status { max-width: none; }
  .tabel-auth-card { padding: 24px; }
  .tabel-auth-gate { padding: 16px; }
  .settings-popover { max-height: calc(100dvh - 100px); overflow-y: auto; }
}
@media (max-width: 420px) {
  .salary-result strong { font-size: 18px; }
}