/* ═══════════════════════════════════════════════
   AllurePOS — Premium Warm Cream Theme
   Architectural Blueprint & Construction Orange
   © 2026 AllurePOS
   ═══════════════════════════════════════════════ */

:root {
  /* Warm Cream Premium Palette */
  --nav:      #ffffff; /* Clean white sidebar/navigation */
  --bg:       #f5efe4; /* Warm Cream base */
  --bg2:      #ffffff; /* Pure white surface */
  --bg3:      #fcfbf9; /* Ultra-light cream hover */
  --bg4:      #eae1d0; /* Muted tan/cream */
  --surface:  #ffffff; /* Clean card background */
  --card:     #ffffff; /* Card background */
  --fg:       #1f2640; /* Dark blue-grey text */
  --text:     #1f2640; /* Primary text */
  --text2:    #5f6d8a; /* Secondary text */
  --text3:    #8e9db5; /* Soft muted text */
  --border:   #e2d9cb; /* Warm delicate border */

  /* Brand Accents */
  --accent:   #ff8c2d; /* Construction/Safety Orange */
  --blue:     #ff8c2d; /* Primary Orange Accent */
  --lblue:    #ffa65e; /* Glowing Orange Highlight */
  --gold:     #d97706; /* Golden Amber (Gudang Module) */
  --teal:     #0d9488; /* Elegant Teal (RAB Module) */
  --green:    #10b981; /* Construction Go (Green) */
  --red:      #ef4444; /* Safety Warning Crimson */
  --purple:   #8b5cf6; /* Purple highlight */
  --orange:   #ff8c2d; /* Orange */
  --cyan:     #06b6d4; /* Ice Cyan */
  --pink:     #ec4899; /* Electric Rose */

  /* Semantic Overrides */
  --success:  #10b981;
  --warning:  #d97706;
  --danger:   #ef4444;
  --info:     #2563eb; /* Royal Blue (Dashboard Module) */

  /* Radius & Shadows */
  --r-sm:     8px;
  --r:        12px;
  --r-lg:     16px;
  --r-xl:     24px;
  --shadow-sm: 0 2px 6px rgba(31, 38, 64, 0.03);
  --shadow:    0 8px 24px rgba(31, 38, 64, 0.06);
  --shadow-lg: 0 16px 40px rgba(31, 38, 64, 0.1);
}

/* Custom Overrides & Enhancements for AllurePOS */
body {
  background-color: #f5efe4 !important;
  background-image: radial-gradient(#d3c9b7 1.2px, transparent 1.2px) !important;
  background-size: 28px 28px !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
}

/* Clear Dark Background overrides in HTML elements */
.admin-content, .main-area, .kds-grid, .floorplan-canvas {
  background-color: transparent !important;
  background-image: none !important;
}

.floorplan-canvas {
  background-color: rgba(255, 255, 255, 0.4) !important;
  background-image: radial-gradient(#d3c9b7 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  border: 1px solid var(--border) !important;
}

.sidebar, .admin-sidebar, .cart-sidebar {
  background: var(--nav) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}

.topbar, .admin-header, .pos-header, .kds-header {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}

.status-bar {
  background: var(--nav) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text2) !important;
}

.tab-bar, .view-tabs {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6 {
  color: var(--fg) !important;
}

/* Sidebar Menu Button Styling */
.menu-btn, .nav-item {
  background: transparent !important;
  color: var(--text2) !important;
  border: none;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-btn:hover, .nav-item:hover {
  background: var(--bg3) !important;
  color: var(--text) !important;
}

.menu-btn.active, .nav-item.active {
  background: var(--blue) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(255, 140, 45, 0.35);
}

.tab {
  background: transparent !important;
  color: var(--text2) !important;
  font-weight: 700;
}

.tab:hover {
  background: var(--bg3) !important;
  color: var(--text) !important;
}

.tab.active {
  background: var(--blue) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(255, 140, 45, 0.2);
}

/* Cards & Surfaces */
.card, .portal-card, .kpi-card, .kds-card, .menu-card, .menu-item {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-title, .portal-title {
  color: var(--fg) !important;
}

.portal-card:hover, .menu-card:hover, .menu-item:hover, .card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--blue) !important;
  box-shadow: 0 12px 30px rgba(255, 140, 45, 0.12) !important;
}

/* Forms & Inputs */
.form-input, .form-select, .form-textarea {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm) !important;
  outline: none;
  transition: border-color 0.15s ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--blue) !important;
  background: #ffffff !important;
}

/* Buttons */
.btn {
  background: var(--blue) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 140, 45, 0.1) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 2px 6px rgba(255, 140, 45, 0.15);
  font-weight: 700 !important;
}

.btn:hover {
  background: var(--lblue) !important;
  box-shadow: 0 4px 12px rgba(255, 140, 45, 0.3);
}

.btn-ghost {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
  background: var(--bg3) !important;
  border-color: var(--text3) !important;
}

.btn-danger {
  background: #fef2f2 !important;
  color: var(--red) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.btn-danger:hover {
  background: var(--red) !important;
  color: #ffffff !important;
}

.btn-success {
  background: #ecfdf5 !important;
  color: var(--green) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.btn-success:hover {
  background: var(--green) !important;
  color: #ffffff !important;
}

/* Badge styling */
.badge-green { background: #e6fcf5 !important; color: #0ca678 !important; }
.badge-blue { background: #e7f5ff !important; color: #1c7ed6 !important; }
.badge-red { background: #fff5f5 !important; color: #fa5252 !important; }
.badge-gold { background: #fff9db !important; color: #f59f00 !important; }
.badge-purple { background: #f3f0ff !important; color: #7950f2 !important; }
.badge-gray { background: #f1f3f5 !important; color: #495057 !important; }

/* KDS Status override */
.kds-ticket {
  background: var(--bg2) !important;
}
.kds-urgent {
  border-color: var(--red) !important;
}
.kds-ready {
  border-color: var(--green) !important;
  opacity: 0.8;
}
.kds-new {
  border-color: var(--lblue) !important;
}

/* Tables styling */
.admin-table, .data-table {
  background: var(--bg2);
}
.admin-table th, .data-table th {
  background: var(--bg3) !important;
  color: var(--text2) !important;
  border-bottom: 2.5px solid var(--border) !important;
}
.admin-table td, .data-table td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.admin-table tr:hover td, .data-table tr:hover td {
  background: var(--bg3) !important;
}

/* Portal Container Override */
.portal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f5efe4 !important;
  background-image: radial-gradient(#d3c9b7 1.2px, transparent 1.2px) !important;
  background-size: 28px 28px !important;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(3, 280px);
  gap: 24px;
  margin-top: 40px;
}

.portal-card {
  padding: 30px 24px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.portal-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 140, 45, 0.08);
  border: 1px solid rgba(255, 140, 45, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--blue);
  margin-bottom: 20px;
  transition: all 0.3s;
}

.portal-card:hover .portal-icon {
  background: var(--blue);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255, 140, 45, 0.4);
}

.portal-desc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}

/* Multilingual Language Switcher Style */
.lang-switcher {
  display: inline-flex;
  gap: 4px;
  background: var(--bg4);
  padding: 4px;
  border-radius: 20px;
  border: 1px solid var(--border);
  align-items: center;
}
.lang-btn {
  background: transparent;
  color: var(--text2);
  border: none;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lang-btn:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.05);
}
.lang-btn.active {
  background: var(--blue) !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 140, 45, 0.4);
}

/* Collapsible Sidebar Mechanics */
.admin-sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden;
}

.admin-sidebar.collapsed {
  width: 64px !important;
}

.admin-sidebar.collapsed .sidebar-logo span {
  display: none !important;
}

.admin-sidebar.collapsed .menu-btn span {
  display: none !important;
}

.admin-sidebar.collapsed .sidebar-category-header {
  display: none !important;
}

.admin-sidebar.collapsed .sidebar-footer-text {
  display: none !important;
}

/* Sidebar Category Header styling */
.sidebar-category-header {
  font-size: 10px;
  font-weight: 800;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 12px 16px 4px 16px;
  margin-top: 10px;
}

/* Sidebar Module Icon custom coloring */
.icon-dashboard { color: var(--info) !important; }
.icon-rab { color: var(--teal) !important; }
.icon-gudang { color: var(--gold) !important; }
.icon-settings { color: var(--text2) !important; }

/* Dynamic Subscription Capacity Bar styling */
.subscription-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
  margin: 10px;
  box-shadow: var(--shadow-sm);
}

.subscription-card.collapsed-hide {
  display: block;
}

.admin-sidebar.collapsed .subscription-card {
  display: none !important;
}

.capacity-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg4);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.capacity-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease, background-color 0.5s ease;
}

/* Color codes */
.fill-green { background-color: var(--green) !important; }
.fill-amber { background-color: var(--accent) !important; }
.fill-red { background-color: var(--red) !important; }

/* Interactive Bell Notification Panel */
.notification-bell-container {
  position: relative;
  cursor: pointer;
}

.bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--red);
  color: white;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg2);
}

.notification-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  width: 320px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: none;
  animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.notification-dropdown.active {
  display: block;
}

.notification-header {
  padding: 12px 16px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-list {
  max-height: 250px;
  overflow-y: auto;
}

.notification-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  transition: background 0.15s;
}

.notification-item:hover {
  background: var(--bg3);
}

.notification-item:last-child {
  border-bottom: none;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}