/* =====================================================================
   BAGDAD DÖNER — Schichtplan / Staff Planning
   Glassmorphism · Dark theme · Clock-in/out · Week view
   ===================================================================== */

/* ---- Main ---- */
.sch-main{max-width:1200px;margin:0 auto;padding:1.5rem 2rem 3rem}

/* ---- Clock Section ---- */
.clock-section{
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;
  gap:2rem;padding:2rem;margin-bottom:2rem;
}
.clock-left{text-align:center}
.clock-time{
  font-family:var(--serif);font-size:3.2rem;font-weight:700;
  color:var(--accent);line-height:1;
}
.clock-date{
  font-family:var(--grotesk);font-size:.8rem;color:var(--muted);margin-top:.3rem;
}
.clock-center{text-align:center}
.clock-today-label{
  font-family:var(--grotesk);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;
}
.clock-today-shifts{font-size:.85rem;color:var(--bone);line-height:1.6}
.clock-today-shifts .shift-person{font-weight:600}
.clock-today-shifts .shift-detail{color:var(--muted);font-size:.78rem}

/* ---- Clock-In/Out ---- */
.clock-right{display:flex;justify-content:center}
.clock-in-area{display:flex;flex-direction:column;gap:.4rem;width:100%;max-width:240px}
.clock-in-label{
  font-family:var(--grotesk);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.clock-select{
  padding:.5rem .6rem;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  background:rgba(255,255,255,.05);color:var(--bone);
  font-family:var(--sans);font-size:.85rem;
}
.clock-select option{background:#1e293b;color:var(--bone)}
.clock-pin-input{
  padding:.5rem .6rem;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  background:rgba(255,255,255,.05);color:var(--bone);
  font-family:var(--grotesk);font-size:1.1rem;letter-spacing:.3em;text-align:center;
}
.clock-pin-input:focus{border-color:var(--accent);outline:none}
.clock-btn-row{display:flex;gap:.5rem}
.clock-btn{
  flex:1;padding:.55rem;border:none;border-radius:10px;
  font-family:var(--grotesk);font-size:.7rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:.2s var(--ease);
}
.clock-btn.in{background:var(--green);color:#fff}
.clock-btn.in:hover{background:#16a34a}
.clock-btn.out{background:rgba(255,255,255,.08);color:var(--bone);border:1px solid rgba(255,255,255,.12)}
.clock-btn.out:hover{background:rgba(255,255,255,.12)}
.clock-status{
  font-size:.72rem;min-height:1.2rem;text-align:center;
  font-weight:600;margin-top:.2rem;
}
.clock-status.success{color:var(--green)}
.clock-status.error{color:var(--red)}
.clock-status.info{color:var(--accent)}

/* ---- Toolbar ---- */
.sch-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.8rem;margin-bottom:1.2rem;
}
.sch-toolbar h2{font-family:var(--serif);font-size:1.5rem;color:var(--bone)}
.sch-week-nav{display:flex;align-items:center;gap:.5rem}
.sch-week-nav button{
  padding:.4rem .8rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;
  background:transparent;font-family:var(--grotesk);font-size:.72rem;font-weight:600;
  color:var(--muted);cursor:pointer;transition:.15s var(--ease);
}
.sch-week-nav button:hover{border-color:var(--accent);color:var(--accent)}
.week-label{font-family:var(--grotesk);font-weight:700;font-size:.85rem;color:var(--bone)}
.sch-add-btn{
  padding:.55rem 1.1rem;border:none;border-radius:10px;
  background:var(--accent);color:var(--ink);
  font-family:var(--grotesk);font-size:.75rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.2s var(--ease);
}
.sch-add-btn:hover{background:var(--accent-2);transform:scale(1.02)}

/* ---- Week Grid ---- */
.sch-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem;margin-bottom:2rem;
}
.sch-day{
  background:rgba(15,23,42,.75);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:.8rem;min-height:130px;transition:.2s var(--ease);
}
.sch-day.today{border-color:var(--accent);box-shadow:0 0 12px rgba(212,168,67,.15)}
.sch-day-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:.5rem;
}
.sch-day-header .day-name{
  font-family:var(--grotesk);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.sch-day-header .day-date{
  font-family:var(--grotesk);font-size:.72rem;font-weight:700;color:var(--bone);
}
.sch-day.today .day-date{color:var(--accent)}

.sch-shift-entry{
  background:rgba(212,168,67,.08);border:1px solid rgba(212,168,67,.15);
  border-radius:8px;padding:.4rem .5rem;margin-bottom:.35rem;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.72rem;transition:.15s var(--ease);
}
.sch-shift-entry:hover{border-color:rgba(212,168,67,.3)}
.sch-shift-name{font-weight:700;color:var(--bone)}
.sch-shift-role{
  font-size:.58rem;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;
}
.sch-shift-time{font-size:.62rem;color:var(--muted)}
.sch-shift-del{
  border:none;background:none;color:var(--muted);cursor:pointer;
  font-size:.8rem;padding:0 .2rem;transition:.15s;
}
.sch-shift-del:hover{color:var(--red)}
.sch-empty{
  color:rgba(255,255,255,.2);font-size:.68rem;text-align:center;
  padding:.6rem .3rem;font-style:italic;
}

/* Role colors */
.sch-shift-entry[data-role="Grill"]{border-left:3px solid #ef4444}
.sch-shift-entry[data-role="Küche"]{border-left:3px solid #D4A843}
.sch-shift-entry[data-role="Kasse"]{border-left:3px solid #22c55e}
.sch-shift-entry[data-role="Fahrer"]{border-left:3px solid #3b82f6}
.sch-shift-entry[data-role="Manager"]{border-left:3px solid #a855f7}

/* ---- Employees ---- */
.sch-employees{padding:1.5rem;margin-top:1rem}
.sch-employees h3{font-family:var(--serif);font-size:1.1rem;margin-bottom:.8rem;color:var(--bone)}

.emp-cards{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.emp-card{
  display:flex;flex-direction:column;gap:.4rem;
  padding:.8rem 1rem;border-radius:12px;
}
.emp-card-head{display:flex;align-items:center;gap:.6rem}
.emp-card-name{font-family:var(--grotesk);font-size:.85rem;font-weight:700;color:var(--bone);flex:1}
.emp-card-pin{font-family:var(--grotesk);font-size:.72rem;color:var(--muted);letter-spacing:.06em}
.emp-card-del{
  border:none;background:none;color:var(--red);cursor:pointer;
  font-size:.9rem;line-height:1;transition:.15s;padding:.2rem;
}
.emp-card-del:hover{color:#ef4444;transform:scale(1.2)}
.emp-card-roles{display:flex;flex-wrap:wrap;gap:.3rem}
.emp-role-tag{
  padding:.2rem .55rem;border-radius:100px;
  background:rgba(255,255,255,.06);
  border:1px solid color-mix(in srgb, var(--rc, var(--accent)) 30%, transparent);
  font-family:var(--grotesk);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rc, var(--accent));
}
.emp-no-role{font-size:.72rem;color:var(--muted);font-style:italic}

.emp-add-card{
  padding:1.2rem;border-radius:14px;margin-top:.5rem;
}
.emp-add-card h4{font-family:var(--grotesk);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.emp-form-row{display:flex;gap:.8rem;margin-bottom:.8rem}
.emp-field{display:flex;flex-direction:column;gap:.25rem;flex:1}
.emp-field span{font-family:var(--grotesk);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.emp-field input{
  padding:.5rem .6rem;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  background:rgba(255,255,255,.05);color:var(--bone);
  font-family:var(--sans);font-size:.85rem;
}
.emp-field input:focus{border-color:var(--accent);outline:none}
.emp-field input::placeholder{color:rgba(255,255,255,.25)}

.emp-roles-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.emp-role-check{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.35rem .7rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
  cursor:pointer;transition:.2s;
  font-family:var(--grotesk);font-size:.72rem;color:var(--muted);
}
.emp-role-check:has(input:checked){border-color:var(--accent);color:var(--accent);background:rgba(212,168,67,.1)}
.emp-role-check.vollzugriff:has(input:checked){border-color:#ec4899;color:#ec4899;background:rgba(236,72,153,.1)}
.emp-role-check input{display:none}

.emp-add-btn{
  padding:.55rem 1.2rem;border:none;border-radius:10px;
  background:var(--accent);color:var(--ink);
  font-family:var(--grotesk);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:.2s var(--ease);
}
.emp-add-btn:hover{background:var(--accent-2)}

/* ---- Modal ---- */
.sch-modal{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  place-items:center;padding:1rem;
}
.sch-modal.on{display:grid}
.sch-modal-card{
  border-radius:16px;padding:2rem;width:100%;max-width:420px;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.sch-modal-card h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:1.2rem;color:var(--accent)}
.sch-modal-card label{display:block;margin-bottom:.9rem}
.sch-modal-card label span{
  display:block;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.25rem;
}
.sch-modal-card input,.sch-modal-card select{
  width:100%;padding:.55rem .7rem;border:1px solid rgba(255,255,255,.1);
  border-radius:10px;font-family:var(--sans);font-size:.85rem;
  background:rgba(255,255,255,.05);color:var(--bone);
}
.sch-modal-card input:focus,.sch-modal-card select:focus{border-color:var(--accent);outline:none}
.sch-modal-card select option{background:#1e293b;color:var(--bone)}
.sch-modal-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.sch-modal-actions{display:flex;gap:.8rem;margin-top:1.2rem}
.sch-modal-actions button{
  flex:1;padding:.6rem;border:none;border-radius:10px;
  font-family:var(--grotesk);font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.2s var(--ease);
}
.sch-btn-save{background:var(--accent);color:var(--ink)}
.sch-btn-save:hover{background:var(--accent-2)}
.sch-btn-cancel{background:rgba(255,255,255,.08);color:var(--bone)}
.sch-btn-cancel:hover{background:rgba(255,255,255,.12)}

/* ---- Responsive ---- */
@media(max-width:900px){
  .sch-grid{grid-template-columns:repeat(3,1fr)}
  .clock-section{grid-template-columns:1fr;gap:1rem}
}
@media(max-width:600px){
  .sch-grid{grid-template-columns:1fr 1fr}
  .sch-main{padding:1rem}
  .sch-modal-row{grid-template-columns:1fr}
}

/* ---- Responsive Mobile ---- */
@media(max-width:767px){
  .fin-header, .inv-header, .schicht-header{padding:.35rem .7rem}
  .fin-header .brand-b, .inv-header .brand-b, .schicht-header .brand-b{font-size:.82rem}
  .fin-nav, .inv-nav, .schicht-nav{display:none}
  .fin-main, .inv-main, .schicht-main{padding:.6rem}
  table{font-size:.72rem}
  th,td{padding:.35rem .4rem}
  .table-wrap{margin:.3rem 0;border-radius:8px}
  .table-wrap table{min-width:480px}
  .fin-stats{flex-direction:column;gap:.4rem}
  .stat-card{padding:.6rem}
  .btn{min-height:48px;font-size:.72rem;padding:.5rem 1rem}
  input,select{min-height:48px;font-size:.82rem}
  .inv-quick-btn{min-height:48px;min-width:48px;font-size:1rem}
}