/* Κοινό στυλ των σελίδων λίστας του admin (σχέδια «Λίστα Χρηστών», «Λίστα Εφαρμογών», «Αποστολές»).
   Ίδια οικογένεια με το ud-form.css (header ud-hdr, κουμπιά ud-btn, toast ud-toast)· οι κλάσεις των λιστών έχουν πρόθεμα udl-.
   Στήλες σε φαρδιά λίστα (περιεχόμενο ≥ 1044px, όσο το main 1100px του σχεδίου χωρίς τα 2×28px)· αλλιώς κάρτες σε μία στήλη.
   Χρώματα μόνο μέσω των μεταβλητών --ud-* του ud-form.css (light / dark θέμα). */

/* ---------- Σελίδα ---------- */
.udl-page { container: udl / inline-size; display: flex; flex-direction: column; gap: 16px; padding: 20px 0 60px; font-family: Manrope, Helvetica, sans-serif; color: var(--ud-text); min-width: 0; }
.udl-page.udl-embedded { padding: 0; }
.udl-card { background: var(--ud-surface); border-radius: 8px; box-shadow: var(--ud-card-shadow); }
.udl-page.udl-embedded .udl-card { box-shadow: none; border: 1px solid var(--ud-border); }

/* γκρι φόντο και λευκή κεφαλίδα, όπως στις σελίδες με φόρμα (body.ud-page-bg), όσο φαίνεται μια λίστα */
[data-bs-theme=light] body:has(.udl-page:not(.udl-embedded)),
body[data-bs-theme=light]:has(.udl-page:not(.udl-embedded)) {
    --bs-app-bg-color: #f4f6f9;
}
[data-bs-theme=light] body:has(.udl-page:not(.udl-embedded)) #kt_app_header,
body[data-bs-theme=light]:has(.udl-page:not(.udl-embedded)) #kt_app_header {
    background-color: var(--ud-surface);
    border-bottom: 1px solid var(--ud-border);
}

/* ---------- Header: κουμπιά ---------- */
.udl-btn-ico { display: flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap; }
a.udl-new { display: flex; align-items: center; padding: 0 18px; text-decoration: none; white-space: nowrap; }
a.udl-new:hover { color: #fff; }
.udl-menu-wrap { position: relative; }
.udl-menu-backdrop { position: fixed; inset: 0; z-index: 19; }
.udl-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 260px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 8px; background: var(--ud-surface); border: 1px solid var(--ud-border); box-shadow: 0 10px 30px rgba(16,24,40,.15); display: flex; flex-direction: column; gap: 2px; font-family: Manrope, Helvetica, sans-serif; }
.udl-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: none; border-radius: 6px; background: var(--ud-surface); text-align: left; cursor: pointer; }
.udl-menu-item:hover:not(:disabled) { background: var(--ud-hover-2); }
.udl-menu-item:disabled { opacity: .5; cursor: not-allowed; }
.udl-menu-label { font-size: 13px; font-weight: 600; color: var(--ud-text); }
.udl-menu-hint { font-size: 11px; color: var(--ud-text-muted); }

/* ---------- Αναζήτηση, καρτέλες, φίλτρα ---------- */
.udl-tools { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.udl-tools-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.udl-search { flex: 1; min-width: min(100%, 260px); position: relative; display: flex; }
.udl-search-icon { position: absolute; left: 12px; top: 11px; color: var(--ud-text-muted); font-size: 13px; pointer-events: none; }
.udl-search input { flex: 1; min-width: 0; height: 40px; padding: 0 12px 0 32px; border-radius: 6px; background: var(--ud-soft); border: 1px solid transparent; font-size: 14px; outline: none; color: var(--ud-text); font-family: inherit; }
.udl-search input::placeholder { color: var(--ud-placeholder); }
.udl-search input:focus { background: var(--ud-surface); border-color: var(--ud-primary-accent); }
.udl-tabs { display: flex; flex-wrap: wrap; max-width: 100%; padding: 3px; border-radius: 7px; background: var(--ud-soft); gap: 3px; }
.udl-tab { height: 34px; padding: 0 12px; border: none; border-radius: 5px; background: transparent; color: var(--ud-text-2); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-family: inherit; }
.udl-tab.on { background: var(--ud-raised); color: var(--ud-primary-text); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.udl-tab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.udl-tab-n { opacity: .6; }
.udl-more { height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ud-border-strong); background: var(--ud-surface); color: var(--ud-primary-text); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: inherit; }
.udl-more.on { background: var(--ud-primary-soft); border-color: var(--ud-primary-border); }
.udl-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ud-primary); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.udl-arrow { font-size: 11px; }
.udl-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--udl-fmin, 190px)), 1fr)); gap: 12px 14px; padding: 14px; border-radius: 8px; background: var(--ud-surface-2); border: 1px solid var(--ud-border); }
.udl-filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; }
.udl-filter > span { font-size: 12px; font-weight: 600; color: var(--ud-text); }
.udl-filter select, .udl-filter input { height: 36px; padding: 0 8px; border-radius: 6px; background: var(--ud-surface); border: 1px solid var(--ud-border-strong); font-size: 13px; color: var(--ud-text); outline: none; width: 100%; min-width: 0; font-family: inherit; }
.udl-filter select:focus, .udl-filter input:focus { border-color: var(--ud-primary-accent); }
.udl-filter-clear { display: flex; align-items: flex-end; }
.udl-filter-clear button { height: 36px; padding: 0 4px; border: none; background: none; color: var(--ud-text-muted); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; font-family: inherit; }
.udl-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.udl-chip { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; height: 26px; padding: 0 4px 0 10px; border-radius: 13px; background: var(--ud-primary-soft); border: 1px solid var(--ud-primary-border); color: var(--ud-primary-text); font-size: 12px; font-weight: 600; }
.udl-chip-k { color: var(--ud-text-muted); font-weight: 500; white-space: nowrap; }
.udl-chip-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udl-chip button { width: 18px; height: 18px; flex-shrink: 0; border: none; border-radius: 50%; background: transparent; color: var(--ud-primary-text); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.udl-chip button:hover { background: var(--ud-primary-soft-hover); }

/* ---------- Πίνακας / κάρτες ---------- */
.udl-table { overflow: hidden; transition: opacity .15s; }
.udl-table.udl-loading { opacity: .6; }
.udl-head { display: none; grid-template-columns: var(--udl-cols); gap: 16px; padding: 11px 18px; border-bottom: 1px solid var(--ud-primary-border); background: var(--ud-primary-soft); font-size: 12px; font-weight: 700; color: var(--ud-primary-text); }
.udl-head button { border: none; background: none; padding: 0; text-align: left; font-size: 12px; font-weight: 700; color: var(--ud-primary-text); cursor: pointer; font-family: inherit; }
/* τίτλος σελίδας λίστας: μπλε, με το συνολικό πλήθος σε badge */
.ud-title.udl-title { color: var(--ud-primary-text); display: flex; align-items: center; gap: 10px; }
.udl-title-count { flex-shrink: 0; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--ud-primary); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.udl-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--ud-line); }
.udl-row:hover { background: var(--ud-surface-3); }
@container udl (min-width: 1044px) {
    .udl-head { display: grid; }
    .udl-row { grid-template-columns: var(--udl-cols); }
}
.udl-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* οντότητα (χρήστης / εφαρμογή) με avatar */
.udl-entity { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--ud-text); }
.udl-entity:hover { color: var(--ud-text); }
.udl-entity:hover .udl-name { color: var(--ud-primary-text); }
.udl-av { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--ud-primary-soft); color: var(--ud-primary-text); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.udl-av.udl-av-app { border-radius: 8px; font-size: 16px; }
.udl-av img { width: 100%; height: 100%; object-fit: cover; }
.udl-av .udl-av-text { font-size: 12px; font-weight: 800; }
/* χρήστες / εφαρμογές: κατάσταση στο avatar (ενεργός / ανενεργός) με κουκκίδα κάτω δεξιά */
.udl-av.udl-av-st { width: 38px; height: 38px; border-radius: 50%; position: relative; overflow: visible; border: 2px solid; box-shadow: none; }
.udl-av.udl-av-st.on { background: var(--ud-ok-bg-2); color: var(--ud-ok-fg); border-color: var(--ud-ok-border-2); }
.udl-av.udl-av-st.off { background: var(--ud-bad-bg-2); color: var(--ud-bad-fg); border-color: var(--ud-bad-border-2); }
.udl-av.udl-av-st.udl-av-app { font-size: 15px; }
.udl-av.udl-av-st img { width: 70%; height: 70%; object-fit: contain; border-radius: 0; }
.udl-av-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ud-surface); box-sizing: border-box; }
.udl-av-st.on .udl-av-dot { background: #1fae4b; }
.udl-av-st.off .udl-av-dot { background: #d93636; }
/* εφαρμογές: ενδείξεις ρυθμίσεων (Secret, Token μέσω browser) */
.udl-flag { height: 20px; padding: 0 8px; border-radius: 10px; background: var(--ud-primary-soft); color: var(--ud-primary-text); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.udl-flag i { font-size: 10px; }
.udl-flag.warn { background: var(--ud-wait-bg); color: var(--ud-wait-fg); }
.udl-flag.bad { background: var(--ud-bad-bg); color: var(--ud-bad-fg); }
.udl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.udl-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.udl-name { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.udl-sub { font-size: 12px; color: var(--ud-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udl-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.udl-st { height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.udl-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.udl-cell { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.udl-cell-flex { display: flex; align-items: center; min-width: 0; }
.udl-xbtn { height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--ud-border-strong); background: var(--ud-surface); color: var(--ud-primary-text); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
.udl-xbtn:hover { background: var(--ud-primary-soft); }
.udl-xbtn.udl-xbtn-sm { height: 22px; padding: 0 8px; font-size: 11px; }
.udl-none { font-size: 12px; color: var(--ud-text-faint); }
.udl-when { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.udl-when-rel { font-size: 13px; }
.udl-when-abs { font-size: 11px; color: var(--ud-text-faint); }
.udl-noorg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ud-wait-fg); font-weight: 600; }
.udl-noorg .udl-dot { width: 7px; height: 7px; background: #e08a00; }
.udl-grants { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.udl-grant { max-width: 100%; min-width: 0; height: 22px; padding: 0 8px; border-radius: 5px; background: var(--ud-soft); color: var(--ud-text-2); font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; cursor: default; }
.udl-grant > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.udl-grant .udl-dot { background: #e08a00; }

/* ενέργειες γραμμής */
.udl-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.udl-ibtn { width: 32px; height: 32px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--ud-border); background: var(--ud-surface); color: var(--ud-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; text-decoration: none; }
.udl-ibtn:hover { background: var(--ud-primary-soft); color: var(--ud-primary-text); border-color: var(--ud-primary-border); }
.udl-ibtn.udl-del { color: var(--ud-text-muted); }
.udl-ibtn.udl-del:hover { background: var(--ud-bad-bg); color: var(--ud-bad-fg); border-color: var(--ud-bad-border); }
.udl-ibtn.udl-resend:hover { background: var(--ud-ok-bg); color: var(--ud-ok-fg); border-color: var(--ud-ok-border); }
.udl-confirm { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ud-bad-deep); font-weight: 600; white-space: nowrap; }
.udl-confirm.udl-confirm-primary { color: var(--ud-primary-text); }
.udl-yes { height: 28px; padding: 0 10px; border-radius: 5px; border: none; background: #d93636; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.udl-confirm-primary .udl-yes { background: var(--ud-primary); }
.udl-no { height: 28px; padding: 0 10px; border-radius: 5px; border: 1px solid var(--ud-border-strong); background: var(--ud-surface); color: var(--ud-text); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.udl-yes:disabled, .udl-no:disabled { opacity: .6; cursor: default; }

/* γραμμή που ανοίγει (ρόλοι / scopes / σφάλμα) */
.udl-expand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px; border-radius: 6px; background: var(--ud-surface-2); border: 1px solid var(--ud-line); min-width: 0; }
.udl-expand.udl-expand-col { flex-direction: column; flex-wrap: nowrap; }
.udl-tag { max-width: 100%; height: 24px; line-height: 22px; padding: 0 9px; border-radius: 5px; background: var(--ud-surface); border: 1px solid var(--ud-border); color: var(--ud-text-2); font-size: 12px; font-weight: 600; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.udl-err-text { font-size: 12px; line-height: 1.45; color: var(--ud-text-2); }
.udl-err-text strong { color: var(--ud-bad-fg); font-weight: 700; }
.udl-err-raw { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--ud-bad-deep); word-break: break-all; }
.udl-row-err { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 6px; background: var(--ud-bad-bg); border: 1px solid var(--ud-bad-border); color: var(--ud-bad-deep); font-size: 12px; line-height: 1.45; }
.udl-row-err button { margin-left: auto; border: none; background: none; color: var(--ud-bad-deep); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }

/* αποστολές: θέμα με εικονίδιο τύπου */
.udl-subj { display: flex; align-items: center; gap: 12px; min-width: 0; }
.udl-type { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; background: var(--ud-primary-soft); color: var(--ud-primary-text); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; line-height: 1; }
/* αποστολές: το εικονίδιο τύπου δείχνει και την κατάσταση (όπως το avatar χρήστη) */
.udl-type.udl-type-st { width: 38px; height: 38px; border-radius: 50%; position: relative; border: 2px solid; box-shadow: none; }
.udl-type-st.ok { background: var(--ud-ok-bg-2); color: var(--ud-ok-fg); border-color: var(--ud-ok-border-2); }
.udl-type-st.wait { background: var(--ud-wait-bg-2); color: var(--ud-wait-fg); border-color: var(--ud-wait-border); }
.udl-type-st.bad { background: var(--ud-bad-bg-2); color: var(--ud-bad-fg); border-color: var(--ud-bad-border-2); }
.udl-type-st.ok .udl-av-dot { background: #1fae4b; }
.udl-type-st.wait .udl-av-dot { background: #e08a00; }
.udl-type-st.bad .udl-av-dot { background: #d93636; }
.udl-subj-text { display: block; min-width: 0; overflow-wrap: anywhere; }
.udl-subj-text strong { font-size: 13px; font-weight: 600; line-height: 1.35; }
.udl-id { font-size: 11px; color: var(--ud-text-faint); white-space: nowrap; }
.udl-rcpt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.udl-rcpt-name { font-size: 13px; overflow-wrap: anywhere; }
.udl-rcpt-to { font-size: 12px; color: var(--ud-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udl-date { font-size: 13px; color: var(--ud-text-2); }
.udl-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.udl-clicked { display: inline-flex; align-items: center; color: var(--ud-ok-fg); cursor: help; }

/* κενή λίστα, φόρτωση */
.udl-empty { padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.udl-empty strong { font-size: 14px; font-weight: 700; }
.udl-empty span { font-size: 13px; color: var(--ud-text-muted); }
.udl-empty button { height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ud-border-strong); background: var(--ud-surface); color: var(--ud-primary-text); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.udl-placeholder { padding: 40px; text-align: center; font-size: 13px; color: var(--ud-text-muted); }

/* ---------- Σελιδοποίηση ---------- */
.udl-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 18px; background: var(--ud-surface-2); font-size: 12px; color: var(--ud-text-muted); }
.udl-foot-label { flex: 1; min-width: 160px; }
.udl-per { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.udl-per select { height: 30px; padding: 0 6px; border-radius: 5px; background: var(--ud-surface); border: 1px solid var(--ud-border-strong); font-size: 12px; color: var(--ud-text); outline: none; font-family: inherit; }
.udl-pages { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.udl-pg { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--ud-border-strong); background: var(--ud-surface); color: var(--ud-text); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.udl-pg.on { background: var(--ud-primary); color: #fff; border-color: var(--ud-primary-accent); }
.udl-pg.udl-gap { background: transparent; border-color: transparent; color: var(--ud-text-faint); cursor: default; }
.udl-pg.udl-nav { width: 30px; font-weight: 400; }
.udl-pg.udl-nav:disabled { opacity: .4; cursor: default; }

/* ---------- Παράθυρο προβολής / επιβεβαίωσης ---------- */
.udl-modal-bg { position: fixed; inset: 0; z-index: 1060; background: rgba(16,24,40,.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.udl-modal { width: min(760px, 100%); max-height: 100%; background: var(--ud-surface); border-radius: 12px; box-shadow: 0 20px 50px rgba(16,24,40,.3); display: flex; flex-direction: column; overflow: hidden; font-family: Manrope, Helvetica, sans-serif; color: var(--ud-text); }
.udl-modal.udl-modal-sm { width: min(480px, 100%); }
.udl-modal-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-bottom: 1px solid var(--ud-border); }
.udl-modal-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.udl-modal-title { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.udl-modal-pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.udl-modal-date { margin-left: auto; font-size: 12px; color: var(--ud-text-muted); white-space: nowrap; }
.udl-modal-meta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 24px; font-size: 12px; }
.udl-modal-kv { flex: 1 1 300px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 6px; }
.udl-modal-kv > span:nth-child(odd) { color: var(--ud-text-faint); }
.udl-modal-kv > span:nth-child(even) { color: var(--ud-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udl-modal-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--ud-page-bg); }
.udl-modal-body.udl-modal-body-plain { background: var(--ud-surface); font-size: 13px; line-height: 1.55; }
.udl-modal-err { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--ud-surface); border: 1px solid var(--ud-bad-border); }
.udl-modal-foot { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ud-border); }
.udl-mbtn { height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ud-border-strong); background: var(--ud-surface); color: var(--ud-text); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.udl-mbtn:hover:not(:disabled) { background: var(--ud-hover); }
.udl-mbtn.udl-mbtn-primary { padding: 0 16px; border: none; background: var(--ud-primary); color: #fff; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.udl-mbtn.udl-mbtn-primary:hover:not(:disabled) { background: var(--ud-primary-hover); }
.udl-mbtn:disabled { opacity: .45; cursor: not-allowed; }
.udl-modal-q { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--ud-primary-text); }
.udl-email-card { flex-shrink: 0; background: var(--ud-surface); border: 1px solid var(--ud-border); border-radius: 10px; overflow: hidden; }
.udl-email-card iframe { display: block; width: 100%; height: 480px; border: 0; background: #fff; }
.udl-sms { flex-shrink: 0; align-self: center; width: 320px; max-width: 100%; padding: 16px; border-radius: 24px; background: var(--ud-surface); border: 1px solid var(--ud-border); display: flex; flex-direction: column; gap: 10px; }
.udl-sms-to { text-align: center; font-size: 12px; color: var(--ud-text-muted); }
.udl-sms-to strong { color: var(--ud-text); }
.udl-sms-bubble { align-self: flex-start; max-width: 90%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--ud-soft); font-size: 14px; line-height: 1.45; color: var(--ud-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.udl-sms-meta { font-size: 11px; color: var(--ud-text-faint); }
.udl-box-card { flex-shrink: 0; background: var(--ud-surface); border: 1px solid var(--ud-border); border-radius: 10px; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.6; }
.udl-box-head { display: flex; align-items: center; gap: 10px; }
.udl-box-head > div { display: flex; flex-direction: column; min-width: 0; }
.udl-box-head span { font-size: 12px; color: var(--ud-text-muted); overflow-wrap: anywhere; }
.udl-box-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.udl-box-card iframe { display: block; width: 100%; height: 320px; border: 1px solid #eef1f5; border-radius: 6px; }
.udl-att { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--ud-border); background: var(--ud-surface-2); text-align: left; cursor: pointer; font-family: inherit; color: var(--ud-text); }
.udl-att:hover { background: var(--ud-primary-soft); border-color: var(--ud-primary-border); }
.udl-att-badge { height: 24px; padding: 0 6px; border-radius: 4px; background: #c62f2f; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; flex-shrink: 0; }
.udl-att-name { flex: 1; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.udl-atts { display: flex; flex-direction: column; gap: 8px; }
.udl-modal-loading { padding: 30px; text-align: center; font-size: 13px; color: var(--ud-text-muted); }

/* μικρές οθόνες: τα κουμπιά της κεφαλίδας μικραίνουν όπως τα ud-btn (ud-form.css) */
@media (max-width: 991px) {
    .udl-btn-ico, a.udl-new { padding: 0 10px; }
}
@media (max-width: 575px) {
    .udl-btn-ico, a.udl-new { padding: 0 8px; gap: 6px; }
    .udl-modal-bg { padding: 10px; }
    .udl-modal-head, .udl-modal-body, .udl-modal-foot { padding-left: 14px; padding-right: 14px; }
    .udl-row { padding: 12px 14px; }
    .udl-foot { padding: 10px 14px; }
}

/* Προβολή αποστολής: mockup συσκευής σε σκούρο φόντο (σχέδιο «Αποστολές»).
   Η οθόνη της συσκευής έχει data-bs-theme="light": δείχνει το μήνυμα όπως θα το δει ο παραλήπτης και στο σκούρο θέμα. */
.udl-pv-bg { position: fixed; inset: 0; z-index: 1060; background: rgba(10,14,24,.86); display: flex; align-items: center; justify-content: center; padding: 24px; }
.udl-pv { width: min(980px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 14px; font-family: Manrope, Helvetica, sans-serif; color: var(--ud-text); }
.udl-pv-stage { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.udl-pv-stage > * { flex-shrink: 0; }
.udl-pv-loading { padding: 30px 40px; border-radius: 10px; background: var(--ud-surface); font-size: 13px; color: var(--ud-text-muted); }
.udl-pv-w-laptop { width: 100%; max-width: 860px; }
.udl-pv-w-phone { width: 100%; max-width: 360px; }
.udl-pv-w-full { width: 100%; }
.udl-pv-foot { flex-shrink: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.udl-pv-q { font-size: 13px; font-weight: 600; color: #fff; }
.udl-pv-err { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 8px; background: var(--ud-bad-bg); border: 1px solid var(--ud-bad-border); box-shadow: 0 4px 14px rgba(16,24,40,.18); }
.udl-pv-err > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.udl-pv-err .udl-err-text { color: var(--ud-bad-deep-2); }
.udl-pv-err-ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; background: #d93636; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
/* email σε laptop */
.udl-laptop { width: 100%; max-width: 860px; display: flex; flex-direction: column; align-items: center; }
.udl-laptop-lid { width: 100%; padding: 10px 10px 12px; border-radius: 14px 14px 0 0; background: #1d2433; }
.udl-laptop-screen { border-radius: 4px; overflow: hidden; background: var(--ud-surface); color: var(--ud-text); display: flex; flex-direction: column; aspect-ratio: 16 / 10; max-height: calc(100vh - 160px); }
.udl-laptop-bar { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--ud-soft); border-bottom: 1px solid var(--ud-border); }
.udl-laptop-bar > span:not(.udl-laptop-url) { width: 9px; height: 9px; border-radius: 50%; }
.udl-laptop-url { flex: 1; min-width: 0; margin-left: 8px; height: 18px; border-radius: 4px; background: var(--ud-surface); font-size: 10px; color: var(--ud-text-faint); display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.udl-laptop-mailhead { flex-shrink: 0; padding: 10px 16px; border-bottom: 1px solid var(--ud-line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.udl-laptop-mailhead strong { font-size: 13px; overflow-wrap: anywhere; }
.udl-laptop-mailhead span { font-size: 11px; color: var(--ud-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udl-laptop-frame { flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: #fff; }
.udl-laptop-base { width: 112%; max-width: calc(100% + 40px); height: 12px; border-radius: 0 0 12px 12px; background: var(--ud-grey); position: relative; }
.udl-laptop-base > span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 80px; height: 5px; border-radius: 0 0 6px 6px; background: var(--ud-text-faint); }
/* SMS σε κινητό */
.udl-phone { width: 360px; max-width: 100%; padding: 12px; border-radius: 46px; background: #1d2433; box-shadow: 0 10px 30px rgba(16,24,40,.2); }
.udl-phone-screen { border-radius: 36px; overflow: hidden; background: var(--ud-surface); color: var(--ud-text); height: min(680px, calc(100vh - 200px)); display: flex; flex-direction: column; }
.udl-phone-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 4px; font-size: 11px; font-weight: 700; }
.udl-phone-notch { width: 70px; height: 20px; border-radius: 12px; background: #1d2433; }
.udl-phone-contact { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 16px 12px; border-bottom: 1px solid var(--ud-line); text-align: center; }
.udl-phone-contact strong { font-size: 13px; }
.udl-phone-contact > span:last-child { font-size: 10px; color: var(--ud-text-faint); overflow-wrap: anywhere; }
.udl-phone-av { width: 40px; height: 40px; border-radius: 50%; background: var(--ud-primary-soft); color: var(--ud-primary-text); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.udl-phone-thread { flex: 1; min-height: 0; overflow: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.udl-phone-date { align-self: center; font-size: 10px; color: var(--ud-text-faint); }
.udl-phone-thread .udl-sms-bubble { max-width: 85%; padding: 9px 13px; border-radius: 18px 18px 18px 4px; font-size: 13px; }
.udl-phone-len { font-size: 10px; color: var(--ud-text-faint); padding-left: 4px; }
.udl-box-card { width: 100%; }
.udl-box-head > div { flex: 1; }
.udl-box-date { font-size: 12px; color: var(--ud-text-muted); white-space: nowrap; }
.udl-box-subject { font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 575px) {
    .udl-pv-bg { padding: 10px; }
    .udl-laptop-screen { aspect-ratio: auto; height: calc(100vh - 190px); }
    .udl-laptop-lid { padding: 6px 6px 8px; border-radius: 10px 10px 0 0; }
}