/* Basis responsives Styling und Utilities */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { -webkit-font-smoothing: antialiased; }

/* Theme Variable for page box background */
:root { --page-box-bg: #f8fafc; }
@media (prefers-color-scheme: dark) {
  :root { --page-box-bg: #1e293b; }
}

/* Wrapper für horizontales Scrollen von Tabellen auf kleinen Screens */
.table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-responsive table { min-width:600px; }

/* Mobile Stack Layout */
@media (max-width: 640px) {
  .stack-on-mobile { display:grid; gap:.75rem; }
  .stack-on-mobile > * { width:100% !important; }
  .mobile-hidden { display:none !important; }
}
@media (min-width: 641px) {
  .desktop-hidden { display:none !important; }
}

/* Fluid Container Utility */
.container-fluid { width:100%; padding:0 1rem; margin:0 auto; }
@media (min-width:768px) { .container-fluid { max-width:740px; } }
@media (min-width:992px) { .container-fluid { max-width:960px; } }
@media (min-width:1200px) { .container-fluid { max-width:1140px; } }

/* Responsive Navbar Beispiel */
.resp-navbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.resp-navbar .nav-group { display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width:640px) {
  .resp-navbar .nav-group { flex-direction:column; align-items:flex-start; }
}

/* Tabellen-Zellen mit abschneidbarem Text */
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }

/* Buttons Fluid auf Mobilgeräten */
@media (max-width:640px){
  .btn-block-mobile { display:block; width:100%; }
}

/* Formular Gitter */
.form-grid { display:grid; gap:1rem; }
@media (min-width:640px){ .form-grid.cols-2 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .form-grid.cols-3 { grid-template-columns:repeat(3,1fr); } }

/* Karten Abstand Optimierung auf Mobile */
@media (max-width:640px){
  .card, .stat-card { padding:16px !important; }
  .stat-value { font-size:32px !important; }
}

/* Utility Farben / Status Badges (vereinheitlicht) */
.badge { display:inline-block; padding:4px 10px; border-radius:16px; font-size:12px; font-weight:600; }
.badge-critical { background:#fee2e2; color:#b91c1c; }
.badge-warning { background:#fef3c7; color:#b45309; }
.badge-info { background:#dbeafe; color:#1d4ed8; }
.badge-success { background:#d1fae5; color:#047857; }

/* Dark Mode Grundgerüst (optional Erweiterung) */
@media (prefers-color-scheme: dark) {
  body { background:#0f172a; color:#e2e8f0; }
  .card, .stat-card, .container, .news-box { background:#1e293b !important; color:#e2e8f0; }
  table { color:#e2e8f0; }
  th { background:#334155 !important; }
}

/* ==========================================================
   Verbrauch / Helfer – Konsolidierte Utility Klassen
   (ersetzt alte Inline-CSS Blöcke aus material_verbrauch.php)
   ========================================================== */
.mv-wrapper { max-width:980px; margin:0 auto; padding:1.2rem .9rem 2.5rem; }
.mv-card { background:#fff; border-radius:18px; box-shadow:0 6px 22px rgba(0,0,0,0.07); padding:clamp(1.15rem,2.4vw,1.5rem) clamp(1rem,2.2vw,1.4rem); margin-bottom:1.1rem; }
.mv-title { margin:0 0 .35rem; font-size:clamp(1.35rem,4vw,1.9rem); color:#111827; font-weight:700; }
.mv-sub { color:#6b7280; font-size:.85rem; line-height:1.4; }
.mv-msg { padding:.75rem 1rem; border-radius:12px; margin:.85rem 0; font-size:.85rem; }
.mv-msg.success { background:#d1fae5; color:#065f46; border-left:4px solid #10b981; }
.mv-msg.error { background:#fee2e2; color:#991b1b; border-left:4px solid #dc2626; }
.mv-entry-grid { display:grid; grid-template-columns:1.15fr 1.55fr .65fr 1.4fr 34px; gap:.55rem; align-items:start; padding:.7rem .65rem .6rem; background:#f9fafb; border:1px solid #e5e7eb; border-radius:14px; margin-bottom:.55rem; }
.mv-label { font-size:.6rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#374151; display:block; margin:0 0 .25rem; }
.mv-input, .mv-select { padding:.55rem .65rem; border:1px solid #d1d5db; border-radius:10px; font-size:.85rem; background:#fff; width:100%; }
.mv-input:focus, .mv-select:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.25); }
.mv-btn { background:#3b82f6; color:#fff; border:none; padding:.65rem .95rem; border-radius:10px; cursor:pointer; font-weight:600; font-size:.8rem; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; }
.mv-btn:hover { background:#2563eb; }
.mv-btn.secondary { background:#64748b; }
.mv-btn.secondary:hover { background:#475569; }
.mv-btn.danger { background:#dc2626; }
.mv-btn.danger:hover { background:#b91c1c; }
.mv-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
.mv-table { width:100%; border-collapse:collapse; margin-top:.6rem; font-size:.75rem; }
.mv-table th, .mv-table td { padding:.55rem .6rem; border-bottom:1px solid #e5e7eb; text-align:left; vertical-align:top; }
.mv-table th { background:#f1f5f9; font-weight:600; font-size:.66rem; letter-spacing:.5px; text-transform:uppercase; color:#475569; }
.mv-truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
@media (max-width:720px){
  .mv-entry-grid { grid-template-columns:1fr; }
  .mv-entry-grid > * { width:100%; }
  .mv-btn { width:100%; justify-content:center; }
}
@media (max-width:520px){
  .mv-card { border-radius:0; padding:1.1rem .85rem .9rem; box-shadow:none; }
  .mv-wrapper { padding:0 0 2.2rem; }
  .mv-title { font-size:1.5rem; }
}

/* ==========================================================
   Erweiterte Responsive Utilities
   ========================================================== */

/* Responsive Grid System */
.grid { display: grid; gap: 1rem; }
.grid-cols-1 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Responsive Spacing */
@media (max-width: 640px) {
  .mobile-p-2 { padding: 0.5rem !important; }
  .mobile-p-4 { padding: 1rem !important; }
  .mobile-m-2 { margin: 0.5rem !important; }
  .mobile-text-sm { font-size: 0.875rem !important; }
  .mobile-text-base { font-size: 1rem !important; }
}

/* Responsive Flex */
.flex-responsive { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 640px) {
  .flex-responsive.mobile-col { flex-direction: column; }
  .flex-responsive > * { flex: 1 1 100%; }
}

/* Responsive Card Layouts */
@media (max-width: 768px) {
  .card-mobile-full { margin-left: -1rem; margin-right: -1rem; border-radius: 0 !important; }
}

/* Touch-Friendly Buttons */
@media (max-width: 640px) {
  button, .btn, a.btn { min-height: 44px; padding: 12px 16px; }
}

/* Responsive Tables - Auto Stack */
@media (max-width: 768px) {
  table.stack-mobile { display: block; }
  table.stack-mobile thead { display: none; }
  table.stack-mobile tbody { display: block; }
  table.stack-mobile tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
  }
  table.stack-mobile td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
  }
  table.stack-mobile td:last-child { border-bottom: none; }
  table.stack-mobile td:before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 1rem;
  }
}

/* Responsive Typography */
.text-responsive-lg { font-size: clamp(1.5rem, 4vw, 2.25rem); }
.text-responsive-md { font-size: clamp(1.125rem, 3vw, 1.5rem); }
.text-responsive-sm { font-size: clamp(0.875rem, 2vw, 1rem); }

/* Hide/Show based on screen size */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 641px) {
  .show-mobile { display: none !important; }
}
@media (max-width: 768px) {
  .hide-tablet { display: none !important; }
}
@media (min-width: 769px) {
  .show-tablet { display: none !important; }
}

/* Responsive Container Widths */
.container-sm { max-width: 640px; margin: 0 auto; padding: 0 1rem; }
.container-md { max-width: 768px; margin: 0 auto; padding: 0 1rem; }
.container-lg { max-width: 1024px; margin: 0 auto; padding: 0 1rem; }
.container-xl { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }

/* Responsive Image */
img.responsive { max-width: 100%; height: auto; display: block; }

/* Mobile Menu Utilities */
.mobile-menu-toggle { display: none; }
@media (max-width: 768px) {
  .mobile-menu-toggle { display: block; }
  .mobile-menu { display: none; flex-direction: column; width: 100%; }
  .mobile-menu.active { display: flex; }
}