/* ==========================================================================
   Krivis POS — visual theme
   Krivis brand gold/charcoal palette layered on top of Bootstrap 5.3
   (loaded via CDN before this file, so plain selectors here win the cascade
   without needing !important). Explicit component overrides are used
   instead of relying on Bootstrap's internal SCSS variables, since several
   Bootstrap components bake their colors at build time rather than reading
   the runtime --bs-* custom properties.
   ========================================================================== */

:root {
  /* Krivis brand gold as the accent (derived from krivis.in's literal
     button gold #FFCC66, deepened for AA text/icon contrast on white), kept
     on a clean light canvas with hairline borders + layered soft shadows -
     a light, high-contrast working UI (not krivis.in's dark marketing site)
     since staff read this screen fast, all day. Variable names are
     unchanged so every existing rule and component keeps working. */
  --pos-primary: #C98A1A;
  --pos-primary-dark: #A06F14;
  --pos-primary-light: #FBF0DA;
  --pos-primary-soft: #FFCC66;    /* literal krivis.in gold - highlights/badges/hover glow */
  --pos-accent: #0FB5AE;         /* fresh teal - energetic counterpoint */
  --pos-accent-dark: #0B8F89;
  --pos-ink: #1A1A1A;            /* krivis.in near-black */
  --pos-ink-soft: #6E6E73;
  --pos-bg: #F6F4EF;             /* warm off-white, not clinical grey */
  --pos-surface: #FFFFFF;
  --pos-surface-2: #FBFBFD;
  --pos-border: #E7E2D6;
  --pos-hairline: rgba(0, 0, 0, 0.08);
  --pos-success: #2FA45E;
  --pos-success-dark: #23814A;
  --pos-danger: #E0392B;
  --pos-danger-dark: #B92C20;
  --pos-warning: #E0A32E;
  --pos-warning-dark: #B27F1E;
  --pos-info: #2E86C7;
  --pos-radius: 1.1rem;          /* 18px - generous rounded corners */
  --pos-radius-sm: 0.7rem;
  --pos-radius-lg: 1.5rem;
  --pos-ring: 0 0 0 4px rgba(201, 138, 26, 0.18);
  --pos-shadow-sm: 0 1px 2px rgba(17, 17, 26, 0.04), 0 2px 6px rgba(17, 17, 26, 0.04);
  --pos-shadow: 0 1px 2px rgba(17, 17, 26, 0.04), 0 10px 30px -12px rgba(17, 17, 26, 0.14);
  --pos-shadow-lg: 0 8px 24px -8px rgba(17, 17, 26, 0.16), 0 24px 60px -24px rgba(17, 17, 26, 0.22);
  --pos-glass: rgba(255, 255, 255, 0.72);
  --pos-sidebar-bg: #1A1A1A;
}

/* Brand wordmark / receipt & payslip headers only - never used for regular
   UI headings (would slow down scanning a busy billing/reports screen). */
.brand-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

.veg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1.5px solid;
  margin-right: 4px;
  vertical-align: middle;
}
.veg-dot.veg { border-color: #2FA45E; }
.veg-dot.veg::after { content: ''; display: block; width: 5px; height: 5px; margin: 1.25px auto; border-radius: 50%; background: #2FA45E; }
.veg-dot.nonveg { border-color: #E0392B; }
.veg-dot.nonveg::after { content: ''; display: block; width: 0; height: 0; margin: 1.5px auto; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-bottom: 6px solid #E0392B; }

/* --- Dashboard hero + module launcher (Admin -> Dashboard "home page") --- */
.dash-hero {
  background: var(--pos-sidebar-bg);
  background-image:
    radial-gradient(120% 100% at 100% 0%, rgba(255, 204, 102, 0.16) 0%, transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(15, 181, 174, 0.10) 0%, transparent 50%);
  border-radius: var(--pos-radius-lg);
  padding: 1.6rem 1.8rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}
.dash-hero-title {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 0.2rem;
}
.dash-hero-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  max-width: 32rem;
}
.dash-hero-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dash-hero-actions .btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  border-radius: 0.7rem;
  font-weight: 600;
  font-size: 0.85rem;
}
.dash-hero-actions .btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.dash-section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pos-ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1.3rem 0 0.6rem;
}
.dash-section-label .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  background: var(--pos-primary-light);
  font-size: 0.85rem;
}
.dash-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
}
.dash-card {
  display: block;
  background: var(--pos-surface);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius);
  padding: 1rem;
  text-decoration: none;
  color: var(--pos-ink);
  box-shadow: var(--pos-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dash-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pos-shadow);
  border-color: var(--pos-primary);
  color: var(--pos-ink);
}
.dash-card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.6rem;
  background: var(--pos-primary-light);
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}
.dash-card-title {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.15rem;
}
.dash-card-desc {
  font-size: 0.76rem;
  color: var(--pos-ink-soft);
  line-height: 1.3;
}

/* --- Attendance grid (Admin -> Attendance) --- */
.att-grid { font-size: 0.8rem; }
.att-name-col { position: sticky; left: 0; background: var(--pos-surface); min-width: 140px; z-index: 1; }
.att-cell { text-align: center; cursor: pointer; user-select: none; font-weight: 700; min-width: 34px; }
.att-cell:hover { outline: 2px solid var(--pos-primary-soft); outline-offset: -2px; }
.att-cell.att-present { background: rgba(47, 164, 94, 0.16); color: #23814A; }
.att-cell.att-half { background: rgba(255, 204, 102, 0.35); color: #8A6200; }
.att-cell.att-leave { background: rgba(46, 134, 199, 0.16); color: #1F5E8E; }
.att-cell.att-absent { background: rgba(224, 57, 43, 0.16); color: #B92C20; }
.att-cell.att-holiday { background: rgba(110, 110, 115, 0.16); color: #444; }
.att-cell.att-saving { opacity: 0.5; }

/* Smooth everything a touch + honour reduced motion globally. */
* { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  a, button, .btn, .card, .table-tile, .menu-item-btn, .pos-nav-link, .wa-subnav-link {
    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
}

/* Refined, unobtrusive scrollbars (WebKit) for the futuristic feel. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgba(120, 120, 128, 0.28); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 128, 0.5); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Base --- */

body {
  background-color: var(--pos-bg);
  color: var(--pos-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* Bootstrap's .h1-.h6 utility classes (used all over this app, e.g.
   <h1 class="h4">) duplicate font-weight at higher specificity than a bare
   element selector, so both forms must be listed here or the utility-class
   version silently wins and this rule never actually applies. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight: 700;
  color: var(--pos-ink);
  letter-spacing: -0.025em;
}

a {
  color: var(--pos-primary);
  transition: color 0.15s ease;
}
a:hover {
  color: var(--pos-primary-dark);
}

.text-muted {
  color: var(--pos-ink-soft) !important;
}

/* Cards fade+lift in on page load - a small dose of motion so pages feel
   alive rather than static. Kept fast/subtle; disabled entirely for anyone
   with reduced-motion preferences set. */
@media (prefers-reduced-motion: no-preference) {
  .card {
    animation: pos-rise 0.35s ease both;
  }
}
@keyframes pos-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Sidebar shell --- */

.pos-shell {
  min-height: 100vh;
}
@media (min-width: 992px) {
  .pos-shell {
    display: flex;
    align-items: flex-start;
  }
}

.pos-topbar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--pos-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--pos-hairline);
  padding: 0.65rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.pos-toggle {
  background: rgba(120, 120, 128, 0.08);
  border: 1px solid var(--pos-hairline);
  border-radius: var(--pos-radius-sm);
  width: 40px;
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  flex-shrink: 0;
}
.pos-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--pos-ink);
  border-radius: 2px;
}
.pos-topbar-brand {
  color: var(--pos-ink);
  font-family: 'Sora', -apple-system, 'Inter', sans-serif;
  font-weight: 800;
  text-decoration: none;
}

.pos-sidebar {
  /* Bootstrap's own offcanvas width rule reads this custom property, so it
     must be overridden here rather than just setting width directly -
     otherwise Bootstrap's more specific .offcanvas-start selector wins and
     the sidebar renders at its 400px default on mobile/tablet. */
  --bs-offcanvas-width: 268px;
  width: 268px;
  background: var(--pos-sidebar-bg);
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(224, 80, 28, 0.16) 0%, transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(15, 181, 174, 0.10) 0%, transparent 50%);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  padding: 1.1rem 0.85rem;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
@media (min-width: 992px) {
  .pos-sidebar {
    flex-shrink: 0;
    height: 100vh;
    position: sticky;
    top: 0;
  }
}
.pos-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.pos-sidebar-brand {
  color: #fff;
  font-family: 'Sora', 'Inter', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  line-height: 1.25;
}
.pos-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}
.pos-nav li + li {
  margin-top: 0.15rem;
}
.pos-nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.88);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.7rem;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.pos-nav-icon {
  font-size: 1.05rem;
  line-height: 1;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
  flex-shrink: 0;
}
.pos-nav-link:hover,
.pos-nav-link:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.14);
}
.pos-nav-link.active {
  color: #fff;
  background: linear-gradient(120deg, var(--pos-primary), var(--pos-primary-dark));
  box-shadow: 0 8px 20px -6px rgba(224, 80, 28, 0.6);
}
.pos-nav-link.active .pos-nav-icon {
  background: rgba(255, 255, 255, 0.2);
}
.pos-sidebar-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1rem;
  margin-top: 1rem;
}
.pos-user {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.pos-role-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.3rem;
}
.pos-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  text-decoration: none;
}
.pos-logout:hover {
  color: #fff;
}

.pos-main {
  flex: 1;
  min-width: 0;
}
.pos-content {
  padding-top: 1.5rem;
}
@media (min-width: 992px) {
  .pos-content {
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2.5rem;
  }
}

/* --- Cards --- */

.card {
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius);
  box-shadow: var(--pos-shadow);
  background: var(--pos-surface);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.32,0.72,0,1), box-shadow 0.25s ease;
}
.card-header {
  background-color: var(--pos-surface);
  border-bottom: 1px solid var(--pos-border);
  font-weight: 700;
  font-family: 'Sora', -apple-system, 'Inter', sans-serif;
  letter-spacing: -0.02em;
  color: var(--pos-ink);
  padding: 0.95rem 1.15rem;
  border-top-left-radius: var(--pos-radius) !important;
  border-top-right-radius: var(--pos-radius) !important;
}
.card-body { padding: 1.15rem; }

/* Dashboard-style stat tiles: big rounded numbers on a soft tile, Apple-like. */
.stat-tile {
  position: relative;
  overflow: hidden;
}
.stat-tile .h3, .stat-tile .h4 {
  font-family: 'Sora', -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--pos-primary);
}
.stat-tile::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 80, 28, 0.10), transparent 70%);
  pointer-events: none;
}
.stat-tile .stat-ico {
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  filter: saturate(1.1);
}
.stat-tile:hover { transform: translateY(-3px); box-shadow: var(--pos-shadow-lg); }

/* --- Buttons --- */

.btn {
  border-radius: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.5rem 1.05rem;
  transition: transform 0.12s cubic-bezier(0.32,0.72,0,1), background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
.btn:active {
  transform: scale(0.96);
}
.btn-sm { border-radius: 0.6rem; padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.btn-lg { border-radius: 1rem; padding: 0.7rem 1.4rem; font-size: 1.05rem; }

.btn-primary {
  background: linear-gradient(120deg, var(--pos-primary) 0%, var(--pos-primary-dark) 100%);
  border-color: transparent;
  box-shadow: 0 4px 14px -4px rgba(224, 80, 28, 0.5);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(120deg, var(--pos-primary) 0%, var(--pos-primary-dark) 100%) !important;
  border-color: transparent !important;
  filter: brightness(1.05);
  box-shadow: 0 8px 22px -6px rgba(224, 80, 28, 0.55);
}
.btn-outline-primary {
  color: var(--pos-primary);
  border-color: var(--pos-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--pos-primary) !important;
  border-color: var(--pos-primary) !important;
}

.btn-success {
  background: linear-gradient(120deg, var(--pos-success) 0%, var(--pos-success-dark) 100%);
  border-color: var(--pos-success);
}
.btn-success:hover, .btn-success:focus {
  background: linear-gradient(120deg, var(--pos-success-dark), var(--pos-success-dark)) !important;
  border-color: var(--pos-success-dark) !important;
  box-shadow: 0 4px 14px rgba(63, 143, 95, 0.3);
}
.btn-outline-success {
  color: var(--pos-success);
  border-color: var(--pos-success);
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
  background-color: var(--pos-success) !important;
  border-color: var(--pos-success) !important;
}

.btn-danger {
  background-color: var(--pos-danger);
  border-color: var(--pos-danger);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: var(--pos-danger-dark) !important;
  border-color: var(--pos-danger-dark) !important;
}
.btn-outline-danger {
  color: var(--pos-danger);
  border-color: var(--pos-danger);
}
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
  background-color: var(--pos-danger) !important;
  border-color: var(--pos-danger) !important;
}

.btn-warning {
  background: linear-gradient(120deg, var(--pos-warning) 0%, var(--pos-warning-dark) 100%);
  border-color: var(--pos-warning);
  color: var(--pos-ink);
}
.btn-warning:hover, .btn-warning:focus {
  background: linear-gradient(120deg, var(--pos-warning-dark), var(--pos-warning-dark)) !important;
  border-color: var(--pos-warning-dark) !important;
  color: var(--pos-ink) !important;
  box-shadow: 0 4px 14px rgba(217, 164, 65, 0.35);
}
.btn-outline-warning {
  color: var(--pos-warning-dark);
  border-color: var(--pos-warning);
}
.btn-outline-warning:hover, .btn-outline-warning:focus {
  background-color: var(--pos-warning) !important;
  border-color: var(--pos-warning) !important;
  color: var(--pos-ink) !important;
}

.btn-outline-secondary {
  color: var(--pos-ink-soft);
  border-color: var(--pos-border);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: var(--pos-ink-soft) !important;
  border-color: var(--pos-ink-soft) !important;
}

.btn-link {
  color: var(--pos-ink-soft);
}

/* --- Badges --- */

/* Soft-tinted "pill" badges - the Apple/iOS status-chip look: a pale wash
   behind saturated text, rather than a solid block. Reads calmer and more
   premium while keeping strong contrast. */
.badge {
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 999px;
  padding: 0.36em 0.7em;
}
.badge.bg-primary   { background-color: var(--pos-primary-light) !important; color: var(--pos-primary-dark) !important; }
.badge.bg-success   { background-color: #E4F5EC !important; color: var(--pos-success-dark) !important; }
.badge.bg-danger    { background-color: #FBE7E5 !important; color: var(--pos-danger-dark) !important; }
.badge.bg-warning   { background-color: #FCF1DB !important; color: var(--pos-warning-dark) !important; }
.badge.bg-info      { background-color: #E4F0FA !important; color: #1F6AA5 !important; }
.badge.bg-secondary { background-color: #ECECEF !important; color: var(--pos-ink-soft) !important; }

/* --- Alerts / flash messages --- */

.alert {
  border: none;
  border-radius: 0.9rem;
  border-left: 4px solid transparent;
  box-shadow: var(--pos-shadow-sm);
}
.alert-success { background-color: #E9F4EC; color: var(--pos-success-dark); border-left-color: var(--pos-success); }
.alert-danger  { background-color: #FBEAE6; color: var(--pos-danger-dark); border-left-color: var(--pos-danger); }
.alert-warning { background-color: #FBF1DE; color: var(--pos-warning-dark); border-left-color: var(--pos-warning); }
.alert-info    { background-color: #E7F1F3; color: var(--pos-info); border-left-color: var(--pos-info); }

/* --- Forms --- */

.form-control, .form-select {
  border-color: var(--pos-border);
  border-radius: 0.7rem;
  padding: 0.55rem 0.85rem;
  background-color: var(--pos-surface-2);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--pos-primary);
  background-color: var(--pos-surface);
  box-shadow: var(--pos-ring);
}
.form-control::placeholder { color: #9a9aa2; }
.form-check-input {
  border-color: #c8c8cf;
}
.form-check-input:checked {
  background-color: var(--pos-primary);
  border-color: var(--pos-primary);
}
.form-check-input:focus { box-shadow: var(--pos-ring); border-color: var(--pos-primary); }
/* iOS-style toggle switches (used on WhatsApp Setup automations) */
.form-switch .form-check-input { height: 1.35rem; width: 2.4rem; }
.form-label {
  font-weight: 600;
  color: var(--pos-ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0;
}

/* --- Tables --- */

.table {
  color: var(--pos-ink);
}
.table thead th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pos-ink-soft);
  border-bottom-width: 1px;
  font-weight: 700;
  background: var(--pos-surface-2);
}
.table td, .table th {
  border-color: var(--pos-border);
  vertical-align: middle;
  padding: 0.7rem 0.85rem;
}
.table tbody tr { transition: background-color 0.12s ease; }
.table-hover tbody tr:hover,
.card .table tbody tr:hover { background-color: rgba(120, 120, 128, 0.05); }

/* --- List groups + misc polish --- */
.list-group-item { border-color: var(--pos-border); }
.list-group-item + .list-group-item { border-top-color: var(--pos-hairline); }
.list-group-flush > .list-group-item { transition: background-color 0.12s ease; }
.list-group-flush > .list-group-item:hover { background-color: rgba(120, 120, 128, 0.04); }
hr { border-color: var(--pos-hairline); opacity: 1; }
code { color: var(--pos-primary-dark); background: var(--pos-primary-light); padding: 0.1rem 0.35rem; border-radius: 0.35rem; font-size: 0.85em; }
.input-group-text { border-radius: 0.7rem; border-color: var(--pos-border); background: var(--pos-surface-2); }

/* --- Menu item picker (billing screen) --- */

.menu-item-btn {
  white-space: normal;
  border-radius: var(--pos-radius);
  border-width: 1.5px;
  transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.menu-item-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(193, 68, 14, 0.12);
  border-color: var(--pos-primary);
}
.menu-item-btn:active {
  transform: translateY(0) scale(0.98);
}

/* --- Mobile sticky cart bar (waiter/billing.php, below the lg breakpoint) ---
   On a phone, the menu grid and the cart/settle panel stack vertically, so
   the cart would otherwise be a long scroll away while tapping items. This
   bar keeps a live running total + a jump link on screen at all times. */

.mobile-cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--pos-surface);
  border-top: 1px solid var(--pos-border);
  box-shadow: 0 -4px 16px rgba(43, 36, 32, 0.12);
  padding: 0.6rem 1rem;
  z-index: 1040;
}
.mobile-cart-bar-spacer {
  height: 76px;
}

/* --- Table map tiles (waiter/tables.php) --- */

.table-tile {
  border-radius: var(--pos-radius);
  border-width: 2px;
  box-shadow: var(--pos-shadow);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  overflow: hidden;
  /* These are rebuilt wholesale every ~15s by the live-refresh poll, so the
     .card entrance animation must be switched off here - otherwise every
     tile would visibly re-fade-in on each refresh, which reads as a flicker
     rather than the quiet background update it's meant to be. */
  animation: none;
}
.table-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(43, 36, 32, 0.12);
}
.table-tile:hover {
  box-shadow: 0 14px 32px -10px rgba(17, 17, 26, 0.22);
}
.table-tile.is-free {
  border-color: #CDEBD8;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4FBF6 100%);
}
.table-tile.is-occupied {
  border-color: #F6D6CF;
  background: linear-gradient(180deg, #FFFFFF 0%, #FEF4F1 100%);
}

/* Small pulsing dot next to "Live" labels, to signal auto-refreshing data. */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pos-accent);
  box-shadow: 0 0 0 rgba(14, 165, 160, 0.5);
  animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 165, 160, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(14, 165, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 160, 0); }
}

/* --- Auth pages (login / setup / feedback) --- */

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(60% 55% at 12% 8%, rgba(224, 80, 28, 0.16) 0%, transparent 60%),
    radial-gradient(55% 50% at 92% 18%, rgba(15, 181, 174, 0.14) 0%, transparent 55%),
    radial-gradient(70% 60% at 78% 100%, rgba(224, 80, 28, 0.08) 0%, transparent 60%),
    var(--pos-bg);
  padding: 2rem 1rem;
}
.auth-card {
  width: 100%;
  max-width: 410px;
  background: var(--pos-glass);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border-radius: var(--pos-radius-lg);
  box-shadow: var(--pos-shadow-lg);
  padding: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  animation: pos-rise 0.5s cubic-bezier(0.32,0.72,0,1) both;
}
.auth-brand {
  text-align: center;
  margin-bottom: 1.75rem;
}
.auth-brand .mark {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: linear-gradient(145deg, #E8641E, var(--pos-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  margin: 0 auto 1rem;
  box-shadow: 0 12px 26px -8px rgba(224, 80, 28, 0.55);
  animation: pos-pop 0.5s cubic-bezier(0.32,0.72,0,1) both;
}
@keyframes pos-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Password field show/hide toggle (login) */
.pw-wrap { position: relative; }
.pw-toggle {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer;
  font-size: 1.1rem; padding: 0.35rem 0.5rem; line-height: 1;
  border-radius: 0.5rem; opacity: 0.7;
}
.pw-toggle:hover { opacity: 1; background: rgba(120,120,128,0.1); }
.auth-brand h1 {
  font-size: 1.3rem;
  margin-bottom: 0.15rem;
}
.auth-brand p {
  color: var(--pos-ink-soft);
  font-size: 0.9rem;
  margin: 0;
}

/* --- Sidebar nav badge (e.g. unread WhatsApp count) --- */

.pos-nav-badge {
  margin-left: auto;
  background: var(--pos-danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* --- Menu admin thumbnails --- */

.menu-admin-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--pos-radius-sm);
  border: 1px solid var(--pos-border);
}
.menu-admin-thumb-sm {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--pos-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu-admin-thumb-empty {
  background: var(--pos-primary-light);
  font-size: 1.3rem;
  color: var(--pos-primary);
}

/* --- WhatsApp shared sub-nav (tabs across Chat / Campaigns / Templates / Setup) --- */

.wa-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--pos-border);
  padding-bottom: 0.6rem;
}
.wa-subnav-link {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--pos-ink-soft);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.wa-subnav-link:hover {
  color: var(--pos-primary);
  background: var(--pos-primary-light);
}
.wa-subnav-link.active {
  color: #fff;
  background: linear-gradient(120deg, var(--pos-primary), var(--pos-primary-dark));
}

/* ==========================================================================
   WhatsApp chat inbox (admin/whatsapp_chat.php)
   ========================================================================== */

.wa-chat {
  display: flex;
  padding: 0;
  overflow: hidden;
  height: min(72vh, 720px);
}
.wa-list {
  width: 320px;
  flex-shrink: 0;
  border-right: 1px solid var(--pos-border);
  display: flex;
  flex-direction: column;
  background: var(--pos-surface);
}
.wa-list-search {
  padding: 0.75rem;
  border-bottom: 1px solid var(--pos-border);
}
.wa-list-items {
  overflow-y: auto;
  flex: 1;
}
.wa-convo {
  display: flex;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--pos-border);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.wa-convo:hover { background: var(--pos-bg); }
.wa-convo.active { background: var(--pos-primary-light); }
.wa-avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--pos-primary), var(--pos-accent-dark));
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-convo-main { flex: 1; min-width: 0; }
.wa-convo-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.wa-convo-name { font-weight: 600; color: var(--pos-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-convo-time { font-size: 0.72rem; color: var(--pos-ink-soft); flex-shrink: 0; }
.wa-convo-bottom { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.1rem; }
.wa-convo-preview { font-size: 0.82rem; color: var(--pos-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.wa-unread {
  background: var(--pos-success);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wa-open-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pos-success);
  margin-left: 0.2rem;
}

.wa-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #F7F1EA; }
.wa-thread-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.wa-thread-active { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wa-thread-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--pos-surface);
  border-bottom: 1px solid var(--pos-border);
}
.wa-thread-who { flex: 1; min-width: 0; }
.wa-thread-name { font-weight: 700; }
.wa-window-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.wa-window-badge.open { background: #E9F4EC; color: var(--pos-success-dark); }
.wa-window-badge.closed { background: #FBF1DE; color: var(--pos-warning-dark); }
.wa-back { font-size: 1.3rem; padding: 0 0.3rem; text-decoration: none; }

.wa-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* subtle "chat wallpaper" dotted texture */
  background-image: radial-gradient(rgba(193, 68, 14, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
}
.wa-bubble {
  max-width: 78%;
  padding: 0.5rem 0.7rem;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(43, 36, 32, 0.08);
  font-size: 0.92rem;
  line-height: 1.35;
  word-wrap: break-word;
}
.wa-bubble.in { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
.wa-bubble.out { align-self: flex-end; background: #DCF3E4; border-bottom-right-radius: 4px; }
.wa-bubble-body { white-space: pre-wrap; }
.wa-bubble-meta { font-size: 0.66rem; color: var(--pos-ink-soft); text-align: right; margin-top: 0.15rem; }
.wa-ticks { color: var(--pos-info); font-weight: 700; }
.wa-ticks.read { color: #2b8ac6; }
.wa-ticks.failed { color: var(--pos-danger); }
.wa-tmpl-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--pos-warning-dark);
  background: #FBF1DE;
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  margin-bottom: 0.2rem;
}

.wa-composer { padding: 0.7rem; background: var(--pos-surface); border-top: 1px solid var(--pos-border); }
.wa-composer-form { display: flex; gap: 0.5rem; align-items: flex-end; }
.wa-composer-form textarea {
  resize: none;
  border-radius: 18px;
  padding: 0.55rem 0.9rem;
  max-height: 120px;
}
.wa-send-btn {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: 1.15rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-list-hidden-mobile { }
@media (max-width: 767.98px) {
  .wa-chat { height: calc(100vh - 170px); }
  .wa-list { width: 100%; }
  .wa-thread { display: none; }
  /* When a thread is open we hide the list and reveal the thread. */
  .wa-list.wa-list-hidden-mobile { display: none; }
  .wa-list.wa-list-hidden-mobile + .wa-thread { display: flex; }
}

/* ==========================================================================
   Bulk WhatsApp audience picker (admin/whatsapp_bulk.php)
   ========================================================================== */

.wa-audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}
.wa-audience-opt { margin: 0; cursor: pointer; }
.wa-audience-opt input { position: absolute; opacity: 0; pointer-events: none; }
.wa-audience-card {
  display: block;
  border: 1.5px solid var(--pos-border);
  border-radius: var(--pos-radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  height: 100%;
}
.wa-audience-opt input:checked + .wa-audience-card {
  border-color: var(--pos-primary);
  background: var(--pos-primary-light);
  box-shadow: 0 4px 12px rgba(193, 68, 14, 0.12);
}
.wa-audience-label { display: block; font-weight: 600; color: var(--pos-ink); font-size: 0.9rem; }
.wa-audience-count { display: block; font-size: 0.78rem; color: var(--pos-ink-soft); margin-top: 0.15rem; }

/* --- Finishing touches --- */

::selection { background: rgba(224, 80, 28, 0.18); }

/* Clear, on-brand keyboard focus ring (mouse clicks stay ring-free). */
a:focus-visible,
.btn:focus-visible,
.pos-nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  box-shadow: var(--pos-ring);
}

/* Links inside tables/cards feel a touch more deliberate. */
.card a:not(.btn):not(.pos-nav-link),
.table a:not(.btn) {
  font-weight: 500;
  text-decoration: none;
}
.card a:not(.btn):not(.pos-nav-link):hover,
.table a:not(.btn):hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Softer, quieter dividers everywhere. */
.list-group-flush > .list-group-item { padding: 0.75rem 1.15rem; }

/* --- Print pages (receipt / KOT) keep their own minimal styling --- */