/* ═══════════════════════════════════════════════════════
   UP GRANDINE — Brand variables & global page components
═══════════════════════════════════════════════════════ */
:root {
    --up-topbar-bg:      #019EDB;     /* UpGrandine brand blue — navbar & table head   */
    --up-topbar-border:  #017bb0;     /* darker brand blue — border/divider            */
    --up-brand:          #019EDB;     /* UpGrandine brand blue — buttons & accents     */
    --up-brand-dark:     #017bb0;     /* darker brand blue — hover                    */
    --up-brand-light:    #e8f6fd;     /* very light blue — filterbar & backgrounds    */
    --up-text-on-dark:   #d0eefa;     /* light text on brand blue areas               */
    --up-accent-blue:    #019EDB;     /* interactive accent                           */
}

/* ── Global page topbar ─────────────────────────────── */
.page-topbar {
    background: #fff;
    min-height: 52px;
    border-radius: 0;
    margin-left: -.75rem;
    margin-right: -.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
    gap: .75rem;
    position: relative;
    border-bottom: 3px solid var(--up-brand);
    box-shadow: 0 2px 8px rgba(1,158,219,.1);
}
.page-topbar-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--up-brand);
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
}
.page-topbar-title i { color: var(--up-brand); }
.page-topbar-actions { position: static; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* "Nuova …" primary button inside topbar — brand style */
.page-topbar .btn-topbar-new {
    background: var(--up-brand);
    color: #fff;
    border: none;
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .8rem;
    border-radius: .375rem;
    white-space: nowrap;
    transition: background .15s;
}
.page-topbar .btn-topbar-new:hover { background: var(--up-brand-dark); color:#fff; }

/* Settings button inside topbar */
.page-topbar .btn-topbar-settings {
    background: var(--up-brand-light);
    color: var(--up-brand);
    border: 1px solid rgba(1,158,219,.3);
    font-size: .78rem;
    padding: .28rem .7rem;
    border-radius: .375rem;
    white-space: nowrap;
    transition: background .15s;
}
.page-topbar .btn-topbar-settings:hover { background: rgba(1,158,219,.2); color: var(--up-brand-dark); }

/* Back / neutral topbar button */
.page-topbar .btn-topbar-back {
    background: transparent;
    color: var(--up-brand);
    border: 1px solid rgba(1,158,219,.4);
    font-size: .78rem;
    padding: .28rem .65rem;
    border-radius: .375rem;
    white-space: nowrap;
    transition: background .15s;
}
.page-topbar .btn-topbar-back:hover { background: var(--up-brand-light); color: var(--up-brand-dark); }

/* ── Font-size control (A− 14 A+) ─────────────────── */
.ep-fontctrl {
    background: var(--up-brand-light);
    border: 1px solid rgba(1,158,219,.25);
    border-radius: 2rem;
    padding: 2px;
    display: flex;
    align-items: center;
}
.ep-fontbtn {
    background: none;
    border: none;
    color: var(--up-brand);
    font-size: .78rem;
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 2rem;
    transition: background .15s;
    line-height: 1;
}
.ep-fontbtn:hover { background: rgba(1,158,219,.2); color: var(--up-brand-dark); }
.ep-fontsize-val {
    color: var(--up-brand);
    font-size: .8rem;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}
.ep-fontsize-badge {
    background: rgba(0,0,0,.25);
    color: var(--up-accent-blue);
    font-weight: 700;
    font-size: .8rem;
    border-radius: .25rem;
    padding: 2px 6px;
    min-width: 28px;
    text-align: center;
}

/* ── Counter cards (page summary) ─────────────────── */
.page-counters { display: flex; flex-wrap: wrap; gap: .75rem; padding: .75rem 0 .5rem; }
.page-counter-card {
    background: #fff;
    border-radius: .5rem;
    padding: .9rem 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 105px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border-top: 3px solid transparent;
}
.page-counter-card .cnt-icon  { font-size: 1.35rem; margin-bottom: .1rem; }
.page-counter-card .cnt-num   { font-size: 1.65rem; font-weight: 700; line-height: 1.1; }
.page-counter-card .cnt-label { font-size: .62rem; letter-spacing: .06em; color: #888; margin-top: 2px; text-transform: uppercase; }
/* Brand-blue variant */
.cnt-brand  { border-top-color: var(--up-brand); }
.cnt-brand  .cnt-icon, .cnt-brand  .cnt-num { color: var(--up-brand); }
/* Orange variant */
.cnt-orange { border-top-color: #f59e0b; }
.cnt-orange .cnt-icon, .cnt-orange .cnt-num { color: #f59e0b; }
/* Green variant */
.cnt-green  { border-top-color: #10b981; }
.cnt-green  .cnt-icon, .cnt-green  .cnt-num { color: #10b981; }
/* Red variant */
.cnt-red    { border-top-color: #ef4444; }
.cnt-red    .cnt-icon, .cnt-red    .cnt-num { color: #ef4444; }

/* ── Dense table shared ────────────────────────────── */
.page-grid-table {
    font-size: 13px;
    background: #fff;
    border-radius: 0 0 .5rem .5rem;
    overflow: hidden;
}
.page-grid-table thead th {
    background: var(--up-topbar-bg) !important;
    color: #fff !important;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .3rem .75rem;
    border-bottom: 2px solid var(--up-topbar-border) !important;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    user-select: none;
    text-transform: none;
}
.page-grid-table thead th:hover { background: #0186bb !important; }
.page-grid-table tbody td {
    padding: .55rem .75rem;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}
.page-grid-table tbody tr:last-child td { border-bottom: none; }
.page-grid-table tbody tr:hover td { background: #f7f9fb; }
.page-grid-sort-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.page-grid-sort-link:hover .col-label { color: #fff; }
.col-label    { display: block; }
.col-sublabel { font-size: .62rem; color: #6a8499; font-weight: 400; letter-spacing: 0; text-transform: none; margin-top: 1px; }
/* Drag & drop */
.drag-col { cursor: grab; user-select: none; }
.drag-col:active { cursor: grabbing; }
.drag-col.dragging { opacity: .4; }
.drag-col.drag-over {
    background: #0186bb !important;
    outline: 2px dashed var(--up-accent-blue);
    outline-offset: -2px;
}
/* Offcanvas col list */
.col-list-item {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .45rem .75rem;
    cursor: grab;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.col-list-item:active { cursor: grabbing; }
.col-list-item.drag-over-list { border: 2px dashed var(--up-accent-blue); background: #eff6ff; }

html {
  font-size: 14px;
}


@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  overflow-x: hidden;
}

.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;
}
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* ── Navbar — white background, brand blue accents ─── */
header .navbar {
    background: #fff !important;
    border-bottom: 3px solid var(--up-brand) !important;
    box-shadow: 0 2px 8px rgba(1,158,219,.1) !important;
}
header .navbar .navbar-brand,
header .navbar .nav-link,
header .navbar .navbar-text { color: #444 !important; }
header .navbar .nav-link:hover,
header .navbar .nav-link.active { color: var(--up-brand) !important; }
/* Convert the white logo to brand blue on the white navbar */
header .navbar .navbar-brand img {
    filter: brightness(0) invert(56%) sepia(85%) saturate(457%) hue-rotate(167deg) brightness(0.97) contrast(1.01);
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}