/* ===== MawaCon Admin – Custom Theme ===== */

:root{
  --ka-primary:#1263eb;
  --ka-success:#22a06b;
  --ka-warning:#f5cd47;
  --ka-danger:#e2483d;
  --ka-muted:#6b778d;
  --ka-bg:#f7f9fc;
  --ka-radius:.75rem;
}

body{ background:var(--ka-bg); }

/* Navbar sticky + Schatten */
.navbar{ position:sticky; top:0; z-index:1020; box-shadow:0 2px 12px rgba(0,0,0,.05); }

/* -------- Topmenü: Kategorien, Slide-Panels -------- */

/* Scrollbare Top-Navigation, falls die Breite nicht reicht */
.nav-scroll{
  overflow-x:auto; white-space:nowrap; scrollbar-width:thin;
  -webkit-overflow-scrolling:touch; padding-bottom:.25rem;
}
.nav-scroll::-webkit-scrollbar{ height:6px; }
.nav-scroll::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:10px; }

/* Dropdowns hübscher */
.nav-cats .dropdown-menu{
  border:0; border-radius:var(--ka-radius);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}

/* Slide-Animation für unsere Panels */
.dropdown-slide .slide-panel{
  display:block; max-height:0; overflow:hidden; opacity:0; transform:translateY(-6px);
  transition:max-height .28s ease, opacity .18s ease, transform .18s ease;
  margin-top:.25rem;
}
.dropdown-slide.show .slide-panel{
  max-height:75vh; opacity:1; transform:translateY(0);
}

/* Breiten-Helfer */
.w-lg-300{ width:min(300px,90vw); }
.w-lg-400{ width:min(400px,90vw); }
.w-lg-600{ width:min(600px,95vw); }

/* -------- Tabellen / Cards / Buttons -------- */

.table{ vertical-align:middle; background:#fff; border-radius:var(--ka-radius); overflow:hidden; }
.table thead th{ background:#f3f5f9; font-weight:600; }
.table tbody tr:hover{ background:rgba(0,0,0,.03); }
.table td, .table th{ padding-top:.65rem; padding-bottom:.65rem; }

.card{ border:0; border-radius:var(--ka-radius); box-shadow:0 6px 24px rgba(0,0,0,.06); }

.btn-primary{ background:var(--ka-primary); border-color:var(--ka-primary); box-shadow:0 4px 16px rgba(18,99,235,.25); }
.btn-outline-primary:hover{ background:var(--ka-primary); color:#fff; }
.btn-outline-danger:hover{ background:var(--ka-danger); border-color:var(--ka-danger); }

.form-control, .form-select{ border-radius:var(--ka-radius); }

/* Suche mit Lupe optional */
.input-search{ position:relative; }
.input-search .icon{ position:absolute; left:.6rem; top:50%; transform:translateY(-50%); opacity:.55; }
.input-search input{ padding-left:2rem; }

/* Rollen-Badges (Beispiel) */
.badge{ font-weight:600; padding:.45rem .6rem; border-radius:999px; }
.badge-role-admin{ background:#2e3a46; color:#fff; }
.badge-role-personal{ background:rgba(18,99,235,.12); color:#1247b5; }
.badge-role-intern{ background:rgba(34,160,107,.15); color:#0a6b46; }

/* Ampel-Badges (HU / nächster Service) */
.badge-success{ background:var(--ka-success)!important; }
.badge-warning{ background:var(--ka-warning)!important; color:#1d2129!important; }
.badge-danger{  background:var(--ka-danger)!important; }

/* Dark Mode Feinschliff (falls genutzt) */
:root[data-bs-theme="dark"] body{ background:#0f141a; }
:root[data-bs-theme="dark"] .table thead th{ background:#1b2430; }
:root[data-bs-theme="dark"] .table{ background:#121a23; }
:root[data-bs-theme="dark"] .list-group-item-action:hover{ background:rgba(255,255,255,.06); }

/* Kleinere Abstände in Aktionsspalte */
.actions .btn{ margin-right:.25rem; }

/* Top-Navigation kompakt, eine Zeile, keine Scrollbalken */
.navbar .nav-link{
  padding:.55rem .6rem;
  font-size:.98rem;
  line-height:1;
}
.nav-cats{
  white-space:nowrap;
  overflow:visible;              /* keine Scrollleisten */
  gap:.75rem !important;
}
/* Icons bei enger Breite automatisch ausblenden */
@media (max-width:1400px){
  .nav-cats .nav-link .bi{ display:none; }
}
@media (max-width:1280px){
  .navbar .nav-link{ font-size:.95rem; padding:.5rem .55rem; }
  .nav-cats{ gap:.5rem !important; }
}
/* Unter XL (<1200px) klappt die Navbar zum Burger – dann darf sie umbrechen */
@media (max-width:1199.98px){
  .nav-cats{ white-space:normal; }
}

/* Dropdowns dürfen über die Navbar hinausragen */
.navbar,
.navbar .container-fluid,
.navbar .collapse{
  overflow:visible !important;
}

/* Dropdown auf Textbreite (fit-to-text) – global */
.navbar .dropdown-menu{
  --bs-dropdown-min-width: 0;    /* Bootstrap-Default (10rem) deaktivieren */
  width:max-content;             /* so breit wie der Inhalt */
  min-width:0;
  max-width:calc(100vw - 24px);  /* nie breiter als der Viewport */
  white-space:nowrap;            /* keine Zeilenumbrüche im Menü */
  border:0;
  border-radius:var(--ka-radius);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}
/* List-Group im Dropdown nicht auf 100% strecken */
.navbar .dropdown-menu .list-group{ width:auto; }
.navbar .dropdown-menu .list-group-item{
  width:auto; display:block;
}

/* Slide-Animation */
.dropdown-slide .slide-panel{
  display:block; max-height:0; overflow:hidden; opacity:0; transform:translateY(-6px);
  transition:max-height .28s ease, opacity .18s ease, transform .18s ease;
  margin-top:.25rem;
}
.dropdown-slide.show .slide-panel{
  max-height:75vh; opacity:1; transform:translateY(0);
}
/* Tickets: Spaltenbreiten */
.col-created {
    min-width: 110px;   /* breiter */
    white-space: nowrap;
}

.col-due {
    min-width: 120px;   /* Fällig bis */
    white-space: nowrap;
}

/* Karten-Icons im Dashboard */
.dashboard-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f3f4f6;        /* leichtes Grau, wie bisher */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;             /* verhindert Verzerren im Flex-Container */
}

/* Bootstrap-Icon darin */
.dashboard-card-icon i {
    font-size: 24px;            /* Icon-Größe */
    line-height: 1;
}

/* Falls du SVGs oder IMG benutzt */
.dashboard-card-icon img,
.dashboard-card-icon svg {
    width: 24px;
    height: 24px;
}

.icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle i {
    font-size: 1.9rem; /* wirkt bei Bootstrap-Icons am saubersten */
}