/* ============================================
   AGROPAZARI – Dashboard layout (customer + admin)
   Χρησιμοποιεί τις CSS μεταβλητές του style.css,
   άρα υποστηρίζει αυτόματα dark/light mode.
   ============================================ */

body.dash-body { background: var(--bg); min-height: 100vh; }

/* ---------- Προεπιλογή για τα «περιγραμμένα» κουμπιά ----------
   Το .btn-outline του style.css είναι ΛΕΥΚΟ, φτιαγμένο για το σκούρο
   header της αρχικής. Μέσα σε κάρτα ή παράθυρο του dashboard γινόταν
   αόρατο (λευκό πάνω σε λευκό). Εδώ παίρνει τα χρώματα του θέματος.
   Με :where() η ειδικότητα μένει στο ελάχιστο και μπαίνει ΠΡΩΤΟ στο
   αρχείο, ώστε κάθε πιο συγκεκριμένος κανόνας παρακάτω να υπερισχύει
   (π.χ. το κόκκινο «Διακοπή συνδρομής»). */
.dash-body :where(.dash-card, .modal) :where(.btn-outline) {
    border-color: var(--border); color: var(--text-mid);
}
.dash-body :where(.dash-card, .modal) :where(.btn-outline):hover {
    border-color: var(--green); color: var(--green); background: var(--green-xlight);
}

/* ---------- Header (ξεκινά μετά το σταθερό sidebar) ---------- */
.dash-header {
    position: sticky; top: 0; z-index: 500;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 0 28px; height: 66px;
    background: var(--bg-white); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-left: 258px;
}
.dash-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-title {
    font-family: var(--font-display); font-size: 22px; font-weight: 700;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.back-link {
    text-decoration: none; font-size: 13px; font-weight: 600;
    color: var(--green); display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 50px; transition: var(--transition);
}
.back-link:hover { background: var(--green-xlight); }

/* ---------- Δωρεάν συνδρομή (μόνο διαχειριστής) ---------- */
.comp-toggle {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    background: rgba(200, 151, 58, 0.1);
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm); padding: 12px 14px;
}
.comp-toggle input { margin-top: 3px; flex-shrink: 0; }
.comp-toggle strong { display: block; font-size: 13.5px; color: var(--text); }
.comp-toggle small { display: block; font-size: 12px; color: var(--text-mid); line-height: 1.5; margin-top: 2px; }
.badge-free {
    background: rgba(200, 151, 58, 0.18); color: var(--gold);
    font-weight: 700;
}

/* ---------- Γλώσσα & θέμα: ίδια κουμπιά με την αρχική σελίδα ----------
   Το .nav-icon-btn του style.css είναι φτιαγμένο για σκούρα κεφαλίδα·
   εδώ η κεφαλίδα είναι ανοιχτή, οπότε αλλάζει μόνο το χρώμα. */
.dash-header .nav-icon-btn { color: var(--text-mid); }
.dash-header .nav-icon-btn:hover { background: var(--green-xlight); color: var(--green); }

/* ---------- Header pills (γλώσσα, θέμα, χρήστης) ---------- */
.hdr-pill {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid var(--border); background: var(--bg-white);
    border-radius: 50px; padding: 9px 15px; cursor: pointer;
    font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
    color: var(--text); transition: var(--transition);
}
.hdr-pill:hover { border-color: var(--green); }
.hdr-pill > i { color: var(--text-mid); font-size: 13px; }
.hdr-pill .caret { font-size: 10px; color: var(--text-light); }

.hdr-drop { position: relative; }
.hdr-drop-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: 13px; box-shadow: var(--shadow-md);
    padding: 6px; min-width: 165px; display: none; z-index: 700;
}
.hdr-drop-menu.open { display: block; }
.hdr-drop-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 13px; border: none; background: none; border-radius: 9px;
    cursor: pointer; font-family: var(--font-body); font-size: 13.5px;
    color: var(--text-mid); text-align: left; transition: var(--transition);
}
.hdr-drop-item i { width: 15px; text-align: center; color: var(--text-light); }
.hdr-drop-item:hover { background: var(--bg); color: var(--text); }
.hdr-drop-item.active { color: var(--green); font-weight: 700; }
.hdr-drop-item.active i { color: var(--green); }
.hdr-drop-item.danger { color: #c0392b; }
.hdr-drop-item.danger i { color: #c0392b; }
.hdr-drop-item.danger:hover { background: rgba(192, 57, 43, 0.08); color: #c0392b; }

/* Διακόπτης dark/light */
.theme-switch { gap: 10px; }
.switch-track {
    width: 36px; height: 19px; border-radius: 10px;
    background: var(--border); position: relative; transition: var(--transition);
    flex-shrink: 0;
}
.switch-track::after {
    content: ''; position: absolute; top: 2.5px; left: 3px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: var(--transition);
}
.theme-switch.on .switch-track { background: var(--green); }
.theme-switch.on .switch-track::after { transform: translateX(16px); }

/* Κάρτα χρήστη στο header */
.hdr-user { padding: 5px 13px 5px 6px; }
.hdr-user .avatar-chip { width: 33px; height: 33px; font-size: 11.5px; }
.hdr-user-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.hdr-user-name { font-weight: 700; font-size: 13px; color: var(--text); }
.hdr-user-role { font-size: 10.5px; color: var(--text-light); }

/* Κουμπί μενού (μόνο σε μικρές οθόνες) */
.menu-toggle-btn { display: none; padding: 9px 13px; }

/* ---------- Καμπανάκι ειδοποιήσεων ---------- */
.hdr-bell { position: relative; padding: 9px 13px; }
.bell-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--gold); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
    border-radius: 9px; display: none; align-items: center; justify-content: center;
    padding: 0 5px; border: 2px solid var(--bg-white);
}
.bell-badge.show { display: inline-flex; }
.notif-menu { min-width: 300px; max-width: 340px; max-height: 340px; overflow-y: auto; }
.notif-head {
    font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-light); padding: 8px 13px 6px;
}
.notif-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 13px; border-radius: 9px; font-size: 13px;
    color: var(--text-mid); line-height: 1.45;
}
.notif-item:hover { background: var(--bg); }
.notif-item i { margin-top: 3px; font-size: 12px; color: var(--green); width: 15px; text-align: center; }
.notif-item.unread { font-weight: 600; color: var(--text); }
.notif-item.unread::after {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold); margin-top: 6px; margin-left: auto; flex-shrink: 0;
}
.notif-item small { display: block; font-weight: 400; font-size: 11px; color: var(--text-light); margin-top: 2px; }
.notif-empty { padding: 18px 13px; text-align: center; font-size: 13px; color: var(--text-light); }

/* ---------- Προειδοποίηση λήξης συνδρομής ---------- */
.warn-strip {
    background: rgba(200, 151, 58, 0.12);
    border: 1px solid var(--gold);
    align-items: center;
}
.warn-strip i { color: var(--gold); }
.warn-strip .btn-primary { margin-left: auto; padding: 7px 16px; font-size: 12.5px; flex-shrink: 0; }

/* ---------- Παράθυρο πληρωμής (τραπεζική κατάθεση) ---------- */
.pay-summary {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
    background: var(--green-xlight); border: 1px solid var(--green-light);
    border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 20px;
    font-size: 13.5px; color: var(--text-mid);
}
.pay-summary strong { color: var(--text); }
.pay-total strong { color: var(--green); font-size: 16px; font-family: var(--font-display); }

/* Ο κωδικός πληρωμής: χωρίς αυτόν η κατάθεση δεν αντιστοιχίζεται σε
   λογαριασμό, γι' αυτό τονίζεται περισσότερο από οτιδήποτε άλλο. */
.pay-ref-box {
    background: rgba(200, 151, 58, 0.12);
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 13px 16px; margin-bottom: 18px;
}
.pay-ref-label {
    display: block; font-size: 11.5px; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--text-mid); margin-bottom: 8px;
}
.pay-ref-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pay-ref-row code {
    font-family: var(--font-display, monospace);
    font-size: 21px; font-weight: 700; letter-spacing: 1.5px;
    color: var(--text); word-break: break-all;
}

/* Στοιχεία λογαριασμού: ετικέτα αριστερά, τιμή δεξιά, μία γραμμή ανά
   πεδίο - ώστε να αντιγράφεται σωστά και από κινητό. */
.pay-bank { margin: 0; }
.pay-bank > div {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 0; border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}
.pay-bank > div:last-child { border-bottom: none; }
.pay-bank dt {
    flex: 0 0 108px; color: var(--text-light);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px;
}
.pay-bank dd {
    margin: 0; flex: 1 1 160px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    color: var(--text); font-weight: 600;
}
.pay-bank dd code {
    font-family: var(--font-display, monospace);
    font-size: 14.5px; letter-spacing: 0.8px; word-break: break-all;
}

.pay-copy {
    padding: 5px 11px; font-size: 11.5px;
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}

.pay-note {
    display: flex; gap: 9px; align-items: flex-start;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px; color: var(--text-light); line-height: 1.6;
}
.pay-note i { color: var(--green); margin-top: 2px; font-size: 13px; }

/* ---------- Φωτογραφίες μέσα στη διόρθωση προϊόντος (admin) ---------- */
.ap-photos-title {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-display); font-size: 16px;
    margin: 4px 0 6px; color: var(--text);
    padding-top: 18px; border-top: 1px solid var(--border);
}
.ap-photos-title i { color: var(--green); font-size: 14px; }

.ap-photo-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px; margin: 14px 0;
}
.ap-photo {
    position: relative; aspect-ratio: 1;
    border-radius: var(--radius-sm); overflow: hidden;
    border: 2px solid var(--border); background: var(--bg);
}
/* Η κύρια φωτογραφία ξεχωρίζει με πράσινο περίγραμμα - είναι αυτή που
   βλέπει ο κόσμος στις λίστες, οπότε πρέπει να φαίνεται ποια είναι. */
.ap-photo.is-main { border-color: var(--green); }
.ap-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Τα κουμπιά εμφανίζονται στο πέρασμα του ποντικιού· σε οθόνη αφής
   (όπου δεν υπάρχει hover) μένουν πάντα ορατά. */
.ap-photo-acts {
    position: absolute; inset: auto 0 0 0;
    display: flex; justify-content: center; gap: 6px;
    padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,0.75));
    opacity: 0; transition: var(--transition);
}
.ap-photo:hover .ap-photo-acts { opacity: 1; }
@media (hover: none) { .ap-photo-acts { opacity: 1; } }
.ap-photo-acts .icon-btn {
    width: 30px; height: 30px; font-size: 12px;
    background: rgba(255,255,255,0.92); color: #333;
}

/* Φωτογραφία σε αναμονή: ΔΕΝ τη βλέπει το κοινό - το λέμε ρητά */
.ap-photo-status {
    position: absolute; top: 6px; left: 6px;
    background: var(--gold); color: #241c07;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    padding: 2px 7px; border-radius: 50px; letter-spacing: 0.3px;
}

/* ---------- Κουμπί διακοπής συνδρομής ---------- */
.sub-cancel-btn {
    margin-top: 16px; border-color: #c0392b; color: #c0392b;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; padding: 9px 18px;
}
.sub-cancel-btn:hover { background: rgba(192, 57, 43, 0.08); }
[data-theme="dark"] .sub-cancel-btn { border-color: #e57368; color: #e57368; }

/* ---------- Μπάρες στατιστικών ---------- */
.stat-bar-wrap { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.stat-bar {
    flex: 1; height: 7px; border-radius: 4px; background: var(--bg);
    overflow: hidden; border: 1px solid var(--border);
}
.stat-bar span { display: block; height: 100%; background: var(--green); border-radius: 4px; }

/* ---------- Layout (περιεχόμενο δεξιά από το σταθερό sidebar) ---------- */
.dash-layout {
    margin-left: 258px;
    padding: 26px 30px 50px;
    max-width: 1240px;
}
.dash-main { width: 100%; }

/* ---------- ΣΤΑΘΕΡΟ SIDEBAR (ανοιχτόχρωμο, πλήρους ύψους) ---------- */
.dash-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 258px; z-index: 600;
    background: var(--bg-white);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 3px;
    padding: 18px 14px;
    overflow-y: auto;
    /* Η ροδέλα πάνω στο μενού δεν «περνά» στη σελίδα από πίσω */
    overscroll-behavior: contain;
}
.dash-sidebar::-webkit-scrollbar { width: 6px; }
.dash-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.side-brand {
    display: flex; align-items: center; gap: 11px;
    padding: 4px 8px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
    text-decoration: none; cursor: pointer;
    border-radius: 10px; transition: var(--transition);
}
.side-brand:hover { background: var(--bg); }
.side-brand-name {
    font-family: var(--font-display); font-size: 19px; font-weight: 700;
    color: var(--text); letter-spacing: -0.3px; line-height: 1.1; display: block;
}
.side-brand-name em { color: var(--green); font-style: normal; }
.side-brand small {
    display: block; font-size: 8.5px; letter-spacing: 2.2px;
    color: var(--text-light); font-weight: 700; margin-top: 2px;
}

.side-user {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 12px; margin-bottom: 12px;
}
.side-user strong { display: block; font-size: 13px; color: var(--text); line-height: 1.2; }
.side-user small {
    font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--text-light); font-weight: 700;
}

.side-group-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--text-light);
    padding: 12px 10px 6px;
}

.dash-nav-btn {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px; border: none; border-radius: 10px;
    background: transparent; cursor: pointer; text-align: left;
    font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
    color: var(--text-mid); transition: var(--transition); width: 100%;
}
.dash-nav-btn i { width: 18px; text-align: center; color: var(--text-light); transition: var(--transition); }
.dash-nav-btn:hover { background: var(--bg); color: var(--text); }
.dash-nav-btn:hover i { color: var(--green); }
.dash-nav-btn.active { background: var(--green-deeper); color: #fff; font-weight: 700; }
.dash-nav-btn.active i { color: var(--green-light); }
.dash-nav-btn .badge-dot {
    margin-left: auto; background: var(--gold); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
    border-radius: 9px; display: none; align-items: center; justify-content: center; padding: 0 5px;
}
.dash-nav-btn .badge-dot.show { display: inline-flex; }

.side-logout {
    margin-top: auto;
    display: flex; align-items: center; gap: 11px;
    padding: 13px; border: none;
    background: transparent; cursor: pointer; text-align: left;
    font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
    color: #c0392b; transition: var(--transition); width: 100%;
    border-top: 1px solid var(--border);
    border-radius: 0 0 10px 10px; padding-top: 16px;
}
.side-logout:hover { background: rgba(192, 57, 43, 0.08); }
[data-theme="dark"] .side-logout { color: #e57368; }

/* ---------- Sections ---------- */
.dash-section { display: none; }
.dash-section.active { display: block; animation: dashFade 0.3s ease; }
@keyframes dashFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dash-section-title {
    font-family: var(--font-display); font-size: 24px; font-weight: 700;
    color: var(--text); margin-bottom: 18px;
}

/* ---------- Stat cards ---------- */
.stat-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
.stat-card {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
}
.stat-card-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    background: var(--green-xlight); color: var(--green);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.stat-card-icon.gold { background: rgba(200,151,58,0.15); color: var(--gold); }
.stat-card-num { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1; }
.stat-card-label { font-size: 12px; color: var(--text-light); }

/* ---------- Cards / panels ---------- */
.dash-card {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px;
}
.dash-card h3 {
    font-family: var(--font-display); font-size: 18px; color: var(--text);
    margin-bottom: 14px; display: flex; align-items: center; gap: 9px;
}
.dash-card h3 i { color: var(--green); font-size: 16px; }
.dash-hint { font-size: 12.5px; color: var(--text-light); margin-top: 10px; line-height: 1.6; }

/* ---------- Toolbar ---------- */
.dash-toolbar {
    display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
}
.dash-toolbar .filter-search-wrap { flex: 1; min-width: 180px; }
.dash-toolbar .filter-select { flex: 0 0 auto; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.dash-table th {
    text-align: left; padding: 11px 14px; background: var(--bg);
    color: var(--text-light); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dash-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text-mid); vertical-align: middle; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table tr:hover td { background: var(--bg); }
.dash-table .strong { color: var(--text); font-weight: 600; }
.row-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 50px; white-space: nowrap;
}
.badge-ok     { background: rgba(92,138,45,0.15);  color: var(--green); }
.badge-warn   { background: rgba(200,151,58,0.16); color: var(--gold); }
.badge-danger { background: rgba(192,57,43,0.14);  color: #c0392b; }
.badge-muted  { background: var(--bg); color: var(--text-light); border: 1px solid var(--border); }
[data-theme="dark"] .badge-danger { color: #e57368; }

/* ---------- Action buttons ---------- */
.icon-btn {
    width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer;
    background: var(--bg); color: var(--text-mid); font-size: 12.5px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition); margin-right: 4px;
}
.icon-btn:hover { background: var(--green-xlight); color: var(--green); }
.icon-btn.danger:hover { background: rgba(192,57,43,0.15); color: #c0392b; }
.icon-btn.gold:hover, .icon-btn.gold.active { background: rgba(200,151,58,0.18); color: var(--gold); }
.row-select {
    padding: 6px 8px; font-size: 12.5px; border: 1px solid var(--border);
    border-radius: 7px; background: var(--bg-white); color: var(--text);
    font-family: var(--font-body); cursor: pointer;
}

/* ---------- Photos manager ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-bottom: 16px; }
.photo-item {
    position: relative; border-radius: var(--radius-sm); overflow: hidden;
    border: 1.5px solid var(--border); aspect-ratio: 1; background: var(--bg);
}
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-item.is-main { border-color: var(--green); }
.photo-main-tag {
    position: absolute; top: 6px; left: 6px; background: var(--green); color: #fff;
    font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 50px;
}
.photo-item-actions {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px; padding: 6px;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
}
/* Το φόντο του κουμπιού είναι ΠΑΝΤΑ λευκό, οπότε το εικονίδιο πρέπει να
   είναι σταθερά σκούρο. Με var(--text) γινόταν σχεδόν λευκό στο σκούρο
   θέμα και τα κουμπιά φαίνονταν σαν άδειοι λευκοί κύκλοι. */
.photo-item-actions button {
    width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,0.9); color: var(--green-deeper); font-size: 11px;
    display: flex; align-items: center; justify-content: center;
}
.photo-item-actions button:hover { background: #fff; }
.quota-note { font-size: 12.5px; color: var(--text-light); margin-bottom: 12px; }
.quota-note strong { color: var(--green); }

.file-input { font-size: 13px; color: var(--text-mid); margin-bottom: 12px; display: block; width: 100%; }

/* ---------- Subscription plans ---------- */
.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1080px) { .plan-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .plan-cards { grid-template-columns: 1fr; } }

/* ---------- ΦΠΑ + πακέτο Platinum ---------- */
.vat-note { font-size: 11.5px; font-weight: 600; color: var(--text-light); letter-spacing: 0.3px; }
.plan-card h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coop-tag {
    display: inline-flex; align-items: center;
    background: var(--green-xlight); color: var(--green-dark);
    border: 1px solid var(--green-light);
    font-size: 9px; font-weight: 800; letter-spacing: 0.7px;
    padding: 2px 7px; border-radius: 20px;
}
[data-theme="dark"] .coop-tag { color: var(--green-light); }
/* Κλειδωμένο Platinum: παραμένει ορατό (είναι πληροφορία), αλλά δηλώνει
   καθαρά ότι δεν είναι διαθέσιμο χωρίς πιστοποίηση. */
.plan-card.is-locked { opacity: 0.72; }
.plan-card.is-locked button[data-plan] { opacity: 0.5; cursor: not-allowed; }
.coop-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 10px; font-size: 12px; line-height: 1.5;
    color: var(--text-light);
}
.coop-note i { margin-top: 2px; }
.plan-card {
    border: 1.5px solid var(--border); border-radius: var(--radius);
    padding: 20px; background: var(--bg); transition: var(--transition);
}
.plan-card.current { border-color: var(--green); background: var(--green-xlight); }
.plan-card h4 { font-family: var(--font-display); font-size: 18px; color: var(--text); margin-bottom: 4px; }
.plan-card .plan-price { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--green); margin-bottom: 8px; }
.plan-card .plan-price small { font-size: 13px; color: var(--text-light); font-family: var(--font-body); font-weight: 400; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 14px; }
.plan-card ul li { font-size: 13px; color: var(--text-mid); padding: 3px 0; display: flex; gap: 8px; align-items: center; }
.plan-card ul li i { color: var(--green); font-size: 12px; }

/* ---------- Empty / info ---------- */
.empty-note {
    text-align: center; color: var(--text-light); font-size: 14px;
    padding: 34px 16px;
}
.empty-note i { display: block; font-size: 30px; margin-bottom: 10px; color: var(--border); }

.info-strip {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--green-xlight); border: 1px solid var(--green-light);
    border-radius: var(--radius-sm); padding: 12px 16px;
    font-size: 13px; color: var(--text-mid); line-height: 1.6; margin-bottom: 18px;
}
.info-strip i { color: var(--green); margin-top: 2px; }

/* ---------- Στοιχεία τρέχουσας συνδρομής ---------- */
.sub-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-light); margin-bottom: 8px; }
.sub-meta i { color: var(--green); margin-right: 4px; }

/* ---------- CSV import results ---------- */
.import-result { margin-top: 12px; font-size: 13px; }
.import-result ul { margin: 8px 0 0; padding-left: 18px; color: #c0392b; }
[data-theme="dark"] .import-result ul { color: #e57368; }

/* ---------- Avatar (εικόνα προφίλ / αρχικά) ---------- */
.avatar-chip {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
    overflow: hidden; border: 2px solid var(--green-xlight);
}
.avatar-chip img, .avatar-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-big {
    width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0;
    background: var(--green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 700; letter-spacing: 1px;
    font-family: var(--font-display);
    overflow: hidden; border: 3px solid var(--green-xlight);
    box-shadow: var(--shadow-sm);
}
.avatar-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.avatar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avatar-actions .dash-hint { width: 100%; margin-top: 2px; }
.avatar-remove-btn { border-color: #c0392b; color: #c0392b; }
.avatar-remove-btn:hover { background: rgba(192,57,43,0.1); }

/* ---------- Φωτογραφία εξωφύλλου ---------- */
.cover-preview {
    width: 100%; aspect-ratio: 16 / 5; min-height: 120px;
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    background: var(--bg); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.cover-preview.has-img { border-style: solid; position: relative; }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Σε αναμονή έγκρισης: θαμπή + ετικέτα, ώστε να μη νομίζει ο παραγωγός ότι είναι ήδη δημόσια */
.cover-preview.is-pending img { opacity: 0.45; filter: grayscale(0.35); }
.cover-flag {
    position: absolute; top: 10px; left: 10px;
    background: var(--gold); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
    border-radius: 20px; padding: 5px 12px;
}
/* Ένδειξη αναμονής στο avatar του ίδιου του χρήστη */
.avatar-big.is-pending img { opacity: 0.45; filter: grayscale(0.35); }
.pending-flag {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(200,151,58,0.16); color: #8A6420;
    border: 1px solid var(--gold); border-radius: 20px; padding: 6px 13px;
    font-size: 12px; font-weight: 700;
}
[data-theme="dark"] .pending-flag { color: var(--gold-light); }

/* Ετικέτα είδους στον έλεγχο του διαχειριστή */
.review-kind {
    display: inline-block; margin-bottom: 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    background: var(--green-xlight); color: var(--green-dark);
    border-radius: 20px; padding: 3px 9px;
}
[data-theme="dark"] .review-kind { color: var(--green-light); }
.photo-review-item.is-cover .review-kind { background: rgba(200,151,58,0.18); color: #8A6420; }
[data-theme="dark"] .photo-review-item.is-cover .review-kind { color: var(--gold-light); }
.photo-review-item.is-avatar .review-kind { background: rgba(70,120,200,0.16); color: #2C5AA0; }
[data-theme="dark"] .photo-review-item.is-avatar .review-kind { color: #7FA8E0; }
/* Η εικόνα προφίλ φαίνεται στρογγυλή και στον έλεγχο */
.photo-review-item.is-avatar img { border-radius: 50%; width: 96px; height: 96px; margin: 12px auto 0; display: block; }
.cover-empty { font-size: 13px; color: var(--text-light); text-align: center; padding: 0 16px; }
.cover-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cover-actions .dash-hint { width: 100%; margin-top: 2px; }

/* ---------- Ορατότητα στοιχείων στο δημόσιο προφίλ ---------- */
.visibility-box {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px;
}
.visibility-box > strong { display: block; font-size: 13.5px; color: var(--text); }
.visibility-box .dash-hint { margin: 4px 0 10px; }
.vis-item {
    display: inline-flex; align-items: center; gap: 8px;
    margin-right: 18px; font-size: 13.5px; color: var(--text-mid); cursor: pointer;
}
.vis-item input { cursor: pointer; }
.vis-item:has(input:checked) { color: var(--green); font-weight: 600; }

/* ---------- Επισκόπηση: πλέγμα 2x2 σε ΙΣΑ κελιά ----------
       Ημερολόγιο | Προϊόν
       Καιρός     | Χάρτης
   Οι δύο στήλες μοιράζονται το πλάτος (1fr/1fr) και τα κελιά κάθε σειράς
   τεντώνονται στο ίδιο ύψος (align-items: stretch, η προεπιλογή). */
.overview-top {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; margin-bottom: 20px;
}
.overview-top > .dash-card { margin-bottom: 0; display: flex; flex-direction: column; }
/* Μέσα στο πλέγμα ο καιρός δεν είναι πια στενός - γεμίζει το κελί του */
.overview-top .wx-card { max-width: none; }
@media (max-width: 1020px) { .overview-top { grid-template-columns: 1fr; } }

/* ---------- Κάρτα προϊόντος στην αρχική οθόνη ---------- */
.spot-card { display: flex; flex-direction: column; }
.spot-card h3 { justify-content: flex-start; }
.spot-count {
    margin-left: auto; font-family: var(--font-body);
    font-size: 12px; font-weight: 700; color: var(--text-light);
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 20px; padding: 3px 10px;
}
.spot-photo {
    position: relative; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg); height: 200px; margin-bottom: 14px;
}
.spot-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-photos {
    position: absolute; right: 10px; bottom: 10px;
    background: rgba(8,18,10,0.6); color: #fff;
    font-size: 11.5px; font-weight: 600; border-radius: 20px; padding: 4px 10px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.spot-info h4 { font-family: var(--font-display); font-size: 19px; color: var(--text); }
.spot-cat {
    display: inline-block; margin-top: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--green);
}
.spot-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.spot-price { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); }
.spot-price small { font-size: 13px; font-weight: 400; color: var(--text-light); }
.spot-desc {
    margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-mid);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Τα κουμπιά κολλάνε στο κάτω μέρος, ώστε η κάρτα να ισοφαρίζει
   το ύψος της αριστερής στήλης χωρίς να «χορεύουν» ανά προϊόν. */
.spot-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; }
.spot-actions button { flex: 1 1 auto; justify-content: center; }

.cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.cal-head strong { font-size: 14.5px; color: var(--text); text-transform: capitalize; }
.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-wd {
    text-align: center; font-size: 10px; font-weight: 700;
    color: var(--text-light); text-transform: uppercase; padding: 4px 0;
}
/* Τα κελιά ήταν ΤΕΤΡΑΓΩΝΑ (aspect-ratio: 1): όσο φάρδαινε η κάρτα, τόσο
   ψήλωναν κι αυτά, και το ημερολόγιο ξεπερνούσε το διπλάσιο του καιρού.
   Πλέον το πλάτος ακολουθεί την κάρτα, το ύψος μένει σταθερά χαμηλό. */
.cal-day {
    position: relative; min-height: 46px; border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--bg); font-size: 12px; color: var(--text-mid);
}
.cal-day.empty { background: transparent; }
.cal-day b { font-weight: 500; }
.cal-day.today { background: var(--green); color: #fff; }
.cal-day.today b { font-weight: 700; }
.cal-dots { display: flex; gap: 3px; height: 6px; margin-top: 2px; }
.cal-dot {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.dot-product { background: var(--green-light); }
.dot-sub { background: var(--gold); }
.cal-day.today .dot-product { background: #fff; }
.cal-legend {
    display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;
    font-size: 11.5px; color: var(--text-light);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Χάρτες dashboard ---------- */
/* Η κάρτα του χάρτη είναι στήλη flex και ο χάρτης παίρνει ΟΛΟ τον
   υπόλοιπο χώρο, ώστε να μη μένει κενό μέσα στο περίγραμμα - έτσι
   ισοφαρίζει και το ύψος της διπλανής κάρτας του καιρού. */
#dashMap { flex: 1 1 auto; min-height: 320px; border-radius: var(--radius-sm); }
/* Ο ΔΙΑΧΕΙΡΙΣΤΗΣ κρατά τον χάρτη σε όλο το πλάτος, κάτω από το πλέγμα.
   (Ο παραγωγός τον έχει πλέον μέσα στο πλέγμα, δίπλα στον καιρό.) */
.map-card-full { display: flex; flex-direction: column; margin-bottom: 20px; }
.map-card-full #dashMap { min-height: 520px; }
@media (max-width: 1020px) { .map-card-full #dashMap { min-height: 380px; } }
#dashMap.leaflet-container { box-shadow: none; border: 1px solid var(--border); }
/* Τρεις φόρμες επιλέγουν σημείο: προϊόν παραγωγού, προϊόν διαχειριστή,
   έδρα πελάτη. Ίδια εμφάνιση και στις τρεις. */
#pickMap, #apPickMap, #ufPickMap {
    height: 240px; border-radius: var(--radius-sm); margin-top: 8px;
}
#pickMap.leaflet-container,
#apPickMap.leaflet-container,
#ufPickMap.leaflet-container { box-shadow: none; border: 1.5px solid var(--border); }

/* Μονάδα μέτρησης: αριθμός + λίστα (kg/ml) δίπλα-δίπλα */
.unit-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; }
/* Πεδία συντεταγμένων */
.coord-row { margin-top: 4px; }
.coord-row .form-group { margin-bottom: 8px; }
.coord-row label { font-size: 12px; }
.coord-hint { margin: 0 0 10px; display: flex; gap: 7px; align-items: flex-start; }
.coord-hint i { color: var(--green); margin-top: 3px; }
.form-input.input-error {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.pick-clear-btn {
    margin-top: 8px; font-size: 12px; padding: 6px 14px;
    border-color: var(--border); color: var(--text-mid);
}
.pick-clear-btn:hover { border-color: #c0392b; color: #c0392b; background: transparent; }

/* ---------- Σημειώσεις ημερολογίου (pins) ---------- */
.cal-day { cursor: pointer; transition: var(--transition); }
.cal-day:hover:not(.empty):not(.today) { background: var(--green-xlight); }
.cal-day.empty { cursor: default; }
.cal-day.selected { outline: 2px solid var(--green); outline-offset: -2px; }
.dot-note { background: #3b82f6; }
.cal-day.today .dot-note { background: #fff; }

.note-panel { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.note-panel-title {
    font-size: 13px; font-weight: 700; color: var(--text);
    margin-bottom: 9px; display: flex; align-items: center; gap: 8px;
}
.note-panel-title i { color: #3b82f6; font-size: 12px; }
.note-panel-title span:last-child { color: var(--text-light); font-weight: 500; }
.note-list {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 10px; max-height: 150px; overflow-y: auto;
}
.note-item {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--bg); border-radius: 8px; padding: 8px 11px;
    font-size: 12.5px; color: var(--text-mid);
}
.note-item > i { color: #3b82f6; margin-top: 3px; font-size: 10px; }
.note-item span { flex: 1; line-height: 1.5; word-break: break-word; }
.note-item button {
    border: none; background: none; color: var(--text-light);
    cursor: pointer; font-size: 11px; padding: 2px 4px; transition: var(--transition);
}
.note-item button:hover { color: #c0392b; }
.note-form { display: flex; gap: 8px; }
.note-form .form-input { flex: 1; padding: 9px 13px; font-size: 13px; }
.note-form .btn-primary { padding: 8px 16px; font-size: 12.5px; flex-shrink: 0; }

/* ---------- Responsive: το μενού γίνεται κάθετη στήλη-DRAWER από τα ΑΡΙΣΤΕΡΑ (☰) ---------- */
@media (max-width: 880px) {
    .dash-header { margin-left: 0; padding: 0 14px; }
    .dash-layout { margin-left: 0; padding: 20px 16px 40px; }
    .menu-toggle-btn { display: inline-flex; }
    .hdr-user-text { display: none; }
    .dash-title { font-size: 18px; }

    /* Κάθετη στήλη που ανοίγει από τα αριστερά (drawer) */
    .dash-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; right: auto;
        width: min(80vw, 258px); z-index: 650;
        border-right: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        padding: 18px 14px;
        max-height: none; overflow-y: auto;
        transform: translateX(-105%);
        transition: transform 0.32s var(--ease);
    }
    .dash-sidebar.open { transform: translateX(0); }
    .side-brand { display: flex; }
}

/* ============================================================
   ΚΙΝΗΤΟ – τα δύο dashboards (παραγωγού & διαχειριστή)
   ============================================================ */
@media (max-width: 720px) {

    /* ---- Κεφαλίδα ----
       Το flex-wrap έστελνε την κάρτα χρήστη σε δεύτερη γραμμή, ενώ η
       κεφαλίδα έχει σταθερό ύψος 66px: το avatar κρεμόταν μισό απ' έξω
       και ο τίτλος κοβόταν σε «Τα Προϊόντ...». */
    .dash-header { padding: 0 10px; gap: 8px; }
    .dash-header-actions { flex-wrap: nowrap; gap: 4px; }
    .dash-header-left { flex: 1 1 auto; min-width: 0; }
    .dash-title { font-size: 15.5px; }
    .dash-header .nav-icon-btn { width: 34px; height: 34px; font-size: 13px; }
    .hdr-pill { padding: 5px 8px; gap: 5px; }
    .hdr-user { padding: 3px 7px 3px 3px; }
    .hdr-user .avatar-chip { width: 28px; height: 28px; font-size: 10.5px; }
    /* Η γλώσσα και το θέμα μένουν· το βελάκι του χρήστη περισσεύει */
    .hdr-user .fa-chevron-down { display: none; }

    /* ---- Αναδυόμενα μενού κεφαλίδας ----
       Ήταν αγκυρωμένα ΔΕΞΙΑ πάνω στο κουμπί τους. Σε οθόνη υπολογιστή
       σωστό· σε κινητό όχι: το κουμπί των ειδοποιήσεων είναι 34px και
       το μενού 300px, οπότε το μενού κρεμόταν 266px προς τα αριστερά.
       Μετρημένο σε οθόνη 375px: η αριστερή του άκρη έπεφτε στο -55px,
       δηλαδή 55 pixel ΕΞΩ από την οθόνη, με 130px κενό δεξιά.

       Λύση: σε κινητό δεν κρέμονται από το κουμπί αλλά από το ΠΑΡΑΘΥΡΟ.
       Το position:fixed δουλεύει εδώ γιατί η κεφαλίδα είναι sticky και
       ΔΕΝ έχει transform/filter - αλλιώς θα γινόταν αυτή το πλαίσιο
       αναφοράς και δεν θα άλλαζε τίποτα. */
    .hdr-drop-menu {
        position: fixed;
        top: 60px;                 /* κάτω από την κεφαλίδα των 66px */
        right: 10px; left: auto;
        max-width: calc(100vw - 20px);
        min-width: 0;
    }
    /* Οι ειδοποιήσεις έχουν μεγάλο κείμενο: πιάνουν όλο το πλάτος */
    .notif-menu {
        left: 10px; right: 10px;
        width: auto; max-width: none;
        max-height: min(60vh, 420px);
    }

    /* ---- Πλακίδια στατιστικών ----
       Ήταν μία στήλη: 7 κάρτες στον admin σήμαιναν μισό μέτρο κύλισης
       πριν φανεί οτιδήποτε άλλο, με το μισό πλάτος άδειο. */
    .stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
    .stat-card {
        flex-direction: column; align-items: flex-start;
        gap: 8px; padding: 13px 13px;
    }
    .stat-card-icon { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
    .stat-card-num { font-size: 19px; }
    .stat-card-label { font-size: 11px; line-height: 1.35; }

    /* ---- Πίνακες -> κάρτες ----
       Με 9 στήλες (χρήστες admin) κρύβονταν 709 από 1087 pixel, μαζί
       με όλα τα κουμπιά ενεργειών. Κάθε γραμμή γίνεται κάρτα και κάθε
       κελί παίρνει την επικοινωνία της στήλης του ως ετικέτα
       (labelTableCells στο common.js). */
    .table-wrap { overflow: visible; border: none; border-radius: 0; }
    .dash-table { display: block; min-width: 0; font-size: 14px; }
    .dash-table thead { display: none; }
    .dash-table tbody { display: block; }
    .dash-table tr {
        display: block; background: var(--bg-white);
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        padding: 10px 14px; margin-bottom: 12px;
    }
    .dash-table tr:hover td { background: none; }
    /* justify-content: flex-end + margin-right:auto στην ετικέτα.
       Με space-between, ένα κελί που έχει ΔΥΟ τιμές (π.χ. όνομα +
       username) τις σκόρπιζε στις άκρες· έτσι η ετικέτα μένει αριστερά
       και όλες οι τιμές μαζεύονται δεξιά, μαζί. */
    .dash-table td {
        display: flex; align-items: center; justify-content: flex-end;
        flex-wrap: wrap; gap: 4px 10px; padding: 8px 0; text-align: right;
        border-bottom: 1px solid var(--border); color: var(--text-mid);
    }
    .dash-table tr td:last-child { border-bottom: none; }
    .dash-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto; margin-right: auto; text-align: left;
        font-size: 10.5px; font-weight: 700; letter-spacing: 0.7px;
        text-transform: uppercase; color: var(--text-light);
    }
    /* Το <br> μέσα σε κελί (όνομα + πλήθος φωτογραφιών) δεν έχει νόημα
       εδώ - τα δύο κομμάτια μπαίνουν το ένα δίπλα στο άλλο. */
    .dash-table td br { display: none; }
    /* Η μικρογραφία πάει πάνω-πάνω, χωρίς ετικέτα */
    .dash-table td.td-thumb { justify-content: flex-start; padding-top: 2px; }
    .dash-table td.td-thumb::before { content: none; }
    .dash-table td.td-thumb .row-thumb { width: 58px; height: 58px; }
    /* Τα κουμπιά ενεργειών απλώνονται στο πλάτος της κάρτας */
    .dash-table td.td-actions { justify-content: flex-end; flex-wrap: wrap; padding-top: 12px; }
    .dash-table td.td-actions::before { content: none; }
    .dash-table td.td-actions .icon-btn { width: 38px; height: 38px; }
    /* Η γραμμή «δεν υπάρχουν εγγραφές» δεν είναι κάρτα */
    .dash-table td[colspan] { display: block; text-align: center; border: none; }
    .dash-table tr:has(td[colspan]) { border: none; background: none; padding: 0; }
}

/* ---------- Χονδρική & εταιρικά στοιχεία (dashboard επιχείρησης) ---------- */
.biz-fieldset {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 14px 16px 4px; margin-bottom: 16px; background: var(--bg);
}
.biz-fieldset-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--text-mid); margin-bottom: 12px;
}
.biz-fieldset-title i { color: var(--green); font-size: 13px; }
.biz-hint { display: block; font-size: 12px; color: var(--text-light); line-height: 1.5; margin-bottom: 12px; }

/* ---------- Έλεγχος περιεχομένου φωτογραφιών (διαχειριστής) ---------- */
.photo-review-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px; margin-top: 16px;
}
.photo-review-item {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden; background: var(--bg-white);
}
.photo-review-item img {
    width: 100%; height: 175px; object-fit: cover; display: block;
    background: var(--bg);
}
.photo-review-info { padding: 11px 13px 4px; }
.photo-review-info strong { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 4px; }
.photo-review-info small {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--text-light); margin-bottom: 2px;
}
.photo-review-info small i { width: 12px; text-align: center; }
.photo-review-actions { display: flex; gap: 8px; padding: 10px 13px 13px; }
.photo-review-actions button { flex: 1; justify-content: center; padding: 8px 10px; font-size: 12.5px; }
.photo-review-actions .danger-btn { border-color: #c0392b; color: #c0392b; }
.photo-review-actions .danger-btn:hover { background: rgba(192,57,43,0.08); }

/* Σήμανση «σε αναμονή» στις φωτογραφίες του παραγωγού */
.photo-item.is-pending img { opacity: 0.5; filter: grayscale(0.35); }
.photo-pending-tag {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: var(--gold); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    padding: 3px 8px; border-radius: 20px;
}

/* ---------- Εύρεση σημείου από διεύθυνση + ΤΚ ---------- */
.addr-row { margin-bottom: 8px; }
.addr-row .form-group { margin-bottom: 0; }
.addr-postcode { max-width: 130px; }
.addr-find-btn {
    border-color: var(--green); color: var(--green);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; font-size: 13.5px; margin-bottom: 6px;
}
.addr-find-btn:hover { background: var(--green-xlight); }
.addr-find-btn.is-loading { opacity: 0.6; pointer-events: none; }
.addr-find-btn.is-loading i { animation: addrSpin 0.9s linear infinite; }
@keyframes addrSpin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .addr-postcode { max-width: none; } }

/* ---------- Κάρτα καιρού (Open-Meteo) ---------- */
/* Μικρό κουτάκι: δεν πιάνει ολόκληρη τη γραμμή */
.wx-card { max-width: 400px; }
@media (max-width: 520px) { .wx-card { max-width: none; } }
.wx-card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Μέσα στο πλέγμα της αρχικής οθόνης, ο πίνακας του καιρού γεμίζει ΟΛΟ
   το κουτί του - όπως ακριβώς ο χάρτης στη διπλανή κάρτα: ίδια γωνία,
   ίδιο «τέντωμα» μέχρι τα περιθώρια. */
.overview-top .wx-card #weatherBody {
    flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
.overview-top .wx-card .wx-hero {
    flex: 1 1 auto; border-radius: var(--radius-sm);
}
/* Ο κεντρικός αριθμός κρατά το κέντρο και όταν το πάνελ ψηλώνει */
.overview-top .wx-card .wx-hero-mid { justify-content: center; }
.wx-select {
    margin-left: auto; width: auto; min-width: 170px;
    padding: 7px 12px; font-size: 13px;
}
/* ---- Πάνελ καιρού: ο «ουρανός» αλλάζει χρώμα ανάλογα με τις συνθήκες.
   Χρησιμοποιούνται ντεγκραντέ αντί για φωτογραφίες, ώστε να μη χρειάζεται
   εξωτερικό αρχείο, να μην υπάρχει καθυστέρηση φόρτωσης και να δουλεύει
   με το υπάρχον CSP. ---- */
.wx-hero {
    position: relative; overflow: hidden;
    border-radius: 16px; padding: 16px 18px 15px;
    color: #fff; min-height: 210px;
    display: flex; flex-direction: column;
    background: linear-gradient(160deg, #6E7C8C 0%, #4A5766 55%, #39434F 100%);
}
/* (Η παλιά στατική λάμψη αντικαταστάθηκε από τη ζωντανή σκηνή .wx-scene) */
/* Κάθε ουρανός έχει ΔΥΟ στρώσεις: μια λάμψη κοντά στον ορίζοντα (πρώτη)
   πάνω από το βασικό ντεγκραντέ - έτσι ο ουρανός δείχνει βάθος αντί για
   επίπεδη επιφάνεια. */
.wx-hero.sky-clear {
    background:
        radial-gradient(ellipse 90% 60% at 78% 16%, rgba(255,236,170,0.45), rgba(255,236,170,0) 62%),
        linear-gradient(160deg, #5DB4EE 0%, #2E7FC4 55%, #1B5891 100%);
}
.wx-hero.sky-partly {
    background:
        radial-gradient(ellipse 90% 60% at 78% 16%, rgba(255,240,196,0.32), rgba(255,240,196,0) 62%),
        linear-gradient(160deg, #7CBCE6 0%, #5285AF 55%, #395F80 100%);
}
.wx-hero.sky-cloudy {
    background:
        radial-gradient(ellipse 100% 70% at 50% 10%, rgba(255,255,255,0.22), rgba(255,255,255,0) 66%),
        linear-gradient(160deg, #78859C 0%, #4A5766 55%, #39434F 100%);
}
.wx-hero.sky-fog {
    background:
        radial-gradient(ellipse 110% 80% at 50% 40%, rgba(255,255,255,0.3), rgba(255,255,255,0) 70%),
        linear-gradient(160deg, #9AA6B2 0%, #77838F 55%, #5D6873 100%);
}
.wx-hero.sky-rain {
    background:
        radial-gradient(ellipse 100% 70% at 50% 8%, rgba(210,230,250,0.2), rgba(210,230,250,0) 64%),
        linear-gradient(160deg, #5A6E82 0%, #3B4A5A 55%, #27313D 100%);
}
.wx-hero.sky-snow {
    background:
        radial-gradient(ellipse 100% 70% at 50% 12%, rgba(255,255,255,0.3), rgba(255,255,255,0) 66%),
        linear-gradient(160deg, #97ABBD 0%, #6C7F91 55%, #4F5F6C 100%);
}
.wx-hero.sky-storm {
    background:
        radial-gradient(ellipse 90% 60% at 52% 22%, rgba(180,196,220,0.2), rgba(180,196,220,0) 60%),
        linear-gradient(160deg, #414A58 0%, #282E38 55%, #171B21 100%);
}
/* Νύχτα: βαθύ μπλε ουρανού, με ελαφριά λάμψη γύρω από το φεγγάρι */
.wx-hero.is-night.sky-clear {
    background:
        radial-gradient(ellipse 80% 55% at 80% 14%, rgba(150,180,235,0.28), rgba(150,180,235,0) 60%),
        linear-gradient(160deg, #1E3060 0%, #14203E 55%, #0A1120 100%);
}
.wx-hero.is-night.sky-partly {
    background:
        radial-gradient(ellipse 80% 55% at 80% 14%, rgba(150,180,235,0.22), rgba(150,180,235,0) 60%),
        linear-gradient(160deg, #24355A 0%, #18243A 55%, #0E1420 100%);
}
.wx-hero.is-night.sky-cloudy { background: linear-gradient(160deg, #2B3340 0%, #1F2530 55%, #141821 100%); }
.wx-hero.is-night.sky-fog    { background: linear-gradient(160deg, #333C49 0%, #252C37 55%, #191E26 100%); }
.wx-hero.is-night.sky-rain   { background: linear-gradient(160deg, #232C38 0%, #19212B 55%, #0F141B 100%); }
.wx-hero.is-night.sky-snow   { background: linear-gradient(160deg, #35404F 0%, #262E3A 55%, #181D25 100%); }
.wx-hero.is-night.sky-storm  { background: linear-gradient(160deg, #1E2430 0%, #151A22 55%, #0B0E13 100%); }

/* ============================================================
   Η «ΣΚΗΝΗ» ΤΟΥ ΚΑΙΡΟΥ - ογκώδη, κινούμενα στοιχεία σε καθαρό CSS
   (καμία εικόνα, καμία εξωτερική πηγή, δουλεύει με το υπάρχον CSP).

   Πώς προκύπτει η αίσθηση όγκου χωρίς 3D μηχανή:
   1. ΦΩΣ ΑΠΟ ΠΑΝΩ ΑΡΙΣΤΕΡΑ σε κάθε σχήμα (radial-gradient με το φωτεινό
      σημείο εκτός κέντρου) + inset σκιά κάτω δεξιά -> σφαίρα, όχι κύκλος.
   2. ΡΙΧΤΗ ΣΚΙΑ με drop-shadow -> το αντικείμενο «κάθεται» σε χώρο.
   3. ΒΑΘΟΣ ΠΕΔΙΟΥ: τα μακρινά στοιχεία είναι μικρότερα, πιο θολά, πιο
      διάφανα και κινούνται ΠΙΟ ΑΡΓΑ (παράλλαξη) - d1 μακριά, d3 κοντά.
   ============================================================ */
.wx-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* Πέπλο βάθους: σκουραίνει προοδευτικά προς τα κάτω. Δίνει «έδαφος» στη
   σκηνή ΚΑΙ κρατά τα λευκά γράμματα ευανάγνωστα πάνω από τα σύννεφα. */
.wx-scene::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
        rgba(9, 18, 32, 0) 0%, rgba(9, 18, 32, 0.08) 34%,
        rgba(9, 18, 32, 0.26) 66%, rgba(9, 18, 32, 0.42) 100%);
}

/* ---------- ΗΛΙΟΣ: σφαίρα + κορώνα που γυρίζει + άλως που ανασαίνει ---------- */
.wx-sun {
    position: absolute; top: 13%; right: 12%;
    width: 62px; height: 62px; border-radius: 50%;
    background: radial-gradient(circle at 34% 29%,
        #FFFEF2 0 16%, #FFEDA8 36%, #FFD152 64%, #F7A81B 88%, #DC8608 100%);
    box-shadow:
        inset -7px -9px 18px rgba(176, 96, 6, 0.5),      /* σκίαση -> όγκος */
        inset 6px 7px 15px rgba(255, 255, 255, 0.55),    /* φωτισμένη πλευρά */
        0 0 30px 9px rgba(255, 199, 74, 0.5),
        0 0 74px 26px rgba(255, 176, 48, 0.22);
    animation: wxSunBreathe 9s ease-in-out infinite;
}
/* Κορώνα: ακτίνες που περιστρέφονται πολύ αργά, κομμένες σε δαχτυλίδι */
.wx-sun::before {
    content: ''; position: absolute; inset: -38px; border-radius: 50%;
    /* Φαρδιές, αχνές ακτίνες με θόλωμα: διαβάζεται ως λάμψη, όχι ως
       οδοντωτός τροχός. Η περιστροφή διπλασιάστηκε σε διάρκεια. */
    background: repeating-conic-gradient(from 0deg,
        rgba(255, 219, 130, 0.16) 0deg 11deg,
        rgba(255, 219, 130, 0)    11deg 30deg);
    filter: blur(5px);
    -webkit-mask: radial-gradient(circle, transparent 0 30%, #000 52%, transparent 84%);
            mask: radial-gradient(circle, transparent 0 30%, #000 52%, transparent 84%);
    animation: wxSpin 90s linear infinite;
}
/* Απαλή άλως γύρω από τον δίσκο */
.wx-sun::after {
    content: ''; position: absolute; inset: -34px; border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 226, 150, 0.34) 0 24%,
        rgba(255, 214, 120, 0.14) 48%,
        rgba(255, 214, 120, 0) 74%);
    animation: wxSunBreathe 9s ease-in-out infinite;
}
@keyframes wxSunBreathe {
    0%, 100% { transform: scale(1);     opacity: 1;    }
    50%      { transform: scale(1.028); opacity: 0.95; }
}
@keyframes wxSpin { to { transform: rotate(360deg); } }

/* ---------- ΦΕΓΓΑΡΙ: σφαίρα με κρατήρες που έχουν δικό τους βάθος ---------- */
.wx-moon {
    position: absolute; top: 13%; right: 13%;
    width: 56px; height: 56px; border-radius: 50%;
    background: radial-gradient(circle at 35% 29%,
        #FFFEF7 0 20%, #F2F0E4 46%, #D3CFBC 78%, #ADA995 100%);
    box-shadow:
        inset -9px -7px 18px rgba(62, 62, 54, 0.45),
        inset 7px 6px 14px rgba(255, 255, 255, 0.55),
        0 0 26px 8px rgba(255, 252, 226, 0.34),
        0 0 66px 24px rgba(190, 212, 255, 0.16);
    animation: wxMoonGlow 7s ease-in-out infinite;
}
/* Κρατήρες: σκοτεινοί από πάνω αριστερά, φωτεινό χείλος κάτω δεξιά -> κοιλότητα */
.wx-moon::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle at 31% 35%, rgba(120,118,104,0.55) 0 42%, rgba(255,255,255,0.28) 58%, transparent 62%)
            26% 30% / 30% 30% no-repeat,
        radial-gradient(circle at 31% 35%, rgba(120,118,104,0.45) 0 42%, rgba(255,255,255,0.22) 58%, transparent 62%)
            66% 62% / 22% 22% no-repeat,
        radial-gradient(circle at 31% 35%, rgba(120,118,104,0.38) 0 42%, rgba(255,255,255,0.18) 58%, transparent 62%)
            72% 26% / 15% 15% no-repeat,
        radial-gradient(circle at 31% 35%, rgba(120,118,104,0.30) 0 42%, rgba(255,255,255,0.16) 58%, transparent 62%)
            40% 74% / 13% 13% no-repeat;
}
@keyframes wxMoonGlow {
    0%, 100% { box-shadow:
        inset -9px -7px 18px rgba(62,62,54,0.45), inset 7px 6px 14px rgba(255,255,255,0.55),
        0 0 26px 8px rgba(255,252,226,0.34), 0 0 66px 24px rgba(190,212,255,0.16); }
    50%      { box-shadow:
        inset -9px -7px 18px rgba(62,62,54,0.45), inset 7px 6px 14px rgba(255,255,255,0.55),
        0 0 34px 12px rgba(255,252,226,0.46), 0 0 84px 32px rgba(190,212,255,0.24); }
}

/* ---------- ΑΣΤΕΡΙΑ ---------- */
.wx-star {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 var(--g, 7px) rgba(255, 255, 255, 0.95);
    animation: wxTwinkle var(--dur, 3.4s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
@keyframes wxTwinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.75); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* ---------- ΣΥΝΝΕΦΑ: ΕΝΑ σώμα, ΕΝΑΣ φωτισμός ----------
   Το λάθος της προηγούμενης εκδοχής: το σύννεφο ήταν έξι ημιδιάφανες
   φούσκες η μία πάνω στην άλλη. Όπου επικαλύπτονταν, οι διαφάνειες
   αθροίζονταν και έβγαιναν ορατές ραφές μέσα στο σύννεφο - γι' αυτό
   φαινόταν σαν κολλάζ.
   Τώρα οι φούσκες δεν είναι χρώμα αλλά ΜΑΣΚΑ: ενώνονται σε ένα σχήμα
   (η ένωση των alpha είναι πάντα ομαλή, δεν αθροίζεται σκοτάδι) και
   πάνω σε αυτό πέφτει ΕΝΑΣ φωτισμός - φως πάνω αριστερά, σκιά κάτω,
   όπως σε αληθινό όγκο. Οι τόνοι μένουν μεταβλητές, ώστε το ίδιο
   σχήμα να γίνεται λευκό σύννεφο, μολυβί βροχής ή σκοτεινό καταιγίδας. */
.wx-cloud {
    --hi: #ffffff;
    --mid: #e7eef7;
    --lo: #c0cede;
    /* Το σβήσιμο ΜΟΝΟ στην άκρη: συμπαγές εσωτερικό, μαλακό περίγραμμα.
       Αν το σβήσιμο ξεκινήσει νωρίς (π.χ. 50%), το εσωτερικό δεν γεμίζει
       και το σύννεφο διαβάζεται ως σωρός από ξεχωριστές μπάλες. */
    --c0: 74%;
    --c1: 100%;
    /* Πόσο κόβεται ο πάτος από το κάτω όριο, για να βγει επίπεδη βάση */
    --cut: calc(var(--w, 116px) * 0.05);
    position: absolute; left: var(--x); top: var(--y);
    width: var(--w, 116px); height: calc(var(--w, 116px) * 0.5);
    animation: wxFloat var(--dur, 46s) cubic-bezier(0.45,0,0.55,1) infinite;
    animation-delay: var(--delay, 0s);
}
/* Το σχήμα ζει στο ψευδοστοιχείο, όχι στο ίδιο το span. Λόγος: το filter
   εφαρμόζεται ΠΡΙΝ τη μάσκα, οπότε ένα blur στο ίδιο στοιχείο θα θόλωνε
   ένα ήδη ομαλό ντεγκραντέ και δεν θα φαινόταν πουθενά. Με τη μάσκα στο
   παιδί και το blur στον γονιό, το θόλωμα πέφτει πάνω στο τελικό σχήμα -
   εκεί που το θέλουμε, στο περίγραμμα. */
.wx-cloud::before {
    content: '';
    position: absolute; inset: 0;
    background:
        /* το φως του ήλιου πάνω αριστερά */
        radial-gradient(ellipse 58% 46% at 32% 16%, var(--hi) 0%, transparent 70%),
        /* ο όγκος: φωτεινή κορυφή, βαρύ κάτω μέρος */
        linear-gradient(176deg, var(--hi) 0%, var(--hi) 22%, var(--mid) 58%, var(--lo) 100%);
    /* Το σχήμα: πέντε λοβοί πάνω σε μια πλάκα βάσης.
       ΚΡΙΣΙΜΟ το «closest-side». Με το προεπιλεγμένο farthest-corner η
       ακτίνα φτάνει ως τη γωνία του πλακιδίου, άρα το σβήσιμο συνεχιζόταν
       έξω από αυτό και το πλακίδιο το έκοβε με ίσιο μαχαίρι - ευθείες
       γραμμές μέσα στο σύννεφο. Με closest-side ο κύκλος τελειώνει ακριβώς
       στην άκρη του πλακιδίου και δεν κόβεται τίποτα.
       Οι θέσεις είναι ασύμμετρες επίτηδες - η συμμετρία «μυρίζει» υπολογιστή. */
    --shape:
        /* λοβός αριστερά */
        radial-gradient(circle closest-side, #000 var(--c0), transparent var(--c1))
            12% 42% / 26% 52% no-repeat,
        /* ο κύριος λοβός - ο ψηλότερος */
        radial-gradient(circle closest-side, #000 var(--c0), transparent var(--c1))
            40% 4%  / 40% 80% no-repeat,
        /* λοβός δεξιά */
        radial-gradient(circle closest-side, #000 var(--c0), transparent var(--c1))
            74% 26% / 30% 60% no-repeat,
        /* μικρός ώμος δεξιά */
        radial-gradient(circle closest-side, #000 var(--c0), transparent var(--c1))
            98% 62% / 20% 40% no-repeat,
        /* μικρός ώμος αριστερά */
        radial-gradient(circle closest-side, #000 var(--c0), transparent var(--c1))
            0% 70%  / 18% 36% no-repeat,
        /* η πλάκα της βάσης, σπρωγμένη λίγο έξω ώστε ο πάτος να είναι ίσιος */
        radial-gradient(ellipse closest-side, #000 var(--c0), transparent var(--c1))
            50% calc(100% + var(--cut)) / 98% 56% no-repeat;
    -webkit-mask: var(--shape);
    mask: var(--shape);
}
/* Βάθος πεδίου: μέγεθος, διαφάνεια, θολούρα και ταχύτητα παράλλαξης.
   Όσο πιο μακριά το σύννεφο, τόσο πιο θολό και πιο ξεθωριασμένο - ο αέρας
   ανάμεσα «τρώει» και την ευκρίνεια και την αντίθεση. */
.wx-cloud.d1 { --w: 92px;  --drift: 9px;  --bob: -3px; opacity: 0.44;
               filter: blur(3.5px) drop-shadow(0 4px 9px rgba(14,26,44,0.07)); }
.wx-cloud.d2 { --w: 126px; --drift: 16px; --bob: -4px; opacity: 0.7;
               filter: blur(2px)   drop-shadow(0 6px 12px rgba(14,26,44,0.11)); }
.wx-cloud.d3 { --w: 164px; --drift: 24px; --bob: -6px; opacity: 0.9;
               filter: blur(1px)   drop-shadow(0 9px 16px rgba(14,26,44,0.15)); }
@keyframes wxFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(var(--drift, 20px), var(--bob, -5px), 0); }
}
/* Οι τόνοι αλλάζουν με τον ουρανό - το σχήμα μένει ένα */
.sky-rain  .wx-cloud { --hi: #cbd5e0; --mid: #9aa8b8; --lo: #64717f; }
.sky-snow  .wx-cloud { --hi: #ffffff; --mid: #dde6ef; --lo: #a9b8c8; }
.sky-storm .wx-cloud { --hi: #9aa4b2; --mid: #6b7683; --lo: #3d4652; }
.sky-fog   .wx-cloud { --hi: #eef2f6; --mid: #d3dbe3; --lo: #aeb9c4; }
.is-night  .wx-cloud { --hi: #a4b4c8; --mid: #718195; --lo: #454f60; }
.is-night.sky-storm .wx-cloud { --hi: #6d7889; --mid: #4a5462; --lo: #2a313b; }

/* ---------- ΟΜΙΧΛΗ: λωρίδες που σέρνονται σε διαφορετικά ύψη ---------- */
.wx-fog {
    position: absolute; left: -25%; width: 150%;
    top: var(--y, 50%); height: var(--h, 26px);
    background: linear-gradient(90deg,
        rgba(228, 236, 244, 0) 0%, rgba(228, 236, 244, 0.5) 24%,
        rgba(243, 248, 252, 0.72) 50%, rgba(228, 236, 244, 0.5) 76%,
        rgba(228, 236, 244, 0) 100%);
    filter: blur(7px);
    animation: wxFogDrift var(--dur, 26s) ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
}
.is-night .wx-fog { opacity: 0.42; }
@keyframes wxFogDrift {
    from { transform: translate3d(-9%, 0, 0); }
    to   { transform: translate3d(9%, 0, 0); }
}

/* ---------- ΒΡΟΧΗ: σταγόνες με βάθος (κοντινές = μεγάλες & γρήγορες) ---------- */
.wx-drop {
    position: absolute; left: var(--x); top: -18px;
    width: var(--w, 2px); height: var(--h, 15px);
    border-radius: 0 0 60% 60% / 0 0 90% 90%;
    background: linear-gradient(to bottom,
        rgba(226, 243, 255, 0) 0%, rgba(210, 234, 255, 0.45) 40%, rgba(245, 252, 255, 0.95) 100%);
    filter: blur(var(--b, 0px));
    animation: wxRain var(--dur, 0.9s) linear infinite;
    animation-delay: var(--delay, 0s);
}
@keyframes wxRain {
    0%   { transform: translate3d(0, 0, 0) rotate(13deg); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate3d(30px, 240px, 0) rotate(13deg); opacity: 0; }
}

/* ---------- ΧΙΟΝΙ: σφαιρικές νιφάδες που λικνίζονται ---------- */
.wx-flake {
    position: absolute; left: var(--x); top: -14px;
    width: var(--s, 7px); height: var(--s, 7px); border-radius: 50%;
    background: radial-gradient(circle at 34% 30%,
        #ffffff 0 38%, rgba(255, 255, 255, 0.8) 66%, rgba(255, 255, 255, 0.15) 100%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.75);
    filter: blur(var(--b, 0px));
    animation: wxSnow var(--dur, 6s) linear infinite;
    animation-delay: var(--delay, 0s);
}
@keyframes wxSnow {
    0%   { transform: translate3d(0, 0, 0);          opacity: 0;   }
    12%  { opacity: 1; }
    35%  { transform: translate3d(16px, 80px, 0);    opacity: 1;   }
    65%  { transform: translate3d(-10px, 150px, 0);  opacity: 1;   }
    100% { transform: translate3d(12px, 250px, 0);   opacity: 0;   }
}

/* ---------- ΚΑΤΑΙΓΙΔΑ: λάμψη σε όλη την κάρτα + κεραυνός σε σχήμα ---------- */
.wx-flash {
    position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(ellipse 70% 55% at 52% 26%,
        rgba(255, 250, 224, 0.92) 0%, rgba(255, 242, 190, 0.4) 34%, rgba(255, 255, 255, 0) 72%);
    animation: wxFlash 6.5s linear infinite;
}
@keyframes wxFlash {
    0%, 62%, 100% { opacity: 0;    }
    64%           { opacity: 0.95; }
    66%           { opacity: 0.12; }
    69%           { opacity: 0.8;  }
    73%           { opacity: 0;    }
}
.wx-bolt {
    position: absolute; top: 33%; left: 47%;
    width: 26px; height: 50px; opacity: 0;
    background: linear-gradient(175deg, #FFFCE0 0%, #FFE167 45%, #FFB61F 100%);
    clip-path: polygon(58% 0%, 16% 54%, 44% 54%, 28% 100%, 84% 40%, 52% 40%, 76% 0%);
    filter: drop-shadow(0 0 12px rgba(255, 216, 84, 0.95));
    animation: wxBolt 6.5s linear infinite;
}
@keyframes wxBolt {
    0%, 62%, 100% { opacity: 0; }
    64%, 65%      { opacity: 1; }
    66%           { opacity: 0; }
    69%, 71%      { opacity: 1; }
    73%           { opacity: 0; }
}

/* Χωρίς κίνηση: όλα μένουν, απλώς παγώνουν σε ορατή θέση */
@media (prefers-reduced-motion: reduce) {
    .wx-sun, .wx-sun::before, .wx-sun::after, .wx-moon, .wx-star,
    .wx-cloud, .wx-fog, .wx-drop, .wx-flake, .wx-flash, .wx-bolt { animation: none; }
    .wx-star { opacity: 0.9; }
    .wx-bolt { opacity: 1; }
    .wx-drop, .wx-flake { display: none; }
}

/* Σκιά γραμμάτων: εγγύηση αναγνωσιμότητας ακόμη κι αν περάσει σύννεφο
   ή αστραπή από πίσω - λευκό σε λευκό δεν διαβάζεται χωρίς περίγραμμα. */
.wx-hero-top, .wx-hero-mid {
    text-shadow: 0 1px 3px rgba(6, 14, 26, 0.42), 0 2px 16px rgba(6, 14, 26, 0.30);
}
.wx-hero-top {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.wx-hero-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
}
/* Θολό γυαλί: το πλακίδιο πέφτει πάνω στα σύννεφα και χωρίς αυτό
   «χανόταν» μέσα τους. */
.wx-hero-place {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: #fff;
    background: rgba(12, 22, 38, 0.30);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 20px; padding: 5px 12px;
    -webkit-backdrop-filter: blur(9px) saturate(1.15);
            backdrop-filter: blur(9px) saturate(1.15);
}
.wx-hero-mid {
    position: relative; z-index: 1;
    flex: 1 1 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; text-align: center;
    padding: 10px 0 14px;
}
.wx-date { font-size: 12.5px; color: rgba(255,255,255,0.80); }
.wx-big {
    font-family: var(--font-display); font-weight: 700;
    font-size: 52px; line-height: 1.02; letter-spacing: -2px;
}
.wx-big sup { font-size: 20px; font-weight: 600; vertical-align: super; margin-left: 2px; letter-spacing: 0; }
.wx-cond {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: rgba(255,255,255,0.92); margin-top: 2px;
}

.wx-tiles { position: relative; z-index: 1; display: flex; gap: 8px; }
.wx-tile {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: rgba(12, 22, 38, 0.24);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 13px; padding: 9px 4px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
            backdrop-filter: blur(10px) saturate(1.1);
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.wx-tile:hover { background: rgba(12, 22, 38, 0.34); border-color: rgba(255,255,255,0.28); }
.wx-tile i { font-size: 12px; opacity: 0.9; }
/* Αναφορά πηγής μέσα στο πάνελ, στο ύφος του attribution του Leaflet */
.wx-credit {
    position: relative; z-index: 1;
    display: block; margin-top: 10px; text-align: right;
    font-size: 10px; line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 1px 2px rgba(6, 14, 26, 0.6);
}
.wx-credit a { color: inherit; }
.wx-empty { font-size: 13.5px; color: var(--text-light); padding: 8px 0; }
@media (max-width: 560px) {
    .wx-select { margin-left: 0; width: 100%; }
    .wx-extra { padding-left: 0; }
}

/* ---------- Παράθυρο «φτάσατε το όριο» ---------- */
.limit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.limit-actions .btn-primary, .limit-actions .btn-outline { flex: 1 1 auto; justify-content: center; }
.msg-read-tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--text-light); padding: 9px 4px;
}
.msg-read-tag i { color: var(--green); }

/* ============================================
   ΣΥΝΟΜΙΛΙΕΣ ΜΕΤΑΞΥ ΠΑΡΑΓΩΓΩΝ
   Αριστερά η λίστα, δεξιά η κουβέντα - το μοτίβο που ξέρει ο καθένας
   από κάθε εφαρμογή μηνυμάτων.
   ============================================ */
.chat-layout {
    display: grid; grid-template-columns: 290px 1fr; gap: 16px;
    align-items: stretch; min-height: 520px;
}
.chat-list {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px; overflow-y: auto; max-height: 620px;
}
.chat-empty-list { padding: 26px 16px; text-align: center; font-size: 13.5px; color: var(--text-light); }
.chat-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 11px 12px; border: none; background: none; cursor: pointer;
    border-radius: var(--radius-sm); text-align: left; font-family: var(--font-body);
    transition: var(--transition);
}
.chat-item:hover { background: var(--green-xlight); }
.chat-item.active { background: var(--green); }
.chat-item.active strong, .chat-item.active small { color: #fff; }
[data-theme="dark"] .chat-item.active strong,
[data-theme="dark"] .chat-item.active small { color: var(--green-deeper); }
.chat-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden;
    background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
[data-theme="dark"] .chat-avatar { color: var(--green-deeper); }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item-text strong { font-size: 13.5px; color: var(--text); }
.chat-item-text small {
    font-size: 12px; color: var(--text-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-unread {
    flex: none; min-width: 20px; height: 20px; border-radius: 10px;
    background: var(--gold); color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; padding: 0 6px;
}

.chat-panel {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); display: flex; flex-direction: column;
    overflow: hidden; min-height: 520px;
}
.chat-placeholder {
    flex: 1; display: flex; flex-direction: column; gap: 12px;
    align-items: center; justify-content: center;
    color: var(--text-light); font-size: 14px;
}
.chat-placeholder i { font-size: 34px; color: var(--green); opacity: 0.55; }
.chat-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.chat-head strong { display: block; font-size: 15px; color: var(--text); }
.chat-head small { display: block; font-size: 12px; color: var(--text-light); }
.chat-visit { margin-left: auto; font-size: 12.5px; padding: 8px 14px; text-decoration: none; white-space: nowrap; }

.chat-thread {
    flex: 1; overflow-y: auto; padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg);
}
.chat-bubble {
    max-width: 76%; padding: 10px 14px; border-radius: 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.chat-bubble p { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.chat-bubble time { font-size: 10.5px; opacity: 0.75; }
.chat-ref { font-size: 11px; opacity: 0.85; }
/* Δικά μου δεξιά σε πράσινο, του άλλου αριστερά σε ουδέτερο */
.chat-bubble.mine {
    align-self: flex-end; background: var(--green); color: #fff;
    border-bottom-right-radius: 4px;
}
[data-theme="dark"] .chat-bubble.mine { color: var(--green-deeper); }
.chat-bubble.theirs {
    align-self: flex-start; background: var(--bg-white);
    border: 1px solid var(--border); color: var(--text-mid);
    border-bottom-left-radius: 4px;
}
.chat-composer {
    display: flex; gap: 10px; padding: 12px 14px;
    border-top: 1px solid var(--border); background: var(--bg-white);
}
.chat-composer .form-input { flex: 1; }
.chat-composer .btn-primary { flex: none; padding: 12px 18px; }

@media (max-width: 880px) {
    /* Σε στενή οθόνη δεν χωράνε δίπλα-δίπλα: λίστα πάνω, κουβέντα κάτω */
    .chat-layout { grid-template-columns: 1fr; min-height: 0; }
    .chat-list { max-height: 220px; }
    .chat-panel { min-height: 440px; }
    .chat-visit span { display: none; }
    .chat-bubble { max-width: 88%; }
}

/* ---------- Μηνύματα προς τον παραγωγό ---------- */
.msg-card { margin-bottom: 14px; transition: var(--transition); }
.msg-card.is-unread { border-left: 3px solid var(--green); cursor: pointer; }
.msg-card.is-unread:hover { background: var(--green-xlight); }
.msg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.msg-head strong { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.msg-head strong i { color: var(--green); font-size: 13px; }
.msg-new {
    background: var(--green); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    padding: 2px 9px; border-radius: 20px;
}
.msg-date { margin-left: auto; font-size: 12px; color: var(--text-light); }
.msg-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.msg-meta span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-mid); }
.msg-meta i { color: var(--green); font-size: 11px; }
.msg-body {
    background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px;
    font-size: 14px; color: var(--text-mid); line-height: 1.7; margin-bottom: 14px;
    white-space: pre-wrap;
}
.msg-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.msg-actions .btn-primary { text-decoration: none; padding: 9px 18px; font-size: 13px; }
.msg-actions .danger-btn { border-color: #c0392b; color: #c0392b; padding: 9px 18px; font-size: 13px; }
.msg-actions .danger-btn:hover { background: rgba(192,57,43,0.08); }

/* Οι ειδοποιήσεις έγιναν κουμπιά (ανοίγουν την αντίστοιχη ενότητα) */
.notif-item {
    width: 100%; border: none; background: none; cursor: pointer;
    font-family: var(--font-body); text-align: left;
    transition: var(--transition);
}
.notif-item[data-goto=""] { cursor: default; }
.notif-item:hover { background: var(--green-xlight); }
.notif-item span { flex: 1; min-width: 0; }

/* ============================================
   ΕΠΙΛΟΓΗ ΠΑΡΑΓΩΓΟΥ ΜΕ ΑΝΑΖΗΤΗΣΗ
   Στήνεται με flexbox και όχι grid: το πλακίδιο πακέτου πρέπει να
   κάθεται δεξιά χωρίς να τεντώνεται, και το κείμενο να παίρνει
   ό,τι μένει.
   ============================================ */
.combo { position: relative; }

.combo-icon {
    position: absolute; left: 15px; top: 23px; transform: translateY(-50%);
    color: var(--text-light); font-size: 13px; pointer-events: none; z-index: 1;
}
.combo-input { padding-left: 40px; padding-right: 40px; }
.combo-input:disabled { opacity: 0.6; cursor: not-allowed; }
.combo-clear {
    position: absolute; right: 11px; top: 23px; transform: translateY(-50%);
    width: 24px; height: 24px; border: none; border-radius: 50%;
    background: var(--bg); color: var(--text-light); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
    transition: var(--transition);
}
.combo-clear:hover { background: #f3d9d5; color: #c0392b; }

/* ΟΧΙ absolute: το .modal-body έχει overflow-y:auto και θα έκοβε τη λίστα.
   Έτσι σπρώχνει τη φόρμα προς τα κάτω και φαίνεται πάντα ολόκληρη. */
.combo-list {
    background: var(--bg-white);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    list-style: none; margin: 8px 0 0; padding: 6px;
    max-height: 268px; overflow-y: auto; overscroll-behavior: contain;
    display: none;
}
.combo-list.open { display: block; }
.combo-list::-webkit-scrollbar { width: 7px; }
.combo-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.combo-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 11px; border-radius: 10px; cursor: pointer;
    transition: background 0.15s ease;
}
.combo-item + .combo-item { margin-top: 2px; }
.combo-item:hover, .combo-item.active { background: var(--green-xlight); }

/* Αρχικά ονόματος σε κύκλο - βοηθούν το μάτι να «πιάσει» τη γραμμή */
.combo-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px;
}
.combo-item.active .combo-avatar, .combo-item:hover .combo-avatar { background: var(--green-dark); }

.combo-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.combo-name {
    font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-sub {
    font-size: 12px; color: var(--text-light); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Πακέτο: μικρό πλακίδιο δεξιά, ΧΩΡΙΣ τέντωμα */
.combo-plan {
    flex-shrink: 0; align-self: center;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
    border-radius: 20px; padding: 4px 10px; line-height: 1;
}
.combo-plan.plan-basic   { background: var(--green-xlight); color: var(--green-dark); border: 1px solid var(--green-light); }
.combo-plan.plan-premium { background: rgba(200,151,58,0.16); color: #8a6420; border: 1px solid var(--gold); }

/* Το κομμάτι που ταιριάζει με ό,τι πληκτρολογήθηκε */
.combo-item mark {
    background: rgba(200,151,58,0.38); color: inherit;
    border-radius: 3px; padding: 0 2px; font-weight: 700;
}
.combo-empty {
    padding: 22px 12px; font-size: 13px; color: var(--text-light); text-align: center;
}

[data-theme="dark"] .combo-plan.plan-premium { background: rgba(200,151,58,0.2); color: var(--gold-light); }

/* ============================================
   ΣΚΟΥΡΟ ΘΕΜΑ: κείμενο πάνω σε πράσινη επιφάνεια
   Το πράσινο του σκούρου θέματος είναι φωτεινό (#7fb034), οπότε το
   λευκό γράμμα δεν διαβάζεται. Σκούρο γράμμα → αντίθεση 7.00.
   ============================================ */
[data-theme="dark"] .photo-main-tag,
[data-theme="dark"] .avatar-chip,
[data-theme="dark"] .avatar-big,
[data-theme="dark"] .cal-day.today { color: #0c1a06; }

/* ---------- Διαχωριστικό «ή» ανάμεσα σε κάρτα και κατάθεση ----------
   Γραμμή αριστερά, γραμμή δεξιά, η λέξη στη μέση. */
.pay-or {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0 16px;
    font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-light);
}
.pay-or::before, .pay-or::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ---------- Τηλέφωνο πελάτη στις εκκρεμείς καταθέσεις ----------
   Σύνδεσμος κλήσης: ο διαχειριστής παίρνει τηλέφωνο για να επιβεβαιώσει. */
.pay-phone {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 3px; font-size: 12.5px; font-weight: 600;
    color: var(--green-dark); text-decoration: none;
}
.pay-phone:hover { text-decoration: underline; }