/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder, textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0px;padding-top:0.5rem;padding-right:0.75rem;padding-bottom:0.5rem;padding-left:0.75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000;}[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder, textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type='checkbox'],[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}[type='checkbox']{border-radius:0px}[type='radio']{border-radius:100%}[type='checkbox']:focus,[type='radio']:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}[type='checkbox']:checked,[type='radio']:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type='checkbox']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");}@media (forced-colors: active) {[type='checkbox']:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='radio']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");}@media (forced-colors: active) {[type='radio']:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{border-color:transparent;background-color:currentColor}[type='checkbox']:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat;}@media (forced-colors: active) {[type='checkbox']:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type='file']:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }
    .absolute{position:absolute}
    .relative{position:relative}
    .isolate{isolation:isolate}
    .z-0{z-index:0}
    .z-20{z-index:20}
    .z-30{z-index:30}
    .mb-0{margin-bottom:0.0rem}
    .ml-auto{margin-left:auto}
    .mr-auto{margin-right:auto}
    .mt-0{margin-top:0.0rem}
    .block{display:block}
    .inline-block{display:inline-block}
    .flex{display:flex}
    .table{display:table}
    .grid{display:grid}
    .hidden{display:none}
    .h-auto{height:auto}
    .h-screen{height:100vh}
    .w-auto{width:auto}
    .w-full{width:100%}
    .max-w-\[80ch\]{max-width:80ch}
    .transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .transform-gpu{transform:translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
    .cursor-pointer{cursor:pointer}
    .grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}
    .flex-col{flex-direction:column}
    .flex-nowrap{flex-wrap:nowrap}
    .content-normal{align-content:normal}
    .items-center{align-items:center}
    .justify-normal{justify-content:normal}
    .justify-center{justify-content:center}
    .gap-8{gap:2.0rem}
    .gap-y-2{row-gap:0.5rem}
    .gap-y-2\.5{row-gap:0.625rem}
    .self-center{align-self:center}
    .justify-self-center{justify-self:center}
    .overflow-hidden{overflow:hidden}
    .scroll-smooth{scroll-behavior:smooth}
    .border{border-width:0.12rem}
    .bg-brand-500{--tw-bg-opacity:1;background-color:rgb(56 146 248 / var(--tw-bg-opacity))}
    .bg-surface-50{--tw-bg-opacity:1;background-color:rgb(245 247 250 / var(--tw-bg-opacity))}
    .bg-opacity-\[100\%\]{--tw-bg-opacity:100%}
    .bg-opacity-\[64\%\]{--tw-bg-opacity:64%}
    .bg-\[url\(\.\.\/resources\/hero-live-demo1\.jpg\)\]{background-image:url(../resources/hero-live-demo1.jpg)}
    .bg-cover{background-size:cover}
    .bg-center{background-position:center}
    .bg-no-repeat{background-repeat:no-repeat}
    .pb-0{padding-bottom:0.0rem}
    .pb-2{padding-bottom:0.5rem}
    .pb-40{padding-bottom:10.0rem}
    .pl-0{padding-left:0.0rem}
    .pl-3{padding-left:0.75rem}
    .pl-3\.5{padding-left:0.875rem}
    .pl-5{padding-left:1.25rem}
    .pr-0{padding-right:0.0rem}
    .pr-3{padding-right:0.75rem}
    .pr-3\.5{padding-right:0.875rem}
    .pr-5{padding-right:1.25rem}
    .pt-0{padding-top:0.0rem}
    .pt-2{padding-top:0.5rem}
    .pt-40{padding-top:10.0rem}
    .text-center{text-align:center}
    .font-body{font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'sans-serif'}
    .font-heading{font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'sans-serif'}
    .text-base{font-size:1.00rem;line-height:1.50rem}
    .text-lg{font-size:1.12rem;line-height:1.75rem}
    .font-\[400\]{font-weight:400}
    .normal-case{text-transform:none}
    .not-italic{font-style:normal}
    .leading-normal{line-height:1.5}
    .leading-tight{line-height:1.25}
    .tracking-normal{letter-spacing:0em}
    .tracking-wide{letter-spacing:0.025em}
    .text-surface-50{--tw-text-opacity:1;color:rgb(245 247 250 / var(--tw-text-opacity))}
    .text-text-200{--tw-text-opacity:1;color:rgb(59 69 81 / var(--tw-text-opacity))}
    .text-text-50{--tw-text-opacity:1;color:rgb(33 40 46 / var(--tw-text-opacity))}
    .text-opacity-\[100\%\]{--tw-text-opacity:100%}
    .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
    .transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
    .delay-\[0ms\]{transition-delay:0ms}
    .duration-\[300ms\]{transition-duration:300ms}
    .ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
    .ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}
    .text-shadow-none{text-shadow:}
    .hover\:bg-brand-500:hover{--tw-bg-opacity:1;background-color:rgb(56 146 248 / var(--tw-bg-opacity))}
    .hover\:bg-opacity-\[100\%\]:hover{--tw-bg-opacity:100%}
    .hover\:text-surface-50:hover{--tw-text-opacity:1;color:rgb(245 247 250 / var(--tw-text-opacity))}
    .hover\:text-opacity-\[100\%\]:hover{--tw-text-opacity:100%}
    .hover\:text-shadow-none:hover{text-shadow:}
    :is(.dark .dark\:bg-opacity-\[100\%\]){--tw-bg-opacity:100%}
    :is(.dark .dark\:bg-opacity-\[64\%\]){--tw-bg-opacity:64%}
    :is(.dark .dark\:text-opacity-\[100\%\]){--tw-text-opacity:100%}
    :is(.dark .dark\:hover\:bg-opacity-\[100\%\]:hover){--tw-bg-opacity:100%}
    :is(.dark .dark\:hover\:text-opacity-\[100\%\]:hover){--tw-text-opacity:100%}
    @media (min-width: 768px){.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}
    .\[\&\>\*\]\:col-start-1>*{grid-column-start:1}
    .\[\&\>\*\]\:row-start-1>*{grid-row-start:1}
    .\[\&\>\*\]\:min-w-0>*{min-width:0.0rem}
    .\[\&_a\:hover\]\:font-\[400\] a:hover{font-weight:400}
    .\[\&_a\:hover\]\:text-brand-800 a:hover{--tw-text-opacity:1;color:rgb(29 75 176 / var(--tw-text-opacity))}
    .\[\&_a\:hover\]\:no-underline a:hover{text-decoration-line:none}
    .\[\&_a\:visited\]\:font-\[400\] a:visited{font-weight:400}
    .\[\&_a\:visited\]\:text-brand-800 a:visited{--tw-text-opacity:1;color:rgb(29 75 176 / var(--tw-text-opacity))}
    .\[\&_a\:visited\]\:no-underline a:visited{text-decoration-line:none}
    .\[\&_a\]\:font-\[400\] a{font-weight:400}
    .\[\&_a\]\:text-brand-500 a{--tw-text-opacity:1;color:rgb(56 146 248 / var(--tw-text-opacity))}
    .\[\&_a\]\:no-underline a{text-decoration-line:none}
.container{max-width:100%;}
@media (min-width: 640px){.container{max-width:640px}}
@media (min-width: 768px){.container{max-width:768px}}
@media (min-width: 1024px){.container{max-width:1024px}}/***** preview boxes *****/
    .rt-main-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 900px;
        margin: 0 auto;
        
        transform: scale(0.85);
        transform-origin: top center;
    }

    .rt-dashboard-box {
        margin: 10px;
        padding: 25px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background-color: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        text-align: center;
    }

    .full-width {
        width: 100%;
    }

    .rt-dashboard-row {
        display: flex;
        gap: 20px;
    }

    .side-box {
        flex: 1;
    }

    .rt-dashboard-title {
        margin: 0 0 10px 0;
        color: #1a202c;
        font-size: 1.4rem;
    }

    .side-title {
        margin: 0 0 10px 0;
        font-size: 1.1rem;
        color: #2d3748;
    }

    .rt-dashboard-text, .side-text {
        color: #4a5568;
        font-size: 0.95rem;
        margin-bottom: 15px;
    }

    .rt-dashboard-note {
        padding-top: 15px;
        border-top: 1px dashed #cbd5e0;
        color: #718096;
        font-size: 0.8rem;
        font-style: italic;
    }

    /* Adattamento per Mobile */
    @media (max-width: 600px) {
        .rt-dashboard-row {
            flex-direction: column;
        }
        .rt-main-wrapper {
            transform: scale(1); /* Disattiviamo lo scale su mobile per leggibilità */
        }
    }

/***** login screen *****/
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f4f6f9; }
.login-box { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; width: 100%; max-width: 350px; box-sizing: border-box; }
input[type="password"] { padding: 10px; width: 100%; box-sizing: border-box; margin-bottom: 15px; margin-top: 15px; border: 1px solid #ccc; border-radius: 4px; }
.login-box button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-weight: bold; }
.login-box button:hover { 
    background: #0056b3; 
}


/***** dashboard screen *****/
.logout-btn { color: white; text-decoration: none; background: #dc3545; padding: 8px 15px; border-radius: 4px; white-space: nowrap; font-weight: bold; cursor: pointer; border: none; }
.logout-btn:hover { background: #c82333; }

.container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

.status-badge { font-size: 0.75rem !important; padding: 4px 8px !important; border-radius: 12px; font-weight: bold; color: white; display: inline-block; text-align: center; min-width: 70px; }
.status-completato { background-color: #28a745; }
.status-scaduto { background-color: #dc3545; }

.btn-action { 
    width: 28px !important; 
    height: 28px !important; 
    font-size: 0.85rem; 
    border: none; 
    border-radius: 50%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    margin-right: 5px; 
    transition: transform 0.2s;
}
.btn-action:hover { transform: scale(1.1); }
.btn-toggle-off { cursor: hand; background-color: #dc3545; color: white; } /* Rosso per disattivare */
.btn-toggle-on { cursor: hand; background-color: #28a745; color: white; }  /* Verde per riattivare */
.btn-copy-link { cursor: hand; background-color: #8b35dc; color: white; } /* Rosso per disattivare */
.btn-mail { cursor: hand; background-color: #6c757d; color: white; }
.btn-mail:hover { cursor: hand; background-color: #5a6268; }
.btn-archive-order { cursor: hand; background-color: #115f86; color: white; } /* Rosso per disattivare */

#btn-toggle-archive { cursor: hand; background-color: #115f86; color: white; }

/* Stili per le notifiche Toast */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    min-width: 250px;
    margin-bottom: 10px;
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideIn 0.3s ease-out forwards;
}

.toast.success { background-color: #28a745; border-left: 5px solid #1e7e34; }
.toast.error { background-color: #dc3545; border-left: 5px solid #bd2130; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Miglioramenti grafici per DataTables */
table.dataTable { border-collapse: collapse; margin-top: 15px !important; margin-bottom: 15px !important; font-size: 0.9rem; }
table.dataTable thead th { background-color: #f8f9fa; border-bottom: 2px solid #dee2e6; color: #495057; padding: 12px 10px; }
table.dataTable tbody td { vertical-align: middle; padding: 10px; border-bottom: 1px solid #e9ecef; }
table.dataTable tbody tr:hover { background-color: #f1f4f7; }

/* Stile per la paginazione e i filtri */
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #007bff; color: white !important; border: 1px solid #007bff; border-radius: 4px; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #0056b3; color: white !important; border: 1px solid #0056b3; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid #ccc; border-radius: 4px; padding: 5px; margin-left: 5px; }
 
/* Allinea al centro il contenuto della prima colonna (Data) */
table.dataTable tbody td:first-child,
table.dataTable thead th:first-child {
    text-align: center;
}


/* Layout base dell'header per desktop */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 10px 20px;
    background: #3d3d3d;
    border-bottom: 1px solid #eee;
    border-radius: 8px; 
    flex-wrap: wrap; /* Permette all'intero blocco pulsanti di andare sotto al titolo se serve */
    gap: 15px;       /* Distanza tra titolo e pulsanti in caso di a capo */
}
.header h1 {
    margin: 0; 
    font-size: 20px;
    color: white;
    flex-shrink: 0;  /* Impedisce al titolo di schiacciarsi */
}

.header-actions {
    display: flex;
    align-items: center;
    align-content: flex-end;   /* Allinea coerentemente le righe quando vanno a capo */
    flex-wrap: wrap;           
    justify-content: flex-end; /* Spinge rigorosamente gli elementi sul margine destro */
    gap: 10px;                 
    flex: 1;                   
    min-width: 280px;          
}

/* Allineamento e altezza uniforme per tutti i pulsanti dell'header */
.header-actions button {
    height: 38px !important;          /* Altezza fissa e identica per tutti */
    display: inline-flex !important;  /* Modello flex interno al pulsante */
    align-items: center;              /* Centra verticalmente icona e testo */
    justify-content: center;          /* Centra orizzontalmente */
    padding: 0 15px !important;       /* Sovrascrive i padding verticali inline */
    box-sizing: border-box;
    white-space: nowrap;              /* Impedisce al testo di andare a capo stringendo la finestra */
}

/* Normalizzazione estrema per garantire il "filo destro" (baseline destra) perfetto */
.header-actions button,
.header-actions .logout-btn {
    margin: 0 !important;             
    height: 38px !important;          
    display: inline-flex !important;  
    align-items: center !important;              
    justify-content: center !important;          
    padding: 0 15px !important;       
    box-sizing: border-box !important; /* Fondamentale per far coincidere le larghezze coi padding */
    white-space: nowrap !important;   
    border: none !important;           /* Azzera i bordi nativi che creano sfasamenti di 1px o 2px */
    border-radius: 4px !important;
}

/* Distanza uniforme tra l'icona e il testo in tutti i bottoni */
.header-actions button i,
.header-actions .logout-btn i {
    margin-right: 8px !important;                
}

/* Regole specifiche per Mobile e schermi inferiori a 768px */
@media (max-width: 768px) {
    #hamburger-menu-btn {
        display: block !important; /* Mostra l'icona hamburger */
        color: white;
    }

    #hamburger-menu-btn i {
        color: white;
    }

    .header-actions {
        display: none !important; /* Nasconde i pulsanti di default */
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
        padding: 10px 0 !important;
        z-index: 999 !important;
        border-bottom: 1px solid #ddd !important;
        gap: 0 !important;        /* Annulla il gap su mobile */
    }

    /* Classe attivata via JS per mostrare il menu */
    .header-actions.mobile-open {
        display: flex !important;
    }

    /* RIPRISTINO: Pulsanti a tutta larghezza e allineati a sinistra nel menu mobile */
    .header-actions button,
    .header-actions .logout-btn {
        width: calc(100% - 30px) !important; 
        margin: 6px 15px !important;             
        height: 45px !important;          
        display: flex !important;  
        align-items: center !important;              
        justify-content: flex-start !important; /* Allinea testo e icona a sinistra */      
        padding: 0 20px !important;       
        box-sizing: border-box !important;
        white-space: nowrap !important;              
    }

    /* Distanza uniforme tra l'icona e il testo in tutti i bottoni */
    .header-actions button i,
    .header-actions .logout-btn i {
        margin-right: 12px !important;                
    }

}



/* =========================================
   DARK MODE OVERRIDES
========================================= */
body.dark-mode { 
    background-color: #121212; 
    color: #e0e0e0; 
}

/* Login Box */
body.dark-mode .login-box { 
    background-color: #1e1e1e; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
    color: #e0e0e0; 
}
body.dark-mode .login-box input { 
    background-color: #2d2d2d; 
    color: #fff; 
    border-color: #444; 
}

/* Dashboard Elements */
body.dark-mode .header { 
    background-color: #1e1e1e; 
    border-bottom: 1px solid #333; 
}
body.dark-mode .container { 
    background-color: #1e1e1e; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}
body.dark-mode .header-actions { 
    background-color: #1e1e1e; /* Per il menu mobile */
}

/* Modals (Forziamo l'override degli stili inline con !important) */
body.dark-mode #sys-check-modal, 
body.dark-mode #add-order-modal { 
    background-color: #1e1e1e !important; 
    color: #e0e0e0; 
}
body.dark-mode #sys-check-modal div[style*="border-bottom"], 
body.dark-mode #add-order-modal div[style*="border-bottom"] { 
    border-color: #333 !important; 
}
body.dark-mode #add-order-modal input { 
    background-color: #2d2d2d !important; 
    color: #fff !important; 
    border-color: #444 !important; 
}
body.dark-mode #add-order-modal div[style*="background: #f8f9fa"] button { 
    background: #333 !important; 
    color: #fff !important; 
    border-color: #444 !important; 
}

/* DataTables Overrides */
body.dark-mode table.dataTable thead th { 
    background-color: #2d2d2d; 
    border-bottom: 2px solid #444; 
    color: #e0e0e0; 
}
body.dark-mode table.dataTable tbody td { 
    border-bottom: 1px solid #333; 
    color: #ccc; 
}
body.dark-mode table.dataTable tbody tr:hover { 
    background-color: #252525 !important; 
}
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate { 
    color: #e0e0e0 !important; 
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { 
    color: #e0e0e0 !important; 
}
body.dark-mode .dataTables_wrapper .dataTables_filter input, 
body.dark-mode .dataTables_wrapper .dataTables_length select { 
    background-color: #2d2d2d; 
    color: #fff; 
    border: 1px solid #444; 
}

.info-icon {
    margin-left: 6px;
    color: #6c757d;
    font-size: 14px;
    cursor: help;
    transition: color 0.2s ease;
}
.info-icon:hover {
    color: #343a40;
}
.dark-mode .info-icon:hover {
    color: #f8f9fa; /* Per adattarsi al tema scuro se lo stai usando */
}

/* Aggiungi questa parte nel tuo style.css in fondo */
body.dark-mode #chart-modal { 
    background-color: #1e1e1e !important; 
    color: #e0e0e0; 
}
body.dark-mode #chart-modal div[style*="border-bottom"] { 
    border-color: #333 !important; 
}
body.dark-mode #chart-modal select {
    background-color: #2d2d2d;
    color: #fff;
    border-color: #444 !important;
}
/* Colore chiaro per la freccia di espansione riga (DataTables Responsive) in Dark Mode */
body.dark-mode table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, 
body.dark-mode table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    color: #e0e0e0 !important;
}

/* Se la freccia assume l'aspetto di un cerchietto, per sicurezza aggiungiamo anche questo: */
body.dark-mode table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
body.dark-mode table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
    color: #ffffff !important;
}