/* Modern Variables */
:root {
    --q-primary: #3b82f6; /* Modern Blue */
    --q-secondary: #64748b; /* Slate */
    --q-accent: #8b5cf6; /* Violet */
    --q-positive: #10b981; /* Emerald */
    --q-negative: #ef4444; /* Red */
    --q-info: #0ea5e9; /* Sky */
    --q-warning: #f59e0b; /* Amber */
    
    /* Layout */
    --header-height: 98px;
    --cell-height: 40px;
    --first-col-width: 220px;
}

body {
    font-family: 'Inter', 'Roboto', sans-serif;
    color: #1e293b;
    background-color: #f8fafc;
}

/* Rounded Corners Override */
.q-btn, .q-card, .q-input, .q-select, .q-menu, .q-dialog__inner {
    border-radius: 8px !important;
}

/* Dense Outline Inputs */
.q-field__control {
    border-radius: 6px !important;
}

/* Grid Specific Styles */
.planner-grid-container {
    height: calc(100vh - var(--header-height));
    width: 100%;
    overflow: auto;
    position: relative;
    background: white;
}

.grid-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    table-layout: fixed;
}

.grid-header-cell {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
    text-align: center;
    height: 48px;
}

.grid-cell {
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    padding: 4px;
    height: var(--cell-height);
    vertical-align: middle;
    position: relative;
    transition: background 0.2s;
}

.grid-cell:hover {
    background: #f8fafc;
}

/* Sticky First Column */
.col-sticky-left {
    position: sticky;
    left: 0;
    z-index: 10;
    background: white;
    border-right: 2px solid #e2e8f0;
    width: var(--first-col-width);
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}

.grid-header-cell.col-sticky-left {
    z-index: 30; /* Higher than regular headers */
    background: #f8fafc;
}

/* ExNet Header - Pink */
.header-exnet {
    background-color: #fce7f3 !important; /* Pink-100 */
    color: #be185d;
    font-size: 11px;
    height: 24px;
}

/* Traffic Light Status */
.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}
.status-green { background-color: #22c55e; }
.status-yellow { background-color: #eab308; }
.status-red { background-color: #ef4444; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}