/* ============================================================
   Pa-TRON — commons.css (restyled)
   Modern minimal flat design — Bootstrap 3 compatible
   ============================================================ */

/* === RESET & BASE === */
html {
   overflow: auto;
}
html, body, iframe {
   margin: 0px;
   padding: 0px;
   height: 100%;
   border: none;
}

iframe {
   display: block;
   width: 100%;
   border: none;
   overflow-y: auto;
   overflow-x: hidden;
}

body {
   background: #f4f6f9;
   font-family: 'Segoe UI', Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   font-size: 14px;
   color: #3c4043;
   background-image:
   linear-gradient(rgba(51,122,183,0.05) 1px, transparent 1px),
   linear-gradient(90deg, rgba(51,122,183,0.05) 1px, transparent 1px);
background-size: 40px 40px;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
   select,
   textarea,
   input {
      font-size: 16px;
   }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
   select:focus,
   textarea:focus,
   input:focus {
      font-size: 16px;
   }
}


/* ============================================================
   TOPBAR
   ============================================================ */
.pt-topbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 48px;
   background: #fff;
   border-bottom: 1px solid #e0e0e0;
   z-index: 1100;
   box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.pt-topbar-inner {
   display: flex;
   align-items: center;
   height: 100%;
   padding: 0 12px;
}

/* Hamburger */
.pt-hamburger {
   background: none;
   border: none;
   padding: 6px 10px;
   font-size: 18px;
   color: #5f6368;
   cursor: pointer;
   border-radius: 50%;
   transition: background 0.2s;
   margin-right: 4px;
   line-height: 1;
}
.pt-hamburger:hover {
   background: #f1f3f4;
   color: #337ab7;
}
.pt-hamburger:focus {
   outline: none;
}

/* Brand / logo */
.pt-topbar-brand {
   display: flex;
   align-items: center;
   text-decoration: none;
   margin-right: 16px;
   flex-shrink: 0;
}
.pt-topbar-brand img {
   height: 45px;
   width: auto;
}

/* Stamping info */
.pt-stamping-info {
   font-size: 11px;
   color: #5f6368;
   text-decoration: none;
   white-space: nowrap;
   margin-right: auto;
   padding: 4px 8px;
   border-radius: 4px;
   transition: background 0.2s;
}
.pt-stamping-info:hover {
   background: #f1f3f4;
   color: #337ab7;
   text-decoration: none;
}

/* Right actions area */
.pt-topbar-right {
   display: flex;
   align-items: center;
   gap: 2px;
   margin-left: auto;
}

.pt-topbar-action {
   display: flex;
   align-items: center;
   gap: 4px;
   background: none;
   border: none;
   padding: 6px 10px;
   font-size: 14px;
   color: #5f6368;
   cursor: pointer;
   border-radius: 20px;
   transition: background 0.2s;
   text-decoration: none;
   white-space: nowrap;
   line-height: 1;
}
.pt-topbar-action:hover,
.pt-topbar-action:focus {
   background: #f1f3f4;
   color: #337ab7;
   text-decoration: none;
}
.pt-topbar-action .glyphicon {
   font-size: 15px;
}
.pt-topbar-action-label {
   font-size: 12px;
   font-weight: 500;
}

@media (max-width: 600px) {
   .pt-topbar-action-label {
      display: none;
   }
}

/* User dropdown */
.pt-user-dropdown {
   position: relative;
}
.pt-user-menu {
   display: none;
   position: absolute;
   right: 0;
   top: 42px;
   background: #fff;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(0,0,0,0.12);
   min-width: 240px;
   list-style: none;
   padding: 6px 0;
   margin: 0;
   z-index: 1200;
}
.pt-user-menu.open {
   display: block;
}
.pt-user-menu > li > a {
   display: block;
   padding: 8px 16px;
   color: #3c4043;
   text-decoration: none;
   font-size: 13px;
   transition: background 0.15s;
}
.pt-user-menu > li > a:hover {
   background: #f1f3f4;
   color: #337ab7;
}
.pt-user-menu > li > a .glyphicon {
   width: 20px;
   display: inline-block;
   text-align: center;
   color: #5f6368;
   font-size: 13px;
}
.pt-user-menu-divider {
   height: 1px;
   background: #e0e0e0;
   margin: 4px 0;
}


/* ============================================================
   SIDEBAR
   ============================================================ */
/* Reset Bootstrap .navbar styles on sidebar and overlay */
.pt-sidebar.navbar,
.pt-sidebar-overlay.navbar {
   margin-bottom: 0;
   min-height: 0;
   border: none;
   border-radius: 0;
   padding: 0;
}

.pt-sidebar-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0,0,0,0.3);
   z-index: 1150;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s;
}
.pt-sidebar-overlay.open {
   opacity: 1;
   pointer-events: auto;
}

.pt-sidebar {
   position: fixed;
   top: 0;
   left: -280px;
   width: 280px;
   height: 100%;
   background: #fff;
   z-index: 1200;
   transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   overflow-y: auto;
   overflow-x: hidden;
   box-shadow: 2px 0 8px rgba(0,0,0,0.1);
}
.pt-sidebar.open {
   left: 0;
}

.pt-sidebar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
   border-bottom: 1px solid #e8eaed;
}
.pt-sidebar-header img {
   height: 28px;
}

.pt-sidebar-close {
   background: none;
   border: none;
   font-size: 16px;
   color: #5f6368;
   cursor: pointer;
   padding: 4px 8px;
   border-radius: 50%;
   transition: background 0.2s;
   line-height: 1;
}
.pt-sidebar-close:hover {
   background: #f1f3f4;
   color: #c0392b;
}
.pt-sidebar-close:focus {
   outline: none;
}

.pt-sidebar-body {
   padding: 8px 0;
}

.pt-sidebar-section {
   padding: 4px 0;
}

.pt-sidebar-section-title {
   padding: 10px 20px 6px;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: #9aa0a6;
}
.pt-sidebar-section-title .glyphicon {
   font-size: 11px;
   margin-right: 2px;
}

.pt-sidebar-nav {
   list-style: none;
   padding: 0;
   margin: 0;
}
.pt-sidebar-nav > li > a {
   display: block;
   padding: 9px 20px 9px 28px;
   color: #3c4043;
   text-decoration: none;
   font-size: 13px;
   font-weight: 400;
   transition: background 0.15s, color 0.15s;
   border-left: 3px solid transparent;
}
.pt-sidebar-nav > li > a:hover {
   background: #f1f3f4;
   color: #337ab7;
   text-decoration: none;
}
.pt-sidebar-nav > li.active > a {
   background: #e8f0fe;
   color: #1a73e8;
   border-left-color: #337ab7;
   font-weight: 500;
}
.pt-sidebar-nav > li > a .glyphicon {
   width: 22px;
   display: inline-block;
   text-align: center;
   font-size: 13px;
   color: #5f6368;
}
.pt-sidebar-nav > li > a:hover .glyphicon,
.pt-sidebar-nav > li.active > a .glyphicon {
   color: #337ab7;
}

/* Section dividers */
.pt-sidebar-section + .pt-sidebar-section {
   border-top: 1px solid #e8eaed;
}


/* ============================================================
   MAIN CONTENT OFFSET
   ============================================================ */
.pt-main-content {
   padding-top: 56px; /* topbar height + spacing */
   min-height: calc(100vh - 48px);
}


/* ============================================================
   FOOTER
   ============================================================ */
.pt-footer-nav {
   margin: 0;
   border: none;
   background: none;
   border-radius: 0;
   min-height: 0;
}

.pt-footer {
   border-top: 1px solid #e0e0e0;
   text-align: center;
   background-color: #fff;
   color: #808080;
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 1050;
   padding: 6px 16px;
}

.pt-footer footer {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
   font-size: 12px;
}

.pt-footer a {
   color: #337ab7;
   text-decoration: none;
}
.pt-footer a:hover {
   text-decoration: underline;
}
.pt-footer-copyright {
   font-size: 80%;
   font-weight: normal;
   color: #969696 !important;
}
.pt-footer-link {
   font-size: 12px;
}

/* Legacy .panel-footer — keep for backward compat but hidden */
.panel-footer {
   border-top: 1px solid #e0e0e0;
   text-align: center;
   background-color: #fff;
   color: #808080;
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 1050;
   padding: 6px 16px;
}


/* ============================================================
   CUSTOMER NAME BAR
   ============================================================ */
.customer-name {
   font-weight: 500;
   color: #9aa0a6;
   font-style: italic;
   font-size: 12px;
   padding: 2px 20px 0;
}


/* ============================================================
   INFO / ALERT BARS (master, expiration, subscription)
   ============================================================ */
.master-bar {
   background-color: #950000;
   padding-left: 20px;
   padding-right: 20px;
   z-index: 1300;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
}
.master-bar a {
   color: #fff;
   font-size: 13px;
   font-weight: bold;
   text-decoration: none;
}

.expiration-bar {
   background-color: #f20000;
   padding: 20px 25px;
   z-index: 1300;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   color: #fff;
   font-size: 14px;
   font-weight: bold;
}

.subscription-bar {
   background-color: #359aff;
   padding: 20px 25px;
   z-index: 1300;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   color: #fff;
   font-size: 14px;
   font-weight: bold;
}


/* ============================================================
   OVERLAY PANELS (confirm, smartInfo, picture, gdpr)
   ============================================================ */
#smartInfoBox, #pictureBox {
   z-index: 1700;
   color: #fff;
   padding: 20px;
}

#confirmBox {
   z-index: 1700;
   color: #000;
   text-align: center;
   font-size: 12px;
   padding-top: 20px;
   padding-left: 5px;
   padding-right: 15px;
   background-color: #fff;
   position: fixed;
   top: 50%;
   left: 50%;
   margin: -180px 0 0 -180px;
   width: 350px;
   height: 200px;
   border-radius: 8px;
   box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

#gdprBox {
   z-index: 1700;
   color: #646464;
   padding: 20px;
   width: 90%;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h2 {
   font-size: 140%;
   font-weight: 600;
   color: #3c4043;
}
h3 {
   font-size: 125%;
   font-weight: 600;
}
h4 {
   font-size: 110%;
   font-weight: 600;
}


/* ============================================================
   ALERT DISMISSIBLE
   ============================================================ */
.alert-dismissible {
   font-weight: bold;
   padding: 5px;
   text-align: center;
   margin-top: -10px;
   border-radius: 6px;
}


/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.ro-form-control {
   border: 1px solid #dadce0;
   background-color: #f8f9fa;
   border-radius: 6px;
   padding: 4px 8px;
}

label {
   font-weight: normal;
}

.labelinline {
   text-align: right;
   font-size: 12px;
   padding: 7px;
}

.centered {
   display: table;
   margin: 0 auto;
   padding: 3px;
}

.control-label {
   text-align: right;
}

.form-horizontal {
   padding: 5px 0px 1px 0px;
}

.form-control {
   font-weight: normal;
   font-size: 90%;
   padding: 4px 8px;
   border-radius: 6px;
   border: 1px solid #dadce0;
   transition: border-color 0.2s;
}
.form-control:focus {
   border-color: #337ab7;
   box-shadow: 0 0 0 2px rgba(51,122,183,0.15);
}

.help-block {
   font-size: 85%;
   font-style: italic;
}

.selectedinput {
   background-color: #fff9c4;
}

.required-field {
   color: #c0392b;
   font-size: 70%;
}


/* ============================================================
   PANELS — modernized
   ============================================================ */
.panel-default {
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.panel-default > .panel-myheading {
   background-color: #337ab7;
   color: #fff;
   border-radius: 7px 7px 0 0;
}

.panel-grey {
   background-color: #f4f6f9;
   padding: 3px;
}

.panel-default-sidebar {
   padding-right: 0px;
   padding-left: 0px;
}

.panel-menu {
   padding-top: 20px;
   background-color: #337ab7;
   color: #fff;
}


/* ============================================================
   ITEM WIDGET (cards)
   ============================================================ */
.item-widget {
   box-sizing: border-box;
   border: 1px solid #e0e0e0;
   box-shadow: 0 1px 4px rgba(0,0,0,0.08);
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 8px;
   padding: 0px;
   font-size: 80%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: box-shadow 0.2s;
}
.item-widget:hover {
   box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}

.item-widget ul {
   margin-top: 10px;
   list-style-type: none;
   font-size: 90%;
}

.item-widget ul li {
   margin-left: -40px;
   padding: 3px;
   border-bottom: 1px dotted #e0e0e0;
}

.item-widget > .panel-myheading {
   background-color: #9b9b9b;
   border-radius: 7px 7px 0 0;
}


/* ============================================================
   BADGES & STICKERS
   ============================================================ */
.custom-badge {
   color: #5b5b5b;
   border: 1px solid #e0e0e0;
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   padding: 8px;
   background-color: #fff;
   font-size: 110%;
   border-radius: 6px;
}

.custom-badge2 {
   color: #5b5b5b;
   border: 1px solid #e0e0e0;
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   padding: 12px;
   margin-left: 3px;
   font-size: 140%;
   border-radius: 6px;
}

.sticker1 {
   color: #fff;
   padding: 5px;
   border-radius: 5px;
}


/* ============================================================
   SIDEBAR CONTAINER (page-level left sidebar, legacy)
   ============================================================ */
.sidebar-container ul {
   margin-left: -40px;
}
.sidebar-container ul li {
   list-style-type: none;
   margin: auto;
   padding-bottom: 5px;
}


/* ============================================================
   STAMPING INFO (legacy, hidden by default on new topbar)
   ============================================================ */
.stamping-info-menu {
   display: none; /* replaced by pt-stamping-info in topbar */
}
.stamping-info-menu:hover {
   display: none;
}


/* ============================================================
   TABLES
   ============================================================ */
.table-bordered {
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   border-collapse: separate;
   box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.table-bordered th:hover {
   background-color: #2e6da4;
   cursor: pointer;
}
.table-bordered th {
   background-color: #337ab7;
   border-color: #337ab7;
   color: #fff;
}
.table-bordered td {
   border-color: #e0e0e0;
}
.table-bordered tr:hover {
   background-color: #f8f9fa;
}

@media (max-width:550px) {
   .table-responsive {
      -ms-overflow-style: none;
   }
}


/* ============================================================
   MICROTEXTS
   ============================================================ */
.microtext {
   font-size: 8pt;
   color: #808080;
}
.microtext-highlighted {
   font-size: 8pt;
   color: #d50000;
   font-weight: bold;
}
.microtextgrey {
   background-color: #fbfbfb;
   padding: 5px;
   font-size: 8pt;
   color: #808080;
}
.microtextgreyright {
   background-color: #fbfbfb;
   padding: 5px;
   font-size: 8pt;
   color: #808080;
   text-align: right;
   width: 50%;
}
.microtext-container {
   padding: 10px;
   margin: auto;
   text-align: center;
}
.microtext-container-license {
   padding: 10px;
   border-radius: 8px;
   margin: auto;
   padding-left: 20px;
   border: 1px solid #dadce0;
   background: #f8f9fa;
}


/* ============================================================
   LOADING SPINNER
   ============================================================ */
.glyphicon-refresh-animate {
   -animation: spin .7s infinite linear;
   -webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
   from { -webkit-transform: rotate(0deg); }
   to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
   from { transform: scale(1) rotate(0deg); }
   to { transform: scale(1) rotate(360deg); }
}


/* ============================================================
   MODAL BOX — restyled v3 (Pa-TRON)
   Card per form CRUD (#itemBox, ...): fixed, centrato, con backdrop
   oscurante. Compatibile mobile e iOS.
   ============================================================ */

/* --- Backdrop oscurante (creato dinamicamente da commonsjs.openModalbox) ---
   IMPORTANTE: niente `transition`, solo `animation` sull'apertura.
   In questo modo la rimozione della classe .open fa sparire il backdrop
   istantaneamente, senza ritardo percepito alla chiusura del modale. */
.modalbox-backdrop {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(16, 24, 40, 0.45);
   z-index: 1400;
   opacity: 0;
   pointer-events: none;
}
.modalbox-backdrop.open {
   opacity: 1;
   pointer-events: auto;
   animation: modalbox-backdrop-in .18s ease-out;
}
@keyframes modalbox-backdrop-in {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* --- Card base ----------------------------------------------- */
.modalbox {
   z-index: 1500;
   background-color: #fff;
   border: 1px solid #dce3ea;
   border-radius: 14px;
   box-shadow:
      0 1px 2px rgba(16, 24, 40, 0.04),
      0 18px 40px -10px rgba(16, 24, 40, 0.22),
      0 6px 14px rgba(16, 24, 40, 0.08);
   padding: 20px 24px 16px;
   /* Posizionamento: fisso in viewport, centrato orizzontalmente, sotto topbar */
   position: fixed;
   top: 60px;
   left: 50%;
   right: auto;
   transform: translateX(-50%);
   margin: 0;
   width: calc(100% - 32px);
   max-width: 1260px;
   max-height: calc(100vh - 88px);
   overflow-y: auto;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
}

/* Neutralizza .well/.well-lg di Bootstrap 3 quando combinati */
.well.modalbox {
   background-color: #fff;
   background-image: none;
   border-color: #dce3ea;
}

/* --- Header (h3 + titolo + X) --- */
.modalbox > h3 {
   margin: -4px 0 14px;
   padding-bottom: 12px;
   font-size: 18px;
   font-weight: 600;
   line-height: 1.35;
   border-bottom: 1px solid #edf1f5;
   overflow: hidden; /* clearfix per il close floatato */
}
.modalbox > h3 .text-primary {
   color: #337ab7;
}

/* --- X in alto a destra ---
   Override di Bootstrap `button.close { background: transparent }`:
   imposto background visibile e centro la × usando inline-flex.
   Hover: grigio scuro (no rosso) per richiamare il colore di testo. */
.modalbox .close.close-itemBox {
   opacity: 1;
   text-shadow: none;
   margin-top: 0;
   width: 32px;
   height: 32px;
   padding: 0;
   border-radius: 16px;
   border: 1px solid #d8dde3;
   background-color: #f1f3f4;
   color: #5f6368;
   box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
   transition: background-color .15s ease, color .15s ease, border-color .15s ease;
   /* Centraggio assoluto della × dentro al cerchio */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
}
.modalbox .close.close-itemBox:hover {
   background-color: #4a5159;
   border-color: #4a5159;
   color: #fff;
}
.modalbox .close.close-itemBox:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.25);
}
.modalbox .close.close-itemBox .badge {
   background-color: transparent;
   padding: 0;
   font-size: 18px;
   font-weight: bold;
   color: inherit;
   line-height: 1;
   display: block;
}

/* --- Form: ritmo verticale più compatto -------------------- */
.modalbox .form-group {
   margin-bottom: 10px;
}
.modalbox .control-label {
   font-size: 13px;
   color: #6b7785;
   font-weight: 500;
   padding-top: 7px;
}

/* --- Input / select / textarea ----------------------------- */
.modalbox .form-control {
   background-color: #fff;
   border: 1px solid #dce3ea;
   border-radius: 8px;
   padding: 6px 10px;
   font-size: 13px;
   color: #2c3748;
   box-shadow: none;
   transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.modalbox .form-control:focus {
   border-color: #337ab7;
   background-color: #fff;
   box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.16);
}
.modalbox .form-control[readonly],
.modalbox .form-control[disabled],
.modalbox .ro-form-control {
   background-color: #f4f6f9;
   color: #6b7785;
}
.modalbox textarea.form-control {
   min-height: 72px;
   line-height: 1.45;
   resize: vertical;
}

/* --- Input group (addon + input) --------------------------- */
.modalbox .input-group .input-group-addon {
   background-color: #f4f6f9;
   border: 1px solid #dce3ea;
   border-right: 0;
   border-radius: 8px 0 0 8px;
   color: #6b7785;
   font-size: 12px;
   padding: 4px 10px;
}
.modalbox .input-group .input-group-addon + .form-control {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

/* --- Alert validazione inline ------------------------------ */
.modalbox .alert.alert-danger.alert-dismissible {
   background-color: #fdecea;
   border: 1px solid #f5c2c0;
   color: #9b221c;
   font-weight: 500;
   font-size: 12px;
   text-align: left;
   padding: 6px 10px;
   border-radius: 6px;
   margin: 4px 0 0;
}

/* --- Divider "Compila sotto prima di archiviare" ----------- */
.modalbox #to-compile h2 {
   font-size: 14px;
   font-weight: 500;
   color: #8a9bb0;
   letter-spacing: .2px;
}

/* --- Help block -------------------------------------------- */
.modalbox .help-block {
   font-size: 11px;
   color: #8a9bb0;
   margin-top: 4px;
}

/* =========================================================
   BOTTONI dentro modalbox / #itemBox
   ========================================================= */
.modalbox .btn {
   border-radius: 8px;
   font-weight: 500;
   font-size: 13px;
   padding: 7px 14px;
   transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
   box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.modalbox .btn:focus,
.modalbox .btn:active:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.20);
}
.modalbox .btn .glyphicon {
   font-size: 12px;
   margin-right: 2px;
}

/* "Scheda Asset" */
.modalbox .btn[onclick*="goToUnit"] {
   border: 1px solid #e8b365 !important;
   background-color: #fff6e5 !important;
   color: #b46a16 !important;
   padding: 6px 10px;
   font-size: 12px;
}
.modalbox .btn[onclick*="goToUnit"]:hover {
   background-color: #fdeccc !important;
   border-color: #dd8d15 !important;
}

/* "Scheda Operatore" (stesso stile di "Scheda Asset") */
.modalbox .btn[onclick*="goToTenant"] {
   border: 1px solid #e8b365 !important;
   background-color: #fff6e5 !important;
   color: #b46a16 !important;
   padding: 6px 10px;
   font-size: 12px;
}
.modalbox .btn[onclick*="goToTenant"]:hover {
   background-color: #fdeccc !important;
   border-color: #dd8d15 !important;
}

/* "Scheda Contratto" (stesso stile di "Scheda Asset") */
.modalbox .btn[onclick*="goToRental"] {
   border: 1px solid #e8b365 !important;
   background-color: #fff6e5 !important;
   color: #b46a16 !important;
   padding: 6px 10px;
   font-size: 12px;
}
.modalbox .btn[onclick*="goToRental"]:hover {
   background-color: #fdeccc !important;
   border-color: #dd8d15 !important;
}

#itemBox #archive-item-btn {
   border: 1px solid #5bc0de !important;
   background-color: #eaf6fb !important;
   color: #1f6e87 !important;
}
#itemBox #archive-item-btn:hover {
   background-color: #d5ecf5 !important;
   border-color: #31b0d5 !important;
}
#itemBox #save-item-btn {
   border: 1px solid #337ab7 !important;
   background-color: #337ab7 !important;
   color: #fff !important;
}
#itemBox #save-item-btn:hover {
   background-color: #2e6ca4 !important;
   border-color: #2e6ca4 !important;
   color: #fff !important;
}
#itemBox #delete-item-btn {
   border: 1px solid #e5b0ad !important;
   background-color: #fff !important;
   color: #a8322c !important;
}
#itemBox #delete-item-btn:hover {
   background-color: #fdecea !important;
   border-color: #c9302c !important;
}
#itemBox #print-item-btn {
   border: 1px solid #d8dde3 !important;
   background-color: #fff !important;
   color: #2c3748 !important;
}
#itemBox #print-item-btn:hover {
   background-color: #f4f6f9 !important;
}
#itemBox #share-item-btn {
   border: 1px solid #5bc0de !important;
   background-color: #fff !important;
   color: #1f6e87 !important;
}
#itemBox #share-item-btn:hover {
   background-color: #eaf6fb !important;
}
#itemBox .form-group .btn.close-itemBox {
   width: auto;
   height: auto;
   float: none;
   padding: 7px 14px;
   font-size: 13px;
   font-weight: 500;
   color: #6b7785;
   background-color: #fff;
   border: 1px solid #d8dde3 !important;
   border-radius: 8px;
}
#itemBox .form-group .btn.close-itemBox:hover {
   background-color: #f4f6f9;
   color: #2c3748;
   border-color: #c4cdd6 !important;
}
#itemBox .form-group .btn.close-itemBox .glyphicon {
   color: inherit;
}

/* --- Mobile ------------------------------------------------ */
@media (max-width: 768px) {
   .modalbox,
   .well.modalbox {
      top: 56px;
      width: calc(100% - 16px);
      max-width: calc(100% - 16px);
      max-height: calc(100vh - 72px);
      padding: 14px 14px 10px;
      border-radius: 12px;
   }
   .modalbox > h3 {
      font-size: 16px;
      margin-bottom: 10px;
      padding-bottom: 8px;
   }
   .modalbox .close.close-itemBox {
      width: 30px;
      height: 30px;
   }
   .modalbox .form-group {
      margin-bottom: 8px;
   }
   .modalbox .control-label {
      padding-top: 2px;
      padding-bottom: 2px;
      text-align: left;
   }
   #itemBox [id$="-item-btn"] {
      margin-bottom: 6px;
   }
}

/* ============================================================
   BOOTSTRAP 3 MODALS (.modal / .modal-dialog) — fix posizionamento
   I modal Bootstrap di calendar.js (#detailModal, #noteModal,
   #categoryModal) di default partono a margin-top:30px, il che li
   fa finire dietro la topbar fissa (48px) — soprattutto su mobile.
   Spingiamo il dialog sotto la topbar e diamo un cap di larghezza
   coerente con .modalbox.
   ============================================================ */
.modal-dialog {
   margin: 60px auto 30px;
}
.modal-dialog,
.modal-dialog.modal-md {
   max-width: 600px;
}
.modal-dialog.modal-lg {
   max-width: 760px;
}
.modal-dialog.modal-sm {
   max-width: 400px;
}
@media (max-width: 768px) {
   .modal-dialog,
   .modal-dialog.modal-md,
   .modal-dialog.modal-lg,
   .modal-dialog.modal-sm {
      margin: 56px 8px 16px;
      max-width: none;
   }
}
/* Su iOS è necessario forzare l'inertia scroll sul .modal body
   per evitare scatti durante lo scroll del contenuto del modale. */
.modal {
   -webkit-overflow-scrolling: touch;
}

/* ============================================================
   MISC UTILITY
   ============================================================ */
.info-message {
   font-size: 90%;
   padding: 3%;
   border: 1px solid #dadce0;
   border-radius: 6px;
   background: #fff;
}

.tagged-text {
   padding: 2px 6px;
   color: #5f6368;
   background-color: #e8f0fe;
   border-radius: 4px;
}
.tagged-text1 {
   padding: 10px;
   color: #5f6368;
   background-color: #e8f0fe;
   border-radius: 4px;
}

.greyclass {
   color: #fff;
   background-color: #afaf5f;
}

.scrollingdiv {
   overflow: hidden;
}
.scrollingdiv:hover {
   overflow-y: scroll;
}

.row:not(:first-child) {
   margin-top: 30px;
}

.uploadfile-centered {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn-xlarge {
   padding: 18px 28px;
   font-size: 20px;
   line-height: normal;
   border-radius: 8px;
}

.btn-circle {
   width: 30px;
   height: 30px;
   text-align: center;
   padding: 6px 0;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 15px;
   border-color: #fff;
   border-style: solid;
   border-width: 2px;
   margin-bottom: 5px;
   position: relative;
   z-index: 100;
}
.btn-circle.btn-lg {
   width: 50px;
   height: 50px;
   padding: 10px 16px;
   font-size: 18px;
   line-height: 1.33;
   border-radius: 25px;
   position: relative;
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
   z-index: 100;
}
.btn-circle.btn-xl {
   width: 80px;
   height: 80px;
   padding: 10px 16px;
   font-size: 24px;
   line-height: 1.33;
   border-radius: 45px;
   position: relative;
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
   z-index: 100;
}
.btn-circle.btn-xxl {
   width: 110px;
   height: 110px;
   font-size: 38px;
   border-radius: 45px;
   position: relative;
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
   z-index: 100;
}

.close-itemBox {
   text-align: center;
   background-color: #9aa0a6;
   width: 36px;
   height: 36px;
   padding: 8px;
   font-size: 14px;
   color: #fff;
   font-weight: bold;
   border-radius: 18px;
   position: relative;
   float: right;
   cursor: pointer;
   transition: background 0.2s;
}
.close-itemBox:hover {
   background-color: #c0392b;
}

.label-circle-btn {
   padding: 2px;
}


/* ============================================================
   FILTER
   ============================================================ */
.filter-label {
   margin-left: 30px;
   width: 130px;
   text-align: right;
}

.filter-options-ul {
   background-color: #fff;
   border: 1px solid #dadce0;
   border-radius: 6px;
   list-style-type: none;
   padding: 0;
   margin: 0;
   max-height: 200px;
   overflow-y: scroll;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.filter-options-ul li a {
   border-bottom: 1px solid #f1f3f4;
   padding: 8px 12px;
   text-decoration: none;
   font-size: 85%;
   color: #3c4043;
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}
.filter-options-ul li a:hover:not(.header) {
   color: #fff;
   background-color: #337ab7;
}

.filter2-options-ul {
   border: 1px solid #dadce0;
   border-radius: 6px;
   list-style-type: none;
   margin: 0;
   max-height: 200px;
   overflow-y: scroll;
}
.filter2-options-ul li a {
   border-bottom: 1px dotted #e8eaed;
   padding: 8px 12px;
   text-decoration: none;
   font-size: 85%;
   color: #3c4043;
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}
.filter2-options-ul li a:hover:not(.header) {
   color: #337ab7;
   font-weight: bold;
   background-color: #f8f9fa;
}


/* ============================================================
   EDIT BOX
   ============================================================ */
.edit-box-odd {
   border: 1px solid #e8eaed;
   background-color: #f8f9fa;
   border-radius: 4px;
}
.edit-box-pair {
   border: 1px solid #e8eaed;
   background-color: #fff;
   border-radius: 4px;
}

.panelgrey {
   border: 1px solid #dadce0;
   background-color: #f8f9fa;
   border-radius: 6px;
}

.edit-sheet-box {
   margin: 5px;
   padding: 15px;
   border: 1px solid #dadce0;
   background-color: #f8f9fa;
   border-radius: 6px;
}
.edit-sheet-box2 {
   margin: 5px;
}

.minor-ctrl {
   background-color: #f1f3f4;
   border: 1px solid #dadce0;
   border-radius: 4px;
}

.sheet-description {
   border-radius: 6px;
   border: 1px solid #dadce0;
   background-color: #fff;
   width: 100%;
}


/* ============================================================
   SHEETS (table sheets)
   ============================================================ */
h2.tablesheet {
   color: #337ab7;
   font-size: 110%;
   padding-top: 25px;
   padding-bottom: 10px;
}

.tablesheet, .tablesheet th, .tablesheet td {
   border-collapse: collapse;
   padding: 5px 0px 1px 0px;
   font-weight: normal;
   color: #616161;
   margin: auto;
   vertical-align: middle;
}
.tablesheet table {
   table-layout: fixed;
   overflow-y: auto;
}
.tablesheet table th {
   word-wrap: break-word;
   overflow-wrap: break-word;
}
.tablesheet select, .tablesheet input {
   font-size: 85%;
   border-radius: 5px;
}
.tablesheet thead th {
   background-color: #fff;
   font-size: 110%;
}


/* ============================================================
   SIGNATURE CANVAS
   ============================================================ */
#signature_canvas {
   border: 2px solid #dadce0;
   border-radius: 12px;
   background-color: #fff;
}


/* ============================================================
   PRINT
   ============================================================ */
.hidden-print {
   display: block;
}
.visible-print-block {
   display: none;
}

.print-item-widget {
   color-adjust: exact;
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
   box-sizing: border-box;
   border: 2px solid #000;
   box-shadow: 0px 5px 5px #a2a2a2;
   background-clip: padding-box;
   background-color: #fff;
   border-radius: .5em;
   padding: 10px;
   width: 98%;
   margin: auto;
}
.print-panel-heading {
   min-width: 100%;
   padding: 10px;
   font-weight: bold;
   font-size: 120%;
   border-radius: .5em;
   border: 1px solid #fff;
}
.print-panel-heading img {
   width: 180px;
   margin-top: -8px;
}
.print-panel-body {
   line-height: 1.6;
   text-align: left;
}
.print-panel-body h4 {
   font-weight: bold;
   display: inline;
}


/* ============================================================
   KPI BOX
   ============================================================ */
.kpibox {
   margin-top: 3px;
   padding: 3px;
   color: #c0392b;
   background-color: #fff;
   box-shadow: 0 1px 4px rgba(0,0,0,0.1);
   text-align: center;
   border-radius: 8px;
   border: 1px solid #e0e0e0;
   width: 30%;
   position: absolute;
}
.kpibox-label {
   margin-top: 3px;
   padding-right: 10px;
   padding-bottom: 3px;
   color: #868686;
   font-weight: bold;
   font-size: 80%;
   width: 70%;
   text-align: right;
}


/* ============================================================
   MISC
   ============================================================ */
.sheet-control {
   width: 30%;
}

.textareadescr {
   min-height: 200px;
   height: 100%;
   width: 100%;
   border-radius: 6px;
}

.deactived {
   background-color: grey;
   color: white;
   cursor: not-allowed;
}

.dashboard-btn {
   text-align: left;
}

.highlight {
   padding: 9px 14px;
   margin-bottom: 14px;
   background-color: #f8f9fa;
   border: 1px solid #e8eaed;
   border-radius: 6px;
}

.editable-list {
   display: inline-block;
   width: 70%;
   font-size: 12px;
   background-color: #f1f3f4;
   color: #616161;
   padding: 5px;
   border-radius: 4px;
}

.oversize-panel {
   display: none;
}


/* ============================================================
   VIEW TOGGLE (table vs card view)
   ============================================================ */
.view-toggle-container {
   text-align: right;
   padding: 10px 0;
}
.view-toggle-btn.active {
   background-color: #337ab7;
   color: #fff;
   border-color: #2e6da4;
}
.view-toggle-btn:focus {
   outline: none;
   box-shadow: none;
}


/* ============================================================
   TABLE VIEW (items-table)
   ============================================================ */
.items-table-container {
   overflow-x: auto;
   margin-top: 10px;
}

.items-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 90%;
}
.items-table thead th {
   background-color: #337ab7;
   color: #fff;
   padding: 10px 8px;
   text-align: left;
   font-weight: 500;
   border: 1px solid #2e6da4;
   white-space: nowrap;
}
.items-table tbody td {
   padding: 8px;
   border: 1px solid #e8eaed;
   vertical-align: middle;
}
.items-table tbody tr:hover {
   background-color: #f8f9fa;
   cursor: pointer;
}
.items-table tbody tr.row-priority {
   border-left: 4px solid #ca0000;
}
.items-table tbody tr.row-closed {
   border-left: 4px solid #94d402;
}
.items-table tbody tr.row-open {
   border-left: 4px solid #9b9b9b;
}
.items-table .cell-id {
   font-weight: bold;
   color: #337ab7;
   white-space: nowrap;
}
.items-table .cell-category {
   font-weight: bold;
   max-width: 150px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.items-table .cell-description {
   max-width: 250px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.items-table .cell-description:hover {
   white-space: normal;
   word-wrap: break-word;
}
.items-table .cell-unit {
   color: #337ab7;
}
.items-table .cell-date {
   white-space: nowrap;
   color: #666;
}
.items-table .cell-supplier {
   max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
}
.items-table .cell-attributes {
   text-align: center;
   white-space: nowrap;
}
.items-table .cell-attributes .badge-icon {
   display: inline-block;
   margin: 0 2px;
   font-size: 16px;
}
.items-table .cell-attributes .badge-icon.icon-attachment { color: #0080ff; }
.items-table .cell-attributes .badge-icon.icon-closed { color: #3ca318; }
.items-table .cell-attributes .badge-icon.icon-priority { color: #ca0000; }
.items-table .cell-attributes .badge-icon.icon-out-of-order { color: #804000; }
.items-table .cell-attributes .badge-icon.icon-out-of-supply { color: #df7000; }
.items-table .cell-actions {
   text-align: center;
   white-space: nowrap;
}
.items-table .btn-table-action {
   padding: 4px 8px;
   font-size: 14px;
}

@media (max-width: 768px) {
   .items-table {
      font-size: 80%;
   }
   .items-table thead th,
   .items-table tbody td {
      padding: 6px 4px;
   }
   .items-table .cell-description {
      max-width: 150px;
   }
   .items-table .hide-on-mobile {
      display: none;
   }
}


/* ============================================================
   LEGACY NAVBAR OVERRIDES
   Hide old Bootstrap navbar styles — replaced by pt-topbar
   Keep classes for backward compatibility on other pages
   ============================================================ */
.navbar-default {
   display: none; /* hidden — replaced by pt-topbar + pt-sidebar */
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
   .pt-topbar-brand img {
      height: 26px;
   }
   .pt-stamping-info {
      display: none;
   }
   .customer-name {
      font-size: 11px;
      padding: 2px 12px 0;
   }
}


/* ============================================================
   REPORT SEGNALAZIONI PANEL (#a-report-segnalazioni)
   ============================================================ */
.report-seg-body {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   gap: 10px;
   padding: 2px 0 4px;
}

/* Riga selettore: icona + select affiancati */
.report-seg-row {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   gap: 8px;
}

.report-seg-field-label {
   -webkit-flex-shrink: 0;
   flex-shrink: 0;
   width: 28px;
   height: 28px;
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   background-color: #e8f0fe;
   border-radius: 50%;
   color: #337ab7;
   font-size: 12px;
   margin-bottom: 0;
   cursor: default;
}

.report-seg-select {
   -webkit-flex: 1;
   flex: 1;
   min-width: 0;
   font-size: 13px !important;
   height: 34px;
   padding: 4px 8px;
}

/* Separatore "comparato con" */
.report-seg-divider {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   gap: 6px;
   margin: 2px 0;
}
.report-seg-divider::before,
.report-seg-divider::after {
   content: '';
   -webkit-flex: 1;
   flex: 1;
   height: 1px;
   background: #e8eaed;
}

.report-seg-comparato-label {
   font-size: 10px;
   font-weight: 600;
   color: #9aa0a6;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   white-space: nowrap;
   padding: 0 4px;
}

/* Bottone azione */
.report-seg-actions {
   margin-top: 4px;
}

.report-seg-btn {
   font-size: 13px;
   padding: 7px 12px;
   border-radius: 6px;
   letter-spacing: 0.2px;
}

/* Alert risultato */
.report-seg-alert {
   margin-top: 12px;
   margin-bottom: 0;
   font-size: 13px;
   padding: 8px 12px;
   border-radius: 6px;
}

/* Responsive: nessuna variazione necessaria, flex già si adatta */
@media (max-width: 768px) {
   .report-seg-select {
      font-size: 16px !important; /* evita zoom iOS su focus */
   }
   .report-seg-btn {
      padding: 10px 12px;
   }
}


/* ============================================================
   MODAL MESSAGE (#modal_message) - Mobile / iOS friendly
   Markup: views/includes/modal-message.jsp
   API JS: commonsjs.showModalMessage / commonsjs.hideModalMessage
   ============================================================ */

.modal-message-overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 9999;
   padding: 15px;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   /* Centratura container */
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   /* Niente bounce sui margini su iOS */
   -webkit-tap-highlight-color: transparent;
   /* Safe area iPhone X+ (notch) */
   padding-top:    calc(15px + env(safe-area-inset-top));
   padding-bottom: calc(15px + env(safe-area-inset-bottom));
   padding-left:   calc(15px + env(safe-area-inset-left));
   padding-right:  calc(15px + env(safe-area-inset-right));
}

.modal-message-container {
   background-color: #fff;
   border-radius: 6px;
   box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
   max-width: 500px;
   width: 100%;
   margin: auto;
   overflow: hidden;
   border: 1px solid #ddd;
   border-top: 4px solid #337ab7;
}

.modal-message-body {
   padding: 25px 20px;
   text-align: center;
}

.modal-message-text {
   font-size: 16px;
   line-height: 1.5;
   color: #333;
   margin: 0;
   word-wrap: break-word;
   overflow-wrap: break-word;
}

.modal-message-footer {
   padding: 15px 20px;
   background-color: #f5f5f5;
   border-top: 1px solid #ddd;
   /* Layout colonna su mobile, riga su desktop (vedi @media) */
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
}

.modal-message-btn {
   width: 100%;
   min-height: 44px; /* Apple HIG touch target */
   font-size: 15px;
   padding: 10px 15px;
   white-space: normal;
   word-wrap: break-word;
   line-height: 1.3;
}

/* Spazio fra bottoni in colonna (no flex gap per compatibilità iOS < 14.5) */
.modal-message-footer .modal-message-btn + .modal-message-btn {
   margin-top: 10px;
}

@media (min-width: 480px) {
   .modal-message-footer {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
   }
   .modal-message-btn {
      width: auto;
      min-width: 130px;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      max-width: 220px;
   }
   .modal-message-footer .modal-message-btn + .modal-message-btn {
      margin-top: 0;
      margin-left: 10px;
   }
}

/* Blocco scroll del body quando il modale è aperto */
body.modal-message-open {
   overflow: hidden;
   /* iOS: evita scroll della pagina sottostante */
   position: fixed;
   width: 100%;
}


/* ============================================================
   ITEMS NON ATTIVI (scheduledDate > oggi)
   Vista griglia: banda colorata sull'header del widget.
   Vista tabella: sfondo riga + bordo sx coerente con row-open/closed.
   ============================================================ */

/* Vista griglia: banda azzurrina sull'header */
.item-widget .panel-myheading.card-not-active,
.item-widget .panel-heading.card-not-active {
   background-color: #c6ffff !important;
   color: #333 !important;
}
.item-widget .panel-myheading.card-not-active .btn,
.item-widget .panel-heading.card-not-active .btn {
   color: #333;
}

/* Vista tabella: riga "non ancora attiva" */
.items-table tbody tr.row-not-active {
   border-left: 4px solid #c6ffff;
   background-color: #f0ffff; /* leggera tinta per distinguere */
}
.items-table tbody tr.row-not-active:hover {
   background-color: #e0f7f7;
}

/* ============================================================
   ATTACHMENTS GRID + MEDIA LIGHTBOX (Pa-TRON)
   - Griglia uniforme per tutti gli allegati (foto/video/audio/documenti)
   - Lightbox a tutto schermo per la navigazione foto+video
   ============================================================ */

/* --- Card uniforme ---------------------------------------------- */
.attachment-card {
   position: relative;
   height: 200px;
   margin-bottom: 15px;
   padding: 6px;
   background-color: #fff;
   border: 1px solid #dce3ea;
   border-radius: 8px;
   transition: box-shadow 0.15s ease;
   overflow: hidden;
}
.attachment-card:hover {
   box-shadow: 0 4px 14px rgba(16, 24, 40, 0.10);
}

/* Area thumbnail (immagine/poster/icona) */
.attachment-card-thumb {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 130px;
   border-radius: 6px;
   background-color: #f4f6f9;
   overflow: hidden;
   cursor: pointer;
}
.attachment-card-thumb.is-document {
   cursor: default;
}
.attachment-card-thumb img {
   max-width: 100%;
   max-height: 100%;
   object-fit: cover;
}
.attachment-card-thumb.is-document img,
.attachment-card-thumb.is-audio img {
   max-height: 90px;
   object-fit: contain;
}
.attachment-card-thumb video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   pointer-events: none; /* il click va alla card, non al video element */
}

/* Overlay "play" sui video nella card */
.attachment-card-play-overlay {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 48px;
   height: 48px;
   line-height: 48px;
   text-align: center;
   color: #fff;
   font-size: 26px;
   background: rgba(0, 0, 0, 0.55);
   border-radius: 50%;
   pointer-events: none;
   transition: background 0.15s ease;
}
.attachment-card-thumb:hover .attachment-card-play-overlay {
   background: rgba(0, 0, 0, 0.75);
}

/* Caption sotto il thumbnail */
.attachment-card-caption {
   margin-top: 6px;
   text-align: center;
   font-size: 12px;
   line-height: 1.3;
   color: #333;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Toolbar bottoni in basso (rimuovi, dettagli) */
.attachment-card-toolbar {
   position: absolute;
   bottom: 4px;
   left: 0;
   right: 0;
   text-align: center;
}
.attachment-card-toolbar .btn {
   margin: 0 2px;
}

/* Overlay "conversione in corso" — copre l'intera card */
.attachment-card-conv-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(255, 255, 255, 0.88);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   z-index: 2;
   pointer-events: none; /* impedisce il click sulla card quando in pending */
}
.attachment-card-conv-overlay .conv-spinner {
   font-size: 28px;
   color: #337ab7;
   animation: spin 1.4s linear infinite;
}
.attachment-card-conv-overlay .conv-text {
   margin-top: 6px;
   font-size: 11px;
   color: #555;
}

/* Banner "conversione fallita" — in basso, non blocca il click */
.attachment-card-conv-failed {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 3px 6px;
   background: rgba(217, 83, 79, 0.92);
   color: #fff;
   text-align: center;
   font-size: 10px;
   z-index: 1;
}

/* --- Media lightbox ---------------------------------------------- */
.media-lightbox-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.92);
   z-index: 1800;
   display: none;
}
.media-lightbox-backdrop.open {
   display: block;
   animation: media-lightbox-fadein 0.18s ease-out;
}
@keyframes media-lightbox-fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

.media-lightbox {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1900;
   display: none;
   pointer-events: none; /* solo i figli con pointer-events:auto sono interattivi */
}
.media-lightbox.open {
   display: block;
}

/* Contenuto principale (img o video) centrato */
.media-lightbox-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: 92vw;
   max-height: 80vh;
   text-align: center;
   pointer-events: auto;
}
.media-lightbox-content img,
.media-lightbox-content video {
   max-width: 92vw;
   max-height: 80vh;
   display: block;
   margin: 0 auto;
   background: #000;
   border-radius: 4px;
}

/* Caption sotto il media */
.media-lightbox-caption {
   margin-top: 12px;
   color: #fff;
   font-size: 13px;
   text-align: center;
   max-width: 92vw;
   margin-left: auto;
   margin-right: auto;
   word-wrap: break-word;
}

/* Counter "3 / 12" in alto al centro */
.media-lightbox-counter {
   position: absolute;
   top: 16px;
   left: 50%;
   transform: translateX(-50%);
   color: #fff;
   font-size: 13px;
   opacity: 0.85;
   pointer-events: none;
   background: rgba(0, 0, 0, 0.4);
   padding: 4px 12px;
   border-radius: 14px;
}

/* X chiudi in alto a destra */
.media-lightbox-close {
   position: absolute;
   top: 14px;
   right: 14px;
   width: 44px;
   height: 44px;
   line-height: 44px;
   text-align: center;
   color: #fff;
   font-size: 22px;
   background: rgba(0, 0, 0, 0.5);
   border: none;
   border-radius: 50%;
   cursor: pointer;
   pointer-events: auto;
   z-index: 2;
   transition: background 0.15s ease;
}
.media-lightbox-close:hover,
.media-lightbox-close:focus {
   background: rgba(255, 255, 255, 0.2);
   color: #fff;
   outline: none;
}

/* Frecce navigazione (sinistra/destra) */
.media-lightbox-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 50px;
   height: 80px;
   line-height: 80px;
   text-align: center;
   color: #fff;
   font-size: 28px;
   background: rgba(0, 0, 0, 0.45);
   border: none;
   cursor: pointer;
   pointer-events: auto;
   z-index: 2;
   transition: background 0.15s ease;
}
.media-lightbox-nav:hover,
.media-lightbox-nav:focus {
   background: rgba(255, 255, 255, 0.18);
   color: #fff;
   outline: none;
}
.media-lightbox-nav.prev {
   left: 0;
   border-radius: 0 6px 6px 0;
}
.media-lightbox-nav.next {
   right: 0;
   border-radius: 6px 0 0 6px;
}
.media-lightbox-nav[disabled] {
   opacity: 0.25;
   cursor: default;
}

/* Quando il lightbox è aperto, blocca lo scroll del modalbox sottostante */
body.media-lightbox-open .modalbox {
   overflow: hidden;
}

/* --- Mobile tweaks ---------------------------------------------- */
@media (max-width: 767px) {
   .attachment-card {
      height: 180px;
   }
   .attachment-card-thumb {
      height: 110px;
   }
   .media-lightbox-content {
      max-width: 100vw;
      max-height: 75vh;
   }
   .media-lightbox-content img,
   .media-lightbox-content video {
      max-width: 100vw;
      max-height: 75vh;
   }
   .media-lightbox-nav {
      width: 38px;
      height: 60px;
      line-height: 60px;
      font-size: 20px;
   }
   .media-lightbox-close {
      width: 38px;
      height: 38px;
      line-height: 38px;
      font-size: 18px;
      top: 8px;
      right: 8px;
   }
   .media-lightbox-counter {
      top: 8px;
      font-size: 11px;
      padding: 3px 10px;
   }
}
/* ==========================================================================
   Animazione d'ingresso pagina (fade contenitore + cascata pannelli)
   Attivata da commonsjs.runPageEntranceAnim(). Solo desktop.
   ========================================================================== */
#all-content.pt-anim-in {
   animation: pt-content-in .58s ease-out backwards;
}
@keyframes pt-content-in {
   from { opacity: 0; }
   to   { opacity: 1; }
}

#all-content .pt-stagger-item {
   animation-name: pt-panel-in;
   animation-duration: .62s;
   animation-timing-function: cubic-bezier(.22, .61, .36, 1);
   animation-fill-mode: backwards; /* applica opacity:0 durante il delay (anti-flash) ma NON mantiene il transform finale: evita stacking-context residuo */
}
@keyframes pt-panel-in {
   from { opacity: 0; transform: translateY(14px); }
   to { opacity: 1; transform: translateY(0); }

}

/* Disattivazione su smartphone (fallback CSS, oltre al gate JS) */
@media (max-width: 768px) {
   #all-content.pt-anim-in,
   #all-content .pt-stagger-item {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
   }
}

/* Rispetto dell'impostazione iOS "Riduci movimento" (accessibilita') */
@media (prefers-reduced-motion: reduce) {
   #all-content.pt-anim-in,
   #all-content .pt-stagger-item {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
   }
}


/* ==========================================================================
   GRID WIDGET — compattazione in ALTEZZA (desktop + mobile)
   Riduce solo gli spazi/altezze verticali di .item-widget; la larghezza
   delle card resta invariata. Vale per ogni pagina che usa questo rendering.
   Richiede le classi .item-widget-desc / .item-widget-badges aggiunte nel JS.
   ========================================================================== */

/* Minor distacco verticale tra le card */
.result-container .panel {
   margin-bottom: 10px;
}

/* Header: bottone azione piu' piccolo => header piu' basso */
.item-widget .btn-circle.btn-lg {
   width: 38px;
   height: 38px;
   padding: 6px 0;
   font-size: 14px;
   border-radius: 19px;
   margin-bottom: 0;
}
.item-widget > .panel-myheading {
   padding-top: 8px;
   padding-bottom: 8px;
}

/* Liste piu' compatte in verticale */
.item-widget ul {
   margin-top: 4px;
   margin-bottom: 0;
}
.item-widget ul li {
   padding-top: 1px;
   padding-bottom: 1px;
   line-height: 1.05;   
}

/* Icone di riga (font-size inline 22-23px) -> ridotte */
.item-widget ul li > span.glyphicon:first-child {
   font-size: 12px !important;
}

/* Riga descrizione: altezza ridotta (sostituisce l'inline height:80px) */
.item-widget-desc {
   height: 42px;
   overflow: hidden;
}

/* Riga badge: altezza minima ridotta (sostituisce l'inline min-height:50px) */
.item-widget-badges {
   min-height: 25px;
}

/* Badge piu' compatti in verticale */
.custom-badge {
   padding-top: 2px;
   padding-bottom: 2px;
}
.custom-badge .glyphicon {
   font-size: 12px !important;
}


/* ============================================================
   BARRA NOTIFICHE iOS (installazione PWA) - additiva
   Mostrata solo su iOS Safari non ancora installato come PWA.
   Riusa .subscription-bar variandone colore e layout mobile.
   ============================================================ */
.subscription-bar-ios {
   background-color: #337ab7;
   display: none;
   line-height: 1.5;
}
.subscription-bar-ios .glyphicon-share {
   margin-right: 6px;
}
.subscription-bar-ios .btn {
   margin-left: 10px;
}
@media (max-width: 767px) {
   .subscription-bar-ios {
      padding: 15px 18px;
      font-size: 13px;
   }
   .subscription-bar-ios .btn {
      display: block;
      margin: 12px 0 0 0;
      width: 100%;
   }
}


/* ============================================================
   TABLE VIEW - SFONDO RIGHE COERENTE CON LE BANDE DELLA GRID VIEW
   Mappatura banda grid -> sfondo riga table:
      #9b9b9b (default)     -> #ffffff   .row-open
      #ca0000 (evidenziato) -> #ffb7b7   .row-priority / .row-overdue
      #94d402 (archiviato)  -> #e2fea0   .row-closed
   Blocco additivo: sovrascrive per ordine di cascata le regole
   dichiarate piu' sopra (che portavano solo il border-left).
   ============================================================ */
.items-table tbody tr.row-open {
   background-color: #ffffff;
   border-left: 4px solid #9b9b9b;
}
.items-table tbody tr.row-open:hover {
   background-color: #f8f9fa;
}

.items-table tbody tr.row-priority,
.items-table tbody tr.row-overdue {
   background-color: #ffb7b7;
   border-left: 4px solid #ca0000;
}
.items-table tbody tr.row-priority:hover,
.items-table tbody tr.row-overdue:hover {
   background-color: #ffa3a3;
}

.items-table tbody tr.row-closed {
   background-color: #e2fea0;
   border-left: 4px solid #94d402;
}
.items-table tbody tr.row-closed:hover {
   background-color: #d8f78a;
}

/* Schede non ancora attive (maintenances): riaffermata dopo le regole
   sopra per mantenere la precedenza sull'azzurrino. */
.items-table tbody tr.row-not-active {
   background-color: #f0ffff;
   border-left: 4px solid #c6ffff;
}
.items-table tbody tr.row-not-active:hover {
   background-color: #e0f7f7;
}

/* Le celle non devono coprire lo sfondo della riga */
.items-table tbody tr.row-open > td,
.items-table tbody tr.row-priority > td,
.items-table tbody tr.row-overdue > td,
.items-table tbody tr.row-closed > td,
.items-table tbody tr.row-not-active > td {
   background-color: transparent;
}

/* Righe della table view cliccabili: aprono il modale itemBox */
.items-table tbody tr {
   cursor: pointer;
   -webkit-tap-highlight-color: rgba(51, 122, 183, 0.15);
}


/* ============================================================
   ITEMBOX - BANDA DI STATO IN TESTA AL MODALE
   Copre a filo la parte alta del box (titolo + bottone di chiusura)
   e lascia uno stacco di 2px dal contenuto sottostante.
      .band-overdue     -> in ritardo
      .band-closed      -> completato
      .band-not-active  -> non ancora attiva
      .band-default     -> tutti gli altri
   ============================================================ */
.modalbox > .modalbox-band {
   margin: -20px -24px 2px;
   padding: 12px 24px;
   border: none; /* neutralizza il border-bottom di .modalbox > h3 (tickets) */
   border-radius: 14px 14px 0 0;
   font-size: 18px;
   font-weight: 600;
   line-height: 1.35;
   overflow: hidden; /* clearfix per il bottone di chiusura floatato */
   background-color: #bebebe;
   color: #333;
   transition: background-color .15s ease, color .15s ease;
}
/* Il titolo eredita il colore della banda: .text-primary non deve
   restare azzurro su fondo rosso. */
.modalbox > .modalbox-band .text-primary {
   color: inherit;
}
.modalbox > .modalbox-band.band-default {
   background-color: #bebebe;
   color: #333;
}
.modalbox > .modalbox-band.band-overdue {
   background-color: #ca0000;
   color: #fff;
}
.modalbox > .modalbox-band.band-closed {
   background-color: #94d402;
   color: #333;
}
.modalbox > .modalbox-band.band-not-active {
   background-color: #c6ffff;
   color: #333;
}
.modalbox > .modalbox-band .close.close-itemBox {
   margin-top: -2px;
}

@media (max-width: 768px) {
   .modalbox > .modalbox-band {
      margin: -14px -14px 2px;
      padding: 10px 14px;
      border-radius: 12px 12px 0 0;
      font-size: 16px;
   }
}


/* ============================================================
   IOS — PREVENZIONE AUTO-ZOOM SUL FOCUS DEI CAMPI
   ------------------------------------------------------------
   iOS Safari ingrandisce automaticamente la pagina quando riceve
   il focus un campo con font-size < 16px. Fino ad ora il problema
   era mascherato da maximum-scale=1 nel meta viewport (header-u.jsp),
   che pero' disabilita anche il pinch-to-zoom (accessibilita').

   Il blocco @media -webkit-min-device-pixel-ratio piu' in alto in
   questo file tentava gia' il fix, ma la sua specificita' (0,0,1)
   perde contro .form-control (0,1,0). Qui la cascata risolve:
   essendo in coda al file, queste regole vincono a parita' di
   specificita'.

   Le altezze NON cambiano: Bootstrap 3 fissa .form-control a 34px,
   e 16px * 1.42857 = 22.9px sta nel content box da 24px.
   Unica eccezione .modalbox .form-control (padding 6px 10px ->
   content box 20px): compensato abbassando la line-height.
   ============================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea,
.form-control,
.modalbox .form-control,
.input-group .form-control,
.input-group .input-group-addon input {
   font-size: 16px;
}

/* Ripristina il ritmo verticale delle modali con il font a 16px */
.modalbox .form-control {
   line-height: 1.25;
}
.modalbox textarea.form-control {
   line-height: 1.45;
}

/*
   Con maximum-scale rimosso il double-tap-to-zoom torna attivo e
   iOS reintroduce il ritardo di ~300ms sui tap. touch-action lo
   disattiva sui soli controlli interattivi, lasciando il pinch-zoom
   disponibile sul resto della pagina.
*/
input,
select,
textarea,
button,
.btn,
.input-group-addon,
a[role="button"] {
   touch-action: manipulation;
}


.panel-myheading h2 {
   color: #fff;
}


#req-notify-substription-bar,
#req-notify-ios-bar,
#master-bar,
#expiration-bar {
   display: none;
}

/* ============================================================
   SEZIONI COLORATE DENTRO #itemBox  (.pt-fsection)
   Barra verticale sul lato sinistro che raggruppa visivamente
   un blocco di .form-group dentro un .modalbox.

   Perche' uno pseudo-elemento e non un border-left reale:
   i .form-group dentro .form-horizontal hanno margin-left:-15px,
   quindi un bordo sul wrapper finirebbe DENTRO al contenuto;
   compensarlo con margini negativi porterebbe la barra fuori dal
   padding del .modalbox su mobile (14px) dove c'e' overflow-x:hidden
   -> verrebbe tagliata. Con position:absolute la barra non entra
   nel flusso: zero spostamenti, identico su desktop, mobile e iOS.

   clear:both e' necessario perche' #to-compile contiene .col-md-12
   floatati non clearati: senza, su desktop la barra azzurra
   partirebbe troppo in alto sovrapponendosi al divisore.
   ============================================================ */
.modalbox .pt-fsection {
   position: relative;
   clear: both;
}
.modalbox .pt-fsection::before {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: -8px;
   width: 6px;
   border-radius: 2px;
   background-color: transparent;
   pointer-events: none;
}
.modalbox .pt-fsection-pink::before {
   background-color: #e79ec0;
}
.modalbox .pt-fsection-blue::before {
   background-color: #8fbfe0;
}

@media (max-width: 768px) {
   .modalbox .pt-fsection::before {
      left: -6px;
   }
}

/* ============================================================
   #itemBox IN SOLA LETTURA  (.modalbox-static + .pt-readonly)
   Usato da units.js quando l'utente non ha i permessi di sezione
   ma arriva da un'altra pagina (p=openitem) per consultare una
   singola scheda.

   .modalbox-static neutralizza SOLO il posizionamento fisso della
   card, lasciando intatta tutta la skin ereditata da .modalbox
   (form-control, control-label, padding, radius, ombre...).
   Il box torna in flusso di pagina; units.js in questo caso non
   apre il backdrop, quindi gli allegati restano cliccabili.
   ============================================================ */
.modalbox.modalbox-static,
.well.modalbox.modalbox-static {
   position: static;
   top: auto;
   left: auto;
   right: auto;
   transform: none;
   margin: 0 auto 24px;
   width: auto;
   max-width: 100%;
   max-height: none;
   overflow-y: visible;
   z-index: auto;
}

@media (max-width: 768px) {
   .modalbox.modalbox-static,
   .well.modalbox.modalbox-static {
      top: auto;
      width: auto;
      max-width: 100%;
      max-height: none;
   }
}

/* Sola lettura: via la toolbar (rimuovi allegato / dettagli docarchive)
   dalle card allegato renderizzate da uploadfuncs._renderAttachmentCard,
   che le emette sempre con editmode=true. Cosi' non serve toccare
   commons.js, che e' condiviso da tutte le sezioni. */
#itemBox.pt-readonly .attachment-card-toolbar {
   display: none;
}


/* ============================================================
   SAFE AREA iOS (notch / Dynamic Island / home indicator)
   ------------------------------------------------------------
   Blocco ADDITIVO: va appeso IN FONDO a commons.css, dopo
   "#itemBox.pt-readonly .attachment-card-toolbar { display: none; }".
   Nessuna regola preesistente viene modificata.

   Prerequisito: <meta name="viewport" ... viewport-fit=cover>
   in views/includes/header-u.jsp.

   Note:
   - constant() copre iOS 11.0-11.1, env() iOS 11.2+. La coppia di
     dichiarazioni sfrutta il fallback CSS: i browser che non
     conoscono env() scartano la seconda riga e tengono la prima.
   - In portrait gli inset left/right valgono 0 e su device senza
     notch valgono 0 tutti e quattro: fuori da iPhone X+ questo
     blocco non cambia nulla.
   - Gli overlay posizionati via JS (#confirmBox, #gdprBox,
     #smartInfoBox, #pictureBox) NON sono toccati: la loro
     posizione la calcola commonsjs.setBoxPosition, che resta
     intoccabile.
   ============================================================ */
@supports (padding-top: constant(safe-area-inset-top)) or (padding-top: env(safe-area-inset-top)) {

   /* --- Contenuto in flusso -------------------------------------
      Protegge in landscape anche le pagine senza chrome .pt-*
      (login, signin, viewscustom): in portrait il padding e' 0.
      Bootstrap 3 imposta box-sizing: border-box su tutto, quindi
      body.modal-message-open { width: 100% } resta corretto. */
   body {
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
      padding-right: constant(safe-area-inset-right);
      padding-right: env(safe-area-inset-right);
   }

   /* --- Topbar fissa --- */
   .pt-topbar {
      height: calc(48px + constant(safe-area-inset-top));
      height: calc(48px + env(safe-area-inset-top));
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
   }
   .pt-topbar-inner {
      padding-left: calc(12px + constant(safe-area-inset-left));
      padding-left: calc(12px + env(safe-area-inset-left));
      padding-right: calc(12px + constant(safe-area-inset-right));
      padding-right: calc(12px + env(safe-area-inset-right));
   }

   /* --- Barre di avviso sovrapposte alla topbar (z-index 1300) --- */
   .master-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-left: calc(20px + constant(safe-area-inset-left));
      padding-left: calc(20px + env(safe-area-inset-left));
      padding-right: calc(20px + constant(safe-area-inset-right));
      padding-right: calc(20px + env(safe-area-inset-right));
   }
   .expiration-bar,
   .subscription-bar {
      padding-top: calc(20px + constant(safe-area-inset-top));
      padding-top: calc(20px + env(safe-area-inset-top));
      padding-left: calc(25px + constant(safe-area-inset-left));
      padding-left: calc(25px + env(safe-area-inset-left));
      padding-right: calc(25px + constant(safe-area-inset-right));
      padding-right: calc(25px + env(safe-area-inset-right));
   }

   /* --- Offset del contenuto principale ---
      left/right sono gia' gestiti dal padding su body. */
   .pt-main-content {
      padding-top: calc(56px + constant(safe-area-inset-top));
      padding-top: calc(56px + env(safe-area-inset-top));
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      min-height: calc(100vh - 48px - constant(safe-area-inset-top));
      min-height: calc(100vh - 48px - env(safe-area-inset-top));
   }

   /* --- Sidebar a scomparsa (fissa: il padding di body non la tocca) --- */
   .pt-sidebar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
   }

   /* --- Footer fisso (home indicator) --- */
   .pt-footer,
   .panel-footer {
      padding-bottom: calc(6px + constant(safe-area-inset-bottom));
      padding-bottom: calc(6px + env(safe-area-inset-bottom));
      padding-left: calc(16px + constant(safe-area-inset-left));
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + constant(safe-area-inset-right));
      padding-right: calc(16px + env(safe-area-inset-right));
   }

   /* --- Modalbox ---
      In landscape Safari valorizza left e right con lo stesso inset,
      quindi la card centrata resta simmetrica e dentro l'area sicura.
      .modalbox-static ha specificita' maggiore (.modalbox.modalbox-static)
      e continua a vincere su queste regole. */
   .modalbox {
      top: calc(60px + constant(safe-area-inset-top));
      top: calc(60px + env(safe-area-inset-top));
      width: calc(100% - 32px - constant(safe-area-inset-left) - constant(safe-area-inset-right));
      width: calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
      max-height: calc(100vh - 88px - constant(safe-area-inset-top) - constant(safe-area-inset-bottom));
      max-height: calc(100vh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
   }

   /* --- Modal message: aggiunge il solo fallback constant()
      alle regole gia' presenti con env(). --- */
   .modal-message-overlay {
      padding-top: calc(15px + constant(safe-area-inset-top));
      padding-top: calc(15px + env(safe-area-inset-top));
      padding-bottom: calc(15px + constant(safe-area-inset-bottom));
      padding-bottom: calc(15px + env(safe-area-inset-bottom));
      padding-left: calc(15px + constant(safe-area-inset-left));
      padding-left: calc(15px + env(safe-area-inset-left));
      padding-right: calc(15px + constant(safe-area-inset-right));
      padding-right: calc(15px + env(safe-area-inset-right));
   }
}

/* ============================================================
   BARRA RICHIESTA NOTIFICHE PUSH - restyling additivo
   Il selettore esclude .subscription-bar-ios: le due barre condividono la
   classe base, e un blocco .subscription-bar appeso in fondo al foglio
   sovrascriverebbe anche lo sfondo della barra iOS, che ha la stessa
   specificita' ma compare prima.
   ============================================================ */
.subscription-bar:not(.subscription-bar-ios) {
   background-color: #343a40;
   padding: 10px 18px;
   font-size: 13px;
   font-weight: 600;
   line-height: 1.6;
}

.subscription-bar:not(.subscription-bar-ios) #req-notify-substription-bar-label {
   margin-right: 14px;
   vertical-align: middle;
}

/* Bottoni uniformi: stesso fondo, stesso bordo, stesso peso. A distinguerli
   resta il testo, piu' l'icona sul pulsante informativo. */
.subscription-bar:not(.subscription-bar-ios) .btn {
   background-color: rgba(255, 255, 255, 0.10);
   border: 1px solid rgba(255, 255, 255, 0.35);
   color: #ffffff;
   font-size: 12px;
   font-weight: 600;
   padding: 4px 14px;
   margin-left: 8px;
   border-radius: 3px;
   vertical-align: middle;
   text-shadow: none;
   box-shadow: none;
}

.subscription-bar:not(.subscription-bar-ios) .btn:hover,
.subscription-bar:not(.subscription-bar-ios) .btn:focus,
.subscription-bar:not(.subscription-bar-ios) .btn:active,
.subscription-bar:not(.subscription-bar-ios) .btn:active:focus {
   background-color: rgba(255, 255, 255, 0.22);
   border-color: rgba(255, 255, 255, 0.60);
   color: #ffffff;
   outline: none;
   box-shadow: none;
}

/* Su iOS il tap lascia un evidenziatore grigio: si annulla mantenendo il
   feedback visivo affidato agli stati :active qui sopra. */
.subscription-bar:not(.subscription-bar-ios) .btn {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media (max-width: 767px) {
   .subscription-bar:not(.subscription-bar-ios) {
      padding: 10px 14px;
      font-size: 12px;
   }
   .subscription-bar:not(.subscription-bar-ios) .btn {
      display: block;
      width: 100%;
      margin: 8px 0 0 0;
   }
   .subscription-bar:not(.subscription-bar-ios) #req-notify-substription-bar-label {
      display: block;
      margin-right: 0;
   }
}

/* Safe area: il blocco @supports gia' presente piu' sopra applica i padding
   originali a .subscription-bar con specificita' inferiore a questa regola.
   Senza il blocco seguente, su iPhone con notch la barra tornerebbe alta. */
@supports (padding-top: env(safe-area-inset-top)) or (padding-top: constant(safe-area-inset-top)) {
   .subscription-bar:not(.subscription-bar-ios) {
      padding-top: calc(10px + constant(safe-area-inset-top));
      padding-top: calc(10px + env(safe-area-inset-top));
      padding-left: calc(18px + constant(safe-area-inset-left));
      padding-left: calc(18px + env(safe-area-inset-left));
      padding-right: calc(18px + constant(safe-area-inset-right));
      padding-right: calc(18px + env(safe-area-inset-right));
   }
}

/* Voce di topbar con nome e cognome: nomi lunghi non devono allargare la barra */
#menu-mypatron {
   display: inline-block;
   max-width: 160px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: middle;
}

/* ============================================================
   MODALBOX — input-group con addon a DESTRA (2026-10-03)
   La regola ".modalbox .input-group .input-group-addon" presuppone
   l'addon a sinistra (angoli arrotondati a sinistra, niente bordo
   destro). Con l'addon a destra (frequencyDays + giorni, datepicker
   in note e maintenances, estensione file in docarchive) l'addon
   risultava arrotondato sul lato di contatto e il campo pure.
   Selettore "~" e non ":last-child": il datepicker aggiunge il suo
   widget dentro l'input-group quando e' aperto.
   ============================================================ */
.modalbox .input-group .form-control ~ .input-group-addon {
   border-left: 0;
   border-right: 1px solid #dce3ea;
   border-radius: 0 8px 8px 0;
}
.modalbox .input-group .form-control:not(:last-child) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}
/* ==========================================================================
   Anti-flash del modalbox al caricamento pagina
   Durante il parsing HTML (prima del DOM-ready, quando commons.js nasconde
   #all-content e setLabels nasconde #itemBox) il .modalbox, essendo
   position:fixed, veniva disegnato per una frazione di secondo sopra la
   pagina. Lo nascondiamo da CSS fin dal primo paint.
   L'apertura resta affidata a jQuery .show() (openModalbox, showItemBox,
   vista sola lettura di units), che scrive display:block inline e vince
   su questa regola: per questo NIENTE !important.
   ========================================================================== */
.modalbox {
   display: none;
}
/* ============================================================
   BARRA RICHIESTA NOTIFICHE PUSH - pulsante di chiusura (X)
   #req-notify-substription-close-btn, chiamato da swjs.dismissNotifyBar().
   Desktop: in linea dopo "Per saperne di piu'". Smartphone: in alto a
   destra, per non diventare un quarto pulsante a tutta larghezza.
   Niente display !important: la barra e' mostrata/nascosta da jQuery.
   ============================================================ */
.subscription-bar #req-notify-substription-close-btn {
   float: none;
   display: inline-block;
   vertical-align: middle;
   margin: 0 0 0 12px;
   padding: 2px 8px;
   font-size: 24px;
   font-weight: 400;
   line-height: 1;
   color: #ffffff;
   text-shadow: none;
   opacity: 0.8;
   filter: alpha(opacity=80);
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.subscription-bar #req-notify-substription-close-btn:hover,
.subscription-bar #req-notify-substription-close-btn:focus,
.subscription-bar #req-notify-substription-close-btn:active {
   color: #ffffff;
   opacity: 1;
   filter: alpha(opacity=100);
   outline: none;
}

@media (max-width: 767px) {
   .subscription-bar #req-notify-substription-close-btn {
      position: absolute;
      top: 4px;
      right: 6px;
      margin: 0;
      padding: 6px 10px; /* area di tocco ~40px */
      font-size: 26px;
   }
   /* Spazio a destra del testo: la X non deve sovrapporsi */
   .subscription-bar:not(.subscription-bar-ios) #req-notify-substription-bar-label {
      padding-right: 32px;
   }
}

/* Notch / Dynamic Island: la barra e' in cima allo schermo, la X va
   spostata dello stesso inset applicato al padding della barra. */
@supports (padding-top: env(safe-area-inset-top)) or (padding-top: constant(safe-area-inset-top)) {
   @media (max-width: 767px) {
      .subscription-bar #req-notify-substription-close-btn {
         top: calc(4px + constant(safe-area-inset-top));
         top: calc(4px + env(safe-area-inset-top));
         right: calc(6px + constant(safe-area-inset-right));
         right: calc(6px + env(safe-area-inset-right));
      }
   }
}

/* ============================================================
   BARRA "INSTALLA COME APP" (#install-app-bar) - additiva
   Eredita lo stile della barra notifiche dalle regole
   .subscription-bar:not(.subscription-bar-ios) (fondo, padding, .btn,
   safe-area iOS). Qui solo cio' che e' specifico.
   La modalita' (classi messe da pwajs.showBar) decide cosa si vede:
     .install-app-mode-prompt -> Installa + Non Ora      (Chromium)
     .install-app-mode-ios    -> istruzioni + Ho capito + Non Ora (iOS)
   I pulsanti non vengono mai mostrati/nascosti da jQuery: su mobile
   devono restare display:block a tutta larghezza.
   ============================================================ */
#install-app-bar {
   display: none;
}

.subscription-bar:not(.subscription-bar-ios) #install-app-bar-label {
   margin-right: 14px;
   vertical-align: middle;
}

#install-app-bar .install-app-ios-hint {
   display: block;
   margin: 4px 0 2px 0;
   font-weight: 400;
}
#install-app-bar .install-app-ios-hint .glyphicon-share {
   margin: 0 4px;
}

#install-app-bar.install-app-mode-prompt .install-app-ios-only,
#install-app-bar.install-app-mode-ios .install-app-prompt-only {
   display: none;
}

@media (max-width: 767px) {
   .subscription-bar:not(.subscription-bar-ios) #install-app-bar-label {
      display: block;
      margin-right: 0;
   }
}