/* ── Shared Design Tokens & Core Components ─────────────── */

:root {
  --accent:        #4F46E5;
  --accent-d:      #4338CA;
  --accent-dim:    rgba(79,70,229,.16);
  --accent-border: rgba(79,70,229,.35);

  --sel-bg:     #C7D2FE;
  --sel-border: rgba(79,70,229,.5);
  --sel-color:  #3730A3;

  --cta-bg:    #4F46E5;
  --cta-color: #fff;

  --bg:        #0B2027;
  --surface:   #102b33;
  --surface-2: #183540;

  --border:   #1f404e;
  --border-2: #2d5261;

  --text:  #edeef0;
  --muted: #8b9199;

  --ok:        #3dd68c;
  --ok-bg:     rgba(61,214,140,.10);
  --ok-border: rgba(61,214,140,.28);

  --warn:        #f0c040;
  --warn-bg:     rgba(240,192,64,.09);
  --warn-border: rgba(240,192,64,.30);

  --err:        #f87171;
  --err-bg:     rgba(248,113,113,.10);
  --err-border: rgba(248,113,113,.28);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
}

[data-theme="light"] {
  --accent:        #4F46E5;
  --accent-d:      #4338CA;
  --accent-dim:    rgba(79,70,229,.07);
  --accent-border: rgba(79,70,229,.22);

  --sel-bg:     #EEF2FF;
  --sel-border: rgba(79,70,229,.3);
  --sel-color:  #4F46E5;

  --cta-bg:    #4F46E5;
  --cta-color: #fff;

  --bg:        #f4f6f9;
  --surface:   #ffffff;
  --surface-2: #edf0f5;

  --border:   #dde1ea;
  --border-2: #c7cdd9;

  --text:  #1b1e26;
  --muted: #576070;

  --ok:        #1a8a58;
  --ok-bg:     rgba(26,138,88,.07);
  --ok-border: rgba(26,138,88,.22);

  --warn:        #c44010;
  --warn-bg:     rgba(196,64,16,.07);
  --warn-border: rgba(196,64,16,.22);

  --err:        #c0392b;
  --err-bg:     rgba(192,57,43,.07);
  --err-border: rgba(192,57,43,.22);
}

/* ── Reset & Page Shell ──────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;font-size:16px;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;}
a{color:inherit;text-decoration:none;}

/* ── Header & Navigation ─────────────────────────────────── */
header, .header-bar, .form-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit;}
.brand-icon{width:28px;height:28px;border-radius:6px;background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.header-brand{font-size:1.1rem;font-weight:700;color:#40c5d4;letter-spacing:-.02em;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.header-logo{width:28px;height:28px;object-fit:contain;border-radius:6px;flex-shrink:0;}
.header-right, .header-actions{display:flex;align-items:center;gap:8px;}
.header-email{font-size:.82rem;color:var(--muted);flex:1;}
.user-badge{font-size:.8rem;font-weight:600;color:var(--muted);padding:2px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;}
.btn-logout{background:var(--surface-2);color:var(--accent);border:1px solid var(--border-2);border-radius:var(--r-sm);font-family:inherit;font-size:.82rem;padding:4px 10px;cursor:pointer;transition:color .15s;}
.btn-logout:hover{color:var(--err);}

.admin-nav{background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;display:flex;gap:0;overflow-x:auto;justify-content:center;}
.nav-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:inherit;font-size:.88rem;font-weight:600;padding:12px 16px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;}
.nav-tab:hover{color:var(--text);}
.nav-tab.is-active,.nav-tab.active{color:var(--accent);border-bottom-color:var(--accent);}

/* ── Pill Toggles (Theme & Lang) ─────────────────────────── */
.btn-theme{position:relative;background:var(--surface-2);border:1px solid var(--border-2);border-radius:99px;width:58px;height:30px;padding:0;cursor:pointer;flex-shrink:0;transition:background .2s,border-color .2s;}
.btn-theme::before{content:'☽';position:absolute;left:50%;top:50%;transform:translate(calc(-100% - 7px),-50%);font-size:.9rem;color:#fff;line-height:1;pointer-events:none;z-index:1;transition:color .2s;}
.btn-theme::after{content:'☀';position:absolute;left:50%;top:50%;transform:translate(7px,-50%);font-size:.9rem;color:var(--muted);line-height:1;pointer-events:none;z-index:1;transition:color .2s;}
.theme-knob{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--accent);transition:transform .2s ease,background .2s;display:block;pointer-events:none;}
[data-theme="light"] .btn-theme::before{color:var(--muted);}
[data-theme="light"] .btn-theme::after{color:#fff;}
[data-theme="light"] .theme-knob{transform:translateX(26px);}

.lang-toggle-btn{position:relative;background:var(--surface-2);border:1px solid var(--border-2);border-radius:99px;width:58px;height:30px;padding:0;cursor:pointer;flex-shrink:0;font-family:inherit;transition:background .2s,border-color .2s;}
.lang-toggle-btn::before{content:'DE';position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:.62rem;font-weight:700;color:var(--muted);line-height:1;pointer-events:none;letter-spacing:.03em;z-index:1;transition:color .2s;}
.lang-toggle-btn::after{content:'EN';position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:.62rem;font-weight:700;color:var(--muted);line-height:1;pointer-events:none;letter-spacing:.03em;z-index:1;transition:color .2s;}
.lang-knob{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--accent);transition:transform .2s ease;display:block;pointer-events:none;}
[data-lang="de"] .lang-toggle-btn::before{color:#fff;}
[data-lang="en"] .lang-toggle-btn::after{color:#fff;}
[data-lang="en"] .lang-knob{transform:translateX(26px);}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary, .btn-submit{background:var(--cta-bg);color:var(--cta-color);border:none;border-radius:var(--r-xl);font-family:inherit;font-size:1rem;font-weight:600;padding:18px;cursor:pointer;width:100%;transition:background .15s,filter .15s,transform .15s;}
.btn-primary:hover:not(:disabled), .btn-submit:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-2px);}
.btn-primary:disabled, .btn-submit:disabled{opacity:.5;cursor:not-allowed;}
.btn-outline{background:none;border:1px solid var(--border-2);color:var(--text);font-family:inherit;font-size:.9rem;padding:11px 16px;border-radius:var(--r-md);cursor:pointer;width:100%;transition:border-color .15s;}
.btn-outline:hover{border-color:var(--accent);}
.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border-2);border-radius:var(--r-md);font-family:inherit;font-size:1rem;font-weight:600;padding:11px 16px;cursor:pointer;transition:background .15s,border-color .15s;width:100%;}
.btn-secondary:hover{border-color:var(--border);background:var(--surface);}
.btn-sm{background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);font-family:inherit;font-size:.82rem;font-weight:500;padding:5px 12px;border-radius:var(--r-sm);cursor:pointer;transition:background .15s;}
.btn-sm:hover{background:var(--border);}
.btn-link{background:none;border:none;color:var(--muted);font-family:inherit;font-size:.85rem;cursor:pointer;padding:8px 0;text-align:center;transition:color .15s;text-decoration:underline;text-underline-offset:3px;display:block;width:100%;}
.btn-link:hover{color:var(--text);}
.btn-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;transition:color .15s;font-family:inherit;}
.btn-close:hover{color:var(--text);}

/* ── Form Fields & Feedback ──────────────────────────────── */
.field{margin-top:24px;}
.field-label{display:block;font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;}
.req{color:var(--err);font-weight:700;}
.inp{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-md);color:var(--text);font-family:inherit;font-size:.95rem;padding:15px 16px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s;}
.inp:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px var(--accent);}
select.inp{cursor:pointer;}
textarea.inp{resize:vertical;min-height:100px;}
.inp-sm{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--text);font-family:inherit;font-size:.85rem;padding:7px 12px;outline:none;}
.alert{border-radius:var(--r-sm);padding:10px 14px;font-size:.88rem;line-height:1.45;margin-bottom:12px;display:none;}
.alert.err{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err);display:block;}
.alert.warn{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn);display:block;}
.alert.ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok);display:block;}
.spinner{width:32px;height:32px;border:3px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
.btn-spinner{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.25);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite;margin-right:6px;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Choice Cards ────────────────────────────────────────── */
.choice-cards{display:flex;flex-direction:column;gap:10px;}
.choice-card{display:flex;align-items:flex-start;background:var(--surface);border:1.5px solid var(--border-2);border-radius:var(--r-md);padding:0;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden;}
.choice-card:hover{border-color:var(--accent);background:var(--accent-dim);}
.choice-card:has(input:checked){border-color:var(--accent);background:var(--accent-dim);}
.choice-card-body{display:flex;align-items:flex-start;gap:14px;padding:16px;width:100%;}
.choice-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--accent);}
.choice-title{font-size:.95rem;font-weight:600;margin-bottom:3px;}
.choice-desc{font-size:.8rem;color:var(--muted);line-height:1.45;}

/* ── Overlays & Footer ───────────────────────────────────── */
.hilfe-overlay-bg, .modal-overlay, .ticket-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;z-index:200;padding:24px;overflow-y:auto;box-sizing:border-box;}
[data-theme="light"] .hilfe-overlay-bg, [data-theme="light"] .modal-overlay, [data-theme="light"] .ticket-modal-backdrop{background:rgba(0,0,0,.38);}
.hilfe-overlay-bg>*, .modal-overlay>*, .ticket-modal-backdrop>*{margin-top:auto;margin-bottom:auto;}
.ticket-modal-backdrop{opacity:0;pointer-events:none;transition:opacity .2s ease;}
.ticket-modal-backdrop.active{opacity:1;pointer-events:auto;}
.modal-actions{display:flex;gap:12px;margin-top:20px;width:100%;}
.modal-actions .btn-primary, .modal-actions .btn-secondary, .modal-actions .btn-submit, .modal-actions .btn-outline{flex:1;width:auto;border-radius:var(--r-md);padding:13px 18px;font-size:.95rem;}
.hilfe-overlay-bg>*{margin-top:auto;margin-bottom:auto;}
.hilfe-info-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:0 22px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;}
.hilfe-info-box-header{padding:18px 0 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.hilfe-info-box-header span{font-size:.97rem;font-weight:600;color:var(--text);}
.hilfe-section{padding:15px 0;border-bottom:1px solid var(--border);}
.hilfe-section:last-child{border-bottom:none;padding-bottom:20px;}
.hilfe-section-title{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:7px;}
.legal-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;padding:24px 28px 36px;margin:auto auto 0;max-width:540px;width:100%;box-sizing:border-box;transition:margin .25s ease, max-width .25s ease;}
.legal-footer.washapp-footer{max-width:440px;}
#dashboard .legal-footer{max-width:800px;}
.btn-legal{background:none;border:none;color:var(--muted);font-size:.78rem;cursor:pointer;font-family:inherit;padding:4px 0;transition:color .15s;text-decoration:underline;text-underline-offset:3px;}
.btn-legal:hover{color:var(--text);}
.legal-sep{color:var(--muted);font-size:.72rem;user-select:none;}

/* ── Toasts & Custom Dialogs ────────────────────────────── */
#toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  border-radius: var(--r-md);
  padding: 12px 20px;
  font-size: .88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#toast.toast-err {
  background: var(--err-bg);
  border-color: var(--err-border);
  color: var(--err);
}
#toast.toast-warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn);
}

.custom-dialog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.custom-dialog-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}
.custom-dialog-msg {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 20px;
  word-break: break-word;
}

/* ── Drawer & User Menu ──────────────────────────────────── */
.user-menu-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);font-size:.85rem;font-weight:600;padding:6px 12px;border-radius:var(--r-sm);cursor:pointer;transition:background .15s,border-color .15s;}
.user-menu-btn:hover{background:var(--border);border-color:var(--accent);}

.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:300;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.drawer-backdrop.active{opacity:1;pointer-events:auto;}

.drawer-panel{position:fixed;top:0;right:0;bottom:0;width:340px;max-width:85vw;background:var(--surface);border-left:1px solid var(--border);box-shadow:-4px 0 24px rgba(0,0,0,.3);z-index:301;transform:translateX(100%);transition:transform .25s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;overflow-y:auto;}
.drawer-backdrop.active .drawer-panel{transform:translateX(0);}

.drawer-user-info{padding:20px;background:var(--surface-2);border-bottom:1px solid var(--border);}
.drawer-user-email{font-size:.9rem;font-weight:700;color:var(--text);word-break:break-all;}
.drawer-user-role{display:inline-block;font-size:.72rem;font-weight:700;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);padding:2px 8px;border-radius:99px;margin-top:6px;text-transform:uppercase;letter-spacing:.04em;}
.drawer-user-prop{font-size:.8rem;color:var(--muted);margin-top:4px;}

.drawer-nav{padding:12px 0;flex:1;}
.drawer-group-title{font-size:.68rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding:12px 20px 6px;}
.drawer-item{display:flex;align-items:center;gap:12px;padding:12px 20px;color:var(--text);font-size:.9rem;font-weight:500;transition:background .15s,color .15s;text-decoration:none;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit;}
.drawer-item:hover{background:var(--surface-2);color:var(--accent);}
.drawer-item-icon{font-size:1.1rem;width:20px;text-align:center;}
.drawer-item.danger{color:var(--err);}
.drawer-item.danger:hover{background:var(--err-bg);}

.drawer-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;gap:8px;}

/* ── Desktop Persistent Side Drawer ────────────────────── */
.drawer-pin-btn{display:none;opacity:.65;transition:opacity .15s,color .15s,background .15s;padding:4px 6px;border-radius:var(--r-sm);cursor:pointer;}
.drawer-pin-btn:hover,.drawer-pin-btn.is-pinned{opacity:1;color:var(--accent);background:var(--accent-dim);}

@media (min-width: 1024px) {
  .drawer-pin-btn{display:inline-flex;align-items:center;justify-content:center;}
  
  .drawer-backdrop.pinned{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;pointer-events:none !important;position:fixed;inset:0;z-index:300;}
  .drawer-backdrop.pinned .drawer-panel{transform:translateX(0) !important;pointer-events:auto !important;box-shadow:-2px 0 16px rgba(0,0,0,.12);width:280px;top:52px;height:calc(100vh - 52px);}
  
  body.menu-pinned main.app-container,
  body.menu-pinned .app-container {
    margin-right: max(16px, calc(50% - 270px + 140px)) !important;
    margin-left: auto !important;
    transition: margin .25s ease;
  }

  body.menu-pinned #dashboard {
    margin-right: max(16px, calc(50% - 400px + 140px)) !important;
    margin-left: auto !important;
    transition: margin .25s ease;
  }

  body.menu-pinned .view {
    margin-right: max(16px, calc(50% - 220px + 140px)) !important;
    margin-left: auto !important;
    transition: margin .25s ease;
  }

  body.menu-pinned .admin-nav,
  body.menu-pinned #applet-nav {
    margin-right: max(16px, calc(50% - 270px + 140px)) !important;
    margin-left: auto !important;
    max-width: 540px !important;
    width: 100% !important;
    transition: margin .25s ease;
  }

  /* Standard Applets Legal Footer (540px container alignment) */
  body.menu-pinned .legal-footer:not(.washapp-footer) {
    margin-right: max(16px, calc(50% - 270px + 140px)) !important;
    margin-left: auto !important;
    max-width: 540px !important;
    width: 100% !important;
    transition: margin .25s ease;
  }

  /* WashApp Legal Footer (440px container alignment) */
  body.menu-pinned .legal-footer.washapp-footer {
    margin-right: max(16px, calc(50% - 220px + 140px)) !important;
    margin-left: auto !important;
    max-width: 440px !important;
    width: 100% !important;
    transition: margin .25s ease;
  }

  /* Admin Portal Legal Footer (inside #dashboard, 800px max-width) */
  body.menu-pinned #dashboard .legal-footer {
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: 800px !important;
    width: 100% !important;
    transition: margin .25s ease;
  }
}