:root{
  --bg1:#0b1220; --bg2:#0b2b3a;
  --card:rgba(255,255,255,.06);
  --txt:rgba(255,255,255,.92);
  --mut:rgba(255,255,255,.65);
  --line:rgba(255,255,255,.12);

  --lime:#a3e635;
  --green:#22c55e;
  --red:#ef4444;
  --blue:#3b82f6;
  --yellow:#eab308;
  --orange:#f97316;
  --ok:var(--green);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(163,230,53,.16), transparent 60%),
              radial-gradient(1000px 700px at 80% 20%, rgba(34,197,94,.14), transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height:100vh;
}
a{color:inherit}
.container{max-width:1100px; margin:0 auto; padding:18px 14px;}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  transform: translateY(-4px);

  backdrop-filter: blur(10px);
  overflow:hidden;
}
.stack{display:flex; flex-direction:column; gap:14px;}
.row{display:flex; align-items:center; gap:12px;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.topbar-left{display:flex; align-items:center; gap:12px; min-width:0;}
.topbar-right{display:flex; align-items:center; gap:10px; flex-wrap:nowrap;}
.title{font-size:26px; margin:0; letter-spacing:.2px;}
.divider{height:1px; background:var(--line); border-radius:999px; margin:6px 0 14px;}
.grow{flex:1}
h1{font-size:22px; margin:0; letter-spacing:.2px}
h2{font-size:17px; margin:0; letter-spacing:.1px}
.sectionTitle{font-size:17px; font-weight:800; letter-spacing:.1px; line-height:1.2;}
.sectionHead{margin-bottom:10px;}
.meta{font-size:12px;}
.muted{color:var(--mut)}
.hidden{display:none !important;}
.pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid var(--line);
  color:var(--mut);
  font-size:13px;
  white-space:nowrap;
}
.pill.pill-compact{padding:10px; gap:0;}
.pill.pill-compact .dot{margin:0;}
.dot{width:10px;height:10px;border-radius:999px;background:var(--ok); box-shadow:0 0 0 4px rgba(163,230,53,.14)}

.btn{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color:var(--txt);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:650;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  user-select:none;
  min-height:40px;
  font-size:14px;
}
.btn:hover{border-color: rgba(163,230,53,.38)}
.btn-danger{border-color: rgba(239,68,68,.35);}
.btn-danger:hover{border-color: rgba(239,68,68,.55);}

input, select, textarea{
  width:100%;
  margin-top:6px;
  padding: 10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.24);
  color:var(--txt);
  outline:none;
}
input:focus, textarea:focus{ border-color: rgba(163,230,53,.38); }

label{display:block; color:var(--mut); font-size:13px; margin-top: 10px;}
.err{ margin-top:12px; color:#fca5a5; font-size:13px; }
.note{ margin-top:14px; color:var(--mut); font-size:12px; line-height:1.45; }
code{ background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.12); padding:2px 6px; border-radius:8px; }

.kv{width:100%; border-collapse: collapse;}
.kv td{padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08);}
.kv tr:last-child td{border-bottom:none;}
.kv td.value{ text-align:right; white-space:nowrap; width:1%; font-variant-numeric: tabular-nums;}
.kv.compact td{padding:4px 0;}

.summary-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;}
.summary-block{background:rgba(0,0,0,.10); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px;}
@media (min-width: 980px){
  .summary-grid.three{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width: 720px){
  .summary-grid{grid-template-columns:1fr;}
}

.table{width:100%; border-collapse: collapse;}
.table th,.table td{padding:10px 8px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top;}
.table th{color:var(--mut); font-size:13px; font-weight:650; text-align:left;}
.table td.right, .table th.right{text-align:right; font-variant-numeric: tabular-nums;}
.date-cell{white-space:nowrap;}
.date-cell .d-date{display:inline-block; width:64px; font-variant-numeric: tabular-nums;}
.date-cell .d-day{display:inline-block; min-width:90px;}
.date-cell .d-flag{margin-left:6px; color:rgba(191,219,254,.95); font-size:12px;}

.calendar{
  padding:0;
  overflow:hidden;
}

/* Expander (collapsible card) */
details.expander{padding:18px;}
details.expander > .expander-body{padding:14px 0 0 0;}
details.expander > summary{list-style:none;}
details.expander > summary::-webkit-details-marker{display:none;}

.expander-head h2{margin:0;}

.expander-summary:focus{outline:2px solid rgba(163,230,53,.38); outline-offset:3px;}

details.expander[open] 

.miniTableWrap{margin-top:10px;}
.table.mini-table th,.table.mini-table td{padding:8px 6px;}
.table.mini-table th{font-size:12px;}
.table.mini-table td{font-size:13px;}
.table.mini-table td:last-child{color:rgba(255,255,255,.78);}
.cal-toolbar{padding:18px 18px 10px 18px;}
.cal-head{display:grid; grid-template-columns:56px repeat(7, minmax(0, 1fr)); background:rgba(0,0,0,.10); border-bottom:1px solid rgba(255,255,255,.10);}
.cal-head div{padding:10px; text-align:center; color:var(--mut); font-size:12px; font-weight:650; min-width:0;}
.cal-head .kw-head{color:rgba(255,255,255,.55);}

.cal-grid{display:grid; grid-template-columns:56px repeat(7, minmax(0, 1fr));}
.cal-cell{
  min-height:74px;
  padding:10px;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
  min-width:0;
}
.cal-grid > .cal-cell:nth-child(8n){border-right:none;}

.kwcell{cursor:default; background:rgba(0,0,0,.16); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding-top:10px;}
.kwcell .kw{font-weight:800; color:rgba(255,255,255,.78); font-variant-numeric: tabular-nums;}
.kwcell .muted{font-size:11px; color:rgba(255,255,255,.50);}

.day{cursor:pointer;}
.day.mutedDay{cursor:default; opacity:.45;}

.day.hasEntry{background:linear-gradient(180deg, rgba(163,230,53,.16), rgba(0,0,0,.10));}
.day.weekend{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12)); box-shadow: inset 0 3px 0 0 rgba(255,255,255,.12);}
.day.weekend.hasEntry{background:linear-gradient(180deg, rgba(163,230,53,.14), rgba(0,0,0,.12)); box-shadow: inset 0 3px 0 0 rgba(255,255,255,.12);}
.day.holiday{background:linear-gradient(180deg, rgba(59,130,246,.26), rgba(0,0,0,.10)); box-shadow: inset 0 3px 0 0 rgba(59,130,246,.80), inset 0 0 0 1px rgba(59,130,246,.28);}
.day.holiday.hasEntry{background:linear-gradient(180deg, rgba(59,130,246,.26), rgba(163,230,53,.12)); box-shadow: inset 0 3px 0 0 rgba(59,130,246,.80), inset 0 0 0 1px rgba(59,130,246,.28);}
.day.holiday .num{color:rgba(255,255,255,.95);} 
.day.holidayWeekend{box-shadow: inset 0 3px 0 0 rgba(59,130,246,.92), inset 0 0 0 1px rgba(59,130,246,.28);}

.day.vacation{background:linear-gradient(180deg, rgba(234,179,8,.32), rgba(0,0,0,.10)); box-shadow: inset 0 3px 0 0 rgba(234,179,8,.92), inset 0 0 0 1px rgba(234,179,8,.30);} 
.day.vacation.hasEntry{background:linear-gradient(180deg, rgba(234,179,8,.32), rgba(0,0,0,.10)); box-shadow: inset 0 3px 0 0 rgba(234,179,8,.92), inset 0 0 0 1px rgba(234,179,8,.30);} 
.day.vacation .mini.vacationMini{color:rgba(255,255,255,.85); font-weight:650;}
.day.sick{background:linear-gradient(180deg, rgba(239,68,68,.28), rgba(0,0,0,.10)); box-shadow: inset 0 3px 0 0 rgba(239,68,68,.92), inset 0 0 0 1px rgba(239,68,68,.30);} 
.day.sick.hasEntry{background:linear-gradient(180deg, rgba(239,68,68,.28), rgba(0,0,0,.10)); box-shadow: inset 0 3px 0 0 rgba(239,68,68,.92), inset 0 0 0 1px rgba(239,68,68,.30);} 
.day.sick .mini.sickMini{color:rgba(255,255,255,.88); font-weight:650;}
.day.today{outline:2px solid rgba(163,230,53,.65); outline-offset:-2px;}
.day .num{font-weight:800;}
.day .mini{font-size:11px; color:var(--mut); margin-top:6px; white-space:nowrap; overflow:hidden; }
.day .mini.holidayMini{color:rgba(191,219,254,.95); font-weight:650;}

.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.68);
  backdrop-filter: blur(6px);
}
.modal.open{display:flex;}
.modal-card{
  width:min(900px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  transform: translateY(-4px);

}
.grid2{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
@media (min-width: 920px){
  .grid2{grid-template-columns:repeat(5, 1fr);}
}
@media (max-width: 860px){
  .grid2{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 520px){
  .grid2{grid-template-columns:1fr;}
  .pill{justify-content:center;}
  .row{flex-wrap:wrap;}
}

.dateCol{display:inline-block; width:58px; font-variant-numeric: tabular-nums;}
.weekdayCol{display:inline-block; width:34px; text-align:left;}

/* Mobile: ensure Sa/So remain visible and columns don't shift */
@media (max-width: 520px){
  .cal-head{grid-template-columns:44px repeat(7, minmax(0, 1fr));}
  .cal-grid{grid-template-columns:44px repeat(7, minmax(0, 1fr));}
  .cal-cell{padding:7px; min-height:66px;}
  .kwcell .kw{font-size:12px;}
  .day .num{font-size:14px;}
  .day .mini{font-size:10px;}
}

/* Expander summary layout: arrow aligned far-right, sized like buttons */
.expander-summary{
  list-style: none;
  cursor: pointer;
}
.expander-summary::-webkit-details-marker{ display:none; }
.expander-summary::marker{ content:""; }

.expander-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  width: 100%;
}

.expander-left{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width: 0;
}

.chev{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}

.chev::before{
  content:"";
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid rgba(255,255,255,0.78);
  transform: translateY(1px) rotate(0deg);
  transition: transform .15s ease, border-top-color .15s ease;
}

details[open] > summary .chev::before{
  transform: translateY(-1px) rotate(180deg);
}
details[open] > summary 

/* Make sure summary content doesn't wrap weirdly on mobile */
.expander h2{ margin:0; }

/* Expander inner separator */
.expander-body{border-top:1px solid rgba(255,255,255,.10); margin-top:14px;}

.kwhours{font-size:12px; color:rgba(255,255,255,.55); font-variant-numeric: tabular-nums;}

.exportOpt{display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:rgba(0,0,0,.14); cursor:pointer;}
.exportOpt input{margin-top:3px;}
.exportOpt strong{display:block; font-weight:850; color:rgba(255,255,255,.92);}
.exportOpt span{display:block; font-size:12px; color:var(--mut); margin-top:2px;}

/* Table padding: equal spacing left/right */
.table th, .table td{
  padding: 8px 12px;
}
.table td{border-bottom:1px solid rgba(255,255,255,.08);}
.table th{padding-top: 10px; padding-bottom: 10px;}
.right{ text-align:right; font-variant-numeric: tabular-nums; }

/* Export modal options: prevent overflow on small screens */
.exportOpt{
  width: 100%;
  box-sizing: border-box;
}
.exportOpt > div{
  flex: 1 1 auto;
  min-width: 0;
}
.exportOpt strong, .exportOpt span{ display:block; }
.exportOpt span{ color: rgba(255,255,255,.60); font-size: 12px; margin-top: 2px; line-height: 1.25; }
.exportOpt input[type="radio"]{
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 20px;
  accent-color: rgba(255,255,255,.80);
}

/* Full-screen modal on phones (portrait) */
@media (max-width: 520px){
  .modal{
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .modal-card{
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    padding: 18px 16px;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .exportOpt{ padding: 14px 14px; }
}

/* Ensure table cells have equal left/right padding (prevents right column hugging the edge) */
table.table{width:100%; border-collapse: collapse;}
table.table th, table.table td{
  padding: 10px 14px;
  box-sizing: border-box;
}
table.table th{color:var(--mut); font-size:13px; font-weight:650; text-align:left;}
table.table td{border-bottom:1px solid rgba(255,255,255,.08);}
table.table .right{ text-align:right; font-variant-numeric: tabular-nums; }

/* Export modal option layout: stable on narrow screens */
.exportOpt{
  display:grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  align-items:start;
}
.exportOpt input[type="radio"]{
  width: 20px;
  height: 20px;
  margin: 2px 0 0 0;
  accent-color: rgba(255,255,255,0.82);
}
.exportOpt > div{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.exportOpt strong{display:block; font-size:14px; line-height:1.2;}
.exportOpt span{display:block; color: rgba(255,255,255,.62); font-size:12px; margin-top: 3px; line-height: 1.25;}

/* Full-screen modal on phones */
@media (max-width: 560px){
  .modal{
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .modal-card{
    width: 100%;
    max-width: none;
    height: 100%;
    border-radius: 0;
    margin: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) 16px;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Make sure the month table doesn't touch card edges on very small screens */
@media (max-width: 420px){
  table.table th, table.table td{ padding-left: 16px; padding-right: 16px; }
  table.table th:first-child, table.table td:first-child{ padding-left: 18px; }
  table.table th:last-child,  table.table td:last-child { padding-right: 18px; }
}

/* Allow long headers to wrap instead of forcing the table wider */
table.table th{ white-space: normal; }

@media (max-width: 560px){
  .date-cell{
    white-space: normal;        /* was nowrap; caused overflow */
  }
  .date-cell .d-date{
    width: auto;                /* was 64px */
    display: block;
  }
  .date-cell .d-day{
    min-width: 0;               /* was 90px */
    display: block;
    margin-top: 2px;
  }
  .date-cell .d-flag{
    display: block;
    margin: 6px 0 0 0;
  }
}

/* Ensure the month table cannot overflow its card */
.card{overflow:hidden;}
table.table{width:100%; border-collapse:collapse; table-layout:fixed;}
table.table th, table.table td{padding:10px 14px; box-sizing:border-box; overflow:hidden; }
table.table .right{text-align:right; font-variant-numeric: tabular-nums;}

/* Base column widths (desktop) */
table.table th:nth-child(1), table.table td:nth-child(1){width:54%;}
table.table th:nth-child(2), table.table td:nth-child(2){width:23%;}
table.table th:nth-child(3), table.table td:nth-child(3){width:23%;}

/* Mobile: give more space to the Date/Day column and keep headers compact */
.is-mobile table.table th{white-space:nowrap; font-size:12px;}
.is-mobile table.table th:nth-child(1), .is-mobile table.table td:nth-child(1){width:60%;}
.is-mobile table.table th:nth-child(2), .is-mobile table.table td:nth-child(2){width:20%;}
.is-mobile table.table th:nth-child(3), .is-mobile table.table td:nth-child(3){width:20%;}

/* Date cell: show day behind date (same line), but allow holiday label on its own line */
.is-mobile .date-cell{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  white-space:normal;
}
.is-mobile .date-cell .d-date{
  width:64px;
  flex:0 0 auto;
  display:inline-block;
}
.is-mobile .date-cell .d-day{
  min-width:0;
  flex:1 1 auto;
  display:inline-block;
}
.is-mobile .date-cell .d-flag{
  flex: 1 0 100%;
  margin: 6px 0 0 0;
}

/* Mobile modal can also rely on .is-mobile (in addition to media queries) */
.is-mobile .modal{padding:0; align-items:stretch; justify-content:stretch;}
.is-mobile .modal-card{
  width:100%;
  max-width:none;
  height:100%;
  border-radius:0;
  margin:0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom)) 16px;
  box-sizing:border-box;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Export options: robust grid layout on mobile */
.is-mobile .exportOpt{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  align-items:start;
}
.is-mobile .exportOpt > div{min-width:0; overflow-wrap:anywhere; word-break:break-word;}
.is-mobile .exportOpt input[type="radio"]{width:20px; height:20px; margin:2px 0 0 0;}

/* --- v27: Mobile tables like v17 (no truncation, aligned, side-by-side) --- */

/* Tables: consistent padding and no ellipsis */
.table{width:100%; border-collapse: collapse;}
.table th, .table td{
  padding: 10px 14px;
  box-sizing: border-box;
}
.table th{color: var(--mut); font-size: 13px; font-weight: 650;}
.table td{border-bottom:1px solid rgba(255,255,255,.08);}
.table .right{ text-align:right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Keep content inside rounded cards */
.card{ overflow: hidden; }

/* Holiday table: center weekday column, allow holiday name wrapping */
#holidayBox .table th:nth-child(2), #holidayBox .table td:nth-child(2){ text-align:center; white-space: nowrap; }
#holidayBox .table th:nth-child(1), #holidayBox .table td:nth-child(1){ white-space: nowrap; }
#holidayBox .table th:nth-child(3), #holidayBox .table td:nth-child(3){ white-space: normal; word-break: break-word; }

/* Month table: keep date + (short) weekday inline; values right aligned */
.date-cell{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.date-cell .d-date{ width: 62px; flex: 0 0 auto; display:inline-block; }
.date-cell .d-day{ flex: 0 0 auto; display:inline-block; }

/* Mobile: keep everything visible without cutting, make headers compact */
.is-mobile .table th{ font-size: 12px; padding-top: 10px; padding-bottom: 10px; }
.is-mobile #monthBox .table th:nth-child(1), .is-mobile #monthBox .table td:nth-child(1){ width: 52%; }
.is-mobile #monthBox .table th:nth-child(2), .is-mobile #monthBox .table td:nth-child(2){ width: 24%; }
.is-mobile #monthBox .table th:nth-child(3), .is-mobile #monthBox .table td:nth-child(3){ width: 24%; }

.is-mobile #holidayBox .table th:nth-child(1), .is-mobile #holidayBox .table td:nth-child(1){ width: 24%; }
.is-mobile #holidayBox .table th:nth-child(2), .is-mobile #holidayBox .table td:nth-child(2){ width: 18%; }
.is-mobile #holidayBox .table th:nth-child(3), .is-mobile #holidayBox .table td:nth-child(3){ width: 60%; }

/* Prevent accidental overflow/ellipsis from older rules */
.table th, .table td{
  overflow: visible;
  text-overflow: clip;
}

/* --- v29: Mobile table alignment (no truncation, inline date+weekday, full holiday names) --- */

/* Never truncate table cell content */
table.table th, table.table td{
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Keep numeric columns fully visible */
#monthBox table.table td.right{
  white-space: nowrap !important;
}

/* Make date + weekday inline (same row) */
#monthBox .date-cell{
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
#monthBox .date-cell .d-date,
#monthBox .date-cell .d-day{
  display: inline-block !important;
}

/* Mobile: ensure headers show fully (no ellipsis) and fit */
.is-mobile #monthBox table.table th{
  white-space: nowrap !important;
  font-size: 12px !important;
}
.is-mobile #monthBox table.table th:nth-child(1),
.is-mobile #monthBox table.table td:nth-child(1){ width: 52% !important; }
.is-mobile #monthBox table.table th:nth-child(2),
.is-mobile #monthBox table.table td:nth-child(2){ width: 24% !important; }
.is-mobile #monthBox table.table th:nth-child(3),
.is-mobile #monthBox table.table td:nth-child(3){ width: 24% !important; }

/* Holidays: show full holiday name, keep date+weekday compact */
#holidayBox table.table td:nth-child(3),
#holidayBox table.table th:nth-child(3){
  white-space: normal !important;
  word-break: break-word !important;
}
#holidayBox table.table td:nth-child(1),
#holidayBox table.table td:nth-child(2){
  white-space: nowrap !important;
}


/* --- v30: Mobile table layout modes (side-by-side like v17) --- */
/* Modes:
   - .mobile-compact (default on phones): short weekdays (Mo/Di/...) and tighter columns
   - .mobile-wide: full weekdays if you prefer (may wrap on very small screens)
*/

/* Month table: keep date + weekday on one line */
#monthBox .date-cell{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
#monthBox .date-cell .d-date{width:62px; flex:0 0 auto; display:inline-block;}
#monthBox .date-cell .d-day{min-width:0; flex:0 0 auto; display:inline-block;}

/* Prevent overlap and truncation in holiday table */
#holidayBox table.table{table-layout:fixed;}
#holidayBox table.table th, #holidayBox table.table td{vertical-align:top;}
#holidayBox table.table th:nth-child(1), #holidayBox table.table td:nth-child(1){width:22%; white-space:nowrap;}
#holidayBox table.table th:nth-child(2), #holidayBox table.table td:nth-child(2){width:18%; text-align:center; white-space:nowrap;}
#holidayBox table.table th:nth-child(3), #holidayBox table.table td:nth-child(3){width:60%; white-space:normal; word-break:break-word;}

/* Mobile: tighter but still side-by-side */
.is-mobile.mobile-compact #monthBox table.table{table-layout:fixed;}
.is-mobile.mobile-compact #monthBox table.table th:nth-child(1), .is-mobile.mobile-compact #monthBox table.table td:nth-child(1){width:56%;}
.is-mobile.mobile-compact #monthBox table.table th:nth-child(2), .is-mobile.mobile-compact #monthBox table.table td:nth-child(2){width:22%;}
.is-mobile.mobile-compact #monthBox table.table th:nth-child(3), .is-mobile.mobile-compact #monthBox table.table td:nth-child(3){width:22%;}

/* In compact mode, we also reduce the date width slightly */
.is-mobile.mobile-compact #monthBox .date-cell .d-date{width:58px;}
.is-mobile.mobile-compact #monthBox .date-cell .d-day{font-size:14px;}

/* Wide mode keeps full weekday text; allow it to wrap if needed (still no overlap) */
.is-mobile.mobile-wide #holidayBox table.table th:nth-child(2),
.is-mobile.mobile-wide #holidayBox table.table td:nth-child(2){width:26%;}
.is-mobile.mobile-wide #holidayBox table.table th:nth-child(3),
.is-mobile.mobile-wide #holidayBox table.table td:nth-child(3){width:52%;}
.is-mobile.mobile-wide #holidayBox table.table td:nth-child(2){white-space:normal; word-break:break-word;}


/* --- v31: Continuous separators + Holiday table column fix --- */

/* Continuous row separators (hours tables) */
.table td{ border-bottom: none !important; }
.table tbody tr{ border-bottom: 1px solid rgba(255,255,255,.08); }
.table tbody tr:last-child{ border-bottom: none; }

/* Holiday table: enforce fixed columns and prevent overlap */
#holidayBox .table{ table-layout: fixed; }
#holidayBox .table th, #holidayBox .table td{ vertical-align: middle; }
#holidayBox .table th:nth-child(1), #holidayBox .table td:nth-child(1){ width: 22%; white-space: nowrap; }
#holidayBox .table th:nth-child(2), #holidayBox .table td:nth-child(2){ width: 18%; text-align:center; white-space: nowrap; }
#holidayBox .table th:nth-child(3), #holidayBox .table td:nth-child(3){
  width: 60%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Make sure there is visible space between columns */
#holidayBox .table td, #holidayBox .table th{ padding-left: 14px; padding-right: 14px; }


/* --- v32: Inline Date+Wochentag + Holiday table no-overlap + compact mode support --- */

/* Month date cell: always keep date + weekday in ONE line */
#monthBox .date-cell{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}
#monthBox .date-cell .d-date,
#monthBox .date-cell .d-day{
  display:inline-block !important;
  margin:0 !important;
}
#monthBox .date-cell .d-day{ min-width:0 !important; }

/* Holiday table: prevent text from visually overlapping between columns */
#holidayBox .table{ table-layout: fixed !important; }
#holidayBox .table th, #holidayBox .table td{ overflow:hidden; }
#holidayBox .table td:nth-child(1), #holidayBox .table th:nth-child(1){ width:22% !important; white-space:nowrap !important; }
#holidayBox .table td:nth-child(2), #holidayBox .table th:nth-child(2){ width:18% !important; white-space:nowrap !important; text-align:center !important; }
#holidayBox .table td:nth-child(3), #holidayBox .table th:nth-child(3){
  width:60% !important;
  overflow:visible !important;         /* allow wrapping */
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
}

/* Compact mode (default on phones): keep weekday short and ensure enough room for holiday names */
.is-mobile.mobile-compact #holidayBox .table td:nth-child(2),
.is-mobile.mobile-compact #holidayBox .table th:nth-child(2){ width:14% !important; }
.is-mobile.mobile-compact #holidayBox .table td:nth-child(3),
.is-mobile.mobile-compact #holidayBox .table th:nth-child(3){ width:64% !important; }


/* --- v33: Align month header with values across orientation changes --- */
/* Ensure numeric columns are right-aligned in header and body (portrait/landscape/mobile/desktop) */
#monthBox table.table th:nth-child(2),
#monthBox table.table th:nth-child(3){
  text-align: right !important;
  white-space: nowrap !important;
}
#monthBox table.table td:nth-child(2),
#monthBox table.table td:nth-child(3){
  text-align: right !important;
  white-space: nowrap !important;
}



/* --- Overtime chart (v34) --- */
.chart-wrap{
  width: 100%;
  height: 160px;
}
#overtimeChart{
  width: 100%;
  height: 160px;
  display: block;
}


/* v35: Chart inside Soll/Ist expander */
.chart-block{padding-top:12px; border-top:1px solid rgba(255,255,255,.10);}
.chart-block .chart-wrap{height:160px;}


/* --- v39: Chart spacing in landscape + less cramped --- */
.chart-block{ padding-top: 14px; }
.chart-block .chart-wrap{ height: 200px; }

@media (orientation: landscape){
  .chart-block{ padding-top: 18px; }
  .chart-block .chart-wrap{ height: 230px; }
  #sollIstBox .expander-body{ padding-left: 14px; padding-right: 14px; }
}


/* --- v40: Taller bars via more plot height + tighter label spacing + landscape tuning --- */
.chart-block .chart-wrap{ height: 220px; }

@media (orientation: landscape){
  .chart-block .chart-wrap{ height: 260px; }
  .chart-block{ padding-top: 14px; }
}


/* --- v41: Chart scale tuning (portrait/landscape) --- */
.chart-block .chart-wrap{ height: 230px; }
.chart-block #overtimeChartMeta{ margin-top: 4px !important; }

@media (orientation: landscape){
  .chart-block .chart-wrap{ height: 320px; }
}


/* --- v42: Restore spacing between panels + responsive chart sizing --- */
.card{ margin: 14px 0; }

/* chart sizing: avoid "squashed" desktop + keep good mobile proportions */
.chart-block .chart-wrap{ height: clamp(190px, 26vw, 260px); }
.chart-block #overtimeChartMeta{ margin-top: 2px !important; }

@media (orientation: landscape){
  .chart-block .chart-wrap{ height: clamp(220px, 24vw, 320px); }
}


/* --- v43: Uniform panel spacing + balanced chart footer spacing --- */
/* Use gap instead of varying margins so all panels have identical distance */
.container{ display:flex; flex-direction:column; gap:14px; }
.card{ margin:0 !important; }

/* Make chart block spacing consistent with other rows inside the card */
.chart-block{ margin-top: 12px; }
.chart-block #overtimeChartMeta{ margin-top: 2px !important; }


/* --- v44: Chart inside summary container + month row above plot + better proportions --- */
.summary-block.chart-card{ margin-top: 14px; }
.summary-block.chart-card .chart-title{ font-size:12px; font-weight:650; margin-bottom:8px; display:flex; gap:6px; align-items:baseline; }
.summary-block.chart-card .chart-wrap{ height: clamp(220px, 30vw, 310px); }
.summary-block.chart-card #overtimeChartMeta{ margin-top: 8px !important; }

@media (orientation: landscape){
  .summary-block.chart-card .chart-wrap{ height: clamp(260px, 24vw, 360px); }
}


/* --- v45: Remove chart footer/meta + maximize width + more space to overtime labels --- */
.summary-block.chart-card .chart-wrap{ width:100%; }
.summary-block.chart-card canvas#overtimeChart{ display:block; width:100% !important; height:100% !important; }

/* no footer/meta anymore */
#overtimeChartMeta{ display:none !important; }