@import "bpmn-js/bpmn-js.css";
@import "bpmn-js/diagram-js.css";
@import "bpmn-js/properties-panel.css";
@import "bpmn-js/bpmn-font/css/bpmn-codes.css";
@import "bpmn-js/bpmn-font/css/bpmn-embedded.css";
@import "bpmn-js/bpmn-font/css/bpmn.css";

/* ============================================
   Syncfusion RichTextEditor - Fix altezza e layout
   ============================================ */

.syncfusion-html-editor-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    display: block;
    overflow: visible;
    margin-bottom: 15px;
}

.syncfusion-html-editor-container .e-richtexteditor {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.syncfusion-html-editor-container .e-rte-content .e-content {
    min-height: 100px !important;
}

/* Assicura che il field container contenga correttamente l'editor */
.field .syncfusion-html-editor-container {
    margin-bottom: 15px;
}

/* Fix per evitare che l'editor copra i campi successivi - form Serenity */
.s-PropertyGrid .field:has(.syncfusion-html-editor-container),
.s-Form .field:has(.syncfusion-html-editor-container),
.s-Panel .field:has(.syncfusion-html-editor-container) {
    overflow: visible;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/* Fix specifico per dialog e panel */
.s-Panel-Body .field:has(.syncfusion-html-editor-container),
.ui-dialog-content .field:has(.syncfusion-html-editor-container) {
    overflow: visible;
    margin-bottom: 25px;
}

/* Stili per i popup quando sono attivi */
.e-popup.e-popup-open,
.e-dropdown-popup.e-popup-open,
.e-colorpicker-popup.e-popup-open {
    z-index: 10001 !important;
}

/* Fix per popup dentro dialog */
.e-colorpicker-popup,
.e-dropdown-popup,
.e-popup {
    z-index: 10001 !important;
}

/* Fix per toolbar che va su due righe */
.syncfusion-html-editor-container .e-toolbar-items {
    flex-wrap: wrap;
}

/* Assicura spazio sotto l'editor anche con toolbar multiriga */
.syncfusion-html-editor-container .e-richtexteditor.e-rte-tb-expand {
    margin-bottom: 10px;
}

/* ============================================ */

.assegna-risorse-form-editor {
  height: 1200px;
}

.assegna-risorse-form-editor .editor-line {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.assegna-risorse-form-editor .editor-label {
  width: 250px; /* O la larghezza che preferisci */
  font-weight: bold;
  text-align: right;
  margin-right: 10px;
}

.assegna-risorse-form-editor .editor-container {
  flex-grow: 1;
}

div.in-attesa {
  height: 100vh;
  background-image: url("/Content/images/registrato-in-attesa.png");
  background-size: cover;
  background-color: #f5f5f5; /* Colore di fallback nel caso l'immagine non si carichi */
  text-align: center;
}

#s2id_Table {
  min-width: 400px !important;
}


.s-DettagliOperazioniEditor {
  min-height: 800px !important;
}

.field .DistintaBase {
  height: calc(100vh - 600px);
}

.s-Form .invisible-field {
  display: none !important;
}

.azioni-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.btn-azione-rossa {
  background-color: #d9534f;
  color: white;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
}

.btn-azione-verde {
  background-color: #5cb85c;
  color: white;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
}

#GraphContainer {
  display: flex;
  justify-content: center; /* Centra orizzontalmente */
  align-items: center; /* Centra verticalmente */
  width: 100%;
  height: 100%;
  text-align: center; /* Centra eventuali contenuti testuali */
}

.login-page {
  background: url('/Content/images/sfondo.png') center/cover no-repeat;
}

.error-container {
  text-align: center;
  padding: 50px;
  margin: 50px auto;
  max-width: 600px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body.error-page {
  background: url('../images/NonDisponibile.webp') no-repeat center center fixed;
  background-size: cover;
}

  .error-container h1 {
    color: #007bff;
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .error-container p {
    color: #6c757d;
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

.error-actions {
  margin-top: 20px;
}

  .error-actions .btn {
    margin: 5px;
    padding: 10px 20px;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
  }

  .error-actions .btn-primary {
    color: #fff;
    background-color: #007bff;
  }

    .error-actions .btn-primary:hover {
      background-color: #0056b3;
    }

  .error-actions .btn-secondary {
    color: #fff;
    background-color: #6c757d;
  }

    .error-actions .btn-secondary:hover {
      background-color: #5a6268;
    }

.s-site-logo-img {
  content: url(../images/logo128.png);
  background-color: var(--s-card-bg);
}

.s-site-logo-img.s-form-title-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* === Tenant Testpoint: logo + sidebar navy === */
/* Attivato quando Globali.indiceAPNN == 3 (vedi _Layout*.cshtml). */
:root.tenant-testpoint .s-site-logo-img {
  content: url(../images/logo-TP-2.jpeg);
  background-color: #0F2A4A;
}

/* Sidebar band: il logo è ruotato 90° dal layout Bracket. La height pre-rotazione
   diventa la "spessore" visibile dentro il band; la width pre-rotazione diventa
   l'estensione verticale. height:60px = sta dentro il band; width:auto preserva
   l'aspect ratio del banner TP rettangolare e lo lascia estendere in verticale. */
:root.tenant-testpoint .s-site-logo-img.s-sidebar-band-logo {
  height: 60px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

/* Mobile header: nessuna rotazione, altezza ragionevole tipo Adacta. */
:root.tenant-testpoint .s-site-logo-img.s-mobile-header-logo {
  height: 32px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

:root.tenant-testpoint {
  --s-sidebar-band-bg: #0F2A4A;
  --s-sidebar-band-link: #B8C7DB;
  --s-sidebar-band-link-active: #FFFFFF;
  --s-sidebar-link-active: #0F2A4A;
}

.bg-primo {
  background-color: #138496;
}

.bg-secondo {
  background-color: #784870;
}

.bg-terzo {
  background-color: #026EBF;
}

.bg-quarto {
  background-color: #DC3546;
}

.bg-quinto {
  background-color: #28A745;
}

.wd-32 {
  width: 32px;
  height: 32px;
  display: inline-block;
}

  .wd-32 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .prohibition-symbol {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  border-radius: 50%;
  transform: rotate(-45deg);
}

  .prohibition-symbol::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -5%;
    width: 110%;
    height: 2px;
    background-color: red;
  }

.modal-content {
  background-color: var(--bs-modal-bg);
}

:root.theme-mycustomred {
  --s-card-title: #aa2519;
  --s-category-title: #c18e85;
  --s-sidebar-band-bg: #63032f;
  --s-sidebar-band-link: #ffc3b0;
  --s-sidebar-link-active: #d30a0a;
  --s-sidebar-band-link-active: #ff0000;
  //...other variables copied from azure light theme
}

.s-sidebar-pane {
    overflow-y: auto;
}

/* Ritarda di 1,5s l'apertura on-hover del menu laterale quando è compatto.
   pro-theme.js aggiunge subito body.s-sidebar-hovered al mouseover: ritardando
   solo la transition di width in stato "hovered" l'espansione parte dopo 1,5s,
   mentre la chiusura resta immediata (il delay non si applica senza la classe).
   Se il mouse esce prima dello scadere, la width non è mai cambiata: niente
   aperture involontarie. */
@media (min-width: 1200px) {
    body.s-sidebar-pane-collapsed.s-sidebar-hovered .s-sidebar {
        transition-delay: 1.5s;
    }
}

.s-PermissionCheckEditor {
  min-height: 450px;
}

.s-horizontal-divider {
  margin: 1em 0;
  line-height: 0;
  text-align: center;
}

.s-horizontal-divider span {
  background-color: var(--s-card-bg);
  padding: 1em;
}

.s-horizontal-divider:before {
  content: " ";
  display: block;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #f7f7f7;
}

.mailbox-folders > .card-body > ul {
  border-bottom: 1px solid rgba(var(--s-bright-rgb), 0.1);
  padding-left: 1rem;
  margin-bottom: 0;
}

.mailbox-folders ul {
  margin-bottom: 4px;
}

  .mailbox-folders ul li {
    display: block;
    padding: 4px 4px;
  }

.mailbox-folders a {
  text-decoration: none;
  color: var(--bs-body-text);
}

  .mailbox-folders a.active {
    font-weight: bold;
  }

.mailbox-messages a {
  text-decoration: none;
}

.s-MailViewer .message-body {
  width: 100%;
  background-color: #fff;
}

tr.unseen .mailbox-name,
tr.unseen .mailbox-subject {
  font-weight: bold;
}

.mia-immagine {
  width: 240px;
  height: auto;
}

@media (min-width: 768px) {
  .s-MailViewer .message-body {
    min-height: 300px;
    height: calc(100vh - 210px);
  }
  .mia-immagine {
    width: 320px;
    height: auto;
  }

}

@media (min-width: 1200px) {
  .s-MailViewer .message-body {
    min-height: 300px;
    height: calc(100vh - 210px);
  }
  .mia-immagine {
    width: 480px;
    height: auto;
  }
}

/* OAuth2 Profile - Disabled IMAP/SMTP fields styling */
.oauth2-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.oauth2-disabled label {
  color: #6c757d;
}

.disabled-by-oauth2 {
  background-color: #e9ecef !important;
  cursor: not-allowed;
}

.oauth2-disabled::after {
  content: " (Disabilitato - OAuth2 attivo)";
  font-size: 0.75em;
  color: #6c757d;
  font-style: italic;
}

/* ============================================
   Fix per calendario jQuery UI Datepicker troppo grande
   ============================================ */
#ui-datepicker-div.ui-datepicker {
  width: auto !important;
  max-width: 320px !important;
}

#ui-datepicker-div .ui-datepicker-calendar {
  width: 100% !important;
  table-layout: fixed !important;
}

#ui-datepicker-div .ui-datepicker-calendar th,
#ui-datepicker-div .ui-datepicker-calendar td {
  width: auto !important;
  padding: 5px !important;
}

#ui-datepicker-div .ui-datepicker-header {
  padding: 5px !important;
}

#ui-datepicker-div .ui-datepicker-title select {
  width: auto !important;
  min-width: 60px !important;
}

/* ============================================
   Fix z-index per datepicker sopra modali
   ============================================ */

/* Flatpickr calendar - deve essere sopra le modali Bootstrap (z-index ~1050) e jQuery UI (~100) */
.flatpickr-calendar {
    z-index: 100000 !important;
}

/* jQuery UI datepicker */
#ui-datepicker-div,
.ui-datepicker {
    z-index: 100000 !important;
}

/* ============================================
   Fix dropdown Bootstrap nelle celle SlickGrid
   ============================================ */

/* Permette al dropdown di uscire dalla cella */
.slick-cell:has(.dropdown.show),
.slick-cell:has(.dropdown-menu.show) {
    overflow: visible !important;
}

/* La riga deve permettere overflow per vedere il dropdown */
.slick-row:has(.dropdown-menu.show) {
    overflow: visible !important;
    z-index: 1000;
}

/* Z-index alto per dropdown nelle grid */
.slick-cell .dropdown-menu {
    z-index: 10000 !important;
}

/* Assicura che i link nel dropdown siano cliccabili */
.slick-cell .dropdown-item {
    cursor: pointer;
}

/* ============================================
   ProductEditDialog - Layout a due colonne con foto laterali
   Replica la funzionalità di PROD_prodottiModifica.asp
   ============================================ */

/* Container principale a due colonne */
.product-edit-two-column-layout {
    display: flex;
    flex-direction: row;
    gap: 15px;
    height: 100%;
    min-height: 500px;
}

/* Colonna del form - 60% della larghezza */
.product-form-column {
    flex: 0 0 60%;
    min-width: 500px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Pannello foto laterale - 40% della larghezza */
.product-photo-panel {
    flex: 0 0 38%;
    min-width: 300px;
    max-width: 500px;
    background-color: var(--s-card-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Pannello collassato */
.product-photo-panel.collapsed {
    flex: 0 0 50px;
    min-width: 50px;
    max-width: 50px;
    overflow: hidden;
}

.product-photo-panel.collapsed .photo-buttons-container,
.product-photo-panel.collapsed .photo-display-container,
.product-photo-panel.collapsed .photo-panel-title {
    display: none;
}

/* Header del pannello foto */
.photo-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.photo-panel-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bs-heading-color, #333);
}

.photo-panel-toggle {
    padding: 4px 8px;
}

/* Container dei pulsanti foto */
.photo-buttons-container {
    margin-bottom: 12px;
}

.photo-buttons-container .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.photo-buttons-container .photo-select-btn {
    font-size: 0.8rem;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.photo-buttons-container .photo-select-btn.active {
    background-color: var(--bs-primary, #0d6efd);
    color: white;
}

.photo-buttons-container .photo-hide-btn {
    font-size: 0.8rem;
    padding: 4px 8px;
}

/* Container visualizzazione foto */
.photo-display-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: auto;
    background-color: var(--bs-gray-100, #f8f9fa);
    border-radius: 4px;
    padding: 8px;
    min-height: 200px;
}

/* Immagine foto prodotto */
.product-photo-image {
    max-width: 100%;
    max-height: calc(100vh - 400px);
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Messaggio nessuna foto */
.no-photo-message {
    text-align: center;
    padding: 30px;
    color: var(--bs-secondary, #6c757d);
}

/* Responsive: su schermi piccoli, stack verticale */
@media (max-width: 992px) {
    .product-edit-two-column-layout {
        flex-direction: column;
    }

    .product-form-column {
        flex: 1 1 auto;
        min-width: auto;
        max-height: 60vh;
        padding-right: 0;
    }

    .product-photo-panel {
        flex: 1 1 auto;
        min-width: auto;
        max-width: none;
        max-height: 40vh;
    }

    .product-photo-image {
        max-height: 250px;
    }
}

/* Stile specifico per il dialog prodotto */
.product-edit-dialog .s-Form {
    height: 100%;
}

.product-edit-dialog .ui-dialog-content {
    overflow: hidden;
}

.product-edit-dialog .s-Panel-Body {
    height: calc(100% - 60px);
    overflow: hidden;
}

/* ProductBulkEdit filter & sort */
.products-table th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.products-table th.sortable:hover {
    background-color: #e9ecef;
}

.products-table th .sort-icon {
    margin-left: 4px;
    opacity: 0.3;
    font-size: 11px;
}

.products-table th.sort-active .sort-icon {
    opacity: 1;
    color: #0d6efd;
}

.bulk-edit-filters .input-group-text {
    background-color: #fff;
}

/* Sticky frozen columns (0=checkbox, 1=sigla, 2=prod/mat, 3=categoria, 4=nome) */
.products-table .sticky-col {
    position: sticky;
    z-index: 1;
}
.products-table .sticky-col-0 { left: 0; min-width: 50px; max-width: 70px; }
.products-table .sticky-col-1 { left: 50px; min-width: 90px; }
.products-table .sticky-col-2 { left: 140px; min-width: 70px; }
.products-table .sticky-col-3 { left: 210px; min-width: 160px; }
.products-table .sticky-col-4 { left: 370px; min-width: 220px; border-right: 2px solid #adb5bd !important; }

/* Background per evitare trasparenza durante lo scroll */
.products-table td.sticky-col { background-color: inherit; }
.products-table tr.existing-product td.sticky-col { background-color: #fff; }
.products-table tr.new-product td.sticky-col { background-color: #fff3cd; }

/* Header sticky: deve stare sopra sia allo scroll verticale che orizzontale */
.products-table th.sticky-header { z-index: 5; background-color: #e9ecef; }
.products-table th.sticky-header.sortable:hover { background-color: #dee2e6; }