/* ============================================================
   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: 70%;
   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;
}

#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;
}