/* Project styles on top of Bootstrap. No inline styles anywhere: the CSP blocks them. */

/* Hidden until Alpine starts. */
[x-cloak] {
  display: none !important;
}

/* htmx loading indicator (htmx's own injected styles are disabled by includeIndicatorStyles: false). */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.error-page {
  max-width: 40rem;
}

.login-box {
  max-width: 24rem;
}

.mfa-box {
  max-width: 36rem;
}

.mfa-qr {
  width: 12rem;
  height: 12rem;
  background: #fff;
}

.mfa-codes {
  columns: 2;
}

/* The browser's own parts (number field arrows, scrollbars, date pickers) follow the chosen theme,
   not the device's: Bootstrap sets color-scheme only for the dark theme, and the page declares
   "light dark", so a light theme on a dark device drew them dark. */
:root[data-bs-theme="light"] {
  color-scheme: light;
}

/* ---- The app's colours, per theme ------------------------------------------------------------
   The light theme's --app-… are the default (also without data-bs-theme). Every grey
   carries a little of the brand's blue, so that the page, the cards and the menu read as one family.
   --app-brand-gradient: the menu and the public pages' panel, always under white text. Light theme:
     white is 5.8:1 at the start and 4.6:1 at the lightest end, just over the 4.5:1 minimum: do not
     lighten.
   --app-brand-gradient-light/-dark: both themes' gradients, for the previews on Sistema → Logo.
   --app-page-bg: the page; --app-surface: cards, tables, bars and lists over it. */

:root {
  --app-brand-gradient-light: linear-gradient(160deg, #5a6677 0%, #606d7f 55%, #687689 100%);
  --app-brand-gradient-dark: linear-gradient(160deg, #1a2229 0%, #1f2a33 55%, #26343f 100%);
  --app-brand-gradient: var(--app-brand-gradient-light);
  --app-page-bg: #eceef1;
  --app-surface: #fff;
}

:root[data-bs-theme="dark"] {
  --app-brand-gradient: var(--app-brand-gradient-dark);
  --app-page-bg: #33363a;
  --app-surface: #3d4045;
  --app-field-bg: #2b2e32;
  --app-button-bg: #393c41;
  /* One border colour for the whole theme: Bootstrap's #495057 barely shows on these greys. */
  --bs-border-color: #62666d;
  /* Links: the outline buttons' blue (Bootstrap's #6ea8fe is 4.3:1 on the surface, this is 4.8:1). */
  --bs-link-color: #6cb4ff;
  --bs-link-color-rgb: 108, 180, 255;
  --bs-link-hover-color: #9fceff;
  --bs-link-hover-color-rgb: 159, 206, 255;
}

/* Light theme links: Bootstrap's #0d6efd is 3.8:1 on the page's grey, this one is 5.5:1 (6.4:1 on
   white). */
:root[data-bs-theme="light"] {
  --bs-link-color: #0a58ca;
  --bs-link-color-rgb: 10, 88, 202;
  --bs-link-hover-color: #084298;
  --bs-link-hover-color-rgb: 8, 66, 152;
}

/* ---- Dashboard shell (M3.1): side menu, light and dark themes ---------------------------------
   Colors only through Bootstrap's variables and the app's own (--app-…, above), so both
   data-bs-theme values work unchanged. */

.bi {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: currentColor;
}

.app-shell {
  --app-sidebar-width: 16rem;
  --app-sidebar-collapsed: 4.5rem;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  width: var(--app-sidebar-width);
  background: var(--bs-tertiary-bg);
  border-right: 1px solid var(--bs-border-color);
  transition: width 150ms ease, transform 200ms ease;
}

.app-main {
  padding: 1.5rem;
  transition: margin-left 150ms ease;
}

.app-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.app-brand {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  text-decoration: none;
  white-space: nowrap;
}

.app-brand-mini {
  display: none;
}

/* The app's name in place of a logo (M3.13): up to 60 characters, so it may wrap. */
.app-brand-name {
  display: inline-block;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  color: var(--bs-secondary-color);
  border-radius: var(--bs-border-radius);
}

.app-icon-button:hover,
.app-icon-button:focus-visible {
  color: var(--bs-emphasis-color);
  background: var(--bs-secondary-bg);
}

.app-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

.app-nav-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 1rem);
  margin: 1rem 0.5rem 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  background: none;
  border: 0;
  border-radius: var(--bs-border-radius);
}

/* A section or group that opens and closes (M3.11): its height goes from 0 to the list's own, with
   no fixed height to guess. Closed, its items are hidden from the keyboard too (visibility). */
.app-nav-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.2s ease;
}

.app-nav-collapse > .app-nav {
  min-height: 0;
  overflow: hidden;
  transition: visibility 0.2s;
}

.app-nav-collapse.is-closed {
  grid-template-rows: 0fr;
}

/* The list's overflow: hidden would cut the focus ring of its links: drawn inside instead. */
.app-nav-collapse .app-nav-link:focus-visible {
  outline-offset: -2px;
}

.app-nav-collapse.is-closed > .app-nav {
  visibility: hidden;
}

/* A section title opens and closes its section (M3.11). */
.app-nav-title:hover,
.app-nav-title:focus-visible {
  color: var(--bs-emphasis-color);
  background: var(--bs-secondary-bg);
}

.app-nav-title[aria-expanded="true"] .app-nav-chevron {
  transform: rotate(180deg);
}

.app-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 0.125rem;
  padding: 0.5rem 0.75rem;
  color: var(--bs-body-color);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: var(--bs-border-radius);
}

.app-nav-link:hover,
.app-nav-link:focus-visible {
  color: var(--bs-emphasis-color);
  background: var(--bs-secondary-bg);
}

.app-nav-link.active {
  color: var(--bs-white);
  background: var(--bs-primary);
}

.app-nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-nav-chevron {
  width: 1rem;
  height: 1rem;
  transition: transform 150ms ease;
}

.app-nav-link[aria-expanded="true"] .app-nav-chevron {
  transform: rotate(180deg);
}

.app-nav-sub {
  padding-left: 1.25rem;
}

.app-sidebar-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid var(--bs-border-color);
}

.app-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background: var(--bs-secondary-bg);
  border-radius: 50%;
}

/* Avatar, name and role: a link to the user's profile (M3.5a). */
.app-user-link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin: -0.25rem;
  padding: 0.25rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--bs-border-radius);
}

.app-user-link:hover,
.app-user-link:focus-visible {
  background: var(--bs-tertiary-bg);
}

.app-user {
  flex: 1;
  min-width: 0;
}

.app-user-name {
  display: block;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-role {
  color: var(--bs-primary-text-emphasis);
  background: var(--bs-primary-bg-subtle);
}

.app-topbar,
.app-close,
.app-backdrop {
  display: none;
}

/* Wide screens: menu always there, reducible to icons (data-sidebar set by theme.js / app.js). */
@media (min-width: 992px) {
  .app-main {
    margin-left: var(--app-sidebar-width);
  }

  [data-sidebar="collapsed"] .app-sidebar {
    width: var(--app-sidebar-collapsed);
  }

  [data-sidebar="collapsed"] .app-main {
    margin-left: var(--app-sidebar-collapsed);
  }

  [data-sidebar="collapsed"] .app-sidebar-head {
    flex-direction: column;
    padding-inline: 0.5rem;
  }

  [data-sidebar="collapsed"] .app-brand-full,
  [data-sidebar="collapsed"] .app-nav-label,
  [data-sidebar="collapsed"] .app-nav-chevron,
  [data-sidebar="collapsed"] .app-nav-title,
  [data-sidebar="collapsed"] .app-user {
    display: none;
  }

  [data-sidebar="collapsed"] .app-brand-mini {
    display: inline;
  }

  /* Reduced to icons there are no section titles: every item stays reachable, sections apart. */
  [data-sidebar="collapsed"] .app-nav-section > .app-nav-collapse {
    grid-template-rows: 1fr;
  }

  [data-sidebar="collapsed"] .app-nav-section > .app-nav-collapse > .app-nav {
    visibility: visible;
  }

  [data-sidebar="collapsed"] .app-nav-section {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
  }

  [data-sidebar="collapsed"] .app-collapse .bi {
    transform: rotate(180deg);
  }

  [data-sidebar="collapsed"] .app-nav-link {
    justify-content: center;
  }

  [data-sidebar="collapsed"] .app-nav-sub {
    padding-left: 0;
  }

  [data-sidebar="collapsed"] .app-sidebar-foot {
    flex-direction: column;
    padding-inline: 0.5rem;
  }

  [data-sidebar="collapsed"] .app-user-link {
    flex: none;
  }
}

/* Narrow screens: a top bar with ☰; the menu opens over the page. */
@media (max-width: 991.98px) {
  .app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
  }

  /* Closed: off screen and out of the tab order and screen readers (visibility), after sliding out. */
  .app-sidebar {
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 200ms ease, visibility 0s 200ms;
  }

  .app-sidebar.is-open {
    visibility: visible;
    transform: none;
    box-shadow: var(--bs-box-shadow-lg);
    transition: transform 200ms ease, visibility 0s;
  }

  .app-collapse {
    display: none;
  }

  .app-close {
    display: inline-flex;
  }

  .app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    display: block;
    background: rgba(var(--bs-black-rgb), 0.5);
  }

  .app-main {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .app-main,
  .app-nav-chevron,
  .app-nav-collapse,
  .app-nav-collapse > .app-nav {
    transition: none;
  }
}

/* ---- Public pages (M3.12): brand panel on the left, form on the right -------------------------- */

.app-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh; /* phones: without the browser's bars (100vh stays as the fallback) */
}

/* The company's colours (--app-brand-gradient, at the top of this file), under white text or the
   public pages' own logo (M3.16). */
.app-auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  color: #fff;
  background: var(--app-brand-gradient);
}

.app-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

/* A wide logo (M3.16): up to 420×240 (the saved image is at most 1200×480: sharp on dense
   screens). One per theme, as .app-logo. */
.app-auth-logo {
  width: auto;
  max-width: min(420px, 80%);
  height: auto;
  max-height: 240px;
}

.app-auth-logo-dark,
[data-bs-theme="dark"] .app-auth-logo-light {
  display: none;
}

[data-bs-theme="dark"] .app-auth-logo-dark {
  display: inline;
}

.app-auth-name {
  font-size: 1.75rem;
  font-weight: 600;
  color: #fff;
}

/* The form's side: the page's grey, as in the dashboard. */
.app-auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: var(--app-page-bg);
}

/* Each page's own box sets its width (.login-box, .mfa-box): this only caps the widest one. */
.app-auth-content {
  width: 100%;
  max-width: 36rem;
}

/* Phones and narrow windows: the panel becomes a band on top, the form underneath. */
@media (max-width: 767.98px) {
  .app-auth {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .app-auth-panel {
    padding: 1.5rem 1rem;
  }

  .app-auth-logo {
    max-width: min(280px, 80%);
    max-height: 96px;
  }

  .app-auth-name {
    font-size: 1.25rem;
  }

  .app-auth-main {
    align-items: flex-start;
    padding: 2rem 1rem;
  }
}

.app-home-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--bs-body-color);
  text-decoration: none;
}

.app-home-link:hover,
.app-home-link:focus-visible {
  border-color: var(--bs-primary);
}

/* A section's card on the home (M3.11): name, and its pages underneath. */
.app-section-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.app-section-card .bi {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--bs-primary);
}

.app-section-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
}

/* Where the page sits (M3.11): a clear "back" button, then the whole trail. */
.app-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.app-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
}

/* ---- User management (M3.2) ---------------------------------------------------------------- */

.app-form-box {
  max-width: 36rem;
}

.app-form-box .form-check-input + .form-check-label .badge,
.table .badge {
  font-weight: 500;
}

/* Free text with its line breaks (role descriptions, M3.3). */
.app-prewrap {
  white-space: pre-line;
}

/* Company logo (M3.10): one image per theme, the other one hidden; sizes per place. */
.app-logo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 40px;
  vertical-align: middle;
}

.app-logo-dark,
[data-bs-theme="dark"] .app-logo-light {
  display: none;
}

[data-bs-theme="dark"] .app-logo-dark {
  display: inline;
}

.app-brand-mini .app-logo {
  max-height: 32px;
}

/* With a logo, the expanded menu centres it across its whole width: the button sits over the
   right edge, and the same room is kept free on both sides so the logo never goes under it. */
:root:not([data-sidebar="collapsed"]) .app-sidebar-head:has(.app-logo) {
  position: relative;
}

:root:not([data-sidebar="collapsed"]) .app-sidebar-head:has(.app-logo) .app-brand {
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 0;
  padding-inline: 2.5rem; /* the button (2rem) and the gap */
}

:root:not([data-sidebar="collapsed"]) .app-sidebar-head:has(.app-logo) .app-icon-button {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}

/* The previews on Sistema → Logo, each on its own theme's background. */
.app-logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
}

/* The menu's and the public pages' logos (M3.16) on that theme's gradient, under white text (4.6:1
   or more on both gradients, as the menu and the panel themselves). */
.app-logo-preview-panel {
  color: #fff;
}

.app-logo-preview-panel[data-bs-theme="light"] {
  background: var(--app-brand-gradient-light);
}

.app-logo-preview-panel[data-bs-theme="dark"] {
  background: var(--app-brand-gradient-dark);
}

/* width/height auto: with the img's own width and height attributes, max-height alone shrank only
   the height and stretched the logo. */
.app-logo-preview img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 120px;
}

/* ---- The dashboard on the app's colours (variables at the top of this file) ------------------- */

body {
  background-color: var(--app-page-bg); /* only the page: --bs-body-bg is also the fields' colour */
}

.app-sidebar {
  background: var(--app-brand-gradient);
  border-right-color: transparent;
}

/* Light theme: the menu's own colours for white text on the gradient, and the logo for dark
   backgrounds. */
[data-bs-theme="light"] .app-sidebar {
  --bs-body-color: #fff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #fff; /* nothing lighter than white reaches 4.5:1 on the gradient */
  --bs-secondary-color-rgb: 255, 255, 255;
  /* Hover and avatar darken the gradient: any lighter shade puts white under 4.5:1. */
  --bs-secondary-bg: rgba(0, 0, 0, 0.15);
  --bs-tertiary-bg: rgba(0, 0, 0, 0.08);
  --bs-border-color: rgba(255, 255, 255, 0.22);
  color: var(--bs-body-color);
}

/* The surfaces over the page. */
.card {
  --bs-card-bg: var(--app-surface);
}

.table {
  --bs-table-bg: var(--app-surface);
}

.list-group {
  --bs-list-group-bg: var(--app-surface);
}

.pagination {
  --bs-pagination-bg: var(--app-surface);
  --bs-pagination-disabled-bg: var(--app-surface);
}

.app-topbar {
  background: var(--app-surface);
}

/* Light theme: white cards on the grey need no border, a light shadow instead. */
[data-bs-theme="light"] .card {
  --bs-card-border-color: transparent;
  box-shadow: var(--bs-box-shadow-sm);
}

[data-bs-theme="dark"] .card {
  --bs-card-border-color: var(--bs-border-color);
}

/* Dark theme: fields a softer dark than Bootstrap's #212529 on the lighter surfaces. */
[data-bs-theme="dark"] :is(.form-control, .form-select):not(:disabled) {
  background-color: var(--app-field-bg);
}

[data-bs-theme="dark"] :is(.form-control, .form-select):disabled {
  background-color: var(--bs-secondary-bg); /* Bootstrap's #2b3035 would look like an enabled field */
}

[data-bs-theme="dark"] .form-check-input {
  --bs-form-check-bg: var(--app-field-bg);
}

/* Outline buttons: a background of their own, to stand out on the page. Light theme: white, as the
   cards. Dark theme: just below the surface, and text and border in lighter shades of Bootstrap's
   colours (its own are mid tones, about 2:1 here): each the least light that reaches 4.5:1 on it
   (warning's own already does). Filled with their own colour on hover, as before. */
[class*="btn-outline-"] {
  --bs-btn-bg: var(--app-surface);
  --bs-btn-disabled-bg: var(--app-surface);
}

[data-bs-theme="dark"] [class*="btn-outline-"] {
  --bs-btn-bg: var(--app-button-bg);
  --bs-btn-disabled-bg: var(--app-button-bg);
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-border-color: var(--bs-link-color);
}

[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #adb5bd;
  --bs-btn-border-color: #adb5bd;
}

[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #ef979f;
  --bs-btn-border-color: #ef979f;
}

[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: #7abd9e;
  --bs-btn-border-color: #7abd9e;
}

/* The trail ("Torna a…", Home › …) as a bar across the top of the page: it takes back the main
   area's padding (1.5rem, 1rem on narrow screens) on the top and the sides, so it must stay the
   first thing in <main> (base.html). */
.app-main > .app-breadcrumb {
  margin: -1.5rem -1.5rem 1.25rem;
  padding: 0.75rem 1.5rem;
  background: var(--app-surface);
}

@media (max-width: 991.98px) {
  .app-main > .app-breadcrumb {
    margin: -1rem -1rem 1rem;
    padding: 0.75rem 1rem;
  }
}