:root {
  --tt-orange: #f97316;
  --tt-orange-hover: #ea580c;
  --tt-navy-dark: #0f172a;
  --tt-gray-50: #f8fafc;
  --tt-gray-100: #f1f5f9;
  --tt-gray-200: #e2e8f0;
  --tt-gray-300: #cbd5e1;
  --tt-gray-400: #94a3b8;
  --tt-gray-500: #64748b;
  --tt-gray-700: #334155;
  --tt-gray-800: #1e293b;
  --tt-white: #ffffff;
  --tt-green: #22c55e;
  --tt-red: #ef4444;
  --tt-radius: 8px;
  --tt-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
}

[hidden] { display: none !important; }

html.embedded, html.embedded body { background: var(--tt-gray-100); }
html.theme-dark.embedded,
html.theme-dark.embedded body {
  background: #111827;
  color: var(--tt-gray-800);
}
html.theme-dark.embedded .tt-app {
  background: #111827;
}
html.embedded .tt-topbar { display: none; }
html.embedded .tt-app { min-height: auto; }
html.embedded .tt-content { flex: 1; padding: 8px 6px; display: flex; flex-direction: column; gap: 8px; overflow: visible; }
html.embedded .tt-terminal { display: none; }
html.embedded body.tt-urlaub-year .tt-clock { display: none; }
html.embedded .tt-absence-year-wrap { padding: 10px; gap: 8px; }
html.embedded .tt-year-sheet-wrap { overflow: visible; max-height: none; }
.tt-app { min-height: 100vh; display: flex; flex-direction: column; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--tt-gray-800); font-size: 14px; }
.tt-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--tt-white); border-bottom: 1px solid var(--tt-gray-200); }
.tt-topbar h1 { font-size: 18px; font-weight: 600; margin: 0; }
.tt-topbar-meta { color: var(--tt-gray-500); font-size: 13px; }
.tt-content { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 20px; overflow: auto; }
.tt-clock { background: var(--tt-white); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tt-clock-left { display: flex; align-items: center; gap: 18px; }
.tt-clock-display { font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tt-orange); letter-spacing: 2px; }
.tt-clock-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--tt-gray-500); }
.tt-btn-clock { background: var(--tt-orange); color: #fff; border: none; padding: 11px 28px; border-radius: var(--tt-radius); font-weight: 600; cursor: pointer; }
.tt-btn-clock.is-out { background: var(--tt-red); }
.tt-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tt-controls-left, .tt-controls-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-select, .tt-date-nav { background: var(--tt-white); border: 1px solid var(--tt-gray-300); border-radius: var(--tt-radius); padding: 8px 12px; font: inherit; }
.tt-date-nav { display: flex; align-items: center; gap: 8px; }
.tt-date-nav button { border: none; background: transparent; cursor: pointer; color: var(--tt-gray-500); padding: 2px; }
.tt-date-label { font-weight: 500; min-width: 120px; text-align: center; }
.tt-btn-group { display: flex; border: 1px solid var(--tt-gray-300); border-radius: var(--tt-radius); overflow: hidden; background: var(--tt-white); }
.tt-btn-group button { border: none; background: transparent; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--tt-gray-500); cursor: pointer; }
.tt-btn-group button + button { border-left: 1px solid var(--tt-gray-200); }
.tt-btn-group button.active { background: var(--tt-orange); color: #fff; }
.tt-table-wrap { background: var(--tt-white); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); overflow: auto; }
.tt-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.tt-table th { text-align: left; padding: 11px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tt-gray-500); background: var(--tt-gray-50); border-bottom: 1px solid var(--tt-gray-200); cursor: pointer; user-select: none; }
.tt-table th.sorted { color: var(--tt-orange); }
.tt-table td { padding: 12px 16px; border-bottom: 1px solid var(--tt-gray-100); }
.tt-table tr:hover td { background: var(--tt-gray-50); cursor: pointer; }
.tt-employee { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.tt-avatar { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.tt-no-entry { color: var(--tt-gray-400); font-style: italic; }
.tt-terminal { background: var(--tt-white); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); padding: 16px 20px; color: var(--tt-gray-500); font-size: 13px; }
.tt-toast-wrap { position: fixed; top: 16px; right: 16px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.tt-toast { background: #166534; color: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: var(--tt-shadow); }
.tt-toast.error { background: #991b1b; }
.tt-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 2800; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tt-modal { background: #fff; border-radius: 12px; width: min(640px, 96vw); max-height: 90vh; overflow: auto; box-shadow: 0 20px 40px rgba(0,0,0,.18); }
.tt-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--tt-gray-200); }
.tt-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.tt-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px 16px; }
.tt-modal-actions #ttAbsenceDelete { margin-right: auto; }
.tt-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.tt-form-grid label span { display: block; font-size: 12px; color: var(--tt-gray-500); margin-bottom: 4px; }
.tt-form-grid input { width: 100%; padding: 8px 10px; border: 1px solid var(--tt-gray-300); border-radius: 8px; font: inherit; }
.tt-balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }
.tt-balance-grid strong { display: block; color: var(--tt-gray-500); font-size: 11px; text-transform: uppercase; }
.tt-balance-cell { font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-balance-plus { color: #166534; }
.tt-balance-minus { color: #991b1b; }
.tt-balance-zero { color: var(--tt-gray-500); }
.tt-absence-wrap:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
.tt-absence-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tt-absence-month { font-size: 16px; font-weight: 600; color: var(--tt-gray-700); }
.tt-absence-grid-scroll { overflow: auto; background: var(--tt-white); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); }
.tt-absence-grid { border-collapse: collapse; min-width: 100%; }
.tt-absence-grid th, .tt-absence-grid td { border: 1px solid var(--tt-gray-200); padding: 0; text-align: center; font-size: 11px; }
.tt-absence-grid th { background: var(--tt-gray-50); color: var(--tt-gray-500); font-weight: 600; padding: 6px 4px; }
.tt-absence-grid .tt-absence-name { text-align: left; padding: 8px 10px; min-width: 120px; position: sticky; left: 0; background: var(--tt-white); z-index: 2; font-weight: 600; }
.tt-absence-grid .tt-absence-day-head.is-today { background: #fff7ed; color: var(--tt-orange); }
.tt-absence-cell { width: 28px; height: 28px; min-width: 28px; }
.tt-absence-cell.is-work { background: #f8fafc; }
.tt-absence-cell.is-weekend { background: #eef2f7; }
.tt-absence-cell.is-absence { background: #3b82f6; }
.tt-absence-cell.is-today { box-shadow: inset 0 0 0 2px var(--tt-orange); }
.tt-session-tag, .tt-day-total { font-size: 10px; color: var(--tt-gray-500); font-weight: 600; }
.tt-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tt-absence-year-wrap:not([hidden]) { display: flex; flex-direction: column; gap: 10px; background: var(--tt-white); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); padding: 16px; }
.tt-year-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tt-year-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-year-meta { font-size: 12px; color: var(--tt-gray-500); }
.tt-year-toggles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tt-year-toggle { border: 1px solid var(--tt-gray-300); background: var(--tt-white); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--tt-gray-700); transition: opacity .15s ease, box-shadow .15s ease; }
.tt-year-toggle-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.tt-year-toggle.is-off { opacity: 0.38; }
.tt-year-toggle.is-active { box-shadow: inset 0 0 0 1px rgba(15,23,42,.12); }
.tt-year-toggle-all { border-style: dashed; color: var(--tt-gray-500); }
.tt-year-sheet-banner { background: #facc15; color: #1e293b; font-weight: 700; font-size: 13px; padding: 10px 14px; border-radius: var(--tt-radius) var(--tt-radius) 0 0; border: 1px solid #eab308; border-bottom: none; }
.tt-year-sheet-wrap { border-radius: 0 0 var(--tt-radius) var(--tt-radius); overflow: visible; max-height: none; width: 100%; }
.tt-year-sheet-stack { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.tt-year-half { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.tt-year-half-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--tt-gray-500);
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 0 2px;
}
.tt-year-sheet { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.tt-year-sheet th, .tt-year-sheet td { border: 1px solid #cbd5e1; padding: 5px 6px; text-align: center; vertical-align: middle; }
.tt-year-sheet thead th { background: #ddd6fe; color: #1e293b; font-weight: 700; font-size: 10px; line-height: 1.2; }
.tt-year-sheet-group th { background: #ede9fe; font-size: 9px; text-transform: uppercase; letter-spacing: .02em; color: #475569; padding: 4px 2px; }
.tt-year-month-group { background: #c4b5fd !important; font-size: 10px !important; padding: 4px 2px; }
.tt-year-kw-head { min-width: 0; width: 18px; max-width: 22px; font-size: 9px; font-weight: 700; padding: 3px 1px; white-space: nowrap; overflow: hidden; }
.tt-year-month-sum-head { min-width: 0; width: 18px; max-width: 22px; background: #e9d5ff !important; font-weight: 800; padding: 3px 1px; }
.tt-year-sheet-name { text-align: center !important; font-weight: 600; white-space: nowrap; width: 36px; min-width: 36px; max-width: 36px; background: #fff; padding: 4px 1px; }
.tt-year-sum-head { width: 28px; min-width: 28px; max-width: 28px; font-size: 8px; font-weight: 700; padding: 3px 1px; letter-spacing: 0; line-height: 1.1; }
.tt-year-avatar-only { width: 28px; height: 20px; border-radius: 999px; font-size: 8px; font-weight: 800; margin: 0 auto; }
.tt-year-sheet-name .tt-employee { justify-content: flex-start; }
.tt-year-sheet-sum { font-weight: 800; background: #f8fafc; width: 28px; min-width: 28px; max-width: 28px; font-size: 9px; padding: 3px 1px; }
.tt-year-sheet-stat { background: #f8fafc; width: 28px; min-width: 28px; max-width: 28px; color: #64748b; font-size: 9px; padding: 3px 1px; }
.tt-year-sheet-stat.is-negative { color: #dc2626; font-weight: 800; }
.tt-year-week-cell { min-width: 0; cursor: default; font-size: 9px; transition: background .12s ease; }
.tt-year-week-cell.has-value { cursor: pointer; font-weight: 700; }
.tt-year-week-cell.has-urlaub.has-value { background: #fef9c3; color: #1e293b; }
.tt-year-week-cell.has-krank.has-value { background: #fecaca; color: #7f1d1d; }
.tt-year-week-cell.has-abw.has-value { background: #dbeafe; color: #1e3a8a; }
.tt-year-week-cell.has-value:hover { filter: brightness(0.96); box-shadow: inset 0 0 0 2px rgba(249,115,22,.35); }
.tt-year-month-sum { min-width: 0; font-weight: 800; background: #faf5ff; cursor: pointer; }
.tt-year-month-sum.has-value { background: #ede9fe; }
.tt-year-month-sum.has-value:hover { background: #ddd6fe; }
.tt-year-tooltip { position: fixed; z-index: 10050; max-width: 320px; padding: 10px 12px; background: #0f172a; color: #f8fafc; border-radius: 10px; font-size: 12px; line-height: 1.45; box-shadow: 0 12px 30px rgba(0,0,0,.25); pointer-events: none; }
.tt-year-detail-list { margin: 0; padding-left: 18px; }
.tt-year-detail-list li { margin-bottom: 8px; }
.tt-year-detail-note { color: var(--tt-gray-500); font-size: 12px; }
.tt-year-sheet-month { min-width: 34px; cursor: pointer; transition: background .12s ease; }
.tt-year-sheet-month.has-value { background: #fef9c3; font-weight: 700; color: #1e293b; }
.tt-year-sheet-month.has-value:hover { background: #fde68a; }
.tt-year-sheet tbody tr:nth-child(even) td { background: #f8fafc; }
.tt-year-sheet tbody tr:nth-child(even) .tt-year-sheet-name { background: #f8fafc; }
.tt-year-sheet tbody tr:hover td { background: #eff6ff; }
.tt-year-sheet-total td { background: #ede9fe !important; font-weight: 800; }
.tt-year-sheet-total .tt-year-sheet-name { background: #ede9fe !important; }

.tt-urlaub-konto-wrap {
  margin-top: 16px;
  border: 1px solid #fdba74;
  border-radius: var(--tt-radius);
  overflow: hidden;
  background: #fff;
}
.tt-urlaub-konto-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  color: #9a3412;
  cursor: pointer;
  text-align: left;
}
.tt-urlaub-konto-toggle:hover { background: #ffedd5; }
.tt-urlaub-konto-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.tt-urlaub-konto-toggle-text strong { font-size: 15px; }
.tt-urlaub-konto-toggle-hint { font-size: 12px; color: #c2410c; font-weight: 500; }
.tt-urlaub-konto-chevron {
  font-size: 14px;
  transition: transform .15s ease;
  color: #ea580c;
}
.tt-urlaub-konto-chevron.is-open { transform: rotate(180deg); }
.tt-urlaub-konto-body { border-top: 1px solid #fdba74; }
.tt-urlaub-konto-table { margin: 0; }

@media (max-width: 768px) {
  .tt-clock { flex-direction: column; align-items: stretch; }
  .tt-form-grid { grid-template-columns: 1fr; }
}

/* Dark mode (Admin iframe + standalone) */
html.theme-dark {
  --tt-gray-50: #1e293b;
  --tt-gray-100: #0f172a;
  --tt-gray-200: rgba(255, 255, 255, 0.08);
  --tt-gray-300: rgba(255, 255, 255, 0.12);
  --tt-gray-400: #94a3b8;
  --tt-gray-500: #94a3b8;
  --tt-gray-700: #cbd5e1;
  --tt-gray-800: #e2e8f0;
  --tt-white: #1e293b;
  --tt-shadow: none;
}
html.theme-dark .tt-app { color: var(--tt-gray-800); }
html.theme-dark .tt-topbar { border-bottom-color: var(--tt-gray-200); }
html.theme-dark .tt-modal { background: #1e293b; color: #e2e8f0; }
html.theme-dark .tt-modal-head { border-bottom-color: var(--tt-gray-200); }
html.theme-dark .tt-form-grid input { background: rgba(15, 23, 42, 0.6); color: #e2e8f0; border-color: var(--tt-gray-300); }
html.theme-dark .tt-absence-year-wrap { background: var(--tt-white); }
html.theme-dark .tt-absence-grid .tt-absence-name { background: var(--tt-white); }
html.theme-dark .tt-absence-cell.is-work { background: rgba(30, 41, 59, 0.5); }
html.theme-dark .tt-absence-cell.is-weekend { background: rgba(15, 23, 42, 0.8); }
html.theme-dark .tt-year-sheet-name { background: #1e293b; color: #e2e8f0; }
html.theme-dark .tt-year-sheet tbody tr:nth-child(even) td { background: rgba(15, 23, 42, 0.5); }
html.theme-dark .tt-year-sheet tbody tr:nth-child(even) .tt-year-sheet-name { background: rgba(15, 23, 42, 0.5); }
html.theme-dark .tt-year-sheet-sum,
html.theme-dark .tt-year-sheet-stat { background: rgba(30, 41, 59, 0.6); color: #94a3b8; }
html.theme-dark .tt-urlaub-konto-wrap { background: #1e293b; border-color: #9a3412; }
html.theme-dark .tt-urlaub-konto-toggle { background: linear-gradient(180deg, rgba(154,52,18,.35) 0%, rgba(124,45,18,.25) 100%); color: #fdba74; }
html.theme-dark .tt-urlaub-konto-toggle-hint { color: #fdba74; }
html.theme-dark .tt-urlaub-konto-body { border-top-color: rgba(251,146,60,.35); }

.tt-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tt-btn-ghost,
.tt-btn-danger-sm {
  border: 1px solid var(--tt-gray-300);
  background: var(--tt-white);
  color: var(--tt-gray-700);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.tt-btn-ghost:hover {
  border-color: var(--tt-orange);
  color: var(--tt-orange);
}
.tt-btn-danger-sm {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b91c1c;
}
.tt-btn-danger-sm:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
html.theme-dark .tt-btn-ghost,
html.theme-dark .tt-btn-danger-sm {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
html.theme-dark .tt-btn-ghost:hover {
  border-color: var(--tt-orange);
  color: #fdba74;
}
html.theme-dark .tt-btn-danger-sm {
  background: rgba(127, 29, 29, 0.25);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fca5a5;
}
html.theme-dark .tt-btn-danger-sm:hover {
  background: rgba(127, 29, 29, 0.4);
}

.tt-quick-actions {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.tt-btn-request {
  border: 2px dashed var(--tt-orange);
  background: #fff7ed;
  color: var(--tt-orange-hover);
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.tt-btn-request:hover {
  background: #ffedd5;
}
.tt-pending-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #93c5fd;
  border-radius: var(--tt-radius);
  padding: 14px 18px;
  box-shadow: var(--tt-shadow);
}
.tt-pending-banner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--tt-gray-700);
}
.tt-pending-banner-text strong {
  font-size: 15px;
  color: #1d4ed8;
}
.tt-requests-head {
  padding: 16px 16px 0;
}
.tt-requests-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
}
.tt-requests-head p {
  margin: 0 0 8px;
  color: var(--tt-gray-500);
  font-size: 13px;
}
.tt-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.tt-status-pill.is-pending { background: #fef3c7; color: #92400e; }
.tt-status-pill.is-approved { background: #dcfce7; color: #166534; }
.tt-status-pill.is-rejected { background: #fee2e2; color: #991b1b; }
.tt-absence-cell.is-pending { background: #fbbf24; opacity: .85; }
.tt-modal-identity { width: min(480px, 96vw); }
.tt-identity-lead {
  margin: 0;
  color: var(--tt-gray-500);
  font-size: 14px;
  line-height: 1.45;
}
.tt-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tt-identity-btn {
  border: 1px solid var(--tt-gray-300);
  background: var(--tt-white);
  border-radius: 12px;
  padding: 16px 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
}
.tt-identity-btn:hover {
  border-color: var(--tt-orange);
  background: #fff7ed;
}
.tt-identity-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
html.theme-dark .tt-btn-request {
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}
html.theme-dark .tt-pending-banner {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.35), rgba(30, 64, 175, 0.25));
  border-color: rgba(147, 197, 253, 0.35);
}
html.theme-dark .tt-pending-banner-text strong { color: #93c5fd; }
html.theme-dark .tt-identity-btn {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
html.theme-dark .tt-identity-btn:hover {
  border-color: var(--tt-orange);
  background: rgba(249, 115, 22, 0.15);
}
@media (max-width: 640px) {
  .tt-identity-grid { grid-template-columns: 1fr; }
}