/* =============================================================================
   delivery-partner/assets/css/style.css — Visual identity
   -----------------------------------------------------------------------------
   Pulls in the shared admin/vendor stylesheet then overrides the primary
   accent color so the delivery portal feels like a distinct product:
       Customer site  → blue
       Admin panel    → blue
       Vendor panel   → blue
       Delivery boy   → orange→red gradient (matches the storefront footer
                        "Drive & earn" button + the Flutter app accent)
   ============================================================================= */

@import url('../../../admin/assets/css/admin.css');

:root {
    --primary:        #F59E0B;
    --primary-dark:   #D97706;
    --primary-light:  #FCD34D;
    --secondary:      #EF4444;
    --gradient-primary: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
    --gradient-soft:    linear-gradient(135deg, rgba(245,158,11,0.08), rgba(239,68,68,0.06));
}
[data-theme="dark"] {
    --primary-light:  #FBBF24;
}

/* Brand block + every link/button that used the default blue now picks up
   the orange→red gradient via these overrides. */
.sidebar-brand .brand-icon  { background: var(--gradient-primary) !important; }
.btn-primary                { background: var(--primary) !important; }
.btn-primary:hover          { background: var(--primary-dark) !important; }

.nav-link.active            { color: var(--primary) !important; }
.nav-link.active::before    { background: var(--primary) !important; }

.stat-icon.primary          { background: var(--gradient-soft); color: var(--primary); }

/* =============================================================================
   Layout — .topbar + .content-body
   -----------------------------------------------------------------------------
   The delivery panel uses .topbar / .content-body (NOT the admin's .top-header
   / .page-content), so the imported admin.css doesn't style these. Without
   the rules below the topbar is a plain block and items stack vertically,
   colliding with the orange .earn-hero card. These rules give the topbar a
   proper flex row + sticky positioning and add the missing page padding.
   ============================================================================= */

.topbar {
    height: var(--header-height, 64px);
    background: var(--bg-header, var(--bg-card));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar h1 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
    /* Long titles never wrap into the actions area */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar .menu-toggle {
    /* Hidden on desktop — only mobile uses it to slide the sidebar in. */
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.topbar .menu-toggle:hover { background: var(--gradient-soft); color: var(--primary); }

.content-body {
    padding: 24px 28px;
    flex: 1;
}

/* Sidebar slide-in overlay so tapping outside closes the drawer on mobile.
   The button onclick already toggles .sidebar.open — admin.css handles the
   transform. We just need the dim backdrop. */
.sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 49;
    display: none;
}
.sidebar.open ~ .sidebar-overlay,
.sidebar-overlay.show { display: block; }
@media (min-width: 1025px) { .sidebar-overlay { display: none !important; } }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .topbar { padding: 0 18px; }
    .topbar .menu-toggle { display: inline-flex; }
    .content-body { padding: 18px; }
}

@media (max-width: 640px) {
    .topbar {
        padding: 0 14px;
        gap: 8px;
        /* The actions wrap onto a second row on the very-narrow screens, so
           bump the topbar height a bit and align top so they sit cleanly. */
        height: auto;
        min-height: var(--header-height, 64px);
        padding-top: 10px;
        padding-bottom: 10px;
        align-items: center;
        flex-wrap: wrap;
    }
    .topbar h1 {
        font-size: 16px;
        flex: 1 1 auto;
    }
    .topbar .topbar-actions {
        margin-left: auto;
        gap: 8px;
    }
    .content-body { padding: 14px; }

    /* Earnings hero — give it room to breathe on phones */
    .earn-hero  { padding: 18px 16px; border-radius: 14px; margin-bottom: 16px; }
    .earn-hero h2 { font-size: 26px; }
    .earn-hero .earn-sub-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .earn-hero .earn-sub { padding: 10px 8px; }
    .earn-hero .earn-sub small { font-size: 9.5px; }
    .earn-hero .earn-sub strong { font-size: 14px; }

    /* Online toggle row — keep elements aligned on tiny screens */
    .online-toggle { padding: 14px 14px; gap: 12px; border-radius: 12px; }
    .online-toggle .ot-text h3 { font-size: 14.5px; }
    .online-toggle .ot-text p  { font-size: 11.5px; }

    /* Stats grid — already 1col below 640px via admin.css, plus tighten cards */
    .offer-card { padding: 14px; }
    .offer-card .oc-num { font-size: 14px; }
    .offer-card .oc-earn { font-size: 15px; }
    .offer-card .oc-meta { gap: 10px; font-size: 11.5px; }
    .offer-card .oc-actions button { padding: 10px 8px; font-size: 13px; }
}

@media (max-width: 380px) {
    .earn-hero .earn-sub-grid { grid-template-columns: 1fr 1fr; }
    .earn-hero .earn-sub:nth-child(3) { grid-column: span 2; }
    .topbar .user-chip .user-avatar { width: 28px; height: 28px; font-size: 12px; }
    .topbar .online-badge { padding: 4px 9px; font-size: 11px; }
}

/* Earnings hero block — bigger + gradient bg to make the partner's most
   important number unmissable. */
.earn-hero {
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 22px;
    box-shadow: 0 8px 24px rgba(245,158,11,0.25);
}
.earn-hero h2 { color: #fff; margin: 0 0 4px; font-size: 32px; font-weight: 800; letter-spacing: -0.5px; }
.earn-hero p  { color: rgba(255,255,255,0.85); margin: 0; font-size: 13.5px; }
.earn-hero .earn-sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}
.earn-hero .earn-sub {
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(8px);
    padding: 12px;
    border-radius: 12px;
}
.earn-hero .earn-sub small { color: rgba(255,255,255,0.75); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.earn-hero .earn-sub strong { display: block; font-size: 17px; font-weight: 800; margin-top: 2px; }

/* Online/offline switch row — large and prominent so partners can find it
   instantly without scrolling. */
.online-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    transition: all 0.2s;
}
.online-toggle.is-online { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.05); }
.online-toggle .ot-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
}
.online-toggle.is-online .ot-dot { background: #10B981; box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }
.online-toggle .ot-text  { flex: 1; }
.online-toggle .ot-text h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--text-primary); }
.online-toggle .ot-text p  { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* iOS-style switch */
.switch { position: relative; display: inline-block; width: 52px; height: 30px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute; cursor: pointer; inset: 0; background: #cbd5e1;
    transition: 0.3s; border-radius: 30px;
}
.switch .slider::before {
    position: absolute; content: ''; height: 24px; width: 24px; left: 3px; top: 3px;
    background: #fff; transition: 0.3s; border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.switch input:checked + .slider { background: #10B981; }
.switch input:checked + .slider::before { transform: translateX(22px); }
.switch input:disabled + .slider { opacity: 0.55; cursor: not-allowed; }

/* Offer cards — the bread-and-butter list on the dashboard. */
.offer-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 10px;
    transition: all 0.2s;
}
.offer-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.offer-card .oc-top {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.offer-card .oc-num { font-weight: 800; font-size: 15px; color: var(--text-primary); }
.offer-card .oc-earn { font-weight: 900; font-size: 17px; color: #10B981; }
.offer-card .oc-meta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
}
.offer-card .oc-meta i { font-size: 14px; margin-right: 3px; }
.offer-card .oc-addr { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.offer-card .oc-actions { display: flex; gap: 8px; }
.offer-card .oc-actions button { flex: 1; padding: 9px 12px; font-size: 13.5px; font-weight: 700; }
.offer-card .countdown { color: var(--primary); font-weight: 700; }
.offer-card .countdown.expiring { color: var(--secondary); }

/* Status pill — used on order detail + history rows. */
.status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: #fff;
}
.status-pill.assigned   { background: #6B7280; }
.status-pill.accepted   { background: #2563EB; }
.status-pill.picked_up  { background: #8B5CF6; }
.status-pill.in_transit { background: #F59E0B; }
.status-pill.delivered  { background: #10B981; }
.status-pill.failed     { background: #EF4444; }
.status-pill.cancelled  { background: #94A3B8; }
.status-pill.rejected   { background: #F97316; }

/* Map/address card on order detail. */
.addr-card {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 12px;
}
.addr-card .addr-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient-soft);
    color: var(--primary);
    font-size: 22px;
    flex-shrink: 0;
}
.addr-card .addr-text  { flex: 1; min-width: 0; }
.addr-card .addr-label { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.addr-card .addr-line  { font-size: 14px; color: var(--text-primary); margin-top: 4px; line-height: 1.5; }
.addr-card .addr-cta   {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 10px;
    font-size: 12px; font-weight: 700;
    text-decoration: none;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Notifications list */
.notif-item {
    display: flex; gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.15s;
}
.notif-item:hover { border-color: var(--primary); }
.notif-item.unread { background: var(--gradient-soft); border-left: 3px solid var(--primary); }
.notif-item .notif-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
}
.notif-item .notif-body { flex: 1; min-width: 0; }
.notif-item .notif-title { font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 2px; }
.notif-item .notif-note  { font-size: 12.5px; color: var(--text-muted); }
.notif-item .notif-time  { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

/* OTP entry box */
.otp-row {
    display: flex; gap: 8px; justify-content: center;
    margin: 16px 0;
}
.otp-row input {
    width: 44px; height: 52px;
    text-align: center;
    font-size: 22px; font-weight: 800;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s;
}
.otp-row input:focus { border-color: var(--primary); }

/* Timeline (delivery status logs) */
.timeline { padding-left: 8px; border-left: 2px solid var(--border); }
.timeline .tl-row { position: relative; padding: 8px 0 8px 18px; }
.timeline .tl-row::before {
    content: '';
    position: absolute; left: -8px; top: 13px;
    width: 12px; height: 12px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--bg-card);
}
.timeline .tl-status { font-weight: 700; font-size: 13.5px; color: var(--text-primary); }
.timeline .tl-meta { font-size: 12px; color: var(--text-muted); }