/* Velora Salon - mobile layer (phones, <= 767.98px).
 * RULE: everything lives inside max-width media queries so the desktop layout is untouched. */

@media (max-width: 767.98px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: clip; }                       /* 'clip' (not 'hidden') keeps sticky headers working */
  img, video, iframe, canvas { max-width: 100%; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  h1, .h1, .display-4, .display-5, .display-6 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  h2, .h2 { font-size: clamp(1.25rem, 5.2vw, 1.6rem); }
  .container, .container-fluid { padding-left: .75rem; padding-right: .75rem; }

  /* Forms: 16px stops iOS zooming into fields; comfortable tap height */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea,
  .form-control, .form-select { font-size: 16px !important; min-height: 44px; }
  textarea.form-control { min-height: 88px; }
  textarea, input[type="file"], .form-control, .form-select { max-width: 100%; box-sizing: border-box; }
  textarea { width: 100%; }
  input[type="file"].form-control { width: 100%; }
  .form-check-input { width: 1.25rem; height: 1.25rem; }
  .form-check-label { padding-left: .25rem; }
  .input-group { flex-wrap: nowrap; }
  .input-group > .form-control, .input-group > .form-select { min-width: 0; }

  /* Buttons and links people tap */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding: .4rem .7rem; }
  .btn-close { width: 1.5rem; height: 1.5rem; }
  .dropdown-item { padding: .7rem 1rem; }
  .pagination { flex-wrap: wrap; justify-content: center; gap: .25rem; }
  .page-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

  /* Toolbars: title + buttons wrap instead of overflowing */
  .container-fluid > .d-flex.justify-content-between, .container > .d-flex.justify-content-between,
  .card-header.d-flex, .page-header, .d-flex.justify-content-between.align-items-center.mb-4 { flex-wrap: wrap; gap: .5rem; }
  .btn-toolbar, .btn-group { flex-wrap: wrap; }

  /* Tables: wrapped by mobile-responsive.js; this is the scroll container */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin-bottom: 1rem; }
  .table-scroll > .table { margin-bottom: 0; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table th, .table td { vertical-align: middle; }

  /* Cards, stats, grids */
  .card { margin-bottom: 1rem; }
  .row > * { min-width: 0; }
  .stat-card, .dashboard-card { min-width: 0; }

  /* Modals: use the screen, scroll inside */
  .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
  .modal-dialog.modal-lg, .modal-dialog.modal-xl, .modal-dialog.modal-fullscreen-md-down { max-width: calc(100vw - 1rem); }
  .modal-body { max-height: calc(100vh - 10rem); max-height: calc(100dvh - 10rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }   /* dvh: iPhone Safari toolbar */
  .modal-footer { flex-wrap: wrap; gap: .5rem; }
  .modal-footer > .btn { flex: 1 1 auto; }

  /* Floating notices must not run off the screen */
  [style*="position: fixed"][style*="right"], [style*="position:fixed"][style*="right"] { left: .5rem !important; right: .5rem !important; max-width: none !important; width: auto !important; }
  .toast-container, .position-fixed.top-0.end-0, .position-fixed.bottom-0.end-0 { max-width: calc(100vw - 1rem); }

  /* Long words/numbers must wrap, not push the page wider */
  .card-body, .modal-body, .list-group-item, .alert { overflow-wrap: break-word; }   /* only breaks a word when it cannot fit */
}

/* ---- Phone layout refinements (all inside the media query) ---- */
@media (max-width: 767.98px) {
  /* Page headers: title row, then the button group underneath (fixes title/button overlap) */
  .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; row-gap: .6rem; }
  .d-flex.justify-content-between.align-items-center > h1, .d-flex.justify-content-between.align-items-center > h2,
  .d-flex.justify-content-between.align-items-center > h3, .d-flex.justify-content-between.align-items-center > h4 { flex: 1 1 100%; margin-bottom: 0; }
  .d-flex.justify-content-between.align-items-center > div:last-child:not([class]),
  .d-flex.justify-content-between.align-items-center > div.btn-group { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .5rem; }
  .d-flex.justify-content-between.align-items-center > div:last-child:not([class]) > .btn { margin: 0 !important; flex: 1 1 auto; }
  .d-flex.gap-2:not(.navbar-nav):not(.flex-nowrap) { flex-wrap: wrap; }
  .navbar .d-flex { flex-wrap: nowrap; }

  /* Stat/summary cards: two per row instead of one huge card each */
  .row > [class*="col-md-3"]:not([class*="col-12"]):not([class*="col-6"]):not([class*="col-sm"]):not([class*="col-xs"]):has(> .card),
  .row > [class*="col-lg-3"]:not([class*="col-12"]):not([class*="col-6"]):not([class*="col-sm"]):not([class*="col-xs"]):has(> .card) { flex: 0 0 50%; max-width: 50%; width: 50%; }
  .row > [class*="col-md-3"] > .card .card-body, .row > [class*="col-lg-3"] > .card .card-body { padding: .85rem .6rem; }
  .card.text-center .card-body, .stat-card { padding: .85rem .6rem !important; }
  .card.text-center h1, .card.text-center .h1, .card.text-center h2, .card.text-center h3, .stat-number { font-size: 1.5rem !important; }
  .card.text-center i.fa-2x, .card.text-center i.fa-3x, .card.text-center .display-5, .card.text-center .display-6 { font-size: 1.6rem !important; }

  /* Three summary cards in one row (e.g. Present / This week / Rate) */
  .row > [class*="col-md-4"]:first-child:nth-last-child(3):has(> .card.text-center),
  .row > [class*="col-md-4"]:first-child:nth-last-child(3):has(> .card.text-center) ~ [class*="col-md-4"] { flex: 0 0 33.3333%; max-width: 33.3333%; width: 33.3333%; padding-left: .25rem; padding-right: .25rem; }
  .row > [class*="col-md-4"]:first-child:nth-last-child(3):has(> .card.text-center) .card-body,
  .row > [class*="col-md-4"]:first-child:nth-last-child(3):has(> .card.text-center) ~ [class*="col-md-4"] .card-body { padding: .6rem .3rem !important; font-size: .78rem; }
  .row > [class*="col-md-4"]:first-child:nth-last-child(3):has(> .card.text-center) :is(h1, h2, h3, h4, h5, .h1, .h2, .h3) { font-size: 1.15rem !important; }

  /* POS: services / packages / products / templates two per row */
  .service-item, .package-item, .product-item, .template-item { flex: 0 0 50%; max-width: 50%; width: 50%; }
  .pos-container .service-card-btn, .pos-container .package-card-btn, .pos-container .product-card-btn { min-height: 92px !important; padding: .6rem !important; font-size: .95rem; }
  .pos-container .row.g-3 { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }

  /* Tables with few columns become one card per row (script adds .m-stack + data-labels) */
  .table.m-stack, .table.m-stack tbody, .table.m-stack tr, .table.m-stack td { display: block; width: 100%; }
  .table.m-stack thead { display: none; }
  .table.m-stack tr { margin: 0 0 .75rem; padding: .35rem .85rem; border: 1px solid rgba(128, 128, 128, .35); border-radius: 12px; }
  .table.m-stack tr:hover { transform: none; }
  .table.m-stack td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0 !important;
                      border: 0 !important; border-bottom: 1px dashed rgba(128, 128, 128, .25) !important; text-align: right; white-space: normal !important; }
  .table.m-stack td:last-child { border-bottom: 0 !important; }
  .table.m-stack td::before { content: attr(data-label); flex: 0 0 38%; max-width: 38%; text-align: left; font-weight: 600; font-size: .8rem; }
  .table.m-stack.m-dark td::before { color: #d6c27a; }
  .table.m-stack.m-dark td { color: #ececec !important; }       /* theme sets td text #333 even on dark rows */
  .table.m-stack.m-light td { color: #222 !important; }
  .table.m-stack.m-light td::before { color: #6b5a1e; }
  .table.m-stack td[data-label=""]::before { display: none; }
  .table.m-stack td[colspan] { display: block; text-align: center; }
  .table.m-stack td[colspan]::before { display: none; }
  .table.m-stack td .btn, .table.m-stack td .btn-group { margin-left: auto; }
  .table-scroll .table th, .table-scroll .table td { white-space: nowrap; }
  .table th { font-size: .78rem; }
}

/* Installed app on notched phones */
@supports (padding: max(0px)) {
  @media (display-mode: standalone) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .navbar.fixed-top, .navbar.sticky-top { padding-top: env(safe-area-inset-top); }
  }
}

/* ---- POS billing: sticky bill bar (created by mobile-responsive.js on the billing page only) ---- */
.pos-mobile-bar { display: none; }
@media (max-width: 767.98px) {
  body.has-pos-bar { padding-bottom: 76px; }
  .pos-mobile-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: #1d1d1f; color: #fff; box-shadow: 0 -4px 16px rgba(0, 0, 0, .25);
  }
  .pos-mobile-bar .pos-bar-total { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
  .pos-mobile-bar .pos-bar-label { font-size: .75rem; opacity: .75; }
  .pos-mobile-bar button { min-height: 46px; padding: .5rem 1.1rem; border: 0; border-radius: 10px; background: #D4AF37; color: #1d1d1f; font-weight: 700; }
  .pos-mobile-bar button.pos-bar-secondary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
}

/* ---- Install-app prompt ---- */
.pwa-install { display: none; }
@media (max-width: 767.98px) {
  .pwa-install.show {
    display: flex; align-items: center; gap: .6rem; position: fixed; left: .6rem; right: .6rem;
    bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); z-index: 1060;
    background: #fff; color: #222; border: 1px solid #e5e5e5; border-radius: 14px; padding: .7rem .8rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .2); font-size: .9rem;
  }
  body.has-pos-bar .pwa-install.show { bottom: 84px; }
  .pwa-install img { width: 40px; height: 40px; border-radius: 10px; }
  .pwa-install .pwa-text { flex: 1; line-height: 1.25; }
  .pwa-install button { min-height: 40px; border: 0; border-radius: 8px; padding: .4rem .9rem; background: #D4AF37; color: #fff; font-weight: 600; }
  .pwa-install button.pwa-close { background: transparent; color: #777; padding: .4rem .6rem; font-size: 1.1rem; }
}