/* ═══════════════════════════════════════════════════════════════
   Vettor — Veteriner B2B Pazaryeri
   Design System v3 · Teal Medical Theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
    --c-primary: #0f766e;
    --c-primary-hover: #115e59;
    --c-primary-600: #0d9488;
    --c-primary-50: #f0fdfa;
    --c-primary-100: #ccfbf1;
    --c-primary-200: #99f6e4;
    --c-bg: #f8fafc;
    --c-surface: #ffffff;
    --c-surface-2: #f1f5f9;
    --c-border: #e2e8f0;
    --c-border-light: #f1f5f9;
    --c-text: #0f172a;
    --c-text-2: #334155;
    --c-text-3: #64748b;
    --c-text-4: #94a3b8;
    --c-success: #059669;
    --c-success-bg: #ecfdf5;
    --c-success-border: #a7f3d0;
    --c-warning: #d97706;
    --c-warning-bg: #fffbeb;
    --c-warning-border: #fde68a;
    --c-danger: #dc2626;
    --c-danger-bg: #fef2f2;
    --c-danger-border: #fecaca;
    --c-info: #0284c7;
    --c-info-bg: #f0f9ff;
    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', monospace;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-full: 999px;
    --sh-xs: 0 1px 2px rgba(0,0,0,.04);
    --sh-sm: 0 1px 3px rgba(0,0,0,.05);
    --sh-md: 0 4px 14px rgba(0,0,0,.06);
    --sh-lg: 0 10px 28px rgba(0,0,0,.08);
    --header-h: 64px;
    --subnav-h: 46px;
    --max-w: 1400px;
}

/* ── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text-2);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--c-text);
    letter-spacing: -.02em;
}

a {
    color: var(--c-primary);
    text-decoration: none;
}

    a:hover {
        color: var(--c-primary-hover);
    }

/* ═══════════════════════════════════════════════════════════════
   PANEL LAYOUT — Top Header + Sub-Nav
   ═══════════════════════════════════════════════════════════════ */

.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--c-bg);
}

/* ── Header ────────────────────────────────────────────────────── */
.app-header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--header-h);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--sh-xs);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}

/* Brand */
.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary));
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(15,118,110,.3);
}

.brand-name {
    font-size: 21px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -.03em;
}

/* Search */
.header-search {
    flex: 1;
    max-width: 520px;
}

    .header-search form {
        display: flex;
        align-items: center;
        background: var(--c-surface-2);
        border: 1px solid var(--c-border);
        border-radius: var(--r-full);
        overflow: hidden;
        transition: border-color .2s, box-shadow .2s;
    }

        .header-search form:focus-within {
            border-color: var(--c-primary);
            box-shadow: 0 0 0 3px rgba(15,118,110,.1);
        }

.search-input {
    flex: 1;
    padding: 9px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--c-text);
    outline: none;
}

    .search-input::placeholder {
        color: var(--c-text-4);
    }

.search-btn {
    padding: 9px 20px;
    border: none;
    background: var(--c-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

    .search-btn:hover {
        background: var(--c-primary-hover);
    }

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.header-icon-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    text-decoration: none;
    font-size: 18px;
    color: var(--c-text-3);
    transition: background .15s, color .15s;
    position: relative;
}

    .header-icon-link:hover {
        background: var(--c-surface-2);
        color: var(--c-text);
    }

    .header-icon-link svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.header-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    padding-left: 14px;
    border-left: 1px solid var(--c-border);
}

.header-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-2);
}

.header-logout {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-danger);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    transition: background .15s;
}

    .header-logout:hover {
        background: var(--c-danger-bg);
        color: var(--c-danger);
    }

/* ── Sub-Navigation ────────────────────────────────────────────── */
.sub-nav {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: var(--header-h);
    z-index: 199;
    overflow: visible; /* dropdown taşmasına izin ver */
}


.sub-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    height: var(--subnav-h);
    overflow: visible; /* eklendi */
}

.sub-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    /* overflow-x: auto kaldırıldı — dropdown'ları kırpıyordu */
}

    .sub-nav-links::-webkit-scrollbar {
        display: none;
    }

.sub-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-3);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--r-sm);
    transition: all .15s;
    border: 1px solid transparent;
}

    .sub-nav-link:hover {
        color: var(--c-text);
        background: var(--c-surface-2);
        text-decoration: none;
    }

    .sub-nav-link.active {
        color: var(--c-primary);
        background: var(--c-primary-50);
        font-weight: 600;
        border-color: var(--c-primary-100);
    }

.sub-nav-link--admin {
    color: var(--c-warning) !important;
}

    .sub-nav-link--admin:hover {
        background: var(--c-warning-bg) !important;
    }

    .sub-nav-link--admin.active {
        color: var(--c-warning) !important;
        background: var(--c-warning-bg) !important;
        border-color: var(--c-warning-border) !important;
    }

.sub-nav-divider {
    width: 1px;
    height: 18px;
    background: var(--c-border);
    margin: 0 6px;
    flex-shrink: 0;
}

/* ── Main Content ──────────────────────────────────────────────── */
.app-main {
    flex: 1;
}

.main-container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 32px 24px;
}


/* ═══════════════════════════════════════════════════════════════
   ADMIN LAYOUT — Top Header + Sub-Nav (Seller ile aynı yapı)
   ═══════════════════════════════════════════════════════════════ */

/* Admin header accent */
.app-header--admin {
    border-bottom-color: var(--c-primary);
    box-shadow: 0 1px 0 var(--c-primary), var(--sh-xs);
}

.brand-icon--admin {
    background: linear-gradient(135deg, #b45309, #d97706) !important;
    box-shadow: 0 4px 12px rgba(180,83,9,.3) !important;
}

.brand-tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-warning);
    margin-left: 2px;
    vertical-align: middle;
}

.admin-topbar-hint {
    font-size: 13px;
    color: var(--c-text-4);
    margin-right: 8px;
}


/* ═══════════════════════════════════════════════════════════════
   PUBLIC LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.layout-public {
    min-height: 100vh;
    background: var(--c-bg);
}

.public-header {
    padding: 0 24px;
    height: var(--header-h);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 200;
}

    .public-header nav {
        max-width: var(--max-w);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        height: 100%;
    }

.public-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 19px;
    color: var(--c-text);
}

    .public-brand .brand-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

.public-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.public-main {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 32px 24px;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-approve,
.btn-reject,
.btn-sm,
.btn-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font);
    font-weight: 600;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all .18s ease;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
}

.btn-primary,
.btn-approve {
    min-height: 40px;
    padding: 8px 20px;
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    font-size: 14px;
}

    .btn-primary:hover:not(:disabled),
    .btn-approve:hover:not(:disabled) {
        background: var(--c-primary-hover);
        border-color: var(--c-primary-hover);
        color: #fff;
        text-decoration: none;
    }

.btn-secondary,
.btn-outline-secondary {
    min-height: 40px;
    padding: 8px 16px;
    background: var(--c-surface);
    border-color: var(--c-border);
    color: var(--c-text-2);
    font-size: 14px;
}

    .btn-secondary:hover,
    .btn-outline-secondary:hover {
        background: var(--c-surface-2);
        border-color: var(--c-text-4);
        text-decoration: none;
        color: var(--c-text);
    }

.btn-outline-primary {
    min-height: 40px;
    padding: 8px 16px;
    background: var(--c-surface);
    border-color: var(--c-primary-100);
    color: var(--c-primary);
    font-size: 14px;
}

    .btn-outline-primary:hover {
        background: var(--c-primary-50);
        border-color: var(--c-primary);
        text-decoration: none;
    }

.btn-reject {
    min-height: 40px;
    padding: 8px 20px;
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: #fff;
    font-size: 14px;
}

    .btn-reject:hover:not(:disabled) {
        background: #b91c1c;
        border-color: #b91c1c;
    }

.btn-sm {
    min-height: 34px;
    padding: 4px 14px;
    background: var(--c-surface);
    border-color: var(--c-primary-100);
    color: var(--c-primary);
    font-size: 13px;
    border-radius: var(--r-sm);
}

    .btn-sm:hover {
        background: var(--c-primary-50);
        border-color: var(--c-primary);
        text-decoration: none;
    }

.btn-xs {
    padding: 3px 10px;
    font-size: 12px;
    border-radius: var(--r-sm);
    min-height: auto;
}

.btn-cart {
    width: 100%;
    padding: 12px;
    font-size: 15px;
}

.btn-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--c-text-4);
    padding: 4px;
    transition: color .15s;
}

    .btn-remove:hover:not(:disabled) {
        color: var(--c-danger);
    }

button:disabled {
    opacity: .55;
    cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */

.form-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: 28px;
    margin-bottom: 20px;
    max-width: 640px;
    box-shadow: var(--sh-sm);
}

    .form-card h3 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
    }

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

    .form-group label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--c-text-2);
        margin-bottom: 5px;
    }

.form-control {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: 14px;
    font-family: var(--font);
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color .2s, box-shadow .2s;
}

    .form-control:focus {
        outline: none;
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px rgba(15,118,110,.1);
    }

.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group--half {
    width: 100%;
}

.optional {
    font-size: 12px;
    color: var(--c-text-4);
    font-weight: 400;
}

.required {
    color: var(--c-danger);
}

.form-info {
    background: var(--c-primary-50);
    border: 1px solid var(--c-primary-100);
    border-radius: var(--r-md);
    padding: 12px 16px;
    font-size: .875rem;
    color: var(--c-primary);
    margin-bottom: 16px;
}

.readonly-group .readonly-value {
    font-size: 14px;
    color: var(--c-text-2);
    background: var(--c-surface-2);
    border-radius: var(--r-md);
    padding: 9px 14px;
}


/* ═══════════════════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════════════════ */

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-pending, .status-pendingapproval, .status-badge--warning {
    background: var(--c-warning-bg);
    color: #92400e;
}

.status-approved, .status-badge--success {
    background: var(--c-success-bg);
    color: #065f46;
}

.status-rejected, .status-badge--danger {
    background: var(--c-danger-bg);
    color: #991b1b;
}

.status-draft, .status-passive, .status-badge--secondary {
    background: var(--c-surface-2);
    color: var(--c-text-3);
}

.status-badge--info {
    background: var(--c-info-bg);
    color: #0c4a6e;
}

.status-badge--primary {
    background: var(--c-primary-50);
    color: var(--c-primary);
}

/* Verification */
.verification-badge {
    padding: 12px 16px;
    border-radius: var(--r-lg);
    font-size: 14px;
    margin-bottom: 20px;
}

.verification-pending {
    background: var(--c-warning-bg);
    border: 1px solid var(--c-warning-border);
}

.verification-approved {
    background: var(--c-success-bg);
    border: 1px solid var(--c-success-border);
}

.verification-rejected {
    background: var(--c-danger-bg);
    border: 1px solid var(--c-danger-border);
}

.verification-unknown {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
}


/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */

.alert {
    padding: 12px 16px;
    border-radius: var(--r-lg);
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid transparent;
}

.alert-success {
    background: var(--c-success-bg);
    border-color: var(--c-success-border);
    color: #065f46;
}

.alert-error, .alert-danger {
    background: var(--c-danger-bg);
    border-color: var(--c-danger-border);
    color: #991b1b;
}

.alert-warning {
    background: var(--c-warning-bg);
    border-color: var(--c-warning-border);
    color: #92400e;
}

.alert-info {
    background: var(--c-info-bg);
    border: 1px solid #bae6fd;
    color: #0c4a6e;
}


/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.table-wrapper {
    overflow-x: auto;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--sh-sm);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--c-surface);
}

    .data-table th {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--c-border);
        font-size: 12px;
        font-weight: 600;
        color: var(--c-text-3);
    }

    .data-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--c-border-light);
        vertical-align: middle;
        color: var(--c-text-2);
    }

    .data-table tr:last-child td {
        border-bottom: none;
    }

    .data-table tr:hover td {
        background: var(--c-primary-50);
    }


/* ═══════════════════════════════════════════════════════════════
   LOADING & EMPTY
   ═══════════════════════════════════════════════════════════════ */

.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 200px;
    padding: 32px;
    color: var(--c-text-3);
    font-size: .9rem;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--c-border);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

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

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--c-text-3);
    background: var(--c-surface);
    border: 1px dashed var(--c-border);
    border-radius: var(--r-lg);
}

    .empty-state p {
        margin-bottom: 16px;
    }

.onboarding-banner {
    background: var(--c-primary-50);
    border: 1px solid var(--c-primary-100);
    border-radius: var(--r-lg);
    padding: 32px;
    text-align: center;
    max-width: 480px;
    margin: 40px auto;
}

    .onboarding-banner h2 {
        margin-bottom: 12px;
    }

    .onboarding-banner p {
        color: var(--c-text-3);
        margin-bottom: 20px;
    }

/* ═══════════════════════════════════════════════════════════════
   PAGE CHROME
   ═══════════════════════════════════════════════════════════════ */

.page-container {
    max-width: var(--max-w);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}

    .page-header h2 {
        margin: 0;
    }

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-primary-600);
}

.page-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--c-text);
}

.page-subtitle {
    margin: 0;
    max-width: 640px;
    color: var(--c-text-3);
    font-size: 14px;
    line-height: 1.65;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

.action-cell {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}


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

.dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Hero / Welcome */
.dashboard-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: 32px;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--c-primary-50) 0%, #ffffff 50%, var(--c-surface) 100%);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--c-primary-100);
}

.dashboard-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-hero-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 14px;
    min-width: min(420px, 100%);
}

.hero-kpi {
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--sh-xs);
}

.hero-kpi-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-3);
}

.hero-kpi-value {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--c-text);
}

.hero-kpi-sub {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-text-4);
}

/* Action queue */
.dashboard-action-queue {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-queue-card {
    background: var(--c-surface);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}

.action-queue-card__header {
    padding: 22px 24px 0;
}

    .action-queue-card__header h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .action-queue-card__header p {
        margin: 4px 0 0;
        color: var(--c-text-3);
        font-size: 13px;
    }

.action-queue-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px 24px;
}

.action-queue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: var(--r-lg);
    background: var(--c-surface-2);
    transition: box-shadow .15s;
}

    .action-queue-item:hover {
        box-shadow: var(--sh-xs);
    }

.action-queue-item__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.action-queue-item__title {
    font-weight: 600;
    color: var(--c-text);
}

.action-queue-item__meta {
    color: var(--c-text-3);
    font-size: 13px;
}

/* Summary cards */
.dashboard-section {
    margin-bottom: 0;
}

.dashboard-section-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.summary-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-radius: var(--r-xl);
    background: var(--c-surface);
    box-shadow: var(--sh-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s, transform .18s;
    cursor: default;
}

    .summary-card:hover {
        box-shadow: var(--sh-md);
        transform: translateY(-2px);
        text-decoration: none;
    }

    .summary-card.highlight {
        border-left: 3px solid var(--c-warning);
    }

.summary-card-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-lg);
    background: var(--c-primary-50);
    color: var(--c-primary);
    font-size: 12px;
    font-weight: 800;
}

.summary-card-count {
    font-size: 32px;
    line-height: 1;
    font-weight: 800;
    color: var(--c-text);
    letter-spacing: -.03em;
}

.summary-card-label {
    font-size: 13px;
    color: var(--c-text-3);
    font-weight: 600;
}

.summary-card-sub {
    font-size: 12px;
    color: var(--c-text-4);
}

/* Dashboard blocks & grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 24px;
    align-items: start;
}

.dashboard-main-column,
.dashboard-side-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dashboard-block {
    background: var(--c-surface);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
}

.dashboard-block__header {
    padding: 22px 24px 0;
}

    .dashboard-block__header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .dashboard-block__header p {
        margin: 4px 0 0;
        color: var(--c-text-3);
        font-size: 13px;
    }

.dashboard-block__content {
    padding: 20px 24px 24px;
}

.dashboard-block--soft-accent {
    background: linear-gradient(135deg, var(--c-primary-50) 0%, var(--c-surface) 50%);
}

/* Mini list */
.mini-list {
    display: flex;
    flex-direction: column;
}

.mini-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--c-border-light);
}

    .mini-list-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .mini-list-item:first-child {
        padding-top: 0;
    }

.mini-list-item__title {
    font-weight: 600;
    color: var(--c-text);
}

.mini-list-item__meta {
    margin-top: 3px;
    font-size: 13px;
    color: var(--c-text-3);
}

.mini-list-item__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mini-list-item__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-2);
    white-space: nowrap;
}

/* Metric stack */
.metric-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metric-stack-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--r-lg);
    background: var(--c-surface-2);
}

.metric-stack-row__label {
    font-size: 13px;
    color: var(--c-text-3);
}

.metric-stack-row__sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--c-text-4);
}

.metric-stack-row__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text);
}

/* Quick links */
.quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quick-link-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--c-surface-2);
    text-decoration: none;
    color: inherit;
    transition: background .15s, box-shadow .15s;
}

    .quick-link-tile:hover {
        background: var(--c-primary-50);
        box-shadow: var(--sh-xs);
        text-decoration: none;
    }

.quick-link-tile__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
}

.quick-link-tile__meta {
    font-size: 12px;
    color: var(--c-text-3);
}

/* Focus note */
.focus-note {
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--c-primary-50);
    border: 1px solid var(--c-primary-100);
    color: var(--c-primary-hover);
    line-height: 1.7;
    font-size: 14px;
}

    .focus-note p {
        margin: 0;
    }


/* ═══════════════════════════════════════════════════════════════
   MARKETPLACE
   ═══════════════════════════════════════════════════════════════ */

.marketplace-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
}

    .marketplace-header h2 {
        margin: 0;
    }

.product-count {
    font-size: .875rem;
    color: var(--c-text-3);
}

.marketplace-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}

/* Filter panel */
.filter-panel {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: 22px;
    position: sticky;
    top: calc(var(--header-h) + var(--subnav-h) + 20px);
    box-shadow: var(--sh-sm);
}

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

    .filter-group label {
        display: block;
        font-size: .8rem;
        font-weight: 600;
        color: var(--c-text-2);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 6px;
    }

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.filter-btn {
    width: 100%;
    text-align: center;
}

/* Product grid */
.product-grid-area {
    min-width: 0;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

/* Product card */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sh-xs);
    transition: box-shadow .2s, transform .2s;
}

    .product-card:hover {
        box-shadow: var(--sh-md);
        transform: translateY(-3px);
        text-decoration: none;
    }

.product-card-image {
    aspect-ratio: 1;
    background: var(--c-surface-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .product-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.product-card-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.5rem;
    color: var(--c-text-4);
}

.product-card-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-brand {
    font-size: .75rem;
    color: var(--c-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.product-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-meta {
    display: flex;
    gap: 8px;
    font-size: .8rem;
    color: var(--c-text-3);
    margin-top: 4px;
}

.skt-warning {
    color: var(--c-warning);
    font-weight: 600;
}

.product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-primary);
    margin-top: auto;
    padding-top: 8px;
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL
   ═══════════════════════════════════════════════════════════════ */

.detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: var(--c-text-3);
    margin-bottom: 24px;
}

    .detail-breadcrumb a {
        color: var(--c-primary);
    }

        .detail-breadcrumb a:hover {
            text-decoration: underline;
        }

.product-detail-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 40px;
}

.detail-images {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-cover {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--c-surface-2);
    box-shadow: var(--sh-xs);
}

.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-thumbnails {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.thumb-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 2px solid var(--c-border);
    cursor: pointer;
}

.thumb-active {
    border-color: var(--c-primary);
}

.detail-no-image {
    aspect-ratio: 1;
    background: var(--c-surface-2);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--c-text-4);
}

.detail-brand {
    font-size: .8rem;
    font-weight: 700;
    color: var(--c-primary);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.detail-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 12px;
    line-height: 1.3;
}

.detail-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--c-primary);
    margin-bottom: 16px;
}

.detail-specs {
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--c-surface-2);
}

.spec-row {
    display: flex;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border-light);
    font-size: .9rem;
}

    .spec-row:last-child {
        border-bottom: none;
    }

.spec-label {
    width: 120px;
    font-weight: 600;
    color: var(--c-text-2);
    flex-shrink: 0;
}

.spec-value {
    color: var(--c-text);
}

.detail-description {
    margin-bottom: 20px;
    font-size: .9rem;
    color: var(--c-text-2);
    line-height: 1.6;
}

    .detail-description h4 {
        font-size: .9rem;
        font-weight: 700;
        color: var(--c-text);
        margin: 0 0 8px;
    }

.seller-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.rating-count {
    font-size: .875rem;
    color: var(--c-text-3);
}

.add-to-cart-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-msg {
    font-size: .875rem;
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    width: fit-content;
}

.qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--c-surface-2);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    color: var(--c-text-2);
}

    .qty-btn:hover:not(:disabled) {
        background: var(--c-primary-50);
        color: var(--c-primary);
    }

    .qty-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.qty-value {
    padding: 8px 16px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

.out-of-stock-notice {
    background: var(--c-danger-bg);
    border: 1px solid var(--c-danger-border);
    border-radius: var(--r-md);
    padding: 12px 16px;
    color: #991b1b;
    font-size: .9rem;
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   REVIEWS
   ═══════════════════════════════════════════════════════════════ */

.reviews-section {
    border-top: 1px solid var(--c-border);
    padding-top: 32px;
    margin-top: 8px;
}

    .reviews-section h3 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 16px;
    }

.review-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    box-shadow: var(--sh-xs);
}

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

.review-date {
    font-size: .8rem;
    color: var(--c-text-4);
}

.review-comment {
    font-size: .9rem;
    color: var(--c-text-2);
    margin: 0;
    line-height: 1.5;
}

.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.star-full {
    color: #f59e0b;
}

.star-half {
    color: #f59e0b;
    opacity: .6;
}

.star-empty {
    color: var(--c-border);
}

.star-value {
    font-size: .8rem;
    color: var(--c-text-3);
    margin-left: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   CART
   ═══════════════════════════════════════════════════════════════ */

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
}

.cart-seller-group {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--sh-xs);
}

.seller-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    color: var(--c-text-3);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border-light);
}

.seller-group-footer {
    text-align: right;
    font-size: .9rem;
    color: var(--c-text-3);
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border-light);
}

.cart-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-border-light);
    transition: opacity .2s;
}

.cart-item--busy {
    opacity: .5;
    pointer-events: none;
}

.cart-item-image img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--r-md);
}

.cart-item-image--placeholder {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
}

.cart-item-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.cart-item-unit-price {
    font-size: .85rem;
    color: var(--c-text-3);
    margin-bottom: 8px;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.cart-item-line-total {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--c-primary);
}

.cart-clear-row {
    text-align: right;
    margin-top: 8px;
}

.cart-summary-box {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: 24px;
    position: sticky;
    top: calc(var(--header-h) + var(--subnav-h) + 20px);
    box-shadow: var(--sh-sm);
}

    .cart-summary-box h3 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 16px;
    }

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    padding: 5px 0;
}

.summary-row--info {
    color: var(--c-text-3);
    font-size: .82rem;
}

.summary-row--total {
    font-size: 1rem;
    font-weight: 600;
}

.summary-divider {
    border-top: 1px solid var(--c-border);
    margin: 10px 0;
}


/* ═══════════════════════════════════════════════════════════════
   CHECKOUT
   ═══════════════════════════════════════════════════════════════ */

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
    align-items: start;
}

.checkout-seller-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-border-light);
}

.checkout-seller-name {
    font-size: .85rem;
    color: var(--c-text-3);
    margin-bottom: 6px;
    font-weight: 600;
}

.checkout-line-item {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    padding: 3px 0;
}

.checkout-line-name {
    color: var(--c-text);
}

    .checkout-line-name small {
        color: var(--c-text-4);
        margin-left: 4px;
    }

.checkout-line-total {
    font-weight: 600;
    white-space: nowrap;
}

.checkout-group-subtotal {
    text-align: right;
    font-size: .82rem;
    color: var(--c-text-3);
    margin-top: 4px;
}

.checkout-summary-divider {
    border-top: 1px solid var(--c-border);
    margin: 10px 0;
}

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    font-size: .95rem;
    padding: 5px 0;
}

.checkout-total-row--info {
    color: var(--c-text-3);
    font-size: .85rem;
}

.checkout-back-link {
    margin-top: 16px;
    text-align: center;
}

    .checkout-back-link a {
        font-size: .85rem;
        color: var(--c-text-3);
    }

        .checkout-back-link a:hover {
            color: var(--c-primary);
        }


/* ═══════════════════════════════════════════════════════════════
   ORDERS
   ═══════════════════════════════════════════════════════════════ */

/* Order success */
.order-success-box {
    max-width: 540px;
    margin: 4rem auto;
    text-align: center;
    background: var(--c-surface);
    border-radius: var(--r-xl);
    padding: 3rem 2rem;
    box-shadow: var(--sh-md);
}

.order-success-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.order-success-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: .75rem;
    color: var(--c-success);
}

.order-success-number {
    font-size: 1.1rem;
    margin-bottom: .4rem;
    color: var(--c-text);
}

.order-success-total {
    font-size: 1rem;
    color: var(--c-text-3);
    margin-bottom: 1rem;
}

.order-success-message {
    font-size: .9rem;
    color: var(--c-text-3);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.order-success-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Order list */
.order-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-list-row {
    display: grid;
    grid-template-columns: 200px 1fr 100px 140px 32px;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sh-xs);
    transition: box-shadow .15s, transform .15s;
}

    .order-list-row:hover {
        box-shadow: var(--sh-md);
        transform: translateY(-1px);
        text-decoration: none;
    }

.order-number {
    font-weight: 700;
    font-size: .95rem;
    display: block;
}

.order-date {
    font-size: .8rem;
    color: var(--c-text-4);
}

.badge-unpaid {
    display: inline-block;
    margin-top: 4px;
    font-size: .72rem;
    color: var(--c-danger);
    font-weight: 600;
}

.order-line-count {
    font-size: .85rem;
    color: var(--c-text-3);
}

.list-arrow {
    font-size: 1.4rem;
    color: var(--c-text-4);
}

/* Order detail */
.order-detail-header-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    box-shadow: var(--sh-sm);
}

.order-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.meta-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-text-4);
}

.meta-value {
    font-size: .9rem;
    color: var(--c-text-2);
}

.meta-value--amount {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--c-primary);
}

.order-shipping-info h4 {
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--c-text-3);
}

.order-shipping-info p {
    font-size: .88rem;
    line-height: 1.7;
    color: var(--c-text);
}

/* Seller order group */
.seller-order-group {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--sh-xs);
}

.seller-order-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border-light);
    font-size: .9rem;
}

.seller-order-status {
    margin-left: auto;
}

.seller-order-subtotal {
    font-weight: 700;
    font-size: .95rem;
    color: var(--c-primary);
    margin-left: 8px;
}

.seller-order-ref {
    font-size: .9rem;
    font-weight: 400;
    color: var(--c-text-4);
    margin-left: 8px;
}

/* Order line row */
.order-line-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border-light);
}

    .order-line-row:last-child {
        border-bottom: none;
    }

.order-line-image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--r-md);
}

.order-line-image--placeholder {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
}

.order-line-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.order-line-meta {
    font-size: .82rem;
    color: var(--c-text-3);
    margin-bottom: 6px;
}

    .order-line-meta .sep {
        margin: 0 4px;
    }

.order-line-status-row {
    margin-bottom: 6px;
}

.order-line-tracking {
    font-size: .8rem;
    color: var(--c-text-3);
    margin-top: 4px;
}

.tracking-label {
    margin-right: 4px;
}

.tracking-id {
    font-family: var(--font-mono);
    background: var(--c-surface-2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: .78rem;
}

.order-line-cancel-reason {
    font-size: .8rem;
    color: var(--c-danger);
    margin-top: 4px;
}

.order-line-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 110px;
}

.order-line-total {
    font-weight: 700;
    font-size: 1rem;
    color: var(--c-primary);
}

.order-line-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.order-line-no-action {
    font-size: .8rem;
    color: var(--c-text-4);
}

.order-line-return-notice {
    font-size: .8rem;
    color: #92400e;
    background: var(--c-warning-bg);
    border: 1px solid var(--c-warning-border);
    border-radius: 4px;
    padding: 3px 8px;
    margin-top: 4px;
    display: inline-block;
}

    .order-line-return-notice a {
        color: inherit;
        font-weight: 600;
        text-decoration: underline;
    }

/* Payment summary */
.order-payment-summary {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    max-width: 360px;
    margin-left: auto;
    margin-top: 20px;
    box-shadow: var(--sh-sm);
}

    .order-payment-summary h3 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 12px;
    }

.payment-row {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    padding: 4px 0;
    color: var(--c-text-2);
}

.payment-row--total {
    border-top: 1px solid var(--c-border);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 1rem;
}

/* Shipment */
.shipment-info-card {
    background: var(--c-surface);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: var(--sh-xs);
}

.shipment-info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

    .shipment-info-header h3 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
    }

.shipment-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 24px;
}

.shipment-info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tracking-highlight {
    background: var(--c-primary-50);
    color: var(--c-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
}

.shipment-indicator {
    display: inline-block;
    font-size: .75rem;
    color: var(--c-primary);
    margin-top: 3px;
    font-weight: 600;
}

/* Seller order lines card */
.seller-order-lines-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--sh-xs);
}

    .seller-order-lines-card .card-header {
        padding: 14px 20px;
        background: var(--c-surface-2);
        border-bottom: 1px solid var(--c-border-light);
    }

        .seller-order-lines-card .card-header h3 {
            font-size: .95rem;
            font-weight: 700;
            margin: 0;
        }

.seller-order-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

    .seller-order-actions h4 {
        font-size: .85rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--c-text-4);
        margin-bottom: 4px;
    }

.buyer-info-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 12px 16px;
    font-size: .82rem;
    color: var(--c-text-3);
    margin-top: 8px;
}

.notice-icon {
    font-size: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
   DOCUMENTS
   ═══════════════════════════════════════════════════════════════ */

.document-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.document-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--c-surface-2);
    border-radius: var(--r-md);
}

.doc-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-filename {
    font-size: 13px;
    color: var(--c-text-3);
}

.doc-date {
    font-size: 12px;
    color: var(--c-text-4);
}

.doc-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.admin-note {
    font-size: 12px;
    color: var(--c-text-3);
    max-width: 200px;
    text-align: right;
}

.detail-list {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 0;
    font-size: 14px;
}

    .detail-list dt {
        font-weight: 500;
        color: var(--c-text-3);
        padding: 4px 0;
    }

    .detail-list dd {
        color: var(--c-text);
        padding: 4px 0;
    }

.action-card .action-buttons {
    display: flex;
    gap: 12px;
}

.reject-form {
    padding-top: 16px;
    border-top: 1px solid var(--c-border-light);
}


/* ═══════════════════════════════════════════════════════════════
   IMAGE LIST / PRODUCT STATUS
   ═══════════════════════════════════════════════════════════════ */

.image-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.image-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    background: var(--c-surface-2);
}

    .image-item.cover-image {
        background: var(--c-primary-50);
    }

.image-filename {
    flex: 1;
    font-size: .875rem;
}

.cover-badge {
    font-size: .75rem;
    background: var(--c-primary);
    color: white;
    padding: 2px 10px;
    border-radius: var(--r-full);
}

.status-banner {
    padding: 12px 16px;
    border-radius: var(--r-md);
    margin-bottom: 16px;
    background: var(--c-surface-2);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.status-note {
    font-size: .875rem;
    color: var(--c-text-3);
}

.rejection-detail {
    width: 100%;
    background: var(--c-warning-bg);
    border-left: 3px solid var(--c-warning);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: .875rem;
    margin-top: 8px;
}

.rejection-row td {
    background: #fffcf5;
    padding: 6px 12px;
}

.rejection-note {
    font-size: .85rem;
    color: #b45309;
}

    .rejection-note a {
        color: #b45309;
        font-weight: 600;
    }


/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */

.login-shell {
    max-width: 1200px;
    margin: 32px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    align-items: stretch;
    min-height: calc(100vh - 160px);
}

.login-shell__visual {
    padding: 42px;
    border-radius: 24px;
    background: linear-gradient(145deg, #042f2e 0%, #0f3d3a 55%, #134e4a 100%);
    color: #ccfbf1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

    .login-shell__visual .page-eyebrow {
        color: var(--c-primary-200);
    }

    .login-shell__visual h1 {
        margin: 0;
        color: #fff;
        font-size: 38px;
        line-height: 1.1;
        letter-spacing: -.03em;
    }

    .login-shell__visual p {
        margin: 0;
        max-width: 540px;
        color: #94d2cc;
        font-size: 15px;
        line-height: 1.8;
    }

.login-shell__feature-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.login-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--r-xl);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
}

.feature-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.login-feature strong {
    display: block;
    color: #fff;
    font-size: 14px;
    margin-bottom: 4px;
}

.login-feature span,
.feature-text span {
    color: #94d2cc;
    font-size: 13px;
    line-height: 1.6;
}

.login-card-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 440px;
    padding: 40px;
    border-radius: 24px;
    background: var(--c-surface);
    box-shadow: var(--sh-lg);
}

.login-card__header h2 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.15;
    color: var(--c-text);
}

.login-card__header p {
    margin: 0 0 24px;
    color: var(--c-text-3);
    font-size: 14px;
    line-height: 1.7;
}

.login-cta {
    width: 100%;
    min-height: 50px;
    border-radius: var(--r-lg);
    font-size: 15px;
}

.login-divider {
    position: relative;
    margin: 24px 0;
    text-align: center;
}

    .login-divider::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        background: var(--c-border);
    }

    .login-divider span {
        position: relative;
        padding: 0 12px;
        background: var(--c-surface);
        color: var(--c-text-4);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

.register-link {
    color: var(--c-text-3);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

    .register-link a {
        color: var(--c-primary);
        font-weight: 600;
    }


/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-box {
    background: var(--c-surface);
    border-radius: var(--r-xl);
    padding: 28px;
    max-width: 440px;
    width: 90%;
    box-shadow: var(--sh-lg);
}

    .modal-box h3 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 12px;
    }

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.text-danger {
    color: var(--c-danger) !important;
    font-weight: 600;
}

.text-success {
    color: var(--c-success) !important;
    font-weight: 600;
}

.text-warning {
    color: var(--c-warning) !important;
}

.text-muted {
    color: var(--c-text-4) !important;
}

.mono {
    font-family: var(--font-mono);
    font-size: .88rem;
}

.mb-4 {
    margin-bottom: 24px;
}

.mt-1 {
    margin-top: 8px;
}

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

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

.mt-4 {
    margin-top: 24px;
}

.info-icon {
    margin-right: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   BLAZOR ERROR UI
   ═══════════════════════════════════════════════════════════════ */

#blazor-error-ui {
    background: var(--c-danger-bg);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 14px;
    color: #991b1b;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: .75rem;
        top: .5rem;
    }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-shell__visual {
        min-height: auto;
    }
}

@media (max-width: 980px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero {
        flex-direction: column;
    }

    .dashboard-hero-kpis {
        min-width: 0;
    }

    .order-detail-header-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .product-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .marketplace-layout {
        grid-template-columns: 1fr;
    }

    .filter-panel {
        position: static;
    }

    .header-search {
        display: none;
    }

    .header-inner {
        gap: 12px;
    }

    .main-container {
        padding: 20px 16px;
    }

    .order-list-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .order-list-col--arrow {
        display: none;
    }
}

@media (max-width: 640px) {
    .summary-grid,
    .quick-links,
    .dashboard-hero-kpis {
        grid-template-columns: 1fr;
    }

    .page-title {
        font-size: 24px;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .action-queue-item,
    .metric-stack-row,
    .mini-list-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .login-shell__visual {
        padding: 28px;
        border-radius: 18px;
    }

        .login-shell__visual h1 {
            font-size: 28px;
        }

    .login-card {
        padding: 28px;
        border-radius: 18px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ── Responsive Invoice Table ─────────────────────────── */
table.invoice {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

    table.invoice caption {
        font-size: 1.5em;
        margin: .5em 0 .75em;
    }

    table.invoice tr {
        background-color: #f8f8f8;
        border: 1px solid #ddd;
        padding: .35em;
    }

    table.invoice th,
    table.invoice td {
        padding: .625em;
        text-align: center;
    }

    table.invoice th {
        font-size: .85em;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    table.invoice tbody tr:nth-child(even) {
        background: gainsboro;
    }

@media screen and (max-width: 600px) {
    table.invoice {
        border: 0;
    }

        table.invoice caption {
            font-size: 1.3em;
        }

        table.invoice thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        table.invoice tr {
            border-bottom: 3px solid #ddd;
            display: block;
            margin-bottom: .625em;
        }

        table.invoice td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: right;
        }

            table.invoice td::before {
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
            }

            table.invoice td:last-child {
                border-bottom: 0;
            }
}
/* ── Blazor Modal Fix ──────────────────────────────────────────── */
.modal.d-block {
    position: fixed !important;
    inset: 0;
    z-index: 1050;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
}

/* Dialog */
.modal-dialog {
    position: relative;
    z-index: 1055;
    width: 100%;
    max-width: 520px;
    margin: auto;
    pointer-events: none;
}

.modal-dialog-centered {
    /* flex parent zaten centerlıyor */
}

.modal-dialog.modal-sm {
    max-width: 380px;
}


/* Content */
.modal-content {
    pointer-events: auto;
    background: var(--c-surface);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

/* Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--c-border-light);
}

.modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text);
}

/* Body */
.modal-body {
    padding: 20px 24px;
}

/* Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--c-border-light);
}

/* Close button */
.btn-close {
    appearance: none;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    cursor: pointer;
    position: relative;
    color: var(--c-text-3);
    transition: background .15s;
    font-size: 0; /* text gizle */
}

    .btn-close:hover {
        background: var(--c-surface-2);
    }

    .btn-close::before,
    .btn-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
    }

    .btn-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .btn-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

/* ── Bootstrap-compat yardımcılar ──────────────────────────────── */
.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-end {
    justify-content: flex-end;
}

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

.gap-2 {
    gap: 8px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-3 {
    margin-bottom: 16px;
}

.me-1 {
    margin-right: 6px;
}

.small {
    font-size: 13px;
}

/* form-label (modal form'larda kullanılıyor) */
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-2);
    margin-bottom: 5px;
}

/* alert-dismissible close */
.alert-dismissible {
    position: relative;
    padding-right: 48px;
}

    .alert-dismissible .btn-close {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
    }

/* spinner */
.spinner-border {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
}

.spinner-border-sm {
    width: 14px;
    height: 14px;
}

/* btn-link (tablo action butonları) */
.btn-link {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-primary);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    transition: background .12s;
    text-decoration: none;
}

    .btn-link:hover {
        background: var(--c-primary-50);
        text-decoration: none;
    }

/* ── Dropdown Navigation (pure CSS hover) ──────────────────────── */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
}

.nav-caret {
    font-size: 10px;
    margin-left: 2px;
    opacity: .6;
    transition: transform .2s;
}

/* Menü — varsayılan gizli */
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    padding: 6px 0;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    pointer-events: none;
}

/* Hover ile aç */
.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Caret döndür */
.nav-dropdown:hover > .nav-dropdown-toggle .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown-item {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s;
}

    .nav-dropdown-item:hover {
        background: var(--c-surface-2);
        color: var(--c-text);
        text-decoration: none;
    }

    .nav-dropdown-item.active {
        color: var(--c-primary);
        background: var(--c-primary-50);
        font-weight: 600;
    }

/* ── Eksik Bootstrap-compat yardımcılar ────────────────────────── */
.d-none {
    display: none !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.gap-1 {
    gap: 4px;
}

.gap-3 {
    gap: 16px;
}

.gap-4 {
    gap: 24px;
}

.m-0 {
    margin: 0;
}

.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.ms-1 {
    margin-left: 4px;
}

.ms-2 {
    margin-left: 8px;
}

.me-2 {
    margin-right: 8px;
}

.mt-0 {
    margin-top: 0;
}

.p-0 {
    padding: 0;
}

.p-2 {
    padding: 8px;
}

.p-3 {
    padding: 16px;
}

.p-4 {
    padding: 24px;
}

.px-3 {
    padding-left: 16px;
    padding-right: 16px;
}

.py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.w-100 {
    width: 100%;
}

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

.text-end {
    text-align: right;
}

.text-start {
    text-align: left;
}

.fw-bold {
    font-weight: 700;
}

.fw-semibold {
    font-weight: 600;
}

.fs-5 {
    font-size: 1.1rem;
}

.fs-6 {
    font-size: .9rem;
}

.rounded {
    border-radius: var(--r-md);
}

.border {
    border: 1px solid var(--c-border);
}

.border-0 {
    border: 0;
}

.overflow-hidden {
    overflow: hidden;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

/* btn-danger (silme butonları için) */
.btn-danger {
    min-height: 34px;
    padding: 4px 14px;
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: #fff;
    font-size: 13px;
}

    .btn-danger:hover:not(:disabled) {
        background: #b91c1c;
        border-color: #b91c1c;
        color: #fff;
    }

/* ValidationSummary & ValidationMessage */
.validation-message {
    font-size: 12px;
    color: var(--c-danger);
    margin-top: 4px;
}

.validation-errors {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .validation-errors li {
        font-size: 13px;
        color: var(--c-danger);
        margin-bottom: 4px;
    }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT THUMBNAIL – hover zoom
   ═══════════════════════════════════════════════════════════════ */

.product-thumb {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

    .product-thumb img {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 6px;
        cursor: zoom-in;
        transition: box-shadow .2s;
    }

    .product-thumb:hover img {
        box-shadow: 0 0 0 2px var(--c-primary);
    }

    .product-thumb .thumb-zoom {
        display: none;
        position: fixed;
        z-index: 9999;
        width: 240px;
        height: 240px;
        object-fit: contain;
        background: var(--c-surface);
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0,0,0,.25);
        border: 2px solid var(--c-border);
        pointer-events: none;
    }

    .product-thumb:hover .thumb-zoom {
        display: block;
    }

.product-thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #f0f0f0;
    border-radius: 6px;
    font-size: 20px;
    flex-shrink: 0;
}

/* Fix: foto kolonu sabit genişlik */
.data-table th:first-child,
.data-table td:first-child {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
}

.invoice th:first-child,
.invoice td:first-child {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
}