/* Bootstrap tweaks + estilos de la app */

/* Tema (colores base) - inspirado en el logo */
:root {
  /* Brand */
  --brand-yellow: #f2b705; /* acento del logo */
  --brand-graphite: #2b2f36; /* gris oscuro del logo */

  /* Tipografía */
  --bs-body-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Bootstrap theme overrides */
  --bs-primary: var(--brand-yellow);
  --bs-primary-rgb: 242, 183, 5;

  --bs-secondary: var(--brand-graphite);
  --bs-secondary-rgb: 43, 47, 54;

  /* Neutrales */
  --bs-body-bg: #f7f8fa;
  --bs-body-color: #1f2328;
  --bs-border-color: rgba(16, 24, 40, 0.12);

  --bs-link-color: #b88400;
  --bs-link-hover-color: #936b00;

  /* UI */
  --app-navbar-height: 56px;
  --app-sidebar-width: 280px;
  --app-sidebar-width-collapsed: 72px;

  /* Nav pills del sidebar: resaltado = marca (no azul por defecto) */
  --app-sidebar-active-bg: var(--brand-yellow);
  --app-sidebar-active-color: var(--brand-graphite);
  --app-sidebar-active-icon: var(--brand-graphite);
}

/*
 * Modo chiaro — tarjetas “panel” (estilo Airbnb-ish):
 * contorno firme vía anillo en sombra (no toca border-* direccionales),
 * radio generoso, sombra suave en capas.
 */
[data-bs-theme="light"] {
  --app-card-radius: 0.75rem;
  --app-card-ring: rgba(31, 35, 40, 0.11);
  --app-card-shadow-1: rgba(31, 35, 40, 0.05);
  --app-card-shadow-2: rgba(31, 35, 40, 0.07);
}

[data-bs-theme="light"] .card.border-0.shadow-sm {
  border-radius: var(--app-card-radius);
  background-color: #fff;
  box-shadow:
    0 0 0 1px var(--app-card-ring),
    0 1px 2px var(--app-card-shadow-1),
    0 6px 20px var(--app-card-shadow-2) !important;
}

[data-bs-theme="light"] .card.border-0.shadow-sm .app-form-section-head {
  border-bottom-color: rgba(31, 35, 40, 0.1);
}

[data-bs-theme="light"] .card.border-0.shadow-sm .table-light {
  --bs-table-border-color: rgba(31, 35, 40, 0.1);
}

[data-bs-theme="light"] .card.border-0.shadow-sm .list-group-item {
  border-color: rgba(31, 35, 40, 0.08);
}

/* Más aire lateral en el contenido (títulos, listas): el fluid por defecto queda muy pegado */
.app-main > .container-fluid {
  --bs-gutter-x: 2.25rem;
}

@media (min-width: 1200px) {
  .app-main > .container-fluid {
    --bs-gutter-x: 2.75rem;
  }
}

/* Tablas de listado: celdas con padding horizontal cómodo */
.app-list-table thead th,
.app-list-table tbody td {
  padding-left: 1rem;
  padding-right: 1rem;
}

.app-list-table thead th {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.app-list-table thead.table-light th {
  color: var(--bs-secondary-color);
}

/*
 * Modo oscuro: fondo menos “negro puro” y capas (body < card) para que las tarjetas se lean bien.
 * --app-dark-chrome va sincronizado con theme-color en base.html (meta + Alpine).
 */
[data-bs-theme="dark"] {
  --app-dark-chrome: #1c212b;
  --app-dark-surface: #262d3b;
  --app-dark-surface-hover: #2c3444;

  --bs-body-bg: var(--app-dark-chrome);
  --bs-body-color: #e9eef5;
  --bs-border-color: rgba(255, 255, 255, 0.12);

  --bs-secondary-bg: #222933;
  --bs-tertiary-bg: #2a3140;

  --bs-card-bg: var(--app-dark-surface);
  --bs-card-border-color: rgba(255, 255, 255, 0.1);
  --bs-card-cap-bg: rgba(0, 0, 0, 0.2);
  --bs-card-color: var(--bs-body-color);

  --bs-link-color: #ffd45a;
  --bs-link-hover-color: #ffe08a;

  --bs-primary: #f2b705;
  --bs-primary-rgb: 242, 183, 5;
}

/* Tarjetas sin borde: sombra + bisel suave para separarlas del fondo */
[data-bs-theme="dark"] .card.border-0.shadow-sm {
  box-shadow:
    0 0.35rem 1.1rem rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.07) !important;
}

[data-bs-theme="dark"] .card .table-light {
  --bs-table-bg: rgba(255, 255, 255, 0.06);
  --bs-table-color: var(--bs-body-color);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .app-breadcrumb .breadcrumb {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .app-breadcrumb .breadcrumb-item.active {
  color: var(--bs-body-color);
  opacity: 0.9;
}

[data-bs-theme="dark"] .app-sidebar-desktop {
  border-right-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .app-sidebar-desktop .nav-pills .nav-link:not(.active):hover,
[data-bs-theme="dark"] .offcanvas .nav-pills .nav-link:not(.active):hover {
  background-color: rgba(242, 183, 5, 0.14);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .app-sidebar-desktop .nav-pills .nav-link.active,
[data-bs-theme="dark"] .offcanvas .nav-pills .nav-link.active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* outline-primary en claro usa texto #111; en oscuro hay que invertir el contraste */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #ffe9a8;
  --bs-btn-border-color: rgba(242, 183, 5, 0.85);
  --bs-btn-hover-bg: rgba(242, 183, 5, 0.2);
  --bs-btn-hover-border-color: #f2b705;
  --bs-btn-hover-color: #fffdf5;
  --bs-btn-active-bg: #f2b705;
  --bs-btn-active-border-color: #f2b705;
  --bs-btn-active-color: #12151a;
  --bs-btn-disabled-color: rgba(255, 233, 168, 0.45);
  --bs-btn-disabled-border-color: rgba(242, 183, 5, 0.25);
}

/* Fix: HTMX indicator */
[htmx-indicator] { display: none; }
.htmx-request [htmx-indicator] { display: block; }

body {
  padding-top: var(--app-navbar-height);
}

/* Pantallas de acceso: sin navbar fija ni sidebar */
body.app-auth-page {
  padding-top: 0;
}

body.app-auth-page .app-sidebar-desktop {
  display: none !important;
}

@media (min-width: 768px) {
  body.app-auth-page .app-main {
    margin-left: 0 !important;
  }
}

body.app-auth-page button[data-bs-target="#appSidebarOffcanvas"],
body.app-auth-page button[data-app-sidebar-toggle] {
  display: none !important;
}

/* Auth layout: centra contenido y mantiene aire */
body.app-auth-page .app-main > .container-fluid {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* IMPORTANT: en flex, los hijos pueden encogerse al ancho mínimo.
   Forzamos que el contenido use el ancho disponible (responsive Bootstrap). */
body.app-auth-page .app-main > .container-fluid > * {
  width: 100%;
}

/* Pagine di errore: niente sidebar, main a tutta larghezza */
body.app-error-page .app-sidebar-desktop {
  display: none !important;
}

@media (min-width: 768px) {
  body.app-error-page .app-main {
    margin-left: 0 !important;
  }
}

body.app-error-page button[data-bs-target="#appSidebarOffcanvas"],
body.app-error-page button[data-app-sidebar-toggle] {
  display: none !important;
}

.app-error-icon-circle {
  width: 4.5rem;
  height: 4.5rem;
}

/* Navbar: nombre de usuario truncado en móvil para no desbordar */
@media (max-width: 767.98px) {
  .app-navbar-user-btn {
    max-width: 7rem;
  }
}

/*
 * Búsqueda global: el overlay debe quedar por encima de main, sidebar, navbar y
 * componentes con z-index alto (p. ej. Tom Select 2000). Además, si Alpine
 * reemplaza el atributo style del nodo, el z-index inline puede perderse; esta
 * regla en hoja fija lo restablece.
 */
#app-global-search-overlay {
  z-index: 10050 !important;
}

[x-cloak] {
  display: none !important;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.htmx-request .htmx-indicator {
  opacity: 1;
}

/*
 * Menú Azioni en tablas: .table-responsive recorta con overflow.
 * Popper strategy "fixed" en el botón + este z-index para que el menú
 * quede por encima del resto de la fila/tarjeta (por debajo de modales Bootstrap).
 */
.app-table-actions-menu.dropdown-menu {
  z-index: 1050;
}

.app-modal-icon-success {
  width: 3rem;
  height: 3rem;
  background-color: var(--bs-success);
  color: #fff;
  font-size: 1.35rem;
}

.app-modal-icon-error {
  width: 3rem;
  height: 3rem;
  background-color: var(--bs-danger);
  color: #fff;
  font-size: 1.35rem;
}

.app-modal-icon-warning {
  width: 3rem;
  height: 3rem;
  background-color: var(--bs-warning);
  color: #fff;
  font-size: 1.35rem;
}

/* Breadcrumb Bootstrap, alineado a la marca */
.app-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: "›";
  padding: 0.5rem 0.85rem;
  border-radius: 0.6rem;
  background-color: rgba(43, 47, 54, 0.05);
  border: 1px solid rgba(16, 24, 40, 0.08);
  font-size: 0.875rem;
  font-weight: 500;
}

.app-breadcrumb .breadcrumb-item a {
  color: var(--bs-link-color);
  text-decoration: none;
}

.app-breadcrumb .breadcrumb-item a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

.app-breadcrumb .breadcrumb-item.active {
  color: var(--brand-graphite);
}

/* Sidebar + menú móvil: ítem seleccionado acorde al logo */
.app-sidebar-desktop .nav-pills .nav-link.active,
.offcanvas .nav-pills .nav-link.active {
  color: var(--app-sidebar-active-color);
  background-color: var(--app-sidebar-active-bg);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(43, 47, 54, 0.14);
}

.app-sidebar-desktop .nav-pills .nav-link.active .nav-sidebar-icon,
.offcanvas .nav-pills .nav-link.active .nav-sidebar-icon {
  color: var(--app-sidebar-active-icon);
}

.app-sidebar-desktop .nav-pills .nav-link:focus-visible,
.offcanvas .nav-pills .nav-link:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(242, 183, 5, 0.45);
}

.app-sidebar-desktop .nav-pills .nav-link:not(.active):hover,
.offcanvas .nav-pills .nav-link:not(.active):hover {
  background-color: rgba(242, 183, 5, 0.12);
  color: var(--brand-graphite);
}

/* Un toque más “industrial” */
h1, h2, h3, h4, h5, h6,
.navbar-brand {
  letter-spacing: .2px;
}

/* Botones más modernos/compactos */
.btn {
  --bs-btn-padding-y: .38rem;
  --bs-btn-padding-x: .68rem;
  --bs-btn-font-size: .925rem;
  --bs-btn-border-radius: .6rem;
  --bs-btn-box-shadow: 0 1px 2px rgba(0,0,0,.08);
  --bs-btn-focus-shadow-rgb: 13, 110, 253; /* base bootstrap */
  font-weight: 600;
  letter-spacing: .1px;
}

.btn-sm {
  --bs-btn-padding-y: .28rem;
  --bs-btn-padding-x: .55rem;
  --bs-btn-font-size: .85rem;
  --bs-btn-border-radius: .55rem;
}

.btn-outline-secondary {
  --bs-btn-border-color: rgba(108,117,125,.35);
}

/* Hace que primary se vea “premium” (sin ensuciar el texto) */
.btn-primary {
  --bs-btn-border-color: rgba(0,0,0,.08);
  --bs-btn-hover-bg: #e3a900;
  --bs-btn-hover-border-color: rgba(0,0,0,.12);
  --bs-btn-active-bg: #d39c00;
  --bs-btn-active-border-color: rgba(0,0,0,.14);
  --bs-btn-color: #111;
  --bs-btn-hover-color: #111;
  --bs-btn-active-color: #111;
}

.btn-outline-primary {
  --bs-btn-color: #111;
  --bs-btn-hover-color: #111;
  --bs-btn-active-color: #111;
}

.btn:active {
  transform: translateY(0.5px);
}

/* Sidebar / layout */
@media (min-width: 768px) {
  .app-sidebar-desktop {
    position: fixed;
    top: var(--app-navbar-height);
    bottom: 0;
    left: 0;
    width: var(--app-sidebar-width);
    overflow-y: auto;
    border-right: 1px solid rgba(0,0,0,.1);
    transition: width 220ms ease;
  }

  .app-main {
    margin-left: var(--app-sidebar-width);
    transition: margin-left 220ms ease;
  }

  body.operator-no-sidebar .app-main {
    margin-left: 0;
  }

  /* Iconos del sidebar (Bootstrap Icons) */
  .nav-sidebar-icon {
    font-size: 1.125rem;
    line-height: 1;
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Alineación consistente de items */
  .app-sidebar-desktop .nav-link {
    min-height: 40px;
  }

  body.sidebar-collapsed .app-sidebar-desktop {
    width: var(--app-sidebar-width-collapsed);
  }

  body.sidebar-collapsed .app-main {
    margin-left: var(--app-sidebar-width-collapsed);
  }

  /* Profilo operatore: nessuna sidebar, quindi nessun offset main
     anche se in localStorage è rimasto "sidebar-collapsed". */
  body.operator-no-sidebar .app-main,
  body.operator-no-sidebar.sidebar-collapsed .app-main {
    margin-left: 0;
  }

  body.sidebar-collapsed .app-sidebar-desktop .sidebar-label,
  body.sidebar-collapsed .app-sidebar-desktop .sidebar-brand-text,
  body.sidebar-collapsed .app-sidebar-desktop .sidebar-section-title,
  body.sidebar-collapsed .app-sidebar-desktop hr {
    display: none !important;
  }

  body.sidebar-collapsed .app-sidebar-desktop .nav-link {
    justify-content: center;
    padding-left: .5rem;
    padding-right: .5rem;
  }

  body.sidebar-collapsed .app-sidebar-desktop .nav-link .nav-sidebar-icon {
    margin-right: 0 !important;
  }

  body.sidebar-collapsed .app-sidebar-desktop .sidebar-brand {
    justify-content: center;
  }

  /* Suaviza el “corte” cuando desaparecen labels */
  .app-sidebar-desktop .sidebar-label,
  .app-sidebar-desktop .sidebar-brand-text {
    transition: opacity 150ms ease;
  }

  body.sidebar-collapsed .app-sidebar-desktop .sidebar-label,
  body.sidebar-collapsed .app-sidebar-desktop .sidebar-brand-text {
    opacity: 0;
  }
}

/* Frappe Gantt — dashboard progetto (lavori / milestone) */
.app-gantt-container {
  overflow-x: auto;
  min-height: 280px;
}

.app-gantt-container .gantt-container {
  font-family: var(--bs-body-font-family);
}

.app-gantt-container .bar-wrapper.bar-gantt-work .bar {
  fill: var(--brand-yellow);
  stroke: #b88400;
}

.app-gantt-container .bar-wrapper.bar-gantt-milestone .bar {
  fill: var(--bs-secondary);
  stroke: #1f2328;
}

.app-gantt-container .bar-wrapper.bar-gantt-milestone .bar-progress {
  fill: transparent;
}

[data-bs-theme="dark"] .app-gantt-container .grid-row,
[data-bs-theme="dark"] .app-gantt-container .row-line {
  stroke: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .app-gantt-container .tick {
  stroke: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .app-gantt-container .lower-text,
[data-bs-theme="dark"] .app-gantt-container .upper-text {
  fill: rgba(255, 255, 255, 0.75);
}

/* Ordinamento righe tabella (SortableJS: fasi progetto, lavori) */
.app-table-drag-handle,
.phase-drag-handle {
  cursor: grab;
  user-select: none;
  color: var(--bs-secondary-color);
}

.app-table-drag-handle:active,
.phase-drag-handle:active {
  cursor: grabbing;
}

.sortable-ghost {
  opacity: 0.45;
  background-color: var(--bs-tertiary-bg);
}

.sortable-chosen {
  background-color: var(--bs-tertiary-bg);
}

.sortable-drag {
  opacity: 1;
}

/* Detalle tipo “form / doc”: usa todo el ancho del main (sidebar expandido o ridotto) */
.app-doc-page {
  width: 100%;
  max-width: 100%;
}

/* Accesibilidad / móvil: tablas anchas y Gantt con scroll táctil */
@media (max-width: 767.98px) {
  .app-doc-page .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  .app-list-table {
    font-size: 0.875rem;
  }

  .app-gantt-container {
    min-height: 220px;
    -webkit-overflow-scrolling: touch;
  }

  /* Menú Azioni en cabeceras: evita que el dropdown quede cortado por overflow */
  .app-doc-page .dropdown-menu {
    max-width: min(100vw - 1.5rem, 20rem);
  }
}

/* Schede progetto: scroll verso le tab (navbar fissa) quando si apre ?tab=… */
#project-detail-tabs {
  scroll-margin-top: calc(var(--app-navbar-height, 56px) + 0.5rem);
}

/* Tom Select dentro il dropdown filtri utenti (evita taglio del menu) */
.app-user-list-filters-menu {
  overflow: visible;
}
.app-user-list-filters-menu .ts-dropdown {
  z-index: 2000;
}

/* Tom Select nei form progetto: larghezza e aspetto come form-select Bootstrap */
.card-body .ts-wrapper {
  width: 100%;
}

.card-body .ts-wrapper .ts-control,
.card-body .ts-wrapper .ts-control input {
  color: var(--bs-body-color);
}

.card-body .ts-wrapper .ts-control {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.25rem 0.5rem;
}

.card-body .ts-wrapper:not(.disabled).focus .ts-control,
.card-body .ts-wrapper.dropdown-active .ts-control {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.card-body .ts-wrapper .item,
.card-body .ts-wrapper .ts-control .item {
  color: var(--bs-body-color);
}

.card-body .ts-wrapper.multi .ts-control > div {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .card-body .ts-wrapper .ts-control {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* Schede progetto: tab principali leggere, coerenti con il resto */
.app-project-detail-tabs .nav-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0.5rem 0.5rem 0 0;
}

.app-project-detail-tabs .nav-link:hover {
  color: var(--bs-body-color);
  border-color: transparent;
  background-color: rgba(43, 47, 54, 0.05);
}

.app-project-detail-tabs .nav-link.active {
  color: var(--bs-body-color);
  background-color: transparent;
  border-bottom-color: var(--brand-yellow);
}

[data-bs-theme="dark"] .app-project-detail-tabs .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .app-project-detail-tabs .nav-link.active {
  border-bottom-color: var(--brand-yellow);
}

.project-detail-links > .list-group-item-action + .list-group-item-action,
.project-detail-links > .list-group-item-action + .list-group-item {
  border-top: 1px solid var(--bs-border-color);
}

/* Colonna destra tipo Frappe: meta + allegati (sticky su desktop) */
@media (min-width: 992px) {
  .app-doc-right-column {
    position: sticky;
    top: calc(var(--app-navbar-height, 56px) + 0.75rem);
    align-self: flex-start;
    max-height: calc(100vh - var(--app-navbar-height, 56px) - 2rem);
    overflow-y: auto;
  }
}

.app-form-section-head {
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

.app-form-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.app-docfield-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: 0.2rem;
}

.app-docfield-value {
  font-size: 0.875rem;
  color: var(--bs-body-color);
  word-break: break-word;
}

.app-doc-table thead th {
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  border-bottom-width: 1px;
}

.app-doc-table tbody td {
  vertical-align: middle;
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .app-form-section-head {
  background: rgba(0, 0, 0, 0.25);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Ricerca globale (command palette) */
.global-search-hit:hover,
.global-search-hit:focus-visible {
  background-color: rgba(var(--bs-secondary-rgb), 0.08);
  outline: none;
}
.htmx-indicator {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.htmx-request .htmx-indicator {
  opacity: 1;
}