/* saas_marketing.css — Μάρκετινγκ: λίστες πελατών (.mkl-), παράθυρο (.mkd-), σημάδι πελάτη (.mkf-), ειδοποίηση εφαρμογής (.mkn-).
   Ύφος docs/design/fason: λευκές κάρτες #FFF, περίγραμμα #E2E8F0, γωνίες 12px, μπλε #1D6FD8. Το φόντο σελίδας ΔΕΝ ορίζεται εδώ
   (το κληρονομεί από το body / --cfx-page-bg). Ετικέτες και μονάδες δεν σπάνε σε δύο σειρές· ό,τι δεν χωρά κατεβαίνει ολόκληρο. */

/* ── Σελίδα «Λίστες πελατών» ─────────────────────────────── */
.mkl-page .mkl-wrap { max-width: 1040px; margin: 0 auto; padding: 16px 16px 40px; color: #0F172A; box-sizing: border-box; }
.mkl-page .mkl-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mkl-page .mkl-h1 { margin: 4px 0 2px; font-size: 24px; font-weight: 700; overflow-wrap: anywhere; }
.mkl-page .mkl-lead { margin: 0; color: #64748B; font-size: 14px; max-width: 560px; }
.mkl-page .mkl-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.mkl-page .mkl-muted { color: #64748B; font-size: 13px; }
.mkl-page .mkl-hint { color: #64748B; font-size: 12px; margin-top: 4px; }
.mkl-page .mkl-p { margin: 0; }
.mkl-page .mkl-empty { color: #475569; padding: 18px 4px; text-align: center; }
.mkl-page .mkl-warn { background: #FFF4E5; border: 1px solid #FDDDB0; color: #92400E; border-radius: 10px; padding: 10px 12px; font-size: 13px; }

.mkl-page .mkl-btn, .mkl-page .mkl-btn2 {
  display: inline-block; border-radius: 10px; font-size: 15px; font-weight: 600; text-align: center; cursor: pointer;
  white-space: nowrap; font-family: inherit; line-height: 1.2;
}
.mkl-page .mkl-btn { background: #1D6FD8; color: #FFFFFF; border: 1px solid #1D6FD8; padding: 11px 18px; }
.mkl-page .mkl-btn2 { background: #FFFFFF; color: #1D6FD8; border: 1px solid #BFD7F5; padding: 9px 14px; }
.mkl-page .mkl-btn2.mkl-danger { color: #B91C1C; border-color: #F3C4C4; }
.mkl-page .mkl-btn:disabled, .mkl-page .mkl-btn2:disabled { opacity: .45; cursor: default; }
.mkl-page .mkl-link { background: none; border: 0; padding: 0; color: #1D6FD8; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }

.mkl-page .mkl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid #F1F5F9; }
.mkl-page .mkl-row:last-child { border-bottom: 0; }
.mkl-page .mkl-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; flex: 1 1 220px; }
.mkl-page .mkl-name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.mkl-page .mkl-row-act { display: flex; flex-wrap: wrap; gap: 8px; }
.mkl-page .mkl-chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; background: #E8F1FD; color: #1D6FD8; }

.mkl-page .mkl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; }
.mkl-page .mkl-field { margin-bottom: 12px; min-width: 0; }
.mkl-page .mkl-field label { display: block; font-size: 13px; color: #475569; margin-bottom: 5px; font-weight: 500; }
.mkl-page .mkl-inp, .mkd-modal .mkl-inp {
  width: 100%; box-sizing: border-box; background: #FFFFFF; border: 1px solid #CBD5E1; border-radius: 10px;
  padding: 10px 12px; font-size: 15px; color: #0F172A; font-family: inherit;
}
.mkl-page .mkl-pills { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow-y: auto; padding: 2px; }
.mkl-page .mkl-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #CBD5E1; border-radius: 999px; padding: 6px 12px; font-size: 14px; color: #475569; background: #FFFFFF; cursor: pointer; white-space: nowrap; }
.mkl-page .mkl-pill.on { border-color: #1D6FD8; background: #E8F1FD; color: #1D6FD8; font-weight: 600; }
.mkl-page .mkl-pill input { margin: 0; }
.mkl-page .mkl-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }

.mkl-page .mkl-resbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mkl-page .mkl-count { font-size: 16px; }
.mkl-page .mkl-resact { display: flex; flex-wrap: wrap; gap: 8px; }
.mkl-page .mkl-table { margin-top: 8px; }
.mkl-page .mkl-tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid #F1F5F9; font-size: 14px; }
.mkl-page .mkl-tr > span { min-width: 0; overflow-wrap: anywhere; }
.mkl-page .mkl-th { font-size: 12px; color: #64748B; font-weight: 600; }
.mkl-page .mkl-td-name { font-weight: 600; }
.mkl-page .mkl-app { color: #1557AD; font-weight: 600; }
.mkl-page .mkl-btn-lg { font-size: 17px; font-weight: 700; padding: 14px 24px; }
.mkl-page .mkl-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }

@media (max-width: 720px) {
  .mkl-page .mkl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .mkl-page .mkl-wrap { padding: 12px 12px 32px; }
  .mkl-page .mkl-h1 { font-size: 21px; }
  .mkl-page .mkl-top > .mkl-btn { width: 100%; }
  .mkl-page .mkl-resact { width: 100%; }
  .mkl-page .mkl-resact > button { flex: 1 1 100%; }
  /* πίνακας → κάρτες */
  .mkl-page .mkl-th { display: none; }
  .mkl-page .mkl-tr { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 11px 0; }
  .mkl-page .mkl-tr > span[data-l]::before { content: attr(data-l) ": "; color: #64748B; font-size: 12px; }
  .mkl-page .mkl-row-act { width: 100%; }
  .mkl-page .mkl-row-act > button { flex: 1 1 100%; }
}

/* ── Κοινό παράθυρο ─────────────────────────────────────── */
.mkd-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(15, 23, 42, .35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mkd-modal { background: #FFFFFF; border-radius: 14px; width: 100%; max-width: 480px; max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(15, 23, 42, .18); overflow: hidden; color: #0F172A; }
.mkd-head { padding: 14px 18px; border-bottom: 1px solid #E2E8F0; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.mkd-title { min-width: 0; overflow-wrap: anywhere; }
.mkd-x { background: none; border: 0; color: #94A3B8; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; flex: none; }
.mkd-body { padding: 16px 18px; overflow-y: auto; }
.mkd-foot, .mkd-ask { padding: 12px 18px; border-top: 1px solid #E2E8F0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.mkd-ask { flex-direction: column; align-items: stretch; }
.mkd-ask-text { font-size: 14px; }
.mkd-ask-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.mkd-btn { border-radius: 10px; padding: 10px 16px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; background: #FFFFFF; color: #1D6FD8; border: 1px solid #BFD7F5; }
.mkd-btn.mkd-primary { background: #1D6FD8; color: #FFFFFF; border-color: #1D6FD8; }
.mkd-btn.mkd-danger { color: #B91C1C; border-color: #F3C4C4; }
.mkd-btn:disabled { opacity: .45; cursor: default; }
.mkd-modal .mkl-field label, .mkd-modal .mkn-field label { display: block; font-size: 13px; color: #475569; margin-bottom: 5px; font-weight: 500; }
.mkd-modal .mkl-hint { color: #B91C1C; font-size: 12px; margin-top: 4px; min-height: 1em; }
@media (max-width: 600px) {
  .mkd-overlay { padding: 0; align-items: flex-end; }
  .mkd-modal { border-radius: 14px 14px 0 0; max-width: none; }
  .mkd-foot, .mkd-ask-btns { flex-direction: column-reverse; }
  .mkd-btn { width: 100%; }
}

/* ── Παράθυρο «Ειδοποίηση στην εφαρμογή πελατών» ─────────── */
.mkd-modal .mkn-lead { margin: 0 0 12px; color: #475569; font-size: 14px; }
.mkd-modal .mkn-info { margin-bottom: 14px; }
.mkd-modal .mkn-count { background: #E8F1FD; border: 1px solid #BFD7F5; color: #1D6FD8; border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.mkd-modal .mkn-count b { font-size: 22px; margin-right: 4px; }
.mkd-modal .mkn-muted { color: #64748B; font-size: 14px; padding: 12px 0; }
.mkd-modal .mkn-empty { background: #F1F5F9; border-radius: 10px; padding: 12px 14px; color: #475569; font-size: 14px; }
.mkd-modal .mkn-warn { background: #FFF4E5; border: 1px solid #FDDDB0; color: #92400E; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.mkd-modal .mkn-link { background: none; border: 0; padding: 0; color: #1D6FD8; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 13px; }
.mkd-modal .mkn-inp { width: 100%; box-sizing: border-box; border: 1px solid #CBD5E1; border-radius: 10px; padding: 10px 12px; font-size: 15px; background: #FFFFFF; color: #0F172A; font-family: inherit; }
.mkd-modal .mkn-hint { color: #64748B; font-size: 12px; margin: 8px 0 0; }

/* ── Σημάδι «Όχι διαφημιστικά» στην καρτέλα πελάτη ───────── */
.mkf-box { margin-top: 12px; border-top: 1px solid #E2E8F0; padding-top: 12px; }
.mkf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.mkf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkf-title { font-weight: 600; font-size: 15px; }
.mkf-sub { color: #64748B; font-size: 13px; }
.mkf-note { color: #B45309; font-size: 12px; margin-top: 2px; }
.mkf-switch { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; border-radius: 12px; background: #CBD5E1; position: relative; cursor: pointer; border: 0; margin: 0; transition: background .15s; }
.mkf-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9px; background: #FFFFFF; transition: left .15s; }
.mkf-switch:checked { background: #1D6FD8; }
.mkf-switch:checked::after { left: 21px; }
.mkf-switch:disabled { opacity: .5; cursor: default; }