/**
 * CodeAffiliate Rewards System — Global Premium Design System
 * 8px spacing · navy/gold palette · Inter/Poppins · soft shadows
 */

:root {
    --premium-space-1: 8px;
    --premium-space-2: 16px;
    --premium-space-3: 24px;
    --premium-space-4: 32px;
    --premium-space-5: 40px;
    --premium-navy: #0f1c2e;
    --premium-navy-soft: #1e3a5f;
    --premium-charcoal: #1a1f2e;
    --premium-gold: #c9a227;
    --premium-gold-soft: #e8d48b;
    --premium-white: #ffffff;
    --premium-surface: #f8fafc;
    --premium-border: rgba(15, 28, 46, 0.08);
    --premium-shadow-sm: 0 4px 16px rgba(15, 28, 46, 0.06);
    --premium-shadow-md: 0 12px 32px rgba(15, 28, 46, 0.1);
    --premium-shadow-lg: 0 20px 48px rgba(15, 28, 46, 0.12);
    --premium-radius: 16px;
    --premium-radius-sm: 12px;
    --premium-radius-xs: 8px;
    --premium-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --premium-font-display: "Poppins", var(--premium-font);
    --premium-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dash-space-1: var(--premium-space-1);
    --dash-space-2: var(--premium-space-2);
    --dash-space-3: var(--premium-space-3);
    --dash-space-4: var(--premium-space-4);
    --dash-space-5: var(--premium-space-5);
    --dash-navy: var(--premium-navy);
    --dash-navy-soft: var(--premium-navy-soft);
    --dash-charcoal: var(--premium-charcoal);
    --dash-gold: var(--premium-gold);
    --dash-gold-soft: var(--premium-gold-soft);
    --dash-white: var(--premium-white);
    --dash-surface: var(--premium-surface);
    --dash-border: var(--premium-border);
    --dash-shadow-sm: var(--premium-shadow-sm);
    --dash-shadow-md: var(--premium-shadow-md);
    --dash-shadow-lg: var(--premium-shadow-lg);
    --dash-radius: var(--premium-radius);
    --dash-radius-sm: var(--premium-radius-sm);
    --dash-font: var(--premium-font);
    --dash-font-display: var(--premium-font-display);
    --dash-ease: var(--premium-ease);
}

/* Base app shell */
.premium-app {
    font-family: var(--premium-font);
    color: var(--premium-charcoal);
    -webkit-font-smoothing: antialiased;
}

.premium-app .page-title,
.premium-app h1.page-title {
    font-family: var(--premium-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--premium-navy);
}

/* 12-column responsive grid utility */
.premium-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--premium-space-2);
    width: 100%;
}

.premium-grid-span-12 { grid-column: 1 / -1; }
.premium-grid-span-6 { grid-column: span 6; }
.premium-grid-span-4 { grid-column: span 4; }
.premium-grid-span-3 { grid-column: span 3; }

@media (max-width: 991.98px) {
    .premium-grid-span-6,
    .premium-grid-span-4,
    .premium-grid-span-3 {
        grid-column: 1 / -1;
    }
}

/* Cards & panels */
.premium-app .admin-panel,
.premium-app .card:not(.border-0) {
    border: 1px solid var(--premium-border);
    border-radius: var(--premium-radius-sm);
    box-shadow: var(--premium-shadow-sm);
    transition: box-shadow 0.25s var(--premium-ease), transform 0.25s var(--premium-ease);
}

.premium-app .admin-panel {
    background: var(--premium-white);
    padding: var(--premium-space-3);
}

.premium-app .card:hover {
    box-shadow: var(--premium-shadow-md);
}

.premium-app .premium-glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.88) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Tables */
.premium-app .table,
.premium-app table.table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--premium-radius-sm);
    overflow: hidden;
    box-shadow: var(--premium-shadow-sm);
    border: 1px solid var(--premium-border);
}

.premium-app .table thead th {
    background: linear-gradient(180deg, var(--premium-navy) 0%, var(--premium-navy-soft) 100%);
    color: var(--premium-white);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    padding: var(--premium-space-2);
}

.premium-app .table tbody tr:nth-child(even) {
    background-color: rgba(248, 250, 252, 0.9);
}

.premium-app .table tbody tr {
    transition: background-color 0.2s var(--premium-ease);
}

.premium-app .table tbody tr:hover {
    background-color: rgba(201, 162, 39, 0.08);
}

.premium-app .table tbody td {
    padding: var(--premium-space-2);
    vertical-align: middle;
    border-color: var(--premium-border);
}

.premium-app .premium-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.premium-app .premium-status--ok { color: #15803d; }
.premium-app .premium-status--warn { color: #b45309; }
.premium-app .premium-status--danger { color: #b91c1c; }

/* Buttons */
.premium-app .btn {
    border-radius: var(--premium-radius-xs);
    font-weight: 500;
    transition: box-shadow 0.25s var(--premium-ease), transform 0.15s var(--premium-ease), background-color 0.2s var(--premium-ease);
    position: relative;
    overflow: hidden;
}

.premium-app .btn-primary {
    background: linear-gradient(135deg, var(--premium-navy-soft) 0%, var(--premium-navy) 100%);
    border-color: var(--premium-navy);
}

.premium-app .btn-primary:hover,
.premium-app .btn-primary:focus {
    background: linear-gradient(135deg, var(--premium-navy) 0%, #0a1422 100%);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25), var(--premium-shadow-sm);
}

.premium-app .btn-outline-primary {
    color: var(--premium-navy);
    border-color: var(--premium-navy-soft);
}

.premium-app .btn-outline-primary:hover {
    background: var(--premium-navy);
    box-shadow: 0 0 12px rgba(30, 58, 95, 0.35);
}

.premium-app .btn-premium-gold,
.premium-app .admin-dash-action--highlight {
    background: linear-gradient(135deg, var(--premium-gold) 0%, #a8861f 100%);
    color: var(--premium-navy);
    border: none;
}

.premium-app .btn:hover {
    transform: translateY(-1px);
}

.premium-app .btn:active {
    transform: translateY(0);
}

.premium-app .btn .bi {
    margin-right: 0.25rem;
}

/* Forms */
.premium-app .form-control,
.premium-app .form-select {
    border-radius: var(--premium-radius-xs);
    border-color: rgba(15, 28, 46, 0.15);
    padding: 0.625rem 0.875rem;
    transition: border-color 0.2s var(--premium-ease), box-shadow 0.2s var(--premium-ease);
}

.premium-app .form-control:focus,
.premium-app .form-select:focus {
    border-color: var(--premium-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}

.premium-app .form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--premium-navy);
    margin-bottom: var(--premium-space-1);
}

/* Modals */
.premium-app .modal-content {
    border: none;
    border-radius: var(--premium-radius);
    box-shadow: var(--premium-shadow-lg);
    overflow: hidden;
}

.premium-app .modal.fade .modal-dialog {
    transition: transform 0.35s var(--premium-ease), opacity 0.35s var(--premium-ease);
}

.premium-app .modal-header {
    background: linear-gradient(180deg, var(--premium-surface) 0%, var(--premium-white) 100%);
    border-bottom: 1px solid var(--premium-border);
    padding: var(--premium-space-2) var(--premium-space-3);
}

.premium-app .modal-body {
    padding: var(--premium-space-3);
}

.premium-app .modal-footer {
    border-top: 1px solid var(--premium-border);
    padding: var(--premium-space-2) var(--premium-space-3);
}

.premium-app .btn-close {
    border-radius: 50%;
    transition: background-color 0.2s var(--premium-ease);
}

.premium-app .btn-close:hover {
    background-color: rgba(15, 28, 46, 0.08);
}

/* Alerts */
.premium-app .alert {
    border-radius: var(--premium-radius-xs);
    border: none;
    box-shadow: var(--premium-shadow-sm);
}

/* Admin shell premium */
.admin-body-premium .admin-sidebar {
    background: linear-gradient(180deg, #0a1220 0%, var(--premium-navy) 100%);
}

.admin-body-premium .admin-main,
.admin-body-premium .admin-main--premium {
    background: linear-gradient(180deg, #eef2f7 0%, var(--premium-surface) 120px);
    color: var(--premium-charcoal);
}

.admin-body-premium .admin-brand {
    font-family: var(--premium-font-display);
    color: #ffffff;
}

.admin-body-premium .page-title {
    font-family: var(--premium-font-display);
}

/* Store portal */
.store-portal-premium .navbar-premium {
    background: linear-gradient(90deg, var(--premium-navy) 0%, var(--premium-navy-soft) 100%) !important;
    box-shadow: var(--premium-shadow-md);
    padding-top: var(--premium-space-2);
    padding-bottom: var(--premium-space-2);
}

.store-portal-premium .navbar-brand {
    font-family: var(--premium-font-display);
    font-weight: 600;
}

.store-portal-premium .premium-store-card {
    border-radius: var(--premium-radius);
    border: 1px solid var(--premium-border);
    box-shadow: var(--premium-shadow-sm);
    transition: transform 0.25s var(--premium-ease), box-shadow 0.25s var(--premium-ease);
    text-decoration: none;
    color: inherit;
    height: 100%;
    background: var(--premium-white);
}

.store-portal-premium .premium-store-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--premium-shadow-md);
    border-color: rgba(201, 162, 39, 0.35);
}

.store-portal-premium .premium-store-card__icon {
    font-size: 2.5rem;
    color: var(--premium-gold);
}

.store-portal-premium .store-portal-header {
    background: linear-gradient(90deg, var(--premium-navy) 0%, var(--premium-navy-soft) 100%);
    box-shadow: var(--premium-shadow-md);
}

.store-portal-premium .store-portal-identity__store-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
}

.store-portal-premium .store-portal-identity--header .store-portal-identity__store-name {
    line-height: 1.25;
}

.store-portal-premium .store-portal-identity--page .store-portal-identity__store-label {
    margin-bottom: 0.15rem;
}

.store-portal-premium .store-portal-footer {
    border-top: 1px solid var(--premium-border);
    background: var(--premium-white);
}

.store-portal-premium .store-scan-page .leading-normal {
    line-height: 1.5;
}

.store-portal-premium .store-portal-main {
    overflow-x: hidden;
    min-width: 0;
}

.store-portal-premium .store-portal-nav .btn {
    min-height: 2.5rem;
}

.store-portal-premium .premium-store-card__body {
    min-width: 0;
}

.store-portal-premium .premium-store-card__title {
    color: var(--premium-navy);
    font-family: var(--premium-font-display);
    word-break: break-word;
}

.store-portal-premium .premium-store-card__desc {
    word-break: break-word;
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    .store-portal-premium .store-dashboard-intro .page-title {
        font-size: 1.35rem;
        line-height: 1.25;
    }

    .store-portal-premium .premium-store-card__body {
        display: flex;
        align-items: flex-start;
        gap: var(--premium-space-2);
        text-align: left;
        padding: var(--premium-space-2) var(--premium-space-3);
    }

    .store-portal-premium .premium-store-card__icon {
        font-size: 2rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
    }

    .store-portal-premium .premium-store-card__content {
        min-width: 0;
        flex: 1 1 auto;
    }

    .store-portal-premium .premium-store-card__title {
        margin-bottom: 0.35rem !important;
    }

    .store-portal-premium .store-scan-page {
        overflow: visible;
    }
}

@media (min-width: 768px) {
    .store-portal-premium .premium-store-card__body {
        text-align: center;
        padding: var(--premium-space-3);
    }
}

/* Auth surfaces */
.premium-auth-page {
    background: linear-gradient(160deg, #eef2f7 0%, var(--premium-surface) 40%, #e8ecf4 100%);
    min-height: 100vh;
}

.premium-auth-card {
    border: 1px solid var(--premium-border);
    border-radius: var(--premium-radius);
    box-shadow: var(--premium-shadow-lg);
    background: var(--premium-white);
    overflow: hidden;
}

.premium-auth-card::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--premium-gold) 0%, var(--premium-navy-soft) 100%);
}

.premium-auth-card .card-body {
    padding: var(--premium-space-4);
}

.premium-auth-brand {
    font-family: var(--premium-font-display);
    font-weight: 700;
    color: var(--premium-navy);
    letter-spacing: -0.02em;
}

/* Public / legal */
.premium-public-header {
    background: var(--premium-white);
    border-bottom: 1px solid var(--premium-border);
    box-shadow: var(--premium-shadow-sm);
}

.premium-public-header .brand {
    font-family: var(--premium-font-display);
    font-weight: 600;
    color: var(--premium-navy);
    text-decoration: none;
}

.premium-footer {
    background: linear-gradient(180deg, var(--premium-navy) 0%, #0a1220 100%);
    color: rgba(255, 255, 255, 0.75);
    padding: var(--premium-space-3) 0;
}

.premium-footer a {
    color: var(--premium-gold-soft);
    text-decoration: none;
    transition: color 0.2s var(--premium-ease);
}

.premium-footer a:hover {
    color: var(--premium-white);
}

/* Premium chart block (shared) */
.premium-chart,
.admin-dash-chart {
    padding: var(--premium-space-2);
    min-height: 280px;
    border-radius: var(--premium-radius);
    background: var(--premium-white);
    border: 1px solid var(--premium-border);
    box-shadow: var(--premium-shadow-sm);
    transition: box-shadow 0.25s var(--premium-ease);
}

.premium-chart:hover,
.admin-dash-chart:hover {
    box-shadow: var(--premium-shadow-md);
}

.premium-chart__title,
.admin-dash-chart__title {
    font-family: var(--premium-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--premium-navy);
    margin: 0 0 var(--premium-space-2);
}

/* Ripple */
.premium-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: premium-ripple 0.6s var(--premium-ease);
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

@keyframes premium-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Pagination */
.premium-app .pagination .page-link {
    border-radius: var(--premium-radius-xs);
    margin: 0 2px;
    color: var(--premium-navy);
}

.premium-app .pagination .page-item.active .page-link {
    background: var(--premium-navy);
    border-color: var(--premium-navy);
}