/* persoNI: small additions to Bootstrap. */

/* Primary colour: the square of the NI logo (#327ea8), for the whole app. */
:root {
  --bs-primary: #327ea8;
  --bs-primary-rgb: 50, 126, 168;
  --bs-primary-text-emphasis: #143243;
  --bs-primary-bg-subtle: #d6e5ee;
  --bs-primary-border-subtle: #adcbdc;
  --bs-link-color: #327ea8;
  --bs-link-color-rgb: 50, 126, 168;
  --bs-link-hover-color: #286586;
  --bs-link-hover-color-rgb: 40, 101, 134;
  --bs-focus-ring-color: rgba(50, 126, 168, .25);
}
/* Dark mode (data-bs-theme="dark", set by static/js/theme.js): the primary's subtle tones and links lighten. */
[data-bs-theme="dark"] {
  --bs-primary-text-emphasis: #8fc1dd;
  --bs-primary-bg-subtle: #16303f;
  --bs-primary-border-subtle: #255a75;
  --bs-link-color: #7db7d6;
  --bs-link-color-rgb: 125, 183, 214;
  --bs-link-hover-color: #a3cde4;
  --bs-link-hover-color-rgb: 163, 205, 228;
}
/* Bootstrap's table variants keep light colours in dark mode: remap them to the subtle tones of the theme. */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: var(--bs-tertiary-bg); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-tertiary-bg); --bs-table-hover-bg: var(--bs-secondary-bg); --bs-table-hover-color: var(--bs-body-color); }
[data-bs-theme="dark"] .table-danger { --bs-table-bg: var(--bs-danger-bg-subtle); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-danger-bg-subtle); --bs-table-hover-bg: var(--bs-danger-bg-subtle); --bs-table-hover-color: var(--bs-body-color); }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: var(--bs-warning-bg-subtle); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-warning-bg-subtle); --bs-table-hover-bg: var(--bs-warning-bg-subtle); --bs-table-hover-color: var(--bs-body-color); }
[data-bs-theme="dark"] .table-success { --bs-table-bg: var(--bs-success-bg-subtle); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-success-bg-subtle); --bs-table-hover-bg: var(--bs-success-bg-subtle); --bs-table-hover-color: var(--bs-body-color); }
[data-bs-theme="dark"] .table-info { --bs-table-bg: var(--bs-info-bg-subtle); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-info-bg-subtle); --bs-table-hover-bg: var(--bs-info-bg-subtle); --bs-table-hover-color: var(--bs-body-color); }
[data-bs-theme="dark"] .table-primary { --bs-table-bg: var(--bs-primary-bg-subtle); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-primary-bg-subtle); --bs-table-hover-bg: var(--bs-primary-bg-subtle); --bs-table-hover-color: var(--bs-body-color); }
[data-bs-theme="dark"] .table .text-body-secondary { color: var(--bs-secondary-color) !important; }
[data-bs-theme="dark"] .progress-bar.bg-light { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color); }
[data-bs-theme="dark"] .text-bg-light { color: var(--bs-body-color) !important; background-color: var(--bs-tertiary-bg) !important; }
[data-bs-theme="dark"] .wf-bar { background: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] trix-toolbar .trix-button--icon::before { filter: invert(1); }
[data-bs-theme="dark"] trix-toolbar .trix-button { color: var(--bs-body-color); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .navbar-brand img { filter: brightness(1.15); }
.btn-primary {
  --bs-btn-bg: #327ea8;
  --bs-btn-border-color: #327ea8;
  --bs-btn-hover-bg: #2b6b8f;
  --bs-btn-hover-border-color: #286586;
  --bs-btn-focus-shadow-rgb: 81, 145, 181;
  --bs-btn-active-bg: #286586;
  --bs-btn-active-border-color: #265f7e;
  --bs-btn-disabled-bg: #327ea8;
  --bs-btn-disabled-border-color: #327ea8;
}
.btn-outline-primary {
  --bs-btn-color: #327ea8;
  --bs-btn-border-color: #327ea8;
  --bs-btn-hover-bg: #327ea8;
  --bs-btn-hover-border-color: #327ea8;
  --bs-btn-focus-shadow-rgb: 50, 126, 168;
  --bs-btn-active-bg: #327ea8;
  --bs-btn-active-border-color: #327ea8;
  --bs-btn-disabled-color: #327ea8;
  --bs-btn-disabled-border-color: #327ea8;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #99bfd4;
  box-shadow: 0 0 0 .25rem rgba(50, 126, 168, .25);
}
.form-check-input:checked { background-color: #327ea8; border-color: #327ea8; }
.dropdown-menu { --bs-dropdown-link-active-bg: #327ea8; }
.nav-pills { --bs-nav-pills-link-active-bg: #327ea8; }
.pagination { --bs-pagination-active-bg: #327ea8; --bs-pagination-active-border-color: #327ea8; }
.navbar-brand img { height: 2rem; width: 2rem; }
body { min-height: 100vh; }
[x-cloak] { display: none !important; }
.calendar td { min-width: 4.5rem; height: 4.5rem; vertical-align: top; }
.team-calendar th, .team-calendar td { white-space: nowrap; text-align: center; font-size: .8rem; padding: .25rem .4rem; }
.team-calendar .person { text-align: left; position: sticky; left: 0; background: var(--bs-body-bg); z-index: 1; }
.team-calendar .week-start { border-left: 2px solid var(--bs-border-color); }
.team-calendar .today { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.st-ufficio { background: var(--bs-success-bg-subtle); }
.st-casa { background: var(--bs-info-bg-subtle); }
.st-trasferta { background: var(--bs-warning-bg-subtle); }
.st-assente { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.st-riposo, .st-festa { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.dot-partial {
  display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.125em;
  background: linear-gradient(90deg, var(--bs-success) 50%, var(--bs-warning) 50%);
}

/* Projects: load of a person-month against the 60% cap (templates/projects/people.html). Table cells take their
   background from Bootstrap's --bs-table-bg, so the classes set both. */
.load-basso { --bs-table-bg: var(--bs-success-bg-subtle); background: var(--bs-success-bg-subtle); }
.load-medio { --bs-table-bg: var(--bs-info-bg-subtle); background: var(--bs-info-bg-subtle); }
.load-alto { --bs-table-bg: var(--bs-warning-bg-subtle); background: var(--bs-warning-bg-subtle); }
.load-oltre { --bs-table-bg: var(--bs-danger-bg-subtle); background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.badge.load-basso, .badge.load-medio, .badge.load-alto { color: var(--bs-body-color); }

/* Sortable table headers (static/js/table-tools.js). */
th.sortable { cursor: pointer; user-select: none; }
th.sortable[aria-sort="ascending"]::after { content: " \2191"; }
th.sortable[aria-sort="descending"]::after { content: " \2193"; }

/* Workforce by year (templates/people/workforce.html). */
.wf-A { --bs-table-bg: var(--bs-info-bg-subtle); background: var(--bs-info-bg-subtle); }
.wf-C { --bs-table-bg: var(--bs-success-bg-subtle); background: var(--bs-success-bg-subtle); }
.wf-S { --bs-table-bg: var(--bs-primary-bg-subtle); background: var(--bs-primary-bg-subtle); }
.wf-out { --bs-table-bg: var(--bs-secondary-bg); background: var(--bs-secondary-bg); }
.badge.wf-A, .badge.wf-C, .badge.wf-S { color: var(--bs-body-color); }
.wf-bar { display: flex; height: 5px; margin-top: 2px; background: rgba(0, 0, 0, .08); border-radius: 2px; overflow: hidden; }
.wf-seg-A { background: var(--bs-info); }
.wf-seg-C { background: var(--bs-success); }
.wf-seg-S { background: var(--bs-primary); }
/* The current year's column, framed in red. */
.table .wf-now { border-left: 2px solid var(--bs-danger) !important; border-right: 2px solid var(--bs-danger) !important; }
.table .wf-now-top { border-top: 2px solid var(--bs-danger) !important; }
.table .wf-now-bottom { border-bottom: 2px solid var(--bs-danger) !important; }

/* Compliance statuses (templates/compliance/list.html, people/person_detail.html). */
.cs-ok { --bs-table-bg: var(--bs-success-bg-subtle); background: var(--bs-success-bg-subtle); }
.cs-in_scadenza { --bs-table-bg: var(--bs-warning-bg-subtle); background: var(--bs-warning-bg-subtle); }
.cs-scaduto { --bs-table-bg: var(--bs-danger-bg-subtle); background: var(--bs-danger-bg-subtle); }
.cs-mancante:not(.text-body-secondary) { --bs-table-bg: var(--bs-danger-bg-subtle); background: var(--bs-danger-bg-subtle); }

/* Layout: top bar, sidebar grouped by area (an offcanvas below lg), content. */
.app-topbar { --personi-topbar-height: 3.5rem; min-height: var(--personi-topbar-height); }
.app-main { min-width: 0; }
.sidebar-heading {
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bs-secondary-color); padding: .9rem .75rem .25rem;
}
.sidebar-nav .nav-link { color: var(--bs-body-color); padding: .35rem .75rem; font-size: .925rem; }
.sidebar-nav .nav-link:hover { background: var(--bs-secondary-bg); }
.sidebar-nav .nav-link.active { color: #fff; background: var(--bs-primary); }
.sidebar-nav .nav-link .bi { width: 1.1rem; text-align: center; }
@media (min-width: 992px) {
  .app-sidebar {
    width: 15rem; flex-shrink: 0; border-right: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    position: sticky; top: 3.5rem; height: calc(100vh - 3.5rem); overflow-y: auto;
  }
}
/* Phones: a wide table scrolls sideways instead of widening the page (tables already in .table-responsive excluded). */
@media (max-width: 767.98px) {
  .app-main :not(.table-responsive) > table.table { display: block; overflow-x: auto; }
}

/* Bacheca: the WYSIWYG editor (Trix) without file attachments, which the text never carries. */
trix-editor { min-height: 12rem; background: var(--bs-body-bg); resize: vertical; overflow: auto; }
trix-editor.trix-big { min-height: 70vh; }
.news-cover { max-height: 22rem; width: 100%; object-fit: contain; background: var(--bs-tertiary-bg); }
.news-thumb { height: 100%; width: 100%; max-height: 10rem; object-fit: contain; background: var(--bs-tertiary-bg); }
trix-toolbar .trix-button-group--file-tools { display: none; }
.news-body h1 { font-size: 1.25rem; }
.news-body blockquote { border-left: 3px solid var(--bs-border-color); padding-left: .75rem; color: var(--bs-secondary-color); }
.news-photo { max-height: 24rem; object-fit: contain; }

/* Help page (docs/specs.md § 13.2): screenshots no wider than a readable column. */
.help-shot { max-width: min(100%, 760px); }