/* The app's own touches on the Materialize template. Mobile first: most staff use a phone. */

/* Phones and tablets: 16px fields (iOS zooms into anything smaller) and 44px tap targets. */
@media (pointer: coarse) {
  .form-control, .form-select { font-size: 1rem; }
  .btn { min-height: 2.75rem; min-width: 2.75rem; }
  .menu-link { min-height: 2.75rem; }
  .modal .btn-close { padding: .85rem; }
  details > summary:not(.btn) { padding-block: .75rem; }
}

/* Where the keyboard is: the template's focus shadow is too faint to see. */
:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* Grey text and status badges readable in a bright salon (spec 8). */
:root[data-bs-theme="light"] { --bs-secondary-color: #636b7d; --bs-secondary-color-rgb: 99, 107, 125; }
/* Buttons, links and messages too (audit 2026-10-18): each of these is at least 4.5:1 on white; the template's
   were 4.1 (primary), 3.3 (danger) and 1.7 (the WhatsApp green), and its messages 1.5–2.7. */
:root[data-bs-theme="light"] {
  --bs-primary: #5a5fe6; --bs-primary-rgb: 90, 95, 230;
  --bs-success: #1f7a3a; --bs-success-rgb: 31, 122, 58;
  --bs-danger: #d32f2b; --bs-danger-rgb: 211, 47, 43;
}
.alert-warning { --bs-alert-color: var(--bs-warning-text-emphasis); --bs-alert-link-color: var(--bs-warning-text-emphasis); }
.alert-info { --bs-alert-color: var(--bs-info-text-emphasis); --bs-alert-link-color: var(--bs-info-text-emphasis); }
.alert-danger { --bs-alert-color: var(--bs-danger-text-emphasis); --bs-alert-link-color: var(--bs-danger-text-emphasis); } /* the red on its pink is 4.1:1 */
.text-warning { color: #a15c00 !important; }

/* Words as written: the template capitalises every word of buttons and tabs ("Add A Service"). */
.btn, .nav-tabs .nav-link, .nav-pills .nav-link { text-transform: none; }
.bg-label-success { color: var(--bs-success-text-emphasis) !important; }
.bg-label-info { color: var(--bs-info-text-emphasis) !important; }
.bg-label-warning { color: var(--bs-warning-text-emphasis) !important; }

/* A tap registered: forms, links and htmx regions fade while they work. */
form.htmx-request button[type="submit"], a.htmx-request, .htmx-request#day-grid, .htmx-request#week, .btn.disabled { opacity: .6; pointer-events: none; }

/* The bottom bar on phones and tablets (the side menu takes over from 1200px). */
#bottom-nav { background: var(--bs-paper-bg); padding-bottom: env(safe-area-inset-bottom); z-index: 1080; box-shadow: 0 -2px 8px rgba(0, 0, 0, .06); }
#bottom-nav .nav-link { min-height: 3.5rem; font-size: .75rem; line-height: 1.2; }
#bottom-nav .nav-link i { font-size: 1.375rem; }
@media (max-width: 1199.98px) {
  .layout-page { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
}

/* A long form's button stays in reach while the form scrolls under it (above the bottom bar on phones and tablets). */
.sticky-actions { position: sticky; bottom: 0; z-index: 2; background: var(--bs-paper-bg); padding-block: .75rem; margin-bottom: -.75rem; }
@media (max-width: 1199.98px) {
  .sticky-actions { bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
}
/* A dialog covers the bottom bar, so its button sits on its own bottom edge, clear of the phone's home bar. */
.modal .sticky-actions { bottom: 0; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }

/* Owner lists (staff, users, services): on a phone each row stacks into a card instead of scrolling sideways. */
@media (max-width: 991.98px) {
  .table-stack thead { display: none; }
  .table-stack tr { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
  .table-stack td { display: block; padding: .125rem 0; border: 0; text-align: start !important; white-space: normal !important; }
  .table-stack td:last-child { padding-top: .5rem; }
  .table-stack td[data-label]::before { content: attr(data-label) ": "; font-weight: 500; color: var(--bs-heading-color); } /* partials/scripts.php copies the column heading */
}

/* A booking's fields (booking form, visit rows): address and travel only for a home visit, the chair
   only at the salon, with no script. */
.booking-fields:has(:is([name="location_type"], [name$="[location_type]"]) option[value="salon"]:checked) .home-only,
.booking-fields:has(:is([name="location_type"], [name$="[location_type]"]) option[value="home"]:checked) .salon-only { display: none; }
/* A new visit's first service row stays (calendar workspace spec 5.3). */
.visit-row:first-child .visit-row-remove { display: none; }

/* The day grid and an artist's week grid (schedule views): a row per 15 minutes, headers that stay in view. */
.day-grid-scroll { max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); }
.day-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--bs-paper-bg); box-shadow: inset 0 -1px 0 var(--bs-border-color); }
.day-grid tbody th { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--bs-paper-bg); }
.day-grid thead th:first-child { inset-inline-start: 0; z-index: 4; }
.day-grid td, .day-grid th { height: 2.25rem; }
.day-grid td { min-width: 9rem; }
.week-grid td { min-width: 7rem; }
/* Tablets: the week's seven days fit (at 820px Saturday was cut in half), and the day grid ends above the bottom bar. */
@media (max-width: 1199.98px) {
  .week-grid td { min-width: 6.25rem; }
  .day-grid-scroll { max-height: calc(100vh - 16rem); max-height: calc(100dvh - 16rem); }
}
.day-grid .slot-link { display: block; height: 100%; min-height: 2rem; }
.day-grid .slot-link:hover, .day-grid .slot-link:focus { background: var(--bs-primary-bg-subtle); }

/* The visit modal fills a phone: the template pads every dialog under 768px but .modal-fullscreen. */
@media (max-width: 767.98px) { .modal .modal-dialog.modal-fullscreen-md-down { padding-inline: 0; } }

/* The user guide: the ? a full tap target, numbered steps, and a button's name looking like the button. */
.help-link { width: 2.75rem; height: 2.75rem; }
.help-back { min-height: 2.75rem; }
.help-steps { padding-inline-start: 1.5rem; }
.help-steps li { margin-bottom: .75rem; padding-inline-start: .25rem; }
.help-btn { padding: .05rem .35rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: .375rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 500; }
.help-tip { padding: .5rem .75rem; border-radius: .375rem; background: var(--bs-warning-bg-subtle); }

/* Client advances spec: the New visit form's advance fields show once "Take an advance" is on */
.advance-fields { display: none; }
.advance:has(#advance-on:checked) .advance-fields { display: block; }
/* Below xl the menu's swipe strip (.drag-target, 40px from the left edge) sits on top of the page: the switch starts past it, so a tap on it lands */
@media (max-width: 1199.98px) { .advance > .form-switch { margin-inline-start: 1.75rem; } }

/* phone_input(): the country code's text stops before the select's arrow (the template leaves it 15px) */
.phone-boxes .form-floating > .form-select { padding-inline-end: 2.5rem; }

/* The staff form's service chips: on is solid, never the template's faint tint, so on and off read apart at a glance */
.chip-group .btn-check:checked + .btn { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }