/* Minimal modern responsive styles */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --accent:#293C7B;
  --muted:#6c757d;
  --radius:10px;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; margin:0;background:var(--bg);color:#111}
.container{max-width:980px;margin:20px auto;padding:16px}
.card{background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,15,15,0.20)}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.logo-img-login {height: 100px;width: auto;display: block;}
.logo-img {height: 50px;width: auto;display: block;}
h1{font-size:1.25rem;margin:0}
.small{color:var(--muted);font-size:0.9rem}
.small_grey{color:var(--muted);font-size:0.7rem}
form label{display:block;margin-bottom:10px;font-size:0.95rem}
/*ALT  input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="datetime-local"],input[type="date"],select,textarea{width:100%;padding:10px;border:1px solid #e3e6ea;border-radius:8px;background:#fff;font-size:1rem}*/
input,select,textarea{width:100%;padding:10px;border:1px solid #e3e6ea;border-radius:8px;background:#fff;font-size:1rem}
button{background:var(--accent);color:#fff;padding:10px 14px;border:none;border-radius:8px;cursor:pointer}
button.secondary{background:#6c757d}
button.kassenschnitt{padding:5px 14px;border-radius:5px;background:#01961a}
button.small_danger{padding:1px 5px;border-radius:5px;background:#c21700}
.btn-admin{padding:4px 14px;border-radius:5px;background:#5b5c5c; color:#fff;font-size:0.7rem;text-decoration:none}
.btn-dashboard{padding:4px 14px;border-radius:5px;border:1px solid #e3e6ea;background:#ffffff; color:#000;font-size:0.7rem;text-decoration:none}
[class^="btn-"]:hover{filter: brightness(0.80)}
.button-container {display:flex;flex-wrap:wrap;gap:10px;align-items:center}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{padding:10px;border-bottom:1px solid #eef2f6;text-align:left;font-size:0.7rem}
th{background:#fbfcfe;font-weight:600}
.actions a{margin-right:8px;color:var(--accent);text-decoration:none}
.flex{display:flex;gap:8px;margin-top: 10px;align-items:center}
@media (max-width:720px){
  .container{padding:5px;margin:8px}
  th,td{font-size:0.9rem}
  header{flex-direction:column;align-items:flex-start;gap:8px}

  /* hide datetime-local inputs and show hour-grid */
  .dashboard input[type="datetime-local"]{display:none}
  .dashboard .hour-grid{display:block}

  /* Responsive stacked table for small screens */
  table.responsive, table.responsive thead, table.responsive tbody, table.responsive th, table.responsive td, table.responsive tr {
    display:block;
  }
  table.responsive thead { display:none; }
  table.responsive tr { margin-bottom:12px; border:1px solid #eef2f6; border-radius:8px; padding:5px; background:#fff }
  table.responsive td {
    display:flex; justify-content:space-between; padding:4px 5px; border-bottom:0; font-size:0.9rem;
  }
  table.responsive td::before {
    content: attr(data-label); font-weight:600; color:var(--muted); margin-right:8px;
  }
  .actions { display:flex; gap:8px; align-items:center; }

  /* Responsive form flex layout */
  .flex {
    flex-direction: column; /* untereinander */
    align-items: stretch; /* volle Breite */
  }
  .flex label,
  .flex div {
    width: 100%; /* Dropdowns füllen die Breite */
  }
}

/* simple top nav */
.nav{display:flex;gap:8px}
.nav a{color:var(--accent);text-decoration:none;font-weight:600}

/* Payment method button group */
.payment-methods{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.pm-btn{padding:10px 14px;border-radius:8px;border:1px solid #e3e6ea;background:#fff;cursor:pointer;font-weight:600;color:#222}
.pm-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,0.15)}

@media (max-width:420px){
  .pm-btn{flex:1;padding:12px;text-align:center}
}

/* Hour selection grid for small screens */
.hour-grid{display:none;margin:8px 0;gap:8px}
.hour-grid .hour-btn{padding:10px 2px;border-radius:8px;border:1px solid #e3e6ea;background:#fff;cursor:pointer;font-weight:600;color:#222;flex:1;text-align:center}
.hour-grid .hour-row{display:flex;gap:5px;padding:2px}
.hour-grid .hour-btn.future{background:#f0f0f0;color:#8a8a8a;border-color:#e6e6e6}
.hour-grid .hour-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.hour-grid .hour-btn.current{background:#01961a;color:#fff;border-color:#01961a}
.hour-grid .hour-btn.current.active{background:var(--accent);color:#fff;border-color:#01961a}


/* show a simple booking-time label on small screens */
.booking-time-label{display:none;margin-bottom:6px}
@media (max-width:768px){
  .booking-time-label{display:block}
  .datetime-label{display:none}
}