/* 00_base.css  ────────────────────────────────────────────────
   Global tweaks that sit on top of Bootstrap’s default theme.
   Keep them generic – colours, fonts, paddings, AG-Grid polish.
───────────────────────────────────────────────────────────────*/



:root {
    --gap-main-tb: 25px;
    --gap-main-sides: 25px;
    /* margin around the navbar */
    --navbar-gap: 25px;
    /* height of the main navbar for sticky calculations */
    --navbar-height: 7rem;

    /* primary palette used across the app */
    --primary-blue: #3C6A7E;
    --primary-blue-dark: #325B70;

    /* delius-io developer branding */
    --developer-logo-blue: #1E90FF;
    --developer-logo-font-size: clamp(2.5rem, 1.25rem + 3vw, 5.5rem);
}





.dash-container,
.container-fluid.main-wrap {
    padding: var(--gap-main-tb) var(--gap-main-sides);
}

/* offset the main card container; navbar is now sticky so no top margin */
.dash-container {
    margin: 0 var(--navbar-gap) 0;
}

/* hide dbc.Tabs navigation when using navbar buttons */
.no-tab-nav.nav,
.no-tab-nav > .nav,
.no-tab-nav > ul.nav {
    display: none !important;
}




/* 1) White canvas everywhere */
body {
    background-color: #ffffff;
    color: #212529;
    font-size: 15px;
    /* Keep scrollbar width constant so navbar doesn't shift when modals open */
    overflow-y: scroll;
}

/* When Bootstrap opens a modal it adds padding-right based on scrollbar width.
   Because we always show the scrollbar, this padding causes a jump.
   Force the padding back to zero while a modal is open. */
body.modal-open {
    padding-right: 0 !important;
    overflow-y: scroll !important;
}


/* 2) Uniform typography */
body,
button,
input,
optgroup,
select,
textarea {
    font-family: "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* 3) AG-Grid header centring + zebra rows */
.ag-theme-balham .ag-header-cell-label {
    justify-content: center;          /* horizontal */
    align-items:  center;             /* vertical   */
}
.table thead th {
    text-transform: uppercase;
}

.table thead th .unit {
    text-transform: none;
}
.ag-theme-balham .ag-row:nth-child(even) {
    background-color: #fafafa;
}

/* Rounded corners for AgGrid tables */
.ag-theme-balham .ag-root-wrapper {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* 4) Default tooltip style */
.tooltip-inner {
    font-size: 12px;
    text-align: left;
    max-width: 280px;                 /* wrap nicely */
    white-space: normal;
}

/* 5) Slightly tighter modal padding */
.modal-body { padding: 1rem 1.25rem; }

/* 6) Utility – show pointer on anything clickable */
.cursor-pointer,
[role="button"] { cursor: pointer; }

/* Styled validation error popup */
.error-popup h2 {
    margin-top: 0;
    font-size: 1.25rem;
}

.error-popup p {
    margin-bottom: 0.75rem;
}

.error-popup ul {
    margin: 0 0 0.75rem 1.25rem;
    padding-left: 0.75rem;
}

.error-popup code {
    font-family: monospace;
}

/* Settings modal developer branding */
.developer-branding {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.developer-branding__label,
.developer-build-number {
    font-size: 0.875rem;
}

.developer-branding .developer-logo {
    display: flex;
    align-items: center;
    line-height: 1;
    min-width: 0;
}

.developer-branding .developer-logo .logo {
    display: inline-flex;
    align-items: center;
    font: 700 var(--developer-logo-font-size)/1 system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: #111;
    letter-spacing: -0.02em;
}

.developer-branding .developer-logo .logo .io {
    color: var(--developer-logo-blue);
    opacity: 0;
}

body:not(.modal-open) #settings-modal .developer-logo .logo .io {
    opacity: 0;
    animation: none;
}

body.modal-open #settings-modal .developer-logo .logo .io {
    animation: fade 0.6s ease-out 0.15s forwards;
}

@media (prefers-reduced-motion: reduce) {
    body.modal-open #settings-modal .developer-logo .logo .io {
        animation: none;
    }

    #settings-modal .developer-logo .logo .io {
        opacity: 1;
    }
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}