/* =========================================================
   HomeDBStyleMobile.css
   Zentrales CSS für das ganze HomeDB-Projekt
   (Mobile-first, Bootstrap 5 kompatibel, iPhone/iPad optimiert)
   ========================================================= */

:root {
  color-scheme: light;
  --hdb-bg: #f6f7fb;
  --hdb-card: #ffffff;
  --hdb-border: #e5e7eb;
  --hdb-muted: #6b7280;
  --hdb-title: #111827;

  --hdb-footer-bg: #b8c0cc;   /* dunkler als bisher #d1d5db */
  --hdb-footer-bg-2: #c7cdd6;   /* alternative leicht dunkler */
  --hdb-totals-bg: #e2e6ec;

  --hdb-radius: 14px;
  --hdb-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

/* -------- Base -------- */
html, body {
  height: 100%;
}

body {
  background: var(--hdb-bg);
  color: var(--hdb-title);
  -webkit-text-size-adjust: 100%;
}

/* iPhone safe-area padding */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Comfortable tap targets on iOS */
.btn,
.nav-link,
.accordion-button {
  min-height: 44px;
}

/* Prevent iOS "ghost click" issues on some elements */
button,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* -------- Navbar polish (Bootstrap keeps most of it) -------- */
.navbar {
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.25);
}

.navbar .navbar-brand {
  letter-spacing: .2px;
}

/* Optional: if you later move last update outside navbar */
.page-meta {
  background: #fff;
  border: 1px solid var(--hdb-border);
  border-radius: var(--hdb-radius);
  box-shadow: var(--hdb-shadow);
  padding: .65rem .9rem;
}

/* -------- Cards -------- */
.card {
  border: 1px solid var(--hdb-border);
  border-radius: var(--hdb-radius);
  overflow: hidden;
}

.card.shadow-sm {
  box-shadow: var(--hdb-shadow) !important;
}

.card-body {
  padding: 1rem;
}

@media (min-width: 768px) {
  .card-body {
    padding: 1.1rem 1.25rem;
  }
}

/* -------- Typography helpers -------- */
.money {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@supports (color: color-mix(in srgb, #000, #fff)) {
  .text-secondary {
    color: color-mix(in srgb, var(--hdb-muted) 100%, #000 0%) !important;
  }
}

/* -------- Filter bar (Index / Current Prices) -------- */
.filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  width: 100%;
}

.filter-bar .filter-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  width: 100%;
  font-size: 0.78rem;
  line-height: 1.15;
  padding: .35rem .45rem;
  border-radius: 999px;
  white-space: normal;
  text-align: center;
}

@media (min-width: 768px) {
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    width: auto;
  }
  .filter-bar .filter-chip {
    font-size: 0.92rem;
    padding: .45rem .85rem;
    min-height: 44px;
    width: auto;
    white-space: nowrap;
  }
}

/* -------- Price badge (Index) -------- */
.price-badge {
  font-variant-numeric: tabular-nums;
}

/* -------- Availability dots (größere rote/grüne Bälle) --------
   Verwendung: <span class="avail-dot text-success">●</span>
*/
.avail-dot {
  font-size: 1.55rem;     /* deutlich größer */
  line-height: 1;
  display: inline-block;
  vertical-align: -0.08em;
}

/* -------- Tables -------- */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

.table {
  margin-bottom: 0;
}

.table thead th {
  white-space: nowrap;
}

.table td,
.table th {
  vertical-align: middle;
}

/* Reduce “thick line” look on iOS (sometimes borders stack visually) */
.table tfoot th,
.table tfoot td {
  border-top-width: 1px !important;
}

/* -------- Darker footer totals row (Depo desktop table) --------
   Apply: <tfoot class="table-footer-dark"> ... </tfoot>
*/
.table-footer-dark th,
.table-footer-dark td {
  background-color: var(--hdb-footer-bg) !important;
  font-weight: 700;
  border-top: 1px solid rgba(17,24,39,0.22) !important; /* nicht dick */
}

/* Optional: make the footer slightly more separated but not “fat” */
.table-footer-dark tr {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

/* -------- Depo / Collapse helpers -------- */
.hiddenRow {
  padding: 0 !important;
}

.trmain {
  cursor: pointer;
}

/* -------- Accordion (Mobile lists) -------- */
.accordion-item {
  border: 1px solid var(--hdb-border);
  border-radius: var(--hdb-radius) !important;
  overflow: hidden;
  background: var(--hdb-card);
}

.accordion-button {
  padding: 0.9rem 1rem;
  border-radius: 0 !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 .2rem rgba(17, 24, 39, 0.12);
}

.accordion-button:not(.collapsed) {
  color: var(--hdb-title);
  background: #f3f4f6;
}

/* Make accordion caret look cleaner */
.accordion-button::after {
  transform: scale(0.95);
}

/* Accordion body spacing */
.accordion-body {
  padding: 1rem;
}

/* -------- List group (detail lists on mobile) -------- */
.list-group-item {
  border-color: var(--hdb-border);
}

/* -------- Totals card (mobile footer for Depo) -------- */
/* Mobile Totals Card dunkel wie Desktop Footer */
/* Mobile Totals Card: identisch zum Desktop-Footer */
/* Mobile Totals Card: identisch zum Desktop-Footer */
.totals-card {
  background-color: var(--hdb-footer-bg) !important;
  color: var(--hdb-title) !important;   /* Desktop ist dunkle Schrift auf grauem Hintergrund */
  border: 1px solid rgba(17,24,39,0.22) !important;
  font-weight: 700;
}

.totals-card strong {
  color: var(--hdb-title) !important;
}




.totals-card strong {
  color: var(--hdb-title) !important;
}



/* -------- Modal polish (Bootstrap 5) -------- */
.modal-content {
  border-radius: var(--hdb-radius);
  border: 1px solid var(--hdb-border);
  overflow: hidden;
}

.modal-header {
  background: #f3f4f6;
  border-bottom: 1px solid var(--hdb-border);
}

.modal-footer {
  border-top: 1px solid var(--hdb-border);
}

/* Slightly larger inputs on mobile */
.form-control,
.form-select,
.btn {
  border-radius: 12px;
}

.form-label {
  font-weight: 600;
}

/* -------- Icon alignment (Material Icons) -------- */
.material-icons {
  line-height: 1;
}

/* On some iOS cases, icons can steal tap area weirdly; keep taps on parent button */
.material-icons {
  pointer-events: none;
}

/* -------- Small utilities -------- */
.rounded-3 {
  border-radius: var(--hdb-radius) !important;
}

/* Improve readability in iPhone landscape */
@media (max-width: 932px) and (orientation: landscape) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .accordion-button {
    padding: .75rem .9rem;
  }
}

/* Optional: reduce table density on iPad */
@media (min-width: 768px) {
  .table td,
  .table th {
    padding-top: .65rem;
    padding-bottom: .65rem;
  }
}


/* Einheitliche Haupt-Menü Schrift */
.nav-main {
    font-size: 1.25rem;      /* gleiche Größe wie navbar-brand */
    font-weight: 600;        /* fw-semibold */
    color: #ffffff !important;
}

/* Hover Effekt */
.nav-main:hover {
    color: #d1d5db !important;
}

/* Mobile sauberer Abstand */
@media (max-width: 576px) {
    .nav-main {
        padding: 8px 10px;
    }
}