/* defragRes — custom layer on top of Bootstrap Italia.
   Fonts: Bootstrap Italia 2.x only injects @font-face via JS (loadFonts, never
   auto-called), so the families are declared here and served from the vendored
   dist; without these rules the whole UI silently falls back to system fonts. */

/* --- Titillium Web (main UI font) --- */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/static/vendor/bootstrap-italia/fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff2') format('woff2'),
         url('/static/vendor/bootstrap-italia/fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff') format('woff');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/vendor/bootstrap-italia/fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff2') format('woff2'),
         url('/static/vendor/bootstrap-italia/fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff') format('woff');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/static/vendor/bootstrap-italia/fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff2') format('woff2'),
         url('/static/vendor/bootstrap-italia/fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff') format('woff');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/vendor/bootstrap-italia/fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff2') format('woff2'),
         url('/static/vendor/bootstrap-italia/fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff') format('woff');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/vendor/bootstrap-italia/fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff2') format('woff2'),
         url('/static/vendor/bootstrap-italia/fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff') format('woff');
}

/* --- Roboto Mono (code/monospace) --- */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/vendor/bootstrap-italia/fonts/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff2') format('woff2'),
         url('/static/vendor/bootstrap-italia/fonts/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff') format('woff');
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/vendor/bootstrap-italia/fonts/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff2') format('woff2'),
         url('/static/vendor/bootstrap-italia/fonts/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff') format('woff');
}

/* --- Lora (serif, quotes/long-form) --- */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/vendor/bootstrap-italia/fonts/Lora/lora-v20-latin-ext_latin-regular.woff2') format('woff2'),
         url('/static/vendor/bootstrap-italia/fonts/Lora/lora-v20-latin-ext_latin-regular.woff') format('woff');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/vendor/bootstrap-italia/fonts/Lora/lora-v20-latin-ext_latin-700.woff2') format('woff2'),
         url('/static/vendor/bootstrap-italia/fonts/Lora/lora-v20-latin-ext_latin-700.woff') format('woff');
}

/* --- Design tokens --- */
:root {
    --defragres-primary: #0066cc;
    --defragres-success: #008758;
    --defragres-danger: #d9364f;
    --defragres-bg: #f5f6f7;
    --defragres-text: #17324d;
}

/* --- Sticky footer: footer sits at the bottom even on short pages --- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > main {
    flex: 1 0 auto;
}
body > footer.it-footer {
    flex-shrink: 0;
}

/* --- Brand logo (same SVG as the favicon) in header/footer --- */
/* Every surface it sits on is blue, so the mark gets a light tile to stand on.
   The tile is square on purpose: a round backdrop echoes the round mark and the
   two circles read as one blurred shape. It also needs clear margin around the
   mark, or tile and mark read as the same object — hence the generous padding,
   which grows with each size variant below (percentages would resolve against
   the parent, not the tile). The SVG itself must stay untouched (it is the
   favicon, byte for byte). */
.app-brand-logo {
    width: 3.25rem;
    height: 3.25rem;
    margin-right: 0.75rem;
    background: #fff;
    border-radius: 0;
    padding: 9px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
.it-footer-main .app-brand-logo {
    width: 2.6rem;
    height: 2.6rem;
    padding: 7px;
}

/* --- Global "experiment DB active" banner (markup in admin/banner.html) --- */
.db-banner {
    background: var(--defragres-danger);
    color: #fff;
    text-align: center;
    padding: .45rem .5rem;
    font-weight: 600;
    font-size: .95rem;
    position: sticky;
    top: 0;
    z-index: 2000;
}
.db-banner code {
    color: #ffd7dd;
}
.db-banner a {
    color: #fff;
    text-decoration: underline;
}

/* --- Sticky header (Bootstrap Italia HeaderSticky, opt-in in layout.html) --- */
/* Both the experiment banner (position:sticky, z-index 2000) and the pinned
   header (position:fixed, top:0) claim the top edge: when the banner exists,
   push the pinned header down by its measured height (--app-banner-h is set
   by the inline script in page_scripts). */
.db-banner ~ .bs-it-sticky-wrapper .it-header-sticky.is-sticky,
.db-banner ~ .it-header-sticky.is-sticky {
    margin-top: var(--app-banner-h, 0px);
}
/* The brand cloned into the pinned navbar keeps only the logo (BI hides the
   text): trim its size and spacing to fit the slim blue bar. */
.it-header-sticky.is-sticky .menu-wrapper .it-brand-wrapper.cloned-element .app-brand-logo {
    width: 2.1rem;
    height: 2.1rem;
    margin-right: 0;
    padding: 5px;
}

/* --- Footer refinements: compact vertical rhythm, links legible on the blue --- */
.it-footer .footer-heading-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    margin-bottom: .35rem;
}
.it-footer-main .it-brand-wrapper {
    padding: .25rem 0 .5rem;
}
.it-footer-main p {
    color: rgba(255, 255, 255, .85);
    font-size: 0.875rem;
    line-height: 1.4;
}
.it-footer-main .footer-list .list-item {
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.65;
    padding: 0;
}
.it-footer-main .footer-list .list-item:hover,
.it-footer-main .footer-list .list-item:focus {
    color: #fff;
    text-decoration: underline;
}
/* The sections list is the tallest column and alone sets the footer height:
   flow it into two columns so the footer stays short. */
@media (min-width: 576px) {
    .app-footer-sections {
        column-count: 2;
        column-gap: 1.25rem;
    }
    .app-footer-sections li {
        break-inside: avoid;
    }
}
.it-footer-small-prints ul.it-footer-small-prints-list {
    padding: .75rem 1rem;
}
.it-footer-small-prints a {
    font-size: 0.875rem;
}
.app-footer-gdpr {
    color: rgba(255, 255, 255, .75);
}

/* --- Shared table styling for data grids --- */
.table-grid td, .table-grid th {
    font-size: 0.88rem;
    vertical-align: middle;
}

/* --- Header: logout control in the slim bar (POST form styled as a link) ---
   The full vendor chain is needed: Bootstrap Italia styles
   `.it-header-slim-wrapper .it-header-slim-wrapper-content .it-header-slim-right-zone button`
   with a #004080 background (0,3,1), so a shorter selector loses the cascade. */
.it-header-slim-wrapper .app-logout-form {
    margin: 0;
    display: inline;
}
.it-header-slim-wrapper .it-header-slim-wrapper-content .it-header-slim-right-zone .app-logout {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    opacity: .9;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.it-header-slim-wrapper .it-header-slim-wrapper-content .it-header-slim-right-zone .app-logout:hover,
.it-header-slim-wrapper .it-header-slim-wrapper-content .it-header-slim-right-zone .app-logout:focus {
    color: #fff;
    opacity: 1;
    text-decoration: underline;
    background: none;
}

/* --- Megamenu panels (shared/layout.html page_header) --- */
.app-nav-panel {
    padding: .5rem 1rem .9rem;
    row-gap: 1.25rem;
}
.app-nav-heading {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--defragres-text);
    opacity: .55;
    margin: .5rem 0 .4rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid #e3eaf0;
}
.link-list.app-nav-list li {
    padding: 0;
}
.app-nav-voice {
    display: block;
    padding: .42rem .55rem;
    margin: 0 -.55rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--defragres-text);
}
a.app-nav-voice:hover,
a.app-nav-voice:focus {
    background: #eef4fa;
    text-decoration: none;
}
a.app-nav-voice:hover .app-nav-vt,
a.app-nav-voice.active .app-nav-vt {
    color: var(--defragres-primary);
}
a.app-nav-voice.active .app-nav-vt {
    text-decoration: underline;
}
.app-nav-vt {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
}
.app-nav-vd {
    display: block;
    font-size: .82rem;
    color: #5a768a;
    line-height: 1.35;
    font-weight: 400;
}
.app-nav-future {
    cursor: default;
}
.app-nav-future .app-nav-vt {
    color: #5a768a;
}
.app-nav-tag {
    display: inline-block;
    vertical-align: .12em;
    margin-left: .45rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #7a5c00;
    background: #fdf2d5;
    border: 1px solid #e8c76a;
    padding: .02rem .4rem;
    border-radius: 99px;
}
.app-nav-feat {
    background: #eef4fa;
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-self: start;
    height: 100%;
}
.app-nav-ill {
    color: var(--defragres-primary);
    flex: none;
}
.app-nav-ft {
    font-weight: 700;
    font-size: .95rem;
    color: var(--defragres-text);
}
.app-nav-fd {
    font-size: .84rem;
    color: #5a768a;
    line-height: 1.4;
    margin: 0;
}
.app-nav-feat a {
    font-size: .85rem;
    font-weight: 600;
    color: var(--defragres-primary);
    text-decoration: none;
}
.app-nav-feat a:hover {
    text-decoration: underline;
}

/* --- Empty state (shared/widgets.html) --- */
.app-empty {
    border: 1px dashed #c8d2dc;
    border-radius: 8px;
    background: #fafbfc;
}
.app-empty .icon {
    fill: #a9b9c9;
}

/* --- Sortable column headers (shared/sort_th.html) --- */
th .app-sort {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
th .app-sort:hover,
th .app-sort:focus {
    color: inherit;
    text-decoration: underline;
}
th .app-sort .icon {
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 0.1rem;
    vertical-align: -0.15em;
    fill: currentColor;
}