/* ==========================================================================
   Weckzentrale – Bereiche: Wecker, Countdowns, Stoppuhr, Klingeln, Nachttisch,
   Berechtigungen, Einstellungen
   ========================================================================== */

/* ---------- Nächster Wecker ---------- */
.next-card{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius-m);
  background:var(--accent-alarm-soft); color:var(--text); border:1px solid transparent;
}
.next-card .ico{width:28px; height:28px; color:var(--accent-alarm); stroke-width:2.2;}
.next-main{display:flex; flex-direction:column; min-width:0; flex:1;}
.next-label{font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-alarm);}
.next-time{font-size:1.5rem; font-weight:700; line-height:1.15;}
.next-sub{font-size:.85rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.next-card.none{background:var(--surface-2); border-color:var(--border);}
.next-card.none .ico, .next-card.none .next-label{color:var(--text-faint);}

/* ---------- Gruppen & Weckzeiten ---------- */
.groups-list{display:flex; flex-direction:column; gap:12px;}
.group-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px;}
.group-header{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.group-heading{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;}
.group-name-btn{background:none; border:0; font-size:1.02rem; font-weight:700; color:var(--text); cursor:pointer; padding:4px 6px; margin-left:-6px; border-radius:8px; text-align:left;}
.group-name-btn:hover{background:var(--surface-2);}
.group-controls{display:flex; align-items:center; gap:6px; flex:none;}
.badge{font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:999px; letter-spacing:.02em; white-space:nowrap;}
.badge-active{background:var(--success-soft); color:var(--success);}
.badge-off{background:var(--surface-2); color:var(--text-faint);}
.badge-paused{background:var(--accent-alarm-soft); color:var(--accent-alarm);}

.alarm-rows{display:flex; flex-direction:column; gap:8px;}
.alarm-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px 12px;
  padding:10px 10px 10px 12px; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--surface-2);
}
.alarm-row.is-disabled .alarm-time, .alarm-row.is-disabled .alarm-info{opacity:.5;}
.alarm-time{font-weight:700; font-size:1.7rem; line-height:1; letter-spacing:-.01em; cursor:pointer;}
.alarm-info{min-width:0; display:flex; flex-direction:column; gap:4px; cursor:pointer;}
.alarm-name{font-weight:600; font-size:.92rem; overflow-wrap:anywhere;}
.alarm-days{display:flex; gap:3px; flex-wrap:wrap; align-items:center;}
.day-chip{font-size:.66rem; font-weight:700; color:var(--text-faint); background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:1px 5px;}
.day-chip.active{color:var(--accent-alarm); border-color:var(--accent-alarm); background:var(--accent-alarm-soft);}
.alarm-when{font-size:.76rem; color:var(--text-dim);}
.alarm-when.skipped{color:var(--warning);}
.alarm-meta{display:inline-flex; gap:4px; color:var(--text-faint); margin-left:4px;}
.alarm-meta .ico{width:14px; height:14px;}
.alarm-controls{display:flex; align-items:center; gap:6px;}
@media (max-width:460px){
  .alarm-row{grid-template-columns:auto 1fr; }
  .alarm-controls{grid-column:1 / -1; justify-content:flex-end; padding-top:4px; border-top:1px dashed var(--border);}
}

.day-picker{display:flex; gap:5px; flex-wrap:wrap;}
.day-toggle{
  font-size:.84rem; font-weight:700; width:42px; height:40px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-dim);
}
.day-toggle.active{background:var(--accent-alarm); border-color:var(--accent-alarm); color:var(--on-alarm);}
.quick-days{display:flex; gap:6px; flex-wrap:wrap;}
.chip{
  font-size:.8rem; font-weight:600; padding:7px 12px; min-height:34px; border-radius:999px; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-dim);
}
.chip:hover{border-color:var(--accent-local); color:var(--accent-local);}
.chip.active{background:var(--accent-local-soft); border-color:var(--accent-local); color:var(--accent-local);}

.pause-list{display:flex; flex-direction:column; gap:6px;}
.pause-item{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-s); font-size:.88rem;}
.pause-add-row{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end;}
@media (max-width:460px){ .pause-add-row{grid-template-columns:1fr 1fr;} .pause-add-row .btn{grid-column:1 / -1;} }

/* ---------- Countdowns ---------- */
.composer{display:flex; flex-direction:column; gap:12px;}
.composer-digits{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.composer-digits .field input{text-align:center; font-size:1.5rem; font-weight:700; padding:8px 4px;}
.composer-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.composer-row .btn-primary{flex:1 1 160px;}
.preset-row{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; margin:0 -2px; scrollbar-width:thin; -webkit-overflow-scrolling:touch;}
.preset-chip{
  flex:none; display:inline-flex; flex-direction:column; align-items:flex-start; gap:0;
  padding:8px 14px; border-radius:14px; border:1px solid var(--border-strong); background:var(--surface); cursor:pointer; color:var(--text);
}
.preset-chip b{font-size:.95rem;}
.preset-chip small{font-size:.72rem; color:var(--text-faint);}
.preset-chip:hover{border-color:var(--accent-timer);}
.preset-chip.edit{justify-content:center; align-items:center; color:var(--text-dim); border-style:dashed;}

.timers-list{display:grid; grid-template-columns:1fr; gap:12px;}
@media (min-width:640px){ .timers-list{grid-template-columns:1fr 1fr;} }
.timer-card{
  position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  box-shadow:var(--shadow); padding:12px 14px 16px; display:flex; flex-direction:column; gap:6px;
}
.timer-card.status-running{border-color:color-mix(in srgb, var(--accent-timer) 45%, var(--border));}
.timer-card.status-done{background:var(--accent-timer-soft); border-color:var(--accent-timer);}
.timer-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.timer-name{background:none; border:0; padding:2px 4px; margin-left:-4px; border-radius:6px; font-weight:700; font-size:.95rem; color:var(--text); cursor:pointer; text-align:left; overflow-wrap:anywhere;}
.timer-name:hover{background:var(--surface-2);}
.timer-state{font-size:.74rem; color:var(--text-dim); white-space:nowrap;}
.timer-digits{font-weight:700; font-size:2.6rem; line-height:1.05; letter-spacing:-.01em;}
.timer-digits .days{font-size:.55em; font-weight:600; color:var(--text-dim); margin-right:6px;}
.timer-card.status-paused .timer-digits{color:var(--text-dim);}
.timer-card.status-done .timer-digits{color:var(--accent-timer);}
.timer-sub{font-size:.8rem; color:var(--text-dim); display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.timer-sub .ico{width:14px; height:14px;}
.timer-actions{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;}
.timer-actions .btn{min-height:38px; padding:7px 12px;}
.timer-actions .spacer{flex:1;}
.progress{position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--surface-2);}
.progress-bar{height:100%; width:100%; background:var(--accent-timer); transform-origin:left center; transform:scaleX(0); transition:transform .25s linear;}

/* ---------- Stoppuhr ---------- */
.big-display-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); box-shadow:var(--shadow); padding:28px 16px; display:flex; flex-direction:column; align-items:center; gap:20px;}
.big-digits{font-weight:700; font-size:clamp(2.8rem, 15vw, 4.4rem); letter-spacing:-.01em; line-height:1;}
.control-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.control-row .btn{min-width:120px;}
.laps-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); padding:10px 16px 6px;}
.laps-head{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:34px;}
.laps-head h3{font-size:.95rem;}
.laps-table{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.9rem;}
.laps-table th{text-align:left; font-family:var(--font-ui); font-size:.72rem; color:var(--text-faint); font-weight:700; letter-spacing:.04em; padding:8px 4px; border-bottom:1px solid var(--border);}
.laps-table td{padding:8px 4px; border-bottom:1px solid var(--border);}
.laps-table tr:last-child td{border-bottom:0;}
.laps-table tr.best td:nth-child(2){color:var(--success); font-weight:700;}
.laps-table tr.worst td:nth-child(2){color:var(--danger); font-weight:700;}
.laps-empty{color:var(--text-faint); font-size:.88rem; padding:12px 0 14px;}

/* ---------- Klingel-Overlay ---------- */
.ring-overlay{
  position:fixed; inset:0; z-index:80; display:none; overflow-y:auto;
  background:var(--ring-bg); color:var(--ring-fg);
  padding:calc(24px + var(--safe-top)) calc(20px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left));
}
.ring-overlay.open{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ring-overlay.ring-alarm{--ring-bg:var(--accent-alarm); --ring-fg:var(--on-alarm);}
.ring-overlay.ring-timer{--ring-bg:var(--accent-timer); --ring-fg:var(--on-timer);}
.ring-overlay.ring-test{--ring-bg:var(--accent-stopwatch); --ring-fg:var(--on-stopwatch);}
.ring-stack{width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:18px;}
.ring-main{text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; animation:ring-pulse 1.6s ease-in-out infinite;}
@keyframes ring-pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.025);}}
.ring-kicker{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:800; letter-spacing:.16em; opacity:.8;}
.ring-kicker .ico{width:18px; height:18px;}
.ring-time{font-size:clamp(3.6rem, 22vw, 6rem); font-weight:700; line-height:1; letter-spacing:-.02em;}
.ring-title{font-size:1.35rem; font-weight:700; overflow-wrap:anywhere;}
.ring-subtitle{font-size:.95rem; opacity:.85;}
.ring-note{font-size:.85rem; padding:8px 12px; border-radius:10px; background:rgba(0,0,0,.14); text-align:center;}
.ring-actions{display:flex; flex-direction:column; gap:10px; width:100%;}
.ring-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:62px; border-radius:18px;
  font-size:1.15rem; font-weight:700; cursor:pointer; border:2px solid currentColor; background:transparent; color:inherit;
}
.ring-btn .ico{width:24px; height:24px;}
.ring-btn.stop{background:var(--ring-fg); color:var(--ring-bg); border-color:var(--ring-fg);}
.ring-btn:focus-visible{outline:3px solid var(--ring-fg); outline-offset:3px;}
.ring-others{width:100%; display:flex; flex-direction:column; gap:8px;}
.ring-other{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.14);}
.ring-other span{flex:1; font-weight:600; overflow-wrap:anywhere;}
.ring-other button{border:1px solid currentColor; background:transparent; color:inherit; border-radius:10px; padding:6px 12px; font-weight:700; cursor:pointer; min-height:38px;}
.ring-challenge{width:100%; display:flex; flex-direction:column; gap:10px; align-items:stretch; text-align:center;}
.ring-challenge .question{font-size:2rem; font-weight:700;}
.ring-challenge input{
  font-size:1.8rem; text-align:center; font-weight:700; padding:10px; border-radius:14px; border:2px solid var(--ring-fg);
  background:rgba(255,255,255,.9); color:#111; width:100%;
}
.ring-challenge.wrong input{animation:shake .3s;}
@keyframes shake{0%,100%{transform:none;} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);}}

/* ---------- Nachttisch-Modus ---------- */
.nightstand{
  position:fixed; inset:0; z-index:70; display:none; background:#000; color:#e8e4da; overflow:hidden;
  padding:calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left));
  -webkit-user-select:none; user-select:none; cursor:default;
}
.nightstand.open{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.nightstand.red{color:#ff5a3c;}
.ns-content{display:flex; flex-direction:column; align-items:center; gap:10px; transition:transform 2s ease, opacity .3s;}
.ns-clock{font-size:clamp(4.5rem, 24vw, 16rem); font-weight:300; line-height:.95; letter-spacing:-.03em;}
.ns-clock .sec{font-size:.3em; opacity:.6; margin-left:.1em;}
.ns-date{font-size:clamp(1rem, 3.5vw, 1.6rem); opacity:.7;}
.ns-next{font-size:clamp(.95rem, 3vw, 1.3rem); opacity:.8; display:flex; align-items:center; gap:8px;}
.ns-next .ico{width:1.2em; height:1.2em;}
.ns-timers{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; opacity:.8; font-size:1rem;}
.ns-timer{padding:4px 10px; border:1px solid currentColor; border-radius:999px;}
.ns-warning{font-size:.9rem; color:#f0b44a; text-align:center; max-width:520px;}
.ns-dim{position:absolute; inset:0; background:#000; pointer-events:none;}
.ns-controls{
  position:absolute; left:0; right:0; bottom:0; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
  padding:14px calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));
  background:linear-gradient(transparent, rgba(0,0,0,.85)); transition:opacity .3s; z-index:2;
}
.nightstand.controls-hidden .ns-controls{opacity:0; pointer-events:none;}
.ns-controls button{border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#eee; border-radius:12px; min-height:44px; padding:8px 14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
.ns-controls label{display:flex; align-items:center; gap:8px; color:#ccc; font-size:.85rem;}
.ns-controls input[type=range]{width:140px; accent-color:#f0aa3e;}

/* ---------- Berechtigungen ---------- */
.perm-grid{display:grid; grid-template-columns:1fr; gap:10px;}
.perm-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:14px; display:flex; flex-direction:column; gap:10px;}
.perm-head{display:flex; align-items:center; gap:12px;}
.perm-icon{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); color:var(--text-dim); flex:none;}
.perm-icon .ico{width:22px; height:22px;}
.perm-card.lvl-ok .perm-icon{background:var(--success-soft); color:var(--success);}
.perm-card.lvl-warn .perm-icon{background:var(--warning-soft); color:var(--warning);}
.perm-card.lvl-blocked .perm-icon{background:var(--danger-soft); color:var(--danger);}
.perm-titles{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
.perm-titles h3{font-size:.98rem;}
.perm-desc{font-size:.86rem; color:var(--text-dim);}
.perm-extra{display:flex; flex-direction:column; gap:10px; font-size:.86rem;}
.perm-extra ol, .perm-extra ul{margin:0; padding-left:1.25em; display:flex; flex-direction:column; gap:4px;}
.perm-hint{display:flex; gap:8px; align-items:flex-start; font-size:.82rem; color:var(--text-dim); background:var(--surface-2); border-radius:10px; padding:9px 10px;}
.perm-hint .ico{width:16px; height:16px; margin-top:2px;}
.perm-hint.warn{background:var(--warning-soft); color:var(--warning);}
.perm-hint.bad{background:var(--danger-soft); color:var(--danger);}
.perm-actions{display:flex; gap:8px; flex-wrap:wrap;}
.perm-actions .btn{min-height:38px;}
.kbd-icon{display:inline-flex; vertical-align:-.25em; padding:1px 4px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface);}
.kbd-icon .ico{width:15px; height:15px;}

/* ---------- Einrichtungsassistent ---------- */
.wizard-progress{display:flex; gap:4px;}
.wizard-progress span{flex:1; height:4px; border-radius:2px; background:var(--surface-3);}
.wizard-progress span.done{background:var(--accent-alarm);}
.wizard-step{display:flex; flex-direction:column; gap:12px;}
.wizard-step .perm-card{border:0; padding:0; background:transparent;}
.wizard-hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:6px 0;}
.wizard-hero img{width:72px; height:72px; border-radius:18px; box-shadow:var(--shadow);}
.wizard-hero h3{font-size:1.3rem;}
.wizard-summary{display:flex; flex-direction:column; gap:6px;}
.wizard-summary div{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:10px; background:var(--surface-2); font-size:.9rem;}
.wizard-nav{display:flex; gap:8px; justify-content:space-between; align-items:center; padding-top:4px; border-top:1px solid var(--border);}
.wizard-nav .btn{min-width:96px;}

/* ---------- Einstellungen ---------- */
.settings{display:flex; flex-direction:column; gap:12px;}
.settings-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:14px 16px; display:flex; flex-direction:column; gap:12px;}
.settings-card h3{font-size:1rem; display:flex; align-items:center; gap:8px;}
.settings-card h3 .ico{color:var(--text-dim);}
.settings-intro{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.sound-list{display:flex; flex-direction:column; gap:6px;}
.sound-item{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border);}
.sound-item span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem;}
.capability-table{width:100%; border-collapse:collapse; font-size:.86rem;}
.capability-table td{padding:6px 2px; border-bottom:1px solid var(--border); vertical-align:top;}
.capability-table tr:last-child td{border-bottom:0;}
.capability-table td:last-child{text-align:right; white-space:nowrap;}
.theme-choice{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}

/* ---------- Synchronisierung & gemeinsame Bereiche ---------- */
.badge-shared{display:inline-flex; align-items:center; gap:4px; background:var(--accent-timer-soft); color:var(--accent-timer);}
.badge-shared .ico{width:13px; height:13px;}
.group-card.is-shared{border-color:color-mix(in srgb, var(--accent-timer) 40%, var(--border));}
.timer-state{display:inline-flex; align-items:center; gap:6px;}

.sharing-card{gap:14px;}
.share-block{display:flex; flex-direction:column; gap:10px; padding-top:12px; border-top:1px solid var(--border);}
.share-block:first-of-type{padding-top:0; border-top:0;}
.share-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.share-head h4{font-size:.95rem; margin:0 0 2px;}
.code-box{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border);}
.code-label{font-size:.75rem; font-weight:700; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase;}
.code-value{font-family:var(--font-mono); font-size:1.02rem; font-weight:700; letter-spacing:.06em; flex:1; min-width:140px;}
.code-display{
  font-family:var(--font-mono); font-size:clamp(1.4rem, 7vw, 2rem); font-weight:700; letter-spacing:.08em; text-align:center;
  padding:16px 12px; border-radius:14px; background:var(--accent-timer-soft); color:var(--accent-timer); user-select:all; -webkit-user-select:all;
}
.code-input{font-family:var(--font-mono) !important; letter-spacing:.08em; text-transform:uppercase;}
.member-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.member-list li{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border);}
.member-name{flex:1; min-width:0; display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.9rem;}
.member-name .ico{width:16px; height:16px; color:var(--text-dim);}
.space-item{display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border);}
.space-title{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.space-title .ico{color:var(--accent-timer);}
.space-item .toggle-line{min-height:36px; padding:0;}
.radio-line{display:flex; gap:10px; align-items:flex-start; padding:8px 4px; cursor:pointer;}
.radio-line input{margin-top:4px; accent-color:var(--accent-local); width:18px; height:18px; flex:none;}