/* ==========================================================================
   site.css (v3) — Robust mobile & tablet handling
   - Full-width header background (even inside containers)
   - Conservative fluid type; compact overrides for small screens
   - Dropdowns capped to viewport, right-aligned; no clipping
   - Tables grid: 1 col <768, 2 cols 768–1199, 3 cols ?1200; no overlap
   ========================================================================== */

/* -----------------------------
   Titillium Web — webfont faces
   Order: WOFF2 ? WOFF ? TTF
--------------------------------*/
@font-face {
    font-family: 'Titillium Web';
    src: url('/fonts/TitilliumWeb-Regular.woff2') format('woff2'), url('/fonts/TitilliumWeb-Regular.woff') format('woff'), url('/fonts/TitilliumWeb-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('/fonts/TitilliumWeb-Italic.woff2') format('woff2'), url('/fonts/TitilliumWeb-Italic.woff') format('woff'), url('/fonts/TitilliumWeb-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('/fonts/TitilliumWeb-Light.woff2') format('woff2'), url('/fonts/TitilliumWeb-Light.woff') format('woff'), url('/fonts/TitilliumWeb-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('/fonts/TitilliumWeb-SemiBold.woff2') format('woff2'), url('/fonts/TitilliumWeb-SemiBold.woff') format('woff'), url('/fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('/fonts/TitilliumWeb-Bold.woff2') format('woff2'), url('/fonts/TitilliumWeb-Bold.woff') format('woff'), url('/fonts/TitilliumWeb-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* -----------------------------
   Base
--------------------------------*/
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Titillium Web', Arial, sans-serif;
    color: #111;
    background: #fff;
}

*, *::before, *::after {
    box-sizing: border-box;
}
/* -----------------------------
   Root variables (type, spacing, layout)
--------------------------------*/
:root {
    --container-max: 1200px;
    --gutter: clamp(12px, 3vw, 24px);
    --header-h: 56px; /* compact override below */
    --nav-w: 240px;
    /* Conservative fluid type */
    --step--1: clamp(0.80rem, 0.72rem + 0.20vw, 0.90rem);
    --step-0: clamp(0.90rem, 0.80rem + 0.40vw, 1.05rem); /* base */
    --step-1: clamp(1.05rem, 0.92rem + 0.60vw, 1.25rem);
    --step-2: clamp(1.25rem, 1.00rem + 0.90vw, 1.50rem);
    --step-3: clamp(1.50rem, 1.10rem + 1.40vw, 1.875rem);
    --step-4: clamp(1.875rem, 1.20rem + 2.20vw, 2.375rem);
    --step-5: clamp(2.25rem, 1.30rem + 3.00vw, 2.75rem);
    /* Spacing */
    --space-1: clamp(0.5rem, 0.40rem + 0.50vw, 0.75rem);
    --space-2: clamp(0.75rem, 0.60rem + 0.80vw, 1rem);
    --space-3: clamp(1rem, 0.80rem + 1.20vw, 1.5rem);
    --space-4: clamp(1.25rem, 0.90rem + 1.60vw, 1.75rem);
    --space-5: clamp(1.5rem, 1.00rem + 2.00vw, 2rem);
}

/* Compact devices (short/tight screens like 375x667, 390x844, 414x896, 540x720) */
/* ? Extra-small phones (iPhone SE, old Androids) */
@media (max-width: 480px) {
    :root {
        --step-0: 0.72rem;
        --step-1: 0.84rem;
        --step-2: 1.0rem;
        --step-3: 1.15rem;
        --step-4: 1.35rem;
        --step-5: 1.55rem;
    }
}

/* -----------------------------
   Typography
--------------------------------*/
body {
    font-size: var(--step-0);
    line-height: 1.5;
}

h1 {
    font-size: var(--step-5);
    line-height: 1.15;
    margin: 0 0 var(--space-3);
}

h2 {
    font-size: var(--step-4);
    line-height: 1.20;
    margin: 0 0 var(--space-3);
}

h3 {
    font-size: var(--step-3);
    line-height: 1.25;
    margin: 0 0 var(--space-2);
}

h4 {
    font-size: var(--step-2);
    line-height: 1.30;
    margin: 0 0 var(--space-2);
}

h5 {
    font-size: var(--step-1);
    line-height: 1.35;
    margin: 0 0 var(--space-2);
}

small {
    font-size: var(--step--1);
}

p, li, label, input, button, select, textarea {
    font-size: var(--step-0);
}

/* Bootstrap form-floating placeholder alignment fix */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* -----------------------------
   Header — full width background
   Works for <header>, .site-header, .navbar
--------------------------------*/
header,
.site-header,
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    /* Full-bleed background even if nested in a container */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

    header .container,
    .site-header__inner,
    .navbar .container {
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--gutter);
        min-height: var(--header-h);
        display: flex;
        align-items: center;
        gap: var(--gutter);
    }

    header h1,
    .navbar-brand {
        font-size: clamp(1rem, 0.65rem + 1.8vw, 1.35rem);
        margin: 0;
    }

/* -----------------------------
   Layout with LeftNav (#_LeftNav)
--------------------------------*/
.layout {
    display: grid;
    grid-template-columns: var(--nav-w) 1fr;
    min-height: calc(100svh - var(--header-h));
}

#_LeftNav,
.leftnav {
    background: #fff;
    border-right: 1px solid #eee;
    padding: 8px;
}

@media (min-width: 64rem) { /* ~1024px */
    #_LeftNav,
    .leftnav {
        position: sticky;
        top: var(--header-h);
        height: calc(100svh - var(--header-h));
        overflow-y: auto;
    }
}

/* Mobile: off-canvas full-width so it doesn't clip content */
@media (max-width: 63.999rem) {
    .layout {
        grid-template-columns: 1fr;
    }

    #_LeftNav,
    .leftnav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        height: calc(100svh - var(--header-h));
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 1100;
    }

        #_LeftNav.is-open,
        .leftnav.is-open {
            transform: translateX(0);
        }
}

#_LeftNav a,
.leftnav a {
    display: block;
    padding: 0.45rem 0.75rem;
    font-size: clamp(0.85rem, 0.70rem + 0.35vw, 1rem);
    line-height: 1.3;
}

/* -----------------------------
   Main & container
--------------------------------*/
.page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: #fff;
}

@supports not (min-height: 100svh) {
    .page {
        min-height: 100vh;
    }
}

main {
    flex: 1 0 auto;
    background: #fff;
}

.container {
    width: min(100%, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: clamp(12px, 3vw, 24px);
}

.containerStyle {
    padding: 15px;
}

/* -----------------------------
   Generic grid / flex (no overlap)
--------------------------------*/
.grid,
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); /* ? fixed syntax */
    gap: clamp(12px, 2.5vw, 24px);
}

    .grid > *,
    .grid-container > *,
    .grid-cell {
        min-width: 0;
    }

/* This was removed to try and fix UserClaims Index, but might well break something else. */
/*.row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 2.5vw, 24px);
}

.col {
    flex: 1 1 100%;
    min-width: min(280px, 100%);
}*/

/* -----------------------------
   Tables area (wrap the 3 tables in .tables-grid)
--------------------------------*/
.tables-grid {
    display: grid;
    gap: clamp(12px, 2vw, 14px);
}

/* Phones */
@media (max-width: 600px) {
    .tables-grid table th,
    .tables-grid table td {
        font-size: 0.70rem;
    }
}

/* Tablets (600–1023px) */
@media (min-width: 601px) and (max-width: 1023px) {
    .tables-grid table th,
    .tables-grid table td {
        font-size: 0.80rem;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .tables-grid table th,
    .tables-grid table td {
        font-size: 0.90rem;
    }
}




.table-card,
.card,
.panel,
.content-block {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    min-width: 0; /* ? prevents overflow push */
    overflow: hidden; /* visual containment */
}

    .table-card .table-wrapper,
    .card .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

/* Tables & cells—compact on small screens */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

th, td {
    font-size: clamp(0.80rem, 0.70rem + 0.28vw, 0.95rem);
    padding: 0.45rem 0.6rem;
    vertical-align: top;
}


/* -----------------------------
   Dropdowns / menus (no right cut-off)
--------------------------------*/
/* If dropdown is anchored near the right, align to the right edge */
.dropdown-menu {
    right: 0;
    left: auto;
    transform: none !important;
    max-width: min(96vw, 420px);
    width: max-content;
    overflow: auto;
    word-break: break-word;
    z-index: 1200;
}

/* Generic custom panels/popovers */
.dropdown-panel,
.menu__content,
.popover {
    max-width: min(96vw, 420px);
    width: max-content;
    overflow: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    word-break: break-word;
    z-index: 1200;
}

/* Ensure the dropdown trigger's container allows the menu to fully render */
.dropdown,
.dropdown-container,
.nav-item {
    position: relative;
    overflow: visible;
}

/* -----------------------------
   Media & long strings (no overflow)
--------------------------------*/
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

code, pre, .copyable, .badge, .tag, .nowrap-breakable {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

/* -----------------------------
   Buttons
--------------------------------*/
.pretty-button1 {
    background-color: #4CAF50;
    border: none;
    color: #fff;
    padding: clamp(8px, 1.2vw, 12px) clamp(12px, 2vw, 20px);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: clamp(0.85rem, 0.50rem + 1vw, 1rem);
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 5px #999;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    .pretty-button1:hover {
        background-color: #45a049;
    }

    .pretty-button1:active {
        background-color: #45a049;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

.pretty-button2 {
    background-color: #ffc107;
    border: none;
    color: #000;
    padding: clamp(8px, 1.2vw, 12px) clamp(12px, 2vw, 20px);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: clamp(0.80rem, 0.45rem + 0.9vw, 0.95rem);
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 9px #999;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    .pretty-button2:hover {
        background-color: #e0a800;
    }

    .pretty-button2:active {
        background-color: #e0a800;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

/* ============================================================
   SiteDropdown
============================================================ */
.pretty-button-site {
    background-color: white;
    border: none;
    color: black;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 4px #999;
    transition: all 0.3s ease;
}

    .pretty-button-site:hover {
        background-color: #e0a800; /* Slightly darker shade for hover */
    }

    .pretty-button-site:active {
        background-color: #e0a800;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    /* -----------------------------
       Focus (accessibility)
    --------------------------------*/
    :focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

    /* -----------------------------
       Safe areas (iOS notches)
    --------------------------------*/
    body {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }

    .header, .footer {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }