:root{
    --date-gap:8px;
    --outer-radius:8px;
    --thick-border:2px;
    --small-h:26px;   /* input height */
    --small-fs:13px;  /* input font-size */
    --section-gap:6px;
  }

  body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:18px;color:#222;background:#f7f7f9}
  header{display:flex;gap:12px;align-items:center;margin-bottom:12px}
  select, button, input[type=text], input[type=number]{font-size:14px;padding:6px}
  .controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .top-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
  main{display:block}

  .month-wrap{display:none}
  .month-wrap.active{display:block}
  .month-title{font-size:20px;margin:8px 0}

  .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--date-gap);margin-bottom:6px}
  .weekdays div{ text-align:center;font-weight:600;padding:8px 0}

  .calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--date-gap)}
  .date-box{
    border:1px solid #cfcfd6;border-radius:var(--outer-radius);
    background:#fff;min-height:170px;display:flex;flex-direction:column;overflow:hidden;position:relative;
    box-shadow:0 0 0 var(--thick-border) rgba(0,0,0,0.03) inset;
  }
  .date-box.disabled{opacity:.6;filter:grayscale(.3)}
  .date-box.disabled .center-section{pointer-events:none}
  .date-box.accent{ box-shadow: 0 0 0 3px #ffee00 inset; }
  .date-top{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;border-bottom:1px solid rgba(0,0,0,0.06);font-size:12px;background:#fafafb}
  .date-num{font-weight:700}
  .date-tools{display:flex;gap:6px}
  .date-tools button{font-size:11px;padding:2px 6px}

  /* sections per center */
  .centers{display:flex;flex-direction:column;gap:var(--section-gap);padding:6px}
  .center-section{border-radius:6px;padding:6px;border:1px solid rgba(0,0,0,.07)}
  .center-title{font-size:11px;font-weight:700;opacity:.8;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
  .rows{display:flex;flex-direction:column;gap:4px}
  .rows input{height:var(--small-h);padding:2px 8px;border:1px solid rgba(0,0,0,.14);border-radius:6px;font-size:var(--small-fs)}
  .rows input[disabled]{background:#f5f5f5;cursor:not-allowed}

  /* day colors */
  .sunday{background:#525252}
  .sat-grey{ background:#525252 !important; }
  .public-holiday{background:#ff0000}
  .blocked{background:#6600ff} /* purple locked */
  .grey-locked{ background:#bfbfbf !important; }

  /* ADD: compensation visuals */
    .rows .comp-row { background:#fffde7 !important; border-color:#f7d26a !important; }
    .comp-row-flag{ font-size:11px; margin:2px 0 4px 0; }
    .badge{ padding:2px 6px; border-radius:999px; border:1px solid transparent; display:inline-block; font-weight:600 }
    .badge-ph{ background:#ffebee; color:#b71c1c; border-color:#ffcdd2; }   /* Public holiday */
    .badge-sat{ background:#f3e5f5; color:#4a148c; border-color:#e1bee7; }  /* Saturday holiday */
    .badge-none{ background:#fff9c4; color:#6d4c41; border-color:#ffe082; } /* default comp row */

    /* ADD */
    .legend{ display:flex; flex-direction:column; gap:6px; }
    .legend-item{ display:flex; align-items:center; gap:8px; font-size:12px; }
    .legend-swatch{ width:18px; height:14px; border:1px solid rgba(0,0,0,.25); border-radius:4px; flex:0 0 18px; }
    .legend-badge{ font-size:11px; border:1px solid; border-radius:999px; padding:2px 6px; }



  /* center colors */
  .hv{background:#fff}
  .pt{background:#6cb3ff}
  .akn{background:#2474fd}

  /* buttons */
  .ghost{background:#fff;border:1px solid #cfd3dc;border-radius:8px}
  .primary{background:#2f6fec;color:#fff;border:1px solid #2f6fec;border-radius:8px}
  .danger{background:#e04646;color:#fff;border:1px solid #e04646;border-radius:8px}

  /* sidebar card */
  aside .card{background:#fff;border:1px solid #ddd;padding:12px;border-radius:10px}

  /* settings panel (right drawer) */
  .drawer{position:fixed;top:0;right:0;height:100%;width:360px;background:#fff;border-left:1px solid #ddd;
          transform:translateX(100%);transition:transform .25s ease;box-shadow:-12px 0 24px rgba(0,0,0,.08);z-index:30}
  .drawer.open{transform:translateX(0)}
  .drawer header{padding:12px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
  .drawer .body{padding:12px}
  .drawer h3{margin:0;font-size:16px}
  .form-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .form-row label{min-width:60px;font-size:13px;color:#333}
  .drawer .hint{font-size:12px;color:#666}
  .pill{display:inline-block;border:1px solid #cfd3dc;border-radius:999px;padding:2px 8px;font-size:12px;background:#f9fafb}


  /* anchor the menu to header’s top-right */
header{ position:relative; }

/* button + panel container */
.util-anchor{ position:absolute; top:8px; right:16px; z-index:40 }

/* round icon button */
.util-btn{
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  background:#fff; border:1px solid #cfd3dc; border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.util-btn:hover{ background:#f7f7f9 }

/* the sliding panel */
.util-panel{
  position:absolute; right:0; top:44px; width:240px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  padding:10px;
  transform:translateY(-6px); opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  top: calc(100% + 6px); right: 0;
}

/* open on hover OR when JS adds .open */
/* AFTER: open only when JS toggles .open */
.util-anchor.open .util-panel{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}


/* role row */
.util-role{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:#555; background:#f9fafb;
  border:1px solid #eceff3; border-radius:8px; padding:6px 8px; margin-bottom:8px;
}

/* full-width buttons in panel */
.util-panel .full{ width:100%; text-align:center; margin-top:6px }

:root{ --aside-align-offset: 0px; }
/* Public-holidays card follows the calendar grid’s first row */
aside .card{ margin-top: var(--aside-align-offset); transition: margin-top .2s ease; }

/* === Util panel: single-row layout + feedback === */
#utilPanel .btn-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;        /* keep one row */
  overflow-x:auto;         /* scroll if too narrow */
  padding-bottom:4px;
}

#utilPanel .btn-row > button{
  display:inline-flex !important;  /* override any block/100% rules */
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  min-width:96px;
  width:auto !important;
  flex:0 0 auto;
  cursor:pointer;
  transition:
    transform .06s ease,
    box-shadow .18s ease,
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
}

/* Hover / press feedback */
#utilPanel .btn-row > button:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
#utilPanel .btn-row > button:active:not(:disabled){
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,.28) inset;
}
#utilPanel .btn-row > button:focus-visible{
  outline: 2px solid #3b82f6;     /* accessible focus ring */
  outline-offset: 2px;
}
#utilPanel button:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

/* Ripple effect (lightweight, no images) */
#utilPanel .btn-row > button.ripple{ position:relative; overflow:hidden; }
#utilPanel .btn-row > button.ripple::after{
  content:""; position:absolute; left:var(--rx,50%); top:var(--ry,50%);
  width:10px; height:10px; border-radius:50%;
  background: currentColor; opacity:0; transform: translate(-50%,-50%) scale(1);
}
#utilPanel .btn-row > button.rippling::after{
  opacity:.18; animation: ripple .45s ease-out forwards;
}
@keyframes ripple{
  from{ transform: translate(-50%,-50%) scale(1);   opacity:.22; }
  to  { transform: translate(-50%,-50%) scale(18);  opacity:0; }
}

@media print {
  /* Hide all control chrome */
  header, .controls, #utilMenu, .drawer, footer { display: none !important; }
  body { margin: 0; }

  /* Make months print nicely, one per page */
  .print-root { padding: 16px 18px; }
  .print-month {
    page-break-after: always;
    break-inside: avoid;
  }
  .print-title {
    font: 700 18px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0 0 8px;
  }
  .print-legend {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px;
    font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  .legend-chip {
    display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; border:1px solid #ccc;
  }
  .legend-swatch { width:14px; height:14px; border-radius:3px; border:1px solid #888; }

  /* Use the same calendar look but ensure borders print well */
  .month-wrap { box-shadow: none !important; border: 1px solid #999; }
  .calendar .date-box { border: 1px solid #cfcfcf !important; }

  /* Replace inputs with plain text rows for print (we will inject) */
  .print-name { border-bottom: 1px dotted #bbb; padding: 2px 4px; min-height: 18px; }

  /* Keep your day state colors visible */
  .public-holiday { background: #ffe5e5 !important; }
  .blocked        { background: #f1e6ff !important; }
  .sunday         { background: #f3f3f3 !important; }
  .sat-grey       { background: #eeeeee !important; }
  .grey-locked    { background: #f6f6f6 !important; opacity: .8 !important; }
  .accent         { outline: 2px dashed #999 !important; }
}

/* --- toast / busy --- */
/* anchored notices (contextual toasts) */
.notice {
  position: fixed;             /* critical: without this it becomes normal text */
  z-index: 10000;
  max-width: 280px;
  padding: 8px 12px;
  border-radius: 10px;
  font: 12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  background: #858585;         /* info */
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(-50%) scale(.98);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;        /* clicks pass through */
}
.notice.success { background: #16a34a; }
.notice.error   { background: #dc2626; }
.notice.warn    { background: #f59e0b; color:#111; }
.notice.show    { opacity: 1; transform: translateY(-50%) scale(1); }


/* tiny spinner when a button is busy */
button.is-busy{ position:relative; pointer-events:none; opacity:.85; }
button.is-busy::after{
  content:""; position:absolute; right:8px; top:50%; width:12px; height:12px;
  margin-top:-6px; border:2px solid rgba(255,255,255,.9); border-top-color:transparent;
  border-radius:50%; animation:spin .9s linear infinite;
}
@keyframes spin { to{ transform: rotate(360deg) } }

/* Floating action button for AL page */


/* Floating action button for AL page */
.fab-al{
  position: fixed;
   left: auto;
  right: calc(16px + env(safe-area-inset-left, 0));
  bottom: calc(16px + env(safe-area-inset-bottom, 0));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #2f6fec;
  color: #fff;
  border: 1px solid #2f6fec;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(47,111,236,.28);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.fab-al:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(47,111,236,.35); }
.fab-al:active{ transform: translateY(0); }
.fab-al svg{ display:block }
.fab-label{ font-weight:600; letter-spacing:.2px }

/* Hide in print */
@media print {
  .fab-al{ display:none !important; }
}

/* Optional: compact label on very narrow screens */
@media (max-width: 480px){
  .fab-label{ display:none; }
  .fab-al{ padding:10px; }
}

.fab{
  position: fixed; right: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: #2f6fec; color: #fff; border: none;
  box-shadow: 0 8px 20px rgba(47,111,236,.25);
  cursor: pointer; text-decoration: none; font-weight:600;
}
.fab:hover{ filter: brightness(1.05); }


/* Optional: ghost button interactions to match */
/* Buttons – interactions */
button.primary,
a.primary {
  background: #2f6fec;
  color: #fff;
  border: 1px solid #2f6fec;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(47,111,236,.22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
  user-select: none;
}

button.primary:hover,
a.primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(47,111,236,.28);
}

button.primary:active,
a.primary:active {
  filter: brightness(0.98);
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(47,111,236,.18);
}

button.primary:focus-visible,
a.primary:focus-visible {
  outline: 2px solid #a9c2ff;
  outline-offset: 2px;
}

/* Optional: ghost button interactions to match */
button.ghost,
a.ghost {
  background: #fff;
  border: 1px solid #cfd3dc;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

button.ghost:hover,
a.ghost:hover {
  background: #f7f8fb;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

button.ghost:active,
a.ghost:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,.05);
}

button.primary:disabled,
button.ghost:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


  #fab-ph{
    position: fixed; right: 18px; bottom: 130px;
    background:#2f6fec; color:#fff; border-radius:22px; padding:10px 14px;
    text-decoration:none; box-shadow:0 6px 18px rgba(47,111,236,.35);
    font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }
  #fab-ph:hover{ filter:brightness(.96); }

  #alFab,
#fab-ph{
  /* keep these 4 in sync for both buttons */
  --fab-height: 44px;         /* button height */
  --fab-min-width: 140px;     /* make them same width */
  --fab-right: 24px;          /* distance from right edge */
  --fab-bottom: 24px;         /* baseline bottom offset for AL */
  
  position: fixed;
  right: var(--fab-right);
  height: var(--fab-height);
  min-width: var(--fab-min-width);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: #2f6fec;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(47,111,236,.28);
}

/* AL button stays at the baseline bottom offset */
#alFab{
  bottom: var(--fab-bottom);
  font-size: large;
}

/* PH & SpSat sits 30px above AL (AL height + 30px gap) */
#fab-ph{
  bottom: calc(var(--fab-bottom) + var(--fab-height) + 30px);
  font-size: large;
}