* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

:root {
  --color-primary: #04846c;
  --color-accent: #FFC107;
  --color-modal-bg: #04846c;
  
  /* Refined Dark Mode Palette for Readability */
  --dm-bg: #121212;
  --dm-surface: #1e1e1e;
  --dm-elevated: #2d2d2d;
  --dm-border: #404040;
  --dm-text: #f3f4f6;
  --dm-muted: #9ca3af;
  --dm-accent: #fcd34d;
  --dm-primary: #0d9488;
  --dm-link: #60a5fa;
}

/* Global Transition for smooth Dark Mode Toggle */
body, div, nav, section, header, footer, a, button, input, textarea, select {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, sans-serif;
  background-color: #FFF6EA;
  overflow-x: hidden;
  max-width: 100vw;
}

 .user-icon{
    max-height: 40px;  /* Image stays within navbar height */
  width: auto;    /* keeps proportions */
   
}

/* ========== GLOBAL DARK MODE (Harmonized) ========== */
body.dark,
html.dark body {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

body.dark nav,
html.dark nav {
    background-color: #0a1614 !important;
    border-bottom: 1px solid var(--dm-border);
}

body.dark nav .nav-links a, html.dark nav .nav-links a { color: #b8e0dc !important; }
body.dark nav .nav-links a:hover, html.dark nav .nav-links a:hover { color: var(--dm-accent) !important; }
body.dark #contact_bg, html.dark #contact_bg { background-color: var(--dm-accent) !important; color: #1a1a1a !important; }

body.dark .bg-white,
html.dark .bg-white,
body.dark .product-card, html.dark .product-card,
body.dark .checkout-card, html.dark .checkout-card,
body.dark .modal-content, html.dark .modal-content,
body.dark .modal-box, html.dark .modal-box,
body.dark .purchases-container, html.dark .purchases-container,
body.dark .order-box, html.dark .order-box,
body.dark .vip-card, html.dark .vip-card,
body.dark .main-panel, html.dark .main-panel,
body.dark .sidebar, html.dark .sidebar,
body.dark .checkout-section, html.dark .checkout-section,
body.dark .products-ordered-section, html.dark .products-ordered-section {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

body.dark .banner, html.dark .banner, body.dark .preview, html.dark .preview,
body.dark .services-section, html.dark .services-section, body.dark .about, html.dark .about,
body.dark .mission_vision, html.dark .mission_vision, body.dark .partners, html.dark .partners,
body.dark .awards, html.dark .awards, body.dark .contact-container, html.dark .contact-container,
body.dark section, html.dark section {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

body.dark .banner_name h1, html.dark .banner_name h1, body.dark h1, html.dark h1, body.dark h2, html.dark h2, body.dark h3, html.dark h3 { color: var(--dm-text) !important; }
body.dark .banner_name h3, html.dark .banner_name h3, body.dark .quote-text, html.dark .quote-text { color: var(--dm-muted) !important; }
body.dark .product-price, html.dark .product-price, body.dark .product-name, html.dark .product-name { color: var(--dm-text) !important; }
body.dark .add-to-cart-btn, html.dark .add-to-cart-btn { background-color: var(--dm-primary) !important; color: white !important; }
body.dark .add-to-cart-btn:hover, html.dark .add-to-cart-btn:hover { background-color: #0f766e !important; }

body.dark p, html.dark p,
body.dark span, html.dark span,
body.dark label, html.dark label,
body.dark li, html.dark li,
body.dark td, html.dark td,
body.dark .privacy-container h3, html.dark .privacy-container h3,
body.dark .privacy-label, html.dark .privacy-label,
body.dark .header h1, html.dark .header h1 {
    color: var(--dm-text) !important;
}

body.dark input, body.dark select, body.dark textarea,
html.dark input, html.dark select, html.dark textarea {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

body.dark input:focus, body.dark select:focus, body.dark textarea:focus,
html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
    border-color: var(--dm-primary) !important;
    outline: none !important;
}

body.dark table tbody tr, html.dark table tbody tr { background-color: var(--dm-surface) !important; color: var(--dm-muted) !important; border-color: var(--dm-border) !important; }
body.dark table thead th, html.dark table thead th { background-color: var(--dm-primary) !important; color: white !important; border-color: var(--dm-border) !important; }
body.dark .cart-table-section th, html.dark .cart-table-section th { background-color: var(--dm-elevated) !important; }

body.dark .site-footer, html.dark .site-footer { background-color: #0a1614 !important; color: var(--dm-muted) !important; border-top: 1px solid var(--dm-border); }
body.dark .site-footer h3, html.dark .site-footer h3 { color: var(--dm-text) !important; }
body.dark .site-footer a, html.dark .site-footer a { color: var(--dm-link) !important; }

body.dark .place-order-btn, html.dark .place-order-btn, body.dark .checkout-btn, html.dark .checkout-btn { background-color: var(--dm-accent) !important; color: #1a1a1a !important; }
body.dark .btn-save, html.dark .btn-save { background-color: var(--dm-primary) !important; color: white !important; }
body.dark .change-btn, html.dark .change-btn { color: var(--dm-accent) !important; }

body.dark .tabs, html.dark .tabs { border-color: var(--dm-border); }
body.dark .tab, html.dark .tab { color: var(--dm-muted); }
body.dark .tab.active, html.dark .tab.active { color: var(--dm-accent); border-color: var(--dm-accent); }
body.dark .order-id, html.dark .order-id { color: var(--dm-text) !important; }

body.dark .checkout-main, html.dark .checkout-main, body.dark .checkout-card, html.dark .checkout-card, body.dark main, html.dark main { background-color: var(--dm-bg) !important; }
body.dark .summary-row, html.dark .summary-row, body.dark .section-content, html.dark .section-content { color: var(--dm-muted) !important; }
body.dark .total-payment, html.dark .total-payment { color: var(--dm-accent) !important; }
body.dark .modal-overlay, html.dark .modal-overlay { background: rgba(0,0,0,0.7) !important; }

body.dark .dark-mode-float, html.dark .dark-mode-float { background: var(--dm-surface) !important; border: 1px solid var(--dm-border); box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }

/* Admin pages */
body.dark .main, html.dark .main,
body.dark .bg-white.rounded-xl, html.dark .bg-white.rounded-xl,
body.dark [class*="bg-white"] { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; }
body.dark .sidebar, html.dark .sidebar { background-color: #0a1614 !important; }
body.dark .text-gray-800, html.dark .text-gray-800 { color: var(--dm-text) !important; }
body.dark .text-gray-500, html.dark .text-gray-500 { color: var(--dm-muted) !important; }
body.dark .text-gray-600, html.dark .text-gray-600 { color: var(--dm-muted) !important; }
body.dark .border-gray-200, html.dark .border-gray-200,
body.dark .border-gray-100, html.dark .border-gray-100,
body.dark .border-gray-300, html.dark .border-gray-300 { border-color: var(--dm-border) !important; }
body.dark .bg-gray-50, html.dark .bg-gray-50,
body.dark .bg-gray-100, html.dark .bg-gray-100 { background-color: var(--dm-elevated) !important; color: var(--dm-text) !important; }

/* --- TOGGLE SWITCH STYLES --- */
.switch {
    position: relative;
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* The Circle Knob */
.switch .knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Active State (Green) */
.switch.on {
    background-color: #1c604b; /* Primary Color */
}

/* Move Knob when active */
.switch.on .knob {
    transform: translateX(24px);
}

/* Dark Mode adjustments for the switch itself */
body.dark .switch, html.dark .switch {
    background-color: var(--dm-border);
}
body.dark .switch.on, html.dark .switch.on {
    background-color: var(--dm-primary);
}

@font-face {
  font-family: 'Poppins';
  src: url('../FONTS/Poppins/Poppins-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roca2';
  src: url('../FONTS/roca-two-bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ========== GLOBAL MOBILE FIXES (Below 768px) ========== */
@media (max-width: 767px) {
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden !important;
  }
  
  /* Prevent iOS auto-zoom on inputs */
  input, textarea, select {
    font-size: 16px !important;
  }
  
  /* Ensure images don't break containers */
  img, video {
    max-width: 100%;
    height: auto;
  }

  /* Base padding for standard containers to prevent edge-touching */
  .container-fluid, .section-content, main, .main-panel {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Minimum touch target sizes for primary interactables */
  .btn, button, .nav-links a, .add-to-cart-btn, .place-order-btn, .checkout-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ========== ADMIN SIDEBAR MOBILE FIX ========== */
/* Scoped to .app .sidebar to only affect admin panel pages */
@media (max-width: 1023px) {
    .app {
        flex-direction: column !important;
    }
    .app > .main {
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    .app > .sidebar {
        height: auto !important;
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        padding: 10px !important;
        z-index: 50;
    }
    .app > .sidebar .brand {
        display: none !important;
    }
    .app > .sidebar .side-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }
    .app > .sidebar .side-nav > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .app > .sidebar .side-nav-item {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 10px 15px !important;
    }
    .app > .sidebar .side-nav::-webkit-scrollbar {
        display: none;
    }

    /* ========== RESPONSIVE TABLE (TABLE TO CARDS) ========== */
    .responsive-table {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }
    .responsive-table thead {
        display: none !important; /* Hide headers */
    }
    .responsive-table tbody {
        display: block !important;
        border: none !important;
    }
    .responsive-table tr {
        display: block !important;
        margin-bottom: 1rem;
        border-radius: 0.75rem;
        border: 1px solid #e5e7eb !important;
        padding: 10px;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    }
    body.dark .responsive-table tr, html.dark .responsive-table tr {
        border-color: var(--dm-border) !important;
        background-color: var(--dm-elevated) !important;
    }
    .responsive-table td {
        position: relative;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        text-align: right !important;
        border: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
        padding: 10px !important;
        min-height: 48px;
    }
    body.dark .responsive-table td, html.dark .responsive-table td {
        border-bottom-color: var(--dm-border) !important;
    }
    .responsive-table td:last-child {
        border-bottom: none !important;
    }
    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #4b5563; /* gray-600 */
        text-align: left;
        margin-right: 15px;
        flex-shrink: 0;
    }
    body.dark .responsive-table td::before, html.dark .responsive-table td::before {
        color: var(--dm-muted);
    }
    /* If no data-label (e.g., Image, Actions), center contents */
    .responsive-table td:not([data-label]) {
        justify-content: center !important;
    }
}