/* ==========================
    ek4ystyle.css
    Root / Theme Variablen
   ========================== */
:root{
  --sb-bg: #0f1115;
  --sb-fg: #fff;
  --sb-border: #252B37;
  --sb-hover: #17D68F;
  --sb-active: #17D68F;
  --sb-active-sub: #494949;
  --sb-pill: #fff;
  --sb-w: 220px;
  --sb-w-collapsed: 80px;

  --ek4y-green: #17D68F;
  --ek4y-green-2: #15C282;
  --ek4y-green-3: #13B075;
  --muted: #6c757d;
  --bg: #f5f5f5;
  --card-bg: #fff;
  --border: #dee2e6;
  --shadow-1: 0 4px 8px rgba(0,0,0,.1);
  --gap: 1rem;
}

/* ==========================
   Base / Resets (mobile-first)
   ========================== */
html, body {
  height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  color: #1b1f27;
  -webkit-tap-highlight-color: transparent;
}

.app {
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
}

.min-w-0 { min-width: 0 !important; }

.cursor-pointer { cursor: pointer; }

/* ==========================
   Preloader
   ========================== */
#preloader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .25s ease;
}

#preloader.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity .25s ease, visibility .25s .25s;
}

.pre-spin {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.pre-progress {
  width: min(420px, 80%);
  height: 8px;
  background: #f1f3f5;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.pre-bar {
  height: 100%;
  width: 0%;
  background: #0d6efd;
  transition: width .15s ease;
}

.pre-pct { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* ==========================
   Buttons + Form Selects (shared touch)
   ========================== */
.btn,
.form-select {
  /* original: height: 2.5rem; kept but improved with min-height */
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem 1rem;
  border-radius: .5rem;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* ADDED: ensure proper touch target */
.btn { min-height: 44px; } /* MOBILE-ADJUST */

/* Brand Buttons (kept original defs, grouped) */
.btn-ek4y-green {
  background: var(--ek4y-green);
  border: none;
  color: #fff;
  padding: 8px 16px;
  font-weight: 500;
  border-radius: 4px;
  transition: background-color .2s;
}
.btn-ek4y-green:hover,
.btn-ek4y-green:active { background: var(--ek4y-green-2) !important; color: #fff !important; }
.btn-ek4y-green:focus { background: var(--ek4y-green-3) !important; color: #fff !important; }
.dashb-con-dash-btn-orange {
  background: #ffb01e; color: #fff !important; border: none; padding: 8px 16px;
  font-weight: 500; border-radius: 4px; transition: background-color .2s;
}
.dashb-con-dash-btn-orange:hover,.dashb-con-dash-btn-orange:active{ background:#ec9a00; }
.dashb-con-dash-btn-orange:focus{ background:#d38900 !important; color:#fff !important; }

.dashb-con-dash-btn-pink {
  background: #f0f; color: #fff; border: none; padding: 8px 16px;
  font-weight: 500; border-radius: 4px; transition: background-color .2s;
}
.dashb-con-dash-btn-pink:hover,.dashb-con-dash-btn-pink:active{ background:#e700e7; color:#fff !important; }
.dashb-con-dash-btn-pink:focus{ background:#ce00ce !important; color:#fff !important; }

/* Shared hover smoothing (kept) */
.dashb-con-dash-btn-orange, .btn-ek4y-green, .dashb-con-dash-btn-pink { color:#fff; transition: background-color .3s; }

/* ==========================
   Layout: Main / Sidebar (mobile-first)
   ========================== */
/* MOBILE: main-content starts edge-to-edge */
.main-content {
  margin-left: 0; /* MOBILE-ADJUST (desktop override later) */
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sidebar base (mobile hidden by transform) */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: var(--sb-bg);
  color: var(--sb-fg);
  display: flex;
  flex-direction: column;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: width .25s ease, transform .25s ease;
  /* MOBILE: slide off-canvas */
  transform: translateX(-100%);
  width: var(--sb-w);
  min-width: var(--sb-w);
  z-index: 10000;
}

/* when opened on mobile */
.sidebar.open { transform: none; }

/* collapsed iconbar state kept */
.sidebar.iconbar { width: var(--sb-w-collapsed); min-width: var(--sb-w-collapsed); }
.sidebar.iconbar .link-text, .sidebar.iconbar .brand-wordmark, .sidebar.iconbar .dropdown-toggle::before { display: none; }
.sidebar.iconbar .brand-glyph { display: block; }
.sidebar.iconbar .nav-link { justify-content: center; padding: 10px; }

/* Sidebar brand & profile */
.sidebar-brand { padding: 18px 16px 8px; flex-shrink:0; }
.brand-wordmark { display:block; max-width:150px; height:auto; }
.brand-glyph { display:none; width:32px; height:auto; }

/* Sidebar nav container */
.sidebar > .nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: visible;
}

/* scrollbar styling kept */
.sidebar > .nav::-webkit-scrollbar { width: 8px; }
.sidebar > .nav::-webkit-scrollbar-thumb { background: #1f2430; border-radius: 8px; }

/* Sidebar links */
.sidebar .nav-link {
  display: flex !important;
  align-items: center;
  gap: .75rem;
  width: 90% !important;
  padding: 8px;
  margin: 0 0 6px 10px;
  text-decoration: none;
  color: var(--sb-fg);
  border-radius: 10px;
  transition: background .15s, color .15s;
}
.sidebar .nav-link i { font-size: 1rem; color: inherit; }
.sidebar .nav-link:hover { background: var(--sb-hover); color: #e7ecf3; }
.sidebar .nav-link.active { background: var(--sb-active); color: var(--sb-pill); }
.sidebar .nav-link.active-sub { background: var(--sb-active-sub); color: var(--sb-pill); }
.sidebar .nav-link.active i { color: var(--sb-pill); }

/* dropdown caret kept */
.sidebar .dropdown-toggle { position: relative; display:flex; align-items:center; }
.sidebar .dropdown-toggle::before {
  content: ""; width:8px; height:8px; margin:0 .25rem;
  border-right:2px solid #8a8f98; border-bottom:2px solid #8a8f98;
  transform: rotate(-45deg); opacity:.7; transition: transform .15s, opacity .15s;
}
.sidebar .dropdown-toggle[aria-expanded="true"]::before { transform: rotate(45deg); opacity:1; }
#profileDropdownHead.dropdown-toggle::after { display: none !important; }
.sidebar .dropdown-toggle::after {
  display: none !important;
  content: none !important;
}
.sidebar .collapse { max-width: 100%; overflow: visible !important; }
.sidebar .collapse .nav-link:hover { background: var(--sb-hover); color: #e7ecf3; }

/* Sidebar divider */
.hrnav { border-color: var(--sb-border); width: 90%; margin: 5px 0 5px 3px; }

/* Sidebar profile */
.sidebar-profile { margin-top: auto; padding: 14px; border-top: 1px solid var(--sb-border); }
.sidebar-profile .profile-card {
  background: #121720;
  border: 1px solid rgba(255,255,255,.06);
  padding: 10px 12px;
  border-radius: 12px;
}
.sidebar-profile .profile-container { display:flex; align-items:center; gap:.75rem; }
.sidebar-profile .profile-avatar-initials {
  width: 36px; height: 36px; border-radius:50%; background:#E9ECEF; color:#2b2f36; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-profile .profile-name { color:#e7ecf3; font-weight:700; }
.sidebar-profile .dropdown-toggle::before { display:none; }
.sidebar-profile .dropdown-menu { bottom:100%; top:auto; margin-bottom:.5rem; }

/* iconbar profile adjustments */
.sidebar.iconbar .sidebar-profile { padding:10px; }
.sidebar.iconbar .sidebar-profile .profile-card { padding:8px; border-radius:12px; width:56px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.sidebar.iconbar .sidebar-profile .profile-avatar-initials { width:40px; height:40px; }
.sidebar.iconbar .sidebar-profile .profile-name { display:none; }

/* Sidebar States Desktop override at larger breakpoints below */

/* ==========================
   Header / Sticky
   ========================== */
.sticky-header {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 1000;
  border-bottom: 1px solid var(--border);
}

/* Dashboard title etc */
.dashboard-title { font-size: 1.2rem; font-weight:600; padding-left:20px; }
.icon-link { color:#333; transition: color .2s; }
.icon-link:hover { color: var(--ek4y-green); }

/* avatar */
.header-avatar { width: 40px; height: 40px; position: relative; }
.avatar-initials {
  width:40px; height:40px; background:#f5f5f5; color:#333; border-radius:50%; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.avatar-status-dot { position:absolute; bottom:0; right:0; width:10px; height:10px; background:var(--ek4y-green); border-radius:50%; border:2px solid #fff; }

/* badges */
.badge-pv, .badge-wp { border-radius:999px; padding:.25em .75em; font-size:.875rem; }
.badge-pv { background:#E7FCEC; color: var(--ek4y-green); }
.badge-wp { background:#F0E8FF; color:#8C6ADE; }

/* ==========================
   Tabs (responsive)
   ========================== */
.bp-tabs {
  position: sticky;
  top: 56px;
  height: 88px;
  z-index: 1001;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.bp-tabs .ek4y-tabs {
  display:flex; gap:.5rem; flex-wrap: wrap; padding: .5rem 1rem; margin:0;
}
.bp-tabs .ek4y-tabs .nav-item { flex: 0 0 auto; }
.bp-tabs .ek4y-tabs .nav-link {
  background: #fff !important; color: #181d27 !important; border:none !important;
  padding:.5rem .75rem; border-radius:999px; font-weight:500; line-height:1; white-space:nowrap; position:relative;
}
.bp-tabs .ek4y-tabs .nav-link.active { color:#181d27 !important; font-weight:600; }
.bp-tabs .ek4y-tabs .nav-link.active::after {
  content:""; position:absolute; left:10%; right:10%; bottom:-8px; height:3px; border-radius:3px; background:var(--ek4y-green);
}
.bp-tabs .ek4y-tabs .nav-link:hover { color: var(--ek4y-green) !important; }

/* small-screen scroll behavior for tabs */
@media (max-width:575.98px) {
  .bp-tabs .ek4y-tabs { flex-wrap: nowrap; overflow:auto; -webkit-overflow-scrolling: touch; }
  .bp-tabs .ek4y-tabs::-webkit-scrollbar { height: 6px; }
}

/* ==========================
   Nav Tabs (card style)
   ========================== */
.card-container {
  border-radius: 0; box-shadow: var(--shadow-1); border: 1px solid var(--border); background: var(--card-bg); margin-bottom: 1rem;
}
.nav-tabs { border-bottom: 2px solid var(--border) !important; }
.nav-tabs .nav-link {
  background: var(--card-bg) !important; color:#000 !important; border: 1.5px solid var(--border) !important;
  border-bottom: none !important; border-radius: 8px 8px 0 0 !important; margin-right:6px; font-weight:500;
  transition: color .12s, border-color .12s, background .12s; min-width:140px; text-align:center;
}
.nav-tabs .nav-link.active { color: var(--ek4y-green) !important; font-weight:600; z-index:2; }
.nav-tabs .nav-link:hover:not(.active) { color: var(--ek4y-green) !important; background: #fafafa !important; }

/* mobile overflow for nav-tabs */
@media (max-width:600px) {
  .nav-tabs { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap !important; }
  .nav-tabs .nav-item { display:inline-block; }
  .nav-tabs .nav-link { min-width:120px; font-size:15px; margin-bottom:0; }
}

/* ==========================
   Cards / Lists
   ========================== */
.card-dashboard { border-radius: 0; box-shadow: var(--shadow-1); border: 1px solid var(--border); background: var(--card-bg); margin-bottom:1rem; }
.card-header, .card-footer { border-bottom: 1px solid var(--border); padding: 10px; font-weight:700; background: #f8f9fa; }
.list-group-item {
  display:flex; align-items:center; justify-content:space-between; padding:10px 15px; border-bottom:1px solid var(--border);
}
.list-group-item:last-child { border-bottom:none; }

/* placeholder etc */
.placeholder-card { font-style: italic; color:#888; text-align:center; padding: 20px; }

/* ==========================
   Forms / Inputs
   ========================== */
.dashb-h4 { font-size:16px; color:#181D27; margin-bottom:15px; font-weight:600; }
.form-label { font-size:14px; color:#414651; }
.form-control {
  background: #fff; border: 1px solid #D5D7DA; border-radius:8px; padding:10px 14px; font-size:14px; line-height:20px; color:#333;
}
.dashb-form-group { display:flex; flex-direction:column; margin-bottom:1rem; }
.dashb-form-group input { flex-grow:1; }
.dashb-notiz-box { white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; }

/* search */
.crm-search .btn, .crm-search .form-control { height: 2.5rem; }
.crm-search .btn {
  background: #28a745; border-color: #28a745; color:#fff; border-radius:.25rem 0 0 .25rem; padding:0 .75rem; display:flex; align-items:center;
}
.crm-search .form-control { border-radius: 0 .25rem .25rem 0; border:1px solid #ced4da; z-index: 99999 !important; }

/* SEARCH: Overlay (mobile) + dropdown (desktop) */
#searchoverlay { position: fixed; inset: 0; z-index: 6000; display: none; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); }
#searchoverlay.active { display: block; }
#searchoverlay .search-panel { position: absolute; top: env(safe-area-inset-top, 12px); left: 0; right: 0; margin: 0 auto; max-width: 960px; padding: 12px; }
/* search box at top inside overlay */
#searchoverlay .search-top { display:flex; gap:.5rem; align-items:center; }
#searchoverlay .search-top .form-control { font-size:16px; padding: .75rem 1rem; }
#searchoverlay .search-close { background:transparent; border:none; font-size:1.25rem; padding:.5rem; color:#fff }


/* results list (shared) */
#search-results.fullscreen { margin-top:12px; max-height: calc(100vh - 140px); overflow:auto; border-radius:12px; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.2); }
#search-results.fullscreen .list-group-item { display:flex; gap:.75rem; align-items:flex-start; padding:.75rem; }
#search-results.fullscreen .result-thumb { width:56px; height:40px; object-fit:cover; border-radius:6px; flex:0 0 56px; }
#search-results.fullscreen .result-body { flex:1 1 auto; }
#search-results.fullscreen .result-title { font-weight:600; font-size:.95rem; }
#search-results.fullscreen .result-sub { font-size:.85rem; color:#6c757d }


/* desktop dropdown style (keeps old absolute behavior, but raised z-index) */
#search-results.position-absolute { z-index: 6050; max-height: 50vh; overflow:auto; box-shadow:0 6px 20px rgba(0,0,0,.12); }


/* hide scroll-edge arrows while search open */
body.search-open .scroll-edge { opacity:0; pointer-events:none !important; }


/* Accessibility: focus styles */
#search-results .list-group-item:focus { outline: 2px solid #17D68F; background:#f8fffa }
/* ==========================
   Login (responsive)
   ========================== */
.login-container {
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem 5px; background: var(--bg);
}
.login-wrap {
  background: var(--card-bg); border-radius:16px; box-shadow: 0 4px 6px rgba(0,0,0,.1); overflow:hidden; max-width:450px; width:100%;
  display:flex; flex-direction:column;
}
.login-img {
  width:100%; background: url('../img/logo_ek4you_b.webp') center center no-repeat; background-size:contain; padding:15%;
}
.login-form-container { padding: 1.5rem 2rem 2rem; flex-grow:1; display:flex; flex-direction:column; justify-content:center; }
.login-form-control { width:100%; margin-bottom:1rem; padding:.75rem 1rem; font-size:1rem; border:1px solid #ccc; border-radius:8px; }
.login-button {
  background: var(--ek4y-green); color:#fff; font-weight:600; padding:.75rem; border:none; border-radius:8px; cursor:pointer; transition:background .3s;
}
.login-button:hover { background: #13b075; }

/* mobile tweaks for login */
@media (max-width:768px) {
  .login-wrap { max-width:400px; }
  .login-img { padding-top:25%; }
  .login-form-container { padding:1rem 1.5rem 1.5rem; }
}
@media (max-width:480px) {
  .login-wrap { background: none; border-radius:0; box-shadow:none; max-width:100%; height:100vh; padding:0; }
  .login-container { padding: 0 5px; }
  .login-form-container { padding:1rem .5rem; flex-grow:1; display:flex; flex-direction:column; justify-content:center; }
}

/* ==========================
   Dashboard / Sections / Masonry
   ========================== */
.dashboard-section { width:100%; margin-bottom:1rem; padding:15px; }
.masonry-container { column-count:1; column-gap:1rem; }
@media (max-width:1300px) { .masonry-container { column-count:2; } }
@media (min-width:1301px) { .masonry-container { column-count:3; } }

/* ==========================
   Grid / Buttons Group Responsive
   ========================== */
.btn-group-responsive { display:inline-flex; flex-wrap:wrap; gap:.5rem; }
.btn-group-responsive > * {
  flex: 1 1 auto; min-width:150px; text-align:center; white-space:nowrap; padding:.6rem 1rem;
}
@media (max-width:768px) {
  .btn-group-responsive > * { flex: 1 1 100%; width:100%; }
}
@media (max-width:576px) {
  .btn-group-responsive > * { flex: 1 1 100%; text-align:center; white-space:normal; padding:.6rem 1rem; }
}

/* ==========================
   Tabs / Navs responsive (kept)
   ========================== */
/* bp-tabs already above */

/* ==========================
   Modals (Notiz + Image Fullscreen)
   ========================== */
.modal-notiz .modal-dialog { margin:0; width:100vw; max-width:100vw; }
@media (min-width:577px) {
  .modal-notiz .modal-dialog { width:auto; max-width:90vw; margin:110px auto 0; }
}
.modal-notiz .modal-content, .modal-notiz .modal-body { padding:0 !important; margin:0; height:100vh; max-height:100vh; }
.modal-notiz .modal-body embed, .modal-notiz .modal-body object, .modal-notiz .modal-body iframe {
  width:100% !important; height:100% !important; border:none; object-fit:contain;
}

/* fullscreen image modal */
.modal-image-fullscreen .modal-dialog { margin:0; max-width:100vw; max-height:100vh; }
.modal-image-fullscreen .modal-content { display:flex; flex-direction:column; height:100vh; }
.modal-image-fullscreen .modal-header, .modal-image-fullscreen .modal-footer {
  flex:0 0 auto; background:#fff; border-color:#ccc !important; padding:.5rem 1rem;
}
.modal-image-fullscreen .modal-header .btn-close { cursor:pointer; }
.modal-image-fullscreen .modal-body {
  flex:1 1 auto; display:flex; justify-content:center; align-items:center; overflow:hidden; background:#fff;
}
.modal-image-fullscreen .modal-body img { max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; transition: transform .3s; }
.modal-image-fullscreen .modal-body img.zoomed { cursor: zoom-out; }
.modal-image-fullscreen .modal-body embed, .modal-image-fullscreen .modal-body iframe { width:100%; height:100%; object-fit:contain; }

/* ==========================
   Uploads / Dropzone
   ========================== */
.upload-dropzone {
  position:relative; border:1px solid var(--border); border-radius:12px; background:var(--card-bg);
  padding:16px 24px; text-align:center; transition: border-color .2s, box-shadow .2s, background .2s; cursor:pointer;
}
.upload-dropzone input[type=file] { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.upload-dropzone.dragover { border-color:#28c37e; background:#f8fffa; box-shadow: 0 0 0 .25rem rgba(40,195,126,.25); }
.upload-dropzone .upload-dropzone-content { pointer-events: none; }
.upload-dropzone-text { font-size:1.1rem; color:#28c37e; font-weight:500; }
.upload-dropzone-text .action { color:#28c37e; font-weight:700; }
.upload-dropzone-subtext { font-size:.9rem; color:var(--muted); margin-top:.25rem; }

.upload-card { border-radius:1rem; border:1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.03); overflow:hidden; transition: transform .15s; cursor:pointer; }
.upload-card .btn-sm { line-height:1; }
.upload-card:hover { transform: translateY(-2px); }
.upload-card .card-body { padding:0 5px !important; }
.upload-card .upload-icon-button {
  width:2rem; height:2rem; background:#f8f9fa; border-radius:50%; display:flex; align-items:center; justify-content:center; transition: background .2s;
}
.upload-card .upload-icon-button:hover { background:#e2e6ea; }

#multiUploadPreview { display:grid; grid-template-columns:1fr; gap:1rem; }

/* ==========================
   Chat / Messaging
   ========================== */
.checklist-container { display:flex; flex-wrap:wrap; gap:1rem; }
.checklist-item { display:inline-flex; align-items:center; white-space:nowrap; }
.chat-message { margin:5px 0; padding:5px; clear:both; }
.chat-message.self {
  text-align:right; background:#e0ffe0; border-radius:10px; float:right; max-width:80%;
}
.chat-message.other {
  text-align:left; background:#f0f0f0; border-radius:10px; float:left; max-width:80%;
}
.sender-name { font-weight:700; display:block; }
.timestamp { font-size:.8em; color:#888; display:block; margin-top:2px; }
.clearfix::after { content:""; display:table; clear:both; }
.chat-date-separator { text-align:center; color:#999; font-size:.8rem; margin:10px 0; }

/* ==========================
   Kanban — MOBILE IMPROVEMENTS
   ========================== */
.kanban-board {
  display:flex !important;
  gap:1rem;
  /* ADDED: allow horizontal scrolling on small screens */ 
  overflow-x: auto; /* MOBILE-ADJUST */
  -webkit-overflow-scrolling: touch; /* MOBILE-ADJUST */
}
.kanban-column { flex: 1 !important; min-width: 280px; /* MOBILE-ADJUST */ }
.kanban-board, .kanban-column, .kanban-card, .kanban-card * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ==========================
   Mail List
   ========================== */
.mail-item { background: var(--card-bg); border-radius:5px; box-shadow: 0 1px 3px rgba(0,0,0,.1); margin-bottom:20px; }
.mail-header { display:flex; justify-content:space-between; padding:15px; border-bottom:1px solid #ddd; }
.sender { display:flex; align-items:center; }
.avatar { width:40px; height:40px; border-radius:50%; background:#0078d4; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-right:10px; }
.sender-info { display:flex; flex-direction:column; }
.sender-name { font-size:14px; font-weight:700; color:#333; }
.sender-email { font-size:12px; color:#666; }
.mail-date { font-size:12px; color:#666; }
.mail-body { padding:15px; font-size:14px; color:#333; }
.mail-actions { padding:10px 15px; border-top:1px solid #ddd; }

/* ==========================
   Maps
   ========================== */
#map, #dashb-map {
  height:400px; width:100%; margin-top:20px; border:1px solid #ccc; border-radius:8px;
}
#dashb-map { border-radius:0; }

/* ==========================
   Progress Steps
   ========================== */
.progress-wrapper { max-width:100%; padding:20px; margin:0 auto; }
.progress-container { position:relative; width:100%; height:80px; margin:1rem auto .5rem; cursor:pointer; }
.progress-bar-bg { position:absolute; top:50%; left:0; right:0; height:2px; background:#e0e0e0; transform: translateY(-50%); }
.progress-bar { position:absolute; top:50%; left:0; height:2px; background:var(--ek4y-green); transform: translateY(-50%); transition: width .4s; }
.progress-step { position:absolute; top:50%; left:0; transform: translate(-50%,-50%); text-align:center; cursor:pointer; }
.progress-step::before {
  content:""; position:absolute; top:50%; left:50%; width:16px; height:16px; transform: translate(-50%,-50%);
  border:2px solid #e0e0e0; border-radius:50%; background:#fff; transition: border-color .3s, background-color .3s;
}
.progress-step::after { content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; transform: translate(-50%,-50%); border-radius:50%; background:#d5d7da; transition: background-color .3s; }
.progress-step.completed::before { border-color:var(--ek4y-green); background:var(--ek4y-green); }
.progress-step.completed::after { background:#fff; }
.progress-step.active::before { border-color:var(--ek4y-green); background: 0 0; }
.progress-step.active::after { background:var(--ek4y-green); }
.progress-step .progress-label {
  position:absolute; left:50%; transform: translateX(-50%); font-family:'Inter', sans-serif; font-size:14px; font-weight:500; color:#414651; margin-top:8px;
}
.progress-step:nth-of-type(odd) .progress-label { top:15px; }
.progress-step:nth-of-type(even) .progress-label { bottom:15px; top:auto; }

/* ==========================
   Contact Info
   ========================== */
.contact-info { display:flex; flex-wrap:wrap; gap:1rem; font-size:.85rem; color:var(--muted); }
.contact-info a { display:flex; align-items:center; text-decoration:none; color:inherit; white-space:nowrap; }
.contact-info a > i { margin-right:.3rem; }
@media (max-width:576px) { .contact-info a { white-space:normal; } }

/* ==========================
   Misc
   ========================== */
.delete-button.disabled { pointer-events: none; opacity:.3; border:none !important; background:0 0; }
.delete-button.disabled i { color: gray; }

.nav-link.disabled { pointer-events:none; opacity:.5; }

.icon-sidebar-home {
  font-size:1.2rem; color:#fff; background:#005d3e; width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; margin-right:5px;
}

/* ==========================
   Search results / pagination
   ========================== */
#search-results { top:100%; left:0; right:0; z-index:1310; max-height:60vh; overflow:auto; }
/* MOBILE specific search overlay behavior */
@media (max-width:576px) {
  #search-results.search-results-mobile {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-height: calc(100vh - 56px) !important; /* reserve space */
    overflow-y: auto;
    border-radius: 0;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    z-index: 2010 !important; /* above header (7000 in previous CSS) but safe with numbers used */
    margin: 0 !important;
    padding-top: 8px;
  }
  /* kleinere optische Anpassung: list-group-items in mobile-results */
#search-results.search-results-mobile .list-group-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
  .crm-search .btn { display:none !important; } /* use full-width search on mobile */
  .sub-sticky-header { display:flex !important; flex-direction:row !important; gap:.25rem; }
  .sub-sticky-header > button, .sub-sticky-header > a, .sub-sticky-header > .dropdown { flex:1 1 0; margin:0; }
  .sub-sticky-header .btn, .sub-sticky-header .dropdown-toggle { height:2.8rem; padding:.25rem; font-size:.85rem; white-space:nowrap; width:100%; }
  .sub-sticky-header .btn, .sub-sticky-header .form-select { height:auto; padding:.375rem .75rem; }
  .sub-sticky-header .dropdown-menu {
    position: fixed !important; top: calc(.1rem + env(safe-area-inset-top)) !important; left:0 !important; right:0 !important; width:100% !important;
    max-height:60vh; overflow-y:auto; z-index:1050 !important;
  }
  .sub-sticky-header > .d-flex:first-child { justify-content:flex-start; width:100%; }
  .sub-sticky-header > .d-flex:nth-child(2) { justify-content:space-between; flex-wrap:wrap; gap:.5rem; width:100%; }
  .sub-sticky-header .badge { white-space:nowrap; }
  #salesSelect { min-width:180px; }
  #searchInput { width:100% !important; }
  #searchBtn { width:100%; }
  .btn, .form-select { height:2.5rem; display:inline-flex; align-items:center; justify-content:center; }
  .mobile-only { display:block !important; }
  .mobile-only:not(.has-notes) { display:none !important; }
  .dropdown .dropdown-toggle { width:100%; text-align:left; display:none !important; }
  .sub-sticky-header .dropdown .dropdown-toggle { display:inline-flex !important; }
}

/* --- Make header + input above the overlay --- */
.sticky-header,
.crm-search,
.crm-search .form-control,
#crm-search {
  position: relative;   /* wichtig für z-index */
  z-index: 7000;        /* muss > #searchoverlay (6000) sein */
}

/* --- Allow overlay to be visually present but not block the header input --- */
/* overlay bleibt sichtbar, aber lässt Klicks durch; nur Suchpanel/Ergebnisse sind klickbar */
#searchoverlay {
  pointer-events: none;
}
#searchoverlay.active.top-veil {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top, 12px) + 56px);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 2005;
}
#searchoverlay .search-panel,
#searchoverlay .search-panel * ,
#search-results,
#search-results * {
  pointer-events: auto;
}
/* wenn overlay aktiv, nur die interaktiven Teile sollen pointer-events haben */
#searchoverlay.active,
#searchoverlay.active #search-results,
#searchoverlay #search-results.fullscreen {
  pointer-events: auto;          /* Ergebnisse wieder klickbar */
}

/* sichere Spezifizierung für mobile full-screen results */
#search-results.fullscreen {
  position: relative;
  z-index: 7010; /* über der header-z-index, damit Ergebnisse sichtbar und klickbar sind */
}

/* ==========================
   Desktop / Large Breakpoints (overrides)
   ========================== */
@media (min-width:1200px) {
  .sidebar { width: var(--sb-w); position: fixed; left:0; top:0; bottom:0; transform: none; z-index:1200; }
  .main-content { margin-left: var(--sb-w) !important; }
  .sidebar .link-text { display:inline; }
}

/* older large rule already present but kept to ensure consistency */
@media (min-width:1200px) {
  .sidebar { z-index:1200; }
  .main-content { margin-left: var(--sb-w) !important; }
}

/* other breakpoint helpers kept */
@media (max-width:1024px) {
  .desktop-only { display: none !important; }
  .dashboard-title { font-size: 1.2rem; }
  .icon-link i { font-size: 1.5rem; }
  .avatar-initials { font-size: .9rem; }
  .dashboard-section { padding: 10px; }
}
@media (max-width:1058px) {
  .tablet-only { display: none !important; }
}
@media (max-width:576px) {
  .dashb-form-group { gap: .25rem; }
}

/* ==========================
   Masonry / Drag & Drop helpers
   ========================== */
.card.dragging { opacity:.5; transition: opacity .2s; }
.masonry-container.drag-over { background: rgba(23,214,143,.1); border: 2px dashed var(--ek4y-green); }

/* ==========================
   Accessibility / Misc
   ========================== */
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Fluid typography example (kept as utility) */
h1 { font-size: clamp(1.25rem, 4vw, 2rem); }

/* iOS auto-zoom vermeiden: Inputs mindestens 16px auf Mobilgeräten */
@media (max-width: 767.98px) {
  .login-form-container .form-control,
  input[type="text"],
  input[type="password"],
  textarea,
  select {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  }
}
/* ==========================================
   ✅ Einheitliches Verhalten Mobile + Tablet
   Sidebar off-canvas bis 1199px
========================================== */
@media (max-width: 1199.98px) {
  #burgerBtn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sb-w);
    background: var(--sb-bg);
    color: var(--sb-fg);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 10000;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
    transition: margin-left 0.25s ease;
  }

  /* Untermenüs normal nutzbar */
  .sidebar .collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
}

/* ==========================================
   ✅ Desktop (≥1200px): Sidebar dauerhaft sichtbar
========================================== */
@media (min-width: 1200px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sb-w);
    background: var(--sb-bg);
    color: var(--sb-fg);
    transform: none;
    z-index: 1200;
  }

  .main-content {
    margin-left: var(--sb-w) !important;
  }

  #burgerBtn {
    display: none !important;
  }
}