@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --ui-bg-1: #08273a;
    --ui-bg-2: #16404f;
    --ui-bg-3: #2c5f56;
    --ui-surface: rgba(255, 255, 255, 0.9);
    --ui-surface-strong: rgba(255, 255, 255, 0.98);
    --ui-border: rgba(15, 23, 42, 0.12);
    --ui-text: #13293b;
    --ui-text-soft: #546c7b;
    --ui-brand: #ffc100;
    --ui-brand-dark: #d39f00;
    --ui-warn: #f97316;
    --ui-danger-bg: #fff1f2;
    --ui-danger-text: #be123c;
    --ui-success-bg: #ecfdf5;
    --ui-success-text: #047857;
    --ui-radius-lg: 22px;
    --ui-radius-md: 12px;
    --ui-shadow: 0 22px 60px rgba(2, 8, 23, 0.26);
}

body {
    font-family: 'Manrope', sans-serif !important;
    color: var(--ui-text);
}

h1,
h2,
h3,
.form-header h1,
.form-header h2,
.login-header h1,
.header h1 {
    font-family: 'Space Grotesk', sans-serif !important;
    letter-spacing: 0.01em;
}

body.page-login,
body.page-add-price,
body.page-create-order,
body.page-order-details,
body.page-dashboard,
body.page-reports {
    background:
        radial-gradient(circle at 8% 10%, rgba(14, 165, 160, 0.35), transparent 42%),
        radial-gradient(circle at 88% 15%, rgba(249, 115, 22, 0.28), transparent 40%),
        linear-gradient(145deg, var(--ui-bg-1) 0%, var(--ui-bg-2) 55%, var(--ui-bg-3) 100%) !important;
}

.login-container,
.form-container,
.card,
.kpi,
.panel,
.orders-table,
.order-card,
.container > .card,
.cards .card {
    border-radius: var(--ui-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    box-shadow: var(--ui-shadow) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.login-container,
.form-container,
.card,
.panel,
.cards .card {
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.95)) !important;
    color: var(--ui-text) !important;
}

.login-header p,
.form-header p,
.muted,
small,
.summary-label {
    color: var(--ui-text-soft) !important;
}

.form-group label,
.summary-label,
.details-table th,
.orders-table thead th {
    color: #244458 !important;
}

.form-group input,
.form-group select,
input[type=text],
input[type=email],
input[type=number],
input[type=tel],
select,
textarea {
    border-radius: var(--ui-radius-md) !important;
    border: 1px solid var(--ui-border) !important;
    background: #ffffff !important;
    color: var(--ui-text) !important;
    box-shadow: 0 1px 0 rgba(2, 8, 23, 0.04);
}

.form-group input:focus,
.form-group select:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=tel]:focus,
select:focus,
textarea:focus {
    border-color: var(--ui-brand) !important;
    outline: 2px solid rgba(255, 193, 0, 0.35);
    outline-offset: 1px;
}

.login-button,
.submit-button,
.action-button,
.btn,
.copy-button,
.print-button {
    border-radius: var(--ui-radius-md) !important;
    border: none !important;
    font-weight: 700 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.login-button,
.submit-button,
.action-button,
.btn {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-dark)) !important;
    color: #2f2500 !important;
    box-shadow: 0 12px 24px rgba(211, 159, 0, 0.4) !important;
}

.btn.secondary,
.print-button,
.copy-button {
    background: linear-gradient(135deg, #f2f7f8, #ddf2f1) !important;
    color: #124252 !important;
    box-shadow: 0 10px 18px rgba(2, 8, 23, 0.2) !important;
}

.login-button:hover,
.submit-button:hover,
.action-button:hover,
.btn:hover,
.copy-button:hover,
.print-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.logout-link {
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background: rgba(7, 16, 26, 0.35) !important;
    color: #f3fbff !important;
    font-weight: 700;
}

.error-message {
    background: var(--ui-danger-bg) !important;
    color: var(--ui-danger-text) !important;
    border-left: 4px solid var(--ui-danger-text) !important;
    border-radius: var(--ui-radius-md) !important;
}

.success-message {
    background: var(--ui-success-bg) !important;
    color: var(--ui-success-text) !important;
    border-left: 4px solid var(--ui-success-text) !important;
    border-radius: var(--ui-radius-md) !important;
}

.summary-row,
.details-table th,
.details-table td,
.orders-table th,
.orders-table td {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

.details-table td,
.summary-value,
.seats,
.badge {
    color: var(--ui-text) !important;
}

.status-pill {
    border-radius: 999px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    background: rgba(255, 193, 0, 0.25) !important;
    color: #6d5200 !important;
    font-weight: 700;
}

.status-pill.partial {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #b45309 !important;
}

.status-pill.cancelled {
    background: rgba(244, 63, 94, 0.12) !important;
    color: #be123c !important;
}

.status-pill.completed {
    background: rgba(255, 193, 0, 0.25) !important;
    color: #6d5200 !important;
}

.kpi {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)) !important;
    border: 1px solid var(--ui-border) !important;
}

.kpi h3,
.kpi .hint {
    color: var(--ui-text-soft) !important;
}

.kpi .value {
    color: var(--ui-text) !important;
}

.links {
    gap: 12px !important;
}

@media (max-width: 900px) {
    .links {
        flex-direction: column;
    }

    .links a {
        width: 100%;
        text-align: center;
    }
}

/* ── Top Navigation Bar ── */
.top-nav {
    background: rgba(7, 16, 26, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    text-decoration: none;
    padding: 18px 0;
    margin-right: 24px;
    white-space: nowrap;
}

.nav-tab {
    display: inline-block;
    padding: 18px 16px 16px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}

.nav-tab:hover { color: #fff; }

.nav-tab.active {
    color: #ffc100;
    border-bottom-color: #ffc100;
}

.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logout {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(7, 16, 26, 0.35);
    color: #f3fbff;
    text-decoration: none;
    transition: background .2s;
}

.nav-logout:hover { background: rgba(7, 16, 26, 0.6); }