/* RMPT e-POS V16.0 — Premium Design System.
   BOLD, VISIBLE changes — not just subtle hovers.
   Every selector verified against real codebase.
   Loads last = wins cascade on all non-!important rules.
   Uses !important ONLY where v11-1102.css already does. */

/* ===================================================================
   DESIGN TOKENS
   =================================================================== */
:root {
  --primary: #0d9488;
  --blue: #0d9488;
  --blue-soft: #e6faf8;
  --ring: 0 0 0 3px rgba(13, 148, 136, .15);
  --green: #059669;
  --orange: #d97706;
  --red: #dc2626;
  --purple: #7c3aed;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --soft: #f9fafb;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.06);
  --radius: 12px;
  --radius-sm: 8px;
}

/* ===================================================================
   CONTENT AREA — gray bg so cards POP (biggest visual change)
   =================================================================== */
.content {
  background: #f3f4f6;
}
.main {
  background: #f3f4f6;
}

/* ===================================================================
   CARDS — visible shadow + refined border (overrides v11 !important)
   =================================================================== */
.card, .catalog, .cart-panel, .cx-section, .r2-settings-card {
  border-color: #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06) !important;
  background: #fff;
}
.card-head {
  padding: 18px 22px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafbfc;
}
.card-head h3 {
  font-size: 15px;
  font-weight: 750;
  color: #111827;
}
.card-body {
  padding: 22px;
}
.card > .toolbar {
  padding: 14px 20px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafbfc;
}

/* ===================================================================
   TOPBAR — subtle bottom shadow instead of just line
   =================================================================== */
.topbar {
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  background: #fff;
}
.top-title h1 {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -.4px;
}
.eyebrow {
  color: #9ca3af;
}

/* ===================================================================
   SIDEBAR — softer border, better active state
   =================================================================== */
.sidebar {
  border-right: none;
  box-shadow: 1px 0 4px rgba(0,0,0,.06);
}
.nav-btn {
  font-weight: 600;
  border-radius: 10px;
  transition: background .15s, color .15s;
  margin: 2px 0;
}
.nav-btn:hover {
  background: #f3f4f6;
}
.nav-btn.active {
  background: var(--blue-soft);
  color: var(--primary);
  font-weight: 700;
}
.side-caption {
  font-size: 10px;
  letter-spacing: .1em;
  color: #9ca3af;
  padding: 24px 22px 8px;
}

/* ===================================================================
   BUTTONS — unified teal, premium feel
   =================================================================== */
.btn {
  border-radius: 10px;
  font-weight: 650;
  transition: all .15s ease;
}
.btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 1px 3px rgba(13,148,136,.25);
  color: #fff;
}
.btn.primary:hover {
  background: #0f766e;
  box-shadow: 0 4px 14px rgba(13,148,136,.3);
  transform: translateY(-1px);
}
.btn.green {
  background: var(--green);
  border-color: var(--green);
}
.btn.green:hover:not(:disabled) {
  background: #047857;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(5,150,105,.25);
}
.btn.soft {
  background: var(--blue-soft);
  color: var(--primary);
  border-color: #b2dfdb;
}
.btn.danger, .btn.red {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--red);
}
.btn.sm {
  border-radius: 8px;
}

/* ===================================================================
   STAT CARDS — colored left border strip (VERY visible change)
   =================================================================== */
.stat {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  background: #fff;
  border-left: 4px solid var(--primary);
  padding: 20px;
  transition: box-shadow .15s, transform .15s;
}
.stat:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.stat strong {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.7px;
  color: #111827;
}
.stat small {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.stat-icon, .mini-icon {
  border-radius: 12px;
}

/* Different left-border colors based on icon color class */
.stat:has(.i-blue)   { border-left-color: var(--primary); }
.stat:has(.i-green)  { border-left-color: var(--green); }
.stat:has(.i-orange) { border-left-color: var(--orange); }
.stat:has(.i-purple) { border-left-color: var(--purple); }
.stat:has(.i-red)    { border-left-color: var(--red); }

/* Icon backgrounds — richer, more vibrant */
.i-blue   { background: #e6faf8; color: var(--primary); }
.i-green  { background: #ecfdf5; color: var(--green); }
.i-orange { background: #fffbeb; color: var(--orange); }
.i-purple { background: #f5f3ff; color: var(--purple); }
.i-red    { background: #fef2f2; color: var(--red); }

/* ===================================================================
   TABLES — premium header, alternating rows, better hover
   =================================================================== */
thead {
  background: #f9fafb;
}
th {
  font-size: 11px;
  font-weight: 700;
  color: #4b5563;
  letter-spacing: .04em;
  padding: 14px 16px;
  border-bottom: 2px solid #e5e7eb;
}
td {
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
}
tbody tr {
  transition: background .12s;
}
tbody tr:hover {
  background: #f0fdf4;
}
tbody tr:nth-child(even) {
  background: #fafbfc;
}
tbody tr:nth-child(even):hover {
  background: #f0fdf4;
}

/* ===================================================================
   FORMS — taller inputs, premium focus ring
   =================================================================== */
input, select, textarea {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
  min-height: 42px;
  padding: 10px 14px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
  outline: none;
}
input:hover, select:hover, textarea:hover {
  border-color: #9ca3af;
}
label {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 6px;
}
.form-grid {
  gap: 18px 24px;
}

/* ===================================================================
   BADGES — more vibrant, slightly larger
   =================================================================== */
.badge {
  border-radius: 6px;
  font-weight: 700;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .01em;
}
.b-blue   { background: #e6faf8; color: #0d9488; }
.b-green  { background: #ecfdf5; color: #059669; }
.b-orange { background: #fffbeb; color: #b45309; }
.b-red    { background: #fef2f2; color: #dc2626; }
.b-purple { background: #f5f3ff; color: #7c3aed; }
.b-grey   { background: #f3f4f6; color: #6b7280; }

/* ===================================================================
   DASHBOARD — premium modules
   =================================================================== */
.overview-welcome h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.6px;
  color: #111827;
}
.quick-card {
  border-radius: 14px;
  transition: all .15s ease;
  border: 1px solid #e5e7eb;
  box-shadow: var(--shadow-sm);
}
.quick-card:hover {
  border-color: #a7f3d0;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.section-space {
  margin-top: 28px;
}
.v7-module {
  transition: transform .15s, box-shadow .15s;
}
.v7-module:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.v1312-overview-card {
  transition: transform .15s, box-shadow .15s;
}
.v1312-overview-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.date-chip {
  border-radius: 10px;
  font-weight: 600;
}

/* ===================================================================
   POS / CASH REGISTER — premium product tiles + cart
   =================================================================== */
.product-tile, .p-card {
  border-radius: 12px;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.product-tile:hover:not(:disabled), .p-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #a7f3d0;
}
.product-tile:active:not(:disabled) {
  transform: translateY(0);
}
.product-tile strong {
  color: var(--primary);
  font-weight: 800;
}
.cart-panel {
  box-shadow: var(--shadow) !important;
  border-radius: 14px;
}
.cart-head {
  background: #fafbfc;
  border-bottom: 1px solid #f3f4f6;
}
.cart-head b {
  font-weight: 800;
  color: #111827;
}
.cart-line {
  transition: background .12s;
}
.cart-line:hover {
  background: #f9fafb;
}
.totals .grand {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.5px;
  color: #111827;
}
.cart-foot {
  background: #f9fafb;
}
.payment-total strong {
  color: var(--primary);
  font-size: 34px;
  font-weight: 800;
}

/* ===================================================================
   REPAIRS — kanban + list view
   =================================================================== */
.board-col, .kanban-col {
  border-radius: 14px;
  border-color: #e5e7eb;
  background: #f9fafb;
}
.board-col h3 {
  font-size: 12px;
  font-weight: 700;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.job-card {
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.job-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #a7f3d0;
}
.job-card h4 {
  font-weight: 750;
  color: #111827;
}

/* ===================================================================
   SETTINGS — grouped nav + premium panel
   =================================================================== */
.v14-settings-group-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #9ca3af;
  padding: 16px 4px 4px;
  text-transform: uppercase;
}
.v14-settings-group-label:first-child {
  padding-top: 4px;
}
.v7-settings-shell .v7-settings-panel-head h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: #111827;
}
.v7-settings-shell .v7-settings-nav > button {
  transition: transform .12s, box-shadow .12s;
}
.v7-settings-shell .v7-settings-nav > button:hover {
  transform: translateY(-1px);
}
.v7-settings-shell .v7-setting-action {
  border-color: #e5e7eb;
  box-shadow: var(--shadow-sm);
  transition: transform .14s, box-shadow .14s;
}
.v7-settings-shell .v7-setting-action:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
#content > .cx-qr-card:has(+ .v7-settings-shell) {
  display: none;
}

/* ===================================================================
   MODALS — deeper backdrop, refined card
   =================================================================== */
.modal-backdrop {
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
}
.modal {
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0,0,0,.15);
  border-color: #e5e7eb;
}
.modal-head {
  padding: 20px 24px;
}
.modal-head h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.2px;
}
.modal-body {
  padding: 24px;
}
.modal-foot {
  background: #fafbfc;
  border-radius: 0 0 18px 18px;
}

/* ===================================================================
   LOGIN — premium gradient + deeper shadow
   =================================================================== */
.login-view {
  background: linear-gradient(160deg, #f0fdfa 0%, #fff 40%, #f5f3ff 100%);
}
.login-card {
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
  border-color: #e5e7eb;
}
.login-card h2 {
  font-weight: 800;
  letter-spacing: -.4px;
}
.login-card > .btn.primary {
  min-height: 48px;
  font-size: 15px;
  border-radius: 12px;
}

/* ===================================================================
   EMPTY STATES — friendlier
   =================================================================== */
.empty, .empty-state {
  padding: 48px 24px;
  color: #9ca3af;
}
.empty-state h3 {
  color: #374151;
  font-size: 16px;
  font-weight: 700;
}
.empty-icon {
  background: #f3f4f6;
  border-radius: 14px;
  width: 56px;
  height: 56px;
}

/* ===================================================================
   ALERTS / NOTES — consistent
   =================================================================== */
.info-note {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #0f766e;
  border-radius: 10px;
}
.danger-note, .danger-zone {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
  border-radius: 10px;
}

/* ===================================================================
   PILLS — better active state
   =================================================================== */
.pill.active {
  background: var(--blue-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

/* ===================================================================
   PAGINATION — cleaner
   =================================================================== */
.pagination {
  border-top: 1px solid #f3f4f6;
  font-size: 12px;
  color: #6b7280;
}

/* ===================================================================
   TOAST — refined
   =================================================================== */
.toast {
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

/* ===================================================================
   SEGMENTED CONTROL — premium active
   =================================================================== */
.segmented {
  border-radius: 10px;
  background: #f3f4f6;
  border-color: #e5e7eb;
}
.segmented button.active {
  color: var(--primary);
  box-shadow: var(--shadow-sm);
  border-radius: 8px;
}

/* ===================================================================
   TYPOGRAPHY — bolder headings
   =================================================================== */
h1 { font-weight: 800; letter-spacing: -.5px; }
h2 { font-weight: 800; letter-spacing: -.4px; }
h3 { font-weight: 700; }
h4 { font-weight: 700; color: #111827; }

/* ===================================================================
   SCROLLBARS — subtle, premium
   =================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ===================================================================
   PAGE TRANSITIONS — smooth fade-in when content changes
   =================================================================== */
.content {
  animation: v16-page-in .25s ease-out;
}
@keyframes v16-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cards and stat grids stagger in slightly */
.card, .stat, .quick-card, .v7-module, .job-card, .v1312-overview-card {
  animation: v16-card-in .3s ease-out both;
}
@keyframes v16-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal slides in from bottom with fade */
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===================================================================
   STICKY TABLE HEADERS — always visible while scrolling
   =================================================================== */
.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f9fafb;
  box-shadow: 0 1px 0 #e5e7eb;
}

/* Cart items scroll area — cart header stays put */
.cart-head {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* ===================================================================
   TOAST NOTIFICATIONS — color-coded by type
   =================================================================== */
.toast {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(460px, 90vw);
  border-left: 4px solid #60a5fa;
}
.toast.error {
  background: #450a0a;
  border-color: #7f1d1d;
  border-left-color: #ef4444;
  color: #fecaca;
}
.toast.success, .toast:not(.error):not([class*="warn"]) {
  border-left-color: #34d399;
}

/* ===================================================================
   SIDEBAR — smoother scrolling + active indicator bar
   =================================================================== */
.sidebar nav {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.nav-btn.active {
  position: relative;
}
.nav-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}

/* ===================================================================
   CONTENT SCROLL — smooth within all scrollable panels
   =================================================================== */
.content,
.cart-items,
.catalog-grid,
.modal-body,
.sidebar nav,
.table-wrap {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ===================================================================
   SEARCH / TOOLBAR — refined input inside toolbar
   =================================================================== */
.toolbar .search {
  position: relative;
}
.toolbar input,
.toolbar select {
  border-radius: 10px;
}

/* ===================================================================
   REPAIR BOOKING — progress steps cleaner
   =================================================================== */
.v12-repair-progress {
  background: #f9fafb;
  border-bottom-color: #e5e7eb;
}
.v12-rstep {
  border-radius: 10px;
  transition: background .15s, color .15s;
}
.v12-rstep.active {
  background: #e6faf8;
  color: #0d9488;
}
.v12-rstep.active span,
.v12-rstep.done span {
  background: var(--primary);
}
.v12-repair-head h2 {
  font-weight: 800;
  letter-spacing: -.3px;
}
.v12-device-search {
  border-color: #99f6e4;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(13,148,136,.1);
}
.v12-problem {
  border-radius: 12px;
  transition: border-color .12s, background .12s;
}
.v12-problem.selected {
  border-color: var(--primary);
  background: #e6faf8;
  color: #0f766e;
}
.v12-problem.selected span {
  background: var(--primary);
}
.v12-quote {
  border-radius: 14px;
  border-color: #e5e7eb;
  background: #fafbfc;
}
.v12-book-summary {
  border-radius: 16px;
  background: #0f172a;
}
.v12-book-summary .btn {
  border-radius: 12px;
}

/* ===================================================================
   POS PAYMENT SCREEN — bigger, touch-friendly
   =================================================================== */
.pay-grid .btn {
  border-radius: 10px;
  min-height: 44px;
  font-weight: 700;
}

/* ===================================================================
   CUSTOMER PAGE — link style refinement
   =================================================================== */
.v2-link {
  color: var(--primary);
}
.v2-link:hover {
  color: #0f766e;
}

/* ===================================================================
   TIMELINE — refined dots + line
   =================================================================== */
.timeline-item::before,
.timeline > div::before {
  background: var(--primary);
  width: 8px;
  height: 8px;
}
.timeline-item,
.timeline > div {
  border-left-color: #e5e7eb;
}

/* ===================================================================
   PRINT — clean output
   =================================================================== */
@media print {
  .content { background: #fff; animation: none; }
  .card, .stat, .quick-card, .v7-module, .job-card { animation: none; box-shadow: none !important; }
  .nav-btn.active::before { display: none; }
}

/* ===================================================================
   MOBILE — tighter, touch-optimized
   =================================================================== */
@media (max-width: 820px) {
  .content {
    padding: 16px 14px 20px;
  }
  .card-head {
    padding: 14px 16px;
  }
  .card-body {
    padding: 16px;
  }
  .stat {
    padding: 14px;
    border-left-width: 3px;
  }
  .stat strong {
    font-size: 22px;
  }
  .page-head {
    margin-bottom: 16px;
  }
  .page-head h2 {
    font-size: 20px;
  }
  .quick-card {
    padding: 14px;
  }
  .btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  .btn.sm {
    min-height: 36px;
    padding: 8px 12px;
  }
  td, th {
    padding: 10px 12px;
  }
  .toolbar {
    gap: 8px;
  }
  .modal {
    border-radius: 14px;
  }
  .modal-head {
    padding: 16px 18px;
  }
  .modal-body {
    padding: 18px;
  }
  .nav-btn.active::before {
    top: 6px;
    bottom: 6px;
  }
  /* Larger touch targets for repair booking */
  .v12-problem {
    min-height: 56px;
    padding: 12px 14px;
  }
  .pay-grid .btn {
    min-height: 48px;
  }
}

@media (max-width: 620px) {
  .content {
    padding: 12px 10px 16px;
  }
  .stat {
    padding: 12px 10px;
  }
  .stat strong {
    font-size: 20px;
  }
  .card-head {
    padding: 12px 14px;
  }
  .card-body {
    padding: 14px;
  }
  .btn {
    min-height: 42px;
    font-size: 13px;
  }
  input, select, textarea {
    min-height: 44px;
    font-size: 16px;
  }
  .v12-device-search {
    border-radius: 12px;
  }
  .toast {
    border-radius: 10px;
    font-size: 12px;
    padding: 12px 14px;
  }
}

/* ===================================================================
   MOTION — respect user preference
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}