/* REM Time Tracker – styles.css (komplett) */

:root{
  --brand:#c40000;            /* REM-Rot */
  --brand-contrast:#fff;
  --brand-soft:#ffe8ea;       /* zartes Rot statt Gelb */
  --brand-soft-border:#f5b5bd;
  --brand-soft-text:#7a0000;
}

/* Base */
html, body{height:100%;}
body{background:#fff !important;}

/* Links */
a, .link-brand{color:var(--brand);}
a:hover{color:#9e0000;}

/* Navbar / Header */
.navbar{border-bottom:3px solid var(--brand) !important;}

/* Buttons & Badges */
.btn-brand{background:var(--brand);color:var(--brand-contrast);border:1px solid var(--brand);}
.btn-brand:hover{filter:brightness(0.9);color:var(--brand-contrast);}
.badge-brand{background:var(--brand);color:var(--brand-contrast);}

/* Tabs */
.nav-tabs .nav-link.active{background:var(--brand);color:#fff;border-color:var(--brand);}

/* Forms */
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand);}
.form-control:focus,.form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 .2rem rgba(196,0,0,.15);
}

/* Tables */
.table thead th{border-bottom:2px solid var(--brand-soft-border);}

/* Warning -> Soft Red */
.alert-warning{background-color:var(--brand-soft)!important;color:var(--brand-soft-text)!important;border-color:var(--brand-soft-border)!important;}
.bg-warning{background-color:var(--brand-soft)!important;color:var(--brand-soft-text)!important;}
.text-warning{color:var(--brand)!important;}
.table-warning,.table-warning>th,.table-warning>td{background-color:var(--brand-soft)!important;color:var(--brand-soft-text)!important;}
.badge.bg-warning,.badge-warning{background-color:var(--brand-soft)!important;color:var(--brand-soft-text)!important;}
.btn-warning{background-color:#ffb9c1!important;border-color:#f5a3ad!important;color:var(--brand-soft-text)!important}

/* Kiosk / Tabletmode */
.kiosk-card{border:2px solid var(--brand);border-radius:1rem;padding:1rem;text-align:center;cursor:pointer;user-select:none;}
.kiosk-card h5{margin:.5rem 0;font-size:1.4rem;}
.kiosk-actions .btn{min-width:200px;min-height:72px;font-size:1.4rem;}
.kiosk-keypad button{width:80px;height:80px;font-size:2rem;margin:.25rem;}
@media (max-width: 768px){
  .kiosk-actions .btn{min-width:46%;min-height:64px;font-size:1.2rem;}
  .kiosk-keypad button{width:28vw;height:64px;font-size:1.5rem;}
}