/* Overrides to restore responsive rules lost due to invalid media-query syntax
   present in the compiled `static/css/main.css`. These are small, targeted
   fixes (header, mobile nav, price table padding, calendar slots) and should
   be safe to load after the compiled CSS. Regenerate `main.css` from sources
   when convenient to permanently fix the issues. */

@media (max-width: 768px) {
  .site-header .bar { justify-content: space-between; gap: 12px; }

  .hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 36px;
    padding: 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

    /* On mobile, avoid shifting the header with a translateX; this prevents
      a small horizontal nudge when the mobile menu opens (caused by toggling
      classes that affect layout). Keep header static on small screens. */
    .site-header .bar { transform: none !important; transition: none !important; }

  .hamburger:focus-visible { outline: 2px solid rgb(255 255 255 / 70%); outline-offset: 2px; }
  .hamburger span { display:block; width:100%; height:3px; background:#fff; border-radius:999px; transition:transform .25s ease, opacity .25s ease; }
  .hamburger.is-open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
  .hamburger.is-open span:nth-child(2){ opacity: 0; }
  .hamburger.is-open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

     .main-nav {
     /* Admin-like centered dropdown: position relative to header and centered
       via left:50% + translate(-50%). This avoids viewport-fixed side gaps
       while matching admin visual behavior. */
     position: absolute;
     top: calc(100% + 6px);
     left: 50%;
     width: 100vw;
     transform: translate(-50%, -8px);
     background: var(--primary);
     padding: 1.4rem 0 1.8rem;
     display:flex; flex-direction:column; align-items:center; gap:1.2rem;
     box-shadow: 0 18px 32px rgb(0 0 0 / 18%);
     border-radius: 0 0 18px 18px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: transform .3s ease, opacity .3s ease;
     z-index: 40;
    }

  /* Remove horizontal scrollbar for the mobile dropdown - not needed. */
  .main-nav {
    overflow-x: hidden !important;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .main-nav::-webkit-scrollbar { display: none; }

  .main-nav.active,
  .site-header.nav-open .main-nav {
    /* Slide down into view but keep centered horizontally */
    transform: translate(-50%, 0) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Ensure fixed positioning is relative to the viewport. If a parent has a
     transform, fixed descendants can become positioned against that ancestor.
     When the menu is open, remove transforms on the header so the dropdown
     anchors to the viewport and doesn't leave a left gap. */
  /* When nav is open remove the bar's translate so centering is accurate */
  .site-header.nav-open { transform: none !important; will-change: auto !important; }
  .site-header.nav-open .bar { transform: none !important; }

  /* Prevent horizontal overflow that causes a visible gap on the left edge
     by forbidding x-axis scroll for the root elements. */
  html, body { overflow-x: hidden !important; }

  .main-nav .nav-actions { display: contents; }

  .main-nav a,
  .main-nav .btn.ghost,
  .main-nav .appearance-toggle,
  .main-nav .nav-greeting {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    color: #fff;
    padding: 0.3rem 0;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }

  .main-nav a:hover,
  .main-nav .btn.ghost:hover,
  .main-nav .appearance-toggle:hover { text-decoration: underline; }

  .main-nav .appearance-toggle,
  .main-nav .nav-greeting { all: unset; display:block; width:100%; text-align:center; color:#fff; padding:0.3rem 0; line-height:1.6; font-size:1.2rem; font-weight:700; cursor:pointer; }
}

/* Price table small-screen padding (was inside an invalid media query) */
@media (max-width: 768px) {
  .price-table th, .price-table td { padding: 10px 12px; }
}

/* Calendar/slot minimum width on narrow screens */
@media (max-width: 600px) {
  .user-dashboard { grid-template-columns: 1fr; }
  /* Hide the user nav by default on smaller screens to save space. It will
     be toggled by the top 'Panel użytkownika' control. */
  .user-nav { display: none; flex-direction: column; transition: max-height .22s ease, opacity .18s ease; max-height: 0; opacity: 0; overflow: hidden; }
  .user-nav.open { display: block; max-height: 200vh; opacity: 1; }
  .user-nav nav { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  body.admin-area .bookings-page .bookings-table { min-width: 0 !important; }
  body.admin-area .bookings-page .bookings-table thead { display: none !important; }
  body.admin-area .bookings-page .bookings-table tbody tr { display:block !important; }
  body.admin-area .bookings-page .cell-actions .action-list { display:flex !important; flex-direction:column; gap:6px; }
  body.admin-area .bookings-page .cell-actions .action-list .btn { width:100%; padding:6px 8px; font-size:0.9rem; }
}

/* Strong mobile fixes: ensure stacked-table layout, prevent horizontal clipping
   and make action buttons accessible on narrow screens. These use !important to
   override compiled rules when necessary. */
@media (max-width: 860px) {
  /* Ensure the responsive wrapper doesn't hide overflowed content due to layout quirks */
  .bookings-page .table-responsive { overflow-x: visible !important; padding-right: 0 !important; }

  /* Force the bookings table to use block rows so each booking becomes a card */
  .bookings-page .bookings-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .bookings-page .bookings-table thead { display: none !important; }
  .bookings-page .bookings-table tbody tr {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
    padding: 10px !important;
  }

  .bookings-page .bookings-table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    padding: 8px 10px !important;
  }

  /* Make action-list inline on slightly wider mobiles but ensure buttons don't overflow */
  .bookings-page .cell-actions .action-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    width: auto !important;
  }

  /* For very narrow screens, stack buttons vertically to avoid clipping */
  @media (max-width: 480px) {
    /* Prefer inline/wrapping buttons on narrow phones instead of forcing full-width
       This keeps actions readable and avoids a single button spanning the full card. */
    .bookings-page .cell-actions .action-list {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
      justify-content: flex-end !important;
      width: auto !important;
    }
    .bookings-page .cell-actions .action-list .btn {
      width: auto !important;
      max-width: 140px !important;
      padding: 6px 10px !important;
      box-sizing: border-box !important;
    }

    /* For extremely narrow screens, fall back to stacked full-width buttons */
    @media (max-width: 360px) {
      .bookings-page .cell-actions .action-list { flex-direction: column !important; align-items: stretch !important; }
      .bookings-page .cell-actions .action-list .btn { width: 100% !important; max-width: none !important; }
    }

    .bookings-page .bookings-table tbody tr { padding-left: 6px !important; padding-right: 6px !important; }
  }
}

/* End of overrides */

/* Normalize inline CTA button in service cards (inline checkbox + button layout)
   Ensure the Liceum inline CTA has the same visual height/padding as other
   service/package buttons and a stable minimum width so it visually matches
   neighbouring cards. This is a small localized override. */

/* Make inline CTA button visually identical to other offer-card buttons
   (use the base .btn sizing and alignment). Remove forced min-width so the
   button doesn't appear oversized compared to neighbouring cards. */
.page-service .offer-card .inline-cta .btn {
  padding: 10px 14px; /* same as .btn base */
  min-width: auto;    /* don't force a larger width */
  height: auto;
  align-self: flex-start; /* same alignment as other offer-card buttons */
  text-align: center;
}

.page-service .offer-card .inline-cta label span {
  white-space: nowrap;
  font-size: 0.85rem;
  line-height: 1; /* keep compact single-line appearance */
}

/* Reservation form checkbox styling: make the 'Poziom rozszerzony' checkbox
   visually consistent with other controls and align the label text. */
.form-card .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.form-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.form-card .muted { margin-top: 6px; }

/* Duration select sizing: when the duration label and select appear on one
   row, keep the select compact and provide a small gap from the label. On
   narrow screens revert to full-width. */
.form-card label[for="duration"] { display: inline-block; margin-right: 8px; }
.form-card label[for="duration"] + select.control-70 {
  width: auto;    /* don't take 70% when inline */
  min-width: 140px; /* reasonable compact width */
  max-width: 280px;
}

@media (max-width: 980px) {
  .form-card label[for="duration"] + select.control-70 { width: 100%; }
}

/* Date and email: inline on desktop with small gap, full-width on mobile */
.form-card label[for="date"], .form-card label[for="email"] { display: inline-block; margin-right: 8px; }
.form-card label[for="date"] + input#date,
.form-card label[for="email"] + input#email {
  display: inline-block;
  width: auto;
  min-width: 160px;
  max-width: 420px;
}
@media (max-width: 980px) {
  .form-card label[for="date"] + input#date,
  .form-card label[for="email"] + input#email { width: 100%; display: block; }
}

/* Small footnote under the submit button */
.form-card .submit-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 8px;
}
.form-card .submit-note a { color: var(--primary); font-weight: 600; text-decoration: none; }
.form-card .submit-note a:hover { text-decoration: underline; }

.form-card form {
  display: grid;
  grid-template-columns: 100px 1fr; /* restore label column to previous value */
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
}

.form-card form label {
  grid-column: 1 / 2;
  justify-self: end;
  padding-right: 6px;
  font-weight: 600;
}

.form-card form select.control-70,
.form-card form input#date,
.form-card form input#email,
.form-card form input[type="checkbox"] {
  grid-column: 2 / -1;
  width: 100%;
  box-sizing: border-box;
}

/* Make the form a two-column grid (label / control) and expose a
   dedicated controls-column container so helper text can align with
   the inputs without relying on calc() offsets. */
.form-card form {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 12px;
  align-items: start;
}

/* Ensure commonly placed items sit in the controls column */
.form-card #slotsInfo,
.form-card #slots,
.form-card .form-row-checkbox,
.form-card .form-actions,
.form-card #nextBtn {
  grid-column: 2 / -1;
}

/* Controls-column wrapper: move helper content into the right column */
.form-card .controls-column {
  grid-column: 2 / -1;
}

/* Submit note: align start of controls column and keep normal flow */
.form-card .submit-note {
  margin: 10px 0 0 0;
  text-align: left;
  justify-self: start;
  width: auto;
}

@media (max-width: 980px) {
  .form-card form { display: block; }
  .form-card .submit-note { margin-left: 0; width: 100%; }
}

/* Checkbox row: keep checkbox and its description stacked neatly */
.form-card .form-row-checkbox { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.form-card .form-row-checkbox .checkbox-label { align-items: center; margin: 0; }

/* Keep the checkbox label text on a single line */
.form-card .checkbox-label span {
  white-space: nowrap;
  display: inline-block;
}

/* Package checkbox: show checkbox and label on a single line (compact) */
.package-card__form .checkbox-label,
.package-card .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  margin: 0;
}

.package-card__form .checkbox-label input[type="checkbox"],
.package-card .checkbox-label input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
}

/* Align button to start of controls column */
.form-card .form-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.form-card .form-actions #nextBtn { width: auto; align-self: flex-start; }

/* Do not override calendar layout. Only adjust the form card padding so
  the calendar remains untouched and visual alignment comes from the
  form container itself. */
.form-card { padding-left: 12px; padding-right: 12px; margin-left: 0; }

/* Inline actions row: place checkbox and submit button on one line */
.form-actions-row { display: flex; gap: 12px; align-items: center; }
.form-actions-row .checkbox-label { margin: 0; }
.form-actions-row #nextBtn { margin-left: 6px; }

@media (max-width: 980px) {
  .form-card form {
    display: block;
  }
  .form-card form label { display: block; text-align: left; margin-bottom: 6px; }
  .form-card form select.control-70, .form-card form input#date, .form-card form input#email { width: 100%; }
  .form-card #slots, .form-card #slotsInfo, .form-card .form-row-checkbox, .form-card .form-actions { width: 100%; }
}


/* Header stability overrides: reserve height and prevent nav wrapping
   so the header remains a single row when session links appear. These
   rules are minimal, non-animated, and only affect desktop/tablet sizes. */
@media (min-width: 540px) {
  .site-header .bar {
    min-height: 56px; /* reserve vertical space to avoid reflow */
    align-items: center; /* vertically center single-row content */
  }

  .brand { flex-shrink: 0; margin-right: 18px; }

  /* Keep the main nav items on one line and prevent wrapping */
  .main-nav { display: flex; gap: 14px; align-items: center; flex-wrap: nowrap; }
  .main-nav a, .main-nav .btn, .main-nav .appearance-toggle { white-space: nowrap; }

  /* Ensure session links don't force the nav to wrap */
  .nav-actions { margin-left: auto; flex-shrink: 0; display: flex; gap: 12px; align-items: center; }

  /* If space gets tight, prefer truncation on the brand rather than wrapping nav */
  .brand { overflow: hidden; text-overflow: ellipsis; }
}

/* Stronger header layout to keep brand, hamburger and actions on one row */
.site-header .bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Note: removed global translateX shift here because it caused desktop layout
  breakage. Mobile-specific adjustments remain scoped to max-width rules so
  mobile behaviour is preserved. */

.site-header .brand {
  flex: 0 1 auto; /* allow shrinking but prefer intrinsic width */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header .hamburger {
  flex: 0 0 auto;
  order: 1;
}

.site-header .brand { order: 0; }
.site-header .main-nav { order: 2; flex: 1 1 auto; min-width: 0; }
.site-header .admin-nav-actions { order: 3; margin-left: auto; flex: 0 0 auto; }

/* On narrow screens shrink brand font and show ellipsis sooner */
@media (max-width: 520px) {
  .site-header .brand { font-size: 1.02rem; max-width: calc(100vw - 140px); }
  /* ensure appearance toggle stays compact */
  .admin-nav-actions .appearance-toggle, .appearance-toggle { padding: 6px; }
}

/* If brand still too long on very narrow phones, hide part of it (Algebra i...) */
@media (max-width: 420px) {
  .site-header .brand { font-size: 0.98rem; max-width: calc(100vw - 120px); }
}

/* Ensure admin-like actions class also behaves well for non-admin pages */
.admin-nav-actions{display:flex;gap:10px;align-items:center;margin-left:auto;white-space:nowrap}



/* End of overrides */

/* --- Mobile polish: admin header and bookings for narrow phones --- */
@media (max-width: 480px) {
  /* Hide the "Zalogowano jako" helper text to give space */
  body.admin-area .admin-nav-actions > span { display: none !important; }

  /* Slightly reduce brand size and tighten gaps */
  body.admin-area .brand { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.admin-area .admin-bar { gap: 8px; }
  body.admin-area .admin-nav { gap: 8px; }

  /* Make nav actions compact (logout, toggle) */
  body.admin-area .admin-nav-actions .btn.ghost.btn-small,
  body.admin-area .admin-nav-actions .btn { padding: 4px 8px; font-size: 0.88rem; }

  /* Keep appearance icon visible but hide the text to save width (admin only) */
  body.admin-area .appearance-toggle .appearance-text { display: none !important; }
  body.admin-area .appearance-toggle .appearance-icon { width: 16px; height: 16px; }

  /* Global: show icon-only appearance toggle on narrow screens for all pages */
  .appearance-toggle .appearance-text { display: none !important; }
  .appearance-toggle .appearance-icon { width: 16px; height: 16px; border-radius: 999px; display:inline-block; background: transparent; border: 2px solid rgba(255,255,255,0.18); box-sizing: border-box; }
  .admin-nav-actions { margin-left: 8px; }

  /* Ensure hamburger stays visible and compact */
  .hamburger { width: 34px; height: 32px; padding: 6px; }
  .hamburger span { height: 2px; }

  /* Nav link sizing */
  body.admin-area .admin-nav a { font-size: 0.95rem; padding: 6px 8px; }
}

/* Make appearance toggle circular and visually like admin
   Use the same selector specificity as the component rules so these
   overrides win over the compiled `nav.css` styles. */
body.admin-area .appearance-toggle,
.site-header.admin-area .appearance-toggle,
.admin-nav-actions .appearance-toggle,
.main-nav .appearance-toggle,
.nav-actions .appearance-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 6px; /* tighten the pill to a circular hit area */
  border-radius: 999px;
  background: transparent;
  border: 0;
  box-sizing: border-box;
}

body.admin-area .appearance-toggle .appearance-icon,
.site-header.admin-area .appearance-toggle .appearance-icon,
.admin-nav-actions .appearance-toggle .appearance-icon,
.main-nav .appearance-toggle .appearance-icon,
.nav-actions .appearance-toggle .appearance-icon,
.appearance-toggle .appearance-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), rgba(255,255,255,0.18) 10%, rgba(0,0,0,0.15) 60%), linear-gradient(180deg,#7fbcff,#3b88ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 10px rgba(27,60,100,0.25);
  border: 1px solid rgba(255,255,255,0.18);
}

/* Lighten toggle border on hover/focus for better affordance */
body.admin-area .appearance-toggle:hover .appearance-icon,
.site-header.admin-area .appearance-toggle:hover .appearance-icon,
.admin-nav-actions .appearance-toggle:hover .appearance-icon,
.main-nav .appearance-toggle:hover .appearance-icon,
.nav-actions .appearance-toggle:hover .appearance-icon,
.appearance-toggle:hover .appearance-icon,
.appearance-toggle:focus .appearance-icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px rgba(27,60,100,0.3);
  transform: translateY(-1px);
}

/* Ensure clickable area remains circular on small screens */
@media (max-width: 520px) {
  body.admin-area .appearance-toggle,
  .site-header.admin-area .appearance-toggle,
  .admin-nav-actions .appearance-toggle,
  .main-nav .appearance-toggle,
  .nav-actions .appearance-toggle { width: 36px; height: 36px; }
  body.admin-area .appearance-toggle .appearance-icon,
  .site-header.admin-area .appearance-toggle .appearance-icon,
  .admin-nav-actions .appearance-toggle .appearance-icon,
  .main-nav .appearance-toggle .appearance-icon,
  .nav-actions .appearance-toggle .appearance-icon,
  .appearance-toggle .appearance-icon { width: 18px; height: 18px; }
}

/* Strong, high-specificity overrides to force the admin 'ball-in-ball' look
   everywhere and prevent the component styles from producing a pill or
   square casing. We use explicit selectors and a few `!important` rules
   only where necessary to defeat compiled component rules. */
html[data-theme="light"] .site-header .main-nav .appearance-toggle,
html[data-theme="dark"] .site-header .main-nav .appearance-toggle,
html[data-theme="light"] .site-header .nav-actions .appearance-toggle,
.site-header .main-nav .appearance-toggle,
.site-header .nav-actions .appearance-toggle,
.admin-nav-actions .appearance-toggle,
.main-nav .appearance-toggle {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important; /* remove pill horizontal padding */
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* Hide any text label inside the toggle so it cannot expand the container */
html .appearance-toggle .appearance-text,
.appearance-toggle .appearance-text { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }

/* Inner 'ball' exact visuals: keep circle, crisp gradient and subtle inset */
html[data-theme="light"] .appearance-toggle .appearance-icon,
html[data-theme="dark"] .appearance-toggle .appearance-icon,
.site-header .appearance-toggle .appearance-icon,
.admin-nav-actions .appearance-toggle .appearance-icon,
.main-nav .appearance-toggle .appearance-icon,
.appearance-toggle .appearance-icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.18) 12%, rgba(0,0,0,0.10) 60%), linear-gradient(180deg,#7fbcff,#3b88ff) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 18px rgba(27,60,100,0.28) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Remove any rectangular background/shadow applied to the outer toggle by components */
html .site-header .appearance-toggle,
html .main-nav .appearance-toggle,
html .nav-actions .appearance-toggle { background: transparent !important; box-shadow: none !important; }

/* Prevent small horizontal layout shifts when the mobile menu opens:
  - reserve scrollbar gutter space so appearing/disappearing scrollbars don't move content
  - make the header occupy full left/right edges so internal changes don't nudge its position */
html { scrollbar-gutter: stable; }
.site-header { left: 0; right: 0; }

/* Ensure the bar content has fixed layout: hamburger and actions won't flex unexpectedly */
.site-header .hamburger { flex: 0 0 40px; }
.site-header .admin-nav-actions { flex: 0 0 auto; }
.site-header .brand { flex: 1 1 auto; min-width: 0; }

/* Make mobile "Zalogowano jako" visible against the blue header background.
  The JS inserts a plain <div> into the nav on mobile; target div children
  of the nav and force a high-contrast color and padding. */
.site-header .main-nav > div,
.site-header .admin-nav > div,
.site-header .main-nav .nav-greeting {
  color: #e9f2ff !important; /* matches admin inline color */
  padding: 6px 10px !important;
  font-weight: 600 !important;
}

/* Hide the leftover brand corner when the mobile nav is open (prevents
  a tiny clipped piece of the brand from showing under the menu). */
.site-header.nav-open .brand { /* keep default visible unless scoped below */ }
/* Only hide brand visually when logged-in (or admin area) to avoid layout jumps
   for anonymous users. Admin pages can use their own targeting via body.admin-area. */
body.logged-in .site-header.nav-open .brand,
body.admin-area .site-header.nav-open .brand {
  visibility: hidden !important;
  opacity: 0 !important;
}


/* Admin calendar visual tweaks moved from template */
table.table th { text-align: left; padding: 8px 6px; font-weight: 700; color: var(--muted); }
table.table td { padding: 6px 8px; vertical-align: middle; }
table.table td[data-time-cell] { text-align: left; white-space: nowrap; }

/* Calendar: desktop-first visual styling */
.calendar-desktop .calendar-inner { padding: 6px; }
.calendar-desktop .calendar-table { width:100%; border-collapse: separate; border-spacing: 0 12px; }
.calendar-desktop .calendar-table thead th { text-align:left; color:var(--muted); font-size:0.85rem; padding:12px 10px; }
.calendar-desktop .calendar-table tbody tr { background: var(--panel); border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.calendar-desktop .calendar-table tbody td { padding:14px 12px; vertical-align: middle; }
.calendar-desktop .calendar-table .cell-service { font-weight:700; }
.calendar-desktop .calendar-table .cell-date { color:var(--muted); white-space:nowrap; }
.calendar-desktop .calendar-table .cell-time { font-weight:700; white-space:nowrap; }
.calendar-desktop .calendar-table .cell-status .note { margin-top:6px; color:var(--muted); font-size:0.9rem; }
.calendar-desktop .calendar-table .row-blocked { outline: 2px dashed rgba(255,215,0,0.06); }
.calendar-desktop .calendar-table .btn-delete-booking { margin-top:8px; }
.btn-delete-booking { background: #666; color: #fff; border-radius: 6px; padding: 4px 8px; border: none; font-size: 0.85rem; cursor: pointer; }
.btn-delete-booking:hover { background: #555; }

/* Keep footer at bottom by ensuring page content min-height (admin calendar) */
main > .content { min-height: calc(100vh - 160px); }


/* Bookings: tighter, phone-optimized layout */
@media (max-width: 480px) {
  body.admin-area .bookings-page .bookings-table tbody td { padding: 6px 8px; }
  body.admin-area .bookings-page .bookings-table tbody tr { padding: 6px !important; }
  body.admin-area .bookings-page .cell-actions .action-list { gap: 6px; }
  .bookings-page .index-pill { width: 26px; height: 26px; font-size: 0.8rem; }
  .bookings-page .cell-actions .btn[data-fulltext] { max-width: 120px; font-size: 0.85rem; padding: 6px 8px; }
  body.admin-area .bookings-page .cell-offer .offer-name { font-size: 0.95rem; }
  body.admin-area .bookings-page .cell-client .client-email { font-size: 0.9rem; }

  /* Ensure action-list stacks when necessary to avoid overlap */
  body.admin-area .bookings-page .cell-actions .action-list { display: flex; flex-direction: column; }
  body.admin-area .bookings-page .cell-actions .action-list .btn { width: 100%; }
}

/* Desktop/tablet polish for bookings: reduce gap and equalize action buttons */
@media (min-width: 781px) {
  /* Reduce horizontal padding between payment details and actions */
  body.admin-area .bookings-page .bookings-table tbody td.cell-payment { padding-right: 12px; }
  body.admin-area .bookings-page .bookings-table tbody td.cell-actions { padding-left: 12px; }

  /* Make action list vertical and buttons equal, but smaller */
  body.admin-area .bookings-page .cell-actions .action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start; /* align buttons to the left of the actions column */
    max-width: 140px;
  }

  body.admin-area .bookings-page .cell-actions .action-list .btn {
    min-width: 100px;
    max-width: 100px;
    padding: 6px 10px;
    font-size: 0.92rem;
    border-radius: 8px;
    box-sizing: border-box;
  }

  /* Left-align actions so buttons sit under the left edge of the header */
  body.admin-area .bookings-page .bookings-table tbody td.cell-actions {
    text-align: left;
    display: table-cell;
    vertical-align: middle;
  }

  /* Ensure the column header is centered and has matching horizontal padding */
  body.admin-area .bookings-page .bookings-table thead th:nth-child(5) {
    text-align: left !important;
    padding-left: 6px;
    padding-right: 8px;
  }

  /* Give the actions column a fixed visual width so the header and buttons align
     predictably regardless of other column content. Adjust if you prefer wider. */
  body.admin-area .bookings-page .bookings-table col.col-actions { width: 140px; }

  /* Make sure the actions cell uses the same horizontal padding as the header */
  body.admin-area .bookings-page .bookings-table tbody td.cell-actions {
    padding-left: 6px;
    padding-right: 8px;
    text-align: left; /* ensure buttons align to left edge */
  }

  /* Ensure both buttons have the same height and visual weight */
  body.admin-area .bookings-page .cell-actions .action-list .btn.btn-sm {
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Slightly reduce overall cell padding for a tighter table */
  body.admin-area .bookings-page .bookings-table tbody td { padding: 12px; }
}

/* Final mobile header stability fix (placed at end to win over earlier rules) */
@media (max-width: 768px) {
  /* Remove any left translate on the header bar on small screens to avoid
     horizontal nudges when the mobile nav toggles. This rule must be last
     so it overrides earlier global/transformed definitions. */
  .site-header .bar { transform: none !important; transition: none !important; }
  .site-header.nav-open .bar { transform: none !important; }
}

/* === Quick fix: reduce gaps and hide full brand text on narrow screens for logged-in users === */
@media (max-width: 520px) {
  /* Tighten container padding so items sit closer to edges */
  body.logged-in .site-header .bar { padding-left: 4px !important; padding-right: 4px !important; gap: 6px !important; }

  /* Reduce hamburger left offset and size slightly to free space */
  body.logged-in .site-header .hamburger { left: 6px !important; width: 34px !important; height: 30px !important; padding: 5px !important; z-index: 110 !important; }

  /* Make the session pill and logout button more compact */
  body.logged-in .site-header .admin-nav-actions .session-pill { padding: 4px 8px !important; margin-right: 6px !important; font-size: 0.92rem !important; }
  body.logged-in .site-header .admin-nav-actions a.btn.ghost.btn-small,
  body.logged-in .site-header .admin-nav-actions a.btn.ghost { padding: 5px 8px !important; font-size: 0.92rem !important; margin-left: 6px !important; }

  /* Reduce gap between actions and center brand space more tightly */
  body.logged-in .site-header .admin-nav-actions { right: 6px !important; }

  /* Visually hide the long brand text to avoid overlaps. Use an accessible clip technique so the link remains in the DOM and readable to screen readers. */
  body.logged-in .site-header .brand {
    position: relative !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    text-indent: 200% !important;
  }

  /* Keep a small visual dot (optional) so the header still looks balanced. We add a pseudo-element as a subtle marker. */
  body.logged-in .site-header .brand::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.9);
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }

  /* Further ensure admin-nav-actions doesn't overflow and squeezes into the right side */
  body.logged-in .site-header .admin-nav-actions { display:flex; gap:6px; align-items:center; }
}

/* Ensure session-pill sits above hamburger if they overlap slightly */
@media (max-width: 520px) {
  body.logged-in .site-header .admin-nav-actions .session-pill { z-index: 120 !important; position: relative !important; }
  body.logged-in .site-header .admin-nav-actions a.btn.ghost { z-index: 120 !important; position: relative !important; }
}

/* --- Strong overrides: very high specificity to ensure these win --- */
@media (max-width: 520px) {
  html body.logged-in .site-header .bar {
    padding-left: 2px !important;
    padding-right: 2px !important;
    gap: 6px !important;
    min-height: 52px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Position hamburger absolutely at the very left and ensure it doesn't
     visually cover the session pill (we keep hamburger lower z-index so
     the pill remains on top). */
  html body.logged-in .site-header .hamburger {
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 30px !important;
    padding: 5px !important;
    z-index: 100 !important; /* hamburger below session-pill */
  }

  /* Ensure action buttons (session-pill / logout) stay above hamburger */
  html body.logged-in .site-header .admin-nav-actions {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 140 !important;
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
  }

  html body.logged-in .site-header .admin-nav-actions .session-pill,
  html body.logged-in .site-header .admin-nav-actions a.btn.ghost {
    z-index: 150 !important;
    position: relative !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }

  /* Make sure brand stays hidden visually but present for screen readers */
  html body.logged-in .site-header .brand {
    position: relative !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    text-indent: 200% !important;
  }
}


/* Increase vertical space on very narrow screens so text fits inside pills/buttons */
@media (max-width: 520px) {
  body.logged-in .site-header .bar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 52px !important; /* ensure enough vertical room for buttons */
    align-items: center !important;
  }

  /* Make session pill and buttons have defined height and centered content */
  body.logged-in .site-header .admin-nav-actions .session-pill {
    height: 34px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    font-size: 0.95rem !important;
  }

  body.logged-in .site-header .admin-nav-actions a.btn.ghost.btn-small,
  body.logged-in .site-header .admin-nav-actions a.btn.ghost {
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    font-size: 0.95rem !important;
  }

  /* Ensure hamburger vertical centering remains correct */
  body.logged-in .site-header .hamburger {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}



/* Logged-in header centering: keep main content centered while placing
   the hamburger at left and action buttons at right via absolute
   positioning. Scoped to logged-in users only so default layout is
   unchanged for anonymous visitors. */
@media (max-width: 780px) {
  body.logged-in .site-header .bar {
    justify-content: center !important;
    position: relative !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.logged-in .site-header .hamburger {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 121 !important;
  }

  body.logged-in .site-header .admin-nav-actions {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 121 !important;
    margin-left: 0 !important;
  }

  /* Limit brand width so center content has room for actions */
  body.logged-in .site-header .brand {
    max-width: calc(100vw - 140px) !important;
    text-align: center !important;
  }
}


/* Remove the visual 'gap' between payment and actions on desktop by using
   collapsed table layout for bookings on wider screens. This ensures the
   row background and rounded corners span the full width without a hole. */
@media (min-width: 781px) {
  body.admin-area .bookings-page .bookings-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100%;
  }

  /* Keep the row visual (background, shadow, radius) on the tr so it spans
     the full table width in collapsed mode */
  body.admin-area .bookings-page .bookings-table tbody tr {
    background: var(--panel);
    box-shadow: 0 18px 30px rgb(14 30 62 / 8%);
    border-radius: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: table-row;
  }

  /* Ensure cells don't show separate backgrounds or borders that create gaps */
  body.admin-area .bookings-page .bookings-table tbody td {
    background: transparent;
    border: 0;
    padding: 12px;
    vertical-align: middle;
  }

  /* Re-apply left/right rounding by styling first/last cell corners */
  body.admin-area .bookings-page .bookings-table tbody td:first-child {
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
  }
  body.admin-area .bookings-page .bookings-table tbody td:last-child {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
  }
}




/* --- Moved from templates/base.html --- */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:9999}
.modal-backdrop.show{display:flex}
.modal{width:min(420px,92%);}
.modal .row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.user-header-info{display:flex;flex-direction:column;align-items:flex-start;margin-top:4px;margin-left:6px}
.user-header-info .user-greeting{font-size:0.9rem;color:var(--muted)}
.user-header-info .user-panel-link{margin-top:2px}
.user-header-info .user-panel-link .btn.small{font-size:0.85rem;padding:4px 10px;border-radius:6px}
.session-pill{display:inline-block;padding:6px 12px;border:1px solid rgba(255,255,255,0.6);border-radius:999px;color:#fff;background:rgba(255,255,255,0.08);font-weight:700}
.session-pill:hover{background:rgba(255,255,255,0.16);text-decoration:none}
.main-nav .nav-actions a{padding:0 10px;text-decoration:none;color:inherit;font-weight:600}
.main-nav .nav-actions a:hover{text-decoration:underline}

/* --- Moved from templates/base.html: msgbox --- */
#msgbox{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:8px}
.msg{min-width:260px;max-width:420px;padding:12px 14px;border-radius:10px;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.12);opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease}
.msg.show{opacity:1;transform:translateY(0)}
.msg.success{background:#16a34a}
.msg.error{background:#dc2626}
.msg.info{background:#2563eb}

/* --- Moved from templates/admin/base_admin.html (admin-specific rules) --- */
.admin-nav{display:flex;flex-wrap:nowrap;gap:14px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-nav::-webkit-scrollbar{height:6px}
.admin-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.admin-nav>a{white-space:nowrap}
.admin-nav .nav-drop{display:flex;align-items:center;position:relative}
.admin-nav .nav-drop>summary{display:flex;align-items:center;gap:6px;white-space:nowrap;list-style:none;cursor:pointer}
.admin-nav .nav-drop>summary::-webkit-details-marker{display:none}
.admin-nav .nav-drop .drop-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:8px 10px;display:none;min-width:180px;z-index:20}
.admin-nav .nav-drop[open] .drop-menu{display:block}
.admin-nav .nav-drop .drop-menu a{display:block;padding:6px 6px;margin:0;color:var(--text);text-decoration:none}
.badge-warn{display:inline-block;min-width:1.6em;text-align:center;background:#FFD43B;color:#1f2933;border-radius:999px;font-size:.85em;padding:0 6px;margin-left:4px}
.site-header{position:sticky;top:0;z-index:120;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.admin-bar{gap:16px;align-items:center;flex-wrap:nowrap}
.admin-nav{flex:1 1 auto;min-width:0}
.admin-nav-actions{display:flex;gap:10px;align-items:center;margin-left:auto;white-space:nowrap}
.site-header .btn{background:#fff;color:#0f172a;border:1px solid color-mix(in oklab,#0f172a 12%,#fff);padding:6px 10px;border-radius:6px}
.site-header .btn-small{padding:4px 9px;font-size:.9rem}
@media (max-width: 780px){.admin-bar{gap:12px}.admin-nav-actions{margin-left:0}}
.container .btn.ghost[aria-label^="Powrót"],.container a.btn.ghost,.container button.btn.ghost{color:var(--text);font-weight:600;text-decoration:none}
.container a.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04)}

/* ================= Package discount styling ================= */
.package-discount {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  text-align: center;
}
.package-discount__badge {
  background: linear-gradient(180deg,#ffb86b,#ff8a3d);
  color: #0b1220;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255,138,61,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
  font-size: 1.05rem;
}
.package-discount__text { display: flex; flex-direction: column; gap: 2px; }
/* Use semantic colors so the discount block is readable in both light and dark themes.
   Default to the site's text/muted variables (suitable for light backgrounds).
   For dark theme, explicitly use high-contrast light text and a soft shadow. */
.package-discount__title {
  font-weight: 800;
  color: var(--text, #0b1220);
  text-shadow: none;
  font-size: 1rem;
}
.package-discount__desc {
  font-size: 0.86rem;
  color: var(--muted, #4b5563);
  opacity: 0.95;
}

/* Dark theme overrides: make title/desc light and keep the badge glow */
html[data-theme="dark"] .package-discount__title,
body[data-theme="dark"] .package-discount__title {
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .package-discount__desc,
body[data-theme="dark"] .package-discount__desc {
  color: rgba(233,242,255,0.92) !important;
}


/* Make discount stand out on light background panels too */
.package-card .package-discount, .offer-card .package-discount { margin-top: 14px; }

/* Style the generic hint paragraph under package info to make it more visible.
   Use semantic variables so the hint is readable across themes. */
.package-card .hint {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(59,136,255,0.04), rgba(59,136,255,0.02));
  color: var(--muted, #4b5563);
  font-style: italic;
  border: 1px solid rgba(59,136,255,0.04);
}

/* Dark theme: make the hint text light and preserve contrast */
html[data-theme="dark"] .package-card .hint,
body[data-theme="dark"] .package-card .hint {
  color: rgba(233,242,255,0.9) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03) !important;
}

/* Responsive: center and stack nicely on small screens */
@media (max-width: 780px) {
  .package-discount { flex-direction: column; gap: 6px; }
  .package-discount__badge { font-size: 1.1rem; padding: 10px 14px; }
  .package-discount__title { font-size: 1rem; }
  .package-discount__desc { font-size: 0.9rem; }
}

/* Make login button visually match admin logout: bright blue, white text */
.admin-nav-actions a.btn.ghost.btn-small,
.admin-nav-actions a.btn.ghost {
  background: linear-gradient(180deg,#4aa3ff,#2b8cff);
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(43,140,255,0.16);
  padding: 6px 12px;
  border-radius: 10px;
}
.admin-nav-actions a.btn.ghost.btn-small:hover,
.admin-nav-actions a.btn.ghost:hover { filter: brightness(0.95); }

/* Ensure brand and nav link contrast on dark header */
.site-header .brand { color: #fff; font-weight: 800; }
.site-header .main-nav a { color: #fff; }
.admin-nav-actions a { color: #fff; }
@media (max-width: 780px){.table thead{display:none}.table tbody tr{display:block;border:1px solid var(--border);border-radius:10px;margin-bottom:12px;padding:8px;background:var(--panel)}.table tbody td{display:flex;justify-content:space-between;padding:6px 8px;white-space:normal}.table tbody td::before{content:attr(data-label);font-weight:700;color:var(--muted);margin-right:8px;flex:0 0 auto}.cell-actions .action-list{display:flex;gap:8px;flex-wrap:wrap}.slot-header{display:flex;flex-direction:column;gap:6px}}
@media (max-width: 780px){.slot-time{display:none!important}.payment-ref,.voucher-progress{display:none!important}.client-phone{display:none!important}.client-email,.client-name{display:block;width:100%;word-break:break-word}.vc-validity{white-space:normal;font-size:0.95rem;color:var(--muted)}.contact-modal-overlay{z-index:1100}}