/* ============================================
   RefLogix Hybrid Midnight Theme
   Dark nav/sidebar + Light content workspace
   ============================================ */

:root {
    /* Brand core */
    --color-navy-deep: #071634;
    --color-navy: #0b234a;
    --color-royal: #1857d8;
    --color-royal-light: #3d7dff;

    --color-gold: #f7b733;
    --color-gold-deep: #c78b1f;

    --color-white: #ffffff;
    --color-offwhite: #f4f6fb;
    --color-card-border: #d2d8e7;

    /* Text */
    --color-text-dark: #111625;
    --color-text-mid: #5e6a84;
    --color-text-light: #f7f9ff;

    /* Surfaces */
    --color-surface-page: #f4f6fb;
    --color-surface-card: #ffffff;
    --color-surface-card-dark: #0b234a;

    /* Gradients for ultra-gel */
    --grad-nav: linear-gradient(135deg, #071634 0%, #0b234a 35%, #1857d8 100%);
    --grad-button-primary: linear-gradient(135deg, #3d7dff 0%, #1857d8 40%, #0b234a 100%);
    --grad-button-primary-hover: linear-gradient(135deg, #5b8eff 0%, #3d7dff 40%, #1857d8 100%);
    --grad-button-gold: linear-gradient(145deg, #fce38a 0%, #f7b733 40%, #c78b1f 100%);
    --grad-hero-dark: radial-gradient(circle at 10% 0%, #1857d8 0%, #0b234a 40%, #071634 100%);

    /* Shape & shadows */
    --radius-card: 18px;
    --radius-pill: 999px;
    --radius-medium: 12px;

    --shadow-soft: 0 6px 18px rgba(9, 22, 56, 0.16);
    --shadow-strong: 0 16px 40px rgba(9, 22, 56, 0.3);

    --transition-fast: 140ms ease-out;
    --transition-med: 220ms ease-out;

    /* Legacy mappings for compatibility */
    --color-primary: #0b234a;
    --color-primary-light: #1857d8;
    --color-primary-mid: #123063;
    --color-primary-dark: #071634;
    --color-secondary: #f7b733;
    --color-secondary-light: #fce38a;
    --color-secondary-bg: rgba(247, 183, 51, 0.15);
    --color-accent: #f7b733;
    --color-accent-dark: #c78b1f;
    --color-royal-blue: #1857d8;
    --color-royal-blue-light: #3d7dff;
    --color-royal-blue-dark: #0b234a;
    --color-royal-blue-bg: rgba(24, 87, 216, 0.12);
    --color-gold-light: #fce38a;
    --color-gold-dark: #c78b1f;
    --color-gold-bg: rgba(247, 183, 51, 0.15);
    --color-gold-hover: #fbbf24;
    --color-bg: #f4f6fb;
    --color-sidebar: #071634;

    /* Sport-Specific Icon Colors */
    --color-football-brown: #f7b733;
    --color-football-bg: rgba(247, 183, 51, 0.15);
    --color-basketball: #F97316;
    --color-baseball: #EF4444;
    --color-soccer: #16A34A;
    --color-hockey: #3B82F6;
    --color-volleyball: #8B5CF6;
    --color-icon-default: #5e6a84;
    --color-icon-neutral: #5e6a84;
}

/* ============================================
   Base Styles & Typography
   ============================================ */

body {
    background: var(--color-surface-page);
    color: var(--color-text-dark);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-weight: 400;
    min-height: 100vh;
}

h1, .heading-h1 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-dark);
}

h2, .heading-h2 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-dark);
}

h3, .heading-h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-dark);
}

.text-body {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-dark);
}

.text-muted {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-mid);
}

.text-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-mid);
}

/* ============================================
   Icon Classes
   ============================================ */

.icon-default {
    color: var(--color-icon-default);
}

.icon-neutral {
    color: var(--color-icon-neutral);
}

.icon-football {
    color: var(--color-football-brown);
}

.icon-basketball {
    color: var(--color-basketball);
}

.icon-baseball {
    color: var(--color-baseball);
}

.icon-soccer {
    color: var(--color-soccer);
}

.icon-hockey {
    color: var(--color-hockey);
}

.icon-volleyball {
    color: var(--color-volleyball);
}

.icon-gold {
    color: var(--color-gold);
    filter: drop-shadow(0 0 8px rgba(247, 183, 51, 0.5));
}

/* ============================================
   Layout & Page Wrapper - Light Background
   ============================================ */

.app,
.main-layout,
.page-wrapper {
    background: var(--color-surface-page);
    min-height: 100vh;
}

.main-content,
.content-area {
    background: var(--color-surface-page);
    padding: 1.5rem 2rem;
}

/* ============================================
   Cards - Light Theme (Default)
   ============================================ */

.card,
.panel,
.dashboard-card,
.log-entry-card,
.stats-card,
.tax-card {
    background: var(--color-surface-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-card-border);
    box-shadow: var(--shadow-soft);
    color: var(--color-text-dark);
    padding: 1.25rem 1.5rem;
    overflow: hidden;
}

.card-brand {
    background: var(--color-surface-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-card-border);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.table-card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-card-border);
}

/* ============================================
   Dark Hero Cards (Schedule C, Tax Summary, etc.)
   ============================================ */

.card-hero,
.card-dark,
.tax-summary-hero,
.schedule-c-snapshot {
    background: var(--grad-hero-dark);
    color: var(--color-text-light);
    border-radius: var(--radius-card);
    border: none;
    box-shadow: var(--shadow-strong);
}

.card-hero h1,
.card-hero h2,
.card-hero h3,
.card-hero p,
.card-hero span,
.card-dark h1,
.card-dark h2,
.card-dark h3,
.card-dark p,
.card-dark span,
.tax-summary-hero h1,
.tax-summary-hero h2,
.tax-summary-hero p,
.schedule-c-snapshot h1,
.schedule-c-snapshot h2,
.schedule-c-snapshot p,
.schedule-c-snapshot div {
    color: var(--color-text-light);
}

/* ============================================
   Header & Navigation - Midnight Gel Bar
   ============================================ */

.app-header,
header,
.navbar,
.top-bar {
    background-image: var(--grad-nav);
    color: var(--color-text-light);
    box-shadow: var(--shadow-strong);
    position: relative;
    z-index: 20;
}

header a,
.navbar a,
.navbar .nav-link,
.navbar .logo-text,
.top-bar a {
    color: var(--color-text-light);
}

header a:hover,
.navbar a:hover,
.top-bar a:hover {
    opacity: 0.9;
}

.bg-header,
.gradient-header,
.gradient-banner {
    background-image: var(--grad-nav);
    color: var(--color-text-light);
    box-shadow: var(--shadow-strong);
}

/* ============================================
   Sidebar - Dark Navy with White Text
   ============================================ */

.app-sidebar,
.sidebar,
.side-nav,
.layout-sidebar,
.bg-sidebar {
    background-color: var(--color-navy-deep);
    color: var(--color-text-light);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar a,
.side-nav a,
.sidebar .nav-item,
.side-nav .nav-item,
.app-sidebar a {
    color: var(--color-text-light);
}

/* Clean Navigation Items - Remove Button Look */
.sidebar .nav-item,
.side-nav .nav-item,
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    width: 100%;
    color: var(--color-text-light);
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: background 160ms ease-out, color 160ms ease-out;
    font-weight: 400;
}

.sidebar .nav-item i,
.sidebar .nav-item svg,
.side-nav .nav-item i,
.side-nav .nav-item svg {
    width: 20px;
    height: 20px;
    color: var(--color-text-light);
    flex-shrink: 0;
}

.sidebar .nav-item:hover,
.side-nav .nav-item:hover,
.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

/* Active State - Royal Blue Left Border with Soft Background */
.sidebar .nav-item.active,
.side-nav .nav-item.active,
.sidebar-link.active {
    background-color: rgba(24, 87, 216, 0.14);
    border-left: 5px solid var(--color-royal);
    padding-left: calc(0.85rem - 5px);
    color: var(--color-white);
    font-weight: 600;
    border-radius: 8px;
}

.sidebar .nav-item.active i,
.sidebar .nav-item.active svg,
.side-nav .nav-item.active i,
.side-nav .nav-item.active svg {
    color: var(--color-white);
}

/* ============================================
   Gradient Classes
   ============================================ */

.gradient-schedule-c,
.schedule-c-gradient {
    background: var(--grad-hero-dark);
}

.schedule-c-snapshot {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-metrics-row {
    padding-top: 0.5rem;
}

/* ============================================
   Background Utilities
   ============================================ */

.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-surface {
    background-color: var(--color-surface-page);
}

.bg-royal-blue {
    background-color: var(--color-royal-blue);
}

.bg-football {
    background-color: var(--color-football-bg);
}

.bg-gold {
    background-color: var(--color-gold);
}

.bg-gold-light {
    background-color: var(--color-gold-bg);
}

.bg-icon-neutral {
    background-color: rgba(94, 106, 132, 0.12);
}

.bg-icon-yellow {
    background-color: var(--color-gold-bg);
}

.bg-light {
    background-color: var(--color-surface-page);
}

.bg-card {
    background-color: var(--color-surface-card);
}

/* ============================================
   Text Color Utilities
   ============================================ */

.text-primary {
    color: var(--color-text-dark);
}

.text-secondary-brand {
    color: var(--color-secondary);
}

.text-accent {
    color: var(--color-accent);
}

.text-royal-blue {
    color: var(--color-royal-blue);
}

.text-gold {
    color: var(--color-gold);
}

.text-gold-dark {
    color: var(--color-gold-dark);
}

.text-dark {
    color: var(--color-text-dark);
}

.text-light {
    color: var(--color-text-light);
}

.text-mid {
    color: var(--color-text-mid);
}

/* ============================================
   Border Utilities
   ============================================ */

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

.border-secondary {
    border-color: var(--color-secondary);
}

.border-accent {
    border-color: var(--color-accent);
}

.border-royal-blue {
    border-color: var(--color-royal-blue);
}

.border-brand-primary {
    border-color: var(--color-primary);
}

.border-brand-secondary {
    border-color: var(--color-secondary);
}

.border-brand-accent {
    border-color: var(--color-accent);
}

.border-gold {
    border-color: var(--color-gold);
}

.border-card {
    border-color: var(--color-card-border);
}

/* ============================================
   Global Button System - Curved Ultra-Gel Pills
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 1.4rem;
    border-radius: var(--radius-pill);
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-image var(--transition-med),
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
    text-decoration: none;
    white-space: normal;
}

/* Auth page buttons - larger for better text fit */
.btn-auth {
    padding: 1.2rem 2.5rem;
    font-size: 1.05rem;
    min-height: 3.5rem;
    height: 3.5rem;
    line-height: 1.5rem;
}

/* Primary = Royal Blue Gel (core actions: Save, Create, Update) */
.btn-primary,
button.primary,
button[type="submit"].primary {
    background-image: var(--grad-button-primary);
    border-radius: var(--radius-pill);
    border: none;
    color: var(--color-white);
    box-shadow: var(--shadow-strong);
}

.btn-primary:hover,
button.primary:hover {
    background-image: var(--grad-button-primary-hover);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-primary:active,
button.primary:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 8px 20px rgba(9, 22, 56, 0.4);
}

/* Secondary = Gold Gel (supporting actions) */
.btn-secondary,
.btn-gold,
button.secondary,
button.gold {
    background-image: var(--grad-button-gold);
    border-radius: var(--radius-pill);
    border: none;
    color: #2a220f;
    box-shadow: 0 10px 24px rgba(199, 139, 31, 0.45);
}

.btn-secondary:hover,
.btn-gold:hover,
button.secondary:hover,
button.gold:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(199, 139, 31, 0.55);
}

.btn-secondary:active,
.btn-gold:active,
button.secondary:active,
button.gold:active {
    transform: translateY(1px) scale(0.99);
}

/* Danger = Red Gel (Delete, Remove, etc.) */
.btn-danger {
    background-image: linear-gradient(135deg, #ef4444 0%, #dc2626 40%, #b91c1c 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 24px rgba(185, 28, 28, 0.45);
}

.btn-danger:hover {
    background-image: linear-gradient(135deg, #f87171 0%, #ef4444 40%, #dc2626 100%);
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 14px 32px rgba(185, 28, 28, 0.55);
}

.btn-danger:active {
    transform: translateY(1px) scale(0.99);
}

/* Outline variant */
.btn-outline {
    background: transparent;
    border: 2px solid var(--color-royal);
    color: var(--color-royal);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--color-royal);
    color: var(--color-white);
    transform: translateY(-1px);
}

/* Full-width on mobile, inline on desktop for primary CTAs */
.btn-block {
    width: 100%;
}

@media (min-width: 768px) {
    .btn-block {
        width: auto;
        min-width: 9rem;
    }
}

/* Size variants */
.btn-sm {
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
}

.btn-lg {
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
}

/* Icon spacing */
.btn i {
    font-size: 0.9em;
    margin-right: 0.35rem;
}

/* Disabled state */
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ============================================
   Page-Level Action Buttons
   ============================================ */

.page-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.4rem;
    min-width: 160px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    border: none;
    color: var(--color-white);
    background-image: var(--grad-button-primary);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background-image var(--transition-med),
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}

/* Empty state Create Crew button */
.btn-primary.btn-lg-crew {
    padding: 0.75rem 2rem;
    min-width: 180px;
    font-size: 0.95rem;
}

/* Form action buttons (Create/Update Official, Create Game, etc.) */
.btn-primary.btn-form-action,
.btn-secondary.btn-form-action {
    padding: 0.7rem 2rem;
    min-width: 140px;
    font-size: 0.95rem;
    white-space: normal;
}

.page-action-btn:hover {
    background-image: var(--grad-button-primary-hover);
    box-shadow: var(--shadow-strong);
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.page-action-btn:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 8px 18px rgba(9, 22, 56, 0.45);
}

/* ============================================
   Ultra-Gel Dashboard Action Tiles
   ============================================ */

.action-gel-tile {
    border-radius: 20px;
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    
    /* Ultra-Gel Core with Inner Bevels */
    background: linear-gradient(145deg, var(--gel-light), var(--gel-dark));
    box-shadow:
        inset 2px 2px 4px rgba(255,255,255,0.18),
        inset -2px -2px 5px rgba(0,0,0,0.35);
}

.action-gel-tile:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 2px 2px 6px rgba(255,255,255,0.22),
        inset -2px -2px 6px rgba(0,0,0,0.4),
        0 4px 12px rgba(0,0,0,0.25);
    filter: brightness(1.08);
}

.action-gel-tile:active {
    transform: translateY(0);
    box-shadow:
        inset 2px 2px 4px rgba(255,255,255,0.18),
        inset -2px -2px 5px rgba(0,0,0,0.35),
        0 2px 6px rgba(0,0,0,0.15);
}

/* Icons inside tiles */
.action-gel-tile .action-gel-tile-icon {
    font-size: 1.4rem;
    color: white;
}

.action-gel-tile-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.action-gel-tile-subtitle {
    font-size: 0.8rem;
    opacity: 0.8;
    color: white;
    margin: 0;
}

/* Add Game - Blue */
.action-gel-tile.add-game {
    --gel-light: #3BA5FF;
    --gel-dark: #032A71;
}

/* Unpaid - Gold */
.action-gel-tile.unpaid {
    --gel-light: #FFD36A;
    --gel-dark: #B8860B;
}

/* Tax Center - Cyan Blue */
.action-gel-tile.tax-center {
    --gel-light: #7BC3FF;
    --gel-dark: #044BA1;
}

/* New Crew - Light Blue */
.action-gel-tile.new-crew {
    --gel-light: #6EA3FF;
    --gel-dark: #05285C;
}

/* ============================================
   Legacy Button Styles (Compatibility)
   ============================================ */

.btn-brand-primary,
.btn-brand-dark,
.btn-brand-action,
.btn-royal-blue,
.btn-update-game {
    background-image: var(--grad-button-primary);
    color: white;
    padding: 0.6rem 1.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    border: none;
    transition: all var(--transition-med);
    box-shadow: var(--shadow-strong);
    cursor: pointer;
}

.btn-brand-primary:hover,
.btn-brand-dark:hover,
.btn-brand-action:hover,
.btn-royal-blue:hover,
.btn-update-game:hover {
    background-image: var(--grad-button-primary-hover);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-gold-outline {
    background-color: transparent;
    color: var(--color-gold-deep);
    border: 2px solid var(--color-gold);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    transition: all var(--transition-med);
    box-shadow: 0 0 16px rgba(247, 183, 51, 0.2);
}

.btn-gold-outline:hover {
    background-image: var(--grad-button-gold);
    color: #2a220f;
    box-shadow: 0 10px 24px rgba(199, 139, 31, 0.45);
}

/* ============================================
   Form Inputs - Light Theme
   ============================================ */

input,
select,
textarea {
    background: var(--color-white);
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-card-border);
    color: var(--color-text-dark);
    padding: 0.6rem 0.85rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-royal);
    box-shadow:
        0 0 0 3px rgba(24, 87, 216, 0.15),
        inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-mid);
}

/* Dark inputs for dark sections (header filters, etc.) */
.input-dark,
.dark-section input,
.dark-section select {
    background: rgba(11, 35, 74, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-light);
}

.input-dark:focus,
.dark-section input:focus,
.dark-section select:focus {
    border-color: var(--color-royal-light);
    box-shadow: 0 0 0 3px rgba(61, 125, 255, 0.25);
}

/* ============================================
   Form Input Width Classes
   ============================================ */

/* Base form control with improved width */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
input[type="password"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Full-width fields - for long text entries */
.full-width,
input[name*="hotel"],
input[name*="airline"],
input[name*="address"],
input[name*="street"],
input[name*="venue"],
input[name*="stadium"],
input[name*="conference"],
input[name*="assignor"],
input[name*="carrier"],
input[name*="organizer"],
input[name*="description"] {
    max-width: 100% !important;
}

/* Medium width fields */
.medium-width,
input[name*="city"],
input[name*="airport"],
input[name*="location"] {
    max-width: 100%;
}

/* Short fields (state, zip, amounts) */
.short-width,
input[name*="zip"],
input[name*="mileage"],
input[name*="cost"],
input[name*="rate"],
input[name*="amount"],
input[name*="fee"] {
    max-width: 200px;
}

/* Very short fields (state dropdowns) */
.xs-width,
select[name*="state"] {
    max-width: 150px;
}

/* Textarea improvements */
textarea {
    min-height: 100px;
    max-height: 400px;
    resize: vertical;
    max-width: 100%;
}

textarea[name*="journal"],
textarea[name*="notes"],
textarea[name*="description"] {
    min-height: 180px;
}

/* ============================================
   Form Grid Layouts
   ============================================ */

/* 3-column grid for city/state/zip */
.form-grid-3col {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    align-items: end;
}

/* 2-column grid for general use */
.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: end;
}

/* Address grid (street full width, city/state/zip below) */
.form-grid-address {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    gap: 1rem;
    align-items: end;
}

/* Expense row layout */
.expense-row {
    display: grid;
    grid-template-columns: 3fr 1fr auto;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

/* Inputs in grids use full width */
.form-grid-3col input,
.form-grid-3col select,
.form-grid-2col input,
.form-grid-2col select,
.form-grid-address input,
.form-grid-address select,
.expense-row input,
.expense-row select {
    max-width: 100%;
}

/* ============================================
   Mobile Responsive Form Inputs
   ============================================ */

@media (max-width: 768px) {
    /* Stack grids vertically on mobile */
    .form-grid-3col,
    .form-grid-2col,
    .form-grid-address,
    .expense-row {
        grid-template-columns: 1fr;
    }
    
    /* All inputs full width on mobile */
    input,
    select,
    textarea,
    .short-width,
    .xs-width,
    .medium-width,
    .full-width {
        max-width: 100% !important;
        width: 100%;
    }
    
    /* Smaller padding on mobile */
    input,
    select,
    textarea {
        padding: 0.5rem 0.75rem;
        font-size: 1rem; /* Prevents zoom on iOS */
    }
}

/* Tablet adjustments */
@media (max-width: 1023px) and (min-width: 769px) {
    .form-grid-3col {
        grid-template-columns: 2fr 1fr 1fr;
    }
    
    input,
    select,
    textarea {
        max-width: 100%;
    }
}

/* ============================================
   PROFESSIONAL FORM DESIGN SYSTEM
   ============================================ */

/* Label styling - scoped to .label class only */
.label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Icon styling in labels with .label class */
.label > i:first-child {
    color: var(--color-royal);
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
    font-size: 0.875rem;
}

/* Optional and required badges */
.optional-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: rgba(94, 106, 132, 0.12);
    border: 1px solid rgba(94, 106, 132, 0.2);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-mid);
    margin-left: 0.5rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.required-badge {
    color: #ef4444;
    font-size: 0.875rem;
    margin-left: 0.25rem;
}

/* Input field styling - professional polish */
.input-field,
.form-control {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    border: 1px solid var(--color-card-border);
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.input-field:hover:not(:focus):not(:disabled),
.form-control:hover:not(:focus):not(:disabled) {
    border-color: rgba(24, 87, 216, 0.3);
    background-color: rgba(248, 250, 252, 1);
}

.input-field:focus,
.form-control:focus {
    outline: none;
    border-color: var(--color-royal);
    box-shadow: 0 0 0 3px rgba(24, 87, 216, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.input-field:disabled,
.form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(244, 246, 251, 1);
}

.input-field::placeholder,
.form-control::placeholder {
    color: var(--color-text-mid);
    font-weight: 400;
}

/* Currency input wrapper */
.input-with-currency {
    position: relative;
    display: flex;
    align-items: stretch;
}

.currency-symbol {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-mid);
    font-weight: 600;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.currency-input,
input.currency-input {
    padding-left: 2rem !important;
}

/* Datalist input indicator */
input[list] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235e6a84' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.5rem;
}

/* Toggle switch styling */
.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(244, 246, 251, 0.6);
    border: 1px solid var(--color-card-border);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.toggle-wrapper:hover {
    background: rgba(244, 246, 251, 1);
    border-color: rgba(24, 87, 216, 0.2);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(148, 163, 184, 0.4);
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #10b981;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.toggle-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-dark);
    cursor: pointer;
    user-select: none;
}

/* Helper text styling */
.helper-text {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-mid);
    margin-top: 0.5rem;
    line-height: 1.4;
}

.helper-text i {
    margin-right: 0.25rem;
    color: var(--color-royal);
    opacity: 0.7;
}

/* Error and success text */
.error-text {
    color: #ef4444;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.success-text {
    color: #10b981;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Form section styling */
.form-section {
    background: var(--color-surface-card);
    border: 1px solid var(--color-card-border);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-soft);
}

.form-section:hover {
    border-color: rgba(24, 87, 216, 0.15);
}

.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(24, 87, 216, 0.1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-section-title i {
    color: var(--color-royal);
    font-size: 1rem;
}

/* Payment grid - fee smaller, method wider */
.form-grid-payment {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    align-items: start;
}

/* Expense grid for 2 columns */
.form-grid-expense {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* 4-column grid for compact expenses */
.form-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* Full-width grid item */
.grid-full-width {
    grid-column: 1 / -1;
}

/* Form group spacing in grids */
.form-grid-2col .form-group,
.form-grid-3col .form-group,
.form-grid-4col .form-group,
.form-grid-payment .form-group,
.form-grid-expense .form-group {
    margin-bottom: 0;
}

/* Mobile responsive for new grids */
@media (max-width: 768px) {
    .form-grid-payment,
    .form-grid-expense,
    .form-grid-4col {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .form-section {
        padding: 1.25rem;
        border-radius: 12px;
    }
    
    .form-section-title {
        font-size: 1rem;
    }
    
    .toggle-wrapper {
        padding: 0.875rem;
    }
}

/* Tablet responsive */
@media (max-width: 1024px) and (min-width: 769px) {
    .form-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Footer Styles
   ============================================ */

footer a[href^="mailto:"] {
    transition: all 0.2s ease;
}

footer a[href^="mailto:"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

footer a[href^="mailto:"]:hover i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* ============================================
   Tables - Light Theme
   ============================================ */

table {
    width: 100%;
    border-collapse: collapse;
    color: var(--color-text-dark);
    background: var(--color-surface-card);
}

thead {
    background: linear-gradient(90deg, var(--color-navy-deep) 0%, var(--color-royal) 100%);
    color: var(--color-text-light);
}

th {
    padding: 0.75rem;
    font-weight: 600;
    text-align: left;
    color: var(--color-text-light);
    border-bottom: 1px solid var(--color-card-border);
}

td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--color-card-border);
    color: var(--color-text-dark);
}

tbody tr:nth-child(even) {
    background: rgba(244, 246, 251, 0.5);
}

tbody tr:hover {
    background: rgba(24, 87, 216, 0.08);
}

/* ============================================
   Sport Chip Styles
   ============================================ */

.sport-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.sport-chip-football {
    background-color: rgba(247, 183, 51, 0.15);
    color: #b78c14;
}

.sport-chip-basketball {
    background-color: rgba(249, 115, 22, 0.15);
    color: #c45a0a;
}

.sport-chip-baseball {
    background-color: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

.sport-chip-soccer {
    background-color: rgba(22, 163, 74, 0.15);
    color: #15803d;
}

.sport-chip-hockey {
    background-color: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.sport-chip-volleyball {
    background-color: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
}

/* ============================================
   Section Spacing
   ============================================ */

.section-spacing {
    margin-bottom: 1.5rem;
}

.section-spacing-lg {
    margin-bottom: 2rem;
}

/* ============================================
   Badge Styles - Light Theme
   ============================================ */

.badge-gold,
.stat-highlight {
    background-color: var(--color-gold-bg);
    color: #b78c14;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-navy {
    background-color: rgba(11, 35, 74, 0.12);
    color: var(--color-navy);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-royal-blue {
    background-color: var(--color-royal-blue-bg);
    color: var(--color-royal-blue);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-paid {
    background-color: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.badge-unpaid {
    background-color: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

/* ============================================
   Status & Net Income Colors
   ============================================ */

.text-success {
    color: #16a34a;
}

.bg-success-light {
    background-color: rgba(22, 163, 74, 0.12);
}

.text-positive {
    color: #16a34a;
}

.text-negative {
    color: #dc2626;
}

/* ============================================
   Link Colors
   ============================================ */

.link-royal-blue {
    color: var(--color-royal-blue);
    transition: color 0.2s;
}

.link-royal-blue:hover {
    color: var(--color-royal-blue-light);
}

.link-gold {
    color: var(--color-gold-deep);
    transition: color 0.2s;
}

.link-gold:hover {
    color: var(--color-gold);
}

/* ============================================
   Card Accent Styles
   ============================================ */

.card-navy-header {
    border-top: 4px solid var(--color-navy);
}

.card-gold-accent {
    border-left: 4px solid var(--color-gold);
}

.card-royal-accent {
    border-left: 4px solid var(--color-royal);
}

/* ============================================
   Quick Action Card Styles - Light Theme
   ============================================ */

.quick-action-card {
    background: var(--color-surface-card);
    border-radius: var(--radius-medium);
    padding: 1rem;
    transition: all var(--transition-med);
    border: 1px solid var(--color-card-border);
    box-shadow: var(--shadow-soft);
}

.quick-action-card:hover {
    box-shadow: var(--shadow-strong);
    transform: translateY(-2px);
}

.quick-action-navy {
    border-left: 4px solid var(--color-navy);
}

.quick-action-gold {
    border-left: 4px solid var(--color-gold);
}

.quick-action-royal {
    border-left: 4px solid var(--color-royal);
}

/* ============================================
   Form Focus & Hover States
   ============================================ */

.focus-royal:focus {
    outline: none;
    border-color: var(--color-royal);
    box-shadow: 0 0 0 3px rgba(24, 87, 216, 0.15);
}

.hover-navy:hover {
    color: var(--color-navy);
}

.hover-gold:hover {
    color: var(--color-gold);
}

.hover-royal:hover {
    color: var(--color-royal);
}

/* ============================================
   Alert Styles - Light Theme
   ============================================ */

.alert-info {
    background-color: rgba(24, 87, 216, 0.08);
    border: 1px solid rgba(24, 87, 216, 0.2);
    color: var(--color-navy);
    border-radius: var(--radius-medium);
    padding: 1rem 1.25rem;
}

.alert-success {
    background-color: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.2);
    color: #15803d;
    border-radius: var(--radius-medium);
    padding: 1rem 1.25rem;
}

.alert-warning {
    background-color: rgba(247, 183, 51, 0.1);
    border: 1px solid rgba(247, 183, 51, 0.25);
    color: #92400e;
    border-radius: var(--radius-medium);
    padding: 1rem 1.25rem;
}

.alert-error {
    background-color: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #b91c1c;
    border-radius: var(--radius-medium);
    padding: 1rem 1.25rem;
}

/* ============================================
   Flash Messages
   ============================================ */

.flash-message {
    border-radius: var(--radius-medium);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.flash-success {
    background-color: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.25);
    color: #15803d;
}

.flash-error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #b91c1c;
}

.flash-info {
    background-color: rgba(24, 87, 216, 0.08);
    border: 1px solid rgba(24, 87, 216, 0.2);
    color: var(--color-navy);
}

/* ============================================
   Mobile Responsiveness
   ============================================ */

@media (max-width: 768px) {
    .card,
    .panel,
    .dashboard-card {
        border-radius: 14px;
        padding: 1rem;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .main-content,
    .content-area {
        padding: 1rem;
    }
}

/* ============================================
   Dropdown Styles - Dark for Header
   ============================================ */

.dropdown-dark {
    background: rgba(11, 35, 74, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-strong);
    color: var(--color-text-light);
}

.dropdown-dark .dropdown-item {
    color: var(--color-text-light);
    padding: 0.5rem 1rem;
}

.dropdown-dark .dropdown-item:hover {
    background: rgba(24, 87, 216, 0.25);
}

/* ============================================
   Gel Dropdown Item Hover
   ============================================ */

.gel-dropdown-item:hover {
    background: rgba(24, 87, 216, 0.2);
}

/* ============================================
   Utility: Force Light/Dark Text
   ============================================ */

.force-light-text,
.force-light-text h1,
.force-light-text h2,
.force-light-text h3,
.force-light-text p,
.force-light-text span,
.force-light-text a {
    color: var(--color-text-light) !important;
}

.force-dark-text,
.force-dark-text h1,
.force-dark-text h2,
.force-dark-text h3,
.force-dark-text p,
.force-dark-text span {
    color: var(--color-text-dark) !important;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    body {
        background: white;
        color: black;
    }

    .card,
    .panel {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .btn {
        display: none;
    }
}