/* =====================================================================
   Schichtkalender – Design angelehnt an Google Kalender
   ===================================================================== */

:root {
    --blue: #1a73e8;
    --blue-dark: #1557b0;
    --blue-bg: #e8f0fe;
    --text: #3c4043;
    --text-2: #70757a;
    --text-3: #5f6368;
    --border: #dadce0;
    --hover: #f1f3f4;
    --bg: #ffffff;
    --red: #ea4335;
    --shadow-1: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
    --shadow-2: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
    --shadow-3: 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12), 0 11px 15px -7px rgba(0,0,0,.2);

    --fs-color: #137333; --fs-bg: #e6f4ea; --fs-band: rgba(52,168,83,.12);
    --ms-color: #1967d2; --ms-bg: #e8f0fe; --ms-band: rgba(26,115,232,.12);
    --ss-color: #8430ce; --ss-bg: #f3e8fd; --ss-band: rgba(132,48,206,.12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Google Sans", Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

#app { height: 100%; }

button { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.ico { vertical-align: middle; flex-shrink: 0; }

/* ---------- Ladeanzeige ---------- */
.gc-loading {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--text-2);
}
.spinner {
    width: 36px; height: 36px;
    border: 4px solid var(--blue-bg);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Buttons ---------- */
.gc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 16px;
    border-radius: 4px; border: 1px solid transparent;
    font-size: 14px; font-weight: 500; letter-spacing: .25px;
    cursor: pointer; background: transparent; color: var(--text);
    white-space: nowrap;
}
.gc-btn.outline { border-color: var(--border); background: #fff; }
.gc-btn.outline:hover { background: var(--hover); }
.gc-btn.primary { background: var(--blue); color: #fff; padding: 0 24px; }
.gc-btn.primary:hover { background: var(--blue-dark); box-shadow: var(--shadow-1); }
.gc-btn.primary:disabled { background: #a8c7fa; cursor: default; box-shadow: none; }
.gc-btn.text { color: var(--blue); }
.gc-btn.text:hover { background: var(--blue-bg); }
.gc-btn.text.danger { color: #c5221f; }
.gc-btn.text.danger:hover { background: #fce8e6; }
.gc-btn.small { height: 30px; font-size: 12px; padding: 0 10px; }

.gc-iconbtn {
    width: 40px; height: 40px; border-radius: 50%;
    border: none; background: transparent; color: var(--text-3);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.gc-iconbtn:hover { background: var(--hover); }
.gc-iconbtn.sm { width: 28px; height: 28px; }

/* ---------- App-Layout ---------- */
.gc-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.gc-topbar {
    height: 64px; flex-shrink: 0;
    display: flex; align-items: center; gap: 4px;
    padding: 0 8px 0 8px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    position: relative; z-index: 20;
}
.gc-logo {
    width: 40px; height: 40px; margin-left: 4px;
    border: 2px solid var(--blue); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    position: relative; color: var(--blue); font-weight: 700; font-size: 18px;
}
.gc-logo::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
    background: var(--blue); border-radius: 4px 4px 0 0;
}
.gc-logo span { margin-top: 6px; }
.gc-appname { font-size: 22px; color: var(--text-3); margin: 0 24px 0 8px; }
.today-btn { margin-right: 8px; }
.gc-datetitle { font-size: 22px; font-weight: 400; margin: 0 0 0 8px; white-space: nowrap; }
.gc-spacer { flex: 1; }

.gc-curshift { display: flex; align-items: center; gap: 6px; margin-right: 12px; color: var(--text-2); font-size: 13px; white-space: nowrap; }

.gc-select {
    height: 36px; padding: 0 28px 0 12px;
    border: 1px solid var(--border); border-radius: 4px; background: #fff;
    font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%235f6368' d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat; background-position: right 4px center; background-size: 20px;
    margin: 0 4px;
}

.gc-avatar-wrap { position: relative; margin-left: 4px; }
.gc-avatar {
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: var(--blue); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
}
.gc-usermenu {
    position: absolute; right: 0; top: 44px; min-width: 240px;
    background: #fff; border-radius: 8px; box-shadow: var(--shadow-2);
    padding: 16px; z-index: 50; display: flex; flex-direction: column; gap: 4px;
}
.um-name { font-weight: 500; }
.um-mail { color: var(--text-2); font-size: 13px; margin-bottom: 12px; word-break: break-all; }

.gc-body { flex: 1; display: flex; min-height: 0; position: relative; }

/* ---------- Seitenleiste ---------- */
.gc-sidebar {
    width: 256px; flex-shrink: 0; padding: 12px 8px 16px 16px;
    overflow-y: auto; border-right: 1px solid transparent;
    transition: width .2s ease, padding .2s ease;
}
.sidebar-closed .gc-sidebar { width: 0; padding-left: 0; padding-right: 0; overflow: hidden; }
.gc-sidebar-backdrop { display: none; }

.gc-create {
    display: inline-flex; align-items: center; gap: 12px;
    height: 48px; padding: 0 20px 0 14px; margin: 4px 0 16px 0;
    border: none; border-radius: 24px; background: #fff;
    box-shadow: var(--shadow-1); font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer;
}
.gc-create:hover { box-shadow: var(--shadow-2); background: #f8f9fa; }

.gc-side-section { margin-top: 20px; }
.gc-side-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.gc-check { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 4px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.gc-check:hover { background: var(--hover); }
.gc-check input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.gc-check.c-event input { accent-color: #039be5; }
.gc-check.c-task input { accent-color: #3f51b5; }
.gc-check.c-bday input { accent-color: #e67c73; }
.gc-check.c-shift input { accent-color: #188038; }

.gc-legend { display: flex; align-items: center; gap: 8px; height: 28px; font-size: 13px; }
.legend-name { flex: 1; }
.legend-time { color: var(--text-2); font-size: 12px; }
.gc-thisweek { margin: 8px 0; padding: 8px 10px; background: #f8f9fa; border-radius: 8px; font-size: 13px; line-height: 1.6; }

/* ---------- Mini-Kalender ---------- */
.mini { margin-top: 4px; }
.mini-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px 8px; }
.mini-title { font-size: 14px; font-weight: 500; }
.mini-nav { display: flex; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr) 30px; row-gap: 2px; }
.mini-dow { text-align: center; font-size: 10px; color: var(--text-2); font-weight: 500; height: 20px; line-height: 20px; }
.mini-day {
    height: 26px; width: 26px; margin: 0 auto; line-height: 26px; text-align: center;
    font-size: 11px; border-radius: 50%; cursor: pointer;
}
.mini-day:hover { background: var(--hover); }
.mini-day.other { color: var(--text-2); opacity: .7; }
.mini-day.selected { background: var(--blue-bg); color: var(--blue); font-weight: 500; }
.mini-day.today { background: var(--blue); color: #fff; font-weight: 500; }
.mini-shift { display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; }
.mini-shift:hover { background: var(--hover); }

/* ---------- Schicht-Kennzeichnung ---------- */
.shift-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    padding: 1px 6px; border-radius: 4px; line-height: 16px; white-space: nowrap;
}
.shift-badge .name { font-weight: 500; }
.shift-badge .times { font-weight: 400; opacity: .85; }
.shift-badge.large { font-size: 13px; padding: 3px 10px; line-height: 20px; }
.shift-FS { background: var(--fs-bg); color: var(--fs-color); }
.shift-MS { background: var(--ms-bg); color: var(--ms-color); }
.shift-SS { background: var(--ss-bg); color: var(--ss-color); }

.shift-text { font-size: 10px; font-weight: 700; }
.shift-text-FS { color: var(--fs-color); }
.shift-text-MS { color: var(--ms-color); }
.shift-text-SS { color: var(--ss-color); }

/* ---------- Hauptbereich ---------- */
.gc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; touch-action: pan-y; }
.gc-main.swipe-next { animation: slideFromRight .22s ease-out; }
.gc-main.swipe-prev { animation: slideFromLeft .22s ease-out; }
@keyframes slideFromRight { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes slideFromLeft { from { transform: translateX(-40px); opacity: .4; } to { transform: none; opacity: 1; } }
.gc-error {
    display: flex; align-items: center; gap: 12px; padding: 8px 16px;
    background: #fce8e6; color: #c5221f; font-size: 13px;
}

/* ---------- Monatsansicht ---------- */
.month { display: flex; flex-direction: column; height: 100%; }
.month-head { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.month-shifthead, .month-dow {
    text-align: center; font-size: 11px; font-weight: 500; color: var(--text-2);
    text-transform: uppercase; padding: 8px 0 4px; letter-spacing: .8px;
}
.month-grid { flex: 1; display: grid; min-height: 0; }
.month-row { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); min-height: 0; }
.month-row:last-child { border-bottom: none; }

.month-shiftcell {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
    padding-top: 8px; background: #f8f9fa; border-right: 1px solid var(--border); cursor: pointer;
}
.month-shiftcell:hover { background: var(--hover); }
.month-shiftcell.current { background: var(--blue-bg); }
.month-shiftcell .kw { font-size: 10px; color: var(--text-2); font-weight: 500; }

.month-cell {
    border-right: 1px solid var(--border); padding: 0 4px 2px; overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column; min-height: 0;
}
.month-cell:last-child { border-right: none; }
.month-cell:hover { background: #fafafa; }
.month-cell.other .day-num { color: var(--text-2); }
.month-cell.weekend { background: #fcfcfc; }
.day-num-wrap { text-align: center; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.day-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; font-size: 12px; font-weight: 500;
}
.month-cell.today .day-num { background: var(--blue); color: #fff; }
.cell-items { flex: 1; min-height: 0; overflow: hidden; }

/* ---------- Chips (Einträge) ---------- */
.chip {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; line-height: 20px; height: 20px; padding: 0 6px;
    border-radius: 4px; margin-bottom: 2px; cursor: pointer;
    white-space: nowrap; overflow: hidden; color: var(--text);
}
.chip:hover { background: var(--hover); }
.chip.filled { color: #fff; font-weight: 500; }
.chip.filled:hover { filter: brightness(.93); }
.chip .txt { overflow: hidden; text-overflow: ellipsis; }
.chip .tm { color: var(--text-2); font-size: 11px; flex-shrink: 0; }
.chip.filled .tm { color: rgba(255,255,255,.85); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chip.task .tbox { display: inline-flex; border-radius: 50%; }
.chip.task .tbox:hover { background: rgba(0,0,0,.08); }
.chip.done .txt { text-decoration: line-through; color: var(--text-2); }
.more { font-size: 12px; font-weight: 500; color: var(--text); padding: 0 6px; line-height: 20px; cursor: pointer; border-radius: 4px; }
.more:hover { background: var(--hover); }

/* ---------- Wochen-/Tagesansicht (Zeitraster) ---------- */
.tg { display: flex; flex-direction: column; height: 100%; }
.tg-head { display: grid; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tg-corner { border-right: 1px solid var(--border); }
.tg-daycol-head { text-align: center; padding: 8px 0 6px; cursor: pointer; border-right: 1px solid transparent; }
.tg-daycol-head:hover .dnum { background: var(--hover); }
.tg-daycol-head .dow { font-size: 11px; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: .8px; }
.tg-daycol-head .dnum {
    font-size: 26px; width: 46px; height: 46px; line-height: 46px; margin: 2px auto 4px; border-radius: 50%;
    color: var(--text);
}
.tg-daycol-head.today .dow { color: var(--blue); }
.tg-daycol-head.today .dnum { background: var(--blue); color: #fff; }
.tg-daycol-head.today:hover .dnum { background: var(--blue-dark); }

.tg-allday { display: grid; border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 28px; }
.tg-allday-label { font-size: 10px; color: var(--text-2); text-align: right; padding: 2px 6px 2px 0; line-height: 1.2; }
.tg-allday-cell { border-left: 1px solid var(--border); padding: 2px 2px 0; min-height: 28px; cursor: pointer; }
.tg-allday-cell:hover { background: #fafafa; }

.tg-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }
.tg-grid { display: grid; }
.tg-hours { position: relative; }
.tg-hour { height: 48px; font-size: 10px; color: var(--text-2); text-align: right; padding-right: 8px; transform: translateY(-6px); }
.tg-col { position: relative; border-left: 1px solid var(--border); }
.tg-line { height: 48px; border-top: 1px solid var(--border); cursor: pointer; }
.tg-line:first-child { border-top: none; }
.tg-line:hover { background: #fafafa; }

.tg-band {
    position: absolute; left: 0; right: 0; pointer-events: none;
    border-left: 3px solid; padding: 2px 4px; font-size: 10px; font-weight: 600; overflow: hidden;
}
.tg-band span { position: sticky; top: 0; }
.shift-band-FS { background: var(--fs-band); border-color: #34a853; color: var(--fs-color); }
.shift-band-MS { background: var(--ms-band); border-color: var(--blue); color: var(--ms-color); }
.shift-band-SS { background: var(--ss-band); border-color: #a142f4; color: var(--ss-color); }

.tg-event {
    position: absolute; margin-left: 2px; border-radius: 4px; padding: 2px 6px;
    color: #fff; font-size: 12px; overflow: hidden; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.7);
    line-height: 1.3;
}
.tg-event:hover { filter: brightness(.95); box-shadow: var(--shadow-2); z-index: 5; }
.tg-event .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.tg-event .s { font-size: 11px; opacity: .9; }
.tg-event.done { opacity: .6; }
.tg-event.done .t { text-decoration: line-through; }

.tg-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 6; pointer-events: none; }
.tg-now .dot { position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }

/* ---------- Agenda ---------- */
.agenda { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.agenda-day { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.agenda-date { width: 110px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; cursor: pointer; }
.agenda-daynum { font-size: 26px; width: 46px; height: 46px; line-height: 46px; text-align: center; border-radius: 50%; }
.agenda-day.today .agenda-daynum { background: var(--blue); color: #fff; }
.agenda-dayname { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; }
.agenda-items { flex: 1; min-width: 0; }
.agenda-item { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.agenda-item:hover { background: var(--hover); }
.agenda-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.agenda-time { width: 110px; flex-shrink: 0; color: var(--text-3); font-size: 13px; }
.agenda-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.agenda-item.done .agenda-title { text-decoration: line-through; color: var(--text-2); }
.agenda-loc { color: var(--text-2); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.agenda-empty { text-align: center; color: var(--text-2); padding: 60px 0; }

/* ---------- Dialoge ---------- */
.overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.overlay.light { background: rgba(0,0,0,.15); }
.dialog {
    background: #fff; border-radius: 8px; width: min(600px, 100%);
    max-height: calc(100vh - 32px); overflow-y: auto;
    box-shadow: var(--shadow-3);
    animation: pop .15s ease-out;
}
.dialog.details { width: min(440px, 100%); }
.dialog.settings { width: min(640px, 100%); }
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.dialog-head { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 8px 0 24px; }
.dialog-caption { flex: 1; font-size: 13px; color: var(--text-2); }
.dialog-body { padding: 8px 24px 24px; }

.title-input {
    width: 100%; border: none; border-bottom: 1px solid var(--border);
    font-size: 22px; padding: 8px 0; outline: none; font-family: inherit; color: var(--text);
}
.title-input:focus { border-bottom: 2px solid var(--blue); padding-bottom: 7px; }

.kind-tabs { display: flex; gap: 8px; margin: 14px 0 10px; }
.kind-tab {
    height: 30px; padding: 0 14px; border-radius: 15px; border: none;
    background: var(--hover); color: var(--text-3); font-size: 14px; cursor: pointer;
}
.kind-tab:hover { background: #e8eaed; }
.kind-tab.active { background: var(--blue-bg); color: var(--blue); font-weight: 500; }

.row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.row.hint { color: var(--text-2); font-size: 12px; margin-top: -4px; }
.row .ico { width: 24px; color: var(--text-3); display: inline-flex; justify-content: center; flex-shrink: 0; }
.row-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash { color: var(--text-2); }

.field {
    height: 36px; padding: 0 10px; border: none; border-radius: 4px;
    background: var(--hover); font-family: inherit; font-size: 14px; color: var(--text);
}
.field:hover { background: #e8eaed; }
.field:focus { background: var(--blue-bg); outline: none; }
.field.time { width: 110px; }
.field.wide { width: 100%; }
textarea.field { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.4; }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-right: 16px; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.radio { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0; cursor: pointer; line-height: 1.4; }
.radio input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); }

.colors { display: flex; gap: 8px; flex-wrap: wrap; }
.color-dot { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.color-dot.sel { outline: 2px solid var(--blue); outline-offset: 2px; }
.color-preview { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }

.form-error { background: #fce8e6; color: #c5221f; padding: 8px 12px; border-radius: 4px; margin: 12px 0; font-size: 13px; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dialog-actions .spacer { flex: 1; }
.confirm-text { color: #c5221f; font-size: 13px; }

/* Detailansicht */
.details-title { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.details-color { width: 16px; height: 16px; border-radius: 4px; margin-top: 6px; flex-shrink: 0; }
.details-title h2 { margin: 0; font-size: 22px; font-weight: 400; line-height: 28px; }
.details-title h2.done { text-decoration: line-through; color: var(--text-2); }
.details-kind { color: var(--text-2); font-size: 13px; }
.details-row { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0; line-height: 24px; }
.details-row .ico { width: 16px; color: var(--text-3); display: inline-flex; justify-content: center; margin-top: 2px; flex-shrink: 0; }
.details-row .pre { white-space: pre-wrap; }

/* Schicht-Einstellungen */
.intro { color: var(--text-3); line-height: 1.5; margin: 4px 0 16px; }
.settings-section { margin: 18px 0; }
.settings-label { font-weight: 500; margin-bottom: 8px; }
.muted { color: var(--text-2); font-weight: 400; font-size: 12px; }
.shift-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shift-option {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 8px; border: 2px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer;
}
.shift-option:hover { background: #f8f9fa; }
.shift-option .code { font-size: 20px; font-weight: 700; }
.shift-option .name { font-size: 13px; }
.shift-option .time { font-size: 11px; color: var(--text-2); }
.shift-option.shift-FS .code { color: var(--fs-color); }
.shift-option.shift-MS .code { color: var(--ms-color); }
.shift-option.shift-SS .code { color: var(--ss-color); }
.shift-option.active { border-color: var(--blue); background: var(--blue-bg); }
.shift-option.active.shift-FS { border-color: #34a853; background: var(--fs-bg); }
.shift-option.active.shift-SS { border-color: #a142f4; background: var(--ss-bg); }

.times-grid { display: grid; grid-template-columns: 32px auto auto auto; align-items: center; gap: 8px 6px; margin-bottom: 10px; justify-content: start; }
.settings-preview { background: #f8f9fa; border-radius: 8px; padding: 12px 14px; }
.preview-weeks { display: flex; flex-direction: column; gap: 4px; }
.preview-week { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 4px 6px; border-radius: 4px; }
.preview-week.current { background: #fff; font-weight: 500; box-shadow: var(--shadow-1); }
.preview-week .kw { width: 50px; color: var(--text-2); }
.preview-week .range { width: 130px; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8f9fa; padding: 16px; }
.login-card {
    width: min(440px, 100%); background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 40px 40px 32px;
}
.login-logo {
    width: 56px; height: 56px; margin: 0 auto 16px; border: 3px solid var(--blue); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; position: relative; color: var(--blue);
    font-weight: 700; font-size: 24px;
}
.login-logo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--blue); border-radius: 6px 6px 0 0; }
.login-logo span { margin-top: 8px; }
.login-card h1 { text-align: center; font-size: 24px; font-weight: 400; margin: 0 0 6px; }
.login-sub { text-align: center; color: var(--text-2); margin: 0 0 24px; font-size: 14px; }
.login-field { display: block; margin-bottom: 16px; }
.login-field > span { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.login-field input {
    width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 4px;
    font-size: 15px; font-family: inherit; color: var(--text);
}
.login-field input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 1px var(--blue); }
.login-field small { display: block; color: var(--text-2); margin-top: 4px; font-size: 11px; }
.login-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; gap: 8px; }

/* ---------- Floating Action Button (nur mobil) ---------- */
.gc-fab { display: none; }

/* =====================================================================
   Responsive: Handy / MAUI-App
   ===================================================================== */
@media (max-width: 900px) {
    .gc-appname, .gc-logo, .gc-curshift { display: none; }
    .gc-topbar { padding: 0 4px; gap: 0; }
    .gc-datetitle { font-size: 17px; margin-left: 4px; flex: 1; overflow: hidden; text-overflow: ellipsis; }
    .today-btn { padding: 0 10px; margin-right: 0; }
    .gc-spacer { display: none; }
    .gc-select { height: 32px; font-size: 13px; padding-left: 8px; }

    .gc-sidebar {
        position: absolute; left: 0; top: 0; bottom: 0; z-index: 30;
        width: 280px; background: #fff; box-shadow: var(--shadow-2);
        transform: translateX(-100%); transition: transform .2s ease;
        padding: 12px 12px 16px 16px;
    }
    .sidebar-open .gc-sidebar { transform: translateX(0); }
    .sidebar-closed .gc-sidebar { width: 280px; padding: 12px 12px 16px 16px; }
    .sidebar-open .gc-sidebar-backdrop { display: block; position: absolute; inset: 0; z-index: 25; background: rgba(0,0,0,.3); }
    .gc-create { display: none; }

    .gc-fab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 16px; bottom: 16px; z-index: 40;
        width: 56px; height: 56px; border-radius: 16px; border: none;
        background: var(--blue); color: #fff; box-shadow: var(--shadow-2); cursor: pointer;
    }

    .month-head, .month-row { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); }
    .month-shiftcell .kw { display: none; }
    .month-shiftcell { padding-top: 6px; }
    .shift-badge { font-size: 10px; padding: 1px 4px; }
    .month-cell { padding: 0 1px 2px; }
    .day-num-wrap { height: 26px; }
    .chip { font-size: 10px; padding: 0 3px; height: 18px; line-height: 18px; gap: 2px; }
    .chip .tm { display: none; }
    .more { font-size: 10px; padding: 0 3px; }

    .tg-head, .tg-allday, .tg-grid { grid-template-columns: 40px repeat(var(--days, 7), minmax(0, 1fr)) !important; }
    .tg-daycol-head .dnum { font-size: 18px; width: 32px; height: 32px; line-height: 32px; }
    .tg-daycol-head .shift-badge .times { display: none; }
    .tg-hour { font-size: 9px; padding-right: 4px; }
    .tg-event { font-size: 11px; padding: 1px 4px; }
    .tg-event .s { display: none; }
    .tg-band span { display: none; }

    .agenda { padding: 8px 12px 80px; }
    .agenda-date { width: 64px; }
    .agenda-daynum { font-size: 20px; width: 36px; height: 36px; line-height: 36px; }
    .agenda-time { width: 80px; font-size: 12px; }

    .dialog-body { padding: 8px 16px 20px; }
    .shift-options { grid-template-columns: 1fr; }
    .preview-week .range { width: auto; }
    .login-card { padding: 28px 20px 24px; }
}