/* ─────────────────────────────────────────────
   FONTS & TEXT ANIMATIONS
────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@property --num { syntax: '<integer>'; initial-value: 0; inherits: false; }
@keyframes initText { 0% {content:"Αρχικοποίηση IoT συστήματος . . ."} 17% {content:"Αρχικοποίηση IoT συστήματος . . .\00000a Φόρτωση βασικών μονάδων . . ."} 27% {content:"Αρχικοποίηση IoT συστήματος . . .\00000a Φόρτωση βασικών μονάδων . . .\00000a Έλεγχος αισθητήρων . . ."} 36% {content:"Αρχικοποίηση IoT συστήματος . . .\00000a Φόρτωση βασικών μονάδων . . .\00000a Έλεγχος αισθητήρων . . .\00000a Σύνδεση με δίκτυο . . ."} 42% {content:"Αρχικοποίηση IoT συστήματος . . .\00000a Φόρτωση βασικών μονάδων . . .\00000a Έλεγχος αισθητήρων . . .\00000a Σύνδεση με δίκτυο . . .\00000a Συλλογή δεδομένων . . ."} 49% {content:"Φόρτωση βασικών μονάδων . . .\00000a Έλεγχος αισθητήρων . . .\00000a Σύνδεση με δίκτυο . . .\00000a Συλλογή δεδομένων . . .\00000a Ανάλυση πραγματικού χρόνου . . ."} 60% {content:"Έλεγχος αισθητήρων . . .\00000a Σύνδεση με δίκτυο . . .\00000a Συλλογή δεδομένων . . .\00000a Ανάλυση πραγματικού χρόνου . . .\00000a Αποστολή σε cloud . . ."} 66% {content:"Σύνδεση με δίκτυο . . .\00000a Συλλογή δεδομένων . . .\00000a Ανάλυση πραγματικού χρόνου . . .\00000a Αποστολή σε cloud . . .\00000a Φόρτωση διεπαφής χρήστη . . .\00000a"} 78% {content:"Συλλογή δεδομένων . . .\00000a Ανάλυση πραγματικού χρόνου . . .\00000a Αποστολή σε cloud . . .\00000a Φόρτωση διεπαφής χρήστη . . .\00000a Ενεργοποίηση αυτοματισμών . . .\00000a"} 100% {content:"Ανάλυση πραγματικού χρόνου . . .\00000a Αποστολή σε cloud . . .\00000a Φόρτωση διεπαφής χρήστη . . .\00000a Ενεργοποίηση αυτοματισμών . . .\00000a Σύνδεση με IoT οικοσύστημα . . .\00000a"} }
@keyframes opcty { 0% { opacity:0 } 100% { opacity:1 } }
@keyframes counting { 0% { --num: 0 } 60% { --num: 66 } 100% { --num: 100 } }
@keyframes charging { 0%{ width:0% } 60%{ width:66% } 100%{ width:100% } }
@keyframes rotate { 0%{ transform: rotate(0) } 100%{ transform: rotate(360deg) } }

/* ─────────────────────────────────────────────────────────────
   PROJECT-ONLY STYLES
────────────────────────────────────────────────────────────── */

/* MAPS */

#thessaloniki-app, #insertdevice-map, #editdevice-map { width: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--background-color); border: 1px solid var(--secondary-color); border-radius: 0.75rem; padding: 1rem; }

#thessaloniki-app { min-height: 70vh; height: 100%; }

#insertdevice-map, #editdevice-map { min-height: 15vh; height: 30vh; margin-top: 1rem; }

/* Settings Form */
.settings-form label { display:block; margin:10px 0 5px; font-weight:bold; color:var(--text-color); }
.settings-form input { width:100%; padding:10px; border:1px solid var(--breadcrumb-bg); border-radius:var(--tz-border-radius); font-size:14px; margin-bottom:20px; box-sizing:border-box; }
.settings-form input:focus { border-color:var(--primary-color); outline:none; }

/* Logs */
.log-type-info { color:var(--log-info-color); font-weight:bold; }
.log-type-warning { color:var(--log-warning-color); font-weight:bold; }
.log-type-error { color:var(--log-error-color); font-weight:bold; }
.log-type-critical { color:var(--log-critical-color); font-weight:bold; }

/* Copy Buttons */
.copy-btn { background:var(--primary-color); color:var(--text-color-light); border:none; border-radius:5px; padding:5px 10px; font-size:1rem; cursor:pointer; transition:all .3s ease-in-out; }
.copy-btn:hover { background:var(--secondary-color); color:var(--text-color-light); transform:scale(1.1); }
.copy-btn:active { transform:scale(0.95); }
.copied { background:var(--third-color)!important; color:var(--text-color); }
.copied i { animation:popEffect .3s ease-in-out; }
@keyframes popEffect { 0%{transform:scale(1);opacity:.5;} 50%{transform:scale(1.5);opacity:1;} 100%{transform:scale(1);opacity:1;} }

/* Utilities */
.custom-border { border:4px solid var(--secondary-color)!important; }
.custom-disabled { background:var(--disabled-bg-color-dark)!important; color:var(--disabled-color)!important; border-color:#ddd!important; cursor:not-allowed!important; opacity:1!important; }
#profitsChart { width:100%!important; height:100%!important; }

/* ─────────────────────────────────────────────────────────────
   INPUT CONTAINERS
────────────────────────────────────────────────────────────── */

.input-container { display: flex; justify-content: space-between; }

.input-min, .input-max {
    margin-top: auto; width: 15%; border: 1px solid var(--input-border-color); background: var(--input-bg-color); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; text-align: center; font-size: 14px; color: var(--background-color); box-shadow: 0 4px 10px var(--box-shadow-color); padding: 5px 10px; z-index: 2; transition: all 0.3s ease-in-out;
}

.input-min:hover, .input-max:hover {
    transform: scale(1.05); box-shadow: 0 6px 15px var(--box-shadow-hover-color); border: 1px solid var(--input-hover-border-color); background: var(--input-hover-bg-color);
}

/* ─────────────────────────────────────────────────────────────
   NOUi SLIDER
────────────────────────────────────────────────────────────── */

.noUi-tooltip { display: none !important; }
.noUi-active .noUi-tooltip { display: block !important; }
.noUi-connect { background: var(--slider-connect-color); }
.noUi-background { background: var(--slider-bg-color); }
.noUi-handle { background: var(--slider-connect-color); border: 2px solid var(--slider-handle-border); box-shadow: 0 2px 5px var(--box-shadow-color); }
.noUi-pips { color: var(--pip-text-color); }
.noUi-value { color: var(--slider-connect-color); }
.noUi-marker { background: var(--slider-handle-border); }
.noUi-tooltip { background: var(--slider-tooltip-bg); color: var(--slider-tooltip-text); border: 1px solid var(--slider-tooltip-border); border-radius: 4px; }
.noUi-horizontal { background: var(--slider-bg-color); }
.noUi-vertical { background: var(--slider-connect-color); }

/* ─────────────────────────────────────────────────────────────
   ROW HELPERS
────────────────────────────────────────────────────────────── */

.row-centered { display: flex; justify-content: center; align-items: center; }
.text-center-device-user-table { width: 100px !important; white-space: nowrap!important; }

/* ─────────────────────────────────────────────────────────────
   SWITCH BUTTON
────────────────────────────────────────────────────────────── */

.switch-input { -webkit-appearance: none !important; appearance: none !important; position: absolute !important; z-index: 1 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer !important; }

.switch-button { display: inline-flex !important; padding: 0 .375em !important; border-radius: 3.125em !important; border: .0625em solid #6b717b !important; background-color: #aaafbb !important; box-shadow: inset 0 0 .5em rgba(0,0,0,0.4) !important; transition-property: border-color, background-color !important; transition-duration: .2s !important; }

.switch-input:checked + .switch-button { border-color: var(--background-dark4) !important; background-color: var(--background-dark4) !important; }

.switch-button-inside { display: inline-flex !important; column-gap: 1em !important; position: relative !important; border-radius: 3.125em !important; padding: .75em !important; transform: translateX(-.375em) !important; background-image: linear-gradient(90deg, #c5c9d3 48%, #d5d7dd 52%) !important; box-shadow: inset .0625em 0 .0625em rgba(255,255,255,0.4) !important inset -.0625em 0 .0625em rgba(255,255,255,0.4) !important; transition-property: transform !important; transition-duration: .2s !important; }

.switch-button-inside::after { content: '' !important; position: absolute !important; z-index: -1 !important; inset: 0 !important; border-radius: 3.125em !important; background-image: linear-gradient(90deg, var(--background-dark3) 48%, var(--background-dark4) 52%) !important; box-shadow: inset .0625em 0 .0625em rgba(255,255,255,0.2) !important, inset -.0625em 0 .0625em rgba(255,255,255,0.2) !important; opacity: 0 !important; transition-property: opacity !important; transition-duration: .2s !important; }

.switch-input:checked + .switch-button > .switch-button-inside { transform: translateX(.375em) !important; }
.switch-input:checked + .switch-button > .switch-button-inside::after { opacity: 1 !important; }

.switch-icon { width: 1em !important; height: 1em !important; fill: #fff !important; filter: drop-shadow(0 .0625em .0625em rgba(0,0,0,0.4)) drop-shadow(0 0 .25em rgba(255,255,255,0.4)) drop-shadow(0 0 .25em rgba(255,255,255,0.4)); transition-property: fill !important; transition-duration: .2s !important; }

.switch-icon.off { fill: #767c86 !important; }
.switch-input:checked + .switch-button .switch-icon.off { fill: var(--text-color-light) !important; filter: none !important; }

.switch-icon.on { fill: var(--text-color-light) !important; }
.switch-input:not(:checked) + .switch-button .switch-icon.on { fill: var(--background-dark) !important; filter: none !important; }

@media screen and (max-width:768px){
#thessaloniki-app { min-height: 100vh; }
}



/* ─────────────────────────────────────────────────────────────
   PROFESSIONAL QUICK VIEW CARDS v2
────────────────────────────────────────────────────────────── */
.qv-dashboard{text-align:left;padding:15px;border-radius:8px;margin-top:20px!important;}
.qv-card{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.03);padding:12px 15px;height:100%;border:1px solid #e9ecef;display:flex;flex-direction:column;}
.qv-card-primary{border-top:3px solid var(--primary-color);}
.qv-card-secondary{border-top:3px solid var(--secondary-color);}
.qv-card-third{border-top:3px solid var(--third-color);}
.qv-card-dark{border-top:3px solid var(--header-bg-color);}
.qv-card-title{font-size:0.8rem;font-weight:700;letter-spacing:0.03em;color:var(--primary-color);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #eee;display:flex;align-items:center;gap:6px;}
.qv-card-title i{opacity:0.6;}
.qv-card-body{flex-grow:1;font-size:0.9rem;}
.qv-info-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding-bottom:6px;border-bottom:1px dashed #eee;font-size:0.9rem;}
.qv-info-row:last-child{border-bottom:none;margin-bottom:0;}
.qv-info-label{font-weight:600;color:#6c757d;font-size:0.85rem;}
.qv-info-value{font-weight:500;color:var(--text-color);text-align:right;word-break:break-all;}
.qv-timeline-container{max-height:500px;overflow-y:auto;padding-right:5px;}
.qv-timeline-container::-webkit-scrollbar{width:4px;}
.qv-timeline-container::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:4px;}
.qv-event-item{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-left:2px solid #eee;padding-left:12px;margin-left:4px;position:relative;}
.qv-event-details{flex-grow:1;}
.qv-event-type{font-weight:600;font-size:0.85rem;line-height:1.2;}
.qv-event-time{font-size:0.75rem;color:#999;margin-top:2px;}
.qv-badge{display:inline-block;padding:3px 8px;border-radius:12px;font-size:0.75rem;font-weight:600;margin:0 4px 4px 0;}
.swal2-popup.qv-popup-override{padding:0!important;border-radius:12px!important;overflow:hidden;}
.qv-tooltip{position:relative;cursor:help;}
.qv-tooltip::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(10px);background:var(--primary-color);color:#fff;padding:6px 12px;border-radius:6px;font-size:0.8rem;font-weight:500;white-space:nowrap;box-shadow:0 4px 15px rgba(0,0,0,0.15);opacity:0;visibility:hidden;transition:all 0.2s ease;pointer-events:none;z-index:1060;}
.qv-tooltip::before{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(10px);border:6px solid transparent;border-top-color:var(--primary-color);margin-bottom:-12px;opacity:0;visibility:hidden;transition:all 0.2s ease;pointer-events:none;z-index:1060;}
.qv-tooltip:hover::after,.qv-tooltip:hover::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-8px);}
.qv-event-meta{margin-top:4px;font-size:0.8rem;}
.qv-field-change{background:#f8f9fa;border-left:3px solid var(--secondary-color);padding:4px 8px;margin-bottom:4px;border-radius:0 4px 4px 0;}
.qv-field-label{font-weight:600;color:var(--primary-color);font-size:0.75rem;margin-bottom:2px;}
.qv-val-old{color:#dc3545;text-decoration:line-through;opacity:0.7;font-size:0.85em;}
.qv-val-new{color:#198754;font-weight:600;}
.qv-arrow{color:#adb5bd;margin:0 5px;font-size:0.8em;}
.qv-filters-header{display:flex;gap:10px;margin-bottom:15px;background:#fff;padding:10px;border-radius:8px;border:1px solid #e9ecef;align-items:center;}
.qv-filter-input{flex:1;border:1px solid #dee2e6;border-radius:6px;padding:8px 12px;font-size:0.9rem;background:#f8f9fa;transition:all 0.2s ease;}
.qv-filter-input:focus{background:#fff;border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.1);}
.qv-filter-input::placeholder{color:#adb5bd;}

.upload-dropzone{border:2px dashed #dee2e6;border-radius:15px;background-color:#f8f9fa;transition:all 0.3s ease;min-height:280px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;height:97%;}
.upload-dropzone:hover,.upload-dropzone.dragover{background-color:#eef2ff;border-color:var(--primary-color);}
.excel-preview-table{font-size:0.8rem;border-collapse:collapse;width:100%;color:#495057;box-shadow:0 2px 5px rgba(0,0,0,0.05);}
.excel-preview-table th{background-color:#f1f3f5;border:1px solid #dee2e6;text-align:center;font-weight:600;padding:6px;color:#868e96;}
.excel-preview-table td{border:1px solid #dee2e6;padding:6px 10px;background-color:#fff;}
.excel-row-num{background-color:#f1f3f5;border:1px solid #dee2e6;text-align:center;color:#868e96;width:35px;}
.stat-card-minimal{border:1px solid #eff2f5;border-radius:15px;background:#fff;padding:20px;height:100%;box-shadow:0 2px 6px rgba(0,0,0,0.02);display:flex;align-items:center;justify-content:space-between;border-top:3px solid var(--primary-color);}
.stat-icon-wrapper{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;}

.swal2-popup.swal-import-wide{width:80vw!important;max-width:1100px;}
@media(max-width:576px){.swal2-popup.swal-import-wide{width:100vw!important;max-width:100vw;margin:0;border-radius:0;}}
.excel-filename{max-width:260px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.swal-import-left .swal2-html-container{text-align:left!important;}
@keyframes pulse-blue{0%{box-shadow:0 0 0 0 rgba(13,110,253,0.4);}70%{box-shadow:0 0 0 6px rgba(13,110,253,0);}100%{box-shadow:0 0 0 0 rgba(13,110,253,0);}}
.pulse-animation{animation:pulse-blue 2s infinite;}
.settings-grid-container{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:10px;}
@media(max-width:768px){.settings-grid-container{grid-template-columns:1fr;}}
.badge-power-grid{background-color:#e3f2fd;color:#0d47a1;border:1px solid #90caf9;}
.badge-power-batt{background-color:#fbe9e7;color:#d84315;border:1px solid #ffab91;}
.badge-power-unknown{background-color:#f5f5f5;color:#616161;border:1px solid #e0e0e0;}
.settings-collapse-panel{background:var(--background-overlay);border-radius:8px;font-size:.85rem;color:var(--text-color);}
.qv-actions-swal{width:60vw!important;max-width:60vw!important;}
@media(max-width:1800px){.qv-actions-swal{width:95vw!important;max-width:95vw!important;}}
#walletCarouselHost{width:100%;position:relative;overflow:hidden;padding:10px 0;}
.wallet-portfolio-wrapper{position:relative;width:100%;}
.wallet-scroll-track{display:flex;gap:0;overflow-x:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:20px;width:100%;}
.wallet-slide{min-width:100%;flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;padding:0 10px;box-sizing:border-box;}
.wallet-nav-btn{position:absolute;top:95px;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.9);border:1px solid #e0e0e0;color:var(--primary-color);box-shadow:0 4px 10px rgba(0,0,0,0.15);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all 0.2s ease;opacity:0;}
#walletCarouselHost:hover .wallet-nav-btn{opacity:1;}
.wallet-nav-btn:hover{background:var(--primary-color);color:white;transform:translateY(-50%) scale(1.1);}
.wallet-nav-btn.prev{left:5px;}
.wallet-nav-btn.next{right:5px;}
.wallet-stepper{display:flex;justify-content:center;gap:8px;margin-top:5px;margin-bottom:5px;}
.wallet-dot{width:8px;height:8px;background-color:#dee2e6;border-radius:50%;transition:all 0.3s ease;cursor:pointer;}
.wallet-dot.active{width:24px;background-color:var(--primary-color);border-radius:10px;}
.wallet-theme-me{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);}
.wallet-theme-other{background:linear-gradient(135deg,#34495e 0%,#2c3e50 100%);}
.wallet-theme-empty{background:linear-gradient(135deg,#636e72 0%,#2d3436 100%);}
.wallet-label{font-size:.75rem;letter-spacing:1.2px;opacity:.7;margin-bottom:4px;}
.wallet-balance{font-size:2.6rem;font-weight:700;letter-spacing:-.5px;line-height:1.1;}
.wallet-user-name{font-size:1rem;font-weight:600;letter-spacing:.5px;}
.wallet-id-badge{background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);padding:4px 10px;border-radius:8px;font-family:monospace;font-size:.9rem;border:1px solid rgba(255,255,255,0.1);}
.wallet-action-btn{border:none;border-radius:12px;padding:10px 0;font-size:.95rem;font-weight:600;transition:transform 0.2s;}
.wallet-action-btn:active{transform:scale(0.96);}
.btn-topup{background:var(--primary-color);color:white;box-shadow:0 4px 10px rgba(var(--primary-color-rgb),0.3);}
.btn-history{background:#e9ecef;color:var(--text-color);border:1px solid #dee2e6;}
.tx-mini-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed #dee2e6;}
.tx-mini-row:last-child{border-bottom:none;}
.digital-wallet-card{width:100%;max-width:500px;height:220px;border-radius:24px;position:relative;z-index:2;box-shadow:0 15px 35px rgba(0,0,0,0.2),0 5px 15px rgba(0,0,0,0.1);transition:transform 0.3s ease;border:1px solid rgba(255,255,255,0.1);}
.wallet-details-container{width:95%;max-width:480px;background:rgba(255,255,255,0.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.8);border-radius:20px;margin:15px auto 0 auto;padding:20px;position:relative;z-index:1;box-shadow:0 8px 32px 0 rgba(31,38,135,0.1);}
.wallet-action-btn{border:none;border-radius:15px;padding:12px 0;font-size:.95rem;font-weight:600;transition:all 0.2s;}
.btn-topup{background:var(--primary-color);color:white;box-shadow:0 4px 12px rgba(var(--primary-color-rgb),0.4);}
.btn-history{background:rgba(255,255,255,0.8);color:var(--text-color);border:1px solid rgba(0,0,0,0.05);box-shadow:0 2px 5px rgba(0,0,0,0.05);}
.btn-history:hover{background:#fff;transform:translateY(-2px);}

.json-renderer{background-color:#ffffff;border:1px solid #e2e2e2;border-radius:6px;padding:10px;font-family:"IBM Plex Mono",monospace;font-size:.85rem;text-align:left!important;width:100%!important;box-sizing:border-box;margin:0!important;max-height:300px;overflow-y:auto;overflow-x:auto;}
ul.json-dict,ol.json-array{padding-left:10px!important;margin:0!important;border-left:1px dotted #ccc;}
.json-key{color:#1a1a1b;font-weight:600;}
.json-string{color:var(--primary-color);}
.json-literal{color:#0d6efd;font-weight:bold;}
a.json-toggle{color:#6d6e71!important;text-decoration:none;margin-right:5px;}
a.json-toggle:hover{color:var(--primary-color)!important;}
table.dataTable tbody td{vertical-align:top;}

/* ─────────────────────────────────────────────────────────────
   LOGIC BUILDER STYLES (OR/AND UI)
────────────────────────────────────────────────────────────── */

/* Containers */
.qv-logic-container-ia {
    background-color: var(--success-light-color-fade);
    border: 1px solid var(--success-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.qv-logic-container-id {
    background-color: var(--error-light-color-fade);
    border: 1px solid var(--error-color);
    border-radius: 8px;
    padding: 15px;
}

.qv-logic-label {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: block;
    color: var(--text-color);
}

.qv-logic-container-ia .qv-logic-label { color: var(--success-color); }
.qv-logic-container-id .qv-logic-label { color: var(--error-color); }

/* Grid Layout - Αυτό φτιάχνει το σπάσιμο */
.qv-logic-grid {
    display: grid;
    /* Αυτόματα στήλες με ελάχιστο πλάτος 200px για να χωράει το κείμενο */
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}

/* Individual Item Card */
.qv-logic-item {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.qv-logic-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.qv-logic-item .form-check-input {
    margin: 0 10px 0 0 !important;
    cursor: pointer;
    transform: scale(1.1);
}

.qv-logic-item .qv-item-text {
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.2;
}

/* Selected States */
/* Green Area Selected */
.qv-logic-container-ia .qv-logic-item.selected {
    border-color: var(--success-color);
    background-color: #f0fdf4; /* Very light green */
    box-shadow: 0 0 0 1px var(--success-color);
}

/* Red Area Selected */
.qv-logic-container-id .qv-logic-item.selected {
    border-color: var(--error-color);
    background-color: #fef2f2; /* Very light red */
    box-shadow: 0 0 0 1px var(--error-color);
}

/* Disabled State */
.qv-logic-item.disabled {
    opacity: 0.6;
    background-color: #f8f9fa;
    cursor: not-allowed;
    border-style: dashed;
}

.qv-logic-footer {
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--error-color);
    text-align: right;
    font-style: italic;
    opacity: 0.8;
}

.analog-card .analog-section-title {
  font-weight: 600;
}

.analog-card .chip-metric {
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.25rem 0.75rem;
  background-color: #ffffff;
}

.analog-card .chip-label {
  font-size: 0.7rem;
  color: #6c757d;
  margin-bottom: 0.1rem;
}

.analog-card .chip-value {
  font-size: 0.8rem;
  font-weight: 600;
}
.qv-logic-card.is-disabled{
  opacity:.58;
  cursor:not-allowed;
  filter:saturate(.72);
}

.qv-logic-card.is-disabled .qv-logic-check{
  pointer-events:none;
}

.qv-logic-card.is-disabled-by-stop{
  border-style:dashed;
  background:#f8fafc;
}

.qv-mode-group--danger .qv-logic-card.is-selected{
  box-shadow:0 0 0 1px rgba(239,77,122,.28);
}
/* === SweetAlert2 – επαγγελματικό UI για φόρμες εντολών ================== */

/* Ολόκληρο popup της φόρμας */
.qv-swal-form-popup {
  border-radius: 16px;
  padding: 0; /* padding γίνεται μέσα στα sections */
  background-color: #ffffff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* Ζώνη τίτλου */
.qv-swal-form-title {
  margin: 0;
  padding: 1rem 1.5rem 0.85rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Στοίχιση icon + text – ΟΛΟ μαζί στο κέντρο, icon αριστερά από τον τίτλο */
.qv-swal-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

/* Κύκλος με το εικονίδιο */
.qv-swal-title-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 150, 136, 0.08); /* ή var(--secondary-color) */
  color: var(--primary-color, #00796b);
  font-size: 1.4rem;
}

/* Κείμενο τίτλου */
.qv-swal-title-text {
  flex: 0 1 auto;
  text-align: left;
}

.qv-swal-title-main {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color, #00796b);
}

.qv-swal-title-sub {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #6c757d;
}

/* HTML container (body) που βάζει η SweetAlert */
.qv-swal-form-html {
  max-height: 60vh;         /* scroll μόνο στο σώμα, όχι στο header/footer */
  overflow-y: auto;
}

/* Εσωτερικό layout του σώματος */
.qv-swal-layout {
  padding: 0.9rem 1.5rem 1.1rem 1.5rem;
}

/* Wrapper γύρω από το formHtml που φτιάχνεις δυναμικά */
.qv-swal-form-body {
  display: block;
}

/* Καλύτερο spacing στο bootstrap grid */
.qv-swal-form-body .row {
  row-gap: 0.9rem;
}

/* Labels πάνω από τα inputs */
.qv-swal-form-body .form-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: #37474f;
  margin-bottom: 0.25rem;
}

/* Inputs & selects */
.qv-swal-form-body .form-control,
.qv-swal-form-body .form-select {
  border-radius: 10px;
  font-size: 0.9rem;
}

/* Στείλε checkbox – μικρό, διακριτικό */
.qv-swal-form-body .form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: #78909c;
  margin-left: 0.5rem;
}

.qv-swal-form-body .form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0;
}

/* Footer με κουμπιά (Πίσω / Αποστολή) */
.qv-swal-form-actions {
  margin-top: 0 !important;
  padding: 0.75rem 1.5rem 1rem 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Κοινό στυλ κουμπιών στο footer (κρατάει τα theme classes σου) */
.qv-swal-btn {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 110px;
}

/* Λιγότερο aggressive hover – πιο "app" αίσθηση */
.qv-swal-btn-confirm:hover,
.qv-swal-btn-cancel:hover {
  filter: brightness(0.97);
}

/* Το input μέσα στο popup σου (από πάνω το κάνει flatpickr-input) */
.qv-popup-override .flatpickr-input.qv-timepicker {
  cursor: pointer;
  background-color: var(--secondary-color);
  border-radius: 999px;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.45rem 0.9rem;
  line-height: 1.2;
}

.qv-popup-override .flatpickr-input.qv-timepicker:focus {
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(0, 121, 107, 0.18);
}

.qv-popup-override .flatpickr-input.qv-timepicker::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

/* Η καρτέλα του flatpickr */
.flatpickr-calendar {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-family: inherit;
}

/* Κουμπιά / active στοιχεία στην παλέτα σου */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Χρόνος (κάτω μέρος του picker όταν υπάρχει) */
.flatpickr-time {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.flatpickr-time input {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--primary-color);
}

/* ------------ Remote Links Manager (SweetAlert) ------------- */

/* Ολόκληρο popup */
.qv-rn-popup {
  border-radius: 16px;
  padding: 0;
  background-color: #ffffff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* Ζώνη τίτλου */
.qv-rn-title {
  margin: 0;
  padding: 1rem 1.5rem 0.75rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Διάταξη icon + κείμενο τίτλου */
.qv-rn-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.qv-rn-title-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 150, 136, 0.10);
  color: var(--primary-color, #00796b);
  font-size: 1.5rem;
}

.qv-rn-title-text {
  flex: 1;
}

.qv-rn-title-main {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color, #00796b);
}

.qv-rn-title-sub {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #6c757d;
}

/* container γύρω από το html του Swal */
.qv-rn-html {
  padding: 0;
}

/* σώμα popup */
.qv-rn-body-wrapper {
  padding: 1rem 1.5rem 1.25rem 1.5rem;
  background-color: #f5faf9; /* ελαφρύ, ταιριάζει με bg-secondary-color */
}

/* footer / actions */
.qv-rn-actions {
  margin-top: 0 !important;
  padding: 0.75rem 1.5rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  justify-content: flex-end;
  gap: 0.5rem;
}

/* κουμπιά */
.qv-rn-btn {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 120px;
}

.qv-rn-btn-confirm:hover,
.qv-rn-btn-cancel:hover {
  filter: brightness(0.97);
}

/* Κάρτα πάνω-πάνω με Έξοδο / Λογική / Ενεργό */
.qv-rn-settings-card {
  border-radius: 12px;
  padding: 0.9rem 1rem 0.95rem;
  background: rgba(0, 150, 136, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  margin-bottom: 1rem;
}

.qv-rn-settings-card label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.qv-rn-settings-card .form-select {
  border-radius: 999px;
  border-color: var(--primary-color, #00796b);
}

/* Panel με τις πηγές */
.qv-rn-sources-panel {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
  padding: 1rem 1rem 0.75rem;
}

.qv-rn-sources-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-color, #00796b);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.qv-rn-sources-title i {
  font-size: 1rem;
}

/* Μία γραμμή πηγής */
.qv-rn-source-row {
  border-radius: 10px;
  background-color: #f3f7f6;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
}

.qv-rn-source-row .form-select {
  border-radius: 999px;
  border-color: rgba(0, 0, 0, 0.08);
}

.qv-rn-source-row .form-switch .form-check-input {
  cursor: pointer;
}

.qv-rn-source-row .qv-src-del {
  border-radius: 999px;
  padding-inline: 0.6rem;
}

/* κουμπί "Προσθήκη Πηγής" */
.qv-rn-btn-add {
  border-radius: 999px;
}

/* Select2 μέσα στο συγκεκριμένο popup */
.qv-rn-popup .select2-container--default .select2-selection--single {
  border-radius: 999px;
  border-color: var(--primary-color, #00796b);
  height: 38px;
}

.qv-rn-popup .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
}

.qv-rn-popup .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}

.log-desc{line-height:1.2; opacity:.85;}
.log-desc-divider{height:1px; width:100%; background:rgba(0,0,0,.10); margin:.35rem 0 .5rem;}

/* Καλύτερο UI για DataTables Responsive child rows (raw/json μεγάλα) */
#devices-raw-catalog-logs-table tr.child td {
  padding: 10px 12px !important;
}

#devices-raw-catalog-logs-table tr.child ul.dtr-details {
  width: 100%;
  margin: 0;
}

#devices-raw-catalog-logs-table tr.child ul.dtr-details > li {
  padding: 6px 0;
  border: 0;
}

#devices-raw-catalog-logs-table tr.child .dtr-title {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

#devices-raw-catalog-logs-table tr.child .dtr-data {
  display: block;
  max-height: 260px;
  overflow: auto;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;

  white-space: pre-wrap;
  word-break: break-all;

  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
}

.log-payload{
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.btn-primary-theme-table.is-active{background: var(--secondary-color) !important;border-color: var(--secondary-color) !important;color:#fff !important;}
.btn-primary-theme-table.is-off{opacity:.45;}

#logsDateRange,
.flatpickr-input[readonly]{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#device-catalog-logs-table_wrapper .dt-buttons{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  width:100%;
}
#device-catalog-logs-table_wrapper .dt-buttons .logs-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
#device-catalog-logs-table_wrapper .dt-buttons input#logsDateRange{
  white-space:nowrap;
}

#device_catalog_logs_table_wrapper {
    min-height: 500px; /* Αποτρέπει την αναπήδηση (layout shift) κατά το reload */
}

.dt-container.dt-hidden-force{
  display:none !important;
}

.datatable-empty-global{
  display:none;
  width:100%;
  min-height:520px;
  padding:32px 32px 40px 32px;
  align-items:center;
  justify-content:center;
}

.datatable-empty-global.is-visible{
  display:flex !important;
}

.datatable-empty-shell{
  width:min(760px, 100%);
  margin:0 auto;
  text-align:center;
  position:relative;
}

.datatable-empty-shell::before{
  content:"";
  position:absolute;
  top:40px;
  right:90px;
  width:140px;
  height:140px;
  background:radial-gradient(circle, rgba(255, 184, 0, .10), transparent 70%);
  pointer-events:none;
  filter:blur(2px);
}

.datatable-empty-shell::after{
  content:"";
  position:absolute;
  bottom:20px;
  left:80px;
  width:180px;
  height:180px;
  background:radial-gradient(circle, rgba(120, 90, 255, .08), transparent 70%);
  pointer-events:none;
}

.datatable-empty-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  margin-bottom:22px;
  border-radius:999px;
  background:rgba(9, 122, 107, .08);
  color:var(--primary-color);
  font-size:.95rem;
  font-weight:700;
  border:1px solid rgba(9, 122, 107, .12);
}

.datatable-empty-media{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:22px;
}

.datatable-empty-media img{
  width:220px;
  max-width:82%;
  filter:drop-shadow(0 18px 28px rgba(31,41,55,.12));
  transition:transform .25s ease;
}

.datatable-empty-media img:hover{
  transform:translateY(-3px) scale(1.02);
}

.datatable-empty-content{
  max-width:700px;
  margin:0 auto;
}

.empty-title{
  margin:0 0 14px 0;
  font-size:2.1rem;
  line-height:1.2;
  font-weight:800;
  color:#566b7f;
}

.empty-text{
  margin:0 auto 22px auto;
  font-size:1.08rem;
  line-height:1.8;
  color:#8798a7;
  max-width:640px;
}

.empty-note{
  display:inline-flex;
  align-items:flex-start;
  gap:10px;
  text-align:left;
  margin-top:4px;
  padding:14px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(0,0,0,.05);
  color:#6f8391;
  font-size:.98rem;
  line-height:1.6;
  max-width:620px;
}

.empty-note i{
  font-size:1.1rem;
  color:var(--secondary-color);
  margin-top:3px;
  flex:0 0 auto;
}

@media (max-width:768px){
  .datatable-empty-global{
    min-height:420px;
    padding:22px 18px 28px 18px;
  }

  .datatable-empty-media img{
    width:170px;
  }

  .empty-title{
    font-size:1.6rem;
  }

  .empty-text{
    font-size:.97rem;
    line-height:1.7;
  }

  .empty-note{
    font-size:.92rem;
    padding:12px 14px;
  }
}

.dash-help-swal-popup{
  width:min(980px, 95vw) !important;
  max-width:980px !important;
  padding:0 !important;
  border-radius:26px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.97), rgba(247,250,251,0.99)) !important;
  border:1px solid rgba(0,0,0,0.06) !important;
  box-shadow:0 26px 80px rgba(0,0,0,0.24) !important;
}

.dash-help-swal{
  display:flex;
  flex-direction:column;
  min-height:700px;
  text-align:left;
}

.dash-help-swal-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 1.35rem 1.1rem 1.35rem;
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(245,250,250,0.92));
  overflow:hidden;
}

.dash-help-swal-header::after{
  content:"";
  position:absolute;
  top:-90px;
  right:-70px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(234,191,63,0.16), rgba(234,191,63,0.07) 35%, transparent 72%);
  pointer-events:none;
  filter:blur(5px);
}

.dash-help-swal-title-wrap{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:1rem;
  min-width:0;
  flex:1 1 auto;
}

.dash-help-swal-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--third-light-color-fade);
  border:1px solid var(--third-color);
  color:var(--third-color);
  font-size:1.5rem;
  flex:0 0 auto;
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
}

.dash-help-swal-title-block{
  min-width:0;
}

.dash-help-swal-title{
  font-size:1.8rem;
  font-weight:800;
  line-height:1.08;
  color:var(--primary-color);
  margin-bottom:0.2rem;
}

.dash-help-swal-subtitle{
  font-size:1rem;
  line-height:1.4;
  color:var(--text-color);
  opacity:.76;
}

.dash-help-swal-popup .swal2-close{
  position:absolute !important;
  top:18px !important;
  right:18px !important;
  z-index:20 !important;
  margin:0 !important;
  width:46px !important;
  height:46px !important;
  border-radius:14px !important;
  color:#6b7280 !important;
  background:rgba(255,255,255,0.82) !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  box-shadow:0 8px 20px rgba(0,0,0,0.08) !important;
  transition:all .18s ease;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}

.dash-help-swal-popup .swal2-close:hover{
  color:var(--error-color) !important;
  background:var(--error-light-color-fade) !important;
  border-color:var(--error-color) !important;
}

.dash-help-swal-popup .swal2-html-container{
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
  text-align:left !important;
  flex:1 1 auto;
  display:flex;
}

.dash-help-swal-body{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:1.15rem;
  padding:1.2rem 1.35rem 1.25rem 1.35rem;
  width:100%;
  min-height:0;
  flex:1 1 auto;
  align-items:stretch;
}

.dash-help-swal-hero{
  min-height:100%;
  border-radius:24px;
  border:1px solid rgba(0,0,0,0.05);
  background:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(243,248,249,0.94));
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.dash-help-swal-hero img{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  transform:scale(1.08);
}

.dash-help-swal-side{
  display:flex;
  flex-direction:column;
  min-height:100%;
  gap:.9rem;
}

.dash-help-swal-list{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  flex:1 1 auto;
}

.dash-help-item{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:.95rem 1rem;
  border-radius:18px;
  background:rgba(255,255,255,0.76);
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
}

.dash-help-item-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-light-color-fade);
  border:1px solid var(--primary-color);
  color:var(--primary-color);
  font-size:1.1rem;
  flex:0 0 auto;
}

.dash-help-item-content{
  min-width:0;
}

.dash-help-item-title{
  font-size:1rem;
  font-weight:700;
  line-height:1.24;
  color:var(--primary-color);
  margin-bottom:.22rem;
}

.dash-help-item-text{
  font-size:.96rem;
  line-height:1.48;
  color:var(--text-color);
  opacity:.88;
}

.dash-help-swal-popup .swal2-actions{
  margin:0 !important;
  padding:0 !important;
  justify-content:stretch !important;
  width:100%;
}

.dash-help-swal-confirm{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:58px;
  padding:1rem 1.25rem !important;
  border-radius:18px !important;
  border:none !important;
  background:linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
  color:var(--text-color-light) !important;
  font-size:1.08rem !important;
  font-weight:800 !important;
  box-shadow:0 12px 24px rgba(0,0,0,0.12) !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.dash-help-swal-confirm:hover{
  transform:translateY(-2px);
  filter:brightness(1.02);
  box-shadow:0 16px 28px rgba(0,0,0,0.16) !important;
}

.dash-help-swal-action-row{
  margin-top:auto;
  padding-top:.1rem;
}

@media (max-width: 768px){
  .dash-help-swal{
    min-height:auto;
  }

  .dash-help-swal-header{
    padding:1rem;
  }

  .dash-help-swal-title{
    font-size:1.4rem;
  }

  .dash-help-swal-subtitle{
    font-size:.94rem;
  }

  .dash-help-swal-body{
    grid-template-columns:1fr;
    padding:1rem;
  }

  .dash-help-swal-hero{
    min-height:220px;
    max-height:220px;
  }

  .dash-help-swal-hero img{
    transform:none;
  }
}

.swal2-content{
  padding:0px!important;
}
.swal2-popup{
  padding:0px!important;
}

/* =========================================================
   PAREDEAL LOGIN PAGE
   Uses dynamic variables from color_palette.css
========================================================= */

.pd-login-page {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--primary-light-color) 28%, transparent), transparent 28%),
        radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--third-color) 18%, transparent), transparent 22%),
        radial-gradient(circle at 20% 85%, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent 26%),
        linear-gradient(135deg, var(--gradient-primary-start) 0%, var(--gradient-primary-end) 52%, var(--secondary-color) 100%);
    font-family: Arial, sans-serif;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.pd-login-page::before,
.pd-login-page::after {
    content: "";
    position: absolute;
    inset: auto;
    border-radius: 999px;
    filter: blur(70px);
    pointer-events: none;
    opacity: 0.55;
}

.pd-login-page::before {
    width: 260px;
    height: 260px;
    top: 8%;
    left: 8%;
    background: color-mix(in srgb, var(--primary-light-color) 42%, transparent);
}

.pd-login-page::after {
    width: 220px;
    height: 220px;
    right: 10%;
    bottom: 10%;
    background: color-mix(in srgb, var(--third-color) 24%, transparent);
}

.pd-login-shell {
    width: 100%;
    max-width: 470px;
    position: relative;
    z-index: 2;
}

.pd-login-card {
    position: relative;
    background: color-mix(in srgb, var(--background-white) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--background-white) 20%, transparent);
    border-radius: 28px;
    box-shadow:
        0 24px 60px color-mix(in srgb, var(--secondary-color) 28%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--background-white) 18%, transparent);
    padding: 34px;
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    overflow: hidden;
}

.pd-login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--background-white) 14%, transparent),
            color-mix(in srgb, var(--background-white) 4%, transparent)
        );
    pointer-events: none;
}

.pd-login-brand-stack {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.pd-login-brand-main {
    width: 176px;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--secondary-color) 18%, transparent));
}

.pd-login-brand-title {
    margin: 10px 0 0;
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-color-light);
    text-align: center;
    letter-spacing: -0.02em;
    text-shadow: 0 8px 24px color-mix(in srgb, var(--secondary-color) 20%, transparent);
}

.pd-login-brand-subtitle {
    margin: 4px 0 0;
    color: color-mix(in srgb, var(--text-color-light) 78%, transparent);
    text-align: center;
    font-size: 0.98rem;
}

.pd-login-brand-sub-wrap {
    margin-top: 8px;
    padding: 12px 18px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--secondary-color) 72%, transparent),
        color-mix(in srgb, var(--primary-color) 52%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--background-white) 12%, transparent);
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--secondary-color) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--background-white) 8%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pd-login-brand-sub {
    width: 96px;
    height: auto;
    display: block;
    object-fit: contain;
    opacity: 1;
    filter: brightness(1.06) contrast(1.06);
}

.pd-login-alert {
    display: none;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: .95rem;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pd-login-alert-error {
    background: color-mix(in srgb, var(--error-color) 16%, transparent);
    color: var(--text-color-light);
    border: 1px solid color-mix(in srgb, var(--error-color) 30%, transparent);
}

.pd-login-alert-success {
    background: color-mix(in srgb, var(--success-color) 16%, transparent);
    color: var(--text-color-light);
    border: 1px solid color-mix(in srgb, var(--success-color) 30%, transparent);
}

.pd-login-group {
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.pd-login-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text-color-light);
    text-shadow: 0 2px 10px color-mix(in srgb, var(--secondary-color) 12%, transparent);
}

.pd-login-input-wrap {
    position: relative;
}

.pd-login-input-wrap i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--text-color-light) 82%, transparent);
    font-size: 1.1rem;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
}

.pd-login-group input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--background-white) 18%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--background-white) 12%, transparent);
    color: var(--text-color-light);
    padding: 14px 16px 14px 46px;
    font-size: 1rem;
    outline: none;
    transition: .22s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--background-white) 5%, transparent);
}

.pd-login-group input::placeholder {
    color: color-mix(in srgb, var(--text-color-light) 55%, transparent);
}

.pd-login-group input:focus {
    border-color: color-mix(in srgb, var(--background-white) 36%, transparent);
    background: color-mix(in srgb, var(--background-white) 16%, transparent);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--primary-light-color) 18%, transparent),
        0 10px 24px color-mix(in srgb, var(--secondary-color) 10%, transparent);
}

.pd-login-btn {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    color: var(--text-color-light);
    background: linear-gradient(
        135deg,
        var(--primary-light-color) 0%,
        var(--primary-color) 45%,
        var(--secondary-color) 100%
    );
    box-shadow: 0 14px 28px color-mix(in srgb, var(--secondary-color) 22%, transparent);
    transition: .22s ease;
    position: relative;
    z-index: 2;
}

.pd-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--secondary-color) 28%, transparent);
}

.pd-login-btn:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pd-login-footer {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 18px;
    color: color-mix(in srgb, var(--text-color-light) 72%, transparent);
    font-size: .92rem;
}

.pd-login-footer a {
    color: var(--text-color-light);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--background-white) 34%, transparent);
    transition: .18s ease;
}

.pd-login-footer a:hover {
    color: var(--third-light-color);
    border-bottom-color: var(--third-light-color);
}

@media (max-width: 576px) {
    .pd-login-page {
        padding: 16px;
    }

    .pd-login-card {
        padding: 24px 22px;
        border-radius: 22px;
    }

    .pd-login-brand-main {
        width: 146px;
    }

    .pd-login-brand-sub {
        width: 84px;
    }

    .pd-login-brand-title {
        font-size: 1.72rem;
    }

    .pd-login-brand-subtitle {
        font-size: .93rem;
    }
}

.pd-login-access-note {
    position: relative;
    z-index: 2;
    margin-top: 14px;
    text-align: center;
    font-size: 0.92rem;
    color: color-mix(in srgb, var(--text-color-light) 76%, transparent);
    line-height: 1.5;
}

.pd-login-access-note a {
    color: var(--text-color-light);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--background-white) 34%, transparent);
    transition: .18s ease;
}

.pd-login-access-note a:hover {
    color: var(--third-light-color);
    border-bottom-color: var(--third-light-color);
}

.pd-login-forgot-wrap {
    margin-top: -2px;
    margin-bottom: 16px;
    text-align: right;
}

.pd-login-forgot-link {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--text-color-light) 86%, transparent);
    text-decoration: none;
    transition: .18s ease;
}

.pd-login-forgot-link:hover {
    color: var(--third-light-color);
}

.pd-login-input-wrap-password input {
    padding-right: 48px;
}

.pd-login-input-icon-left {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--text-color-light) 82%, transparent);
    font-size: 1.1rem;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
}

.pd-login-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--text-color-light) 82%, transparent);
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 4;
    padding: 4px;
    line-height: 1;
}

.pd-login-password-toggle:hover {
    color: var(--text-color-light);
}

.pd-login-password-toggle:focus {
    outline: none;
    color: var(--text-color-light);
}

/* ---------- login input icons ---------- */

.pd-login-input-wrap,
.pd-login-input-wrap-password {
    position: relative;
    display: block;
}

.pd-login-input-wrap i,
.pd-login-input-icon-left {
    position: absolute;
    left: 7px;
    top: 54%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--text-color-light) 82%, transparent);
    font-size: 1.1rem;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
    transition: color .18s ease;
}

/* όταν το input είναι focus, το icon να σκουραίνει */
.pd-login-input-wrap:focus-within i,
.pd-login-input-wrap:focus-within .pd-login-input-icon-left,
.pd-login-input-wrap-password:focus-within i,
.pd-login-input-wrap-password:focus-within .pd-login-input-icon-left {
    color: var(--secondary-color)!important;
}

.pd-login-group input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--background-white) 18%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--background-white) 12%, transparent);
    color: var(--text-color-light);
    padding: 14px 16px 14px 46px;
    font-size: 1rem;
    outline: none;
    transition: .22s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--background-white) 5%, transparent);
}

.pd-login-group input:focus {
    border-color: color-mix(in srgb, var(--background-white) 36%, transparent);
    background: color-mix(in srgb, var(--background-white) 88%, transparent);
    color: var(--secondary-color);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--primary-light-color) 18%, transparent),
        0 10px 24px color-mix(in srgb, var(--secondary-color) 10%, transparent);
}

.pd-login-group input:focus::placeholder {
    color: color-mix(in srgb, var(--secondary-color) 55%, transparent);
}

/* ---------- eye toggle ---------- */

.pd-login-input-wrap-password input {
    padding-right: 56px;
}

.pd-login-password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--text-color-light) 82%, transparent);
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    transition: color .18s ease, background .18s ease;
}

.pd-login-password-toggle:hover {
    color: var(--text-color-light);
    background: color-mix(in srgb, var(--background-white) 10%, transparent);
}

.pd-login-password-toggle:focus {
    outline: none;
    color: var(--text-color-light);
    background: color-mix(in srgb, var(--background-white) 12%, transparent);
}

.pd-login-input-wrap-password:focus-within .pd-login-password-toggle {
    color: var(--secondary-color);
    background: color-mix(in srgb, var(--secondary-light-color) 10%, transparent);
}

/* ---------- autofill fixes ---------- */

.pd-login-group input:-webkit-autofill,
.pd-login-group input:-webkit-autofill:hover,
.pd-login-group input:-webkit-autofill:focus,
.pd-login-group input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--secondary-color);
    caret-color: var(--secondary-color);
    box-shadow:
        0 0 0 1000px color-mix(in srgb, var(--background-white) 92%, transparent) inset,
        0 0 0 4px color-mix(in srgb, var(--primary-light-color) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--background-white) 36%, transparent);
    transition: background-color 99999s ease-in-out 0s;
}

/* αριστερό icon όταν υπάρχει autofill */
.pd-login-input-wrap:has(input:-webkit-autofill) i,
.pd-login-input-wrap-password:has(input:-webkit-autofill) i,
.pd-login-input-wrap:has(input:-webkit-autofill) .pd-login-input-icon-left,
.pd-login-input-wrap-password:has(input:-webkit-autofill) .pd-login-input-icon-left {
    color: var(--secondary-color);
}

/* eye icon όταν το password έχει autofill */
.pd-login-input-wrap-password:has(input:-webkit-autofill) .pd-login-password-toggle {
    color: var(--secondary-color);
}