/* ============================================================
   TORKA POS — Lexa Admin Theme Integration
   Maps Vue/Tailwind CSS classes to Lexa v3.2.0 visual style
   (Bootstrap 5, Poppins font, Primary #7a6fbe, Dark Sidebar)
   ============================================================ */

/* ---------- Google Fonts: Poppins ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---------- CSS Variables (Lexa Design Tokens) ---------- */
:root {
  --lexa-primary: #7a6fbe;
  --lexa-primary-hover: #685ea2;
  --lexa-primary-active: #625998;
  --lexa-primary-rgb: 122, 111, 190;
  --lexa-primary-subtle: #f9f8fb;
  --lexa-success: #58db83;
  --lexa-danger: #ec536c;
  --lexa-warning: #f5b225;
  --lexa-info: #0dcaf0;
  --lexa-secondary: #6c757d;
  --lexa-orange: #f1734f;
  --lexa-pink: #e83e8c;
  --lexa-sidebar-bg: #2b3a4a;
  --lexa-sidebar-hover-bg: #2f3f50;
  --lexa-sidebar-active-bg: #263442;
  --lexa-sidebar-text: #8699ad;
  --lexa-sidebar-text-hover: #ffffff;
  --lexa-sidebar-width: 240px;
  --lexa-body-bg: #f5f5f5;
  --lexa-body-color: #5b626b;
  --lexa-header-bg: #ffffff;
  --lexa-header-height: 70px;
  --lexa-card-bg: #ffffff;
  --lexa-card-shadow: 0 -3px 31px 0 rgba(0,0,0,.05), 0 6px 20px 0 rgba(0,0,0,.02);
  --lexa-card-radius: 0.25rem;
  --lexa-border-color: #e9ecef;
  --lexa-input-border: #ced4da;
  --lexa-input-focus-border: #b9bfc4;
  --lexa-text-heading: #343a40;
  --lexa-text-muted: #74788d;
  --lexa-link-color: #7a6fbe;
  --lexa-link-hover: #52469b;
  --lexa-font: 'Poppins', sans-serif;
  --lexa-font-size: 0.8125rem;
  --lexa-table-border: #e9ecef;
  --lexa-table-hover-bg: #f8f9fa;
  --lexa-table-head-bg: #f8f9fa;
  --lexa-table-head-color: #5b626b;
}

/* ---------- Global Base ---------- */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--lexa-font) !important;
  font-size: var(--lexa-font-size) !important;
  color: var(--lexa-body-color) !important;
  background-color: var(--lexa-body-bg) !important;
}

a { color: var(--lexa-link-color); text-decoration: none; }
a:hover { color: var(--lexa-link-hover); }

/* ---------- Layout Background ---------- */
.layout-bg {
  background-color: var(--lexa-body-bg) !important;
}

/* ---------- Sidebar ---------- */
.sidebar-bg {
  background: var(--lexa-sidebar-bg) !important;
  border-right: none !important;
  box-shadow: var(--lexa-card-shadow) !important;
}

.sidebar-bg .flex.h-16.flex-shrink-0,
.sidebar-bg a.flex.h-16.flex-shrink-0 {
  background: var(--lexa-sidebar-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0.75rem 1rem !important;
  height: var(--lexa-header-height) !important;
  min-height: var(--lexa-header-height) !important;
}

.sidebar-bg img.h-10 {
  height: 2.5rem !important;
  width: auto !important;
  border-radius: var(--lexa-card-radius) !important;
  transition: all 0.2s ease !important;
}

.sidebar-bg img.h-10:hover { transform: scale(1.03); }

.sidebar-bg .font-semibold.uppercase,
.sidebar-bg .inline-block.font-semibold {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.sidebar-bg ::-webkit-scrollbar { width: 4px; }
.sidebar-bg ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 100px; }
.sidebar-bg ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Sidebar Navigation Links ---------- */
.router-link {
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 11px 20px !important;
  font-weight: 400 !important;
  font-size: 13.3px !important;
  transition: all 0.2s ease !important;
  color: var(--lexa-sidebar-text) !important;
  letter-spacing: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.router-link.router-link-desktop { font-size: 13.3px !important; }
.router-link.router-link-mobile { font-size: 13.3px !important; padding: 11px 20px !important; }

.router-link.router-link-active,
.router-link.router-link-exact-active {
  background: var(--lexa-sidebar-active-bg) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.router-link:not(.router-link-active):not(.router-link-exact-active):hover {
  background: transparent !important;
  color: #ffffff !important;
}

.router-link:focus {
  background: var(--lexa-sidebar-active-bg) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

.router-link svg,
.router-link .h-5.w-5,
.router-link .h-6.w-6 {
  color: var(--lexa-sidebar-text) !important;
  opacity: 1 !important;
  transition: all 0.2s ease !important;
  margin-right: 10px !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.router-link.router-link-active svg,
.router-link.router-link-exact-active svg,
.router-link:hover svg,
.router-link.router-link-active .h-5.w-5,
.router-link.router-link-exact-active .h-5.w-5,
.router-link:hover .h-5.w-5 {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ---------- Top Header / Navbar ---------- */
.relative.z-10.flex-shrink-0.flex.h-16.bg-white.shadow {
  background: var(--lexa-header-bg) !important;
  border-bottom: none !important;
  box-shadow: var(--lexa-card-shadow) !important;
  height: var(--lexa-header-height) !important;
  min-height: var(--lexa-header-height) !important;
}

.w-full.px-5.flex.justify-end.items-center {
  font-family: var(--lexa-font) !important;
}

/* ---------- Content Area ---------- */
.content-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--lexa-text-heading) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--lexa-font) !important;
}

.content-title-icon {
  color: var(--lexa-primary) !important;
  height: 1.25rem !important;
  width: 1.25rem !important;
}

/* ---------- Cards ---------- */
.content-card-body {
  background: var(--lexa-card-bg) !important;
  border: none !important;
  border-radius: var(--lexa-card-radius) !important;
  box-shadow: var(--lexa-card-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.content-card-body:hover {
  box-shadow: var(--lexa-card-shadow) !important;
}

.bg-white.overflow-hidden.shadow.border.rounded-md.border-gray-400,
.bg-white.overflow-hidden.shadow.border.rounded-md {
  background: var(--lexa-card-bg) !important;
  border: none !important;
  border-radius: var(--lexa-card-radius) !important;
  box-shadow: var(--lexa-card-shadow) !important;
  margin-bottom: 24px !important;
}

.bg-white.overflow-hidden.shadow.border.rounded-md.border-gray-400:hover,
.bg-white.overflow-hidden.shadow.border.rounded-md:hover {
  box-shadow: var(--lexa-card-shadow) !important;
  transform: none !important;
}

.bg-white.shadow {
  border-radius: var(--lexa-card-radius) !important;
  box-shadow: var(--lexa-card-shadow) !important;
  border: none !important;
}

/* ---------- Primary Buttons (Lexa .btn-primary) ---------- */
.btn.btn-app {
  background: var(--lexa-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--lexa-primary) !important;
  border-radius: var(--lexa-card-radius) !important;
  font-weight: 500 !important;
  padding: 0.47rem 0.75rem !important;
  font-size: var(--lexa-font-size) !important;
  font-family: var(--lexa-font) !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

.btn.btn-app:hover {
  background: var(--lexa-primary-hover) !important;
  border-color: var(--lexa-primary-hover) !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--lexa-primary-rgb), 0.25) !important;
  transform: none !important;
}

.btn.btn-app:active,
.btn.btn-app:focus {
  background: var(--lexa-primary-active) !important;
  border-color: var(--lexa-primary-active) !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--lexa-primary-rgb), 0.4) !important;
  transform: none !important;
  outline: none !important;
}

/* Danger/Red button (Lexa .btn-danger) */
.btn.btn-red {
  background: var(--lexa-danger) !important;
  border: 1px solid var(--lexa-danger) !important;
  border-radius: var(--lexa-card-radius) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  padding: 0.47rem 0.75rem !important;
  font-size: var(--lexa-font-size) !important;
  font-family: var(--lexa-font) !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.btn.btn-red:hover {
  background: #d84a60 !important;
  border-color: #d84a60 !important;
  box-shadow: 0 0 0 0.15rem rgba(236, 83, 108, 0.25) !important;
  transform: none !important;
}

.btn.btn-red:active,
.btn.btn-red:focus {
  background: #cc4458 !important;
  border-color: #cc4458 !important;
  box-shadow: 0 0 0 0.15rem rgba(236, 83, 108, 0.4) !important;
  outline: none !important;
}

/* Secondary button */
.btn.btn-secondary {
  background: var(--lexa-secondary) !important;
  color: #ffffff !important;
  border: 1px solid var(--lexa-secondary) !important;
  border-radius: var(--lexa-card-radius) !important;
  font-weight: 500 !important;
  padding: 0.47rem 0.75rem !important;
  font-size: var(--lexa-font-size) !important;
  font-family: var(--lexa-font) !important;
  transition: all 0.2s ease !important;
}

.btn.btn-secondary:hover {
  background: #5a6268 !important;
  border-color: #545b62 !important;
}

.btn {
  border-radius: var(--lexa-card-radius) !important;
  font-family: var(--lexa-font) !important;
  font-size: var(--lexa-font-size) !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}

/* ---------- Forms (Lexa .form-control) ---------- */
.form-input {
  border: 1px solid var(--lexa-input-border) !important;
  border-radius: var(--lexa-card-radius) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: var(--lexa-font-size) !important;
  font-family: var(--lexa-font) !important;
  color: var(--lexa-body-color) !important;
  background: #ffffff !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  width: 100% !important;
  line-height: 1.5 !important;
}

.form-input:focus {
  border-color: var(--lexa-input-focus-border) !important;
  box-shadow: none !important;
  outline: none !important;
}

.form-input::placeholder { color: var(--lexa-text-muted) !important; }

.form-label,
.input-label {
  display: block !important;
  color: var(--lexa-body-color) !important;
  font-weight: 500 !important;
  font-size: var(--lexa-font-size) !important;
  font-family: var(--lexa-font) !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: 0 !important;
}

select,
.form-input.rounded-none.bg-gray-100 {
  border: 1px solid var(--lexa-input-border) !important;
  border-radius: var(--lexa-card-radius) !important;
  font-size: var(--lexa-font-size) !important;
  font-family: var(--lexa-font) !important;
  color: var(--lexa-body-color) !important;
  padding: 0.375rem 0.75rem !important;
}

/* ---------- Color Overrides ---------- */
.text-cyan-900 { color: var(--lexa-body-color) !important; }
.bg-cyan-900 { background-color: var(--lexa-primary) !important; }
.bg-cyan-800 { background-color: var(--lexa-primary-hover) !important; }
.border-cyan-900 { border-color: var(--lexa-primary) !important; }

/* ---------- Tables (Lexa style) ---------- */
.table-footer-bg {
  background: var(--lexa-card-bg) !important;
  border-top: 1px solid var(--lexa-table-border) !important;
}

table {
  font-family: var(--lexa-font) !important;
  font-size: var(--lexa-font-size) !important;
  color: var(--lexa-body-color) !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

table thead th {
  background: var(--lexa-table-head-bg) !important;
  color: var(--lexa-table-head-color) !important;
  font-weight: 600 !important;
  font-size: var(--lexa-font-size) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0.85rem 0.85rem !important;
  border-bottom: 2px solid var(--lexa-table-border) !important;
  vertical-align: middle !important;
}

table tbody td {
  padding: 0.85rem 0.85rem !important;
  color: var(--lexa-body-color) !important;
  border-bottom: 1px solid var(--lexa-table-border) !important;
  font-size: var(--lexa-font-size) !important;
  vertical-align: middle !important;
}

table tbody tr { transition: background-color 0.15s ease !important; }
table tbody tr:hover { background: var(--lexa-table-hover-bg) !important; }

.table-light,
.table .table-light {
  color: var(--lexa-table-head-color) !important;
  border-color: var(--lexa-table-border) !important;
  background-color: var(--lexa-table-head-bg) !important;
}

/* ---------- Login Page ---------- */
.min-h-screen.text-cyan-900.bg-gray-100 {
  background: linear-gradient(135deg, #7a6fbe 0%, #2b3a4a 100%) !important;
  color: var(--lexa-body-color) !important;
}

.min-h-screen.text-cyan-900.bg-gray-100 .bg-white,
.min-h-screen.text-cyan-900.bg-gray-100 .shadow-md {
  border-radius: var(--lexa-card-radius) !important;
  box-shadow: var(--lexa-card-shadow) !important;
  border: none !important;
}

#submit-login {
  background: var(--lexa-primary) !important;
  border: 1px solid var(--lexa-primary) !important;
  width: 100% !important;
  padding: 0.47rem 0.75rem !important;
  border-radius: var(--lexa-card-radius) !important;
  font-weight: 500 !important;
  font-size: var(--lexa-font-size) !important;
  font-family: var(--lexa-font) !important;
  transition: all 0.2s ease !important;
  color: #fff !important;
}

#submit-login:hover {
  background: var(--lexa-primary-hover) !important;
  border-color: var(--lexa-primary-hover) !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--lexa-primary-rgb), 0.25) !important;
  transform: none !important;
}

.align-baseline.font-bold.text-blue-700 { color: var(--lexa-primary) !important; }
.align-baseline.font-bold.text-blue-700:hover,
.hover\:text-blue-900:hover { color: var(--lexa-link-hover) !important; }

.my-2.bg-green-200.py-3 {
  background: rgba(88, 219, 131, 0.2) !important;
  border: 1px solid var(--lexa-success) !important;
  border-radius: var(--lexa-card-radius) !important;
}

/* ---------- Card Footer ---------- */
.card-footer {
  padding: 0.75rem 1rem !important;
  border-top: 1px solid var(--lexa-border-color) !important;
  background: var(--lexa-table-head-bg) !important;
}

/* ---------- Dropdowns ---------- */
.bg-white.shadow-xs,
.bg-white.shadow-lg {
  border-radius: var(--lexa-card-radius) !important;
  border: 1px solid var(--lexa-border-color) !important;
  box-shadow: var(--lexa-card-shadow) !important;
  overflow: hidden !important;
}

.block.px-4.py-2.text-sm.text-gray-700 {
  transition: all 0.15s ease !important;
  font-family: var(--lexa-font) !important;
  font-size: var(--lexa-font-size) !important;
}

.block.px-4.py-2.text-sm.text-gray-700:hover {
  background: var(--lexa-primary-subtle) !important;
  color: var(--lexa-primary) !important;
}

/* ---------- Badges ---------- */
.rounded-full { border-radius: 9999px !important; }
.bg-green-100 { background: rgba(88, 219, 131, 0.2) !important; }
.text-green-800 { color: #1d8b4e !important; }
.bg-red-100 { background: rgba(236, 83, 108, 0.2) !important; }
.text-red-800 { color: #c4334e !important; }
.bg-yellow-100 { background: rgba(245, 178, 37, 0.2) !important; }
.text-yellow-800 { color: #b88a1a !important; }

/* ---------- Search Input ---------- */
input[type="search"],
input[type="text"] {
  border-radius: var(--lexa-card-radius) !important;
  font-family: var(--lexa-font) !important;
  font-size: var(--lexa-font-size) !important;
}

/* ---------- POS Area ---------- */
.product-list { font-family: var(--lexa-font) !important; }
.cart-list { font-family: var(--lexa-font) !important; }
.product-topping { font-family: var(--lexa-font) !important; font-size: var(--lexa-font-size) !important; }

/* ---------- Loading Spinner ---------- */
.animate-spin.rounded-full.border-4.border-solid.border-cyan-900 {
  border-color: var(--lexa-primary) !important;
  border-top-color: transparent !important;
}

/* ---------- Toggle / Switch ---------- */
.bg-cyan-900[role="switch"],
button.bg-cyan-900 { background-color: var(--lexa-primary) !important; }

/* ---------- Pagination ---------- */
.bg-white.border-gray-300:hover {
  background: var(--lexa-primary-subtle) !important;
  border-color: var(--lexa-primary) !important;
  color: var(--lexa-primary) !important;
}

.bg-white.border-gray-300.bg-gray-100,
.bg-white.border-gray-300[aria-current="page"] {
  background: var(--lexa-primary) !important;
  color: #fff !important;
  border-color: var(--lexa-primary) !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #a8b4c0; border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: #8699ad; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--lexa-font) !important;
  color: var(--lexa-text-heading) !important;
  font-weight: 600 !important;
}

/* ---------- Alerts ---------- */
.bg-green-200 { background: rgba(88, 219, 131, 0.18) !important; }
.bg-red-200 { background: rgba(236, 83, 108, 0.18) !important; }
.bg-yellow-200 { background: rgba(245, 178, 37, 0.18) !important; }
.bg-blue-200 { background: rgba(13, 202, 240, 0.18) !important; }

/* ---------- Modal / Dialog ---------- */
.fixed.inset-0.z-10 { font-family: var(--lexa-font) !important; }
.bg-white.rounded-lg.shadow-xl {
  border-radius: var(--lexa-card-radius) !important;
  box-shadow: var(--lexa-card-shadow) !important;
}

/* ---------- Selection ---------- */
::selection {
  background: rgba(var(--lexa-primary-rgb), 0.3);
  color: var(--lexa-text-heading);
}

/* ---------- Progress Bar ---------- */
.bg-cyan-900.h-2,
.bg-cyan-900.h-1 {
  background: var(--lexa-primary) !important;
  border-radius: var(--lexa-card-radius) !important;
}

/* ---------- Demo Bar ---------- */
.bg-yellow-500.border.border-yellow-600 {
  background: var(--lexa-warning) !important;
  border-color: #d99c1f !important;
  font-family: var(--lexa-font) !important;
  font-size: var(--lexa-font-size) !important;
}

/* ---------- Misc ---------- */
.rounded-full.bg-cyan-900 { background: var(--lexa-primary) !important; }
.bg-red-500 { background: var(--lexa-danger) !important; }
.bg-green-500 { background: var(--lexa-success) !important; }

/* RTL support */
[dir="rtl"] .router-link svg,
[dir="rtl"] .router-link .h-5.w-5 {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

/* ---------- Print ---------- */
@media print {
  .only-print { display: block; }
  .sidebar-bg,
  .relative.z-10.flex-shrink-0.flex.h-16 { display: none !important; }
  .content-card-body { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
}

/* ---------- Mobile Sidebar ---------- */
@media (max-width: 767px) {
  .sidebar-bg { z-index: 1005 !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .content-title { font-size: 14px !important; }
  .btn.btn-app { padding: 0.375rem 0.625rem !important; font-size: 12px !important; }
  table thead th, table tbody td { padding: 0.5rem 0.5rem !important; font-size: 12px !important; }
}

/* ---------- Installer ---------- */
.min-h-screen.text-cyan-900.bg-gray-100.py-6 {
  background: linear-gradient(135deg, #7a6fbe 0%, #2b3a4a 100%) !important;
}

/* ---------- Tailwind Ring Overrides ---------- */
.focus\:ring-cyan-900:focus { --tw-ring-color: rgba(var(--lexa-primary-rgb), 0.4) !important; }
.ring-cyan-900 { --tw-ring-color: var(--lexa-primary) !important; }

/* ---------- Indigo Overrides ---------- */
.bg-indigo-500, .bg-indigo-600 { background-color: var(--lexa-primary) !important; }
.border-indigo-500 { border-color: var(--lexa-primary) !important; }
.text-indigo-500, .text-indigo-600 { color: var(--lexa-primary) !important; }