/* ==========================================
   GuyStore - Base Styles (theme-agnostic)
   ========================================== */

/* Layout */
html { font-size: 16px; scroll-behavior: smooth; }
body { min-height: 100vh; display: flex; flex-direction: column; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
main { flex: 1; }

/* Navbar enhancements */
.navbar { padding: .75rem 0; }
.dropdown-menu { border-radius: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.cart-badge { position: relative; }
.cart-count { position: absolute; top: -8px; right: -10px; background: var(--gs-secondary); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: .65rem; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Hero */
.hero-section { border-radius: 0 0 2rem 2rem; margin-bottom: 2rem; }
.hero-section .display-4 { font-weight: 800; }

/* Cards */
.card { border-radius: .75rem; overflow: hidden; }
.card-body { padding: 1.5rem; }

/* Breadcrumb */
.breadcrumb-nav { padding: .75rem 0; margin-bottom: 1rem; }

/* Section headings */
.section-heading { border-left: 4px solid var(--gs-primary); padding-left: 1rem; margin-bottom: 1.5rem; }

/* Forms */
.form-control:focus { box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

/* Tables */
.table th { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .05rem; }
.table-actions .btn { padding: .2rem .5rem; font-size: .8rem; }

/* Admin layout */
.admin-wrapper { display: flex; min-height: calc(100vh - 70px); }
.admin-sidebar { width: 250px; flex-shrink: 0; padding: 1rem .75rem; }
.admin-content { flex: 1; padding: 1.5rem; overflow: auto; }

/* Status badges */
.status-pending    { background: #f59e0b; color: #fff; }
.status-confirmed  { background: #3b82f6; color: #fff; }
.status-processing { background: #8b5cf6; color: #fff; }
.status-shipped    { background: #06b6d4; color: #fff; }
.status-delivered  { background: #10b981; color: #fff; }
.status-cancelled  { background: #ef4444; color: #fff; }

/* Notification toast */
.notification-toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; width: 360px; }
.notification-toast { border-left: 4px solid; animation: slideInRight .3s ease; }
.notification-toast.toast-info    { border-color: #3b82f6; }
.notification-toast.toast-warning { border-color: #f59e0b; }
.notification-toast.toast-danger  { border-color: #ef4444; }
.notification-toast.toast-success { border-color: #10b981; }

@keyframes slideInRight {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Product cards */
.product-card { transition: transform .2s, box-shadow .2s; }
.product-card:hover { transform: translateY(-4px); }
.product-card .product-img { height: 200px; object-fit: cover; width: 100%; }
.text-price { font-weight: 700; font-size: 1.1rem; color: var(--gs-primary); }

/* Stat cards */
.stat-card { border-left: 4px solid var(--gs-primary); }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--gs-primary); }

/* Badges */
.badge-pill { border-radius: 999px; padding: .3em .75em; font-size: .75rem; }
.empty-state { text-align: center; padding: 4rem 1rem; }
.cursor-pointer { cursor: pointer; }

/* Footer */
footer { margin-top: auto; padding: 2rem 0; }
.footer-brand { font-weight: 700; font-size: 1.2rem; }

/* ── Mobile / Tablet responsive ── */

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {
    /* Admin layout: sidebar collapses above content */
    .admin-sidebar { width: 100%; min-height: auto; }
    .admin-wrapper { flex-direction: column; }
    .admin-content { padding: 1rem; }

    /* Hero: slightly less padding on tablets */
    .hero-section { padding: 3rem 1rem !important; border-radius: 0; }

    /* Tables: horizontal scroll instead of overflow */
    .table-responsive-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Cart / checkout side columns stack below main content */
    .cart-summary-col { margin-top: 1.5rem; }
    .checkout-col { margin-top: 1.5rem; }

    /* Section heading: slightly smaller on tablets */
    .section-heading { font-size: 1.6rem; }
}

/* ── Phone (≤ 576px) ── */
@media (max-width: 576px) {
    /* Notification toast: full width */
    .notification-toast-container { width: calc(100vw - 2rem); right: 1rem; left: 1rem; }

    /* Hero: compact layout for small screens */
    .hero-section { padding: 2.5rem 1rem !important; border-radius: 0; }
    .hero-section .display-4 { font-size: 2rem !important; line-height: 1.25; }
    .hero-section .lead { font-size: .95rem; }
    .hero-section .btn-lg { font-size: 1rem; padding: .6rem 1.5rem; min-height: 44px; }

    /* Scale down large display headings */
    .display-4 { font-size: 2rem; }
    .display-6 { font-size: 1.6rem !important; }

    /* Product images */
    .product-card .product-img { height: 160px; }

    /* Stat card values */
    .stat-card .stat-value { font-size: 1.4rem; }

    /* Cards: tighter inner padding */
    .card-body { padding: 1rem; }
    .card.p-5 { padding: 1.5rem !important; }
    .card.p-4 { padding: 1.25rem !important; }

    /* Section headings */
    .section-heading { font-size: 1.35rem; }

    /* Footer columns */
    footer .col-md-4, footer .col-md-2 { margin-bottom: 1rem; }

    /* Support chat widget */
    #supportChatWidget { bottom: 1rem; left: 1rem; }
    #supportChatPanel { width: calc(100vw - 3rem); }

    /* Full-width button utility */
    .btn-mobile-full { width: 100%; }

    /* Touch targets: minimum comfortable tap size (44px recommended by Apple/Google) */
    .btn:not(.btn-sm):not(.btn-link) { min-height: 42px; }
    .btn-lg { min-height: 48px; }
    .admin-sidebar .nav-link { min-height: 44px; display: flex; align-items: center; }
    .dropdown-item { min-height: 40px; display: flex; align-items: center; }

    /* Form inputs: 1rem font size prevents iOS from auto-zooming on focus */
    .form-control, .form-select { font-size: 1rem !important; }

    /* Cart table: hide per-unit price column, keep line total */
    .cart-table th.col-unit-price,
    .cart-table td.col-unit-price { display: none; }

    /* Admin mobile quick-nav: scrollable horizontal pill row */
    .admin-mobile-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .5rem;
        scrollbar-width: none;
    }
    .admin-mobile-nav::-webkit-scrollbar { display: none; }
    .admin-mobile-nav .btn { flex-shrink: 0; white-space: nowrap; }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}