/* ==========================================================================
   TuviServe Theme: shared, mobile-first design layer
   Loaded LAST on every page so it can harmonise Bootstrap and page styles.
   Tenant (restaurant) colours still win: POS screens read --experience-*
   variables set by js/core/experience_config.js.
   ========================================================================== */

:root {
  /* Brand */
  --ts-primary: #0F766E;
  --ts-primary-hover: #115E59;
  --ts-primary-soft: #F0FDFA;
  --ts-primary-ring: rgba(15, 118, 110, 0.22);
  --ts-accent: #F59E0B;

  /* Neutrals (slate) */
  --ts-bg: #F6F8FB;
  --ts-surface: #FFFFFF;
  --ts-surface-2: #F1F5F9;
  --ts-border: #E2E8F0;
  --ts-border-strong: #CBD5E1;
  --ts-text: #0F172A;
  --ts-text-2: #475569;
  --ts-text-3: #94A3B8;

  /* Shape & depth */
  --ts-radius-sm: 8px;
  --ts-radius: 12px;
  --ts-radius-lg: 16px;
  --ts-radius-xl: 20px;
  --ts-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ts-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --ts-shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.18);
  --ts-touch: 44px;

  --ts-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;

  /* Bootstrap 5.3 bridge */
  --bs-primary: var(--ts-primary);
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: var(--ts-primary);
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: var(--ts-primary-hover);
  --bs-link-hover-color-rgb: 17, 94, 89;
  --bs-body-font-family: var(--ts-font);
  --bs-border-radius: var(--ts-radius);
  --bs-border-radius-sm: var(--ts-radius-sm);
  --bs-border-radius-lg: var(--ts-radius-lg);
  --bs-border-color: var(--ts-border);
  --bs-focus-ring-color: var(--ts-primary-ring);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ts-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
::selection { background: rgba(15, 118, 110, 0.18); }
:focus-visible { outline: 3px solid var(--ts-primary-ring); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--ts-radius);
  font-weight: 600;
  letter-spacing: 0;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn:not(.btn-sm):not(.btn-link):not(.btn-close) { min-height: var(--ts-touch); }
.btn-sm { border-radius: var(--ts-radius-sm); }
.btn-primary {
  --bs-btn-bg: var(--ts-primary);
  --bs-btn-border-color: var(--ts-primary);
  --bs-btn-hover-bg: var(--ts-primary-hover);
  --bs-btn-hover-border-color: var(--ts-primary-hover);
  --bs-btn-active-bg: var(--ts-primary-hover);
  --bs-btn-active-border-color: var(--ts-primary-hover);
  --bs-btn-disabled-bg: var(--ts-primary);
  --bs-btn-disabled-border-color: var(--ts-primary);
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
}
.btn-outline-primary {
  --bs-btn-color: var(--ts-primary);
  --bs-btn-border-color: var(--ts-primary);
  --bs-btn-hover-bg: var(--ts-primary);
  --bs-btn-hover-border-color: var(--ts-primary);
  --bs-btn-active-bg: var(--ts-primary-hover);
  --bs-btn-active-border-color: var(--ts-primary-hover);
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
}
.btn-light { --bs-btn-bg: var(--ts-surface-2); --bs-btn-border-color: var(--ts-border); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: var(--ts-radius);
  border-color: var(--ts-border-strong);
  min-height: var(--ts-touch);
  font-size: max(16px, 1rem); /* prevents iOS zoom-on-focus */
}
.form-control-sm, .form-select-sm { min-height: 36px; font-size: 0.875rem; border-radius: var(--ts-radius-sm); }
textarea.form-control { min-height: 88px; }
.form-control:focus, .form-select:focus {
  border-color: var(--ts-primary);
  box-shadow: 0 0 0 4px var(--ts-primary-ring);
}
.form-check-input:checked { background-color: var(--ts-primary); border-color: var(--ts-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--ts-primary-ring); border-color: var(--ts-primary); }
.form-label { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.35rem; }
.input-group > .input-group-text { border-color: var(--ts-border-strong); }
.input-group > :first-child { border-top-left-radius: var(--ts-radius); border-bottom-left-radius: var(--ts-radius); }
.input-group > :last-child { border-top-right-radius: var(--ts-radius); border-bottom-right-radius: var(--ts-radius); }

/* ---------- Surfaces ---------- */
.card {
  border-radius: var(--ts-radius-lg);
  border-color: var(--ts-border);
  box-shadow: var(--ts-shadow-sm);
}
.card > .card-header:first-child { border-top-left-radius: var(--ts-radius-lg); border-top-right-radius: var(--ts-radius-lg); }
.modal-content { border-radius: var(--ts-radius-xl); border: 0; box-shadow: var(--ts-shadow-lg); overflow: hidden; }
.dropdown-menu { border-radius: var(--ts-radius); border-color: var(--ts-border); box-shadow: var(--ts-shadow); padding: 6px; }
.dropdown-item { border-radius: var(--ts-radius-sm); padding: 8px 12px; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--ts-primary); }
.alert { border-radius: var(--ts-radius); }
.toast { border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); }
.badge { border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; }
.progress { border-radius: 999px; }
.progress-bar { background-color: var(--ts-primary); }
.list-group { --bs-list-group-border-radius: var(--ts-radius); }
.list-group-item.active { background-color: var(--ts-primary); border-color: var(--ts-primary); }

/* Nav tabs/pills: modern segmented look */
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--ts-primary); }
.nav-tabs .nav-link { font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--ts-primary); border-bottom-color: transparent; box-shadow: inset 0 -2px 0 var(--ts-primary); }
.pagination { --bs-pagination-active-bg: var(--ts-primary); --bs-pagination-active-border-color: var(--ts-primary); --bs-pagination-color: var(--ts-primary); }

/* Tables */
.table { --bs-table-hover-bg: rgba(15, 118, 110, 0.04); }
.table > thead th {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ts-text-2); white-space: nowrap;
}

/* Scrollbars (desktop) */
@media (hover: hover) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, 0.55); }
}

/* ---------- Shared brand helpers ---------- */
.ts-wordmark { font-weight: 800; letter-spacing: -0.02em; color: inherit; }
.ts-wordmark span, .ts-wordmark .accent { color: var(--ts-primary); }

/* ==========================================================================
   Mobile (≤ 576px): phone-first ergonomics
   ========================================================================== */
@media (max-width: 576px) {
  body { overflow-x: hidden; }

  /* Wide content scrolls inside its own box instead of stretching the page */
  table { max-width: 100%; }
  .table-responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* Modals become bottom sheets */
  .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-sm-down) {
    margin: 0;
    min-height: 100%;
    display: flex;
    align-items: flex-end;
    max-width: none;
  }
  .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-sm-down) .modal-content {
    width: 100%;
    border-radius: var(--ts-radius-xl) var(--ts-radius-xl) 0 0;
    max-height: 92vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-sm-down) .modal-body { overflow-y: auto; }
  .modal.fade .modal-dialog { transform: translateY(24px); }
  .modal.show .modal-dialog { transform: none; }

  /* Large gutters overflow the 12px container padding on phones */
  .row.g-4, .row.g-5, .row.gx-4, .row.gx-5 { --bs-gutter-x: 1.5rem; }

  /* Comfortable spacing and full-width primary actions */
  .card-body { padding: 1rem; }
  .modal-footer { flex-wrap: nowrap; gap: 8px; }
  .modal-footer > .btn { flex: 1 1 0; margin: 0; }
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.45rem; }
  .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-size: 2rem; }
}

/* Respect iPhone notch / home indicator in standalone PWA mode */
@supports (padding: max(0px)) {
  .fixed-bottom { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   POS shell (index.html / captain.html)
   ========================================================================== */
.mobile-top-header {
  background: linear-gradient(180deg, #0F172A 0%, #111C30 100%);
  border-bottom: 1px solid rgba(94, 234, 212, 0.18);
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.6);
}
/* Header icons follow the brand accent instead of Bootstrap yellow */
.mobile-top-header .text-warning,
.mobile-top-header #headerLeftIconBox { color: var(--accent-gold, #5EEAD4) !important; }
.mobile-bottom-nav { background: #0F172A; border-top: 1px solid rgba(94, 234, 212, 0.18); }

/* Cards & table tiles: softer, modern surfaces */
.main-content-wrapper .card,
.main-content-wrapper .bg-white.rounded-3.border { border-radius: var(--ts-radius-lg) !important; }
.pill-filter-btn { border-radius: 999px; font-weight: 600; }

@media (max-width: 576px) {
  /* Keep the top bar to essentials: menu, brand, wallet, network, role, alerts */
  #headerLeftIconBox,
  #headerLicenseBadge,
  #headerWalletStatusPill { display: none !important; }
  .mobile-top-header .header-right { gap: 4px; }
  .mobile-top-header .wallet-badge-pill,
  .mobile-top-header .network-badge-pill,
  .mobile-top-header .role-switcher-pill { padding: 4px 8px; font-size: 0.72rem; }
  .mobile-top-header .header-btn { width: 36px; height: 36px; }
  #headerRoleName { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

  /* Horizontal chip strips scroll instead of wrapping into tall blocks */
  .mobile-pill-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mobile-pill-strip::-webkit-scrollbar { display: none; }
}

/* Dark operator consoles (platform admin, cloud POS guide): readable secondary text */
body.ts-dark {
  --bs-secondary-color: #94A3B8;
  --bs-tertiary-color: #64748B;
  --bs-border-color: rgba(148, 163, 184, 0.22);
}
body.ts-dark .text-muted { color: #94A3B8 !important; }
body.ts-dark .form-control::placeholder { color: #64748B; }

/* Monospace is reserved for codes/IDs; UI chrome uses the brand sans-serif */
.btn.font-mono, label.font-mono, .form-label.font-mono, .alert.font-mono,
p.font-mono, .nav-link.font-mono, .form-control.font-mono:not(.text-uppercase) {
  font-family: var(--ts-font) !important;
  letter-spacing: 0;
}
label.font-mono, .form-label.font-mono { font-weight: 600; letter-spacing: 0.02em; }