/* =====================================================
   FILE: static/css/style.css
   WHY IT EXISTS:
       Core Marina Salepoint theme.
       Bootstrap handles layout; this adds gradients, brand colors,
       card styles, and responsive typography.

   STRUCTURE:
       1. CSS Variables (theme tokens)
       2. Animations + live badge transitions
       3. Base body + layout
       4. Navbar (desktop)
       4b. Navbar (mobile)
       5. Container
       6. Buttons
       7. Cards
       8. Auth pages
       9. Forms
       10. Password toggle
       11. Role tabs (signup)
       12. Toasts
       13. Hero (desktop)
       13b. Hero (mobile ≤768px)
       14. Mobile polish (≤576px) — orders, chat, general
   ===================================================== */


/* =====================================================
   1. CSS VARIABLES
   ===================================================== */
:root {
    --primary: #7c3aed;
    --primary-dark: #5b21b6;
    --accent: #ec4899;
    --gradient: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    --gradient-soft: linear-gradient(135deg, #ede9fe 0%, #fce7f3 100%);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #dc2626;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
}


/* =====================================================
   2. ANIMATIONS + LIVE BADGE TRANSITIONS
   ===================================================== */
@keyframes slideInRight {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Smooth scaling when a badge count changes */
#badge-cart, #badge-orders, #badge-messages,
#stat-orders-count, #stat-draft-orders,
#stat-total-items, #stat-visible-items {
    transition: transform 0.25s ease-out;
    display: inline-block;
}


/* =====================================================
   3. BASE BODY + LAYOUT
   ===================================================== */
body {
    font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: #fafaff;
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }


/* =====================================================
   4. NAVBAR — DESKTOP
   ===================================================== */
.navbar-marina {
    background: var(--gradient);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25);
    padding: 8px 0;
}
.navbar-marina .container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.navbar-marina .navbar-brand {
    font-weight: 800;
    font-size: 1.25rem;
    color: #fff !important;
    margin-right: auto;
}
.navbar-marina .nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 500;
    margin-left: 6px;
}
.navbar-marina .nav-link:hover {
    color: #fff !important;
}
.navbar-marina .btn-nav-cta {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 6px 16px;
    border-radius: 30px;
    font-weight: 600;
    margin-left: 8px;
    text-decoration: none;
    white-space: nowrap;
}
.navbar-marina .btn-nav-cta:hover {
    background: #fff;
    color: var(--primary) !important;
}
.navbar-marina .navbar-toggler {
    border: none !important;
    padding: 6px 10px;
    margin-left: 10px;
    box-shadow: none !important;
}
.navbar-marina .navbar-toggler:focus {
    box-shadow: none !important;
}


/* =====================================================
   4b. NAVBAR — MOBILE (collapsed menu)
   ===================================================== */
@media (max-width: 991px) {

    /* Dropdown panel */
    .navbar-marina .navbar-collapse {
        flex-basis: 100%;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 12px;
        margin-top: 10px;
        padding: 14px 16px;
    }

    .navbar-marina .navbar-nav {
        width: 100%;
        align-items: stretch !important;
    }
    .navbar-marina .navbar-nav .nav-item {
        width: 100%;
        margin: 2px 0;
    }
    .navbar-marina .nav-link {
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 0.98rem;
        margin-left: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .navbar-marina .nav-link:hover {
        background: rgba(255, 255, 255, 0.12);
    }
    .navbar-marina .btn-nav-cta {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 16px;
        margin: 6px 0 0;
    }
    .navbar-marina .navbar-brand {
        font-size: 1.1rem;
    }
}


/* =====================================================
   5. CONTAINER
   ===================================================== */
.marina-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
}


/* =====================================================
   6. BUTTONS
   ===================================================== */
.btn-marina {
    background: var(--gradient);
    color: #fff !important;
    border: none;
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 600;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}
.btn-marina:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
    color: #fff !important;
    text-decoration: none;
}
.btn-marina-outline {
    background: #fff;
    color: var(--primary) !important;
    border: 2px solid var(--primary);
    padding: 8px 22px;
    border-radius: 30px;
    font-weight: 600;
}
.btn-marina-outline:hover {
    background: var(--primary);
    color: #fff !important;
    text-decoration: none;
}


/* =====================================================
   7. CARDS
   ===================================================== */
.card-marina {
    background: #fff;
    border: none;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}
.card-category {
    background: #fff;
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
.card-category:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.18);
    text-decoration: none;
    color: inherit;
}
.card-category .icon {
    font-size: 2.8rem;
    display: block;
    margin-bottom: 12px;
}
.card-category .name {
    font-weight: 700;
    color: var(--text);
}


/* =====================================================
   8. AUTH PAGES
   ===================================================== */
.auth-wrapper {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: var(--gradient-soft);
}
.auth-card {
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 20px 50px rgba(124, 58, 237, 0.15);
    width: 100%;
    max-width: 480px;
}
.auth-card-wide { max-width: 640px; }
.auth-card h2 {
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}
.auth-card .subtitle {
    color: var(--muted);
    margin-bottom: 24px;
}


/* =====================================================
   9. FORMS
   ===================================================== */
.form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    font-size: 0.9rem;
}
.form-control, .form-select {
    border-radius: 10px;
    border: 1.5px solid var(--border);
    padding: 11px 14px;
    font-size: 0.98rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.errorlist {
    color: var(--danger);
    list-style: none;
    padding: 4px 0 0 0;
    margin: 0;
    font-size: 0.88rem;
}
.errorlist li::before { content: '⚠ '; }


/* =====================================================
   10. PASSWORD TOGGLE
   ===================================================== */
.password-wrapper { position: relative; }
.password-wrapper .form-control { padding-right: 44px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1.15rem;
    padding: 0;
}
.password-toggle:hover { color: var(--primary); }


/* =====================================================
   11. ROLE TABS (signup)
   ===================================================== */
.role-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}
.role-tab {
    padding: 16px 12px;
    text-align: center;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 600;
    color: #4b5563;
}
.role-tab input { display: none; }
.role-tab:hover { border-color: var(--primary); }
.role-tab.active {
    border-color: var(--primary);
    background: var(--gradient-soft);
    color: var(--primary-dark);
}
.role-tab .role-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 6px;
}


/* =====================================================
   12. TOASTS
   ===================================================== */
.toast-container { z-index: 1080; }
.marina-toast {
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    font-weight: 500;
}
.toast-success { background: linear-gradient(135deg, #10b981, #059669); }
.toast-error   { background: linear-gradient(135deg, #ef4444, #dc2626); }
.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.toast-info    { background: var(--gradient); }


/* =====================================================
   13. HERO — DESKTOP
   ===================================================== */
.hero {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 40%, #db2777 100%);
    color: #fff;
    padding: 20px 20px 24px;
    border-radius: 0 0 24px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.22);
}
.hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -50px; left: -40px;
    width: 140px; height: 140px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.hero h1 {
    font-weight: 900;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin-bottom: 6px;
    letter-spacing: -0.4px;
    position: relative;
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.18),
        0 0 24px rgba(255, 255, 255, 0.25);
    display: inline-block;
    padding: 0 8px;
    line-height: 1.25;
}
.hero p {
    font-size: 0.92rem;
    opacity: 0.95;
    margin-bottom: 12px;
    position: relative;
    font-weight: 500;
    letter-spacing: 0.2px;
}


/* =====================================================
   13b. HERO — MOBILE (max 768px)
   ===================================================== */
@media (max-width: 768px) {
    .hero {
        padding: 12px 14px 14px;
        border-radius: 0 0 18px 18px;
    }
    .hero::before,
    .hero::after {
        display: none;
    }
    .hero h1 {
        font-size: 1.05rem;
        margin-bottom: 2px;
        line-height: 1.2;
        letter-spacing: -0.2px;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }
    .hero p {
        font-size: 0.72rem;
        margin-bottom: 6px;
        letter-spacing: 0.1px;
    }
}


/* =====================================================
   14. MOBILE POLISH (max 576px)
   Applies to: home, orders, chat, dashboards, general.
   Note: category_shop.html ships its own scope-styled
         components (item cards, filters, share buttons).
   ===================================================== */
@media (max-width: 576px) {

    /* ---------- Hero (duplicated for safety) ---------- */
    .hero {
        padding: 12px 14px 14px;
        border-radius: 0 0 18px 18px;
    }
    .hero::before,
    .hero::after { display: none; }
    .hero h1 {
        font-size: 1.05rem;
        margin-bottom: 4px;
        letter-spacing: -0.2px;
        line-height: 1.25;
    }
    .hero p {
        font-size: 0.78rem;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    /* ---------- Container spacing ---------- */
    .marina-container {
        padding: 12px 10px;
    }
    .card-marina {
        padding: 14px 12px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    .card-category {
        padding: 16px 10px;
    }
    .card-category .icon {
        font-size: 2rem;
        margin-bottom: 6px;
    }
    .card-category .name {
        font-size: 0.85rem;
    }

    /* ---------- Headings inside cards ---------- */
    .card-marina h2 { font-size: 1.25rem; }
    .card-marina h6 { font-size: 0.95rem; }

    /* ---------- Search bars (orders + chat) ---------- */
    #orderSearchInput,
    #chatSearchInput {
        font-size: 0.85rem;
        padding: 8px 10px;
    }
    .input-group-text {
        padding: 8px 10px;
    }

    /* ---------- Status tabs — horizontal scroll ---------- */
    /* Any .d-flex.gap-2.flex-wrap inside a card becomes a single
       horizontally-scrollable row on mobile */
    .card-marina .d-flex.gap-2.flex-wrap {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 6px;
        margin: -4px 0 0 -4px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .card-marina .d-flex.gap-2.flex-wrap::-webkit-scrollbar {
        height: 4px;
    }
    .card-marina .d-flex.gap-2.flex-wrap::-webkit-scrollbar-thumb {
        background: #d8b4fe;
        border-radius: 4px;
    }
    .card-marina .d-flex.gap-2.flex-wrap > a.btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.78rem;
        padding: 6px 12px;
    }

    /* ---------- Order cards — tighter internals ---------- */
    .card-marina[data-order-id] .row.g-3 > [class*="col-"] {
        width: 100%;
    }
    .card-marina[data-order-id] .p-3 {
        padding: 10px !important;
    }
    .card-marina[data-order-id] table td {
        font-size: 0.82rem;
        padding: 4px 6px;
    }
    .card-marina[data-order-id] .badge {
        font-size: 0.68rem;
        padding: 3px 8px;
    }
    .card-marina[data-order-id] form .btn,
    .card-marina[data-order-id] .btn-sm {
        font-size: 0.78rem;
        padding: 6px 12px;
    }

    /* ---------- Chat rows — tighter on mobile ---------- */
    #chatListContainer .chat-thread-row {
        padding: 12px 14px !important;
    }
    #chatListContainer .chat-thread-row .badge {
        font-size: 0.68rem;
    }
    #chatListContainer .chat-thread-row b {
        font-size: 0.92rem;
    }

    /* ---------- Install App button — move up so it doesn't cover content ---------- */
    #pwaInstallBtn {
        bottom: 80px !important;
        right: 12px !important;
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
        border-radius: 24px !important;
    }
    #pwaInstallBtn i {
        font-size: 0.9rem;
    }
}