:root {
    --logo-image-with:250px;
    --header-height:70px;
    --navbar-width:175px;
    --app-root-margin-left :var(--navbar-width)
}

.mantine-AppShell-header{
    height: var(--header-height); 
}
.header-inner-container{
    height: calc(var(--header-height));
}
.company-logo-image { width: var(--logo-image-with)}

.mantine-AppShell-navbar {
    margin-top: calc(var(--header-height));
    width: var(--navbar-width);
}
.mantine-AppShell-root{
    margin-left: var(--app-root-margin-left);
    margin-top: calc(var(--header-height));
}

@media only screen and (max-width: 61.99375em) {
    :root {
        --app-root-margin-left:0px;
        --logo-image-with:170px;
        --header-height:50px;
        --navbar-width:175px;

    }
    .mantine-AppShell-navbar {
        margin-left: 0px
    }
  }

/* Phones. The block above is Mantine's `md` breakpoint, which is really "tablet and below"
   -- it collapses the navbar but still assumes a comfortable content width. Below ~600px the
   page needs its own padding budget, and anything that reserves a fixed width has to give. */
@media only screen and (max-width: 37.5em) {
    :root {
        --logo-image-with: 130px;
        --content-pad: 8px;
    }
    .mantine-AppShellMain-root,
    .mantine-AppShell-main {
        padding-left: var(--content-pad);
        padding-right: var(--content-pad);
    }
    /* A wide table or code block must scroll inside its own box rather than pushing the
       whole page sideways -- horizontal page scroll is the single most common way a desktop
       layout breaks on a phone. */
    table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* The ROCS input panel is built from dense grids -- 11 columns for the parameter rows
       (label, value, -delta, +delta, active), 32 for the dropdown rows -- inside a column
       the desktop layout fixes at 500px. Squeezed into a phone that is about 20px per
       column, which clipped "0.5" to "0.".
       It keeps its design width and scrolls sideways instead. Stacking or dropping columns
       would lose the side-by-side comparison the panel exists to show, and anything short
       of the full 500px leaves the denser rows overflowing their own row box. */
    #rocs-input-tabs .mantine-Tabs-panel {
        overflow-x: auto;
    }
    #rocs-input-tabs .mantine-Tabs-panel > * {
        min-width: 500px;
    }
}

/* Large displays. Without a cap the content keeps stretching, so on a 4K monitor the
   controls end up as a thin ribbon separated by empty space. */
@media only screen and (min-width: 120em) {
    :root {
        --logo-image-with: 300px;
        --navbar-width: 220px;
    }
}

/* Touch targets.
   Keyed off the pointer rather than the screen width, so a touchscreen laptop gets them too
   and a narrow desktop window does not. Sizes measured on an iPhone SE: the app's controls
   came in at 30-34px, and the number-input spinners at 17x14. */
@media (pointer: coarse) {
    .mantine-Burger-root,
    .mantine-ActionIcon-root {
        min-width: 44px;
        min-height: 44px;
    }
    .mantine-Button-root,
    .mantine-Tabs-tab,
    .mantine-Input-input,
    /* PasswordInput nests a second input inside .mantine-Input-input, and that inner one is
       what the finger actually lands on. */
    .mantine-PasswordInput-innerInput {
        min-height: 44px;
    }
    /* The spinners are a stacked pair inside one input, so 44px each would make every
       number field 88px tall and roughly double the height of a form that has twenty of
       them. They grow to the largest size that keeps the field usable; the field itself is
       the full-size target, and the value can be typed. */
    .mantine-NumberInput-control {
        min-height: 21px;
        min-width: 28px;
    }
}

/* Badge labels ship at 11px. That is fine as decoration but these carry real content --
   "Best Value" on the pricing cards, the days remaining on a subscription -- so they are
   lifted to the same floor as the rest of the text. */
.mantine-Badge-label {
    font-size: 12px;
}

/* Cookie Notice Styles */
#cookie-notice-container {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive adjustments for cookie notice */
@media only screen and (max-width: 61.99375em) {
    #cookie-notice-container .mantine-Group-root {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    #cookie-notice-container .mantine-Text-root {
        text-align: center;
    }
    
    #cookie-notice-container .mantine-Group-root > div:last-child {
        justify-content: center;
    }
    
    #cookie-countdown-text {
        text-align: center !important;
    }
}

/* Loading Screen Styles */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading-screen {
    opacity: 1;
    pointer-events: all;
}

#loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}