/* =========================================================
   MeinKunden — CLEAN styles.css (Dashboard + Modals + Auth base)
   Built for your current dashboard.html + dashboard.js classes
   ========================================================= */

:root{
  --bg: #eef2f7;
  --panel: #ffffff;
  --panel2: #f7faff;
  --line: rgba(15,23,42,0.10);
  --text: #0f172a;
  --muted: #64748b;

  --navy: #152238;
  --navy2: #1b2c4a;

  --danger: #dc2626;
  --danger2: #b91c1c;

  --r: 16px;
  --r-lg: 18px;

  --shadow: 0 10px 22px rgba(17,24,39,0.06);
  --shadow2: 0 18px 50px rgba(17,24,39,0.10);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden{ display:none !important; }

/* =========================================================
   DASHBOARD LAYOUT
   ========================================================= */
.crmShell{
  min-height: 100vh;
  display:flex;
  flex-direction: column;
}

/* Top bar */
.topBar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(245,248,252,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topBarLeft{
  display:flex;
  align-items:center;
  gap: 12px;
}

.topBarLeft .logo{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #0f1b33;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}

.topBarLeft .brand strong{
  display:block;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: -0.2px;
}
.topBarLeft .brand span{
  display:block;
  font-size: 12px;
  opacity: 0.75;
  margin-top: 1px;
}

.topBarRight{
  display:flex;
  gap: 10px;
  align-items:center;
}

/* Body grid */
.crmBody{
  flex: 1;
  display:grid;
  grid-template-columns: 330px 1fr;
  gap: 18px;
  padding: 18px;
  overflow: hidden;
}

/* Left */
.crmLeft{
  background: rgba(245,248,252,0.75);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  padding: 14px;
  overflow:auto;
}

.crmLeftTop{
  position: sticky;
  top: 0;
  background: transparent;
  padding-bottom: 12px;
}

.crmLeftTitle{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.mkSearch{
  width: 100%;
  margin-top: 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: #fff;
  border-radius: 14px;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
}
.mkSearch:focus{
  box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
  border-color: rgba(37,99,235,0.45);
}

.crmCustomerList{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

/* Customer item button created by JS */
.crmCustomerItem{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.85);
  border-radius: 16px;
  padding: 14px 14px;
  cursor:pointer;
  user-select:none;
  display:block;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}
.crmCustomerItem:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,27,51,0.08);
  border-color: rgba(15,27,51,0.16);
}
.crmCustomerItem.active{
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

.crmCustomerName{
  font-weight: 900;
  margin: 0 0 4px;
  font-size: 14px;
}
.crmCustomerSub{
  margin: 0;
  font-size: 13px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The old .crmCard is still used for empty states */
.crmCard{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* Empty state */
.emptyState{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.emptyIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(21,34,56,0.08);
  color: var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.emptyIcon svg{ width: 22px; height: 22px; }
.emptyText .t1{ font-weight: 950; font-size: 16px; margin-bottom: 4px; }
.emptyText .t2{ color: var(--muted); font-size: 13px; line-height: 1.35; }

/* Right */
.crmRight{
  background: rgba(245,248,252,0.75);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  padding: 18px;
  overflow:auto;
}

/* Home panel */
#homePanel .t1{
  font-weight: 950;
  font-size: 18px;
}
#homePanel .t2{
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Header */
.crmHeader{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}

.crmHeaderTitle{
  margin: 0;
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -0.5px;
  font-weight: 950;
}

.crmHeaderDesc{
  margin-top: 8px;
  font-size: 16px;
  color: rgba(15,23,42,0.72);
  max-width: 820px;
  line-height: 1.4;
}

.crmHeaderMeta{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(15,23,42,0.55);
}

.crmContactRow{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.crmContactItem{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.65);
  padding: 8px 10px;
  border-radius: 12px;
  display:inline-flex;
  gap: 8px;
  align-items:center;
  font-size: 13px;
}
.crmHeaderRight{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

/* Divider */
.crmDivider{
  border: 0;
  border-top: 1px solid rgba(15,23,42,0.08);
  margin: 18px 0;
}

/* Notes */
.crmNotesTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px; /* ✅ space between + button and first note */
}
#notesList{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.crmNoteCard{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.85);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(15,23,42,0.06);
}

.crmNoteTop{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  margin-top: 10px;
}

.crmNoteText{
  white-space: pre-wrap;
  line-height: 1.4;
  font-size: 15px;
}

.crmNoteMeta{
  font-size: 12px;
  color: rgba(15,23,42,0.60);
  font-weight: 700;
}

.crmNoteDelete{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.70);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.crmNoteDelete:hover{
  background: rgba(15,23,42,0.06);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.mkBtn{
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 15px;
  font-weight: 900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  user-select:none;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.mkBtn:active{ transform: translateY(1px); }
.mkBtn:disabled{ opacity: 0.55; cursor: not-allowed; }

.mkBtnWide{ width: 100%; justify-content:center; padding: 14px 14px; }

.mkBtnDark{
  background: var(--navy);
  color:#fff;
  box-shadow: 0 14px 26px rgba(21,34,56,0.20);
}
.mkBtnDark:hover{ background: var(--navy2); }

.mkBtnLight{
  background: rgba(255,255,255,0.75);
  color: var(--text);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 10px 26px rgba(15,23,42,0.06);
}
.mkBtnLight:hover{ background: rgba(255,255,255,0.90); }

.mkBtnDangerOutline{
  background: rgba(255,255,255,0.75);
  color: var(--danger);
  border-color: rgba(220,38,38,0.30);
}
.mkBtnDangerOutline:hover{ background: rgba(220,38,38,0.08); }

.mkBtnDanger{
  background: var(--danger);
  color:#fff;
  box-shadow: 0 14px 26px rgba(220,38,38,0.20);
}
.mkBtnDanger:hover{ background: var(--danger2); }

.mkIcon{ font-size: 18px; font-weight: 950; line-height: 1; }

/* =========================================================
   MODALS
   ========================================================= */
.mkModalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px;
  z-index: 99999;
}
.mkModal{
  width: min(720px, 100%);
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 30px 90px rgba(0,0,0,0.22);
  overflow:hidden;
  animation: popIn 180ms ease both;
}
@keyframes popIn{
  from{ transform: translateY(6px) scale(0.985); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

.mkModalHead{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  padding: 16px 18px 8px;
}
.mkModalTitle{
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.4px;
}
.mkModalX{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.85);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
}
.mkModalX:hover{ background: rgba(15,23,42,0.06); }

.mkModalBody{
  padding: 10px 18px 12px;
}
.mkLabel{
  display:block;
  font-size: 13px;
  font-weight: 900;
  margin: 12px 0 6px;
}
.mkInput, .mkTextarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  padding: 12px 12px;
  font-size: 14px;
  outline:none;
  background: #fff;
}
.mkInput:focus, .mkTextarea:focus{
  box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
  border-color: rgba(37,99,235,0.45);
}
.mkTextarea{ resize: vertical; }

.mkModalFooter{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 12px 18px 18px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .crmBody{ grid-template-columns: 1fr; }
  .crmLeft, .crmRight{ overflow: visible; }
  .crmHeaderTitle{ font-size: 32px; }
}
/* =========================================================
   AUTH PAGES – HARD LOCK (Login / Signup)
   This OVERRIDES any dashboard styles
   ========================================================= */

.authShell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.authCard{
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.10);
  padding: 22px 22px 18px;
}

.authBrand{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.authLogo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
}

.authTitle{
  font-weight: 950;
  font-size: 16px;
}

.authSubtitle{
  font-size: 13px;
  color: var(--muted);
}

.authH1{
  margin: 8px 0 14px;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.authForm{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.authLabel{
  font-size: 14px;
  font-weight: 800;
  margin-top: 8px;
}

.authInput{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 12px;
  font-size: 15px;
  outline: none;
  background: #fff;
}

.authInput:focus{
  box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
  border-color: rgba(37,99,235,0.45);
}

.authBtn{
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}

.authFooter{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}

.authLink{
  color: var(--navy);
  font-weight: 900;
  text-decoration: none;
}

.authLink:hover{
  text-decoration: underline;
}

.authError{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(220,38,38,0.25);
  background: rgba(220,38,38,0.06);
  color: #7f1d1d;
  font-size: 14px;
}
/* =========================================================
   PREMIUM PATCH (paste at END of styles.css)
   - fixes centered customer cards
   - makes notes/date/trash premium + clean
   - better spacing, typography, subtle glass/shadows
   ========================================================= */

/* --- Global premium rendering --- */
:root{
  --mk-shadow-soft: 0 10px 26px rgba(15,23,42,.06);
  --mk-shadow-hover: 0 18px 44px rgba(15,23,42,.10);
  --mk-border: rgba(15,23,42,.08);
  --mk-border-strong: rgba(15,23,42,.14);
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Shell spacing a bit calmer --- */
.crmBody{ gap: 18px; }
.crmLeft, .crmRight{
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.06);
}

/* --- Topbar: more premium/glass --- */
.topBar{
  border-radius: 18px;
  margin: 14px 18px 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: var(--mk-shadow-soft);
}

/* --- Sidebar title + spacing --- */
.crmLeftTitle{
  font-size: 20px;
  letter-spacing: -0.2px;
}
.crmCustomerList{ gap: 12px; }

/* =========================================================
   CUSTOMER LIST: FIX CENTERING + PREMIUM CARD
   ========================================================= */
#customerList,
.crmCustomerList{
  text-align: left !important;
}

.crmCustomerItem,
.crmCustomerList button,
.crmCustomerList .crmCard{
  text-align: left !important;
  display: block;
  width: 100%;
  border-radius: 18px !important;
  border: 1px solid var(--mk-border) !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.03), var(--mk-shadow-soft);
  padding: 14px 14px !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.crmCustomerItem:hover,
.crmCustomerList button:hover,
.crmCustomerList .crmCard:hover{
  transform: translateY(-1px);
  box-shadow: var(--mk-shadow-hover);
  border-color: var(--mk-border-strong) !important;
  background: rgba(255,255,255,.94) !important;
}

/* selected state */
.crmCustomerItem.active,
.crmCard.selected{
  border-color: rgba(37,99,235,.28) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10), var(--mk-shadow-hover);
}

/* inner typography if your JS uses title/sub */
.crmCardTitle, .crmCustomerName{
  font-weight: 900;
  letter-spacing: -0.2px;
}
.crmCardSub, .crmCustomerSub{
  opacity: .72;
  line-height: 1.25;
}

/* =========================================================
   RIGHT HEADER: premium + keep contact pills tight
   ========================================================= */
.crmHeaderTitle{
  letter-spacing: -0.6px;
}
.mkContactRow{ margin-top: 12px; gap: 10px; }
.mkContactPill{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 8px 10px;
}

/* Optional: hide email/phone line when NO customer selected (keeps menu clean)
   This works because in your JS you set selectedCustomer null.
   If you don't have a body class, we do it based on the dash "—". */

/* If both show "—", make the whole row subtle */
.mkContactRow{ opacity: 1; }



/* =========================================================
   NOTES: make date small, remove huge blocks, add spacing,
   remove “time feel”, keep only date, and improve delete btn
   ========================================================= */

/* spacing between "Notiz hinzufügen" and first note */
.crmNotesTop{ padding-bottom: 12px; }
.crmNotesList{ gap: 14px; }

/* if your JS uses crmNoteCard */
.crmNoteCard,
.noteCard,
.mkNoteCard{
  border: 1px solid var(--mk-border) !important;
  background: rgba(255,255,255,.88) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.03), var(--mk-shadow-soft);
  padding: 14px 14px !important;
}

/* top row with date + trash */
.crmNoteTop,
.noteTopRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

/* date: SMALL + premium */
.crmNoteMeta,
.noteDate,
.mkNoteMeta{
  font-size: 12px !important;
  opacity: .62;
  font-weight: 700;
  letter-spacing: .2px;
}

/* note text */
.crmNoteText,
.noteText,
.mkNoteText{
  font-size: 16px !important;
  line-height: 1.45;
  letter-spacing: -0.1px;
}

/* trash button */
.crmNoteDelete,
.iconBtn,
.mkIconBtn{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.crmNoteDelete:hover,
.iconBtn:hover,
.mkIconBtn:hover{
  transform: translateY(-1px);
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.16);
}

/* =========================================================
   Search + primary button polish
   ========================================================= */
.mkSearch{
  border-radius: 16px;
  border-color: rgba(15,23,42,.10);
}
.mkBtnDark{
  box-shadow: 0 14px 26px rgba(15,23,42,.18);
}
.mkBtnDark:hover{
  box-shadow: 0 18px 38px rgba(15,23,42,.22);
}

/* =========================================================
   Login/Auth page: ensure card looks correct even if older CSS clashes
   ========================================================= */
.authShell{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.authCard{
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.12);
}
.authH1{
  letter-spacing: -0.6px;
}
/* =========================================================
   PREMIUM PATCH — Modals (Customer / Note / Delete)
   Paste at VERY END of styles.css
   ========================================================= */

/* overlay πιο “premium” */
.mkModalOverlay{
  background: rgba(15,23,42,0.45) !important;
  backdrop-filter: blur(6px);
}

/* πιάνει και .mkModal και ό,τι έχεις μέσα στα overlays */
#customerModalOverlay .mkModal,
#noteModalOverlay .mkModal,
#deleteModalOverlay .mkModal,
.mkModal{
  border-radius: 22px !important;
  border: 1px solid rgba(227,234,244,0.9) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.18) !important;
  overflow: hidden;
}

/* header (πιάνει mkModalHeader ή mkModalHead) */
#customerModalOverlay .mkModalHeader,
#noteModalOverlay .mkModalHeader,
#deleteModalOverlay .mkModalHeader,
#customerModalOverlay .mkModalHead,
#noteModalOverlay .mkModalHead,
#deleteModalOverlay .mkModalHead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  padding: 18px 22px 8px;
}

#customerModalOverlay .mkModalTitle,
#noteModalOverlay .mkModalTitle,
#deleteModalOverlay .mkModalTitle{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.6px;
  margin: 0;
}

/* body spacing */
#customerModalOverlay .mkModalBody,
#noteModalOverlay .mkModalBody,
#deleteModalOverlay .mkModalBody{
  padding: 12px 22px 10px;
}

/* labels – πάντα block, σωστό spacing */
#customerModalOverlay .mkModalBody label,
#noteModalOverlay .mkModalBody label,
#deleteModalOverlay .mkModalBody label,
.mkModalBody label{
  display:block;
  font-size: 14px;
  font-weight: 900;
  color: rgba(15,23,42,0.85);
  margin: 12px 0 8px;
}

/* inputs / textarea – premium look */
#customerModalOverlay input,
#noteModalOverlay input,
#deleteModalOverlay input,
#customerModalOverlay textarea,
#noteModalOverlay textarea,
#deleteModalOverlay textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(227,234,244,0.95);
  background: #fff;
  padding: 12px 12px;
  font-size: 15px;
  outline: none;
}

#customerModalOverlay textarea,
#noteModalOverlay textarea{
  min-height: 160px;
  resize: vertical;
}

/* focus ring */
#customerModalOverlay input:focus,
#noteModalOverlay input:focus,
#deleteModalOverlay input:focus,
#customerModalOverlay textarea:focus,
#noteModalOverlay textarea:focus,
#deleteModalOverlay textarea:focus{
  box-shadow: 0 0 0 4px rgba(37,99,235,0.14);
  border-color: rgba(37,99,235,0.45);
}

/* footer – κουμπιά δεξιά, ωραίο gap */
#customerModalOverlay .mkModalFooter,
#noteModalOverlay .mkModalFooter,
#deleteModalOverlay .mkModalFooter{
  display:flex;
  justify-content:flex-end;
  gap: 12px;
  padding: 14px 22px 20px;
}

/* make buttons same “premium size” inside modals */
#customerModalOverlay .mkBtn,
#noteModalOverlay .mkBtn,
#deleteModalOverlay .mkBtn{
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 900;
  min-width: 140px;
}
/* Hide contact row when it's "empty" */
.mkContactRow.isHidden { display: none !important; }
/* Premium notes header */
.noteTopRow{
  font-size: 13px !important;
  margin-bottom: 10px !important;
  color: rgba(100,116,139,0.9) !important;
}

.noteDate{
  font-weight: 800 !important;
  letter-spacing: -0.2px;
}

.noteCard{
  padding: 16px 16px !important;
}

.noteText{
  font-size: 16px !important;
  line-height: 1.45 !important;
}
/* ===== Password strength meter ===== */
.pwStrength{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,23,42,.12);
}
.pwStrengthTop{
  display:flex;
  justify-content:space-between;
  font-size: 13px;
  color: rgba(15,23,42,.8);
  margin-bottom: 8px;
}
.pwStrengthBar{
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.12);
  overflow:hidden;
}
.pwStrengthFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #ef4444; /* κόκκινο default */
  transition: width .2s ease;
}

/* ===== Alerts (messages) ===== */
.alert{
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 14px;
  border: 1px solid transparent;
}
.alert--error{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.35);
  color: #991b1b;
}
.alert--success{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.35);
  color: #14532d;
}
.authPasswordRow{
  position:relative;
  display:flex;
  align-items:center;
}

.authInputPassword{
  padding-right:48px; /* χώρο για το μάτι */
}

.pwToggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:6px;
  border-radius:8px;
  opacity:.75;
}

.pwToggle:hover{
  opacity:1;
  background:rgba(15,23,42,.06);
}
/* =========================
   PREMIUM POLISH (Notes + Empty states)
   Paste at END of styles.css
   ========================= */

/* Notes: λίγο πιο “premium” */
.crmNotesTop{
  padding: 14px 0 10px;
}

.crmNotesList{
  margin-top: 18px;           /* να μην κολλάει με το + Notiz */
  gap: 14px;                  /* λίγο πιο tight αλλά καθαρό */
}

.noteCard{
  border-radius: 18px;
  padding: 16px 16px;
}

.noteTopRow{
  font-size: 14px;            /* πιο ήσυχο */
  margin-bottom: 10px;
  color: rgba(15,23,42,0.55);
}

.noteDate{
  font-weight: 800;
  letter-spacing: -0.1px;
}

/* Το delete icon πιο “pro” */
.iconBtn{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.55);
}
.iconBtn:hover{
  background: rgba(15,23,42,0.07);
  border-color: rgba(15,23,42,0.10);
  color: rgba(15,23,42,0.75);
}

/* Empty states: να μοιάζουν “designed” */
.mkEmptyWrap{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.mkBubble{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  padding: 16px 16px;
  box-shadow: 0 14px 34px rgba(15,23,42,0.06);
}

.mkBubbleTitle{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}

.mkBubbleText{
  font-size: 14px;
  color: rgba(15,23,42,0.72);
  line-height: 1.45;
}

/* Home panel να “κάθεται” ωραία */
#homePanel{
  margin-bottom: 16px;
}

/* Contact row: πιο ήρεμο, pill style */
.mkContactRow{
  margin-top: 12px;
  gap: 10px;
}
.mkContactPill{
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(15,23,42,0.08);
}

/* Αν θες λίγο πιο μικρά overall buttons μόνο στο dashboard */
.topBar .mkBtn{
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 14px;
}
/* Pills container: να σπάει ωραία */
.pillsRow, .custMeta, .customerMeta, .metaRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  align-items: start;
}

/* Το ίδιο το pill: να μη σπάει άσχημα */
.pill, .chip, .metaPill {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 999px;

  overflow: hidden;
  min-width: 0;             /* κρίσιμο για ellipsis μέσα σε grid */
}

/* Το κείμενο μέσα: να μην πετάγεται εκτός */
.pill span, .chip span, .metaPill span,
.pill strong, .chip strong, .metaPill strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Σε πολύ μικρό: 1 στήλη */
@media (max-width: 520px) {
  .pillsRow, .custMeta, .customerMeta, .metaRow {
    grid-template-columns: 1fr;
  }
}
/* ---------- Responsive contact pills (E-Mail / Telefon) ---------- */
.mkContactRow{
  display:flex;
  flex-wrap:wrap;           /* να σπάνε όμορφα */
  gap:12px;
  align-items:center;
  min-width:0;
}

/* κάθε pill να παίρνει χώρο σωστά */
.mkContactPill{
  display:flex;
  align-items:center;
  gap:8px;

  padding:10px 14px;
  border-radius:999px;

  min-width:0;              /* κρίσιμο για ellipsis */
  max-width:100%;
}

/* label + value να μην πετάγονται έξω */
.mkContactLabel{
  white-space:nowrap;
  opacity:.75;
}

.mkContactPill strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Σε μεσαίες/μικρές οθόνες: 2 στήλες */
@media (max-width: 900px){
  .mkContactPill{
    flex: 1 1 280px;        /* 2 ανά σειρά περίπου */
  }
}

/* Σε πολύ μικρό: 1 στήλη */
@media (max-width: 520px){
  .mkContactPill{
    flex: 1 1 100%;
  }
}
/* =========================================================
   MeinKunden — FINAL PATCH (Premium + Responsive Fix)
   Paste at the VERY END of styles.css
   ========================================================= */

/* ---------- Alerts (success + error) ---------- */
.alert{
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: #f3f4f6;
  color: #111827;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 10px 20px rgba(17,24,39,0.05);
}
.alert--success{
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.alert--error{
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* ---------- Auth: password eye + strength bar ---------- */
.pwWrap{ position: relative; }
.pwWrap .authInput{ padding-right: 48px; }

.pwToggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(15,23,42,0.75);
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.pwToggle:hover{
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.14);
  transform: translateY(-50%) translateY(-1px);
}
.pwToggle:active{ transform: translateY(-50%) translateY(1px); }

.pwStrength{ margin-top: 10px; }
.pwStrengthTop{
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-size: 13px;
  color: rgba(15,23,42,0.72);
  margin-bottom: 6px;
}
.pwStrengthBar{
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.10);
  overflow:hidden;
}
.pwStrengthFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 160ms ease;
}

/* =========================================================
   Dashboard: header layout that DOESN'T break on resize
   Fix: buttons + email/phone stay neat (wrap nicely)
   ========================================================= */

/* Make header use grid for stability */
.crmHeader{
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}

/* Left side (title + desc + meta + pills) */
.crmHeaderLeft{
  min-width: 0; /* crucial for wrapping */
}

/* Actions */
#customerActions{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Contact pills row */
.mkContactRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Make pills not too fat and responsive */
.mkContactPill{
  max-width: 100%;
  border-radius: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 10px 22px rgba(17,24,39,0.05);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}
.mkContactPill strong{
  font-weight: 900;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Buttons slightly smaller (premium) */
.mkBtn{
  font-size: 15px !important;
  padding: 11px 14px !important;
  border-radius: 14px !important;
}
.mkBtnWide{ padding: 14px !important; }

/* Notes spacing: button not glued to first note */
.crmNotesTop{ padding: 16px 0 !important; }
.crmNotesList{ padding-top: 10px !important; }

/* Notes: remove time visually if any old styles show it */
.noteTopRow{
  font-size: 14px !important;
}
.noteDate{
  font-weight: 800 !important;
}

/* =========================================================
   Home panel bubbles: clean two cards (stable)
   ========================================================= */
.crmHome{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.crmHome .crmCard{
  cursor: default;
}

/* =========================================================
   Responsive breakpoints
   ========================================================= */

/* Tablet: stack actions under header left, keep calm */
@media (max-width: 920px){
  .crmHeader{
    grid-template-columns: 1fr !important;
  }
  #customerActions{
    justify-content: flex-start;
  }
}

/* Mobile: pills full-width, buttons full-width */
@media (max-width: 560px){
  .mkContactRow{
    flex-direction: column;
    align-items: stretch;
  }
  .mkContactPill{
    width: 100%;
    justify-content: space-between;
    white-space: normal;
  }
  .mkContactPill strong{
    max-width: 70%;
  }

  #customerActions .mkBtn{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   Hide the 3 red X close buttons if they appear
   (keeps IDs but removes from UI)
   ========================================================= */
#customerClose, #noteClose, #deleteClose{
  display: none !important;
}
.pwWrap{ position:relative; display:flex; align-items:center; }
.pwWrap .authInput{ padding-right:48px; }

.pwToggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:6px 8px;
  border-radius:10px;
  opacity:.75;
}
.pwToggle:hover{ opacity:1; }
/* ===== Password eye (premium) ===== */
.pwWrap{
  position: relative;
  display: flex;
  align-items: center;
}

.pwWrap .authInput{
  padding-right: 44px; /* space for icon */
}

.pwToggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.pwToggle:hover{
  transform: translateY(-50%) translateY(-1px);
  background: #fff;
  border-color: rgba(15,23,42,.18);
}

.pwToggle svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #2563eb; /* premium blue */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* default: show open eye */
.pwToggle .eye-closed{ display: none; }

/* when password is visible -> show closed eye */
.pwToggle.isOn .eye-open{ display: none; }
.pwToggle.isOn .eye-closed{ display: block; }
.pwToggle .eye-closed { display: none; }
.pwToggle.is-open .eye-open { display: none; }
.pwToggle.is-open .eye-closed { display: inline; }
/* --- Über uns / Mehr erfahren layout --- */
.lpMain { max-width: 1100px; margin: 0 auto; padding: 18px 18px 70px; }

.lpStory { display: grid; place-items: center; padding: 24px 0; }

.lpStoryCard{
  width: 100%;
  max-width: 860px;
  background: #ffffff;
  border: 1px solid rgba(230,236,255,.9);
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 18px 45px rgba(20,40,120,0.08);
}

.lpStoryTitle{
  margin: 0;
  font-size: 44px;
  letter-spacing: -1px;
  line-height: 1.06;
  color: #0b1220;
}

.lpStoryP{
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: #5b6b8a;
}

.lpStoryH2{
  margin: 18px 0 0;
  font-size: 16px;
  color: #0b1220;
  font-weight: 900;
}

.lpStoryList{
  margin: 10px 0 0;
  padding-left: 18px;
  color: #5b6b8a;
  line-height: 1.75;
  font-size: 14px;
}

.lpStoryDivider{
  margin: 22px 0;
  height: 1px;
  background: rgba(230,236,255,.9);
}

.lpStoryCtas{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.lpStoryTiny{ margin-top: 14px; font-size: 12px; color: #94a3b8; }

@media (max-width: 720px){
  .lpStoryTitle{ font-size: 34px; }
  .lpStoryCard{ padding: 22px; }
}
/* ===== Premium buttons (landing + über) ===== */
.lpNav{
  display:flex;
  gap:12px;
  align-items:center;
}

.lpLink{
  display:inline-flex;
  align-items:center;
  height:44px;
  padding:0 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  color:#51607a;
  border:1px solid rgba(230,236,255,.95);
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(180%) blur(6px);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.lpLink:hover{
  color:#0b1220;
  background:#fff;
  border-color:rgba(210,220,255,.95);
  box-shadow:0 10px 25px rgba(20,40,120,.10);
  transform:translateY(-1px);
}

.lpBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(230,236,255,.95);
  background:#fff;
  color:#0b1220;
  box-shadow:0 10px 25px rgba(20,40,120,.08);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.lpBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(20,40,120,.12);
  border-color:rgba(210,220,255,.95);
}

.lpBtn:active,
.lpLink:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(20,40,120,.10);
}

/* primary */
.lpBtnPrimary{
  background:linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 18px 45px rgba(29,78,216,.22);
}

.lpBtnPrimary:hover{
  box-shadow:0 22px 55px rgba(29,78,216,.28);
}

/* ghost (secondary) */
.lpBtnGhost{
  background:rgba(255,255,255,.65);
  color:#0b1220;
}

/* Bottom CTA row (über page) */
.lpStoryCtas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}
/* ===== Fix top-left header alignment on pages like Über uns ===== */
body.landing{
  background:#f3f6ff;
}

.lpTop{
  max-width:1100px;
  margin:0 auto;
  padding:22px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.lpBrand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.lpLogo{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#0b1220;
  color:#fff;
  font-weight:900;
  letter-spacing:.4px;
  flex:0 0 auto;
}

.lpBrandText strong{
  display:block;
  font-weight:900;
  color:#0b1220;
  line-height:1.1;
}

.lpBrandText span{
  display:block;
  color:#5b6b8a;
  font-size:12px;
  margin-top:2px;
}
.homeLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.homeLink:hover {
  background: rgba(37, 99, 235, 0.08);
}

.homeIcon {
  width: 20px;
  height: 20px;
  fill: #2563eb; /* ίδιο μπλε με τα κουμπιά */
}
/* ---------- Home icon (spitaki) ---------- */
.mkHomeIcon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  text-decoration: none;
  border: 1px solid #e6ecff;
  background: #ffffff;
  color: #2563eb; /* ίδιο μπλε με site */
  box-shadow: 0 10px 25px rgba(37,99,235,.10);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.mkHomeIcon:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(37,99,235,.16);
  background: #f7f9ff;
}
.mkHomeIcon svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---------- Auth top row: brand left, home right ---------- */
.authTopRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.authBrandLeft{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* ---------- Landing/About: home slightly left (between brand and nav) ---------- */
.lpTop{
  display:flex;
  align-items:center;
  gap: 14px;
}
.lpNav{ margin-left:auto; } /* κρατάει τα κουμπιά δεξιά */
.lpHomeSlot{
  display:flex;
  align-items:center;
  margin-left: 6px; /* “λίγο πιο αριστερά” */
}
:root{
  --mk-bg: #f3f6ff;
  --mk-card: #ffffff;
  --mk-text: #0b1220;
  --mk-muted: #5b6b8a;
  --mk-blue: #2b5bf0;      /* πιο σκούρο μπλε */
  --mk-blue-2: #244bd6;
  --mk-shadow: 0 18px 40px rgba(16,36,86,0.08);
  --radius-lg: 14px;
}

/* header */
.siteHeader{
  background: var(--mk-bg);
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(20,30,60,0.02);
}
.siteHeader-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: inherit;
}
.brandLogo{
  width:54px;
  height:54px;
  border-radius:14px;
  background:var(--mk-text);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:18px;
  box-shadow: 0 10px 25px rgba(11,17,32,0.06);
}
.brandTitle{ font-weight:900; color:var(--mk-text); font-size:18px; line-height:1; }
.brandSubtitle{ font-size:13px; color:var(--mk-muted); margin-top:2px; }

/* nav */
.siteNav{ display:flex; gap:12px; align-items:center; }
.navLink{
  color:var(--mk-text);
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  opacity:.95;
}
.ctaBtn{
  display:inline-block;
  padding:10px 18px;
  border-radius:14px;
  background:linear-gradient(180deg,var(--mk-blue),var(--mk-blue-2));
  color:#fff;
  font-weight:900;
  box-shadow: 0 18px 40px rgba(37,86,240,0.18);
  text-decoration:none;
}

/* small home icon (floating right inside header) */
.homeIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:#fff;
  box-shadow: 0 8px 20px rgba(20,30,60,0.06);
  color:var(--mk-blue);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.homeIcon:hover{ transform:translateY(-3px); box-shadow: 0 14px 34px rgba(20,30,60,0.08); }

/* responsive */
@media (max-width: 900px){
  .siteHeader-inner{ padding:12px 18px; }
  .brandLogo{ width:44px; height:44px; font-size:16px; }
  .ctaBtn{ padding:9px 14px; }
}
/* ===== DASHBOARD HEADER ===== */

.dashHeader {
  background: #ffffff;
  border-bottom: 1px solid #eef2ff;
}

.dashHeaderInner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LEFT BLOCK */
.dashBrandWrap {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dashBrand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashLogo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #0f172a;
  color: white;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.dashBrandTitle {
  font-weight: 800;
  font-size: 16px;
  color: #0f172a;
}

.dashBrandSub {
  font-size: 12px;
  color: #64748b;
}

/* HOME BUTTON */
.homeBtn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f1f5ff;
  color: #3b5bdb;
  display: grid;
  place-items: center;
  transition: 0.2s ease;
  text-decoration: none;
}

.homeBtn:hover {
  background: #e0e7ff;
}

/* MENU BUTTON */
.menuBtn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

/* LOGOUT BUTTON */
.logoutBtn {
  background: #0f172a;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.logoutBtn:hover {
  opacity: 0.85;
}
/* Toasts */
#toastRoot{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  display: grid;
  gap: 10px;
}

.toast{
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e6ecff;
  box-shadow: 0 16px 40px rgba(12, 24, 48, .14);
  color: #0b1220;
  animation: toastIn .16s ease-out;
}

.toast__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: #eef2ff;
  color: #1d4ed8;
}

.toast__msg{
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  color: #0b1220;
}

.toast__close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid #e6ecff;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #5b6b8a;
}

.toast--success .toast__icon{ background:#dcfce7; color:#15803d; }
.toast--error .toast__icon{ background:#fee2e2; color:#b91c1c; }
.toast--warning .toast__icon{ background:#ffedd5; color:#b45309; }

.toast--hide{ opacity: 0; transform: translateY(-6px); transition: .22s ease; }

@keyframes toastIn{
  from{ opacity:0; transform: translateY(-8px); }
  to{ opacity:1; transform: translateY(0); }
}