/*!
 * MMD Pupil Portal — Core UI CSS (Home page + core components)
 * Version: v1.1.1 (2026-02-24)
 *
 * Scope:
 * - Instructor site (pupil portal)
 * - Namespaced to avoid theme collisions
 * - Provides centred container, button-style links, light premium UI
 *
 * Usage expectations:
 * - Wrap all portal output with: <div class="mmd-pd">
 * - Use container: <div class="mmd-pd__container"> ... </div>
 * - Use buttons for actions/primary links: <a class="mmd-btn">...</a>
 */

/* --------------------------------------------------------------------------
   Design tokens (kept aligned with diary UI)
--------------------------------------------------------------------------- */

:root{
  --mmd-bg: #ffffff;
  --mmd-surface: #ffffff;
  --mmd-surface-2: #f7f8fa;

  --mmd-text: #0f172a;
  --mmd-text-2: #334155;
  --mmd-text-3: #64748b;
  --mmd-muted: #94a3b8;

  --mmd-border: #e5e7eb;
  --mmd-border-2: #d7dce4;

  --mmd-ring: rgba(59,130,246,.22);

  --mmd-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --mmd-shadow-md: 0 10px 25px rgba(15, 23, 42, .08);

  --mmd-radius: 12px;
  --mmd-radius-sm: 10px;

  --mmd-control-h: 44px;
  --mmd-control-pad-x: 14px;
  --mmd-control-pad-y: 10px;
}

/* --------------------------------------------------------------------------
   Namespace + base
--------------------------------------------------------------------------- */

.mmd-pd,
.mmd-pd *{
  box-sizing: border-box;
}

.mmd-pd{
  color: var(--mmd-text);
  background: transparent; /* don't fight theme backgrounds */
  font-family: var(--mmd-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  line-height: 1.5;
}

.mmd-pd p,
.mmd-pd li{
  color: var(--mmd-text-2);
}

/* --------------------------------------------------------------------------
   Centred page container (main content holder)
--------------------------------------------------------------------------- */

.mmd-pd__container{
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 18px 14px;
}

@media (min-width: 768px){
  .mmd-pd__container{
    padding: 26px 18px;
  }
}

/* Optional page header area */
.mmd-pd__page-title{
  margin: 0 0 14px 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 650;
  color: var(--mmd-text);
  letter-spacing: -0.2px;
}

.mmd-pd__subtitle{
  margin: 0 0 18px 0;
  font-size: 14px;
  color: var(--mmd-text-3);
}

/* --------------------------------------------------------------------------
   Links (safe defaults) + button links
--------------------------------------------------------------------------- */

/* Default link style inside portal (kept subtle) */
.mmd-pd a{
  color: #1d4ed8; /* blue-700 */
  text-decoration: none;
  text-underline-offset: 2px;
}

.mmd-pd a:hover{
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Buttons (used for links “where practical”)
--------------------------------------------------------------------------- */

.mmd-pd .mmd-btn,
.mmd-pd button.mmd-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 42px;
  padding: 0 14px;

  border-radius: 10px;
  border: 1px solid var(--mmd-border-2);
  background: var(--mmd-surface);
  color: var(--mmd-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1px;

  box-shadow: var(--mmd-shadow-sm);
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  text-decoration: none; /* for <a> */
  white-space: nowrap;
}

.mmd-pd .mmd-btn:hover{
  text-decoration: none;
  border-color: #cbd5e1; /* slate-300 */
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.mmd-pd .mmd-btn:active{
  transform: translateY(1px);
  box-shadow: var(--mmd-shadow-sm);
}

.mmd-pd .mmd-btn:focus{
  outline: none;
}

.mmd-pd .mmd-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--mmd-ring), var(--mmd-shadow-sm);
  border-color: #93c5fd;
}

.mmd-pd .mmd-btn[disabled],
.mmd-pd button.mmd-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Primary */
.mmd-pd .mmd-btn--primary{
  background: #0f172a; /* slate-900 */
  border-color: #0f172a;
  color: #fff;
}

.mmd-pd .mmd-btn--primary:hover{
  background: #111c33;
  border-color: #111c33;
}

/* Secondary (light, not “heavy/dark”) */
.mmd-pd .mmd-btn--secondary{
  background: #f8fafc; /* slate-50 */
  border-color: var(--mmd-border);
  color: var(--mmd-text);
}

.mmd-pd .mmd-btn--secondary:hover{
  background: #ffffff;
  border-color: #cbd5e1;
}

/* Small button (for tight action columns) */
.mmd-pd .mmd-btn--sm{
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
}

/* Full-width (mobile friendly) */
.mmd-pd .mmd-btn--block{
  width: 100%;
}

/* --------------------------------------------------------------------------
   Home page: cards + panels
--------------------------------------------------------------------------- */

/* Dashboard grid removed (was conflicting with diary table .mmd-pd-grid) */

.mmd-pd .mmd-pd-card{
  background: var(--mmd-surface);
  border: 1px solid var(--mmd-border);
  border-radius: var(--mmd-radius);
  box-shadow: var(--mmd-shadow-sm);
  padding: 16px 16px 14px 16px;
}

@media (min-width: 768px){
  .mmd-pd .mmd-pd-card{
    padding: 18px;
  }
}

.mmd-pd .mmd-pd-card__title{
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--mmd-text);
}

.mmd-pd .mmd-pd-card__meta{
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--mmd-text-2);
}

.mmd-pd .mmd-pd-card__muted{
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--mmd-text-3);
}

.mmd-pd .mmd-pd-card__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Small “pill” labels */
.mmd-pd .mmd-pd-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--mmd-border);
  background: var(--mmd-surface-2);
  font-size: 13px;
  color: var(--mmd-text-2);
}

/* --------------------------------------------------------------------------
   Tables (for My Lessons alignment later; safe base)
--------------------------------------------------------------------------- */

.mmd-pd table{
  width: 100%;
  border-collapse: collapse;
}

.mmd-pd .mmd-pd-table{
  border: 1px solid var(--mmd-border);
  border-radius: var(--mmd-radius);
  overflow: hidden;
  background: var(--mmd-surface);
  box-shadow: var(--mmd-shadow-sm);
}

.mmd-pd .mmd-pd-table th,
.mmd-pd .mmd-pd-table td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--mmd-border);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}

.mmd-pd .mmd-pd-table th{
  font-weight: 650;
  color: var(--mmd-text);
  background: #fbfcfe;
}

.mmd-pd .mmd-pd-table tr:last-child td{
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Utilities
--------------------------------------------------------------------------- */

.mmd-pd .mmd-pd-mt-0{ margin-top: 0 !important; }
.mmd-pd .mmd-pd-mt-10{ margin-top: 10px !important; }
.mmd-pd .mmd-pd-mt-14{ margin-top: 14px !important; }
.mmd-pd .mmd-pd-mt-18{ margin-top: 18px !important; }

.mmd-pd .mmd-pd-mb-0{ margin-bottom: 0 !important; }
.mmd-pd .mmd-pd-mb-10{ margin-bottom: 10px !important; }
.mmd-pd .mmd-pd-mb-14{ margin-bottom: 14px !important; }
.mmd-pd .mmd-pd-mb-18{ margin-bottom: 18px !important; }


/* --------------------------------------------------------------------------
   Home page specific (matches markup in mmd-portal-home.php)
--------------------------------------------------------------------------- */

.mmd-pd-home{
  display: grid;
  gap: 14px;
}

.mmd-pd-section{
  margin-top: 14px;
}

.mmd-pd-home__footer{
  margin-top: 16px;
}

/* Card internals used by home + lesson cards */
.mmd-pd-card__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mmd-pd-card__row{
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 8px;
  color: var(--mmd-text-2);
  font-size: 14px;
}

.mmd-pd-label{
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--mmd-border);
  background: var(--mmd-surface-2);
  color: var(--mmd-text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

/* “None found” + muted helper text */
.mmd-pd .mmd-muted,
.mmd-pd-muted{
  color: var(--mmd-text-3);
  font-size: 14px;
}


/* --------------------------------------------------------------------------
   Forms + controls (Login / My Details / general)
--------------------------------------------------------------------------- */

.mmd-pd .mmd-pd-box{
  width: min(460px, 100%);
  margin: 28px auto;
  padding: 22px 20px 18px 20px;
  background: var(--mmd-surface);
  border: 1px solid var(--mmd-border);
  border-radius: 18px;
  box-shadow: var(--mmd-shadow-md);
}

@media (min-width: 768px){
  .mmd-pd .mmd-pd-box{
    padding: 26px 24px 20px 24px;
  }
}

.mmd-pd .mmd-pd-box h2{
  margin: 0 0 14px 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  font-weight: 750;
  color: var(--mmd-text);
}

/* Paragraphs used as form rows in existing markup */
.mmd-pd .mmd-pd-box form p{
  margin: 0 0 14px 0;
}

/* Labels: lighter + more premium spacing */
.mmd-pd .mmd-pd-box label{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--mmd-text-2);
}

.mmd-pd .mmd-pd-box label br{
  display: none; /* avoid “Email” sitting on top of input too tightly */
}

.mmd-pd .mmd-pd-box input[type="email"],
.mmd-pd .mmd-pd-box input[type="password"],
.mmd-pd .mmd-pd-box input[type="text"],
.mmd-pd .mmd-pd-box input[type="tel"],
.mmd-pd .mmd-pd-box input[type="number"],
.mmd-pd .mmd-pd-box select,
.mmd-pd .mmd-pd-box textarea{
  width: 100%;
  height: var(--mmd-control-h);
  padding: 0 var(--mmd-control-pad-x);
  border-radius: 12px;
  border: 1px solid var(--mmd-border-2);
  background: var(--mmd-surface);
  color: var(--mmd-text);
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(15,23,42,.02);
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  margin-top: 8px;
}

.mmd-pd .mmd-pd-box textarea{
  min-height: 110px;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
}

.mmd-pd .mmd-pd-box input::placeholder,
.mmd-pd .mmd-pd-box textarea::placeholder{
  color: var(--mmd-muted);
}

.mmd-pd .mmd-pd-box input:focus,
.mmd-pd .mmd-pd-box select:focus,
.mmd-pd .mmd-pd-box textarea:focus{
  outline: none;
}

.mmd-pd .mmd-pd-box input:focus-visible,
.mmd-pd .mmd-pd-box select:focus-visible,
.mmd-pd .mmd-pd-box textarea:focus-visible{
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px var(--mmd-ring);
}

/* Notices */
.mmd-pd .mmd-pd-notice{
  border-radius: 12px;
  padding: 12px 12px;
  border: 1px solid var(--mmd-border);
  background: var(--mmd-surface-2);
  color: var(--mmd-text-2);
  font-size: 14px;
  margin: 0 0 14px 0;
}

.mmd-pd .mmd-pd-notice.mmd-pd-error{
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.06);
  color: #7f1d1d;
}

.mmd-pd .mmd-pd-notice.mmd-pd-success{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.08);
  color: #14532d;
}

/* Login mode row (Password / SMS code) */
.mmd-pd .mmd-pd-login-mode{
  margin: 10px 0 14px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--mmd-border);
  background: var(--mmd-surface-2);
}

/* That “Sign in” button used as a label in PHP markup */
.mmd-pd .mmd-pd-login-mode strong button{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: none;
}

/* Custom radios + checkboxes (clean, easy to hit) */
.mmd-pd .mmd-pd-box input[type="radio"],
.mmd-pd .mmd-pd-box input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(15,23,42,.03);
  display: inline-grid;
  place-content: center;
  margin: 0;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.mmd-pd .mmd-pd-box input[type="radio"]{
  border-radius: 999px;
}

.mmd-pd .mmd-pd-box input[type="checkbox"]{
  border-radius: 6px;
}

.mmd-pd .mmd-pd-box input[type="radio"]::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: scale(0);
  transition: transform .12s ease;
  background: #0f172a;
}

.mmd-pd .mmd-pd-box input[type="checkbox"]::before{
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .12s ease;
  background: #0f172a;
  border-radius: 3px;
}

.mmd-pd .mmd-pd-box input[type="radio"]:checked::before,
.mmd-pd .mmd-pd-box input[type="checkbox"]:checked::before{
  transform: scale(1);
}

.mmd-pd .mmd-pd-box input[type="radio"]:focus-visible,
.mmd-pd .mmd-pd-box input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--mmd-ring);
  border-color: #93c5fd;
}

.mmd-pd .mmd-pd-box input[type="radio"]:hover,
.mmd-pd .mmd-pd-box input[type="checkbox"]:hover{
  border-color: #94a3b8;
}

/* Checkbox row (“Stay signed in”) */
.mmd-pd .mmd-pd-box label:has(input[type="checkbox"]),
.mmd-pd .mmd-pd-box label:has(input[type="radio"]){
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  color: var(--mmd-text-2);
}

/* Make primary login action full-width on mobile */
.mmd-pd .mmd-pd-box .mmd-btn{
  min-width: 140px;
}

@media (max-width: 520px){
  .mmd-pd .mmd-pd-box .mmd-btn{
    width: 100%;
  }
  .mmd-pd .mmd-pd-login-mode{
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* “Forgotten your password?” link */
.mmd-pd .mmd-pd-box a{
  font-weight: 600;
}
/* --------------------------------------------------------------------------
   Diary Grid: keep date header attached to grid
   NOTE: This targets ONLY the pupil diary grid table (.mmd-pd-grid) to avoid
   side-effects elsewhere.
--------------------------------------------------------------------------- */

.mmd-pd.mmd-pd-diary .mmd-pd-grid-scroll{
  /* ensure header and body share the same scroll context */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.mmd-pd.mmd-pd-diary table.mmd-pd-grid{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Force real table layout in case anything earlier set block/flex */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid thead{ display: table-header-group !important; }
.mmd-pd.mmd-pd-diary table.mmd-pd-grid tbody{ display: table-row-group !important; }
.mmd-pd.mmd-pd-diary table.mmd-pd-grid tr{ display: table-row !important; }
.mmd-pd.mmd-pd-diary table.mmd-pd-grid th,
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td{
  display: table-cell !important;
  float: none !important;
  position: static;
}

/* Sticky header (quality-of-life; harmless even if not needed) */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--mmd-surface);
}

/* Sticky time column */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid .mmd-pd-col-time,
.mmd-pd.mmd-pd-diary table.mmd-pd-grid .mmd-pd-time{
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--mmd-surface);
}

/* Ensure top-left header cell sits above both sticky planes */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid thead .mmd-pd-col-time{
  z-index: 4;
}

/* --------------------------------------------------------------------------
   Diary Grid (Pupil booking browse)
   NOTE: Table uses class .mmd-pd-grid (do NOT repurpose this class elsewhere)
--------------------------------------------------------------------------- */

.mmd-pd.mmd-pd-diary .mmd-pd-grid-scroll{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--mmd-border);
  border-radius: var(--mmd-radius);
  background: var(--mmd-surface);
  box-shadow: var(--mmd-shadow-sm);
}

/* Hard reset in case anything previously forced block/grid layouts */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.mmd-pd.mmd-pd-diary table.mmd-pd-grid thead{ display: table-header-group; }
.mmd-pd.mmd-pd-diary table.mmd-pd-grid tbody{ display: table-row-group; }
.mmd-pd.mmd-pd-diary table.mmd-pd-grid tr{ display: table-row; }
.mmd-pd.mmd-pd-diary table.mmd-pd-grid th,
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td{
  display: table-cell;
  float: none;
  vertical-align: middle;
}

/* Cell styling */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid th,
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td{
  border-right: 1px solid var(--mmd-border);
  border-bottom: 1px solid var(--mmd-border);
  padding: 10px 10px;
  font-size: 14px;
  color: var(--mmd-text-2);
  background: var(--mmd-surface);
}
.mmd-pd.mmd-pd-diary table.mmd-pd-grid th:last-child,
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td:last-child{
  border-right: 0;
}
.mmd-pd.mmd-pd-diary table.mmd-pd-grid tbody tr:last-child td{
  border-bottom: 0;
}

/* Header row (dates) */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--mmd-surface-2);
  color: var(--mmd-text);
  font-weight: 650;
}

/* Time column */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid .mmd-pd-col-time,
.mmd-pd.mmd-pd-diary table.mmd-pd-grid .mmd-pd-time{
  width: 88px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--mmd-surface-2);
  font-variant-numeric: tabular-nums;
  color: var(--mmd-text);
}
.mmd-pd.mmd-pd-diary table.mmd-pd-grid thead .mmd-pd-col-time{
  z-index: 4; /* top-left corner */
}

/* Slots */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td{
  text-align: center;
}
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td a{
  display: inline-flex;
  width: 100%;
  height: 100%;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
  color: inherit;
}

/* State tokens (works with existing text like Available/Booked/Requested) */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td .mmd-pd-slot--available,
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td a.mmd-pd-slot--available{
  background: #f8fafc;
}
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td .mmd-pd-slot--booked,
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td a.mmd-pd-slot--booked{
  background: rgba(59,130,246,.10);
  color: #1d4ed8;
  font-weight: 650;
}
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td .mmd-pd-slot--requested,
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td a.mmd-pd-slot--requested{
  background: rgba(245,158,11,.12);
  color: #92400e;
  font-weight: 650;
}
/* --------------------------------------------------------------------------
   Diary Grid — Slot clarity (pastel states + “Available” symbol)
   Note: grid cells rely on semantic classes from mmd-pd-diary-grid.php:
   - mmd-pd-slot-available
   - mmd-pd-slot-off / mmd-pd-slot-unavailable
   - mmd-pd-slot-booked*, mmd-pd-slot-requested* + mmd-pd-slot-own
--------------------------------------------------------------------------- */

/* Keep “Available” subtle */
.mmd-pd.mmd-pd-diary .mmd-pd-slot-available{
  background: #f8faf8;
}

.mmd-pd.mmd-pd-diary .mmd-pd-slot-available .mmd-pd-slot-link{
  display: block;
  width: 100%;
  height: 100%;
  color: var(--mmd-muted);
  text-decoration: none;
}

.mmd-pd.mmd-pd-diary .mmd-pd-slot-available .mmd-pd-slot-link:hover{
  color: var(--mmd-text-2);
  text-decoration: none;
}

/* dash symbol */
.mmd-pd.mmd-pd-diary .mmd-pd-slot-symbol{
  display: inline-block;
  font-weight: 600;
  opacity: .65;
}

/* Pupil-owned bookings (your own lessons) */
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-own{
  background: #e8f1ff;         /* soft blue */
  color: #1f3f75;
  font-weight: 650;
}

/* Requested (still pupil-owned) – slightly different cue */
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-requested,
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-requested-start{
  background: #fff4e5;         /* soft amber */
  color: #7a4d00;
}

/* Unavailable / blocked */
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-off,
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-unavailable{
  background: #f2f2f2;         /* soft grey */
  color: var(--mmd-muted);
}

/* Improve readability by centering content in grid cells */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td{
  text-align: center;
}


/* Accessibility */
.mmd-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}


/* =========================================================
   Diary Grid – compact icons + pastel state colours
   ========================================================= */

.mmd-pd.mmd-pd-diary .mmd-pd-grid-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}

.mmd-pd.mmd-pd-diary table.mmd-pd-grid{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}

.mmd-pd.mmd-pd-diary table.mmd-pd-grid th{
  padding:10px 8px;
  text-align:center;
  vertical-align:middle;
  white-space:normal; /* allow Tue
24
Feb etc */
  overflow:visible;
  text-overflow:clip;
  line-height:1.15;
}

.mmd-pd.mmd-pd-diary table.mmd-pd-grid td{
  padding:12px 8px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}

/* keep time column readable */
.mmd-pd.mmd-pd-diary table.mmd-pd-grid th:first-child,
.mmd-pd.mmd-pd-diary table.mmd-pd-grid td:first-child{
  width:78px;
  font-variant-numeric:tabular-nums;
}

/* Slot icons */
.mmd-pd.mmd-pd-diary .mmd-pd-slot-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.75em;
  height:1.75em;
  border-radius:999px;
  line-height:1;
  font-weight:700;
  font-size:14px;
}

/* Available – quiet */
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-available{
  background:#f7faf7;
}
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-available .mmd-pd-slot-icon--available{
  color:#8c979f;
  background:transparent;
  border:1px solid rgba(140,151,159,.35);
}

/* Own booked */
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-own.mmd-pd-slot-booked,
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-own.mmd-pd-slot-booked-start{
  background:#e8f1ff;
}
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-own .mmd-pd-slot-icon--booked{
  color:#1f3f75;
  background:rgba(31,63,117,.08);
  border:1px solid rgba(31,63,117,.18);
}

/* Own requested */
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-own.mmd-pd-slot-requested,
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-own.mmd-pd-slot-requested-start{
  background:#fff4e5;
}
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-own .mmd-pd-slot-icon--requested{
  color:#8a5a00;
  background:rgba(138,90,0,.08);
  border:1px solid rgba(138,90,0,.18);
}

/* Unavailable / off */
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-off,
.mmd-pd.mmd-pd-diary td.mmd-pd-slot-unavailable{
  background:#f1f3f5;
  color:#97a2aa;
}

/* Disable state (limit reached / terms blocked) */
.mmd-pd.mmd-pd-diary .mmd-pd-slot-disabled-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#97a2aa;
}

/* Mobile density – stop overlaps */
@media (max-width: 520px){
  .mmd-pd.mmd-pd-diary table.mmd-pd-grid th,
  .mmd-pd.mmd-pd-diary table.mmd-pd-grid td{
    padding:10px 6px;
    font-size:14px;
  }
  .mmd-pd.mmd-pd-diary .mmd-pd-slot-icon{
    width:1.6em;
    height:1.6em;
    font-size:13px;
  }
}


/* ===== Diary grid icons (Dashicons) ===== */
.mmd-pd.mmd-pd-diary .mmd-pd-slot-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,0.18);
  background:rgba(255,255,255,0.65);
  font-size:18px;
  line-height:1;
  color: rgba(17,24,39,0.78); /* single-colour (no emoji multi-colour) */
}

/* ensure dashicons render at the right size */
.mmd-pd.mmd-pd-diary .mmd-pd-slot-icon.dashicons:before{
  font-size:18px;
  line-height:1;
}

/* subtle: available should feel quieter than booked/requested */
.mmd-pd.mmd-pd-diary .mmd-pd-slot-icon--available{
  color: rgba(17,24,39,0.45);
}

/* Mobile tuning */
@media (max-width: 520px){
  .mmd-pd.mmd-pd-diary table.mmd-pd-grid th:first-child,
  .mmd-pd.mmd-pd-diary table.mmd-pd-grid td:first-child{
    width:58px;
    font-size:13px;
  }

  .mmd-pd.mmd-pd-diary table.mmd-pd-grid th{
    font-size:12px;
    padding:8px 4px;
  }

  .mmd-pd.mmd-pd-diary table.mmd-pd-grid td{
    padding:10px 4px;
  }

  .mmd-pd.mmd-pd-diary .mmd-pd-slot-icon{
    width:26px;
    height:26px;
  }
  .mmd-pd.mmd-pd-diary .mmd-pd-slot-icon.dashicons:before{
    font-size:16px;
  }
}




/* ======================================================================
   Diary grid: header date formatting (3-line: Day / Date / Month)
   ====================================================================== */

.mmd-pd.mmd-pd-diary table.mmd-pd-grid thead th.mmd-pd-col-day{
  line-height: 1.05;
  padding-top: 10px;
  padding-bottom: 10px;
}

.mmd-pd.mmd-pd-diary .mmd-pd-date-dow{
  display:block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.mmd-pd.mmd-pd-diary .mmd-pd-date-day{
  display:block;
  font-size: 16px;
  font-weight: 800;
  margin-top: 2px;
}

.mmd-pd.mmd-pd-diary .mmd-pd-date-mon{
  display:block;
  font-size: 12px;
  font-weight: 700;
  opacity: .85;
  margin-top: 2px;
}
/* ======================================================================
   Diary grid: top controls (compact, icon-led)
   ====================================================================== */

.mmd-pd.mmd-pd-diary .mmd-pd-grid-top{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:flex-end;
  justify-content:space-between;
  margin: 0 0 10px 0;
}

.mmd-pd.mmd-pd-diary .mmd-pd-grid-nav{
  display:flex;
  gap:10px;
  align-items:center;
}

.mmd-pd.mmd-pd-diary .mmd-pd-grid-view{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.mmd-pd.mmd-pd-diary .mmd-pd-grid-jump{
  display:flex;
  gap:8px;
  align-items:center;
}

.mmd-pd.mmd-pd-diary .mmd-pd-grid-date-wrap{
  position: relative;
  display: inline-block;
}

.mmd-pd.mmd-pd-diary .mmd-pd-grid-date-wrap:before{
  content: "\f508"; /* dashicons-calendar-alt */
  font-family: "dashicons";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  opacity: .65;
  pointer-events: none;
}


.mmd-pd.mmd-pd-diary .mmd-pd-grid-icon-btn .dashicons{
  font-size:18px;
  width:18px;
  height:18px;
  line-height:1;
}

.mmd-pd.mmd-pd-diary .mmd-pd-grid-icon-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
}

.mmd-pd.mmd-pd-diary .mmd-pd-grid-btn-text{
  font-size:14px;
  font-weight:600;
}

.mmd-pd.mmd-pd-diary .mmd-pd-grid-view-num{
  font-weight:700;
}
.mmd-pd.mmd-pd-diary .mmd-pd-grid-view-suf{
  font-size:12px;
  opacity:.7;
  margin-left:2px;
}

.mmd-pd.mmd-pd-diary .mmd-pd-grid-date{
  max-width: 170px;
  padding-left: 40px;
}

/* Hide the redundant date range line above the grid (dates are in headers) */
.mmd-pd.mmd-pd-diary .mmd-pd-grid-range{
  display:none;
}

/* Mobile: tighter, less vertical space, icons-first */
@media (max-width: 520px){
  .mmd-pd.mmd-pd-diary .mmd-pd-grid-top{
    gap:8px 10px;
  }

  .mmd-pd.mmd-pd-diary .mmd-pd-grid-icon-btn{
    padding: 8px 10px;
    gap:6px;
  }

  /* Hide helper text where icons are obvious */
  .mmd-pd.mmd-pd-diary .mmd-pd-grid-nav .mmd-pd-grid-btn-text{
    display:none;
  }

  .mmd-pd.mmd-pd-diary .mmd-pd-grid-jump{
    flex: 1 1 100%;
    justify-content:flex-start;
  }

  /* Keep the date picker compact on mobile */
  .mmd-pd.mmd-pd-diary .mmd-pd-grid-date{
    max-width: 260px;
    width: 260px;
  }
}

@media (max-width: 360px){
  .mmd-pd.mmd-pd-diary .mmd-pd-grid-date{
    max-width: 100%;
    width: 100%;
  }
}

/* ===== Terms notice prominence (Diary Grid) ===== */
.mmd-pd.mmd-pd-diary .mmd-pd-notice--terms{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.mmd-pd.mmd-pd-diary .mmd-pd-notice--terms .mmd-pd-notice__icon{
  font-size:20px;
  line-height:1;
  opacity:.75;
}

.mmd-pd.mmd-pd-diary .mmd-pd-notice--terms .mmd-pd-notice__content{
  flex: 1 1 auto;
  min-width: 0;
}

.mmd-pd.mmd-pd-diary .mmd-pd-notice--terms .mmd-pd-notice__action{
  white-space: nowrap;
}

/* Make it harder to miss on mobile: keep it near the top while scrolling */
@media (max-width: 600px){
  .mmd-pd.mmd-pd-diary .mmd-pd-notice--terms{
    position: sticky;
    top: 10px;
    z-index: 40;
  }
  .mmd-pd.mmd-pd-diary .mmd-pd-notice--terms .mmd-pd-notice__action{
    width: 100%;
    text-align:center;
  }
  .mmd-pd.mmd-pd-diary .mmd-pd-notice--terms{
    flex-wrap: wrap;
  }
}



/* ======================================================================
   Portal Loader Overlay (v1.1.4 add-on)
   - Lightweight “feels faster” overlay shown during navigation / submits
   - Scoped to .mmd-pd only
   ====================================================================== */

/* Support both class naming schemes:
   - JS uses: .mmd-pd-loader, .mmd-pd-loader__card, ...
   - CSS originally drafted: .mmd-pd-loader-overlay, .mmd-pd-loader-card, ...
*/
.mmd-pd-loader,
.mmd-pd-loader-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
  background:rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mmd-pd-loader.is-active,
.mmd-pd-loader-overlay.is-active{ display:flex; }

.mmd-pd-loader__card,
.mmd-pd-loader-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.mmd-pd-loader__spinner,
.mmd-pd-loader-spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.16);
  border-top-color: rgba(0,0,0,.55);
  animation:mmdPdSpin .8s linear infinite;
}

.mmd-pd-loader__text,
.mmd-pd-loader-text{
  font-size:14px;
  font-weight:600;
  color:rgba(0,0,0,.75);
  letter-spacing:.2px;
}

@keyframes mmdPdSpin{
  to{ transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .mmd-pd-loader__spinner,
  .mmd-pd-loader-spinner{ animation:none; border-top-color: rgba(0,0,0,.16); }
}

@media (prefers-color-scheme: dark){
  .mmd-pd-loader,
  .mmd-pd-loader-overlay{ background:rgba(10,12,14,.55); }

  .mmd-pd-loader__card,
  .mmd-pd-loader-card{
    background:rgba(18,20,23,.92);
    border-color:rgba(255,255,255,.12);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
  }

  .mmd-pd-loader__text,
  .mmd-pd-loader-text{ color:rgba(255,255,255,.86); }

  .mmd-pd-loader__spinner,
  .mmd-pd-loader-spinner{
    border-color:rgba(255,255,255,.18);
    border-top-color:rgba(255,255,255,.65);
  }
}


/* ======================================================================
   v1.1.5 – Diary Grid: booking window clamp support + stronger Terms notice
   ====================================================================== */

/* Terms notice (booking locked) – make it unmissable without being shouty */
.mmd-pd .mmd-pd-notice.mmd-pd-notice--terms{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border-left-width:6px;
  border-left-style:solid;
  border-left-color: rgba(210, 120, 0, .85);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 12px 14px;
}

.mmd-pd .mmd-pd-notice.mmd-pd-notice--terms .dashicons{
  font-size:18px;
  line-height:1;
  margin-top:2px;
  opacity:.9;
}

.mmd-pd .mmd-pd-notice.mmd-pd-notice--terms strong{
  display:inline-block;
  margin-right:6px;
}

.mmd-pd .mmd-pd-notice.mmd-pd-notice--terms .mmd-btn{
  margin-left:auto;
  white-space:nowrap;
}

/* Mobile: keep the notice visible while scrolling the grid */
@media (max-width: 640px){
  .mmd-pd .mmd-pd-notice.mmd-pd-notice--terms{
    position: sticky;
    top: 10px;
    z-index: 50;
  }
}