:root {
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-bg: #E8F5E9;
    --accent-color: #FF9800;
    --error-color: #EF5350;
    --text-dark: #1A1A1A;
    --text-medium: #4A4A4A;
    --text-light: #757575;
    --bg-body: #F2F4F8;
    --white: #FFFFFF;
    --border-radius: 16px;
    --spacing-unit: 16px;
    --font-family: 'Inter', sans-serif;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --nav-height: 64px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-body);
    color: var(--text-dark);
    line-height: 1.5;
    font-size: 15px;
    padding-bottom: calc(var(--nav-height) + 20px);
}

/* Typography */
h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-dark);
}

h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--spacing-unit);
    color: var(--text-dark);
}

h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

p {
    margin-bottom: 8px;
    color: var(--text-medium);
    font-size: 14px;
}

/* Layout */
.container {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    padding: var(--spacing-unit);
    position: relative;
}

/* Responsive: tablet and desktop breakpoints */
@media (min-width: 768px) {
    :root { --border-radius: 12px; }
    .container { max-width: 720px; }

    /* Make controls in update rates header more spaced */
    .rates-header { margin-top: 42px; }

    /* Product groups: two-column grid on tablet */
    .product-group-card { display: block; }
    .product-group-variants { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

    /* Larger FAB placement on larger screens */
    .floating-add-btn { bottom: 46px; }

    /* Keep nav anchored to the bottom, but present as a centered pill on larger screens
       This keeps the mobile-app feeling while looking tidy on wider viewports */
    .bottom-nav {
        bottom: 12px;
        top: auto;
        left: 0;
        right: 0;
        margin: 0 auto; /* center by margin auto when width is constrained */
        width: calc(100% - 48px);
        max-width: 720px;
        height: auto;
        padding: 8px 12px;
        box-shadow: 0 10px 28px rgba(0,0,0,0.12);
        border-radius: 28px;
        backdrop-filter: blur(6px);
    }

    /* Keep the nav-item layout mobile-first (icon above label) so the interface feels like an app */
    .nav-item {
        flex-direction: column;
        gap: 4px;
        height: 56px;
        padding: 6px 10px;
        width: auto;
        border-radius: 12px;
    }

    .nav-item .nav-icon { font-size: 20px; }
}

@media (min-width: 1024px) {
    .container { max-width: 980px; }

    /* Product grid: 3 columns on desktop where appropriate */
    .product-group-variants { grid-template-columns: repeat(3, 1fr); gap: 18px; }

    /* Nav becomes less prominent on desktop (still visible) */
    .bottom-nav { max-width: 980px; margin: 0 auto; border-radius: 12px; }

    /* no top padding required — nav remains bottom aligned for a mobile-app feel */

    /* Buttons: don't force full width on larger screens */
    .btn { width: auto; padding: 10px 14px; }
    .btn-primary { padding: 10px 14px; }

    /* Share / rate previews: use multi-column where appropriate */
    .rc-table { width: 100%; }
}

/* Components */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
    text-decoration: none;
    gap: 8px;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.2);
}

.btn-primary:hover {
    background-color: #1B5E20;
    box-shadow: 0 6px 14px rgba(46, 125, 50, 0.3);
}

.btn-secondary {
    background-color: var(--white);
    border: 1px solid #E0E0E0;
    color: var(--text-dark);
}

.btn-secondary:hover {
    background-color: #F5F5F5;
    border-color: #BDBDBD;
}

.btn-accent {
    background-color: var(--accent-color);
    color: var(--white);
}

.btn-accent:hover {
    background-color: #F57C00;
}

.btn-text {
    background: none;
    border: none;
    color: var(--primary-color);
    padding: 8px 12px;
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.btn-text:hover {
    background-color: var(--primary-bg);
    color: var(--primary-color);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    width: auto;
    margin: 0;
}

.card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-medium);
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    font-size: 15px;
    background: #FAFAFA;
    font-family: inherit;
    transition: border-color 0.2s;
}

.input-group input:focus,
.input-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

/* Bottom Navigation - REDESIGNED */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--white);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 100;
    max-width: 480px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    width: 100%;
    height: 100%;
    gap: 4px;
    position: relative;
    transition: all 0.2s ease;
}

.nav-item:hover {
    background-color: rgba(46, 125, 50, 0.05);
}

.nav-item.active {
    color: var(--primary-color);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 0 0 3px 3px;
}

.nav-icon {
    font-size: 22px;
    transition: transform 0.2s ease;
}

.nav-item.active .nav-icon {
    transform: scale(1.1);
}

/* Language Switcher - REDESIGNED */
.lang-switch {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background: white;
    border: 1px solid #E0E0E0;
    border-radius: 24px;
    padding: 4px;
    display: flex;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.lang-switch:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.lang-btn {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-light);
    transition: all 0.2s ease;
}

.lang-btn:hover {
    background: rgba(46, 125, 50, 0.05);
    color: var(--text-medium);
}

.lang-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2);
}

/* Specific Views */
.dashboard-header {
    text-align: center;
    margin-bottom: 24px;
    padding: 20px 0;
}

/* Update Rates Header */
.rates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 72px; /* Push below floating language toggle */
    margin-bottom: 16px;
    flex-wrap: wrap; /* allow action buttons to wrap instead of overflowing */
}

.rates-header h2 { flex: 1 1 auto; min-width: 200px; margin: 0; }
.rates-header > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.rates-header .btn-text {
    font-weight: 600;
    /* Make these look like subtle pills rather than plain links */
    background: rgba(46,125,50,0.06);
    border: 1px solid rgba(46,125,50,0.12);
    color: var(--primary-color);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
}

.rates-header .btn-text:hover {
    background: rgba(46,125,50,0.12);
}

/* Make sure the floating add button stays within bounds on narrow screens */
.floating-add-btn { 
    position: fixed; 
    bottom: 86px; 
    z-index: 999; 
    /* center inside viewport and limit width to main container so it doesn't stretch full page */
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, calc(100% - 2 * var(--spacing-unit)));
    display: inline-flex; /* avoid width:100% from .btn */
    padding: 10px 16px;
}

.profile-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #eee;
    margin: 0 auto 12px;
    object-fit: cover;
    border: 2px solid var(--white);
    box-shadow: var(--shadow-sm);
}

/* Admin supplier list / responsive tweaks */
.admin-container { max-width: 1100px; margin: 18px auto; padding: 18px; }
.admin-card { display: block; margin-bottom: 18px; }
.supplier-list { margin-top: 12px; }
.supplier-grid { display:grid; gap:12px; grid-template-columns: 1fr; }
.supplier-item { background: #ffffff; border-radius: 12px; padding: 14px; margin-bottom: 10px; display:flex; gap: 16px; align-items: flex-start; border:1px solid rgba(0,0,0,0.04); box-shadow: 0 6px 18px rgba(12,12,12,0.04); transition: transform 140ms ease; flex-wrap:wrap; }
.supplier-item:hover { transform: translateY(-6px); }
.supplier-logo { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: #f7f7f7; border:1px solid rgba(0,0,0,0.02); flex-shrink:0; }
.supplier-meta { flex: 1; min-width: 0; display:flex; gap:12px; align-items:flex-start; }
.supplier-meta .supplier-info { flex:1; }
.supplier-actions { min-width: 180px; max-width: 300px; display:flex; flex-direction:column; gap:8px; align-items:stretch; flex: 0 0 auto; }

/* action bar inside supplier-actions for compact controls */
.supplier-controls-bar { display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; padding:0; border:1px solid rgba(0,0,0,0.06); background:transparent; cursor:pointer; }
.btn-icon:hover { background: rgba(0,0,0,0.03); }

/* collapsed edit form for supplier */
.supplier-edit { display:none; border-top:1px dashed rgba(0,0,0,0.04); padding-top:12px; margin-top:8px; }
.supplier-edit.open { display:block; }

/* keep list vertical and avoid multi-column that pushes content too far right
   if you want multiple columns in the future we can add an explicit toggle */

/* Responsive behavior: stack supplier rows on small screens */
@media (max-width: 720px) {
    .supplier-item { flex-direction: column; align-items: stretch; }
    .supplier-actions { min-width: auto; width: 100%; }
    .supplier-logo { width: 80px; height: 80px; margin: 0 auto; }
}

/* Small-screen helpers to make admin interface stack nicely */
/* Safer small-screen admin helpers: only target known admin layout pieces. Avoid matching inline style attributes broadly. */
@media (max-width: 880px) {
    /* stack header elements */
    .admin-header { display:flex; flex-direction:column; gap:8px; align-items:stretch; }

    /* Make supplier actions and forms full-width on small screens */
    .admin-card .supplier-actions { margin-left: 0 !important; width: 100% !important; }
    .admin-card form { display:block; }
    .admin-card .form-group input, .admin-card .form-group textarea, .admin-card .form-group select { width: 100% !important; }
}

/* Grouped Product Styles - REDESIGNED */
.product-group-card {
    background: var(--white);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.product-group-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.product-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-bg);
}

.product-group-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 700;
}

.product-group-variants {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Public page product grid (default single column to match mobile-first) */
.public-content, #public-products {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .public-content, #public-products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .public-content, #public-products { grid-template-columns: repeat(3, 1fr); }
}

.variant-row {
    background: #FAFAFA;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #E8E8E8;
    transition: all 0.2s ease;
}

.variant-row:hover {
    background: #F5F5F5;
    border-color: #D0D0D0;
}

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

.variant-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    cursor: pointer;
    flex: 1;
}

.variant-info:hover {
    opacity: 0.8;
}

.variant-inputs {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Delete Button - REDESIGNED */
.rate-list-delete {
    background: rgba(239, 83, 80, 0.1);
    border: 1px solid rgba(239, 83, 80, 0.2);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--error-color);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
}

.rate-list-delete:hover {
    background: rgba(239, 83, 80, 0.15);
    border-color: var(--error-color);
    transform: scale(1.05);
}

.rate-list-delete:active {
    transform: scale(0.95);
}

/* Details Button - REDESIGNED */
.btn-details {
    background: linear-gradient(135deg, var(--primary-bg) 0%, #E3F2FD 100%);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-details:hover {
    background: linear-gradient(135deg, #C8E6C9 0%, #BBDEFB 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(46, 125, 50, 0.2);
}

.btn-details:active {
    transform: translateY(0);
}

/* Rate Card Preview */
.rate-card-preview {
    background: #fff;
    border: 1px solid #eee;
    padding: 24px;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow: hidden;
}

.rate-card-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.rc-header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px dashed #eee;
    padding-bottom: 16px;
}

.rc-business {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.rc-date {
    font-size: 13px;
    color: #666;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
}

.rc-table th {
    text-align: left;
    font-size: 12px;
    color: #888;
    padding-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

.rc-table td {
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 15px;
    vertical-align: top;
}

.rc-price {
    text-align: right;
    font-weight: 700;
    color: var(--text-dark);
}

.rc-unit {
    font-size: 12px;
    color: #666;
    font-weight: 400;
}

.rc-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #888;
}

/* QR Code Container - CENTERED */
#qr-code-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    padding: 20px;
}

#qr-code-container canvas,
#qr-code-container img {
    display: block;
    margin: 0 auto;
}

/* Utilities */
.hidden {
    display: none !important;
}

/* Modal */
.modal {
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.modal .modal-content { max-width: 520px; width: 100%; }

/* Bulk-select checkbox within update rates rows */
.bulk-select { margin-right: 8px; width: 18px; height: 18px; }

/* Profile / Branding form improvements */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.profile-form .btn {
    width: auto; /* don't stretch full-width inside the profile form */
    padding: 10px 14px;
}

/* Team add form: ensure the add button keeps consistent height */
.card form#team-add-form .btn { padding: 10px 12px; }

/* Team members responsive form and list */
#team-add-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#team-add-form input#team-username { flex:1 1 180px; min-width:120px; }
#team-add-form input#team-password { flex:0 1 140px; min-width:120px; max-width:220px; }
#team-add-form .btn { flex:0 0 auto; }

/* team list rows created by JS use .team-item class */
#team-list > .team-item, #team-list > div { display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:6px 0; }
#team-list > .team-item .btn, #team-list > div .btn { margin-left:8px; flex:0 0 auto; }

@media (max-width:520px) {
    #team-add-form input#team-username { min-width: 100%; flex-basis:100%; }
    #team-add-form input#team-password { min-width: 100%; flex-basis:100%; }
    #team-add-form .btn { width:100%; }
    #team-list > div { align-items:flex-start; }
    #team-list > div .btn { width:100%; margin-left:0; margin-top:8px; }
}

.text-center {
    text-align: center;
}

.text-big {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

.mt-2 {
    margin-top: 16px;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.badge-green {
    background: var(--primary-bg);
    color: var(--primary-color);
}

.badge-orange {
    background: #FFF3E0;
    color: #EF6C00;
}

/* Loading Overlay */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--primary-bg);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 48px 24px;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-medium);
    margin-bottom: 8px;
}

.empty-state-hint {
    font-size: 14px;
    color: var(--text-light);
}

/* Rate List Items */
.rate-list-item {
    background: var(--white);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.rate-list-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-unit {
    font-size: 13px;
    color: var(--text-light);
    font-weight: 500;
}

/* Product Details Modal */
.pd-image-upload {
    width: 100%;
    height: 200px;
    background-color: #f5f5f5;
    border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 2px dashed #ddd;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pd-image-upload:hover {
    border-color: var(--primary-color);
    background-color: #f0f0f0;
}

.pd-image-upload input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Edit Product Form */
.edit-field-group {
    margin-bottom: 16px;
}

.edit-field-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dark);
}

.edit-field-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    font-size: 15px;
    background: #FAFAFA;
    font-family: inherit;
    transition: all 0.2s;
}

/* App-level toast (supplier/admin) */
#app-toast { position: fixed; right: 16px; bottom: 18px; z-index: 12000; max-width: 360px; display: none; pointer-events: none; }
#app-toast .toast-item { pointer-events: auto; margin-top: 8px; padding: 10px 14px; border-radius: 10px; color: white; display:flex; align-items:center; box-shadow: 0 10px 30px rgba(0,0,0,0.12); opacity: 0; transform: translateY(8px); transition: transform 160ms ease, opacity 160ms ease; }
#app-toast .toast-item.show { opacity: 1; transform: translateY(0); }
#app-toast .toast-item.info { background: linear-gradient(90deg,#455A64,#607D8B); }
#app-toast .toast-item.success { background: linear-gradient(90deg,#2E7D32,#4CAF50); }
#app-toast .toast-item.error { background: linear-gradient(90deg,#e53935,#ef5350); }

.edit-field-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.price-input {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 18px;
}

/* Floating Action Button */
.fab {
    position: fixed;
    bottom: calc(var(--nav-height) + 16px);
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    border: none;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 50;
}

.fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4);
}

.fab:active {
    transform: scale(0.95);
}

/* Premium Rate Card Styles */
.rate-card-preview.premium {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e0e0e0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.rate-card-preview.premium::before {
    height: 8px;
    background: linear-gradient(90deg, #2E7D32 0%, #4CAF50 50%, #FF9800 100%);
}

/* Public page checkbox styling (custom, nicer checkboxes used on cards) */
input.public-select {
    /* reset default appearance and use custom box */
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #CFCFCF;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background: #fff;
    cursor: pointer;
}

input.public-select:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

input.public-select:checked::after {
    content: '\2713'; /* checkmark */
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 3px;
    top: 0px;
}

/* Admin 'public' checkbox small variant inside update-rate rows */
input.rate-input-visible {
    /* keep default look for now but slightly nicer */
    width: 16px; height:16px; border-radius:4px; border:1px solid #ddd; appearance: auto;
}

/* Tiny nicer style for filter checkboxes in public search area */
.public-search input[type="checkbox"] {
    width: 16px; height: 16px; border-radius: 4px; border: 1px solid #ddd; appearance: auto; margin-right:6px;
}

/* Admin-specific utility classes */
.admin-toast { position:fixed; right:16px; bottom:18px; z-index:9999; max-width:360px; pointer-events:none; display:none; }
.title-center { margin-bottom: 24px; text-align: center; }
.btn-logout { width: auto; padding: 10px 20px; }
.card-heading { margin-bottom: 16px; }
.label-inline { display:flex; align-items:center; gap:8px; font-size:14px; }
.muted-small { font-size:12px; color:#777; margin-top:4px; }
.btn-top-margin { margin-top:8px; }
.row-gap-12 { display:flex; gap:12px; align-items:flex-start; }
.flex-1-min-260 { flex:1; min-width:260px; }
.flex-1-min-320 { flex:1; min-width:320px; }
.scroll-box-small { max-height:220px; overflow:auto; border:1px solid #f1f1f1; padding:8px; border-radius:8px; background:#fafafa; }
.col-320 { width:320px; }
.row-gap-8 { display:flex; gap:8px; }
.inline-message { margin-top:8px; font-size:13px; color:#666; }
.input-search { flex:1; padding:8px; border-radius:8px; border:1px solid #eee; }
.master-list { max-height:360px; overflow:auto; border:1px solid #f1f1f1; padding:8px; border-radius:8px; background:#fff; }
.col-420 { width:420px; }
.no-top { margin-top: 0; }
.box-text-muted { font-size:13px; color:#666; margin-top:0; }
.scroll-pane { max-height:300px; overflow:auto; margin-top:12px; padding-right:6px; }
.label-list-item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #f1f1f1; }
.token-col { font-size:12px; color:#666; min-width:120px; text-align:right; }
.btn-row { margin-top:12px; display:flex; gap:8px; }
.form-inline { display:inline; }
.textarea-full { width:100%; padding:8px; border-radius:6px; border:1px solid #EDEDED; font-family:inherit; font-size:13px; }
.input-small { width:80px; padding:8px; border-radius:8px; border:1px solid #ddd; }
.supplier-actions { min-width: 220px; display:flex; flex-direction:column; gap:8px; }
.full-width { width:100%; }
.btn-danger-full { width:100%; background: #f44336; border-color: #f44336; }
.muted-xsmall { font-size:11px; color:#555; }
.label-small { font-size:11px; display:block; margin-bottom:4px; }
.compact-group { margin-bottom:8px; }
.list-item-text { flex:1; font-size:14px; }
.list-item-sub { color:#666; font-size:12px; margin-left:6px; }
.primary-link { color: var(--primary-color); }
.compact-form { margin-bottom:8px; }
.admin-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}
.admin-sidebar {
    background: linear-gradient(180deg, rgba(46,125,50,0.06), rgba(255,255,255,0.02));
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.03);
    height: fit-content;
}
.admin-brand { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.admin-brand img { width:36px; height:36px; border-radius:8px; object-fit:cover; }
.admin-brand h2 { font-size:16px; margin:0; }
.admin-nav { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.admin-nav a { display:flex; gap:10px; align-items:center; padding:10px; border-radius:8px; text-decoration:none; color:var(--text-medium); font-weight:600; font-size:14px; border:1px solid transparent; }
.admin-nav a:hover { background:rgba(46,125,50,0.04); color:var(--primary-color); border-color: rgba(46,125,50,0.06); }
.admin-nav a.active { color:var(--primary-color); background:linear-gradient(90deg, rgba(46,125,50,0.06), rgba(46,125,50,0.02)); border-color: rgba(46,125,50,0.08); }
.admin-main { padding: 4px; }
.admin-header-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.admin-header-bar .actions { display:flex; gap:10px; align-items:center; }
.admin-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
.admin-row { display:flex; gap:16px; align-items:flex-start; }
.admin-card { display:block; }
.admin-subgrid { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.section-title { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.section-title h3 { margin:0; }
.card { padding:16px; }
.supplier-list { display:flex; flex-direction:column; gap:12px; }
.supplier-row { display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:10px; border:1px solid rgba(0,0,0,0.04); background:var(--white); }
.supplier-meta { display:flex; gap:12px; align-items:center; flex:1; }
.supplier-logo { width:84px; height:84px; border-radius:8px; object-fit:cover; }
.supplier-controls { width:270px; display:flex; flex-direction:column; gap:8px; }
.admin-subtitle { font-size:13px; color:var(--text-light); }
.mt-2 { margin-top:12px; }
.actions-inner { display:flex; gap:8px; align-items:center; }
.small-text { font-size:13px; }
.empty-note { text-align:center; color:#666; padding:20px; }
.label-inline.small-gap { display:inline-flex; gap:4px; align-items:center; }
.vcenter { display:flex; align-items:center; }
.no-margin { margin:0; }
.flex-gap-8 { display:flex; gap:8px; }
.supplier-controls .btn { width:100%; }

/* Admin sections default to hidden — navigation toggles the active section */
.admin-section { display: none; opacity: 0; transform: translateY(4px); transition: opacity 180ms ease, transform 180ms ease; }
.admin-section.active { display: block; opacity: 1; transform: translateY(0); }

/* Professional, modern section cards */
.section-card { background: linear-gradient(180deg,#ffffff,#fbfcfd); border-radius:12px; padding:18px; box-shadow: 0 6px 22px rgba(34,34,34,0.06); border:1px solid rgba(0,0,0,0.04); }
.section-card { transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease, border-color 160ms ease; }
.section-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(34,34,34,0.12); border-color: rgba(0,0,0,0.06); }
.section-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.section-header h3 { margin:0; font-size:18px; letter-spacing:0.2px; color:var(--text-dark); }
.section-sub { font-size:13px; color:var(--text-medium); }
.form-row { display:flex; gap:12px; align-items:flex-start; }
.form-row .form-group { flex:1; }
.form-actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:8px; }
.field-help { font-size:12px; color:var(--text-light); }

/* Improve look of inputs/buttons inside admin forms */
.form-group input, .form-group textarea, .form-group select, .input-search { padding:12px 14px; border-radius:10px; border:1px solid rgba(0,0,0,0.08); background:#fff; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus, .input-search:focus { outline: none; box-shadow: 0 6px 20px rgba(46,125,50,0.12); border-color: rgba(46,125,50,0.16); }
.form-group label { font-size:13px; color:var(--text-medium); margin-bottom:6px; display:block; }
.btn { border-radius:10px; }
.btn-primary { padding:10px 14px; }
.btn-secondary { padding:10px 12px; }
.btn { transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.btn-text { padding:6px 10px; border-radius:8px; border:1px solid transparent; }
.btn-text:hover { background:rgba(0,0,0,0.02); }

/* Tighter, cleaner supplier row */
.supplier-meta h4 { margin:0 0 4px 0; font-size:16px; color:var(--text-dark); }
.supplier-meta p { margin:0; font-size:13px; color:var(--text-medium); }

/* Logo preview for forms */
.logo-preview { width:72px; height:72px; border-radius:8px; object-fit:cover; border:1px solid rgba(0,0,0,0.06); box-shadow:0 4px 12px rgba(0,0,0,0.06); transition: transform 120ms ease, opacity 120ms ease; }
.logo-preview.empty { opacity:0.5; filter:grayscale(0.5) contrast(0.9); }
.logo-preview:hover { transform: scale(1.02); }

/* subtle animate when switching sections */
.admin-section { will-change: opacity, transform; }


/* Mobile responsiveness: stack sidebar on top */
@media (max-width: 880px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { order: 0; }
    .admin-main { order: 1; }
    .admin-subgrid { grid-template-columns: 1fr; }
    .supplier-controls { width:100%; }
}

.hint-small { font-size:12px; color:#666; }
.mb-1 { margin-bottom:4px; }

/* Enhanced admin form styling — better structure and hierarchy */
.admin-section .form-group { margin-bottom:16px; }
.admin-section .form-group:last-child { margin-bottom:0; }
.admin-section .form-group label { display:block; margin-bottom:8px; font-weight:500; font-size:13px; color:var(--text-dark); }
.admin-section .form-group input, .admin-section .form-group textarea, .admin-section .form-group select { width:100%; padding:12px 14px; border:1px solid rgba(0,0,0,0.08); border-radius:10px; background:#fff; font-size:14px; transition: border-color 140ms ease, box-shadow 140ms ease; }
.admin-section .form-group input:focus, .admin-section .form-group textarea:focus, .admin-section .form-group select:focus { outline:none; border-color:rgba(46,125,50,0.2); box-shadow: 0 4px 16px rgba(46,125,50,0.12); }
.admin-section .form-group input::placeholder { color:rgba(0,0,0,0.3); }

/* Section layout improvements */
.admin-section.section-card .admin-card:first-of-type > h3 { display:none; }
.section-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.section-header > div:first-child { flex:1; min-width:200px; }
.section-header h3 { font-size:20px; font-weight:600; margin:0 0 4px 0; color:var(--text-dark); }
.section-header .section-sub { font-size:13px; color:var(--text-medium); margin:0; line-height:1.4; }
.section-header .form-actions { margin-top:0; margin-bottom:0; justify-content:flex-start; }
@media (max-width: 768px) { .section-header { gap:8px; } .section-header .form-actions { justify-content:flex-end; width:100%; margin-top:8px; } }

/* Form group layouts */
.form-group-row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:16px; }
.form-group-row .form-group { margin-bottom:0; }
@media (max-width: 768px) { .form-group-row { grid-template-columns: 1fr; } }

/* Help and hint text */
.field-help, .field-hint { display:block; font-size:12px; color:var(--text-light); margin-top:4px; line-height:1.4; }
.field-hint { font-style:italic; opacity:0.9; }

/* Empty state styling */
.empty-state { text-align:center; padding:32px 24px; color:var(--text-medium); }
.empty-state-icon { font-size:48px; margin-bottom:12px; opacity:0.3; }
.empty-state h3 { margin:0 0 8px 0; font-size:16px; color:var(--text-dark); }
.empty-state p { margin:0; font-size:13px; }

/* List item improvements */
.list-item { display:flex; gap:12px; align-items:center; padding:12px; border-bottom:1px solid rgba(0,0,0,0.03); transition: background-color 120ms ease; }
.list-item:hover { background:rgba(0,0,0,0.01); }
.list-item-text { flex:1; min-width:0; }
.list-item-text strong { display:block; color:var(--text-dark); font-size:14px; margin-bottom:2px; }
.list-item-text .meta { display:block; font-size:12px; color:var(--text-light); }
.list-item-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }

/* Checkbox list styling */
.label-list-item { display:flex; gap:12px; align-items:center; padding:12px; border-bottom:1px solid rgba(0,0,0,0.03); cursor:pointer; transition: background-color 120ms ease; }
.label-list-item:hover { background:rgba(0,0,0,0.02); }
.label-list-item input[type="checkbox"] { cursor:pointer; flex-shrink:0; }
.label-list-item .list-item-text { flex:1; min-width:0; }
.label-list-item .list-item-sub { display:block; font-size:12px; color:var(--text-light); margin-top:2px; }

/* Section dividers */
.form-divider { margin:16px 0; padding:16px 0; border-top:1px solid rgba(0,0,0,0.05); }
.section-divider h4 { font-size:13px; font-weight:600; color:var(--text-medium); margin:0 0 8px 0; text-transform:uppercase; letter-spacing:0.5px; }

/* Inline form row for compact layouts */
.form-inline-row { display:flex; gap:8px; align-items:center; }
.form-inline-row input { flex:1; }
.form-inline-row .btn { white-space:nowrap; margin:0; }

/* Better scroll container styling */
.scroll-box-small { max-height:400px; overflow-y:auto; border:1px solid rgba(0,0,0,0.04); border-radius:10px; padding:8px; }
.scroll-pane { max-height:500px; overflow-y:auto; border:1px solid rgba(0,0,0,0.04); border-radius:10px; padding:8px; }

/* Category and Master Product list items */
.category-item, .master-item { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px; margin-bottom:6px; background:#fff; border:1px solid rgba(0,0,0,0.05); border-radius:8px; transition: all 120ms ease; }
.category-item:hover, .master-item:hover { background:rgba(46,125,50,0.02); border-color:rgba(46,125,50,0.1); }
.category-item-name, .master-item-name { flex:1; font-weight:500; color:var(--text-dark); }
.category-item-actions, .master-item-actions { display:flex; gap:6px; align-items:center; }
.category-item-actions .btn-icon, .master-item-actions .btn-icon { padding:6px; background:transparent; color:var(--text-medium); border:1px solid rgba(0,0,0,0.08); border-radius:6px; cursor:pointer; transition: all 120ms ease; }
.category-item-actions .btn-icon:hover, .master-item-actions .btn-icon:hover { background:rgba(46,125,50,0.1); color:var(--primary-color); border-color:rgba(46,125,50,0.2); }

/* Consistent form input styling across admin */
.admin-section input[type="search"], .admin-section .input-search { width:100%; padding:12px 14px; border:1px solid rgba(0,0,0,0.08); border-radius:10px; background:#fff; font-size:14px; }
.admin-section input[type="search"]:focus, .admin-section .input-search:focus { outline:none; border-color:rgba(46,125,50,0.2); box-shadow: 0 4px 16px rgba(46,125,50,0.12); }

/* Responsive admin card sections on mobile */
@media (max-width: 768px) {
    .admin-section { margin-bottom:16px; }
    .section-card { padding:14px; border-radius:10px; }
    #section-onboard { max-width:100%; }
    #section-master { grid-template-columns: 1fr !important; }
    #section-categories { grid-template-columns: 1fr !important; }
    .scroll-box-small { max-height:300px; }
    .scroll-pane { max-height:400px; }
}

/* ============================================
   ADMIN LOGIN PAGE - Professional & Responsive
   ============================================ */

.admin-login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f7f4 0%, #e8f5e9 50%, #fff9e6 100%);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.login-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(46,125,50,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,152,0,0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.login-card {
    background: linear-gradient(180deg, #ffffff, #fbfcfd);
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(46,125,50,0.08);
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 10;
    animation: slideInUp 400ms cubic-bezier(0.2,0.9,0.2,1);
}

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

/* Login Header */
.login-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid rgba(46,125,50,0.1);
}

.login-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 16px;
    animation: fadeIn 500ms ease 100ms both;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.login-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 12px 0 0 0;
    letter-spacing: -0.5px;
}

.login-header p {
    font-size: 13px;
    color: var(--text-light);
    margin: 4px 0 0 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Login Form */
.login-form {
    margin: 0;
}

.login-group {
    margin-bottom: 18px;
}

.login-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid rgba(46,125,50,0.12);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: var(--text-dark);
    transition: all 200ms ease;
    font-family: inherit;
}

.login-input:hover {
    border-color: rgba(46,125,50,0.2);
    background: rgba(46,125,50,0.01);
}

.login-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(46,125,50,0.1);
}

.login-input::placeholder {
    color: rgba(0,0,0,0.3);
}

.login-group .field-help {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 6px;
}

/* Login Button */
.login-btn {
    width: 100%;
    padding: 14px 20px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    transition: all 200ms ease;
    cursor: pointer;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(46,125,50,0.25);
}

.login-btn:active {
    transform: translateY(0);
}

/* Error Alert */
.login-error {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(239,83,80,0.08);
    border-left: 4px solid var(--error-color);
    animation: shake 400ms ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.login-error strong {
    display: block;
    color: var(--error-color);
    font-weight: 600;
    margin-bottom: 4px;
}

.login-error p {
    margin: 0;
    color: var(--text-medium);
    font-size: 13px;
}

/* Login Footer */
.login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.login-footer p {
    margin: 0 0 2px 0;
    font-size: 13px;
    color: var(--text-light);
}

.login-footer .version {
    font-size: 11px;
    color: rgba(0,0,0,0.3);
    font-style: italic;
}

/* Responsive Login Page */
@media (max-width: 480px) {
    .admin-login-container {
        padding: 16px;
    }

    .login-card {
        padding: 28px 20px;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    }

    .login-header {
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    .login-logo {
        width: 64px;
        height: 64px;
    }

    .login-header h1 {
        font-size: 24px;
    }

    .login-group {
        margin-bottom: 16px;
    }

    .login-input {
        padding: 12px 14px;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .login-btn {
        padding: 12px 16px;
    }
}

@media (min-width: 768px) {
    .login-card {
        padding: 48px 36px;
    }

    .login-header {
        margin-bottom: 36px;
    }

    .login-form {
        margin-top: 0;
    }

    .login-btn:hover {
        box-shadow: 0 12px 40px rgba(46,125,50,0.3);
    }
}