/* ==========================================================================
   Admin Login Page Styles (Blue & White Theme)
   ========================================================================== */

/* Google Fonts Import for clean typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* CSS Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Background & Body Styling */
.login-body {
    background: linear-gradient(135deg, #0A2342 0%, #1756A9 100%); /* Deep Blue to Bright Blue gradient */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Container for max width and centering */
.login-container {
    width: 100%;
    max-width: 420px;
    animation: fadeIn 0.5s ease-in-out;
}

/* Login Box (White Area) */
.login-box {
    background: #ffffff;
    padding: 40px 35px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* Header / Title */
.login-box h2 {
    color: #0A2342; /* Dark Blue */
    margin-bottom: 25px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Error Alert Message */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    display: flex;
    align-items: center;
}

.alert-danger {
    background-color: #FEE2E2;
    color: #B91C1C;
    border: 1px solid #FCA5A5;
}

/* Form Styling */
form {
    width: 100%;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #4B5563; /* Dark Grayish Blue */
    font-weight: 600;
    font-size: 14px;
}

/* Input Fields */
.form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 15px;
    color: #1F2937;
    background-color: #F9FAFB;
    transition: all 0.3s ease;
    outline: none;
}

/* Input Focus Effect */
.form-group input:focus {
    border-color: #1756A9;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15); /* Light blue glow */
}

.form-group input::placeholder {
    color: #9CA3AF;
}

/* Button Styling */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(23, 86, 169, 0.2);
}

.btn-primary.w-100 {
    width: 100%;
}

/* Button Hover & Active Effects */
.btn-primary:hover {
    background-color: #124385; /* Darker blue on hover */
    box-shadow: 0 6px 12px rgba(23, 86, 169, 0.3);
}

.btn-primary:active {
    transform: translateY(1px); /* Slight click effect */
    box-shadow: 0 2px 4px rgba(23, 86, 169, 0.2);
}

/* Smooth Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Responsive Design for Mobile Devices
   ========================================================================== */
@media screen and (max-width: 480px) {
    .login-box {
        padding: 30px 20px;
    }
    
    .login-box h2 {
        font-size: 22px;
    }
    
    .form-group input {
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .btn-primary {
        padding: 12px;
        font-size: 15px;
    }
}

/* ==========================================================================
   Admin Sidebar Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Main Sidebar Layout */
.admin-sidebar {
    width: 280px;
    background-color: #0A2342; /* Deep Professional Blue */
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1); /* Soft dark shadow as separator */
    z-index: 1000;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidebar Brand Area */
.sidebar-brand {
    padding: 25px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #081C36; /* Slightly darker top area for contrast */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Bottom shadow separator */
}

.sidebar-brand h2 {
    color: #ffffff; /* Pure white text */
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
}

/* Mobile Cross/Close Button inside Sidebar */
.sidebar-close-btn {
    display: none; /* Hidden on Desktop */
    background: rgba(255, 255, 255, 0.1); /* Transparent white */
    color: #FCA5A5; /* Soft Red */
    width: 32px;
    height: 32px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    padding: 0;
    outline: none;
}
.sidebar-close-btn:hover {
    background: #EF4444; /* Solid Red on Hover */
    color: #ffffff;
}

/* Scrollable Menu Wrapper - Never cuts off options */
.sidebar-menu-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 20px 15px;
    scrollbar-width: none; /* Firefox: Hide Scrollbar */
}
.sidebar-menu-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari: Hide Scrollbar */
}

.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0;
}

/* Menu Category Headings */
.menu-heading {
    font-size: 11px;
    text-transform: uppercase;
    color: #93C5FD; /* Light Blue/Cyan color for headings */
    font-weight: 500;
    letter-spacing: 1px;
    margin: 15px 0 5px 15px;
    opacity: 0.8;
}

/* Default Menu Links */
.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px; /* Perfect spacing */
    color: #CBD5E1; /* Light Slate Gray for standard text */
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sidebar-icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.3s;
}

/* Hover States (Mouse over menu) */
.sidebar-menu a:hover {
    background-color: rgba(255, 255, 255, 0.08); /* Subtle white hover */
    color: #ffffff; /* Bright white text on hover */
}
.sidebar-menu a:hover .sidebar-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Active State (Current Page) */
.sidebar-menu a.active {
    background-color: #1756A9; /* Primary Bright Blue for active item */
    color: #ffffff; /* Pure white text */
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Deep shadow */
}
.sidebar-menu a.active .sidebar-icon {
    opacity: 1;
}

/* ==========================================================================
   Admin Header (Topbar) Styling
   ========================================================================== */
.admin-topbar {
    background: #ffffff;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.04);
    position: sticky;
    top: 0;
    z-index: 99;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Hamburger Toggle Button */
.sidebar-toggle {
    background: #F1F5F9;
    color: #0A2342;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    border: none;
    outline: none;
}
.sidebar-toggle:hover {
    background: #1756A9;
    color: #ffffff;
}

.topbar-title {
    font-size: 20px;
    color: #0A2342;
    font-weight: 700;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* View Website & Cache Buttons */
.btn-view-website {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F1F5F9;
    color: #0A2342;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s, transform 0.1s;
    border: none;
    outline: none;
}
.btn-view-website:hover {
    background: #E2E8F0;
}

/* Override Cache Button Inline Border */
#topbarClearCacheBtn {
    border: none !important;
    box-shadow: 0 0 0 1px #FECACA inset !important; /* Visual border created using inset shadow */
}

/* Profile Section */
.admin-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #F8FAFC;
    padding: 6px 15px 6px 6px;
    border-radius: 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.admin-avatar {
    background: #1756A9;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-name {
    font-size: 14px;
    font-weight: 600;
    color: #0A2342;
}

.topbar-divider {
    width: 1px;
    height: 20px;
    background-color: transparent;
    box-shadow: inset 1px 0 0 #CBD5E1; /* Separator line using shadow */
}

.btn-logout {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #EF4444;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s;
}
.btn-logout:hover {
    color: #B91C1C;
}

/* ==========================================================================
   Admin Footer Styling
   ========================================================================== */
.admin-footer {
    background: #ffffff;
    padding: 20px 30px;
    text-align: center;
    box-shadow: 0 -4px 15px rgba(10, 35, 66, 0.03);
    margin-top: auto;
}
.admin-footer p {
    color: #64748B;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

/* ==========================================================================
   Offcanvas Sidebar & Responsive Breakpoints
   ========================================================================== */

/* Dark Overlay for Mobile Offcanvas */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 35, 66, 0.6);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Applied via JS to stop body scrolling */
body.no-scroll {
    overflow: hidden;
}

/* Tablet & Mobile Screens */
@media screen and (max-width: 992px) {
    .admin-sidebar {
        position: fixed;
        left: -300px; /* Hidden Offcanvas */
        top: 0;
        width: 280px;
        box-shadow: none;
    }

    .admin-sidebar.active {
        left: 0;
        box-shadow: 5px 0 25px rgba(0,0,0,0.15);
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* মোবাইলে আসলে বাটনটি দৃশ্যমান হবে */
    .sidebar-close-btn {
        display: flex !important; 
    }
}

/* Small Mobiles */
@media screen and (max-width: 768px) {
    .topbar-right {
        gap: 10px;
    }
    .view-web-text {
        display: none; /* Hide text, keep icon */
    }
    .btn-view-website {
        padding: 10px; /* Make it a square icon button */
    }
    .admin-profile {
        padding: 5px; /* Compact Profile */
        background: transparent;
        box-shadow: none;
    }
    .admin-name, .topbar-divider, .btn-logout {
        display: none; /* Hide profile name & logout on mobile header */
    }
    .admin-topbar, .admin-footer {
        padding: 15px;
    }
    .topbar-title {
        font-size: 18px;
    }
    .sidebar-toggle {
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   Admin Dashboard Layout & Base (Blue & White Theme)
   ========================================================================== */

/* Dashboard Body Background */
body.admin-layout {
    background-color: #F0F4F8; /* Light blueish white for dashboard bg */
    display: flex;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Main Content Wrapper */
.admin-main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Content Area Padding */
.admin-content {
    padding: 30px;
    flex: 1;
}

/* Page Headers */
.page-header {
    margin-bottom: 25px;
}
.page-header h2 {
    color: #0A2342; /* Deep Blue */
    font-size: 24px;
    font-weight: 700;
}

/* Error Alerts */
.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}
.alert-danger {
    background-color: #FEE2E2;
    color: #B91C1C;
}

/* ==========================================================================
   Top Statistics Grid (Overview)
   ========================================================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.04); /* Soft blue shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(23, 86, 169, 0.1);
}

.stat-info h3 {
    font-size: 13px;
    color: #64748B;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-info h2 {
    font-size: 28px;
    color: #1756A9; /* Primary Blue */
    font-weight: 700;
}

/* Stat Icons */
.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-icon svg {
    width: 28px;
    height: 28px;
}

/* Custom icon colors matching your classes */
.icon-indigo { background: #E0E7FF; color: #4F46E5; }
.icon-teal   { background: #CCFBF1; color: #0D9488; }
.icon-orange { background: #FFEDD5; color: #EA580C; }
.icon-green  { background: #DCFCE7; color: #16A34A; }


/* ==========================================================================
   Low Stock Alert Widget
   ========================================================================== */
.low-stock-dash-wrapper {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.04);
}

.ls-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ls-dash-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ls-pulse-icon svg { color: #64748B; }
.danger .ls-pulse-icon svg { color: #EF4444; }
.healthy .ls-pulse-icon svg { color: #10B981; }

.ls-dash-title h3 {
    color: #0A2342;
    font-size: 18px;
    margin-bottom: 4px;
}
.ls-dash-title p {
    color: #64748B;
    font-size: 14px;
}

.btn-ls-view {
    background: #1756A9;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.3s;
}
.btn-ls-view:hover { background: #0A2342; }

/* Low stock item list */
.ls-dash-list {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.ls-dash-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    padding: 15px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ls-dash-item:hover {
    background: #F8FAFC;
    box-shadow: 0 4px 6px rgba(23, 86, 169, 0.05);
}

.ls-dash-item img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    background: #F1F5F9;
}

.ls-dash-item-info h4 {
    font-size: 14px;
    color: #1E293B;
    margin-bottom: 8px;
    line-height: 1.4;
}

.ls-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}
.ls-badge.out { background: #FEE2E2; color: #B91C1C; }
.ls-badge.low { background: #FEF3C7; color: #D97706; }


/* ==========================================================================
   Visitor Analytics Section
   ========================================================================== */
.visitor-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Device on left, Chart on right */
    gap: 24px;
}

.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.04);
}

.card-title {
    font-size: 18px;
    color: #0A2342;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-subtitle {
    font-size: 13px;
    color: #64748B;
    font-weight: normal;
}
.no-data-message {
    color: #94A3B8;
    font-style: italic;
    font-size: 14px;
}

/* Device Breakdown (Progress Bar Style) */
.device-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 25px;
    background: #F1F5F9;
}
.segment-desktop { background: #0A2342; } /* Dark Blue */
.segment-mobile  { background: #1756A9; } /* Primary Blue */
.segment-tablet  { background: #93C5FD; } /* Light Blue */

.device-legend {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.device-legend-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #334155;
}
.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-right: 12px;
}
.dot-desktop { background: #0A2342; }
.dot-mobile  { background: #1756A9; }
.dot-tablet  { background: #93C5FD; }
.legend-label { flex: 1; font-weight: 500; }
.legend-value { font-weight: 700; color: #0A2342; margin-right: 8px; }
.legend-count { color: #64748B; font-size: 13px; }

/* 7-Day Visitor Trend Chart */
.trend-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 220px;
    padding-top: 20px;
}
.trend-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    flex: 1;
    cursor: pointer;
}
.trend-bar-value {
    font-size: 12px;
    font-weight: 600;
    color: #1756A9;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s ease;
}
.trend-bar-wrapper:hover .trend-bar-value {
    opacity: 1;
    transform: translateY(0);
}
.trend-bar {
    width: 35%;
    max-width: 45px;
    background: #DBEAFE; /* Very light blue */
    border-radius: 6px 6px 0 0;
    transition: background 0.3s, height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 4px;
}
.trend-bar.is-today {
    background: #1756A9; /* Current day active blue */
}
.trend-bar-wrapper:hover .trend-bar {
    background: #0A2342; /* Hover dark blue */
}
.trend-bar-label {
    font-size: 13px;
    color: #64748B;
    margin-top: 12px;
    font-weight: 500;
}

/* ==========================================================================
   Responsive Queries
   ========================================================================== */

/* Large Tablets & Small Laptops */
@media screen and (max-width: 1024px) {
    .visitor-analytics-grid {
        grid-template-columns: 1fr; /* Stack analytics charts */
    }
}

/* Tablets */
@media screen and (max-width: 768px) {
    .admin-content {
        padding: 20px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
    .ls-dash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .trend-bar {
        width: 50%;
    }
}

/* Mobile Devices */
@media screen and (max-width: 480px) {
    .admin-content {
        padding: 15px;
    }
    .stats-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    .page-header h2 {
        font-size: 20px;
    }
    .stat-card {
        padding: 20px;
    }
    .trend-chart {
        height: 180px;
    }
    .card-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* ==========================================================================
   Category Management Page Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* 2-Column Grid Layout for Desktop */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Form takes 1 part, Table takes 2 parts */
    gap: 30px;
    align-items: start;
}

/* Base Card Style */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Soft outer shadow */
}

.card-title {
    color: #0A2342;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ==========================================================================
   Form Styling
   ========================================================================== */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}

/* Inputs & Selects using Box-shadow instead of borders */
.form-group input, 
.form-control-select {
    width: 100%;
    padding: 12px 15px;
    background-color: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    border-radius: 8px;
    border: none;
    outline: none;
    box-shadow: inset 0 0 0 1px transparent; /* Hidden by default */
    transition: all 0.3s ease;
}

/* Inner shadow simulates border for empty state */
.form-group input:not(:focus), 
.form-control-select:not(:focus) {
    box-shadow: inset 0 0 0 1px #E2E8F0;
}

/* Focus state with Primary Blue glow */
.form-group input:focus, 
.form-control-select:focus {
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Button Styling */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
    box-shadow: 0 4px 6px rgba(23, 86, 169, 0.2);
}

.btn-primary:hover {
    background-color: #0A2342;
    box-shadow: 0 6px 12px rgba(10, 35, 66, 0.3);
}

.btn-primary.w-100 {
    width: 100%;
}

/* ==========================================================================
   Data Table Styling (No Borders)
   ========================================================================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.admin-table {
    width: 100%;
    border-collapse: collapse; /* Required for table styling even without borders */
    text-align: left;
}

.admin-table th {
    background-color: #F1F5F9;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px;
    white-space: nowrap;
}

/* First and Last th rounded corners */
.admin-table th:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.admin-table th:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

.admin-table td {
    padding: 15px;
    color: #334155;
    font-size: 14px;
    vertical-align: middle;
    /* Bottom separation line created via background gradient */
    background-image: linear-gradient(to right, #F1F5F9 100%, transparent 0%);
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* Hover effect on table rows */
.admin-table tbody tr {
    transition: background-color 0.2s;
}
.admin-table tbody tr:hover td {
    background-color: #F8FAFC;
}

/* Badges for Parent/Sub Category */
.badge-main {
    background: #E0E7FF;
    color: #4F46E5;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.badge-sub {
    background: #F1F5F9;
    color: #64748B;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

/* Action Buttons (Edit / Delete) */
.action-cells {
    display: flex;
    gap: 8px;
}

.btn-action {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.btn-edit {
    background: #DBEAFE;
    color: #1D4ED8;
}
.btn-edit:hover {
    background: #1D4ED8;
    color: #ffffff;
}

.btn-delete {
    background: #FEE2E2;
    color: #B91C1C;
}
.btn-delete:hover {
    background: #B91C1C;
    color: #ffffff;
}

/* Success Alert Styling update */
.alert-success {
    background-color: #DCFCE7;
    color: #16A34A;
}

/* ==========================================================================
   Responsive Queries
   ========================================================================== */

/* Tablets & Small Laptops */
@media screen and (max-width: 992px) {
    .grid-2-col {
        grid-template-columns: 1fr; /* Form and Table stack vertically */
    }
}

/* Mobiles */
@media screen and (max-width: 768px) {
    .admin-card {
        padding: 15px;
    }
    
    .admin-table th, 
    .admin-table td {
        padding: 12px 10px;
    }
    
    .action-cells {
        flex-direction: column; /* Stack action buttons on very small screens */
    }
}

/* ==========================================================================
   Shop By Category Grid Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Grid Layout for Categories */
.sbc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 10px;
}

/* Individual Category Card */
.sbc-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.04); /* Soft shadow */
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sbc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(23, 86, 169, 0.1); /* Premium Hover shadow */
}

/* Card Header Area */
.sbc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

/* Image Preview Container (Circle Design) */
.sbc-img-preview {
    width: 120px;
    height: 120px;
    margin: 0 auto 10px auto;
    border-radius: 50%; /* Circle for front-end match */
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.06); /* Shadow instead of border */
}

.sbc-img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sbc-card:hover .sbc-img-preview img {
    transform: scale(1.05); /* Slight zoom on card hover */
}

/* When no image is present */
.sbc-no-img {
    font-size: 13px;
    color: #94A3B8;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
}

/* File Input Custom Styling */
.file-input-styled {
    display: block;
    width: 100%;
    padding: 10px 12px;
    color: #475569;
    background-color: #F8FAFC;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Simulates border securely */
    cursor: pointer;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.file-input-styled::file-selector-button {
    background: #E2E8F0;
    color: #334155;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    margin-right: 10px;
    transition: background 0.2s;
}

.file-input-styled:hover::file-selector-button {
    background: #CBD5E1;
}

.file-input-styled:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Input field hover/focus override to match no-border theme perfectly */
.pay-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9 !important;
    background-color: #ffffff !important;
}

.btn-primary:hover {
    background: #1D4ED8 !important; /* Darker blue hover for save button */
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3) !important;
}

/* ==========================================================================
   Responsive Queries for Shop By Category
   ========================================================================== */

/* Tablets & Small Devices */
@media screen and (max-width: 768px) {
    .sbc-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 15px;
    }
    
    .sbc-card {
        padding: 18px;
    }
    
    .sbc-img-preview {
        width: 100px;
        height: 100px;
    }
}

/* Extra Small Mobiles */
@media screen and (max-width: 480px) {
    .sbc-grid {
        grid-template-columns: 1fr; /* 1 Column for mobile */
    }
    
    .info-notice {
        font-size: 13px;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Variation Management Page Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Smart Color Picker UI */
.smart-color-picker {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #F8FAFC;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Simulates border securely */
    transition: box-shadow 0.3s ease;
}

.smart-color-picker:focus-within {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Custom Color Input Wrapper */
.color-picker-box {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Drop shadow instead of border */
}
.color-picker-box::-webkit-color-swatch-wrapper {
    padding: 0;
}
.color-picker-box::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}
.color-picker-box::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

/* Hex Input Field inside Picker */
.hex-input {
    flex: 1;
    background: transparent !important;
    box-shadow: none !important; /* Remove inner shadow */
    padding: 0 !important;
    font-family: monospace;
    font-size: 16px !important;
    font-weight: 600;
    color: #1E293B !important;
}

/* Color Preview Swatch in Table */
.color-swatch-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Shadow instead of border for table swatches */
}

/* General Form Inputs (Reusing logic for safety) */
.form-input {
    width: 100%;
    padding: 12px 15px;
    background-color: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    border-radius: 8px;
    border: none;
    outline: none;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    transition: all 0.3s ease;
}

.form-input:focus {
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Custom Checkbox Styling */
.form-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1756A9; /* Native blue checkbox */
}

/* ==========================================================================
   Responsive Adjustments for Variations Page
   ========================================================================== */

/* Tablets & Mobiles */
@media screen and (max-width: 768px) {
    .smart-color-picker {
        padding: 8px 12px;
        gap: 10px;
    }
    
    .color-picker-box {
        width: 35px;
        height: 35px;
    }
    
    .hex-input {
        font-size: 14px !important;
    }
    
    /* Ensure table colors column stays neat */
    .color-swatch-circle {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   Product Management Page Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Main Card Override for Full Table Width */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(10, 35, 66, 0.05); /* Soft premium shadow */
    overflow: hidden; /* Ensures rounded corners on the table */
}

/* ==========================================================================
   Product Table Styling (No Borders)
   ========================================================================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.admin-table th {
    background-color: #F8FAFC;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 18px 20px;
    white-space: nowrap;
    box-shadow: 0 4px 6px -4px rgba(0,0,0,0.05); /* Subtle shadow line below header */
}

.admin-table td {
    padding: 16px 20px;
    color: #334155;
    font-size: 14px;
    vertical-align: middle;
    /* Bottom separation line created via background gradient (No Borders) */
    background-image: linear-gradient(to right, #F1F5F9 100%, transparent 0%);
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* Hover effect on table rows */
.admin-table tbody tr {
    transition: background-color 0.2s ease;
}
.admin-table tbody tr:hover td {
    background-color: #F1F5F9; /* Light gray on hover */
}

/* Product Image in Table */
.tbl-img-wrap {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(10, 35, 66, 0.08); /* Shadow instead of border */
}

.tbl-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stock Status Text */
.status-green {
    color: #16A34A;
    font-weight: 700;
    background: #DCFCE7;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}
.status-red {
    color: #DC2626;
    font-weight: 700;
    background: #FEE2E2;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

/* Add Button Styling Override */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(23, 86, 169, 0.3) !important;
}

/* ==========================================================================
   Smart Pagination Styling
   ========================================================================== */
.pagination-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background-color: #ffffff; /* Same as card background */
}

.page-link {
    background-color: #F1F5F9;
    color: #1E293B;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.page-link:hover {
    background-color: #1756A9;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
    transform: translateY(-1px);
}

.page-current {
    font-size: 14px;
    font-weight: 600;
    color: #64748B;
    background: #F8FAFC;
    padding: 8px 15px;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Security safe inset shadow */
}

/* ==========================================================================
   Responsive Adjustments for Products Page
   ========================================================================== */

/* Tablets & Laptops */
@media screen and (max-width: 992px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Mobiles */
@media screen and (max-width: 768px) {
    .admin-table th, 
    .admin-table td {
        padding: 12px 15px;
    }
    
    .tbl-img-wrap {
        width: 40px;
        height: 40px;
    }
    
    .action-cells {
        flex-direction: column;
        gap: 5px;
    }
    
    .btn-action {
        width: 100%;
        text-align: center;
    }
    
    .pagination-wrapper {
        justify-content: center; /* Center pagination on mobile */
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Low Stock Management Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* KPI Grid */
.stock-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.s-kpi-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium Shadow */
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.s-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(10, 35, 66, 0.08);
}

.s-kpi-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-kpi-icon svg {
    width: 28px;
    height: 28px;
}

/* KPI Colors using backgrounds instead of borders */
.s-kpi-card.danger .s-kpi-icon { background: #FEE2E2; color: #DC2626; }
.s-kpi-card.warning .s-kpi-icon { background: #FFEDD5; color: #EA580C; }
.s-kpi-card.info .s-kpi-icon { background: #E0E7FF; color: #4F46E5; }

.s-kpi-info h3 {
    font-size: 28px;
    color: #0F172A;
    font-weight: 800;
    margin: 0 0 5px 0;
}

.s-kpi-info p {
    font-size: 14px;
    color: #64748B;
    font-weight: 600;
    margin: 0;
}

/* Filter Card */
.stock-filter-card {
    background: #ffffff;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05);
    margin-bottom: 25px;
}

.filter-form {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-expand {
    flex: 2;
}

.filter-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.filter-input {
    width: 100%;
    padding: 12px 15px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    border-radius: 8px;
    border: none;
    outline: none;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Borderless safe shadow */
    transition: all 0.3s;
}

.filter-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

.btn-generate-report {
    background: #1756A9;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(23, 86, 169, 0.2);
    width: 100%;
    justify-content: center;
}

.btn-generate-report:hover {
    background: #0A2342;
    box-shadow: 0 6px 12px rgba(10, 35, 66, 0.3);
}

/* Report Table Specific Styles */
.report-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(10, 35, 66, 0.05);
    overflow: hidden;
}

.st-prod-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.st-prod-info img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Replaces border */
}

.st-title {
    display: block;
    font-weight: 700;
    color: #1E293B;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 4px;
    transition: color 0.3s;
}
.st-title:hover { color: #1756A9; }

.st-id {
    font-size: 12px;
    color: #64748B;
    background: #F1F5F9;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.st-cat {
    background: #E0E7FF;
    color: #4338CA;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Status Badges */
.st-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}
.badge-out { background: #FEE2E2; color: #DC2626; }
.badge-critical { background: #FFEDD5; color: #EA580C; }
.badge-low { background: #FEF9C3; color: #CA8A04; }

/* Quick Update Component */
.quick-update-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.st-input {
    width: 80px;
    padding: 10px;
    border: none;
    background: #F8FAFC;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: #1E293B;
    transition: all 0.3s;
}
.st-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
    outline: none;
}

.btn-st-update {
    background: #1756A9;
    color: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(23, 86, 169, 0.2);
}
.btn-st-update:hover {
    background: #0A2342;
    box-shadow: 0 4px 8px rgba(10, 35, 66, 0.3);
}

/* Spinner Animation */
.spin {
    animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Toast Notification Override */
.toast-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 16px 24px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
    z-index: 9999;
}
.toast-notification.show {
    transform: translateY(0);
    opacity: 1;
}

/* ==========================================================================
   Responsive Queries
   ========================================================================== */
@media screen and (max-width: 768px) {
    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .quick-update-wrapper {
        justify-content: center; /* Center update box on mobile */
    }
    
    .toast-notification {
        left: 20px;
        right: 20px;
        bottom: 20px;
        text-align: center;
    }
}

/* ==========================================================================
   Low Stock Advanced Filter Bar (100% Bug-Free Layout)
   ========================================================================== */
.ls-filter-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05);
}

.ls-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* Aligns inputs and buttons perfectly at the bottom */
    gap: 20px;
}

.ls-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ls-filter-group label {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0; /* Prevents overflow issues */
}

.ls-filter-input {
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    background-color: #f8fafc;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box; /* Crucial for preventing width overflow */
    height: 46px; /* Uniform height for inputs and selects */
}

.ls-filter-input:focus {
    background-color: #ffffff;
    border-color: #1756A9;
    box-shadow: 0 0 0 3px rgba(23, 86, 169, 0.1);
}

.ls-width-small {
    flex: 0 0 180px; /* Fixed optimal width for number input */
}

.ls-expand {
    flex: 1; /* Takes up remaining space gracefully */
    min-width: 250px;
}

.ls-btn-wrapper {
    flex: 0 0 auto; /* Button takes exactly the space it needs */
}

.ls-btn-generate {
    background-color: #1756A9;
    color: #ffffff;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.15);
}

.ls-btn-generate:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(10, 35, 66, 0.2);
}

/* 100% Fully Responsive Breakpoints */
@media screen and (max-width: 768px) {
    .ls-filter-form {
        flex-direction: column;
        align-items: stretch; /* Stretches items to full width on mobile */
        gap: 15px;
    }
    
    .ls-width-small, .ls-expand, .ls-btn-wrapper {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ==========================================================================
   Order Management Page Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Status Badges */
.status-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04); /* Soft shadow instead of border */
}

/* Badge Colors */
.badge-warning { background-color: #FEF9C3; color: #CA8A04; } /* Pending */
.badge-info    { background-color: #E0F2FE; color: #0284C7; } /* Processing */
.badge-primary { background-color: #E0E7FF; color: #4338CA; } /* Shipped */
.badge-success { background-color: #DCFCE7; color: #16A34A; } /* Delivered */
.badge-danger  { background-color: #FEE2E2; color: #DC2626; } /* Cancelled */
.badge-secondary{background-color: #F1F5F9; color: #475569; } /* Returned/Default */

/* Action Buttons Specific for Orders */
.action-cells {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-view {
    background-color: #D1FAE5; /* Soft Emerald */
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(5, 150, 105, 0.1);
}

.btn-view:hover {
    background-color: #059669;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.3);
    transform: translateY(-2px);
}

.btn-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(29, 78, 216, 0.1);
}

.btn-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(29, 78, 216, 0.3);
}

/* Ensure Order Number stands out */
.admin-table td strong {
    color: #0f172a;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Responsive Adjustments for Orders Page
   ========================================================================== */
@media screen and (max-width: 768px) {
    .action-cells {
        flex-direction: row; /* Keep buttons side by side on mobile for orders */
        justify-content: flex-start;
    }
    
    .status-badge {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* ==========================================================================
   Customer Management System Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Header Actions & Search Bar */
.cust-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
}

.cust-search-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 0 4px 10px rgba(10, 35, 66, 0.05), inset 0 0 0 1px #E2E8F0; /* Soft outer shadow + inset safe border */
    min-width: 300px;
    transition: box-shadow 0.3s ease;
}
.cust-search-box:focus-within {
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

.cust-search-input {
    border: none;
    outline: none;
    background: transparent;
    padding: 6px;
    flex: 1;
    font-size: 14px;
    color: #1E293B;
}

.cust-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748B;
    transition: color 0.2s;
    padding: 0 5px;
}
.cust-search-btn:hover { color: #1756A9; }

.cust-clear-btn {
    color: #EF4444;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
}
.cust-clear-btn:hover { transform: scale(1.1); }

/* Customer Stat Grid */
.cust-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.c-stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Shadow instead of border */
    display: flex;
    align-items: center;
    gap: 18px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.c-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(10, 35, 66, 0.08);
}

.c-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-stat-info h4 {
    font-size: 26px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 5px 0;
}

.c-stat-info span {
    font-size: 14px;
    color: #64748B;
    font-weight: 600;
}

/* Badges for Customer Types & Orders */
.cust-badge {
    display: inline-flex; /* Ensures icon and text are side by side */
    align-items: center; /* Centers them vertically */
    gap: 5px; /* Adds perfect spacing between icon and text */
    white-space: nowrap; /* CRITICAL FIX: Prevents text from breaking into a second line */
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* Soft shadow for depth */
}

.badge-registered {
    background-color: #DCFCE7;
    color: #16A34A;
}

.badge-guest {
    background-color: #FFEDD5;
    color: #EA580C;
}

.order-count-badge {
    background-color: #F1F5F9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    white-space: nowrap; /* Ensures order count never breaks */
}

/* Base override for Success/Error Alerts matching Admin structure */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; }
.alert-danger { background: #FEE2E2; color: #991B1B; }

/* ==========================================================================
   Responsive Adjustments for Customers Page
   ========================================================================== */
@media screen and (max-width: 768px) {
    .cust-header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cust-search-box {
        min-width: 100%; /* Full width search on mobile */
    }
}

/* ==========================================================================
   Review Management System Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Review Stat Grid */
.review-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.r-stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Safe shadow instead of border */
    display: flex;
    align-items: center;
    gap: 18px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.r-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(10, 35, 66, 0.08);
}

.r-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.r-stat-info h4 {
    font-size: 26px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 5px 0;
}

.r-stat-info span {
    font-size: 14px;
    color: #64748B;
    font-weight: 600;
}

/* Badges for Review Status */
.badge-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* Soft depth */
}

.badge-approved { background-color: #DCFCE7; color: #16A34A; }
.badge-pending  { background-color: #FFEDD5; color: #EA580C; }
.badge-verified { background-color: #DBEAFE; color: #1D4ED8; }

/* Star Rating Display */
.star-display {
    color: #F59E0B; /* Golden yellow */
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

/* Specific Action Buttons */
.btn-approve {
    background-color: #D1FAE5;
    color: #059669;
}
.btn-approve:hover {
    background-color: #059669;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.3);
}

.btn-pending {
    background-color: #FEF3C7;
    color: #D97706;
}
.btn-pending:hover {
    background-color: #D97706;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
}

/* Modal Styling (No Borders) */
.custom-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 35, 66, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.modal-box {
    background: #ffffff;
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.3s ease-out;
}

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #F8FAFC;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* Separator shadow */
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0A2342;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #94A3B8;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}
.modal-close:hover { color: #EF4444; }

.modal-body {
    padding: 24px;
}

/* Modal Inputs */
.modal-input {
    width: 100%;
    padding: 12px 15px;
    background-color: #F8FAFC;
    color: #1E293B;
    font-size: 14px;
    border-radius: 8px;
    border: none;
    outline: none;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.modal-input:focus {
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* ==========================================================================
   Responsive Adjustments for Reviews Page
   ========================================================================== */
@media screen and (max-width: 768px) {
    .action-cells {
        flex-wrap: wrap;
        justify-content: flex-start !important;
    }
}

/* ==========================================================================
   PROFIT & LOSS ANALYTICS UI (NO-BORDER & FULLY RESPONSIVE)
   ========================================================================== */

/* 1. Header & Notice Styling */
.header-wrapper .header-title h1 {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.info-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 25px;
    color: #1e3a8a;
    font-size: 14px;
    line-height: 1.5;
}

/* 2. Smart Filter Bar */
.report-filter-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.03);
    margin-bottom: 25px;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-input {
    padding: 10px 15px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0f172a;
    outline: none;
    transition: all 0.3s ease;
    background-color: #f8fafc;
}

.filter-input:focus {
    border-color: #3b82f6;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.filter-btn-group {
    flex: 0 0 auto;
}

.btn-generate-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0f172a;
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
    height: 43px;
}

.btn-generate-report:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
}

/* 3. KPI Grid Layout */
.kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.kpi-card-pro {
    padding: 20px;
    border-radius: 16px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kpi-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.2);
}

.kpi-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.kpi-info p {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.9;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-info h3 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Gradient Variations */
.gradient-blue { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.gradient-orange { background: linear-gradient(135deg, #ea580c, #f97316); }
.gradient-green { background: linear-gradient(135deg, #059669, #10b981); }
.gradient-red { background: linear-gradient(135deg, #dc2626, #ef4444); }
.gradient-purple { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }

/* 4. Chart & Table Split Layout */
.report-grid-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Chart takes slightly more space */
    gap: 25px;
    margin-bottom: 30px;
}

.report-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.rc-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rc-header h3 {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

/* 5. Modern Table Design */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;
}

.pl-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.pl-table th {
    text-align: left;
    padding: 12px 15px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
}

.pl-table th:first-child { border-radius: 6px 0 0 6px; }
.pl-table th:last-child { border-radius: 0 6px 6px 0; }

.pl-table td {
    padding: 15px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    vertical-align: middle;
}

.pl-table tr:last-child td {
    border-bottom: none;
}

.pl-table tr:hover td {
    background-color: #f8fafc;
}

/* Badges */
.pl-badge {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
}

.badge-profit {
    background: #dcfce7;
    color: #059669;
}

.badge-loss {
    background: #fee2e2;
    color: #dc2626;
}

/* 6. Smart Pagination */
.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.page-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.page-link:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #2563eb;
}

.page-current {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    padding: 6px 12px;
    border-radius: 20px;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES (100% Mobile & Tablet Ready)
   ========================================================================== */

/* Laptops and smaller desktops */
@media (max-width: 1200px) {
    .kpi-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets */
@media (max-width: 992px) {
    .report-grid-split {
        grid-template-columns: 1fr; /* Stack Chart and Table vertically */
    }
    
    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .filter-btn-group button {
        width: 100%;
    }
}

/* Mobile Phones */
@media (max-width: 576px) {
    .kpi-grid-4 {
        grid-template-columns: 1fr; /* Stack KPI Cards */
        gap: 15px;
    }
    
    .kpi-card-pro {
        padding: 15px;
    }
    
    .kpi-info h3 {
        font-size: 20px;
    }
    
    .info-notice {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    
    .report-card {
        padding: 15px;
    }
}

/* ==========================================================================
   Flash Sale Management Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Flash Sale Add Form Container */
.flash-form-box {
    display: none;
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Soft premium shadow */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.flash-form-box.show {
    opacity: 1;
    transform: translateY(0);
}

.form-header-close {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.form-header-close h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0A2342;
}

.form-header-close span {
    font-size: 24px;
    color: #94A3B8;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.form-header-close span:hover {
    color: #EF4444;
}

/* CSS Grid for Add Form */
.flash-add-grid {
    display: grid;
    grid-template-columns: 2fr 1fr auto; /* Select: 2 parts, Price: 1 part, Button: auto */
    gap: 20px;
    align-items: flex-end;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Form Inputs */
.form-input {
    width: 100%;
    padding: 12px 15px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    outline: none;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Replaces standard border */
    transition: all 0.3s ease;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Flash Price Input Focus Specific (Green Glow) */
.flash-price-input:focus {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15), inset 0 0 0 1px #10B981 !important;
}

.form-btn-area .btn-primary {
    padding: 12px 24px;
    height: 44px;
}

/* Flash Sale Table Styles */
.flash-prod-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.f-img-wrap {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Replaces image border */
}

.f-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.f-title {
    color: #1E293B;
    font-size: 14px;
    font-weight: 700;
}

/* Flash Discount Badge */
.flash-badge {
    background: #FEE2E2;
    color: #DC2626;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    display: inline-block;
    box-shadow: inset 0 0 0 1px #FCA5A5; /* Safe inner shadow */
}

/* Pagination Adjustments for Page Numbers */
.page-numbers {
    display: flex;
    gap: 8px;
    align-items: center;
}

.page-link.active {
    background-color: #1756A9 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}

/* ==========================================================================
   Responsive Adjustments for Flash Sale Page
   ========================================================================== */
@media screen and (max-width: 992px) {
    .flash-add-grid {
        grid-template-columns: 1fr 1fr; /* Switch to 2 columns on tablet */
    }
    .form-btn-area {
        grid-column: span 2; /* Button takes full width */
    }
}

@media screen and (max-width: 768px) {
    .flash-add-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    .form-btn-area {
        grid-column: span 1;
    }
}

/* ==========================================================================
   Manage Banners Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Main Card */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
}

/* Grids */
.grid-2-col {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 25px;
}

.card-title {
    margin: 0 0 20px 0;
    color: #0A2342;
    font-size: 18px;
    font-weight: 800;
}

/* Form Styling */
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Inputs */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Soft inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
}
.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* File Input */
.file-input-styled {
    width: 100%;
    color: #475569;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 12px;
    background: #F8FAFC;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    box-sizing: border-box;
}
.file-input-styled::file-selector-button {
    background: #E2E8F0;
    color: #334155;
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    margin-right: 15px;
    transition: background 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.file-input-styled:hover::file-selector-button { background: #CBD5E1; }

/* Apple-Style Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CBD5E1; transition: .3s; border-radius: 34px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-switch .slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider { background-color: #10B981; }
.toggle-switch input:checked + .slider:before { transform: translateX(20px); }

/* Primary Button */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}
.w-100 { width: 100%; }

/* Table Styling */
.table-responsive { overflow-x: auto; }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.admin-table th {
    padding: 15px 20px;
    background: #F8FAFC;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: inset 0 -1px 0 #E2E8F0;
}
.admin-table td {
    padding: 15px 20px;
    vertical-align: middle;
    box-shadow: inset 0 -1px 0 #F1F5F9;
}

/* Badges & Actions */
.badge-status {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
}
.badge-approved { background: #DCFCE7; color: #166534; }
.badge-danger { background: #FEE2E2; color: #991B1B; }

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #F1F5F9;
    color: #475569;
    text-decoration: none;
    transition: 0.2s;
}
.btn-edit:hover { background: #DBEAFE; color: #1D4ED8; }
.btn-delete:hover { background: #FEE2E2; color: #DC2626; }

/* Smart Pagination */
.smart-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.page-btn {
    padding: 8px 16px;
    background: #ffffff;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}
.page-btn:hover:not(.disabled) { background: #E2E8F0; color: #0F172A; }
.page-btn.disabled { opacity: 0.5; cursor: not-allowed; }
.page-current {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    padding: 8px 16px;
    background: #EFF6FF;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #BFDBFE;
}

/* Alerts */
.alert { padding: 16px 20px; margin-bottom: 25px; border-radius: 8px; font-weight: 600; }
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* Responsive Adjustments */
@media screen and (max-width: 992px) {
    .grid-2-col { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Coupon Management System Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* 2-Column Grid Layout for Desktop */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Form takes 1 part, Table takes 2 parts */
    gap: 30px;
    align-items: start;
}

/* Base Card Style */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Soft outer shadow */
}

.card-title {
    color: #0A2342;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 20px;
}

/* ==========================================================================
   Form Styling (Borderless)
   ========================================================================== */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Inputs Box-shadow instead of borders */
.form-input {
    width: 100%;
    padding: 12px 15px;
    background-color: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Safe inner shadow */
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input:focus {
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Button Styling */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}

.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}

.btn-primary.w-100 {
    width: 100%;
}

/* ==========================================================================
   Table & Badges Styling (Borderless)
   ========================================================================== */
.badge-status {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* Soft depth */
}

.badge-approved { background-color: #DCFCE7; color: #16A34A; }
.badge-danger { background-color: #FEE2E2; color: #DC2626; }

/* ==========================================================================
   Responsive Queries
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .grid-2-col {
        grid-template-columns: 1fr; /* Form and Table stack vertically */
    }
}

@media screen and (max-width: 768px) {
    .action-cells {
        flex-direction: column;
        align-items: flex-end;
    }
    .admin-card {
        padding: 15px;
    }
}

/* ==========================================================================
   Product Feed Generator Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* 2-Column Grid Layout for Desktop */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Status box on left, Instructions & Table on right */
    gap: 30px;
    align-items: start;
}

/* Card Styling */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Outer safe shadow */
}

/* Feed Status Box */
.feed-status-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}
.status-active {
    background-color: #DCFCE7; /* Light Green */
    box-shadow: inset 0 0 0 1px #BBF7D0;
}
.status-active .status-icon {
    color: #16A34A;
}
.status-inactive {
    background-color: #FEE2E2; /* Light Red */
    box-shadow: inset 0 0 0 1px #FECACA;
}
.status-inactive .status-icon {
    color: #DC2626;
}

.status-icon {
    background: #ffffff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Circular shadow */
}

/* Feed Statistics Grid */
.feed-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.f-stat {
    background: #F8FAFC;
    padding: 15px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Soft borderless separator */
}
.f-stat span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.f-stat strong {
    font-size: 16px;
    font-weight: 800;
    color: #0A2342;
}

/* Base override for Success/Error Alerts */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* Status Badges in Table */
.badge-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* Soft depth */
}

.badge-approved { background-color: #DCFCE7; color: #16A34A; }
.badge-danger { background-color: #FEE2E2; color: #DC2626; }

/* Image wrap in Table */
.tbl-img-wrap {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tbl-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Responsive Adjustments for Feed Generator
   ========================================================================== */
@media screen and (max-width: 992px) {
    .grid-2-col {
        grid-template-columns: 1fr; /* Form and Table stack vertically */
    }
}
@media screen and (max-width: 480px) {
    .feed-stats-grid {
        grid-template-columns: 1fr; /* Stack stats on small mobile */
    }
}

/* ==========================================================================
   Customer Service Pages Management Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Page Header Management Area */
.page-manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 24px;
}

/* Base Card Style override for Page tables */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Outer safe shadow */
}

/* Base override for Success/Error Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* Status Badges */
.badge-status {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* Soft depth instead of border */
}

.badge-visible { background-color: #DCFCE7; color: #16A34A; }
.badge-disabled { background-color: #FEE2E2; color: #DC2626; }

/* Action Buttons (Edit / Delete) */
.action-cells {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-action {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.btn-edit {
    background: #DBEAFE;
    color: #1D4ED8;
}
.btn-edit:hover {
    background: #1D4ED8;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(29, 78, 216, 0.2);
}

.btn-delete {
    background: #FEE2E2;
    color: #B91C1C;
    border: none;
    cursor: pointer;
}
.btn-delete:hover {
    background: #B91C1C;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(185, 28, 28, 0.2);
}

/* Custom Button overrides */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}

/* ==========================================================================
   Responsive Adjustments for Customer Service Pages
   ========================================================================== */
@media screen and (max-width: 768px) {
    .page-manage-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-manage-header .btn-primary {
        width: 100%;
        justify-content: center;
    }
    .action-cells {
        flex-direction: column;
        align-items: flex-end;
    }
    .btn-action {
        text-align: center;
        width: 100px;
    }
}

/* ==========================================================================
   Sitemap Generator Specific Responsive Tweaks
   ========================================================================== */
@media screen and (max-width: 480px) {
    .sitemap-actions {
        flex-direction: column; /* Stack Generate and Ping buttons on mobile */
    }
}

/* ==========================================================================
   Homepage Layout Manager Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Main Layout Card */
.layout-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium safe shadow */
    overflow: hidden; /* Ensures table corners are rounded */
    margin-bottom: 30px;
}

/* Base override for Success/Error Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* Table Styling */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.layout-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.layout-table th {
    background-color: #F8FAFC;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 18px 20px;
    white-space: nowrap;
    box-shadow: 0 4px 6px -4px rgba(0,0,0,0.05);
}

.layout-table td {
    padding: 16px 20px;
    color: #334155;
    font-size: 14px;
    vertical-align: middle;
    /* Bottom separation line created via background gradient (No Borders) */
    background-image: linear-gradient(to right, #F1F5F9 100%, transparent 0%);
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
    transition: background-color 0.3s ease;
}

/* Active Row Highlighting (Toggled via JS) */
.active-row td {
    background-color: #F0FDF4; /* Very light green indicating it's active */
}

/* Category Badge with Icon */
.cat-name-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #0F172A;
    background: #F1F5F9;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Replaces border */
}
.active-row .cat-name-badge {
    background: #DCFCE7;
    color: #16A34A;
    box-shadow: inset 0 0 0 1px #BBF7D0;
}

/* Custom Select Dropdown */
.layout-select {
    width: 100%;
    min-width: 150px;
    padding: 10px 12px;
    background: #ffffff;
    color: #1E293B;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #CBD5E1; /* Inset border */
    cursor: pointer;
    transition: all 0.3s;
}
.layout-select:focus {
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Small Number Inputs */
.layout-input-sm {
    width: 70px;
    padding: 10px;
    text-align: center;
    background: #ffffff;
    color: #1E293B;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #CBD5E1;
    transition: all 0.3s;
}
.layout-input-sm:focus {
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Premium Apple-Style Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CBD5E1;
    transition: .3s;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider {
    background-color: #10B981; /* Green when active */
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* Sticky Save Button Footer */
.sticky-footer-actions {
    position: sticky;
    bottom: 0;
    background: #F8FAFC;
    padding: 20px 24px;
    display: flex;
    justify-content: flex-end;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.03); /* Top inner shadow */
}

.btn-save-settings {
    background-color: #1756A9;
    color: #ffffff;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-save-settings:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}

/* ==========================================================================
   Responsive Adjustments for Homepage Layout
   ========================================================================== */
@media screen and (max-width: 768px) {
    .layout-table th, 
    .layout-table td {
        padding: 12px 10px; /* Reduced padding for mobile */
    }
    
    .sticky-footer-actions {
        justify-content: center;
        padding: 15px;
    }
    
    .btn-save-settings {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Footer & Global Settings Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* Layout Grid for Settings */
.settings-layout {
    display: grid;
    grid-template-columns: 280px 1fr; /* Left sidebar for tabs, right for form */
    gap: 30px;
    align-items: start;
}

/* Tabs Sidebar */
.settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
    position: sticky;
    top: 25px; /* Sticks to top when scrolling */
}

/* Tab Buttons */
.tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: transparent;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.tab-btn:hover {
    background: #F8FAFC;
    color: #0F172A;
}

.tab-btn.active {
    background: #1756A9; /* Theme Blue */
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}

/* Tab Content Animation */
.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}
.tab-content.active {
    display: block;
}

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

/* Inner Settings Card */
.settings-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05);
    margin-bottom: 25px;
}

.settings-card h3 {
    margin: 0 0 5px 0;
    color: #0A2342;
    font-size: 18px;
    font-weight: 800;
}

.help-text {
    color: #64748B;
    font-size: 13px;
    margin: 0 0 20px 0;
    font-weight: 500;
}

/* 2-Column Form Grid */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Form Inputs */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Clean inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

/* Sticky Save Button Bar */
.sticky-footer-actions {
    position: sticky;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px 24px;
    border-radius: 12px;
    display: flex;
    justify-content: flex-end;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px #E2E8F0;
    z-index: 10;
}

.btn-save-settings {
    background-color: #1756A9;
    color: #ffffff;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}

.btn-save-settings:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}

.btn-save-settings:disabled {
    background-color: #94A3B8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Spinner Animation for AJAX loading */
.fa-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* ==========================================================================
   Responsive Adjustments for Settings Pages
   ========================================================================== */
@media screen and (max-width: 992px) {
    .settings-layout {
        grid-template-columns: 1fr; /* Switch to single column */
    }
    .settings-tabs {
        position: relative;
        top: 0;
        flex-direction: row; /* Horizontal tabs */
        overflow-x: auto;
        white-space: nowrap;
        padding: 15px;
    }
    .tab-btn {
        width: auto;
        flex-shrink: 0;
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    .form-grid-2 {
        grid-template-columns: 1fr; /* Stack form fields */
    }
    .sticky-footer-actions {
        bottom: 0;
        border-radius: 0;
        padding: 15px;
        justify-content: center;
    }
    .btn-save-settings {
        width: 100%;
        justify-content: center;
    }
    .settings-card {
        padding: 20px;
    }
}

/* ==========================================================================
   Customer Search Analytics Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* KPI Grid */
.sa-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.sa-kpi-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium safe shadow */
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease;
}

.sa-kpi-card:hover {
    transform: translateY(-3px);
}

.sa-kpi-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Individual KPI Colors */
.sa-kpi-card.total .sa-kpi-icon { background: #E0E7FF; color: #4F46E5; }
.sa-kpi-card.unique .sa-kpi-icon { background: #DCFCE7; color: #16A34A; }
.sa-kpi-card.trending .sa-kpi-icon { background: #FFEDD5; color: #EA580C; }

.sa-kpi-info h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
}

.sa-kpi-info p {
    margin: 0 0 4px 0;
    font-size: 13px;
    color: #64748B;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Filter Card */
.sa-filter-card {
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05);
    margin-bottom: 25px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.filter-form {
    margin: 0;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-group label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    white-space: nowrap; /* লেখাটি যেন নিচে ভেঙে না যায় তার জন্য */
}

/* Borderless Select Input */
.filter-input {
    padding: 10px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Soft inset shadow */
    cursor: pointer;
    transition: all 0.3s ease;
    width: auto !important; /* গ্লোবাল 100% width ওভাররাইড করার জন্য */
    min-width: 250px;
}

.filter-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Borderless Select Input */
.filter-input {
    padding: 10px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Soft inset shadow */
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Table Badge & Buttons */
.sa-count-badge {
    background: #F0F9FF;
    color: #0369A1;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: inset 0 0 0 1px #BAE6FD;
}

.btn-view {
    background: #F1F5F9;
    color: #475569;
}
.btn-view:hover {
    background: #1E293B;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(30, 41, 59, 0.2);
}

/* Smart Pagination Styles */
.sa-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 15px;
}

.sa-page-info {
    margin: 0;
    font-size: 14px;
    color: #64748B;
    font-weight: 500;
}
.sa-page-info strong {
    color: #0F172A;
    font-weight: 800;
}

.sa-page-links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sa-btn-page {
    padding: 8px 14px;
    background: #ffffff;
    color: #475569;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px #E2E8F0, 0 2px 4px rgba(0,0,0,0.02); /* Soft shadow */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sa-btn-page:hover {
    background: #F8FAFC;
    color: #0F172A;
}

.sa-btn-page.active {
    background: #1756A9;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}

/* ==========================================================================
   Responsive Queries for Search Analytics
   ========================================================================== */
@media screen and (max-width: 768px) {
    .sa-filter-card {
        justify-content: center;
    }
    .filter-group {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .filter-input {
        width: 100%;
    }
    .sa-pagination {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .sa-page-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ==========================================================================
   Telegram Settings System Styling (Premium Blue Theme - No Borders)
   ========================================================================== */

/* 2-Column Grid Layout for Desktop */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

/* Card Styling */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium safe shadow */
}

/* Form Group overrides */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Form Inputs */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Soft inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}
.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Base override for Success/Error Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* Custom Button overrides */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

/* Premium Apple-Style Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CBD5E1;
    transition: .3s;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider {
    background-color: #10B981; /* Green when active */
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* Toast Notification Styling */
.toast-notification {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 9999;
    right: 30px;
    bottom: 30px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.toast-notification.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Spinner Animation for AJAX loading */
.fa-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* ==========================================================================
   Responsive Adjustments for Telegram Settings
   ========================================================================== */
@media screen and (max-width: 992px) {
    .grid-2-col {
        grid-template-columns: 1fr; /* Stack left and right sides vertically */
    }
}

@media screen and (max-width: 480px) {
    .tg-actions {
        flex-direction: column; /* Stack action buttons on mobile */
    }
    .btn-primary {
        width: 100%;
    }
    .toast-notification {
        left: 20px;
        right: 20px;
        bottom: 20px;
        min-width: unset;
    }
}

/* ==========================================================================
   Payment Gateways Management Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Grid Layout for Desktop */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Left Form, Right List */
    gap: 30px;
    align-items: start;
}

/* 2-Column Form Group */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Card General Styling */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium safe shadow */
}

/* Form Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Inputs with Inset Shadow */
.form-input {
    width: 100%;
    padding: 12px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Soft inset shadow replaces border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

/* Base override for Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* Buttons */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}
.btn-primary.w-100 {
    width: 100%;
}

/* Action Buttons (Edit / Delete inside cards) */
.btn-action {
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-edit {
    background: #DBEAFE;
    color: #1D4ED8;
}
.btn-edit:hover {
    background: #1D4ED8;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(29, 78, 216, 0.2);
}

.btn-delete {
    background: #FEE2E2;
    color: #B91C1C;
}
.btn-delete:hover {
    background: #B91C1C;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(185, 28, 28, 0.2);
}

/* Premium Apple-Style Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CBD5E1;
    transition: .3s;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider {
    background-color: #10B981; /* Green when active */
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* Inactive Card Styling */
.pay-method-card.inactive {
    opacity: 0.6;
    filter: grayscale(100%);
}
.pay-method-card.inactive:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* Hover effect for pagination links */
.page-link:hover {
    background: #F8FAFC !important;
    color: #0F172A !important;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 992px) {
    .grid-2-col {
        grid-template-columns: 1fr; /* Stack Left and Right sides */
    }
}

@media screen and (max-width: 768px) {
    .form-grid-2 {
        grid-template-columns: 1fr; /* Stack inputs vertically */
    }
    .pay-mc-header {
        flex-direction: column;
        gap: 15px;
    }
    .pay-mc-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   Global System Settings Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Layout Grid for Settings */
.settings-layout {
    display: grid;
    grid-template-columns: 280px 1fr; /* Left sidebar for tabs, right for form */
    gap: 30px;
    align-items: start;
}

/* Tabs Sidebar */
.settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium safe shadow */
    position: sticky;
    top: 25px; /* Sticks to top when scrolling */
}

/* Tab Buttons */
.tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: transparent;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.tab-btn:hover {
    background: #F8FAFC;
    color: #0F172A;
}

.tab-btn.active {
    background: #1756A9; /* Theme Blue */
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}

/* Tab Content Animation */
.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}
.tab-content.active {
    display: block;
}

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

/* Inner Settings Card */
.settings-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05);
    margin-bottom: 25px;
}

.settings-card h3 {
    margin: 0 0 5px 0;
    color: #0A2342;
    font-size: 18px;
    font-weight: 800;
}

.help-text {
    color: #64748B;
    font-size: 13px;
    margin: 0 0 20px 0;
    font-weight: 500;
}

/* 2-Column Form Grid */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Form Inputs */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Clean inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

/* Image Upload Box styling (FIXED) */
.img-upload-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #F8FAFC;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Prevents overflow */
}
.preview-img {
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 140px; /* Restricts the logo width */
    max-height: 60px; /* Restricts the logo height */
    width: auto;
    height: auto;
    object-fit: contain; /* Keeps aspect ratio perfect */
    flex-shrink: 0; /* Prevents flexbox from squeezing it */
    background: #ffffff;
    padding: 4px;
}

/* Custom File Input Styling */
.file-input-styled {
    display: block;
    width: 100%;
    color: #475569;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-input-styled::file-selector-button {
    background: #E2E8F0;
    color: #334155;
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    margin-right: 15px;
    transition: background 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.file-input-styled:hover::file-selector-button {
    background: #CBD5E1;
}

/* Sticky Save Button Bar */
.sticky-footer-actions {
    position: sticky;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px 24px;
    border-radius: 12px;
    display: flex;
    justify-content: flex-end;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px #E2E8F0;
    z-index: 10;
}

.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}
.btn-primary:disabled {
    background-color: #94A3B8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Utilities */
.mt-20 { margin-top: 20px; }

/* Base override for Success/Error Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* ==========================================================================
   Responsive Adjustments for Settings Pages
   ========================================================================== */
@media screen and (max-width: 992px) {
    .settings-layout {
        grid-template-columns: 1fr; /* Switch to single column */
    }
    .settings-tabs {
        position: relative;
        top: 0;
        flex-direction: row; /* Horizontal tabs */
        overflow-x: auto;
        white-space: nowrap;
        padding: 15px;
    }
    .tab-btn {
        width: auto;
        flex-shrink: 0;
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    .form-grid-2 {
        grid-template-columns: 1fr; /* Stack form fields vertically */
    }
    .img-upload-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .preview-img {
        max-width: 100%; /* Allows a bit more room on mobile */
    }
    .sticky-footer-actions {
        bottom: 0;
        border-radius: 0;
        padding: 15px;
        justify-content: center;
    }
    .sticky-footer-actions .btn-primary {
        width: 100%;
        justify-content: center;
    }
    .settings-card {
        padding: 20px;
    }
}

/* ==========================================================================
   Add Product Page Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Card Styling */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Soft premium shadow */
}
.mb-25 { margin-bottom: 25px; }

.card-title {
    margin: 0 0 20px 0;
    color: #0A2342;
    font-size: 18px;
    font-weight: 800;
}

/* Grids */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Inputs */
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; 
    font-size: 13px; 
    font-weight: 700;
    color: #475569; 
    margin-bottom: 8px; 
    text-transform: uppercase;
}

.form-input {
    width: 100%; 
    padding: 14px 16px; 
    background: #F8FAFC; 
    color: #1E293B;
    font-size: 15px; 
    font-weight: 600; 
    border-radius: 8px;
    border: none !important; 
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Soft inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box; 
    font-family: inherit;
}
.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}
textarea.form-input { 
    resize: vertical; 
    min-height: 100px; 
}

/* File Input */
.file-input-styled {
    width: 100%; 
    color: #475569; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 600;
    padding: 12px; 
    background: #F8FAFC; 
    border-radius: 8px; 
    box-shadow: inset 0 0 0 1px #E2E8F0;
    box-sizing: border-box;
}
.file-input-styled::file-selector-button {
    background: #E2E8F0; 
    color: #334155; 
    padding: 8px 14px; 
    border-radius: 6px;
    border: none; 
    font-weight: 700; 
    font-size: 13px; 
    cursor: pointer; 
    margin-right: 15px;
    transition: background 0.2s; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.file-input-styled:hover::file-selector-button { 
    background: #CBD5E1; 
}

/* New Arrival Custom Toggle */
.custom-toggle-wrapper {
    display: flex; 
    align-items: center; 
    gap: 12px; 
    cursor: pointer;
    background: #F8FAFC; 
    padding: 15px 20px; 
    border-radius: 8px; 
    box-shadow: inset 0 0 0 1px #E2E8F0;
    margin: 0; /* Reset label margin */
}
.custom-toggle-wrapper input { display: none; }
.custom-toggle-slider {
    position: relative; 
    width: 44px; 
    height: 24px; 
    background-color: #CBD5E1;
    border-radius: 34px; 
    transition: .3s; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); 
    flex-shrink: 0;
}
.custom-toggle-slider:before {
    position: absolute; 
    content: ""; 
    height: 18px; 
    width: 18px; 
    left: 3px; 
    bottom: 3px;
    background-color: white; 
    transition: .3s; 
    border-radius: 50%; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.custom-toggle-wrapper input:checked + .custom-toggle-slider { background-color: #10B981; }
.custom-toggle-wrapper input:checked + .custom-toggle-slider:before { transform: translateX(20px); }
.custom-toggle-label { font-size: 14px; color: #1E293B; font-weight: 500; text-transform: none !important; }

/* Variations Grid */
.variation-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 20px; 
}
.variation-group { 
    background: #F8FAFC; 
    padding: 15px; 
    border-radius: 8px; 
    box-shadow: inset 0 0 0 1px #E2E8F0; 
}
.variation-heading { 
    margin: 0 0 12px 0; 
    font-size: 14px; 
    color: #475569; 
    text-transform: uppercase; 
    border-bottom: 1px solid #E2E8F0; 
    padding-bottom: 8px; 
    font-weight: 800;
}
.variation-checkbox-wrapper { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 10px; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 600; 
    color: #1E293B; 
}
.var-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1756A9;
}
.color-dot { 
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
    display: inline-block; 
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1); 
}

/* Primary Button */
.btn-primary {
    background-color: #1756A9; 
    color: #ffffff; 
    padding: 14px 28px; 
    font-size: 16px; 
    font-weight: 700;
    border-radius: 8px; 
    cursor: pointer; 
    border: none; 
    outline: none; 
    display: inline-flex;
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover { 
    background-color: #0A2342; 
    transform: translateY(-2px); 
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25); 
}

.sticky-footer-actions {
    position: sticky;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px #E2E8F0;
    z-index: 10;
    margin-bottom: 25px;
}
.btn-primary.w-100 { width: 100%; }

/* Summernote Borderless Fix */
.note-editor.note-frame { 
    border: none !important; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: inset 0 0 0 1px #E2E8F0; 
}
.note-toolbar { 
    background: #F8FAFC !important; 
    border-bottom: 1px solid #E2E8F0 !important; 
}

/* Base Alert */
.alert { padding: 15px; border-radius: 8px; font-weight: 600; margin-bottom: 20px; }
.alert-success { background: #DCFCE7; color: #16A34A; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #DC2626; box-shadow: inset 0 0 0 1px #FECACA; }

/* Responsive Grid */
@media screen and (max-width: 992px) {
    .form-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 768px) {
    .form-grid-3 { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .sticky-footer-actions { bottom: 0; border-radius: 0; }
}

/* ==========================================================================
   Edit Banner Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Main Card */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Safe premium shadow */
}

/* 2-Column Form Grid */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Form Inputs */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Soft inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

/* Custom File Input Styling */
.file-input-styled {
    display: block;
    width: 100%;
    color: #475569;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 12px;
    background: #F8FAFC;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    box-sizing: border-box;
}

.file-input-styled::file-selector-button {
    background: #E2E8F0;
    color: #334155;
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    margin-right: 15px;
    transition: background 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.file-input-styled:hover::file-selector-button {
    background: #CBD5E1;
}

/* Banner Image Preview Box */
.banner-preview-box {
    margin-bottom: 25px;
    background: #F8FAFC;
    padding: 15px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.banner-preview-box img {
    max-height: 180px;
    max-width: 100%;
    border-radius: 6px;
    object-fit: contain;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Primary Button */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}

/* Alerts */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 25px;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* Premium Apple-Style Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CBD5E1;
    transition: .3s;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider {
    background-color: #10B981; /* Green when active */
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 768px) {
    .form-grid-2 {
        grid-template-columns: 1fr; /* Stack form fields vertically */
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .admin-card {
        padding: 20px;
    }
}

/* ==========================================================================
   Edit Category Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Main Card */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
}

/* Form Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Inputs with Inset Shadow */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Clean inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none; /* Helps with select dropdown styling across browsers */
}

select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Base override for Success/Error Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* Primary Button */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .admin-card {
        padding: 20px;
    }
}

/* ==========================================================================
   Edit Coupon Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Main Card */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
}

/* Form Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Inputs with Inset Shadow */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Clean inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Apple-Style Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CBD5E1;
    transition: .3s;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider {
    background-color: #10B981; /* Green when active */
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* Primary Button */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}
.w-100 {
    width: 100%;
}

/* Base override for Success/Error Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .admin-card {
        padding: 20px;
    }
}

/* ==========================================================================
   Edit Customer Profile Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Main Card */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
}

/* Badges for Customer Status */
.cust-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-registered {
    background: #DCFCE7;
    color: #16A34A;
    box-shadow: inset 0 0 0 1px #BBF7D0;
}
.badge-guest {
    background: #FFEDD5;
    color: #EA580C;
    box-shadow: inset 0 0 0 1px #FED7AA;
}

/* Form Styling */
.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Inputs with Inset Shadow */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Clean inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Disabled Input Specifics */
.input-disabled {
    background: #F1F5F9 !important;
    color: #94A3B8 !important;
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px #E2E8F0 !important;
}

/* Password Reset Box Area */
.password-reset-box {
    margin-bottom: 25px;
    padding: 20px;
    background: #F8FAFC;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}

.pw-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin-bottom: 12px !important;
    text-transform: none !important;
}
.pw-label svg {
    color: #EF4444;
}

.bg-white {
    background: #ffffff !important;
}

.pw-help {
    color: #64748B;
    font-size: 12px;
    font-weight: 500;
    display: block;
    margin-top: 8px;
}

/* Base override for Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-danger { background: #FEE2E2; color: #DC2626; box-shadow: inset 0 0 0 1px #FECACA; }

/* Primary Button */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}
.w-100 {
    width: 100%;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .admin-card {
        padding: 20px;
    }
    .edit-cust-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
}

/* ==========================================================================
   Edit Flash Sale Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Main Card */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
}

/* Product Preview Header Box */
.product-preview-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 15px 20px;
    background: #F8FAFC;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}

.product-preview-box img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pp-title {
    color: #0F172A;
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 800;
}

.pp-badge {
    background: #E2E8F0;
    color: #475569;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

/* Form Grids */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* Form Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Inputs with Inset Shadow */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Clean inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
}

/* Special styling for Selects */
select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Readonly Inputs */
.input-readonly {
    background: #F1F5F9 !important;
    color: #64748B !important;
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px #E2E8F0 !important;
}

/* Special Flash Price Input */
.flash-price-input {
    background: #ECFDF5 !important;
    color: #047857 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    box-shadow: inset 0 0 0 2px #34D399 !important;
    padding: 16px !important;
}
.flash-price-input:focus {
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), inset 0 0 0 2px #10B981 !important;
}

/* Profit Analyzer Box */
.profit-analyzer-box {
    background: #F8FAFC;
    padding: 20px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.analyzer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Schedule Area */
.schedule-box {
    background: #F8FAFC;
    padding: 20px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}

.status-select {
    color: #1756A9 !important;
    font-weight: 800 !important;
}

/* Primary Button */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}
.w-100 { width: 100%; }

/* Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 768px) {
    .form-grid-2, .form-grid-3 {
        grid-template-columns: 1fr; /* Stack inputs vertically */
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .admin-card {
        padding: 20px;
    }
    .product-preview-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* ==========================================================================
   Edit Order Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Layout Grids */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Card Styling */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
}

.card-header-flex {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #E2E8F0;
}

.card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Form Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Inputs with Inset Shadow */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Clean inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
}

/* Special styling for Selects */
select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

/* Highlight specific inputs */
.highlight-input {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    box-shadow: inset 0 0 0 1px #BFDBFE !important;
}
.highlight-input:focus {
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), inset 0 0 0 1px #3B82F6 !important;
}

.status-select {
    font-weight: 800 !important;
    background-color: #F0FDF4 !important;
    color: #166534 !important;
    box-shadow: inset 0 0 0 1px #BBF7D0 !important;
}

/* Order Summary Box */
.order-summary-box {
    background: #F8FAFC;
    padding: 20px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    margin-top: 10px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.summary-label {
    font-weight: 700;
    color: #64748B;
    font-size: 14px;
}

.summary-value {
    font-weight: 700;
    color: #1E293B;
    font-size: 15px;
}

.grand-total-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #CBD5E1;
}

.grand-total-row .summary-label {
    color: #0F172A;
    font-size: 16px;
}

.grand-total {
    color: #1756A9;
    font-size: 22px;
    font-weight: 800;
}

.summary-note {
    font-size: 12px;
    color: #94A3B8;
    margin-top: 8px;
    text-align: right;
    font-weight: 500;
}

/* Sticky Action Button */
.sticky-footer-actions {
    position: sticky;
    bottom: 20px;
    margin-top: 25px;
    z-index: 10;
}

.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}

.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}

.w-100 {
    width: 100%;
}

/* Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 992px) {
    .grid-2-col {
        grid-template-columns: 1fr; /* Stack columns vertically on tablet/mobile */
    }
}

@media screen and (max-width: 768px) {
    .form-grid-2, .form-grid-3 {
        grid-template-columns: 1fr; /* Stack inputs vertically */
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .admin-card {
        padding: 20px;
    }
    .sticky-footer-actions {
        bottom: 0;
        padding-bottom: 10px;
    }
}

/* ==========================================================================
   Edit Product Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Main Card Styling */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
}
.mb-25 { margin-bottom: 25px; }

.card-title {
    margin: 0 0 20px 0;
    color: #0A2342;
    font-size: 18px;
    font-weight: 800;
}

/* Grids */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Form Styling */
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Inputs */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Soft inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
}
select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}
.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}
textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

/* Existing Image Delete Grid */
.edit-img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.edit-img-card {
    background: #F8FAFC;
    padding: 12px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.edit-img-card .img-wrapper {
    width: 100%;
    height: 110px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-img-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.delete-img-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px !important;
    color: #DC2626 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    cursor: pointer;
    background: #FEE2E2;
    padding: 8px;
    border-radius: 6px;
    margin: 0 !important;
    transition: background 0.2s;
}

.delete-img-label:hover {
    background: #FECACA;
}

.delete-img-label input {
    accent-color: #DC2626;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* File Input */
.file-input-styled {
    width: 100%;
    color: #475569;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 12px;
    background: #F8FAFC;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    box-sizing: border-box;
}
.file-input-styled::file-selector-button {
    background: #E2E8F0;
    color: #334155;
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    margin-right: 15px;
    transition: background 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.file-input-styled:hover::file-selector-button {
    background: #CBD5E1;
}

/* Custom Toggle (New Arrival) */
.custom-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    background: #F8FAFC;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    margin: 0;
}
.custom-toggle-wrapper input { display: none; }
.custom-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #CBD5E1;
    border-radius: 34px;
    transition: .3s;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.custom-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.custom-toggle-wrapper input:checked + .custom-toggle-slider { background-color: #10B981; }
.custom-toggle-wrapper input:checked + .custom-toggle-slider:before { transform: translateX(20px); }
.custom-toggle-label { font-size: 14px; color: #1E293B; font-weight: 500; text-transform: none !important; }

/* Variations Grid */
.variation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.variation-group {
    background: #F8FAFC;
    padding: 15px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}
.variation-heading {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #475569;
    text-transform: uppercase;
    border-bottom: 1px dashed #CBD5E1;
    padding-bottom: 8px;
    font-weight: 800;
}
.variation-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
}
.var-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1756A9;
}
.color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* Primary Button & Sticky Footer */
.sticky-footer-actions {
    position: sticky;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px #E2E8F0;
    z-index: 10;
    margin-bottom: 25px;
}

.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}
.btn-primary.w-100 { width: 100%; }

/* Summernote Borderless Fix */
.note-editor.note-frame {
    border: none !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}
.note-toolbar {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

/* Base Alert */
.alert { padding: 15px; border-radius: 8px; font-weight: 600; margin-bottom: 20px; }
.alert-success { background: #DCFCE7; color: #16A34A; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #DC2626; box-shadow: inset 0 0 0 1px #FECACA; }

/* Responsive Grid */
@media screen and (max-width: 992px) {
    .form-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 768px) {
    .form-grid-3 { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .sticky-footer-actions { bottom: 0; border-radius: 0; }
}

/* ==========================================================================
   Edit Variation Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Main Card */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
}

/* Form Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Inputs with Inset Shadow */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Clean inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
}

/* Special styling for Selects */
select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Smart Color Picker */
.smart-color-picker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-picker-box {
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}
.color-picker-box::-webkit-color-swatch-wrapper {
    padding: 0;
}
.color-picker-box::-webkit-color-swatch {
    border: none;
    border-radius: 8px;
}

.hex-input {
    text-transform: uppercase;
    font-family: monospace;
    letter-spacing: 1px;
}

/* Apple-Style Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CBD5E1;
    transition: .3s;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider {
    background-color: #10B981; /* Green when active */
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* Primary Button */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}
.w-100 {
    width: 100%;
}

/* Base override for Success/Error Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .admin-card {
        padding: 20px;
    }
}

/* ==========================================================================
   Add/Edit Custom Page Styling (Premium Theme - No Borders)
   ========================================================================== */

/* Main Card */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
}

/* Grids */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Form Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Borderless Inputs with Inset Shadow */
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0; /* Clean inset shadow replacing border */
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
}

/* Special styling for Selects */
select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.form-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9;
}

/* Readonly Inputs */
.input-readonly {
    background: #F1F5F9 !important;
    color: #64748B !important;
}

/* Summernote Borderless Fix */
.note-editor.note-frame {
    border: none !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}
.note-toolbar {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
.note-editing-area {
    background: #ffffff !important;
}

/* Sticky Action Button */
.sticky-footer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover {
    background-color: #0A2342;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25);
}

/* Base override for Alerts */
.alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-weight: 600;
}
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 768px) {
    .form-grid-2 {
        grid-template-columns: 1fr; /* Stack columns vertically */
    }
    .form-group[style*="max-width: 300px"] {
        max-width: 100% !important; /* Make select full width on mobile */
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .sticky-footer-actions {
        justify-content: center;
    }
    .btn-primary {
        width: 100%;
    }
    .admin-card {
        padding: 20px;
    }
}

/* ==========================================================================
   Order Invoice & Details Styling (Accurate PDF Generation)
   ========================================================================== */

/* Main Cards */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05);
}

/* Invoice Header */
.invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.invoice-brand h2 {
    font-size: 26px;
    font-weight: 900;
    color: #0F172A;
    margin: 0 0 5px 0;
    letter-spacing: -0.5px;
}
.invoice-brand h2 span { color: #1756A9; }
.invoice-brand p {
    margin: 0;
    color: #64748B;
    font-size: 13px;
    font-weight: 500;
}

.invoice-meta { text-align: right; }
.invoice-meta h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 800;
    color: #1E293B;
    letter-spacing: 2px;
}
.invoice-meta p {
    margin: 4px 0;
    color: #475569;
    font-size: 14px;
}
.status-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.status-pending { background: #FEF08A; color: #166534; }
.status-processing { background: #DBEAFE; color: #1E40AF; }
.status-shipped { background: #E0E7FF; color: #3730A3; }
.status-delivered { background: #DCFCE7; color: #166534; }
.status-cancelled { background: #FEE2E2; color: #991B1B; }
.status-returned { background: #F3F4F6; color: #475569; }

/* Invoice Addresses Grid */
.invoice-addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

/* FIX APPLIED: Replaced inset shadows with solid borders for perfect PDF rendering */
.address-box {
    background: #F8FAFC;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #E2E8F0; 
}
.address-box h4 {
    margin: 0 0 12px 0;
    color: #0F172A;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 800;
}
.address-box p {
    margin: 6px 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}
.address-box .cust-name { font-weight: 700; color: #1E293B; font-size: 16px; }
.highlight-method { color: #1756A9; font-weight: 800; }
.address-text { margin-top: 10px !important; }

/* TrxID Breakdown Box */
.trx-breakdown {
    margin-top: 15px;
    padding: 12px;
    background: #EFF6FF;
    border-radius: 8px;
    border: 1px solid #BFDBFE; /* Fixed for PDF */
}
.trx-breakdown h5 {
    margin: 0 0 8px 0;
    color: #1E40AF;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
}
.trx-breakdown p { margin: 4px 0; font-size: 13px; color: #3B82F6; }
.trx-breakdown span { font-family: monospace; font-weight: 700; color: #1E3A8A; font-size: 14px; }

/* Invoice Table */
.invoice-table-wrapper { overflow-x: auto; margin-bottom: 30px; }
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.invoice-table th {
    padding: 14px 16px;
    background: #F1F5F9;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 2px solid #E2E8F0;
}
.invoice-table td {
    padding: 16px;
    color: #1E293B;
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid #E2E8F0; /* Fixed for PDF */
}

.item-desc-flex { display: flex; align-items: center; gap: 12px; }
.item-desc-flex img {
    width: 45px;
    height: 45px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #E2E8F0;
}
.item-info strong { display: block; margin-bottom: 4px; color: #0F172A; }
.item-variations { display: flex; flex-wrap: wrap; gap: 6px; }
.var-badge {
    background: #F1F5F9;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #475569;
    font-weight: 500;
}

/* Invoice Summary */
.invoice-summary-wrapper {
    display: flex;
    justify-content: flex-end;
}
.invoice-summary {
    width: 320px;
    background: #F8FAFC;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #E2E8F0; /* Fixed for PDF */
}
.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    color: #475569;
    font-weight: 600;
}
.text-danger { color: #DC2626 !important; }
.summary-row.grand-total {
    margin-top: 15px;
    margin-bottom: 0;
    padding-top: 15px;
    border-top: 1px dashed #CBD5E1; /* Fixed for PDF */
    color: #1756A9;
    font-size: 18px;
    font-weight: 800;
}

/* Status Update Form */
.status-update-form .status-flex {
    display: flex;
    gap: 15px;
}
.form-input {
    width: 100%;
    padding: 12px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
}
select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}
.form-input:focus { background: #ffffff; box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9; }

.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
    white-space: nowrap;
}
.btn-primary:hover { background-color: #0A2342; transform: translateY(-2px); box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25); }

/* Base override for Alerts */
.alert { padding: 16px 20px; margin-bottom: 25px; border-radius: 8px; font-weight: 600; }
.alert-success { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px #BBF7D0; }
.alert-danger { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px #FECACA; }

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 768px) {
    .invoice-header { flex-direction: column; gap: 20px; text-align: left; }
    .invoice-meta { text-align: left; }
    .invoice-addresses { grid-template-columns: 1fr; }
    .invoice-summary-wrapper { justify-content: flex-start; }
    .invoice-summary { width: 100%; }
    .status-update-form .status-flex { flex-direction: column; }
    .page-header { flex-direction: column; align-items: flex-start !important; gap: 15px; }
}

/* ==========================================================================
   RMA Management Styling (Strictly Borderless Premium UI)
   ========================================================================== */

/* Main Card */
.admin-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05); /* Premium soft shadow */
}

/* RMA Dashboard Stats - 100% BORDERLESS */
.rma-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.rma-stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(10, 35, 66, 0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Using distinct typography colors instead of borders */
.rma-stat-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-pending .rma-stat-title { color: #B45309; }   /* Orange-ish for Pending */
.stat-approved .rma-stat-title { color: #1D4ED8; }  /* Blue for Approved */
.stat-refunded .rma-stat-title { color: #15803D; }  /* Green for Refunded */
.stat-total .rma-stat-title { color: #4338CA; }     /* Indigo for Total */

.rma-stat-value {
    color: #0F172A;
    font-size: 32px;
    font-weight: 900;
}

/* Table Wrapper */
.rma-table-wrapper {
    overflow-x: auto;
}
.rma-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.rma-table th {
    padding: 14px 16px;
    background: #F8FAFC;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: inset 0 -1px 0 #E2E8F0;
}
.rma-table th:first-child { border-radius: 8px 0 0 0; }
.rma-table th:last-child { border-radius: 0 8px 0 0; }
.rma-table td {
    padding: 16px;
    vertical-align: middle;
    box-shadow: inset 0 -1px 0 #F1F5F9;
}

/* Links & Badges */
.badge-rma {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
}
.badge-pending { background: #FEF3C7; color: #B45309; }
.badge-approved { background: #DBEAFE; color: #1D4ED8; }
.badge-refunded { background: #DCFCE7; color: #15803D; }
.badge-rejected { background: #FEE2E2; color: #B91C1C; }

/* Action Button */
.btn-rma-action {
    background: #F1F5F9;
    color: #0F172A;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}
.btn-rma-action:hover {
    background: #1756A9;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}

/* Smart Pagination (For Millions of Data safely) */
.smart-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding-top: 20px;
}
.page-btn {
    padding: 8px 16px;
    background: #F8FAFC;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}
.page-btn:hover:not(.disabled) {
    background: #E2E8F0;
    color: #0F172A;
}
.page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.page-current {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    padding: 8px 16px;
    background: #EFF6FF;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #BFDBFE;
}

/* RMA Modal Styling (Premium Blur UI) */
.rma-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.rma-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.rma-modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: all 0.3s ease;
    margin: 20px;
    max-height: 90vh;
    overflow-y: auto;
}
.rma-modal-overlay.active .rma-modal-content {
    transform: scale(1);
}

.rma-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.rma-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
}
.rma-close-btn {
    background: #F1F5F9;
    color: #64748B;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    transition: 0.2s;
}
.rma-close-btn:hover { background: #FEE2E2; color: #DC2626; }

.rma-detail-box {
    background: #F8FAFC;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}

/* Modal Form Inputs */
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px #E2E8F0;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
}
select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}
.form-input:focus { background: #ffffff; box-shadow: 0 0 0 4px rgba(23, 86, 169, 0.15), inset 0 0 0 1px #1756A9; }
textarea.form-input { resize: vertical; min-height: 80px; }

/* Restock Checkbox Wrapper */
.rma-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F8FAFC;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}

/* Apple-Style Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #CBD5E1; transition: .3s; border-radius: 34px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-switch .slider:before {
    position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
    background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider { background-color: #10B981; }
.toggle-switch input:checked + .slider:before { transform: translateX(18px); }

/* Primary Button */
.btn-primary {
    background-color: #1756A9;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(23, 86, 169, 0.2);
}
.btn-primary:hover { background-color: #0A2342; transform: translateY(-2px); box-shadow: 0 8px 15px rgba(10, 35, 66, 0.25); }
.w-100 { width: 100%; }

/* Responsive */
@media screen and (max-width: 768px) {
    .rma-dashboard { grid-template-columns: 1fr; }
}

        /* Modern Pro-Level CSS for Cache Management specific to this page */
        .cache-management-wrapper {
            max-width: 800px;
            margin: 0 auto;
        }

        .cache-card {
            background: #ffffff;
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
            text-align: center;
            border: 1px solid #f1f5f9;
        }

        .cache-icon-wrapper {
            width: 80px;
            height: 80px;
            background: #eff6ff;
            color: #3b82f6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px auto;
            box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.1);
        }

        .cache-card h2 {
            font-size: 24px;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 10px;
            letter-spacing: -0.5px;
        }

        .cache-card p {
            color: #64748b;
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 30px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .cache-stats-row {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 35px;
        }

        .cache-stat-box {
            background: #f8fafc;
            padding: 15px 25px;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            min-width: 140px;
        }

        .cache-stat-box h4 {
            font-size: 12px;
            text-transform: uppercase;
            color: #64748b;
            margin: 0 0 5px 0;
            letter-spacing: 0.5px;
        }

        .cache-stat-box strong {
            font-size: 22px;
            color: #0f172a;
            font-weight: 800;
        }

        .btn-clear-cache {
            background: #ef4444;
            color: #ffffff;
            border: none;
            padding: 14px 35px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25);
        }

        .btn-clear-cache:hover {
            background: #dc2626;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
        }

        .btn-clear-cache:disabled {
            background: #94a3b8;
            box-shadow: none;
            cursor: not-allowed;
            transform: none;
        }

        /* Alert Styling overrides */
        .system-alert {
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 25px;
            font-weight: 600;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .system-alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
        .system-alert-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
        .system-alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

        @media (max-width: 576px) {
            .cache-card {
                padding: 25px 15px;
            }
            .cache-stats-row {
                flex-direction: column;
                gap: 10px;
            }
        }