/* ============================================
   FreshMarket — Global Stylesheet
   ============================================ */

:root {
    --primary:       #2e7d32;
    --primary-dark:  #1b5e20;
    --primary-light: #4caf50;
    --secondary:     #ff8f00;
    --accent:        #00897b;
    --danger:        #c62828;
    --warning:       #f9a825;
    --info:          #0277bd;
    --light-bg:      #f8faf8;
    --card-shadow:       0 2px 12px rgba(0,0,0,0.08);
    --card-hover-shadow: 0 8px 30px rgba(0,0,0,0.14);
    --radius:   12px;
    --transition: all 0.25s ease;
    --font:     'Inter', 'Segoe UI', sans-serif;
    --sidebar-w: 260px;
}

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; min-height: 100%; width: 100%; min-width: 100%; overflow-x: hidden; }
body   { font-family: var(--font); background: var(--light-bg); color: #2d3748; line-height: 1.6; min-height: 100vh; }
body.sidebar-open { overflow: hidden !important; }



a      { text-decoration: none; color: inherit; }
img, picture, svg, video, iframe { max-width: 100%; height: auto; }

#menuBtn {
    display: none;
}

.sidebar-close-btn {
    display: none;
}

::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 3px; }

/* ══════════════════════════════════════════════
   DASHBOARD LAYOUT
   ══════════════════════════════════════════════ */

/* Sidebar — all three portals share this base */
.admin-sidebar,
.vendor-sidebar,
.customer-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1),
                box-shadow  0.28s ease;
    will-change: transform;
}

/* Colours */
.admin-sidebar    { background: linear-gradient(180deg,#1b5e20,#2e7d32); }
.vendor-sidebar   { background: linear-gradient(180deg,#004d40,#00695c); }
.customer-sidebar { background: linear-gradient(180deg,#1b5e20,#2e7d32); }

/* Sidebar brand */
.sidebar-brand {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
}
.sidebar-brand h4  { color:#fff; font-weight:800; font-size:1.25rem; margin:0; }
.sidebar-brand small { color:rgba(255,255,255,0.55); font-size:0.72rem; }

/* Sidebar user info strip */
.sidebar-user {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

/* Nav links */
.sidebar-nav { padding: 8px 0; flex: 1; }

.admin-sidebar    .nav-link,
.vendor-sidebar   .nav-link,
.customer-sidebar .nav-link {
    color: rgba(255,255,255,0.75) !important;
    padding: 10px 20px !important;
    border-radius: 8px;
    margin: 2px 10px;
    font-weight: 500;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
    white-space: nowrap;
}
.admin-sidebar    .nav-link:hover, .admin-sidebar    .nav-link.active,
.vendor-sidebar   .nav-link:hover, .vendor-sidebar   .nav-link.active,
.customer-sidebar .nav-link:hover, .customer-sidebar .nav-link.active {
    background: rgba(255,255,255,0.16) !important;
    color: #fff !important;
}
.admin-sidebar    .nav-link i,
.vendor-sidebar   .nav-link i,
.customer-sidebar .nav-link i { font-size:1.05rem; width:20px; flex-shrink:0; }

.sidebar-section-title {
    color: rgba(255,255,255,0.38);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    padding: 14px 20px 4px;
}

/* Content wrappers */
.admin-content,
.vendor-content,
.customer-content {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    width: calc(100% - var(--sidebar-w));
    transition: margin-left 0.28s cubic-bezier(.4,0,.2,1);
    position: relative;
}
.admin-content    { background: #f0f4f0; }
.vendor-content   { background: #f0f4f4; }
.customer-content { background: #f8faf8; }

/* On smaller screens full-width content */
@media (max-width: 991px) {
    .admin-content,
    .vendor-content,
    .customer-content {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        padding-right: 0 !important;
        left: 0 !important;
        box-sizing: border-box !important;
    }
}


/* Topbar */
.admin-topbar {
    background: #fff;
    padding: 13px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 200;
}
.admin-main { padding: 26px; }

/* ── Hamburger button ─────────────────────── */
.sidebar-toggle-btn {
    display: none;           /* hidden on desktop */
    background: none;
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    padding: 5px 9px;
    cursor: pointer;
    color: #555;
    font-size: 1.25rem;
    line-height: 1;
    transition: var(--transition);
    flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background:#f0f4f0; color:var(--primary); border-color:var(--primary-light); }

#menuBtn {
    display: none;
}

.sidebar-close-btn {
    display: none;
}

/* ── Overlay backdrop ─────────────────────── */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.48);
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    backdrop-filter: blur(1px);
}
/* Also support the specific overlay element used in header (id=sidebarOverlay) */
#sidebarOverlay {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1050;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
/* Shown when body has .sidebar-open (set by JS) */
body.sidebar-open .sidebar-overlay,
body.sidebar-open #sidebarOverlay {
    opacity: 1;
    visibility: visible;
    display: block !important;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — tablet & mobile (≤ 991px)
   ══════════════════════════════════════════════ */

/* .sb-open — OUTSIDE media query so it always wins */
.admin-sidebar.sb-open,
.vendor-sidebar.sb-open,
.customer-sidebar.sb-open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,0.35) !important;
}

/* ── Tablet (≤ 991px) ─────────────────────── */
@media (max-width: 991px) {

    /* Sidebar hidden off-screen */
    .admin-sidebar,
    .vendor-sidebar,
    .customer-sidebar {
        transform: translateX(-100%);
        width: 280px;
    }

    /* Ensure the hamburger/menu button is visible on small screens
       even if inlined as display:none in HTML — JS will still toggle it. */
    #menuBtn { display:flex !important; }

    /* Make sidebar fixed overlay on mobile and ensure sb-open takes precedence */
    .admin-sidebar, .vendor-sidebar, .customer-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 88vw !important;
        max-width: 320px !important;
        transform: translateX(-100%) !important;
        z-index: 1060 !important;
    }
    .admin-sidebar.sb-open, .vendor-sidebar.sb-open, .customer-sidebar.sb-open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 40px rgba(0,0,0,0.35) !important;
    }

    /* Fallback: show overlay via CSS when body has sidebar-open (JS also toggles inline styles) */
    body.sidebar-open #sidebarOverlay { display:block !important; opacity:1 !important; visibility: visible !important; }

    /* Content full width */
    .admin-content,
    .vendor-content,
    .customer-content {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    .admin-topbar {
        padding: 10px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    .admin-main {
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #menuBtn { display: flex !important; }
    .sidebar-close-btn { display: flex !important; }

    /* Tables scroll horizontally and stay responsive on mobile */
    .table-custom { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-custom .table { min-width: auto !important; width: 100% !important; }
    .table-custom .table td,
    .table-custom .table th { white-space: normal !important; }

    /* Stat cards: 2 per row */
    .stat-card { padding: 16px; }
    .stat-card .stat-value { font-size: 1.6rem; }
    .stat-card .stat-icon  { width: 42px; height: 42px; font-size: 1.1rem; }
}

/* ── Small phones (≤ 576px) ──────────────── */
@media (max-width: 576px) {

    /* Sidebar nearly full width */
    .admin-sidebar,
    .vendor-sidebar,
    .customer-sidebar {
        width: 88vw !important;
        max-width: 320px;
    }

    .admin-main { padding: 12px; }
    .admin-topbar { padding: 9px 12px; }

    /* Stat cards: 2 per row, smaller */
    .stat-card { padding: 14px; }
    .stat-card .stat-value { font-size: 1.4rem; }
    .stat-card .stat-label { font-size: 0.78rem; }

    /* Tables: smaller text */
    .table-custom thead th { font-size: 0.72rem; padding: 10px 10px; }
    .table-custom tbody td { padding: 10px 10px; font-size: 0.85rem; }

    /* Cards full width */
    .product-card .card-img-wrapper { height: 160px; }

    /* Topbar: hide page title on very small screens */
    .admin-topbar h6 { font-size: 0.85rem; }

    /* Buttons smaller */
    .btn-sm { font-size: 0.78rem; padding: 4px 8px; }

    /* Forms full width */
    .row.g-4 > [class*="col-lg"],
    .row.g-4 > [class*="col-md"] { width: 100%; }

    /* Flash alerts */
    .flash-alert { font-size: 0.88rem; padding: 10px 14px; }

    /* Hero */
    .hero-section { padding: 40px 0 30px; }
    .hero-section h1 { font-size: 1.6rem !important; }

    /* Search bar */
    .search-bar-wrapper { padding: 5px 5px 5px 14px; }
    .search-bar-wrapper button { padding: 8px 14px; font-size: 0.85rem; }

    /* Category pills scroll horizontally */
    .category-pills-wrapper {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .category-pills-wrapper::-webkit-scrollbar { display: none; }
    .category-pill { flex-shrink: 0; }

    /* Vendor/product grid: 1 column */
    .row.g-4 > .col-6 { width: 50%; }
    .row.g-3 > .col-6 { width: 50%; }
}

/* ── Very small phones (≤ 400px) ─────────── */
@media (max-width: 400px) {
    .row.g-4 > .col-6,
    .row.g-3 > .col-6 { width: 100%; }

    .stat-card .stat-value { font-size: 1.3rem; }
    .admin-main { padding: 10px; }
}

/* ══════════════════════════════════════════════
   PUBLIC NAVBAR
   ══════════════════════════════════════════════ */
.main-navbar {
    background: #fff;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.main-navbar .navbar-brand { font-size:1.5rem; font-weight:800; color:var(--primary) !important; }
.main-navbar .nav-link { color:#444 !important; font-weight:500; padding:6px 14px !important; border-radius:6px; transition:var(--transition); }
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active { color:var(--primary) !important; background:#e8f5e9; }
.main-navbar .navbar-nav { flex-wrap: wrap; justify-content: center; }

@media (max-width: 991px) {
    .main-navbar .navbar-collapse { padding: 12px 0; }
    .main-navbar .input-group { width: 100% !important; margin: 8px 0; }
    .main-navbar form { width: 100% !important; margin: 0 !important; }
    .main-navbar .navbar-nav { gap: 2px; }
}

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
.hero-section {
    background: linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 50%,var(--accent) 100%);
    color: #fff;
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content:''; position:absolute; top:-50%; right:-10%;
    width:min(500px, 55vw); height:min(500px, 55vw);
    background:rgba(255,255,255,0.05); border-radius:50%;
}
.hero-section::after {
    content:''; position:absolute; bottom:-30%; left:-5%;
    width:min(350px, 45vw); height:min(350px, 45vw);
    background:rgba(255,255,255,0.04); border-radius:50%;
}
@media (max-width:768px) {
    .hero-section { padding:50px 0 40px; }
    .hero-section::before { top:-40%; right:-12%; }
    .hero-section::after { bottom:-20%; left:-8%; }
}

/* ══════════════════════════════════════════════
   PRODUCT CARDS
   ══════════════════════════════════════════════ */
.product-card {
    background:#fff; border-radius:var(--radius);
    box-shadow:var(--card-shadow); transition:var(--transition);
    overflow:hidden; height:100%; display:flex; flex-direction:column;
}
.product-card:hover { box-shadow:var(--card-hover-shadow); transform:translateY(-4px); }
.product-card .card-img-wrapper {
    position:relative; overflow:hidden; height:200px; background:#f0f4f0;
}
.product-card .card-img-wrapper img {
    width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease;
}
.product-card:hover .card-img-wrapper img { transform:scale(1.06); }
.product-card .card-body { padding:16px; flex:1; display:flex; flex-direction:column; }
.product-card .product-price { font-size:1.2rem; font-weight:700; color:var(--primary); }
.product-card .product-unit  { font-size:0.78rem; color:#888; font-weight:400; }
.product-card .vendor-name   { font-size:0.8rem; color:#666; }
.badge-category {
    background:#e8f5e9; color:var(--primary);
    font-size:0.73rem; padding:3px 10px; border-radius:20px; font-weight:600;
}

/* ══════════════════════════════════════════════
   WHATSAPP BUTTON
   ══════════════════════════════════════════════ */
.btn-whatsapp {
    background: linear-gradient(135deg,#25d366,#128c7e);
    color:#fff !important; border:none; padding:10px 20px;
    border-radius:8px; font-weight:600; transition:var(--transition);
    display:inline-flex; align-items:center; gap:8px; font-size:0.93rem;
    cursor:pointer;
}
.btn-whatsapp:hover {
    background:linear-gradient(135deg,#128c7e,#075e54);
    transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,211,102,0.4);
    color:#fff !important;
}
.btn-whatsapp i { font-size:1.15rem; }

/* ══════════════════════════════════════════════
   STAT CARDS
   ══════════════════════════════════════════════ */
.stat-card {
    background:#fff; border-radius:var(--radius); padding:22px;
    box-shadow:var(--card-shadow); border-left:4px solid var(--primary);
    transition:var(--transition);
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--card-hover-shadow); }
.stat-card .stat-icon {
    width:50px; height:50px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; font-size:1.35rem;
}
.stat-card .stat-value { font-size:1.9rem; font-weight:800; color:#1a1a2e; }
.stat-card .stat-label { color:#888; font-size:0.86rem; font-weight:500; }

/* ══════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════ */
.table-custom {
    background:#fff; border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--card-shadow);
}
.table-custom thead th {
    background:#f8faf8; color:#555; font-weight:700;
    font-size:0.8rem; text-transform:uppercase; letter-spacing:0.5px;
    border-bottom:2px solid #e8f5e9; padding:13px 16px;
}
.table-custom tbody td { padding:12px 16px; vertical-align:middle; border-bottom:1px solid #f5f5f5; }
.table-custom tbody tr:hover { background:#fafffe; }

/* ══════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════ */
.badge-active   { background:#e8f5e9; color:#2e7d32; }
.badge-inactive { background:#fce4ec; color:#c62828; }
.badge-pending  { background:#fff8e1; color:#f57f17; }
.badge-custom   { padding:4px 12px; border-radius:20px; font-size:0.76rem; font-weight:600; }

/* ══════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════ */
.form-control-custom {
    border:2px solid #e0e0e0; border-radius:8px;
    padding:10px 14px; font-size:0.9rem; transition:var(--transition); width:100%;
}
.form-control-custom:focus {
    border-color:var(--primary-light);
    box-shadow:0 0 0 3px rgba(76,175,80,0.15); outline:none;
}

/* ══════════════════════════════════════════════
   FLASH ALERTS
   ══════════════════════════════════════════════ */
.flash-alert {
    border-radius:10px; padding:13px 18px; font-weight:500;
    border:none; display:flex; align-items:center; gap:10px;
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.main-footer {
    background:#1b2e1b; color:rgba(255,255,255,0.8); padding:50px 0 20px;
}
.main-footer h5, .main-footer h6 { color:#fff; font-weight:700; margin-bottom:16px; }
.main-footer a  { color:rgba(255,255,255,0.65); transition:var(--transition); text-decoration:none; }
.main-footer a:hover { color:var(--primary-light); }
.main-footer .footer-bottom {
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:20px; margin-top:40px;
    font-size:0.83rem; color:rgba(255,255,255,0.5);
}
.main-footer .footer-bottom a { color:rgba(255,255,255,0.5); }
.main-footer .footer-bottom a:hover { color:var(--primary-light); }

/* ══════════════════════════════════════════════
   CATEGORY PILLS
   ══════════════════════════════════════════════ */
.category-pill {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 18px; border-radius:25px; background:#fff;
    border:2px solid #e0e0e0; color:#555; font-weight:500;
    font-size:0.86rem; transition:var(--transition); cursor:pointer; white-space:nowrap;
}
.category-pill:hover, .category-pill.active {
    background:var(--primary); border-color:var(--primary); color:#fff;
    transform:translateY(-2px); box-shadow:0 4px 12px rgba(46,125,50,0.3);
}

/* ══════════════════════════════════════════════
   SEARCH BAR (hero)
   ══════════════════════════════════════════════ */
.search-bar-wrapper {
    background:#fff; border-radius:50px;
    padding:6px 6px 6px 20px; display:flex; align-items:center;
    box-shadow:0 4px 20px rgba(0,0,0,0.12); max-width:600px; width:100%;
}
.search-bar-wrapper input  { border:none; outline:none; flex:1; font-size:0.93rem; background:transparent; }
.search-bar-wrapper button {
    background:var(--primary); color:#fff; border:none;
    border-radius:40px; padding:10px 22px; font-weight:600;
    cursor:pointer; transition:var(--transition);
}
.search-bar-wrapper button:hover { background:var(--primary-dark); }

/* ══════════════════════════════════════════════
   VENDOR CARD
   ══════════════════════════════════════════════ */
.vendor-card {
    background:#fff; border-radius:var(--radius);
    box-shadow:var(--card-shadow); transition:var(--transition);
    overflow:hidden; text-align:center; padding:24px 16px;
}
.vendor-card:hover { box-shadow:var(--card-hover-shadow); transform:translateY(-4px); }
.vendor-card .vendor-logo {
    width:80px; height:80px; border-radius:50%; object-fit:cover;
    border:3px solid #e8f5e9; margin:0 auto 12px;
}
.vendor-card .vendor-shop-name { font-weight:700; font-size:1rem; color:#1a1a2e; }
.vendor-card .vendor-city      { font-size:0.8rem; color:#888; }

/* ══════════════════════════════════════════════
   IMAGE UPLOAD PREVIEW
   ══════════════════════════════════════════════ */
.img-upload-preview {
    width:100%; height:160px; border:2px dashed #c8e6c9;
    border-radius:10px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:var(--transition); overflow:hidden; background:#f9fdf9;
}
.img-upload-preview:hover { border-color:var(--primary); background:#f0f9f0; }
.img-upload-preview img   { width:100%; height:100%; object-fit:cover; }

/* ══════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════ */
.pagination .page-link {
    border-radius:8px !important; margin:0 2px;
    color:var(--primary); border:1px solid #e0e0e0; font-weight:500;
}
.pagination .page-item.active .page-link {
    background:var(--primary); border-color:var(--primary); color:#fff;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — PUBLIC PAGES
   ══════════════════════════════════════════════ */

/* Shop / product grid */
@media (max-width: 576px) {
    /* 2 columns on small phones */
    .row.g-4 > .col-6,
    .row.g-3 > .col-6 { width: 50%; }

    /* Product card image shorter on mobile */
    .product-card .card-img-wrapper { height: 140px; }
    .product-card .card-body { padding: 10px; }
    .product-card .product-price { font-size: 1rem; }

    /* Vendor card */
    .vendor-card { padding: 16px 10px; }
    .vendor-card .vendor-logo { width: 60px; height: 60px; }

    /* Hero text */
    .hero-section h1.display-5 { font-size: 1.5rem !important; }
    .hero-section .lead { font-size: 0.95rem; }

    /* Search bar full width */
    .search-bar-wrapper { max-width: 100%; }

    /* Category pills */
    .d-flex.flex-wrap.gap-2 { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 8px; }
    .d-flex.flex-wrap.gap-2::-webkit-scrollbar { display: none; }
    .category-pill { flex-shrink: 0; padding: 6px 14px; font-size: 0.8rem; }

    /* Footer columns stack */
    .main-footer .col-lg-4,
    .main-footer .col-lg-2 { margin-bottom: 20px; }

    /* Breadcrumb smaller */
    .breadcrumb { font-size: 0.8rem; }

    /* Product detail */
    .product-detail-price { font-size: 1.6rem !important; }
}

@media (max-width: 400px) {
    .row.g-4 > .col-6,
    .row.g-3 > .col-6 { width: 100%; }
    .product-card .card-img-wrapper { height: 180px; }
}

/* Shop sidebar filter — collapse on mobile */
@media (max-width: 991px) {
    .shop-filter-sidebar { margin-bottom: 20px; }
    .shop-filter-sidebar .card-body { padding: 12px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — DASHBOARD FORMS
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Form rows stack */
    .row.g-4 > [class*="col-lg"],
    .row.g-4 > [class*="col-md"],
    .row.g-3 > [class*="col-lg"],
    .row.g-3 > [class*="col-md"] { width: 100%; }

    /* Vendor/customer profile forms */
    .img-upload-preview { height: 120px; }

    /* Admin topbar title */
    .admin-topbar h6 { font-size: 0.82rem; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Tailwind grid in admin pages */
    .tw-grid-cols-2 { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLES (all sizes)
   ══════════════════════════════════════════════ */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tailwind tables in admin */
@media (max-width: 768px) {
    .tw-overflow-x-auto table { min-width: 600px; }
    .tw-overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

/* ══════════════════════════════════════════════
   UTILITY — TOUCH TARGETS
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Ensure all buttons/links are at least 44px tall for touch */
    .btn, button, .nav-link, .category-pill {
        min-height: 40px;
    }
    .btn-sm { min-height: 34px; }

    /* WhatsApp button full width on mobile */
    .btn-whatsapp { width: 100%; justify-content: center; }

    /* Pagination larger touch targets */
    .pagination .page-link { padding: 8px 14px; }
}

/* ══════════════════════════════════════════════
   PRINT STYLES
   ══════════════════════════════════════════════ */
@media print {
    .admin-sidebar, .vendor-sidebar, .customer-sidebar,
    .admin-topbar, #sidebarOverlay, .btn-whatsapp { display: none !important; }
    .admin-content, .vendor-content, .customer-content { margin: 0 !important; width: 100% !important; }
}