@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* MamaPOS Design System Colors */
  --primary: #0D9488;
  --primary-hover: #0F766E;
  --primary-light: #CCFBF1;
  --primary-tint: #F0FDFA;

  --secondary: #475569;
  --secondary-hover: #334155;
  --secondary-light: #F1F5F9;

  --orange: #F97316;
  --orange-light: #FED7AA;
  --orange-dark: #9A3412;

  --purple: #7C3AED;
  --purple-light: #FAF5FF;

  --dark: #0F172A;
  --mid: #475569;
  --light: #94A3B8;

  --bg: #FAFAFA;
  --white: #FFFFFF;

  --border: #E2E8F0;
  --input: #E2E8F0;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius: 12px;
}

/* Global Font Overrides */
body,
.font-sans,
input,
select,
textarea,
button,
.kt-btn {
  font-family: var(--sans) !important;
}

/* Color & Variable Overrides for Tailwind/Metronic utilities */
.text-primary {
  color: var(--primary) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

.hover\:bg-primary\/10:hover {
  background-color: rgba(13, 148, 136, 0.1) !important;
}

.hover\:text-primary:hover {
  color: var(--primary) !important;
}

.hover\:bg-primary-active:hover {
  background-color: var(--primary-hover) !important;
}

.text-secondary-foreground {
  color: var(--mid) !important;
}

.bg-background {
  background-color: var(--bg) !important;
}

.border-border {
  border-color: var(--border) !important;
}

/* Metronic Button Color Overrides */
.kt-btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

.kt-btn-primary:hover,
.kt-btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.kt-btn-outline {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.kt-btn-outline:hover {
  background-color: var(--primary-tint) !important;
  color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.kt-btn-secondary {
  background-color: var(--secondary-light) !important;
  color: var(--secondary) !important;
  border-color: var(--secondary-light) !important;
}

.kt-btn-secondary:hover {
  background-color: var(--border) !important;
  color: var(--secondary-hover) !important;
}

.kt-btn-ghost {
  color: var(--mid) !important;
}

.kt-btn-ghost:hover {
  background-color: var(--primary-tint) !important;
  color: var(--primary) !important;
}

/* Metronic Card Color Overrides */
.card,
.kt-card {
  border-color: var(--border) !important;
  background-color: var(--white) !important;
}

/* Sidebar Styling Override */
.kt-sidebar {
  background-color: var(--white) !important;
  border-right: 1px solid var(--border) !important;
}

.kt-sidebar-header {
  border-bottom: 1px solid var(--border) !important;
}

.kt-sidebar-menu .menu-link.active {
  background-color: var(--primary-tint) !important;
  color: var(--primary-hover) !important;
}

.kt-sidebar-menu .menu-link:hover {
  background-color: var(--primary-tint) !important;
  color: var(--primary) !important;
}

/* Form Controls Color Overrides */
.kt-input:focus,
.kt-input:focus-within,
input:not(.kt-input *):focus,
select:focus,
textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
  outline: none !important;
}

/* Select2 Custom Styling */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary) !important;
}

.select2-results__option--selected {
  background-color: var(--primary-light) !important;
  color: var(--primary-hover) !important;
}

/* Badge Customizations */
.badge,
.kt-badge {
  background-color: var(--secondary-light) !important;
  color: var(--secondary) !important;
  border: 1px solid var(--border) !important;
}

.badge-primary,
.kt-badge-primary {
  background-color: var(--primary-light) !important;
  color: var(--primary-hover) !important;
  border-color: var(--primary-light) !important;
}

.badge-success,
.kt-badge-success {
  background-color: #DCFCE7 !important;
  color: #15803D !important;
  border-color: #DCFCE7 !important;
}

.badge-warning,
.kt-badge-warning {
  background-color: var(--orange-light) !important;
  color: var(--orange-dark) !important;
  border-color: var(--orange-light) !important;
}

.badge-danger,
.kt-badge-danger {
  background-color: #FEE2E2 !important;
  color: #B91C1C !important;
  border-color: #FEE2E2 !important;
}

/* Table Overrides */
.table th,
.kt-table th {
  background-color: var(--primary-tint) !important;
  color: var(--primary-hover) !important;
  border-bottom: 2px solid var(--primary-light) !important;
}

.table td,
.kt-table td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--mid) !important;
}

/* SweetAlert Overrides */
.swal2-confirm.kt-btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

.swal2-cancel.kt-btn-outline {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Sidebar Toggle Button Styling */
#sidebar_toggle {
  border: 1.5px solid var(--primary) !important;
  color: var(--primary) !important;
}

#sidebar_toggle i {
  color: var(--primary) !important;
}

#sidebar_toggle:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

#sidebar_toggle:hover i {
  color: var(--white) !important;
}

/* Sidebar Collapse Overrides for User Card */
.kt-sidebar-collapse .sidebar-user-card {
  padding: 0.5rem 0.25rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  align-items: center !important;
}

.kt-sidebar-collapse .sidebar-user-name-wrapper,
.kt-sidebar-collapse .sidebar-user-menu {
  display: none !important;
}

/* Hide both default and small logos when sidebar is collapsed */
.kt-sidebar-collapse .default-logo,
.kt-sidebar-collapse .small-logo {
  display: none !important;
}