/* ================================================================
   FamilyRoutine — Omar & Hana inspired theme
   Palette: Sky Blue · Sunshine Yellow · Coral · Grass Green
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Nunito:wght@400;600;700;800;900&display=swap');

/* ---- CSS Variables ---- */
:root {
  /* Brand colours (Omar & Hana inspired) */
  --sky:        #008196;
  --sky-dark:   #007A94;
  --sky-light:  #E0F7FA;
  --yellow:     #FFD300;
  --yellow-dk:  #E6B800;
  --coral:      #FF6B6B;
  --coral-dk:   #E03E3E;
  --green:      #4CAF50;
  --green-dk:   #388E3C;
  --purple:     #9C27B0;
  --purple-dk:  #6A1B9A;

  /* Neutral / surface */
  --bg:         #F5FCFF;
  --surface:    #FFFFFF;
  --cream:      #FFFDE7;
  --border:     #D8F0F7;
  --text:       #1A3040;
  --text-soft:  #4A7080;

  /* Child column accent colours */
  /* --c0-dark was #007A94, which is 4.47 against its own --c0-bg and so just
     misses the 4.5 AA requirement for the child's name. One step darker. */
  --c0: #008196; --c0-bg: #E0F7FA; --c0-dark: #00738B;
  --c1: #FF9800; --c1-bg: #FFF8E1; --c1-dark: #C44500;
  --c2: #E91E8C; --c2-bg: #FCE4EC; --c2-dark: #880E4F;
  --c3: #43A047; --c3-bg: #E8F5E9; --c3-dark: #1B5E20;

  /* Period colours */
  --morning-col: #FF9800;
  --midday-col:  #008196;
  --evening-col: #7B1FA2;

  --radius:    18px;
  --shadow:    0 4px 16px rgba(0,120,160,0.12);
  --shadow-lg: 0 8px 32px rgba(0,120,160,0.18);
  --font:      'Nunito', sans-serif;
  --font-ar:   'Amiri', serif;
}

/* ---- Base ---- */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  /* NO min-height here. This used to be min-height: 100vh, from the Bootstrap
     layout where the document itself scrolled. Under Framework7 it is actively
     harmful on Android: 100vh is the LARGE viewport (the height with the URL bar
     hidden), so body became taller than the visible area, the document itself
     started scrolling, and .page (position: absolute; bottom: 0) put the tab bar
     at the bottom of a box you could not see the bottom of. Reported from a
     Galaxy S23 as "the menu buttons only appear if I scroll all the way down".
     Framework7 owns the height chain now; see f7_bridge.css. */
}

/* Subtle polka-dot background (playful, child-friendly) */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(0,174,203,.08) 1px, transparent 1px);
  background-size: 28px 28px;
}
.shiny-bound-input, .shiny-bound-output,
.container-fluid, .tab-content { position: relative; z-index: 1; }

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
  background: linear-gradient(135deg, var(--sky-dark) 0%, var(--sky) 100%) !important;
  box-shadow: 0 4px 20px rgba(0,120,160,0.25) !important;
  /* border-bottom removed 2026-07-31: see the note on the later .navbar block. */
}





.nav-date-chip {
  background: rgba(255,255,255,.18);
  border-radius: 50px; padding: 4px 14px;
  color: #fff; font-size: .8rem; font-weight: 700;
}

/* ================================================================
   GENERIC CARDS
   ================================================================ */
.card {
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  background: var(--surface) !important;
}
/* Gradient only on plain card headers — NOT on navset tab bars */
.card-header:not(:has(.nav)) {
  background: linear-gradient(135deg, var(--sky-dark) 0%, var(--sky) 100%) !important;
  color: #fff !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-weight: 800;
  border-bottom: 3px solid var(--yellow) !important;
}

/* navset_card_underline tab bar — white background, themed text */
.card-header:has(.nav) {
  background: var(--surface) !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 0 16px !important;
}

/* ================================================================
   KIDS ROUTINE COLUMNS  ← main UI
   ================================================================ */

/* Outer grid */
.kids-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 4px 2px 16px;
}

/* One child column */
.kid-col {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 3px solid transparent;
}
.kid-col[data-ci="0"] { border-color: var(--c0);  }
.kid-col[data-ci="1"] { border-color: var(--c1);  }
.kid-col[data-ci="2"] { border-color: var(--c2);  }
.kid-col[data-ci="3"] { border-color: var(--c3);  }

/* Column header — bright, branded */
.kid-col-header {
  padding: 14px 16px 10px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
}
.kid-col[data-ci="0"] .kid-col-header { background: var(--c0-bg); }
.kid-col[data-ci="1"] .kid-col-header { background: var(--c1-bg); }
.kid-col[data-ci="2"] .kid-col-header { background: var(--c2-bg); }
.kid-col[data-ci="3"] .kid-col-header { background: var(--c3-bg); }

.kid-col-name {
  font-size: 1.25rem; font-weight: 900; letter-spacing: .01em;
}
.kid-col[data-ci="0"] .kid-col-name { color: var(--c0-dark); }
.kid-col[data-ci="1"] .kid-col-name { color: var(--c1-dark); }
.kid-col[data-ci="2"] .kid-col-name { color: var(--c2-dark); }
.kid-col[data-ci="3"] .kid-col-name { color: var(--c3-dark); }

/* Progress bar */
.kid-progress-wrap { flex: 1; }
.kid-progress-track {
  height: 9px; border-radius: 50px;
  background: rgba(0,0,0,.08); overflow: hidden;
}
.kid-progress-fill {
  height: 9px; border-radius: 50px;
  transition: width .6s ease;
}
.kid-col[data-ci="0"] .kid-progress-fill { background: linear-gradient(90deg, var(--c0), #4DD0E1); }
.kid-col[data-ci="1"] .kid-progress-fill { background: linear-gradient(90deg, var(--c1), var(--yellow)); }
.kid-col[data-ci="2"] .kid-progress-fill { background: linear-gradient(90deg, var(--c2), #FF80AB); }
.kid-col[data-ci="3"] .kid-progress-fill { background: linear-gradient(90deg, var(--c3), #A5D6A7); }

.kid-pct {
  font-size: .8rem; font-weight: 900;
  min-width: 36px; text-align: right; color: var(--text-soft);
}
.kid-pct.all-done { color: var(--green); }

/* Period label */
.kid-period {
  padding: 5px 14px 3px;
  font-size: .7rem; font-weight: 900;
  letter-spacing: .07em; text-transform: uppercase;
  background: rgba(0,0,0,.03);
  border-top: 1px solid var(--border);
}

/* Card grid */
.kid-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px;
  background: var(--surface);
}

/* Single routine card */
.kid-card {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 16px;
  padding: 14px 6px 10px;
  cursor: pointer;
  user-select: none; -webkit-tap-highlight-color: transparent;
  border: 2.5px solid var(--border);
  background: var(--bg);
  /* background-color, NOT the `background` shorthand.
     The shorthand expands to every background longhand, including
     background-image. 36 of the 48 cards have no category gradient, so that
     asked the browser to transition `none` -> linear-gradient, which is not
     interpolable. Naming background-color transitions the one property that
     can actually animate and lets the gradient swap instantly.

     Caveat, measured 2026-07-30: this was changed while chasing a report that
     the colour "stalls" when a routine is deactivated, and that stall could
     NOT be reproduced, before or after this change. The un-complete tap flips
     the class in ~100 ms, the fill is back to the untouched colour by 60 ms,
     the border matches a never-tapped card exactly, and it survives 30 s of
     polling without reverting. An isolated A/B of the old and new transition
     showed the gradient appearing at 14 ms and 18 ms respectively, so the old
     rule was not holding a discrete frame either. Keep this rule because it is
     correct, not because it is a proven fix. */
  transition: transform .15s ease, box-shadow .15s ease,
              background-color .2s ease, border-color .2s ease;
  min-height: 96px;
}

/* Prayer cards — green Islamic accent so they read as their own thing */
.kid-card-prayer {
  border-color: #A5D6A7;
  background: linear-gradient(160deg, #F1F8E9, #FFFFFF);
}
.kid-card-prayer:not(.done):hover { border-color: #66BB6A; background: #E8F5E9; }
.kid-card-prayer.done { border-color: #66BB6A; background: linear-gradient(160deg,#C8E6C9,#A5D6A7); }
/* Quran card — warm gold accent */
.kid-card-quran {
  border-color: #FFCC80;
  background: linear-gradient(160deg, #FFF8E1, #FFFFFF);
}
.kid-card-quran:not(.done):hover { border-color: #FFB74D; background: #FFF3E0; }
.kid-card-quran.done { border-color: #FFB74D; background: linear-gradient(160deg,#FFE0B2,#FFCC80); }

/* Weekly/monthly recurrence badge */
.rt-freq-badge {
  position: absolute; top: 5px; left: 6px;
  font-size: .58rem; font-weight: 800; line-height: 1;
  padding: 2px 6px; border-radius: 50px;
  background: rgba(13,84,84,.10); color: var(--green-dk, #0D5454);
  white-space: nowrap; pointer-events: none;
}

/* Hover per child column */
.kid-col[data-ci="0"] .kid-card:not(.done):hover { border-color: var(--c0); background: var(--c0-bg); }
.kid-col[data-ci="1"] .kid-card:not(.done):hover { border-color: var(--c1); background: var(--c1-bg); }
.kid-col[data-ci="2"] .kid-card:not(.done):hover { border-color: var(--c2); background: var(--c2-bg); }
.kid-col[data-ci="3"] .kid-card:not(.done):hover { border-color: var(--c3); background: var(--c3-bg); }

.kid-card:active { transform: scale(.95); }

/* ── Language toggle + RTL (Danish ⇄ Arabic) ─────────────────────────────── */
.lang-toggle-btn { font-weight: 900; }
.lang-toggle-fixed {
  position: fixed; top: 14px; inset-inline-end: 14px; z-index: 10000;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--sky); background: #fff; color: var(--sky-dark);
  font-size: 1rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0,120,160,.18);
}
/* RTL: flip text direction; Arabic display font for translated chrome. */
body.rtl { direction: rtl; }
body.rtl .mob-brand,
body.rtl .nav-chip-family { direction: rtl; }
/* Arabic reads better with a slightly larger line; keep numerals LTR. */
body.rtl .kid-card-label,
body.rtl .achiev-day-msg,
body.rtl .prize-name { font-family: 'Amiri', 'Nunito', serif; }
body.rtl .kid-progress-track { direction: ltr; }   /* progress bars stay L→R */

/* Optimistic UI: these outputs update live via client-side JS, so Shiny's
   default "recalculating" grey-out (opacity .3) would just cause a confusing
   flash. Keep them fully opaque during server re-renders. */
#routine_columns_ui.recalculating,
#reward_goal_card_ui.recalculating,
#rewards_parent_controls_ui.recalculating,
#cal_grid_ui.recalculating,
#cal_day_tasks_ui.recalculating {
  opacity: 1 !important;
}

/* Completed state */
.kid-card.done {
  /* Image and colour set separately. The shorthand used here previously also
     reset background-color to transparent, so the card had no colour left to
     animate and the transition above had nothing to act on. */
  background-image: linear-gradient(135deg, #E8F5E9, #C8E6C9) !important;
  background-color: #C8E6C9 !important;
  border-color: var(--green) !important;
}

/* Emoji */
.kid-card-emoji {
  font-size: 2.8rem; line-height: 1; margin-bottom: 7px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
.kid-card:not(.done):hover .kid-card-emoji { transform: scale(1.22) rotate(-8deg); }
.kid-card.done .kid-card-emoji { transform: scale(.88); opacity: .7; }

/* Label */
.kid-card-label {
  font-size: .72rem; font-weight: 800; text-align: center;
  color: var(--text); line-height: 1.2;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kid-card-label-ar {
  font-family: var(--font-ar); font-size: .67rem;
  color: var(--sky-dark); direction: rtl;
  text-align: center; margin-top: 3px; display: block;
}
.kid-card.done .kid-card-label { color: var(--green-dk); }

/* Green ✓ badge */
.kid-card-check {
  position: absolute; top: 6px; right: 8px;
  font-size: 1.15rem; color: var(--green);
  font-weight: 900;
  opacity: 0; transform: scale(0);
  transition: opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.kid-card.done .kid-card-check { opacity: 1; transform: scale(1); }

/* Completion bounce */
@keyframes cardBounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  65%  { transform: scale(.96); }
  100% { transform: scale(1); }
}
.kid-card.just-done { animation: cardBounce .4s ease-out; }

/* ================================================================
   PARENT MODE — CARD ACTION BUTTONS (✏️ / 🗑️) & ADD BUTTON
   ================================================================ */

/* Card needs position:relative so the absolute overlay sits inside it */
.kid-card-parent { position: relative; }

/* Button cluster — hidden by default, shown on hover (desktop) */
.rt-card-actions {
  position: absolute;
  top: 3px; right: 3px;
  display: none;
  gap: 3px;
  z-index: 20;
}
/* Both reveal rules are scoped to parent mode.
   They did not need to be before: the buttons were only RENDERED in parent
   mode, so "always show on touch" could not reach a child. Since RX-06 the
   buttons are always in the DOM and hidden by CSS, which turned this
   `!important` into "every child on a phone sees edit and delete on every
   card". Reported from real use, and the reason a change from render-gating to
   CSS-gating has to audit every rule that touches the thing being gated. */
body.parent-mode .kid-card-parent:hover .rt-card-actions { display: flex; }

/* On touch devices (no hover capability) show them for the whole session
   rather than on hover, which does not exist there. Parent mode only. */
@media (hover: none) {
  body.parent-mode .rt-card-actions { display: flex !important; }
}

.rt-card-btn {
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.96);
  font-size: .9rem;
  cursor: pointer;
  touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: background .12s, box-shadow .12s;
}
.rt-card-btn:hover { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.28); }
.rt-card-del-btn:hover { background: #ffebee; }

/* "＋ Tilføj" dashed button at the bottom of each period section */
.rt-add-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1.5px dashed #b0bec5;
  border-radius: 10px;
  background: transparent;
  color: #78909c;
  font-size: .8rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, color .15s, background .15s;
}
.rt-add-btn:hover {
  border-color: var(--sky);
  color: var(--sky);
  background: var(--sky-light, #e0f7fa);
}

/* ================================================================
   CELEBRATION
   ================================================================ */
#celebration-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; display: none;
}
.celebration-emoji { font-size: 5rem; animation: celebrate .9s ease-out forwards; }
@keyframes celebrate {
  0%   { transform: scale(0) rotate(-20deg); opacity:1; }
  50%  { transform: scale(1.6) rotate(10deg); }
  100% { transform: scale(1.4) rotate(0); opacity:0; }
}

/* ================================================================
   CALENDAR
   ================================================================ */
.task-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--sky-light); margin-bottom: 8px;
  border-left: 4px solid var(--sky); transition: all .2s;
}
.task-item:hover { background: #B2EBF2; transform: translateX(4px); }
.task-item.done { opacity: .55; border-left-color: var(--green); text-decoration: line-through; }
.task-badge {
  background: var(--sky) !important; color: #fff !important;
  border-radius: 8px !important; font-size: .75rem; font-weight: 700; padding: 3px 10px;
}

/* Delete-task button: shipped for everyone, revealed only in parent mode.
   Hidden by default and revealed by ONE parent-mode-scoped rule. Deliberately
   no `@media (hover: none)` variant: that pattern is what leaked the routine
   edit and delete buttons to every child on a phone. A parent on a touch device
   gets it from the rule below, which needs no hover. */
.task-del-btn {
  display: none;
  border: none; background: transparent; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 6px; margin-left: 6px;
  border-radius: 8px; opacity: .75;
  min-width: 34px; min-height: 34px;      /* stays a 34px touch target */
}
.task-del-btn:hover, .task-del-btn:focus-visible { opacity: 1; background: #FFEBEE; }
body.parent-mode .task-del-btn { display: inline-flex; align-items: center; justify-content: center; }

/* ================================================================
   REWARDS
   ================================================================ */
.star-display { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 8px; }
.star-icon { font-size: 1.8rem; animation: starPop .3s cubic-bezier(.34,1.56,.64,1); }
.progress-bar { background: var(--yellow) !important; border-radius: 50px !important; }
.progress { border-radius: 50px !important; background: var(--sky-light) !important; height: 18px !important; }
.bslib-value-box { border-radius: var(--radius) !important; border: none !important; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--sky-dark) 0%, var(--sky) 100%) !important;
  border: none !important; border-radius: 14px !important; font-weight: 800 !important;
  padding: 10px 24px !important;
  box-shadow: 0 4px 15px rgba(0,120,160,.3) !important;
  transition: all .2s !important; color: #fff !important;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,120,160,.4) !important; }

.btn-success {
  background: linear-gradient(135deg, var(--green-dk) 0%, var(--green) 100%) !important;
  border: none !important; border-radius: 14px !important; font-weight: 800 !important;
}

/* ================================================================
   ADMIN
   ================================================================ */
.admin-badge {
  background: linear-gradient(135deg, var(--coral-dk), var(--coral));
  color: #fff; border-radius: 8px; padding: 3px 12px;
  font-size: .8rem; font-weight: 700;
}
.child-tab-btn {
  border-radius: 50px !important; padding: 8px 22px !important; font-weight: 700 !important;
  border: 2px solid var(--sky) !important; background: transparent !important;
  color: var(--sky-dark) !important; transition: all .2s !important; margin: 0 4px;
}
.child-tab-btn.active {
  background: linear-gradient(135deg, var(--sky-dark) 0%, var(--sky) 100%) !important;
  color: #fff !important; border-color: transparent !important;
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes starPop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .35s ease-out both; }

/* ================================================================
   RESPONSIVE — tablet first
   ================================================================ */
@media (max-width: 768px) {
  .kids-columns { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 8px; }
  .kid-card-emoji { font-size: 2.2rem; }
  .kid-card { min-height: 80px; padding: 10px 4px 8px; }
  .kid-card-label { font-size: .65rem; }
}
@media (min-width: 1024px) {
  .kids-columns { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .kid-card-emoji { font-size: 3rem; }
  .kid-card { min-height: 110px; }
}

/* ================================================================
   ADMIN CATALOG TILES
   ================================================================ */
.catalog-period-label {
  font-size: .72rem; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 4px 4px;
  margin-top: 10px;
}
.catalog-tile-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.catalog-tile {
  display: flex; flex-direction: column; align-items: center;
  width: 76px; padding: 8px 4px 6px;
  border-radius: 14px; border: 2px solid var(--border);
  background: var(--bg); cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
  user-select: none; position: relative;
}
.catalog-tile:hover:not(.added) {
  transform: scale(1.08); border-color: var(--sky); background: var(--sky-light);
}
.catalog-tile:active:not(.added) { transform: scale(.95); }
.catalog-tile.added {
  background: #E8F5E9; border-color: var(--green);
  cursor: pointer; opacity: .85;
}
/* Removable tile — show red × on hover, stay clickable */
.catalog-tile.removable:hover {
  background: #FFEBEE; border-color: #E53935; opacity: 1; transform: scale(1.06);
}
.catalog-tile.removable:hover .catalog-tile-done {
  color: #E53935;
}
.catalog-tile.removable:hover .catalog-tile-done::before { content: "✕"; }
.catalog-tile.removable:hover .catalog-tile-done { font-size: 0; } /* hide ✓ text */
.catalog-tile.removable:hover .catalog-tile-done::before { font-size: .85rem; }
.catalog-tile-icon  { font-size: 1.7rem; line-height: 1; margin-bottom: 4px; }
.catalog-tile-label {
  font-size: .6rem; font-weight: 800; text-align: center; color: var(--text);
  line-height: 1.2; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.catalog-tile.added .catalog-tile-label { color: var(--green-dk); }
.catalog-tile-done {
  position: absolute; top: 4px; right: 6px;
  font-size: .85rem; color: var(--green); font-weight: 900;
}

/* ================================================================
   EMOJI PICKER
   ================================================================ */
.emoji-selected-display {
  font-size: 2rem; line-height: 1;
  background: var(--sky-light);
  border-radius: 10px; padding: 4px 10px;
  border: 2px solid var(--border);
  min-width: 52px; text-align: center; display: inline-block;
}
.emoji-toggle-link {
  color: var(--sky-dark) !important; font-weight: 700;
  font-size: .85rem; text-decoration: none !important;
}
.emoji-toggle-link:hover { color: var(--sky) !important; }

.emoji-picker-panel {
  background: white;
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  margin-top: 6px;
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
}
.emoji-cat-label {
  font-size: .68rem; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sky-dark);
  margin: 8px 0 4px;
}
.emoji-cat-label:first-child { margin-top: 0; }

.emoji-cat-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px;
}
.emoji-btn {
  font-size: 1.5rem; line-height: 1;
  padding: 5px 7px;
  border-radius: 10px; border: 1.5px solid transparent;
  background: var(--bg); cursor: pointer;
  transition: transform .1s, border-color .1s, background .1s;
}
.emoji-btn:hover {
  transform: scale(1.25); border-color: var(--sky);
  background: var(--sky-light);
}
.emoji-btn:active { transform: scale(.95); }

.emoji-manual {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}

/* Custom routine form styling */
.custom-routine-form {
  background: var(--bg); border-radius: 14px;
  padding: 16px; margin-top: 10px;
  border: 1.5px solid var(--border);
}

/* ================================================================
   PERIOD FILTER BAR
   ================================================================ */
.period-filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 8px 2px 12px;
}
.period-filter-btn {
  font-size: .88rem; font-weight: 800;
  padding: 7px 18px; border-radius: 50px;
  border: 2.5px solid; background: white;
  cursor: pointer; transition: all .18s ease;
  user-select: none;
}
.period-filter-btn:hover { opacity: .85; transform: translateY(-1px); }
.period-filter-btn.active {
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transform: translateY(-1px);
}

/* ================================================================
   PERIOD SECTION HEADER (inside each child column)
   ================================================================ */
.kid-period-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 6px;
  border-radius: 0;
}
.kid-period-main {
  display: flex; flex-direction: column; gap: 0;
}
.kid-period-main span:first-child {
  font-size: .78rem; font-weight: 900; letter-spacing: .05em;
  text-transform: uppercase;
}
.kid-period-ar {
  font-family: var(--font-ar) !important;
  font-size: .7rem !important; direction: rtl;
  opacity: .7;
}
.kid-period-pct {
  font-size: .78rem; font-weight: 900;
  background: rgba(255,255,255,.6);
  border-radius: 50px; padding: 2px 8px;
  transition: all .3s;
}
.kid-period-pct.complete {
  background: #2ecc71; color: white;
  animation: completePulse .4s ease-out;
}
@keyframes completePulse {
  0%  { transform: scale(1); }
  50% { transform: scale(1.2); }
  100%{ transform: scale(1); }
}

/* ================================================================
   EMOJI PICKER — round & flat
   ================================================================ */
.emoji-btn {
  font-size: 1.5rem; line-height: 1;
  width: 44px; height: 44px;        /* round, touch-friendly */
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--bg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .12s, border-color .12s, background .12s, box-shadow .12s;
}
.emoji-btn:hover {
  transform: scale(1.2);
  border-color: var(--sky);
  background: var(--sky-light);
  box-shadow: 0 3px 10px rgba(0,150,200,.2);
}
.emoji-btn:active { transform: scale(.9); }

/* Typing guidance */
.emoji-type-hint {
  background: var(--sky-light);
  border-radius: 10px; padding: 8px 12px;
  font-size: .78rem; color: var(--sky-dark);
  margin-bottom: 8px; border-left: 3px solid var(--sky);
}
.emoji-type-hint kbd {
  background: var(--sky-dark); color: white;
  border-radius: 5px; padding: 1px 6px;
  font-size: .75rem; font-family: monospace;
}

/* ================================================================
   CALENDAR
   ================================================================ */
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.cal-view-btns { display: flex; gap: 6px; }
.cal-view-btn {
  font-size: .82rem; font-weight: 800;
  padding: 7px 16px; border-radius: 50px;
  border: 2px solid var(--sky); background: white; color: var(--sky-dark);
  cursor: pointer; transition: all .15s;
}
.cal-view-btn.active, .cal-view-btn:hover {
  background: var(--sky); color: white; border-color: var(--sky);
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--border); background: white;
  font-size: 1.1rem; font-weight: 900; cursor: pointer;
  transition: all .15s; color: var(--sky-dark);
}
.cal-nav-btn:hover { background: var(--sky); color: white; border-color: var(--sky); }
.cal-title {
  font-weight: 900; font-size: 1rem; color: var(--sky-dark);
  min-width: 160px; text-align: center;
}

/* Month grid */
.cal-month-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px; background: var(--border); border-radius: 14px;
  overflow: hidden; border: 2px solid var(--border);
}
.cal-dow-header {
  background: var(--sky-dark); color: white;
  text-align: center; font-size: .72rem; font-weight: 900;
  padding: 8px 4px; letter-spacing: .04em;
}
.cal-day {
  background: white; min-height: 60px;
  padding: 6px 6px 4px; cursor: pointer;
  transition: background .12s;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-day:hover { background: var(--sky-light); }
/* De-emphasised by colour, not by opacity. opacity: .5 also halves the text
   contrast, which took the adjacent-month day numbers to 3.0 against the 4.5
   requirement even though the ink itself is nearly black. A muted colour reads
   the same to a sighted user and stays legible. */
.cal-day.other-month { background: #f8f9fa; }
.cal-day.other-month .cal-day-num { color: #68747C; }
.cal-day.today { background: var(--sky-light); }
.cal-day.today .cal-day-num { color: var(--sky-dark); font-weight: 900; }
.cal-day.selected { background: var(--sky); }
.cal-day.selected .cal-day-num { color: white; font-weight: 900; }
.cal-day-num { font-size: .85rem; font-weight: 700; color: var(--text); }
.cal-task-dots { display: flex; gap: 2px; flex-wrap: wrap; }
.cal-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral);
}

/* Week grid */
.cal-week-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-week-header {
  text-align: center; padding: 8px 4px;
  border-radius: 10px; cursor: pointer;
  background: white; border: 1.5px solid var(--border);
  transition: all .12s;
}
.cal-week-header:hover { background: var(--sky-light); border-color: var(--sky); }
.cal-week-header.today { background: var(--sky-light); border-color: var(--sky); }
.cal-week-header.selected { background: var(--sky); border-color: var(--sky); }
.cal-week-header.selected .cal-week-dow,
.cal-week-header.selected .cal-week-date { color: white; }
.cal-week-dow { font-size: .68rem; font-weight: 900; color: var(--text-soft); }
.cal-week-date { font-size: 1.1rem; font-weight: 900; color: var(--text); }
.cal-week-cell {
  min-height: 80px; background: white;
  border-radius: 10px; border: 1.5px solid var(--border);
  padding: 6px; cursor: pointer; transition: background .12s;
}
.cal-week-cell:hover { background: var(--sky-light); }
.cal-week-empty { color: #ccc; font-size: .75rem; }
.cal-week-task {
  font-size: .72rem; font-weight: 700;
  background: var(--sky-light); color: var(--sky-dark);
  border-radius: 6px; padding: 2px 6px; margin-bottom: 3px;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-week-task.done { background: #E8F5E9; color: var(--green-dk); text-decoration: line-through; }

/* Day view */
.cal-day-view { padding: 4px 0; }
.cal-day-view-title { color: var(--sky-dark); font-weight: 900; margin-bottom: 12px; }

/* Bottom row layout */
.cal-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ================================================================
   ACHIEVEMENTS
   ================================================================ */
.achiev-view-btns { display: flex; gap: 6px; }
.achiev-view-btn {
  font-size: .78rem; font-weight: 800;
  padding: 5px 14px; border-radius: 50px;
  border: 2px solid var(--sky); background: white; color: var(--sky-dark);
  cursor: pointer; transition: all .15s;
}
.achiev-view-btn.active { background: var(--sky); color: white; }

/* Week strip */
.achiev-week-strip {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.achiev-day-circle {
  display: flex; flex-direction: column; align-items: center;
  background: white; border-radius: 14px;
  padding: 8px 12px; border: 2px solid var(--border);
  min-width: 52px; transition: all .2s;
}
.achiev-day-circle.full    { background: #E8F5E9; border-color: var(--green); }
.achiev-day-circle.partial { background: #FFF8E1; border-color: var(--yellow); }
.achiev-day-label { font-size: .68rem; font-weight: 800; color: var(--text-soft); }
.achiev-day-num   { font-size: .9rem; font-weight: 900; color: var(--text); }
.achiev-day-icon  { font-size: 1.1rem; }

/* Streak badge */
.achiev-streak {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #FF9800, #FFD300);
  border-radius: 50px; padding: 8px 18px; margin-top: 4px;
}
.achiev-streak-fire { font-size: 1.3rem; }
.achiev-streak-num  { font-size: 1.4rem; font-weight: 900; color: #7B3F00; }
.achiev-streak-label { font-size: .85rem; font-weight: 700; color: #7B3F00; }

/* Month heatmap */
.achiev-month-stats {
  display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.achiev-stat-box {
  flex: 1; min-width: 90px; text-align: center;
  background: white; border-radius: 14px;
  padding: 12px 8px; border: 2px solid var(--border);
}
.achiev-stat-box.highlight { border-color: var(--sky); background: var(--sky-light); }
.achiev-stat-num   { font-size: 1.6rem; font-weight: 900; color: var(--sky-dark); }
.achiev-stat-label { font-size: .72rem; font-weight: 700; color: var(--text-soft); }

/* ── Day view — kid-appealing single-day summary ─────────────────────────── */
.achiev-day-card {
  background: linear-gradient(135deg, #FFF8E1, #E0F7FA);
  border: 2px solid var(--yellow); border-radius: 22px;
  padding: 16px 14px 18px; text-align: center;
  box-shadow: 0 6px 22px rgba(0,120,160,.12);
}
.achiev-day-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.achiev-day-nav-btn {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--sky); background: white; color: var(--sky-dark);
  font-size: 1.5rem; line-height: 1; font-weight: 900; cursor: pointer;
  transition: transform .08s ease, background .15s ease;
}
.achiev-day-nav-btn:hover:not(:disabled) { background: var(--sky); color: white; }
.achiev-day-nav-btn:active:not(:disabled) { transform: scale(.9); }
.achiev-day-nav-btn:disabled { opacity: .3; cursor: default; }
.achiev-day-date {
  flex: 1; font-weight: 900; font-size: 1.05rem; color: var(--sky-dark);
}
.achiev-day-ring {
  width: 150px; height: 150px; border-radius: 50%; margin: 6px auto 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background .5s ease;
}
.achiev-day-ring.complete { animation: completePulse .5s ease-out; }
.achiev-day-ring-inner {
  width: 116px; height: 116px; border-radius: 50%; background: white;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.06);
}
.achiev-day-ring-num { font-size: 2.1rem; font-weight: 900; color: var(--sky-dark); line-height: 1; }
.achiev-day-ring-lbl { font-size: .8rem; font-weight: 700; color: var(--text-soft); margin-top: 2px; }
.achiev-day-stars { font-size: 1.35rem; letter-spacing: 2px; margin-bottom: 8px; }
.achiev-day-msg {
  font-weight: 800; font-size: .95rem; color: var(--sky-dark);
  background: white; border-radius: 14px; padding: 8px 12px; display: inline-block;
}
.achiev-day-msg.complete { color: var(--green-dk); background: #E8F5E9; }
.achiev-day-today-btn {
  border: none; background: var(--sky); color: white; font-weight: 800;
  border-radius: 50px; padding: 6px 18px; font-size: .82rem; cursor: pointer;
}

.achiev-month-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.achiev-dow {
  font-size: .65rem; font-weight: 900; text-align: center;
  color: var(--text-soft); padding: 4px 0;
}
.achiev-heat-cell {
  aspect-ratio: 1; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  background: var(--bg); color: var(--text-soft);
}
.achiev-heat-cell.full    { background: var(--green); color: white; }
.achiev-heat-cell.partial { background: var(--yellow); color: #5D4037; }
.achiev-heat-cell.future  { background: var(--bg); opacity: .4; }
.achiev-heat-cell.out     { background: transparent; }
.achiev-heat-cell.none    { background: #ECEFF1; }

/* ================================================================
   MOBILE / TABLET RESPONSIVE (fluid, touch-friendly)
   ================================================================ */

/* Base touch targets */
button, .btn, .nav-link, .kid-card,
.cal-day, .emoji-btn, .catalog-tile,
.period-filter-btn, .achiev-view-btn {
  min-height: 44px;
}
.kid-card { min-height: 88px; }

/* T1 — Eliminate 300ms tap delay on iOS/Android */
button, .btn, .kid-card, .period-filter-btn, .mob-tab,
.cal-day, .emoji-btn, .catalog-tile, .nav-chip {
  touch-action: manipulation;
}

/* Navbar — compact on small screens */
@media (max-width: 576px) {
  
  .nav-date-chip { display: none; }    /* hide date on tiny screens */

  /* Kids columns: 2-col on small phones, 1-col on very small */
  .kids-columns { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kid-card-emoji { font-size: 2rem; }
  .kid-card { min-height: 80px; padding: 8px 4px 6px; }
  .kid-card-label { font-size: .62rem; }

  /* Calendar */
  .cal-bottom-row { grid-template-columns: 1fr; }
  .cal-month-grid .cal-day { min-height: 44px; }
  .cal-day-num { font-size: .75rem; }
  .cal-toolbar { flex-direction: column; align-items: flex-start; }

  /* Achievements */
  .achiev-week-strip { gap: 5px; }
  .achiev-day-circle { padding: 6px 8px; min-width: 42px; }

  /* Admin catalog */
  .catalog-tile { width: 62px; }
  .catalog-tile-icon { font-size: 1.4rem; }
}

@media (min-width: 577px) and (max-width: 900px) {
  /* Tablet portrait */
  .kids-columns { grid-template-columns: repeat(2, 1fr); }
  .cal-bottom-row { grid-template-columns: 1fr; }
}

/* Fluid font sizing */
.kid-col-name     { font-size: clamp(.95rem, 3vw, 1.25rem); }
.kid-card-label   { font-size: clamp(.6rem, 1.8vw, .75rem); }
.period-filter-btn{ font-size: clamp(.78rem, 2vw, .9rem); }
.cal-day-num      { font-size: clamp(.72rem, 2vw, .9rem); }

/* ================================================================
   FONT SCALE CSS VARIABLES (set by accessibility.js)
   ================================================================ */
:root {
  --scale-da: 1;
  --scale-ar: 1;
}

/* Apply DA scale to all Danish text */
.kid-card-label,
.routine-row-da,
.task-item .fw-bold,
.cal-week-task,
.catalog-tile-label,
.kid-period-main span:first-child { 
  font-size: calc(0.75rem * var(--scale-da)) !important;
}

/* Apply AR scale to all Arabic text */
.kid-card-label-ar,
.routine-row-ar,
.kid-period-ar {
  font-size: calc(0.68rem * var(--scale-ar)) !important;
  font-family: var(--font-ar);
}

/* ================================================================
   NAVBAR — user chip + accessibility button
   ================================================================ */
.nav-user-block { display: flex; align-items: center; }
.nav-user-chip {
  display: flex; align-items: center; gap: 6px;
  color: #fff !important; text-decoration: none !important;
  background: rgba(255,255,255,.15); border-radius: 50px;
  padding: 5px 12px 5px 5px; transition: background .15s;
  font-size: .85rem; font-weight: 700;
}
.nav-user-chip:hover { background: rgba(255,255,255,.28); }
.nav-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--yellow); color: var(--sky-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .85rem;
}
.nav-acc-btn {
  background: rgba(255,255,255,.15); border: none; border-radius: 8px;
  color: #fff; padding: 6px 10px; cursor: pointer;
  transition: background .15s; margin-left: 4px;
}
.nav-acc-btn:hover { background: rgba(255,255,255,.28); }

/* ================================================================
   ACCESSIBILITY TOOLBAR (floating)
   ================================================================ */
.acc-toolbar {
  /* Sits above the tab bar, so it has to move when the tab bar does. This was
     a hard 70px against a 64px bar; once the bar scales up to ~76px on a phone
     plus the Android navigation inset, a fixed 70px puts this panel behind it.
     Both now read the same token (f7_bridge.css declares it). */
  position: fixed;
  bottom: calc(var(--fr-tabbar-h, 64px) + var(--fr-safe-bottom, 0px) + 8px);
  right: 16px; z-index: 10000;
  background: white; border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 14px 16px; min-width: 220px;
  border: 2px solid var(--border);
  /* hidden by default */
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .2s, transform .2s;
}
.acc-toolbar.open {
  opacity: 1; pointer-events: all; transform: translateY(0);
}
.acc-section { margin-bottom: 10px; }
.acc-label {
  font-size: .72rem; font-weight: 900; color: var(--text-soft);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px;
}
.acc-controls {
  display: flex; align-items: center; gap: 8px;
}
.acc-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 2px solid var(--border); background: var(--bg);
  font-weight: 900; font-size: .95rem; cursor: pointer;
  transition: all .12s; color: var(--text);
}
.acc-btn:hover { background: var(--sky-light); border-color: var(--sky); }
.acc-btn.acc-ar { font-family: var(--font-ar); font-size: 1.1rem; }
.acc-val {
  flex: 1; text-align: center; font-weight: 800;
  font-size: .82rem; color: var(--sky-dark);
}
.acc-reset-btn {
  font-size: .72rem; font-weight: 700; color: var(--text-soft);
  background: none; border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 10px; cursor: pointer;
}
.acc-reset-btn:hover { background: var(--bg); }

/* ================================================================
   PIN / LOCK BUTTON
   ================================================================ */
.nav-lock-btn {
  background: rgba(255,255,255,.15); border: none;
  border-radius: 8px; color: #fff;
  padding: 6px 10px; cursor: pointer;
  transition: all .15s; margin-left: 2px;
}
.nav-lock-btn:hover  { background: rgba(255,255,255,.28); }
.nav-lock-btn.unlocked {
  background: var(--yellow); color: var(--sky-dark);
  box-shadow: 0 0 0 3px rgba(255,211,0,.35);
}

/* PIN input */
.pin-input {
  font-size: 2rem !important; letter-spacing: .4em;
  text-align: center; max-width: 180px;
  margin: 0 auto; border-radius: 14px !important;
  border: 3px solid var(--border) !important;
  padding: 10px !important;
}
.pin-input:focus {
  border-color: var(--sky) !important;
  box-shadow: 0 0 0 3px rgba(0,174,203,.2) !important;
}

/* Shake on wrong PIN */
@keyframes pinShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-6px); }
  80%     { transform: translateX(6px); }
}
.pin-shake { animation: pinShake .45s ease-out; border-color: var(--coral) !important; }







/* REMOVED 2026-07-31: `.navbar { min-height: 56px !important; padding: 0 16px
   !important }`. One of four competing bare-`.navbar` blocks in this file
   (56px here, 62px at the "harmonised" block below, 52px in the 767.98px query,
   52px in the 991.98px query). They all target Framework7's live header by
   accident, and the height now comes from --f7-navbar-height alone. The inset
   comes from `.navbar .navbar-inner` in f7_bridge.css, symmetric on both
   sides. */
.navbar .container-fluid {
  align-items: center !important;
  gap: 0 !important;
}

/* Brand: mosque + FamilyRoutine on one line, bismillah beneath */

.navbar-brand > span:first-child {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: var(--yellow) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}


/* Nav tabs — same height as brand, comfortable spacing */
.navbar-nav {
  align-items: center !important;
  gap: 2px !important;
}
.navbar .nav-link:hover {
  background: rgba(255,255,255,.12) !important;
}
.navbar .nav-link.active {
  background: rgba(255,255,255,.18) !important;
  color: var(--yellow) !important;
}

/* Right-side items: date chip + lock + Aa — same row, same height */
.navbar .ms-auto,
.navbar [class*="ms-auto"] {
  align-items: center !important;
  gap: 6px !important;
}
.nav-date-chip {
  font-size: 0.78rem !important;
  padding: 5px 11px !important;
  border-radius: 50px !important;
  white-space: nowrap;
}
.nav-lock-btn,
.nav-acc-btn {
  height: 34px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Remove the underline indicator bslib adds under active tab */
.navbar .nav-underline .nav-link.active::after,
.navbar .nav-underline .nav-link::after {
  display: none !important;
}

/* ================================================================
   NAVBAR — harmonised, roomy, consistent right-side controls
   ================================================================ */

.navbar {
  background: linear-gradient(135deg, var(--sky-dark) 0%, var(--sky) 100%) !important;
  box-shadow: 0 4px 20px rgba(0,120,160,.25) !important;
  /* min-height and padding removed 2026-07-31: height belongs to
     --f7-navbar-height, and the 20px left inset here against a 4px right inset
     is what made the header asymmetric. See the note above.
     The 4px yellow border-bottom is gone too: it ate 4 of the bar's 52
     border-box pixels while the identity block was being clipped for want of
     one. The bar reads as one teal block now. */
}

/* Brand: title + bismillah stacked */
.navbar-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 8px 0 !important;
  margin-right: 28px !important;
  gap: 2px !important;
}
.navbar-brand > span { font-size: 1.15rem !important; font-weight: 900 !important; color: var(--yellow) !important; }
.navbar-brand .bismillah {
  font-family: var(--font-ar) !important;
  font-size: 0.7rem !important;
  color: rgba(255,255,255,.75) !important;
  direction: rtl !important;
  white-space: nowrap !important;
  letter-spacing: .02em !important;
}

/* Nav tabs */
.navbar .nav-link {
  color: rgba(255,255,255,.88) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  transition: background .15s, color .15s !important;
  white-space: nowrap !important;
}
.navbar .nav-link:hover { background: rgba(255,255,255,.13) !important; color: #fff !important; }
.navbar .nav-link.active { background: rgba(255,255,255,.2) !important; color: var(--yellow) !important; }

/* Right-side items: all three share one style */
.nav-date-chip {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 7px 13px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
  line-height: 1 !important;
}
.nav-lock-btn,
.nav-acc-btn {
  background: rgba(255,255,255,.15) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 7px 11px !important;
  cursor: pointer !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: background .15s !important;
  white-space: nowrap;
}
.nav-lock-btn:hover, .nav-acc-btn:hover { background: rgba(255,255,255,.27) !important; }
.nav-lock-btn.unlocked {
  background: var(--yellow) !important;
  color: var(--sky-dark) !important;
}

/* ================================================================
   RIGHT CONTROLS — date / lock / Aa all identical pill buttons
   ================================================================ */
.nav-date-chip,
.nav-lock-btn,
.nav-acc-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 13px !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .15s, border-color .15s !important;
  text-decoration: none !important;
  font-family: var(--font) !important;
}
.nav-date-chip:hover,
.nav-lock-btn:hover,
.nav-acc-btn:hover {
  background: rgba(255,255,255,.26) !important;
  border-color: rgba(255,255,255,.45) !important;
}
.nav-lock-btn.unlocked {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
  color: var(--sky-dark) !important;
}

/* Navbar brand override — defeat Bootstrap's inline flex */
.navbar-brand {
  align-items: flex-start !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ================================================================
   ADMIN INNER TABS (navset_card_underline) — match app theme
   ================================================================ */
.card .nav-underline .nav-link,
.card .nav-tabs .nav-link {
  color: var(--sky-dark) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  white-space: nowrap !important;
}
.card .nav-underline .nav-link:hover,
.card .nav-tabs .nav-link:hover {
  color: var(--sky) !important;
  border-bottom-color: var(--sky) !important;
}
.card .nav-underline .nav-link.active,
.card .nav-tabs .nav-link.active {
  color: var(--sky-dark) !important;
  font-weight: 900 !important;
  border-bottom-color: var(--sky-dark) !important;
}

/* Admin tab bar: horizontal scroll on mobile (6 tabs don't fit on phone) */
.card .nav-underline,
.card .nav-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 1px;
}
.card .nav-underline::-webkit-scrollbar,
.card .nav-tabs::-webkit-scrollbar { display: none; }

/* ================================================================
   SMALL PHONE ROUTINE LAYOUT (Samsung S23, ~360-430px)
   ================================================================ */
@media (max-width: 430px) {
  .kids-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0 2px 12px;
  }
  .kids-columns:has(.kid-col:only-child) {
    grid-template-columns: 1fr;
  }

  .kid-card {
    min-height: 86px !important;
    padding: 10px 4px 8px !important;
    border-radius: 12px !important;
  }
  .kid-card-emoji  { font-size: 2.2rem !important; margin-bottom: 5px !important; }
  .kid-card-label  { font-size: .68rem !important; }
  .kid-card-label-ar { font-size: .6rem !important; }
  .kid-card-grid   { gap: 5px !important; padding: 6px !important; }

  .kid-col-header  { padding: 9px 9px 7px !important; gap: 6px !important; }
  .kid-col-name    { font-size: .95rem !important; }
  .kid-pct         { font-size: .72rem !important; min-width: 28px !important; }

  .kid-period-header { padding: 5px 8px 4px !important; }
  .kid-period-main span:first-child { font-size: .68rem !important; }
  .kid-period-ar   { display: none !important; }
  .kid-period-pct  { font-size: .7rem !important; padding: 2px 6px !important; }

  .period-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px !important;
    gap: 6px !important;
  }
  .period-filter-bar::-webkit-scrollbar { display: none; }
  .period-filter-btn {
    font-size: .76rem !important;
    padding: 6px 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ================================================================
   CHILD AVATAR — photo with entrance animation
   ================================================================ */
.kid-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 10px 4px;
}
.kid-avatar {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  cursor: pointer;
  animation: avatarEntrance .7s cubic-bezier(.34,1.56,.64,1) both;
}
@media (max-width: 430px) {
  .kid-avatar { width: 48px; height: 48px; }
}
@keyframes avatarEntrance {
  0%   { opacity: 0; transform: scale(.4) rotate(-15deg); }
  70%  { opacity: 1; transform: scale(1.1) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.kid-avatar.wiggle {
  animation: avatarWiggle .55s ease-out;
}
@keyframes avatarWiggle {
  0%,100% { transform: rotate(0) scale(1); }
  25%     { transform: rotate(-12deg) scale(1.1); }
  75%     { transform: rotate(12deg) scale(1.1); }
}

.kid-age-badge {
  font-size: .6rem; font-weight: 900;
  background: rgba(255,255,255,.7);
  border-radius: 50px; padding: 1px 7px;
  color: var(--text-soft); margin-top: 3px;
}

/* ================================================================
   SMALL PHONE ROUTINE LAYOUT (Samsung S23, ~360-430px)
   ================================================================ */
@media (max-width: 430px) {
  /* Two kids side-by-side, one kid full-width */
  .kids-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0 2px 12px;
  }
  .kids-columns:has(.kid-col:only-child) {
    grid-template-columns: 1fr;
  }

  /* Card — bigger tap target, clear emoji */
  .kid-card {
    min-height: 86px !important;
    padding: 10px 4px 8px !important;
    border-radius: 12px !important;
  }
  .kid-card-emoji  { font-size: 2.2rem !important; margin-bottom: 5px !important; }
  .kid-card-label  { font-size: .68rem !important; }
  .kid-card-label-ar { font-size: .6rem !important; }
  .kid-card-grid   { gap: 5px !important; padding: 6px !important; }

  /* Column header */
  .kid-col-header  { padding: 9px 9px 7px !important; gap: 6px !important; }
  .kid-col-name    { font-size: .95rem !important; }
  .kid-pct         { font-size: .72rem !important; min-width: 28px !important; }

  /* Period header: hide Arabic sub-label to save vertical space */
  .kid-period-header { padding: 5px 8px 4px !important; }
  .kid-period-main span:first-child { font-size: .68rem !important; }
  .kid-period-ar   { display: none !important; }
  .kid-period-pct  { font-size: .7rem !important; padding: 2px 6px !important; }

  /* Period filter: scrollable row, no wrap */
  .period-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px !important;
    gap: 6px !important;
  }
  .period-filter-bar::-webkit-scrollbar { display: none; }
  .period-filter-btn {
    font-size: .76rem !important;
    padding: 6px 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ================================================================
   CHILD AVATAR — photo with entrance animation
   ================================================================ */
.kid-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 10px 4px;
}
.kid-avatar {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  cursor: pointer;
  animation: avatarEntrance .7s cubic-bezier(.34,1.56,.64,1) both;
}
@media (max-width: 430px) {
  .kid-avatar { width: 48px; height: 48px; }
}
@keyframes avatarEntrance {
  0%   { opacity: 0; transform: scale(.4) rotate(-15deg); }
  70%  { opacity: 1; transform: scale(1.1) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.kid-avatar.wiggle {
  animation: avatarWiggle .55s ease-out;
}
@keyframes avatarWiggle {
  0%,100% { transform: rotate(0) scale(1); }
  25%     { transform: rotate(-12deg) scale(1.1); }
  75%     { transform: rotate(12deg) scale(1.1); }
}

/* Age badge on child column */
.kid-age-badge {
  font-size: .6rem; font-weight: 900;
  background: rgba(255,255,255,.7);
  border-radius: 50px; padding: 1px 7px;
  color: var(--text-soft); margin-top: 3px;
}

/* ================================================================
   MOBILE NAVBAR — definitive fix
   The root problem: Bootstrap's JS removes .show from .navbar-collapse
   on mobile. We override BOTH the CSS and prevent the JS via a script
   tag in ui_dashboard.R.
   ================================================================ */

/* Always hide the hamburger toggler */
.navbar-toggler {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
}

/* Override Bootstrap's collapse — show navbar-collapse always */
.navbar-collapse,
.navbar-collapse.collapse,
.navbar-collapse.collapsing,
.navbar-collapse.collapse.show {
  display: flex !important;
  flex-basis: auto !important;
  align-items: center !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  transition: none !important;
  visibility: visible !important;
}

/* Mobile: horizontal scrollable tab row */
@media (max-width: 767.98px) {
  /* `.navbar` height/padding removed here too, 2026-07-31: fourth of the four
     competing bare-.navbar blocks. Framework7 owns the bar's box. */

  /* Compact brand */
  .navbar-brand {
    flex-shrink: 0 !important;
    margin-right: 6px !important;
    padding: 5px 0 !important;
  }
  .navbar-brand > span      { font-size: .86rem !important; }
  .navbar-brand .bismillah  { display: none !important; }

  /* Scrollable tab row */
  .navbar-collapse {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px;
  }
  .navbar-collapse::-webkit-scrollbar { display: none; }

  /* Tabs in a single horizontal row */
  .navbar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 1px !important;
    padding: 0 !important;
    min-width: max-content;
  }

  /* Compact tab links */
  .navbar .nav-link {
    font-size: .74rem !important;
    padding: 6px 9px !important;
    white-space: nowrap !important;
    border-radius: 6px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Right side controls */
  .nav-date-chip         { display: none !important; }
  .nav-lock-btn,
  .nav-acc-btn {
    font-size: .8rem !important;
    padding: 0 8px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .navbar .ms-auto {
    margin-left: 4px !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
}

/* ================================================================
   ROUTINE CARD GRID — improved spacing & readability
   ================================================================ */
.kid-card-grid {
  gap: 10px !important;
  padding: 10px !important;
}
.kid-card {
  min-height: 100px !important;
  padding: 14px 6px 10px !important;
  border-radius: 16px !important;
}
.kid-card-emoji {
  font-size: 2.6rem !important;
  margin-bottom: 8px !important;
}
.kid-card-label {
  font-size: .73rem !important;
  line-height: 1.3 !important;
}
.kid-card-label-ar {
  font-size: .65rem !important;
  margin-top: 4px !important;
}

/* ================================================================
   SMALL PHONE — override above for S23 (max 430px)
   ================================================================ */
@media (max-width: 430px) {
  .kids-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0 2px 12px;
  }
  .kids-columns:has(.kid-col:only-child) {
    grid-template-columns: 1fr;
  }
  .kid-card {
    min-height: 90px !important;
    padding: 10px 4px 8px !important;
    border-radius: 13px !important;
  }
  .kid-card-emoji      { font-size: 2.1rem !important; margin-bottom: 5px !important; }
  .kid-card-label      { font-size: .67rem !important; }
  .kid-card-label-ar   { display: none !important; }
  .kid-card-grid       { gap: 5px !important; padding: 6px !important; }
  .kid-col-header      { padding: 9px 9px 7px !important; gap: 6px !important; }
  .kid-col-name        { font-size: .95rem !important; }
  .kid-period-header   { padding: 5px 8px 4px !important; }
  .kid-period-ar       { display: none !important; }
  .period-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    padding-bottom: 8px !important;
    gap: 6px !important;
  }
  .period-filter-bar::-webkit-scrollbar { display: none; }
  .period-filter-btn {
    font-size: .76rem !important;
    padding: 6px 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ================================================================
   NAVBAR CHIPS — unified style for ALL right-side navbar items
   date · family · lock · Aa
   ================================================================ */
.nav-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.13) !important;
  color: #fff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: default;
  transition: background .15s, border-color .15s !important;
  vertical-align: middle;
}
.nav-chip-btn   { cursor: pointer !important; }
.nav-chip-btn:hover {
  background: rgba(255,255,255,.25) !important;
  border-color: rgba(255,255,255,.4) !important;
}
.nav-chip-active {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
  color: var(--sky-dark) !important;
}
/* Family chip: slightly different background to stand out */
.nav-chip-family {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.35) !important;
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 767.98px) {
  .nav-chip         { height: 28px !important; padding: 0 8px !important; font-size: .75rem !important; }
  .nav-chip-family  { max-width: 100px !important; }
}
/* Override old class names so nothing breaks */
.nav-date-chip,
.nav-lock-btn,
.nav-acc-btn { display: none !important; }

/* ================================================================
   MOBILE NAVBAR — horizontal scrolling strip
   Phones can't fit brand + 4 tabs + chips in one row.
   Solution: navbar-collapse becomes a scrollable flex row so all
   tabs are reachable by swiping, with no wrapping or clipping.
   ================================================================ */
@media (max-width: 991.98px) {

  /* Prevent the outer container from wrapping to two rows */
  .navbar > .container-fluid {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Brand: shrink margin, hide bismillah line to save height */
  .navbar-brand {
    margin-right: 8px !important;
    flex-shrink: 0 !important;
  }
  .navbar-brand .bismillah { display: none !important; }

  /* Collapse becomes a horizontal scrollable strip, NOT a dropdown */
  .navbar-collapse,
  .navbar-collapse.show {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: none !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .navbar-collapse::-webkit-scrollbar { display: none; }

  /* Nav items row stays horizontal */
  .navbar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Compact tab links */
  .navbar .nav-link {
    font-size: .78rem !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
    border-radius: 7px !important;
  }

  /* Right-side spacer + chips stay in a row */
  .navbar .ms-auto {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    margin-left: 6px !important;
  }

  /* Compact chips */
  .nav-chip {
    height: 28px !important;
    padding: 0 8px !important;
    font-size: .72rem !important;
  }

  /* Hide the date text chip — saves the most space */
  .nav-chip:not(.nav-chip-btn) { display: none !important; }

  /* Keep family-code chip (so user knows which family) but make it tiny */
  .nav-chip-family {
    display: inline-flex !important;
    max-width: 90px !important;
    font-size: .68rem !important;
  }
}

/* Extra-small phones (≤ 480 px) — hide family chip too, keep only icon buttons */
@media (max-width: 480px) {
  .nav-chip-family { display: none !important; }
  .navbar .nav-link {
    font-size: .72rem !important;
    padding: 6px 8px !important;
  }
}

/* ================================================================
   PRIZE GOAL CARD  (Belønning tab)
   ================================================================ */

.prize-goal-card {
  background: linear-gradient(145deg, #FFFDE7 0%, #E8F5E9 60%, #E0F7FA 100%);
  border: 2.5px solid var(--yellow);
  border-radius: 24px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 6px 28px rgba(255, 200, 0, 0.18);
  margin-bottom: 4px;
}
.prize-goal-empty {
  border-color: var(--border);
  background: #FAFCFE;
  box-shadow: none;
  padding: 32px 20px;
}

/* Prize image — fills card width, square aspect ratio */
.prize-image-wrap {
  width: min(320px, 82%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 16px;
  border-radius: 20px;
  overflow: hidden;
  border: 3.5px solid var(--yellow);
  box-shadow: 0 4px 18px rgba(255, 193, 7, 0.25);
}
.prize-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.prize-img:hover { transform: scale(1.04); }
.prize-glow {
  box-shadow: 0 0 0 4px var(--yellow), 0 0 24px rgba(255, 211, 0, 0.6);
  animation: prizeGlow 1.8s ease-in-out infinite alternate;
}
@keyframes prizeGlow {
  from { box-shadow: 0 0 0 3px var(--yellow), 0 0 14px rgba(255,211,0,.4); }
  to   { box-shadow: 0 0 0 6px var(--yellow), 0 0 32px rgba(255,211,0,.8); }
}

/* ── Reward emoji picker (admin panel) ──────────────────────────────── */
.reward-emoji-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.reward-emoji-opt {
  width: 42px; height: 42px; font-size: 1.4rem; line-height: 1;
  border: 2px solid var(--border); border-radius: 10px;
  background: var(--bg); cursor: pointer;
  transition: transform .1s, border-color .12s, background .12s;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.reward-emoji-opt:hover { transform: scale(1.15); border-color: var(--sky); background: var(--sky-light); }
.reward-emoji-opt.sel   { border-color: var(--yellow); background: #FFFDE7;
                           box-shadow: 0 0 0 2px var(--yellow); transform: scale(1.12); }

/* ── Prize emoji display on the goal card ────────────────────────────── */
.prize-emoji-display {
  width: min(200px, 60%); aspect-ratio: 1 / 1;
  margin: 0 auto 16px; border-radius: 50%;
  border: 3.5px solid var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(4rem, 12vw, 7rem);
  background: linear-gradient(135deg, #FFFDE7, #FFF9C4);
  box-shadow: 0 4px 18px rgba(255, 193, 7, 0.25);
  transition: transform .3s;
}
.prize-emoji-display:hover { transform: scale(1.06) rotate(5deg); }
.prize-emoji-display.prize-glow { animation: prizeGlow 1.8s ease-in-out infinite alternate; }

.prize-image-placeholder {
  width: min(320px, 82%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 16px;
  border-radius: 20px;
  border: 3px dashed var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
  background: rgba(255, 211, 0, 0.08);
}

/* Prize name */
.prize-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--sky-dark);
  margin-bottom: 18px;
  line-height: 1.3;
}

/* Period badge */
.prize-period-badge {
  display: inline-block;
  font-size: .75rem; font-weight: 800;
  padding: 4px 14px;
  border-radius: 50px;
  background: rgba(0, 174, 203, 0.12);
  color: var(--sky-dark);
  margin-bottom: 14px;
}

/* Progress bar */
.goal-bar-track {
  height: 40px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
  position: relative;
  margin: 4px 0 10px;
}
.goal-bar-fill {
  height: 100%;
  border-radius: 22px;
  background: linear-gradient(90deg, #FFD300 0%, #FF9800 55%, #4CAF50 100%);
  transition: width 1.1s cubic-bezier(.25, .8, .25, 1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  min-width: 36px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}
/* Shine shimmer on the bar */
.goal-bar-fill::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: barShimmer 2.5s ease-in-out infinite;
}
@keyframes barShimmer {
  0%   { left: -60%; }
  100% { left: 110%; }
}
.goal-bar-done {
  background: linear-gradient(90deg, #4CAF50, #66BB6A) !important;
}
.goal-bar-pct {
  font-weight: 900;
  font-size: .85rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  position: relative;
  z-index: 1;
}

/* Count + motivational text */
.goal-count-text {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0 2px;
  line-height: 1.5;
}
.goal-motivate-text {
  font-size: .88rem;
  color: var(--text-soft);
  font-weight: 600;
}
.goal-complete {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--green-dk);
  animation: pulse 1.3s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

/* ── Mobile / tablet belønning + admin ──────────────────────────────── */
@media (max-width: 576px) {
  /* Prize card image fills card width */
  .prize-image-wrap,
  .prize-image-placeholder { width: 88%; }
  .prize-goal-card  { padding: 18px 14px 16px; }
  .goal-bar-track   { height: 32px; }
  .prize-name       { font-size: 1rem; }
  .goal-count-text  { font-size: .85rem; }

  /* Admin belønning form: full-width inputs on phone */
  .bslib-columns > * { min-width: 0 !important; }
  #admin_rw_target,
  #admin_rw_prize   { font-size: .9rem !important; }

  /* Period toggle buttons: smaller on phone */
  #admin_rw_btn_weekly,
  #admin_rw_btn_monthly,
  #admin_rw_btn_total {
    font-size: .75rem !important;
    padding: 5px 10px !important;
  }

  /* Child tabs wrap nicely on small screen */
  .child-reward-tab { font-size: .78rem !important; padding: 5px 12px !important; }
}

/* Tablet: let prize image breathe a bit */
@media (min-width: 577px) and (max-width: 768px) {
  .prize-image-wrap,
  .prize-image-placeholder { width: 72%; }
}

/* ================================================================
   GLOBAL MOBILE OVERFLOW GUARD
   Prevents horizontal page scroll caused by wide DT tables,
   modals, or admin forms on narrow viewports.
   ================================================================ */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
.container-fluid,
.tab-content,
.bslib-page-navbar > .tab-content {
  overflow-x: hidden;
  max-width: 100%;
}

/* ================================================================
   DATA TABLES — horizontal scroll on mobile
   ================================================================ */
.dataTables_wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.dataTables_wrapper table {
  min-width: 400px;
}
/* Action buttons in DT rows stay on one line */
.dataTables_wrapper td:last-child {
  white-space: nowrap;
}
/* Pagination controls wrap cleanly on phones */
@media (max-width: 576px) {
  .dataTables_wrapper .dataTables_paginate {
    text-align: left !important;
    padding-top: 6px !important;
  }
  .dataTables_wrapper .dataTables_info {
    font-size: .75rem !important;
  }
}

/* ================================================================
   LOGIN / FAMILY-CODE SCREEN — compact on mobile
   ================================================================ */
@media (max-width: 576px) {
  .fc-card {
    padding: 28px 20px 24px !important;
    border-radius: 20px !important;
  }
  .fc-wrap {
    padding: 16px 10px !important;
    align-items: flex-start !important;
    padding-top: 32px !important;
  }
  .fc-features {
    padding: 10px 14px !important;
    font-size: .83rem !important;
  }
  .wb-code-chip {
    font-size: 1rem !important;
    padding: 8px 18px !important;
  }
}

/* ================================================================
   ADMIN PANEL — mobile layout fixes
   ================================================================ */

/* bslib layout_column_wrap stacks correctly but can overflow; guard it */
.bslib-columns,
.bslib-column-wrap {
  overflow-x: hidden;
}

/* Admin child tabs: wrap on mobile instead of overflowing */
#admin_child_tabs_ui .d-flex,
#admin_rw_child_tabs_ui .d-flex {
  flex-wrap: wrap !important;
}

/* Admin catalog tiles: smaller on phones */
@media (max-width: 480px) {
  .catalog-tile      { width: 58px !important; padding: 6px 2px 5px !important; }
  .catalog-tile-icon { font-size: 1.3rem !important; }
  .catalog-tile-label { font-size: .55rem !important; }
}

/* Admin form inputs: full-width on small screens */
@media (max-width: 576px) {
  .custom-routine-form .layout-column-wrap,
  .custom-routine-form .bslib-column-wrap {
    flex-direction: column !important;
  }
  .custom-routine-form .layout-column-wrap > *,
  .custom-routine-form .bslib-column-wrap > * {
    width: 100% !important;
    flex: none !important;
  }
}

/* ================================================================
   DEVELOPER FAMILIES UI — mobile
   ================================================================ */
@media (max-width: 576px) {
  /* Stack columns */
  #dev_families_table_wrapper { overflow-x: auto; }

  /* Input fields full width */
  #dev_fam_name,
  #dev_fam_code,
  #dev_edit_name,
  #dev_edit_code {
    font-size: .9rem !important;
  }
}

/* ================================================================
   MODALS — mobile full-width
   ================================================================ */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
  .modal-content {
    border-radius: 18px !important;
  }
  .modal-body {
    padding: 16px 14px !important;
  }
  .modal-footer {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  /* Stack modal footer buttons */
  .modal-footer .btn {
    flex: 1 1 auto !important;
    font-size: .88rem !important;
  }
}

/* ================================================================
   CARD BODY PADDING — tighter on mobile
   ================================================================ */
@media (max-width: 576px) {
  .card-body {
    padding: 14px 12px !important;
  }
  .card-header {
    padding: 10px 14px !important;
    font-size: .9rem !important;
  }
}

/* ================================================================
   REWARDS TAB — star grid on mobile
   ================================================================ */
@media (max-width: 480px) {
  .star-display  { gap: 3px !important; }
  .star-icon     { font-size: 1.4rem !important; }
  .progress      { height: 14px !important; }
}

/* ================================================================
   CALENDAR — mobile touch fixes
   ================================================================ */
@media (max-width: 576px) {
  .cal-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .cal-view-btns, .cal-nav {
    justify-content: center;
  }
  .cal-title {
    min-width: unset !important;
    font-size: .9rem !important;
  }
  .cal-week-grid {
    gap: 2px !important;
  }
  .cal-week-cell {
    min-height: 56px !important;
    padding: 4px !important;
  }
  .cal-week-task {
    font-size: .65rem !important;
    padding: 1px 4px !important;
  }
  /* Month day cells: taller tap target */
  .cal-month-grid .cal-day {
    min-height: 48px !important;
    padding: 4px 3px !important;
  }
}

/* ================================================================
   ACHIEVEMENTS TAB — mobile
   ================================================================ */
@media (max-width: 480px) {
  .achiev-week-strip    { gap: 4px !important; }
  .achiev-day-circle    { min-width: 38px !important; padding: 5px 6px !important; }
  .achiev-streak        { padding: 6px 14px !important; }
  .achiev-streak-num    { font-size: 1.2rem !important; }
  .achiev-month-stats   { gap: 6px !important; }
  .achiev-stat-box      { padding: 8px 6px !important; }
  .achiev-stat-num      { font-size: 1.3rem !important; }
}

/* ================================================================
   PERIOD FILTER — always scrollable on mobile, never clips
   ================================================================ */
@media (max-width: 767px) {
  .period-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .period-filter-bar::-webkit-scrollbar { display: none; }
  .period-filter-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* ================================================================
   EMOJI PICKER — mobile panel doesn't overflow viewport
   ================================================================ */
@media (max-width: 576px) {
  .emoji-picker-panel {
    max-height: 240px !important;
    padding: 8px 10px !important;
  }
  .emoji-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.25rem !important;
  }
}

/* ================================================================
   GLOBAL MOBILE OVERFLOW GUARD
   ================================================================ */
html, body { max-width: 100vw; overflow-x: hidden; }
.container-fluid,
.tab-content,
.bslib-page-navbar > .tab-content { overflow-x: hidden; max-width: 100%; }

/* ================================================================
   DATA TABLES — horizontal scroll on mobile
   ================================================================ */
.dataTables_wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.dataTables_wrapper table { min-width: 400px; }
.dataTables_wrapper td:last-child { white-space: nowrap; }
@media (max-width: 576px) {
  .dataTables_wrapper .dataTables_paginate {
    text-align: left !important;
    padding-top: 6px !important;
  }
  .dataTables_wrapper .dataTables_info { font-size: .75rem !important; }
}

/* ================================================================
   LOGIN / FAMILY-CODE SCREEN — compact on mobile
   ================================================================ */
@media (max-width: 576px) {
  .fc-card {
    padding: 28px 20px 24px !important;
    border-radius: 20px !important;
  }
  .fc-wrap {
    padding: 16px 10px !important;
    align-items: flex-start !important;
    padding-top: 32px !important;
  }
  .fc-features { padding: 10px 14px !important; font-size: .83rem !important; }
  .wb-code-chip { font-size: 1rem !important; padding: 8px 18px !important; }
}

/* ================================================================
   ADMIN PANEL — mobile fixes
   ================================================================ */
.bslib-columns, .bslib-column-wrap { overflow-x: hidden; }
#admin_child_tabs_ui .d-flex,
#admin_rw_child_tabs_ui .d-flex { flex-wrap: wrap !important; }

@media (max-width: 480px) {
  .catalog-tile      { width: 58px !important; padding: 6px 2px 5px !important; }
  .catalog-tile-icon { font-size: 1.3rem !important; }
  .catalog-tile-label { font-size: .55rem !important; }
}

/* ================================================================
   MODALS — mobile full-width
   ================================================================ */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
  .modal-content { border-radius: 18px !important; }
  .modal-body    { padding: 16px 14px !important; }
  .modal-footer  { padding: 10px 14px !important; gap: 8px !important; }
  .modal-footer .btn { flex: 1 1 auto !important; font-size: .88rem !important; }
}

/* ================================================================
   CARD BODY PADDING — tighter on mobile
   ================================================================ */
@media (max-width: 576px) {
  .card-body   { padding: 14px 12px !important; }
  .card-header { padding: 10px 14px !important; font-size: .9rem !important; }
}

/* ================================================================
   REWARDS TAB — star grid on mobile
   ================================================================ */
@media (max-width: 480px) {
  .star-display { gap: 3px !important; }
  .star-icon    { font-size: 1.4rem !important; }
  .progress     { height: 14px !important; }
}

/* ================================================================
   CALENDAR — mobile touch fixes
   ================================================================ */
@media (max-width: 576px) {
  .cal-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .cal-view-btns, .cal-nav { justify-content: center; }
  .cal-title { min-width: unset !important; font-size: .9rem !important; }
  .cal-week-grid  { gap: 2px !important; }
  .cal-week-cell  { min-height: 56px !important; padding: 4px !important; }
  .cal-week-task  { font-size: .65rem !important; padding: 1px 4px !important; }
  .cal-month-grid .cal-day { min-height: 48px !important; padding: 4px 3px !important; }
}

/* ================================================================
   ACHIEVEMENTS TAB — mobile
   ================================================================ */
@media (max-width: 480px) {
  .achiev-week-strip   { gap: 4px !important; }
  .achiev-day-circle   { min-width: 38px !important; padding: 5px 6px !important; }
  .achiev-streak       { padding: 6px 14px !important; }
  .achiev-streak-num   { font-size: 1.2rem !important; }
  .achiev-month-stats  { gap: 6px !important; }
  .achiev-stat-box     { padding: 8px 6px !important; }
  .achiev-stat-num     { font-size: 1.3rem !important; }
}

/* ================================================================
   PERIOD FILTER — scrollable on all phones
   ================================================================ */
@media (max-width: 767px) {
  .period-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .period-filter-bar::-webkit-scrollbar { display: none; }
  .period-filter-btn { flex-shrink: 0 !important; white-space: nowrap !important; }
}

/* ================================================================
   EMOJI PICKER — constrained on mobile
   ================================================================ */
@media (max-width: 576px) {
  .emoji-picker-panel { max-height: 240px !important; padding: 8px 10px !important; }
  .emoji-btn { width: 36px !important; height: 36px !important; font-size: 1.25rem !important; }
}

/* ================================================================
   DEVELOPER FAMILIES TABLE — mobile
   ================================================================ */
#dev_families_table_wrapper { overflow-x: auto; }

/* ================================================================
   GLOBAL MOBILE OVERFLOW GUARD
   ================================================================ */
html, body { max-width: 100vw; overflow-x: hidden; }
.container-fluid,
.tab-content,
.bslib-page-navbar > .tab-content { overflow-x: hidden; max-width: 100%; }

/* ================================================================
   DATA TABLES — horizontal scroll on mobile
   ================================================================ */
.dataTables_wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.dataTables_wrapper table { min-width: 400px; }
.dataTables_wrapper td:last-child { white-space: nowrap; }
@media (max-width: 576px) {
  .dataTables_wrapper .dataTables_paginate {
    text-align: left !important;
    padding-top: 6px !important;
  }
  .dataTables_wrapper .dataTables_info { font-size: .75rem !important; }
}

/* ================================================================
   LOGIN SCREEN — compact on mobile
   ================================================================ */
@media (max-width: 576px) {
  .fc-card {
    padding: 28px 20px 24px !important;
    border-radius: 20px !important;
  }
  .fc-wrap {
    padding-top: 32px !important;
    align-items: flex-start !important;
  }
  .fc-features { padding: 10px 14px !important; font-size: .83rem !important; }
  .wb-code-chip { font-size: 1rem !important; padding: 8px 18px !important; }
}

/* ================================================================
   ADMIN PANEL — mobile fixes
   ================================================================ */
.bslib-columns, .bslib-column-wrap { overflow-x: hidden; }
#admin_child_tabs_ui .d-flex,
#admin_rw_child_tabs_ui .d-flex { flex-wrap: wrap !important; }

@media (max-width: 480px) {
  .catalog-tile       { width: 58px !important; padding: 6px 2px 5px !important; }
  .catalog-tile-icon  { font-size: 1.3rem !important; }
  .catalog-tile-label { font-size: .55rem !important; }
}

/* ================================================================
   MODALS — full-width on mobile
   ================================================================ */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
  .modal-content { border-radius: 18px !important; }
  .modal-body    { padding: 16px 14px !important; }
  .modal-footer  { padding: 10px 14px !important; gap: 8px !important; }
  .modal-footer .btn { flex: 1 1 auto !important; font-size: .88rem !important; }
}

/* ================================================================
   CARD BODY PADDING — tighter on mobile
   ================================================================ */
@media (max-width: 576px) {
  .card-body   { padding: 14px 12px !important; }
  .card-header { padding: 10px 14px !important; font-size: .9rem !important; }
}

/* ================================================================
   REWARDS TAB — star grid on mobile
   ================================================================ */
@media (max-width: 480px) {
  .star-display { gap: 3px !important; }
  .star-icon    { font-size: 1.4rem !important; }
  .progress     { height: 14px !important; }
}

/* ================================================================
   CALENDAR — mobile touch fixes
   ================================================================ */
@media (max-width: 576px) {
  .cal-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .cal-view-btns, .cal-nav { justify-content: center; }
  .cal-title { min-width: unset !important; font-size: .9rem !important; }
  .cal-week-grid  { gap: 2px !important; }
  .cal-week-cell  { min-height: 56px !important; padding: 4px !important; }
  .cal-week-task  { font-size: .65rem !important; padding: 1px 4px !important; }
  .cal-month-grid .cal-day { min-height: 48px !important; padding: 4px 3px !important; }
}

/* ================================================================
   ACHIEVEMENTS — mobile
   ================================================================ */
@media (max-width: 480px) {
  .achiev-week-strip   { gap: 4px !important; }
  .achiev-day-circle   { min-width: 38px !important; padding: 5px 6px !important; }
  .achiev-streak       { padding: 6px 14px !important; }
  .achiev-streak-num   { font-size: 1.2rem !important; }
  .achiev-month-stats  { gap: 6px !important; }
  .achiev-stat-box     { padding: 8px 6px !important; }
  .achiev-stat-num     { font-size: 1.3rem !important; }
}

/* ================================================================
   PERIOD FILTER — always scrollable on phones
   ================================================================ */
@media (max-width: 767px) {
  .period-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .period-filter-bar::-webkit-scrollbar { display: none; }
  .period-filter-btn { flex-shrink: 0 !important; white-space: nowrap !important; }
}

/* ================================================================
   EMOJI PICKER — constrained on mobile
   ================================================================ */
@media (max-width: 576px) {
  .emoji-picker-panel { max-height: 240px !important; padding: 8px 10px !important; }
  .emoji-btn { width: 36px !important; height: 36px !important; font-size: 1.25rem !important; }
}

/* ================================================================
   DEVELOPER FAMILIES TABLE — mobile
   ================================================================ */
#dev_families_table_wrapper { overflow-x: auto; }

/* ================================================================
   MOBILE NAVBAR — definitive height lock
   Prevents Bootstrap from expanding the navbar vertically on mobile.
   Constrains to a single row with horizontal scroll.
   ================================================================ */
@media (max-width: 991.98px) {

  /* REMOVED 2026-07-31: the `.navbar` hard height cap that used to sit here.
     It read:
         .navbar { height: 52px !important; min-height: 52px !important;
                   max-height: 52px !important; overflow: hidden !important; }

     Written for the Bootstrap navbar, whose siblings below it (.navbar-collapse,
     .navbar-nav, .navbar-toggler, .nav-link) are all dead markup now. But bare
     `.navbar` is ALSO Framework7's class, so this rule governed the live app
     header on every viewport 991.98px and under, which is every phone and
     tablet and no desktop. That is why it never reproduced while developing.

     What it broke:
       - It beat --f7-navbar-height (56px, f7_bridge.css) because that variable
         only sizes the bar through a rule without !important. F7 still padded
         .page-content by the variable, so the bar painted 52px under a 62px
         offset and left a dead band.
       - Framework7 reserves the status bar by GROWING the navbar:
         height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top)).
         A fixed height deletes that term while .navbar-inner keeps its
         padding-top: var(--f7-safe-area-top). Measured with a 47px inset the
         header content was pushed down 47px inside a box still 52px tall, so
         the unlock pill's own centre hit-tested to the navbar rather than the
         button: on an installed PWA the way into parent mode was untappable.
       - 52px cannot host a 44px tap target with clearance, which is why the
         header buttons had been shrunk to 40px against the project's own rule.

     Framework7 sizes its own bar correctly from the variable. Nothing replaces
     this rule. */

  /* Collapse must stay single-row */
  .navbar-collapse,
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    height: 52px !important;
    min-height: 0 !important;
    max-height: 52px !important;
    transition: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    display: flex !important;
  }

  /* Nav items horizontal */
  .navbar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: 52px !important;
    align-items: center !important;
  }

  /* Compact nav links */
  .navbar .nav-link {
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: .72rem !important;
    padding: 0 8px !important;
  }

  /* Right-side items stay in row */
  .navbar .ms-auto {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    height: 52px !important;
    align-items: center !important;
    display: flex !important;
    gap: 4px !important;
    margin-left: auto !important;
  }
}

/* ================================================================
   DEFINITIVE MOBILE NAVBAR FIX
   Overrides Bootstrap's navbar-expand-lg responsive collapse.
   Targets the exact class bslib generates so it works at ALL widths.
   ================================================================ */

/* Force navbar to never collapse — always show as a flex row */
.navbar-expand-lg .navbar-toggler  { display: none !important; }
.navbar-expand-lg .navbar-collapse {
  display: flex !important;
  flex-basis: auto !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-height: 52px !important;
  align-items: center !important;
}
.navbar-expand-lg .navbar-collapse::-webkit-scrollbar { display: none; }

/* Also target the non-lg variant bslib might use */
.navbar-expand .navbar-collapse,
.navbar-expand-md .navbar-collapse,
.navbar-expand-sm .navbar-collapse {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-height: 52px !important;
}

/* Prevent Bootstrap's collapse animation height */
.navbar .collapsing {
  height: 52px !important;
  transition: none !important;
}

/* ================================================================
   CUSTOM MOBILE LAYOUT — replaces Bootstrap navbar entirely
   mob-header (sticky) + mob-tabs (scrollable) + mob-content
   ================================================================ */

/* Reset body padding that bslib adds */
body { padding-top: 0 !important; }

/* ── Top header ─────────────────────────────────────────────── */
.mob-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(135deg, var(--sky-dark) 0%, var(--sky) 100%);
  border-bottom: 3px solid var(--yellow);
  box-shadow: 0 3px 12px rgba(0,120,160,.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top) 14px 0;
  height: calc(52px + env(safe-area-inset-top));
  overflow: hidden;
  gap: 8px;
}

.mob-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex-shrink: 0;
}

.mob-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* ── Tab bar ────────────────────────────────────────────────── */
.mob-tabs {
  position: sticky;
  top: calc(52px + env(safe-area-inset-top));
  z-index: 199;
  background: var(--surface, #fff);
  border-bottom: 2px solid var(--border);
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  height: 46px;
  align-items: stretch;
}
.mob-tabs::-webkit-scrollbar { display: none; }

.mob-tab {
  flex-shrink: 0;
  min-width: 72px;
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  color: var(--text-soft);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
  font-family: var(--font);
  letter-spacing: .01em;
}
.mob-tab:hover { background: var(--sky-light); color: var(--sky-dark); }
.mob-tab.active {
  color: var(--sky-dark);
  border-bottom-color: var(--sky-dark);
  background: var(--sky-light);
  font-weight: 900;
}

/* ── Content ────────────────────────────────────────────────── */
.mob-content {
  min-height: calc(100vh - 98px);
  /* T5 — contain overscroll so iOS rubber-band affects only this element */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* T2 — keep last item above iPhone home indicator */
  padding-bottom: env(safe-area-inset-bottom);
}

.mob-section { display: none; padding: 14px; overscroll-behavior: contain; }
.mob-section.active { display: block; }

@media (max-width: 480px) {
  .mob-header  { height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0; }
  .mob-tabs    { top: calc(48px + env(safe-area-inset-top)); height: 42px; }
  .mob-tab     { min-width: 62px; padding: 0 10px; font-size: .72rem; }
  .mob-section { padding: 10px 8px; }
  .mob-content { min-height: calc(100vh - 90px); }
}

/* ================================================================
   PARENT INLINE EDITING
   Long-press cards + per-period "+" add button
   ================================================================ */

/* Parent-mode card: subtle lock icon hint, slightly different cursor */
.kid-card-parent {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
/* Faint hold indicator when not done — helps parent discover long-press */
.kid-card-parent:not(.done)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  transition: background .1s;
}
.kid-card-parent:not(.done):active::after {
  background: rgba(0,174,203,.08);
}

/* "+" add routine button */
.rt-add-btn {
  display: block;
  width: calc(100% - 16px);
  margin: 4px 8px 8px;
  padding: 9px 0;
  background: transparent;
  border: 1.5px dashed var(--sky);
  border-radius: 12px;
  color: var(--sky-dark);
  font-size: .8rem;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: center;
  letter-spacing: .02em;
}
.rt-add-btn:hover,
.rt-add-btn:active {
  background: var(--sky-light);
  border-color: var(--sky-dark);
  border-style: solid;
}

/* ================================================================
   MICRO-INTERACTIONS — instant press feedback & entrance polish
   (ui-animation skill: spring press, smooth selection, stagger reveals)
   ================================================================ */

/* Universal active-press scale for every tappable element */
.btn:active                      { transform: scale(.95) !important; transition: transform .07s ease !important; }
.cal-nav-btn:active,
.cal-view-btn:active,
.achiev-view-btn:active          { transform: scale(.91) !important; transition: transform .07s ease !important; }
.nav-chip-btn:active             { transform: scale(.89) !important; transition: transform .07s ease !important; }
.reward-emoji-opt:active         { transform: scale(.86) !important; transition: transform .07s ease !important; }
.mob-tab:active                  { transform: scale(.93) !important; transition: transform .07s ease !important; }

/* Calendar day selection: smooth background + gentle shrink */
.cal-day {
  transition: background .1s ease, transform .1s ease !important;
}
.cal-day.selected                { transform: scale(.97); }
.cal-week-header                 { transition: all .12s ease !important; }
.cal-week-header.selected        { transform: scale(.97); }
.cal-week-cell                   { transition: background .1s ease !important; }

/* Period-count badge pulse when it hits 100% */
.kid-period-pct.complete         { animation: completePulse .35s ease-out; }

/* Period header flash when an entire period is just completed */
.period-just-done {
  animation: periodDoneFlash 1.4s ease-out forwards;
}
@keyframes periodDoneFlash {
  0%   { filter: brightness(1);    box-shadow: none; }
  20%  { filter: brightness(1.35); box-shadow: 0 0 0 3px #FFD300, 0 0 16px rgba(255,211,0,.5); }
  60%  { filter: brightness(1.15); box-shadow: 0 0 0 2px #FFD300, 0 0 8px rgba(255,211,0,.3); }
  100% { filter: brightness(1);    box-shadow: none; }
}

/* Achievement day circles: staggered fade-in on each render */
.achiev-week-strip > :nth-child(1) { animation: fadeInUp .22s 0.00s ease-out both; }
.achiev-week-strip > :nth-child(2) { animation: fadeInUp .22s 0.04s ease-out both; }
.achiev-week-strip > :nth-child(3) { animation: fadeInUp .22s 0.08s ease-out both; }
.achiev-week-strip > :nth-child(4) { animation: fadeInUp .22s 0.12s ease-out both; }
.achiev-week-strip > :nth-child(5) { animation: fadeInUp .22s 0.16s ease-out both; }
.achiev-week-strip > :nth-child(6) { animation: fadeInUp .22s 0.20s ease-out both; }
.achiev-week-strip > :nth-child(7) { animation: fadeInUp .22s 0.24s ease-out both; }

/* Stat boxes in month view: fade up together */
.achiev-stat-box { animation: fadeInUp .28s ease-out both; }
.achiev-month-stats > :nth-child(1) .achiev-stat-box,
.achiev-month-stats > :nth-child(1) { animation-delay: 0s; }
.achiev-month-stats > :nth-child(2) { animation-delay: .06s; }
.achiev-month-stats > :nth-child(3) { animation-delay: .12s; }

/* Task items in calendar day panel: slide in */
.task-item { animation: fadeInUp .2s ease-out both; }

/* Goal card progress bar: ensure smooth width transition always applies */
.goal-bar-fill { transition: width 1s cubic-bezier(.25,.8,.25,1) !important; }

/* Kid progress fill: already .6s ease, boost to spring feel */
.kid-progress-fill { transition: width .5s cubic-bezier(.34,1.26,.64,1) !important; }