/* Tanglr rebrand - cosmetic layer on top of the vendored front-office Bulma theme (style.css).
   Loaded last on purpose: color and typography only, no layout/structure changes, so every
   existing front-office template (CRM, Corsi, FORZA-VENDITE panels, polls, kiosk, ...) keeps
   working unchanged - this file is the entire "visual skin". Mirrors backoffice/tanglr-theme.css.

   Design tokens - every rule below reads from these instead of repeating literals, so the look
   stays in one place instead of drifting template by template. No inline style="" anywhere in the
   templates this file serves: a look that only lives in one <span style> breaks the moment anyone
   copies that markup elsewhere, which is exactly what happened before this pass (the login hero
   and the backoffice sidebar wordmark each had their own one-off inline override). */
:root {
  --tanglr-ink: #16213A;
  --tanglr-ink-soft: #4A5570;
  --tanglr-accent: #C97A3D;
  --tanglr-accent-hover: #D98A4D;
  --tanglr-accent-active: #B56A32;
  --tanglr-paper: #F6F4EF;
  --tanglr-surface: #FFFFFF;
  --tanglr-border: #DED8CC;
  --tanglr-radius-lg: 18px;
  --tanglr-radius-md: 10px;
  --tanglr-radius-sm: 6px;
}

body,
.is-family-primary,
.is-family-secondary,
.is-family-sans-serif {
  font-family: "Public Sans", BlinkMacSystemFont, -apple-system, "Segoe UI", sans-serif;
}
.is-family-monospace {
  font-family: "Space Mono", monospace;
}

.title,
.title.is-1, .title.is-2, .title.is-3, .title.is-4, .title.is-5, .title.is-6 {
  font-family: "Fraunces", serif;
}

/* Page surface - warm paper instead of stark white, matching the approved "Woven Signal"
   direction. Cards/boxes stay white so content still reads as raised off the page. */
html, body {
  background-color: var(--tanglr-paper);
}

/* Navbar - ink instead of the vendored white, with the wordmark and nav items in paper so they
   read against it. This is the single biggest visible gap against the approved mockup: every
   front-office page shares this one navbar, so one rule here reaches all of them. */
.navbar {
  background-color: var(--tanglr-ink);
}
.navbar-item,
.navbar-link {
  color: var(--tanglr-paper);
}
.navbar-item:hover, .navbar-item.is-active,
.navbar-link:hover, .navbar-link.is-active {
  background-color: rgba(246, 244, 239, 0.08);
  color: #fff;
}
.navbar-burger {
  color: var(--tanglr-paper);
}
/* The little expand arrow next to "Utente" is its own separate Bulma rule
   (.navbar-link:not(.is-arrowless)::after), not covered by the .navbar-link color rule above -
   flagged live as still blue against the accent everywhere else. */
.navbar-link:not(.is-arrowless)::after {
  border-color: var(--tanglr-accent);
}
/* The dropdown panel itself is a separate, elevated surface (not the navbar bar), so it stays
   light with dark text for readability - the same convention the mockup's own card uses. */
.navbar-dropdown {
  background-color: var(--tanglr-surface);
  border-radius: var(--tanglr-radius-md);
}
.navbar-dropdown .navbar-item {
  color: var(--tanglr-ink);
}
.navbar-dropdown .navbar-item:hover {
  background-color: var(--tanglr-paper);
  color: var(--tanglr-ink);
}

.tanglr-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--tanglr-paper);
}
.tanglr-brand svg { flex-shrink: 0; }
/* Large, centered variant for the login hero - replaces what used to be an inline style="" on
   that one page. */
.tanglr-brand-hero {
  justify-content: center;
  font-size: 2.6rem;
}

/* Rounded corners everywhere, per the approved direction - cards/boxes/hero get the generous
   radius, interactive controls get a smaller one. Bulma ships these components with its default
   4px, which read as "default Bulma" rather than Tanglr; this is the one change that, more than
   any single color, makes the product match the approved mockup instead of looking like a
   reskinned stock theme. */
.box, .card, .message, .notification, .hero.is-primary, .hero.is-link, .hero.is-info,
.modal-card {
  border-radius: var(--tanglr-radius-lg);
  overflow: hidden;
}
.button, .input, .textarea, .select select,
.tag:not(body), .pagination-link, .dropdown-content {
  border-radius: var(--tanglr-radius-md);
}
/* Bulma's own size modifiers (.is-small/.is-normal/.is-medium/.is-large) carry their own
   higher-specificity border-radius for buttons and inputs/textareas (2px) - without matching
   that specificity here, every .is-small control (the large majority of controls across this
   codebase) silently kept the old sharp corners regardless of the rule above. Found live, not
   assumed: a real button measured 2px instead of 10px until this was added. */
.button.is-small, .button.is-normal, .button.is-medium, .button.is-large,
.is-small.input, .is-small.textarea,
.is-normal.input, .is-normal.textarea,
.is-medium.input, .is-medium.textarea,
.is-large.input, .is-large.textarea {
  border-radius: var(--tanglr-radius-md);
}

/* Accent: replaces the theme's default blue (#0000ff). Semantic colors (is-success/is-danger/
   is-warning/is-info) are untouched - they carry meaning independent of the brand. */
a { color: #C97A3D; }
a:hover { color: #B56A32; }

.button.is-link {
  background-color: #C97A3D;
}
.button.is-link:hover, .button.is-link.is-hovered {
  background-color: #D98A4D;
}
.button.is-link:focus, .button.is-link.is-focused {
  box-shadow: 0 0 0 0.125em rgba(201, 122, 61, 0.25);
}
.button.is-link:active, .button.is-link.is-active {
  background-color: #B56A32;
}
.button.is-link[disabled], fieldset[disabled] .button.is-link {
  background-color: #C97A3D;
  border-color: #C97A3D;
}

/* is-info turns out to be this codebase's real default "action button" color across most
   templates (88 button uses found platform-wide vs. a handful of is-link) - far more pervasive
   than is-link alone, which is why the brand accent kept "coming back" to blue on untouched
   pages after the first pass (e.g. inpoint/index.html's "Vai al sito" cards). Repainting it the
   same as is-link here is a single rule that covers every current AND future button.is-info,
   instead of chasing each template one at a time. Non-button is-info (tag/notification/message)
   is untouched - those are genuinely informational and carry meaning the accent shouldn't
   override. */
.button.is-info {
  background-color: #C97A3D;
}
.button.is-info:hover, .button.is-info.is-hovered {
  background-color: #D98A4D;
}
.button.is-info:focus, .button.is-info.is-focused {
  box-shadow: 0 0 0 0.125em rgba(201, 122, 61, 0.25);
}
.button.is-info:active, .button.is-info.is-active {
  background-color: #B56A32;
}
.button.is-info[disabled], fieldset[disabled] .button.is-info {
  background-color: #C97A3D;
  border-color: #C97A3D;
}
.button.is-info.is-inverted {
  color: #C97A3D;
}
.button.is-info.is-inverted[disabled], fieldset[disabled] .button.is-info.is-inverted {
  color: #C97A3D;
}

/* is-primary is Bulma's own name for "the brand's own color" (distinct from is-link, which
   theme-wise is just "an interactive action") - every service page's hero band
   (inpoint/single_service_page.html, frozen, untouched) uses it, so this is the one semantic
   class that genuinely belongs to the brand rather than to a status. */
.hero.is-primary {
  background-color: #16213A;
  color: #F6F4EF;
}
.button.is-primary {
  background-color: #16213A;
}
.button.is-primary:hover, .button.is-primary.is-hovered {
  background-color: #233259;
}
.button.is-primary:active, .button.is-primary.is-active {
  background-color: #0F1627;
}
.button.is-primary[disabled], fieldset[disabled] .button.is-primary {
  background-color: #16213A;
  border-color: #16213A;
}

/* Login hero keeps its own full-height ink background (not rounded - see the .hero.is-primary
   rounding rule above, which deliberately excludes .is-fullheight). The wordmark inside it uses
   the shared .tanglr-brand + .tanglr-brand-hero classes defined earlier in this file. */
.tanglr-hero {
  background-color: var(--tanglr-ink);
}

/* Full Bulma component coverage - everything above only caught the two components (buttons,
   hero) we'd actually seen in use. Going through style.css selector by selector for every rule
   that still carries the vendored is-link/is-info/is-primary blue, so no other component
   (breadcrumbs, form focus rings, tags, notifications, messages, navbar variants, pagination,
   active-state indicators, table headers) can show the old color the first time it happens to be
   used on a page we haven't personally clicked through yet. */

/* .breadcrumb a has higher selector specificity than the plain "a" rule above, so it was still
   winning and showing blue breadcrumbs despite the earlier override - this fixes it directly
   instead of relying on cascade order. Seen live in the single_service_page.html top bar. */
.breadcrumb a,
.breadcrumb li.is-active a {
  color: #C97A3D;
}

/* Form focus rings - the single most commonly seen remaining blue, since every text input/select/
   textarea focus triggers it (seen live on the login page's own username field). */
.input:focus, .textarea:focus, .select select:focus,
.is-focused.input, .is-focused.textarea, .select select.is-focused,
.input:active, .textarea:active, .select select:active,
.is-active.input, .is-active.textarea, .select select.is-active {
  border-color: #C97A3D;
  box-shadow: 0 0 0 0.125em rgba(201, 122, 61, 0.25);
}
.select:not(.is-multiple):not(.is-loading)::after {
  border-color: #C97A3D;
}

.tag:not(body).is-link, .tag:not(body).is-info {
  background-color: #C97A3D;
  color: #fff;
}
.tag:not(body).is-primary {
  background-color: #16213A;
  color: #fff;
}
.notification.is-link, .notification.is-info {
  background-color: #C97A3D;
  color: #fff;
}
.notification.is-primary {
  background-color: #16213A;
  color: #fff;
}
.message.is-link, .message.is-info {
  background-color: #F5E6D6;
}
.message.is-link .message-header, .message.is-info .message-header {
  background-color: #C97A3D;
  color: #fff;
}
.message.is-link .message-body, .message.is-info .message-body {
  border-color: #C97A3D;
  color: #8A5425;
}
.message.is-primary .message-header {
  background-color: #16213A;
  color: #fff;
}
.message.is-primary .message-body {
  border-color: #16213A;
}

.navbar.is-link, .navbar.is-info {
  background-color: #C97A3D;
}
.navbar.is-primary {
  background-color: #16213A;
}
.hero.is-link, .hero.is-info {
  background-color: #C97A3D;
  color: #fff;
}

.pagination-link.is-current {
  background-color: #C97A3D;
  border-color: #C97A3D;
}
.pagination-link:focus {
  border-color: #C97A3D;
}
.navbar-link.is-active,
.navbar-dropdown a.navbar-item.is-active,
.navbar-item.is-tab.is-active,
.panel-block.is-active,
.panel-block.is-active .panel-icon,
.list-item.is-active,
.menu-list a.is-active,
button.dropdown-item.is-active {
  color: #C97A3D;
}

.table th.is-link, .table th.is-info {
  background-color: #C97A3D;
  color: #fff;
}
.table th.is-primary {
  background-color: #16213A;
  color: #fff;
}
.table tr.is-selected {
  background-color: #C97A3D;
  color: #fff;
}

.help.is-link, .help.is-info {
  color: #C97A3D;
}
.help.is-primary {
  color: #16213A;
}
.has-text-link, .has-text-info {
  color: #C97A3D !important;
}
.has-text-primary {
  color: #16213A !important;
}
.has-background-link, .has-background-info {
  background-color: #C97A3D !important;
}
.has-background-primary {
  background-color: #16213A !important;
}

/* Mobile-first front-office - Bulma's own grid/columns/hero/navbar are already responsive by
   design, but the templates built on top of it (CRM, Corsi, FORZA-VENDITE, marketplace panels)
   almost never wrap a <table> in Bulma's own .table-container (only one template in the whole
   project does), so a data table wider than the viewport just pushes the whole page sideways on
   a phone. Scoped to <=768px (Bulma's own tablet breakpoint) so desktop rendering - already
   verified live this session - is completely unaffected; this is purely additive. */
@media screen and (max-width: 768px) {
  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Button/field rows that forgot the is-grouped-multiline modifier would otherwise overflow
     instead of wrapping to a second line - a safety net for pages we haven't all clicked through. */
  .field.is-grouped {
    flex-wrap: wrap;
  }

  /* Any image/canvas without its own responsive handling (most already have one - e.g. the
     signature pad - but this is a safety net for the rest). */
  img, canvas, svg {
    max-width: 100%;
    height: auto;
  }

  .tanglr-hero .tanglr-brand {
    font-size: 1.7rem;
  }
  .tanglr-brand {
    font-size: 1.15rem;
  }

  /* The vendor theme hardcodes .breadcrumb { white-space: nowrap }, so a real breadcrumb trail
     (every single_service_page has one: Home / Org / Area / service description) just runs off
     the right edge on a phone instead of wrapping - seen live. */
  .breadcrumb {
    white-space: normal;
  }
  .breadcrumb ul, .breadcrumb ol {
    flex-wrap: wrap;
  }
  .breadcrumb li {
    margin-top: 0.25rem;
  }

  /* Belt-and-braces: nothing on the page should ever be able to force horizontal scroll of the
     page itself, whatever the cause. */
  body {
    overflow-x: hidden;
  }
}