:root {
    --primary: #2085CA;    /* ESMED Blue */
    --secondary: #E0841F;   /* ESMED Orange */
    --accent: #D20B06;      /* ESMED Red */
    --background: #f8f9fa;
    --text: #212529;
    --border: #dee2e6;
    --hover-primary: #0e5183;  /* Darker blue for hover */
    --hover-secondary: #c47219; /* Darker orange for hover */
    --stage-cq: #ec4899;
    --stage-submitted: #eab308;
    --stage-invoiced: #1d4ed8;
    --stage-paid: #22c55e;
    --stage-published: #9333ea;
    --stage-cc: #6b7280;
    --stage-wd: #6b7280;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--background);
    color: var(--text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow: hidden;
}

/* Layout */
.layout {
    display: grid;
    grid-template-areas:
        "topnav topnav"
        "sidenav main";
    grid-template-columns: 225px 1fr;
    grid-template-rows: 52px 1fr;
    height: 100vh;
    background: #d5d5d5;
    overflow: hidden;
}

/* Form and full-width layout overrides */
.layout:has(.form-content),
.layout:has(.scope-checker),
.layout:has(.registration-iframe-container),
.layout:has(.advanced-search-container),
.layout:has(.quality-control-container),
.layout.no-sidebar {
    grid-template-areas:
        "topnav topnav"
        "main main";
    grid-template-columns: 1fr;
}

/* Main content full width */
.main-content-full {
    grid-area: main;
    background: var(--background);
    padding: 20px;
    overflow-y: auto;
    height: calc(100vh - 52px);
}

/* Top Navigation */
.topnav {
    grid-area: topnav;
    background: var(--primary);
    display: flex;
    align-items: center;
    color: white;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.logo {
    width: 225px;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.logo img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1); /* Makes the image white */
}

/* Side Navigation */
.sidenav {
    grid-area: sidenav;
    background: var(--primary);
    padding: 12px;
    color: white;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 16px;
}

.nav-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-items li {
    margin: 2px 0;
}

.nav-items a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.nav-items a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-items li.active a {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.nav-section h2 {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
    text-transform: uppercase;
    padding: 0 12px;
    letter-spacing: 0.08em;
}

.nav-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    stroke: currentColor;
    stroke-width: 2;
    flex-shrink: 0;
}

/* Main Content */
.main-content {
    grid-area: main;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--background);
    border-top-left-radius: 10px;
    min-height: calc(100vh - 52px);
}

/* Full-width content override */
.main-content-full {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: auto;
    height: calc(100vh - 52px);
    border-radius: 0;
}

/* Deals page specific layout */
.deals-grid {
    height: calc(100vh - 52px);
    overflow: auto;
}

.deals-column {
    height: 100%;
    max-height: calc(100vh - 92px); /* 52px header + 20px padding on each side */
}

.deals-list {
    max-height: calc(100vh - 160px); /* Account for header and padding */
    overflow-y: auto;
}

/* Responsive Grid */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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