/* =================================================================ins
   CSS Reset & Variables
   ================================================================ */
:root {
  --ink: #14213d;
  --bg: #eef1f5;
  --line: #c9d1dc;
  --board: #1f6f5c;
  --bad: #a4262c;
  --paper: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6ebf2;
    --bg: #101722;
    --line: #2c3a4d;
    --board: #43b597;
    --bad: #ff8a8f;
    --paper: #182231;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 16px/1.5 system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ---------- Picture backgrounds, same look on every page ---------- */
body.bg{
  --tint:#5b6b8c;                      /* color mixed into the picture: darker = darker picture */
  background-color:var(--tint);
  background-image:var(--bg-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-blend-mode:overlay;
  min-height:100vh; min-height:100dvh; /* fills the screen on phones, tablets and PCs */
}
body.home, body.sched, body.enrollment, body.people, body.setup{ --bg-image:url('Skewl.jpg'); }
body.login{ --bg-image:url('AMMC.jfif'); }

/* keeps text readable over the picture on the admin pages */
body.sched main, body.enrollment main, body.people main, body.setup main{ background:color-mix(in srgb,var(--bg) 88%,transparent); }
/* Quick inline fix to anchor the header to the top-left */
        .login-header {
            position: absolute;
            top: 1rem;
            left: 1.5rem;
           
        }
        .login-header a {
            text-decoration: none;
            font-weight: 600;
        }

/* =================================================================
   Global Layout & Elements
   ================================================================ */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

main {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

a {
  color: var(--board);
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.full, h1 {
  grid-column: 1/-1;
}

/* =================================================================
   Forms & Controls
   ================================================================ */
label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-weight: 600;
}

input, select {
  font: inherit;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}

button {
  font: inherit;
  padding: .6rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--board);
  color: #fff;
  cursor: pointer;
}

button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

:focus-visible {
  outline: 3px solid var(--board);
  outline-offset: 2px;
}

.ok {
  color: var(--board);
}

.err {
  color: var(--bad);
}

.err ul {
  margin: 0;
  padding-left: 1.2rem;
}

.login {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.login form {
  width: min(340px, 92vw);
  display: grid;
  gap: 1rem;
}

.tab {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.tab.on {
  background: var(--board);
  color: #fff;
}

/* =================================================================
   Tables & Calendars / Time Tables (.tt)
   ================================================================ */
.tt {
  display: grid;
  grid-template-columns: 3.5rem repeat(6, minmax(90px, 1fr));
  grid-template-rows: 2rem repeat(26, 1.4rem);
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dh {
  text-align: center;
  font-weight: 700;
  border-left: 1px solid var(--line);
}

.hr {
  font-size: .75rem;
  text-align: right;
  padding-right: .4rem;
  border-top: 1px solid var(--line);
  opacity: .7;
}

.slot {
  margin: 1px 2px;
  padding: .2rem .4rem;
  border-radius: 5px;
  background: var(--board);
  color: #fff;
  font-size: .8rem;
  line-height: 1.25;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
}

th, td {
  padding: .5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

/* =================================================================
   Admin Sidebar & Calendar Extension
   ================================================================ */
.shell {
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 100vh;
}

.shell main {
  margin: 0;
  max-width: none;
  width: 100%;
  padding: 1.5rem;
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1rem;
  background: var(--paper);
  border-right: 1px solid var(--line);
}

.side nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
}

.side nav a, .side .out {
  padding: .55rem .75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
}

.side nav a:hover, .side .out:hover {
  background: var(--bg);
}

.side nav a[aria-current=page] {
  background: var(--board);
  color: #fff;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
}

.bar label {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
}

.tt.admin {
  grid-template-rows: 2rem repeat(26, 1.6rem);
}

.cell {
  border: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.cell:hover, .cell:focus-visible {
  background: color-mix(in srgb, var(--board) 18%, transparent);
}

.admin .slot {
  z-index: 1;
}

dialog {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  padding: 1.25rem;
  width: min(900px, 96vw);
  max-height: 94vh;
  overflow: auto;
}

dialog::backdrop {
  background: rgba(0, 0, 0, .45);
}

.actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

.cell.pick, .cell.range {
  background: color-mix(in srgb, var(--board) 30%, transparent);
}

/* =================================================================
   Media Queries & Print Rules
   ================================================================ */
@media (max-width: 800px) {
  .shell {
    grid-template-columns: 1fr;
  }
  
  .side {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .side nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media print {
  header, .tab {
    display: none;
  }
  
  body {
    background: #fff;
    color: #000;
  }
  
  .slot {
    background: #ddd;
    color: #000;
    border: 1px solid #000;
  }
}

/* ---------- Text containers: keep page text readable on every page ---------- */
.intro{margin-bottom:1rem}
.intro h1{margin:0 0 .5rem;font-size:1.6rem;line-height:1.2}
.intro p{margin:.5rem 0 0}
.intro > :last-child{margin-bottom:0}
p.panel{margin:0 0 1rem}                  /* a single line of text in its own card */
.list.panel{margin-top:1rem}              /* a "Current ..." list in its own card */
.list.panel > h2,.list.panel > h3{margin-top:0}
.login-header a{display:inline-block;padding:.4rem .9rem;background:var(--paper);border:1px solid var(--line);border-radius:8px}

/* ---------- Tables: the action buttons sit in the last column, pushed to the far right ---------- */
@media (min-width:701px){
  td.act{width:1%;white-space:nowrap;text-align:right}   /* column shrinks to its buttons, the rest of the row takes the space */
}

/* ---------- Responsive: phones, tablets, laptops ---------- */
img{max-width:100%;height:auto}
.shell main{min-width:0}                 /* wide content scrolls inside itself instead of stretching the page */

/* Touch screens: bigger tap targets and taller calendar rows */
@media (pointer:coarse){
  button:not(.cell):not(.mini),input,select{min-height:44px}
  .mini{padding:.45rem .8rem}
  .tt{grid-template-rows:2rem repeat(26,1.8rem)}
  .tt.admin{grid-template-rows:2rem repeat(26,2.2rem)}
}

/* Tablets and smaller */
@media (max-width:900px){
  .shell main{padding:1rem}
  main .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* Phones */
@media (max-width:600px){
  .grid2{grid-template-columns:1fr}
  header{padding:.6rem .8rem}
  .actions{flex-wrap:wrap}
  .actions button{flex:1}
  dialog,.ui-dialog{width:96vw;padding:1rem}
  main table{display:block;overflow-x:auto;white-space:nowrap}   /* tables scroll sideways */
  .tt{grid-template-columns:2.8rem repeat(6,minmax(72px,1fr))}
  .slot{font-size:.7rem;padding:.1rem .25rem}
}


/* Back button on the sign-in and change-password pages: a round icon button pinned top-left */
header.login-header{position:absolute;top:max(1rem,env(safe-area-inset-top));left:1rem;z-index:5;display:block;padding:0;margin:0;background:none;border:0}
header.login-header a.back-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .12s,border-color .12s}
header.login-header a.back-btn:hover,header.login-header a.back-btn:focus-visible{border-color:var(--board);transform:translateX(-2px)}

/* Admin sidebar logo: centred above the title; shrinks to a small icon in the phone top bar */
.side .brand{display:block;align-self:center;line-height:0;padding:.25rem;border-radius:50%}
.side .brand img{width:72px;height:72px;object-fit:contain;display:block}
.side strong{text-align:center}
@media (max-width:700px){
  .side .brand{flex:none;align-self:center;padding:0}
  .side .brand img{width:34px;height:34px}
}
.side .out[hidden]{display:none !important}
.side .brand{cursor:default;-webkit-tap-highlight-color:transparent;user-select:none}

/* Sidebar icons */
.side nav a, .side .out { display: flex; align-items: center; gap: .65rem; }
.side .ico { flex: none; width: 20px; height: 20px; opacity: .85; }
.side nav a[aria-current=page] .ico { opacity: 1; }
.side .out[hidden] { display: none !important; }
@media (max-width: 700px) { .side .ico { width: 18px; height: 18px; } .side nav a, .side .out { gap: .45rem; } }

/* =================================================================
   Hover / press animations for everything clickable
   ================================================================ */
button, .btn, .tab, a, summary, select, [role=button], [data-id], .side nav a, .side .out, label:has(input[type=checkbox]), label:has(input[type=radio]) {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease, opacity .15s ease, color .15s ease, border-color .15s ease;
}
button svg, .btn svg, .tab svg, .side .ico, .ic { transition: transform .18s ease; }
@media (hover: hover) {
  button:not(:disabled):not(.cell):not(.slot):hover, .btn:not(:disabled):hover, .tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,.16);
  }
  button:not(:disabled):hover svg, .btn:hover svg, .tab:hover svg, .side nav a:hover .ico, .side .out:hover .ico { transform: scale(1.15); }
  a:not(.back-btn):hover { filter: brightness(1.15); }
  .side nav a:hover, .side .out:hover { transform: translateX(4px); }
  .cell:not(:disabled):hover { transform: scale(1.06); }
  select:hover, input:not([type=checkbox]):not([type=radio]):hover { border-color: var(--board); }
  [data-id]:not(button):not(.slot):hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.14); }
  label:has(input[type=checkbox]):hover, label:has(input[type=radio]):hover, summary:hover { transform: translateX(2px); }
}
button:not(:disabled):not(.cell):active, .btn:not(:disabled):active, .tab:active, [data-id]:not(.slot):active, .side nav a:active { transform: translateY(0) scale(.97); box-shadow: none; }
@media (max-width: 700px) {
  body > header > .nav .tab:hover { transform: none; box-shadow: none; }   /* keep the bottom tab bar steady */
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  button:hover, .btn:hover, .tab:hover, [data-id]:hover, .side nav a:hover { transform: none !important; }
}