/* Studio-Leitzentrale V23.18 · Phase 1: konsistentes App-Design.
   Reine Darstellungsdatei; keine API-, D1-, R2- oder Push-Logik. */
:root {
  --ui-bg:#f8f7f8;
  --ui-surface:#ffffff;
  --ui-ink:#332d35;
  --ui-muted:#716a74;
  --ui-border:#e8e0e4;
  --ui-accent:#854e64;
  --ui-accent-deep:#6c394e;
  --ui-accent-soft:#f6ebf0;
  --ui-gold:#a77f58;
  --ui-shadow:0 3px 16px rgba(44,29,42,.045);
  --ui-shadow-raised:0 14px 45px rgba(44,29,42,.10);
  --ui-radius:18px;
  --ui-radius-sm:12px;
  --ui-focus:#986781;
  --gold:var(--ui-gold);
  --rose:var(--ui-accent);
  --dark:var(--ui-ink);
  --muted:var(--ui-muted);
  --border:var(--ui-border);
  --shadow:var(--ui-shadow);
  --admin-ink:var(--ui-ink);
  --admin-border:var(--ui-border);
  --admin-muted:var(--ui-muted);
  --admin-surface:var(--ui-surface);
  --admin-soft:var(--ui-bg);
  --admin-shadow:var(--ui-shadow);
  --app-ink:var(--ui-ink);
  --app-pink:var(--ui-accent);
  --app-canvas:var(--ui-bg);
  --app-surface:var(--ui-surface);
  --app-border:var(--ui-border);
  --app-shadow:var(--ui-shadow-raised);
}
html {scroll-padding-top:120px;}
body {background:var(--ui-bg);color:var(--ui-ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
#dashboard {background:var(--ui-bg);}
.main-column {min-width:0;}
:where(button,input,select,textarea,summary,a) { -webkit-tap-highlight-color:transparent; }
:where(button,a,input,select,textarea,summary):focus-visible {
  outline:3px solid var(--ui-focus);
  outline-offset:3px;
}
/* A ruhiger, wiedererkennbarer App-Rahmen */
.sidebar {background:#fff;border-right:1px solid var(--ui-border);}
.admin-brand {border-color:var(--ui-border);padding-bottom:20px;}
.admin-brand .script {color:var(--ui-gold);}
.admin-brand strong {color:var(--ui-ink);}
.admin-brand small {color:#8c8088;letter-spacing:.19em;}
.sidebar-search label {color:var(--ui-muted);font-weight:650;}
.sidebar-search input {background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);font-size:14px;}
.sidebar-search input:focus {border-color:var(--ui-accent);box-shadow:0 0 0 3px rgba(133,78,100,.12);}
.nav-group {margin:5px 0 22px;}
.nav-group-label {color:#8d8289;letter-spacing:.12em;font-size:10px;}
.tab {min-height:46px;border-radius:var(--ui-radius-sm);color:#69616c;font-weight:570;gap:11px;}
.tab-icon {border-radius:9px;color:#9c858f;background:#f9f4f6;width:29px;height:29px;font-size:18px;}
.tab.active {background:var(--ui-accent-soft);border-color:#ebd9e1;color:var(--ui-accent-deep);font-weight:750;}
.tab.active .tab-icon {color:var(--ui-accent);background:#fff;}
.tab:hover:not(.active) {background:#f8f5f6;border-color:#f0e8eb;color:var(--ui-ink);}
.sidebar-link {min-height:42px;border-radius:11px;}
.sidebar-logout {color:#8d475b;}
/* Kopfbereich zeigt pro Ansicht genau eine klare Hierarchie */
.topbar {background:rgba(248,247,248,.96);border-bottom:1px solid var(--ui-border);min-height:116px;gap:16px;}
.topbar .kicker {color:var(--ui-accent);letter-spacing:.12em;font-size:10px;}
.topbar h1 {font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:clamp(26px,2.8vw,36px);font-weight:760;letter-spacing:-.04em;line-height:1.16;color:var(--ui-ink);}
.topbar-description {color:var(--ui-muted);font-size:13px;max-width:65ch;}
.topbar-right {gap:9px;}
.topbar-visit,.admin-command-open,#logged-user {border:1px solid var(--ui-border);background:#fff;border-radius:var(--ui-radius-sm);color:#695966;box-shadow:none;}
.topbar-visit:hover,.admin-command-open:hover {background:var(--ui-accent-soft);}
.admin-version-top,.admin-version-label {background:var(--ui-accent-soft);color:var(--ui-accent-deep);border-radius:9px;font-weight:700;}
/* Flächen: weniger Rahmen und Textur, konsistente Radiuswerte */
.panel,.dashboard-section,.cockpit-box,.customer-detail,.analytics-card,
.automation-card,.inventory-product,.security-r2,.category-manager {
  background:var(--ui-surface);border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);
}
.panel {padding:clamp(18px,2.6vw,32px);}
.panel-overview,.panel-cockpit {background:transparent;border:0;box-shadow:none;padding:0;}
.welcome {border-radius:var(--ui-radius);background:linear-gradient(125deg,#f4e8ed,#fffcfd 78%);border:1px solid #ebdce3;box-shadow:var(--ui-shadow);min-height:0;}
.welcome:before {opacity:.08;}
.welcome h2 {color:var(--ui-ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:760;letter-spacing:-.045em;}
.welcome p:not(.kicker) {color:var(--ui-muted);}
.section-heading {margin-bottom:clamp(17px,2vw,25px);}
.section-heading h2,.dashboard-section-title h3,.cockpit-box h3,.panel h3 {
  color:var(--ui-ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:-.025em;font-weight:730;
}
.section-heading h2 {font-size:clamp(22px,3vw,30px);line-height:1.22;}
.panel h3,.cockpit-box h3 {font-size:clamp(18px,2vw,22px);line-height:1.3;}
.kicker {color:var(--ui-accent);letter-spacing:.12em;}
.muted,.panel-intro {color:var(--ui-muted);}
.dashboard-stat {border:1px solid var(--ui-border);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);background:#fff;transition:border-color .15s,transform .15s;}
.dashboard-stat strong {font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:770;letter-spacing:-.04em;color:var(--ui-ink);}
.dashboard-stat:hover,.quick-grid button:hover {border-color:#cfb1bf;}
.stat-foot {color:var(--ui-accent);}
.dashboard-section,.cockpit-box {padding:clamp(17px,2.3vw,25px);}
.quick-grid button {background:#fff;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);}
.quick-grid strong {font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;letter-spacing:-.02em;}
.quick-grid span {color:var(--ui-accent);}
/* Schaltflächen: gleiche Haptik/Abstände über alle Module hinweg */
.button {min-height:44px;padding:10px 16px;border-radius:var(--ui-radius-sm);border:1px solid #d8bdc9;
  background:#fff;color:var(--ui-accent-deep);font-size:13px;font-weight:700;line-height:1.3;
  box-shadow:none;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;}
.button:hover:not(:disabled) {background:var(--ui-accent-soft);border-color:#bd9aa9;box-shadow:none;transform:translateY(-1px);}
.button:active:not(:disabled) {transform:translateY(0);}
.button.primary,.button[type=submit].primary {
  background:var(--ui-accent);border-color:var(--ui-accent);color:#fff;
}
.button.primary:hover:not(:disabled) {background:var(--ui-accent-deep);border-color:var(--ui-accent-deep);color:#fff;}
.button.danger,.inventory-delete-button {border-color:#e7bec6;background:#fff8f9;color:#933e54;}
.button:disabled {opacity:.55;cursor:not-allowed;transform:none;}
/* Formularfelder mit gut lesbaren Labels und ruhigem Fokus */
:where(.panel,.login-card,.admin-command-dialog,.inventory-confirm-dialog) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea) {
  min-height:44px;border:1px solid #dfd6dc;border-radius:var(--ui-radius-sm);background:#fff;
  color:var(--ui-ink);box-shadow:none;max-width:100%;
}
:where(.panel,.login-card,.admin-command-dialog,.inventory-confirm-dialog) :is(input,select,textarea):focus {
  border-color:var(--ui-accent);outline:none;box-shadow:0 0 0 3px rgba(133,78,100,.13);
}
:where(.panel,.login-card) :is(input,textarea)::placeholder {color:#918791;}
:where(.panel,.login-card) :is(label,.field-grid label,.service-field label) {color:#554c55;}
:where(.panel,.login-card) :is(input[type=checkbox],input[type=radio]) {accent-color:var(--ui-accent);}
/* Aufklapper / Dialoge / Bestätigungen */
.admin-accordion,.studio-record-editor {background:#fff;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);box-shadow:none;}
.admin-accordion[open] {border-color:#dfc8d3;box-shadow:var(--ui-shadow);}
.admin-accordion summary {min-height:50px;color:var(--ui-ink);font-weight:690;}
.admin-accordion summary:after {color:var(--ui-accent);}
.admin-command-dialog,.inventory-confirm-dialog {
  border:1px solid var(--ui-border);border-radius:21px;background:#fff;box-shadow:var(--ui-shadow-raised);color:var(--ui-ink);
}
.admin-command-dialog::backdrop,.inventory-confirm-dialog::backdrop {background:rgba(30,23,31,.51);backdrop-filter:blur(4px);}
.admin-command-heading h2,.inventory-confirm-dialog h3 {font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:750;letter-spacing:-.03em;color:var(--ui-ink);}
.admin-command-result {border-radius:var(--ui-radius-sm);}
.admin-command-result:hover,.admin-command-result.is-selected {background:var(--ui-accent-soft);border-color:#e5ccd7;}
/* Verbindlicher Bestätigungsstandard: Ja links, Nein rechts – ohne Umbruch. */
.inventory-confirm-actions {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch;direction:ltr;}
/* Rückmeldung sichtbar, aber nicht wie ein großes Warnbanner */
.notice,.info-note {border:1px solid #e9dce2;border-radius:var(--ui-radius-sm);background:#fcf7f9;color:#604955;}
.notice.success {background:#f2f8f2;color:#326748;border-color:#d5e9d8;}
.notice.error {background:#fff4f5;color:#963c52;border-color:#eccbd1;}
#global-status.notice {border-radius:var(--ui-radius-sm);}
/* Login passend zur App */
.login-shell {background:radial-gradient(circle at 18% 12%,#f5e7ed 0,transparent 45%),var(--ui-bg);}
.login-card {background:#fff;border:1px solid var(--ui-border);border-radius:24px;box-shadow:var(--ui-shadow-raised);}
.login-card h1 {color:var(--ui-ink);}
.login-card label {color:var(--ui-ink);}
/* Tablet quer: Sidebar kompakt, Arbeitsfläche erhält Platz */
@media (min-width:861px) and (max-width:1180px) {
  #dashboard {grid-template-columns:224px minmax(0,1fr);}
  .sidebar {padding:22px 12px 16px;}
  .main-column {padding-left:22px;padding-right:22px;}
  .tab {gap:7px;padding:9px 7px;min-height:45px;}
  .tab-icon {width:27px;height:27px;}
  .topbar {min-height:98px;}
}
/* Handy / Tablet hoch: feste Kopfzeile + untere Einhandnavigation */
@media (max-width:860px) {
  html {scroll-padding-top:90px;}
  #dashboard {padding-bottom:calc(113px + env(safe-area-inset-bottom));}
  .main-column {padding-left:16px;padding-right:16px;padding-bottom:calc(24px + env(safe-area-inset-bottom));}
  .topbar {min-height:75px;margin:0 -16px 18px;padding:12px 16px;
    background:rgba(248,247,248,.97);border-bottom:1px solid var(--ui-border);box-shadow:0 3px 14px rgba(43,26,39,.045);}
  .topbar .kicker {font-size:9px;letter-spacing:.08em;color:var(--ui-accent);}
  .topbar h1 {font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:clamp(19px,4.2vw,26px);letter-spacing:-.035em;}
  #mobile-nav-toggle,#admin-command-open {border:1px solid var(--ui-border);border-radius:13px;background:#fff;box-shadow:none;min-width:44px;min-height:44px;}
  .sidebar {background:#fff;box-shadow:18px 0 52px rgba(22,12,21,.20);padding-top:calc(14px + env(safe-area-inset-top));}
  .app-sidebar-heading {border-bottom:1px solid var(--ui-border);padding-bottom:8px;color:var(--ui-ink);}
  .app-sidebar-heading button {background:var(--ui-accent-soft);color:var(--ui-accent);}
  .sidebar-search input {font-size:16px;}
  .tab {min-height:50px;font-size:14px;}
  .panel,.cockpit-box,.dashboard-section {border-radius:var(--ui-radius);padding:18px 16px;}
  .panel-overview,.panel-cockpit {padding:0;}
  .welcome {padding:22px 20px;}
  .welcome h2 {font-size:clamp(25px,6vw,36px);}
  .section-heading h2 {font-size:clamp(22px,5vw,27px);}
  .studio-mobile-bottom-nav {left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));
    bottom:calc(9px + env(safe-area-inset-bottom));gap:3px;padding:7px 6px;
    border:1px solid #e3d5dd;border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 9px 32px rgba(40,22,34,.15);}
  .studio-mobile-bottom-nav button {min-height:59px;gap:4px;border-radius:15px;color:#7a6b78;font-size:11px;}
  .studio-mobile-bottom-nav button svg {width:22px;height:22px;}
  .studio-mobile-bottom-nav button .app-nav-label {font-size:10px;font-weight:710;}
  .studio-mobile-bottom-nav button.active,.studio-mobile-bottom-nav button[aria-current="page"] {background:var(--ui-accent-soft);color:var(--ui-accent-deep);border-radius:15px;}
  .studio-mobile-bottom-nav button:focus-visible {outline:2px solid var(--ui-focus);outline-offset:1px;}
  .admin-command-dialog {top:5dvh;width:min(94vw,540px);max-height:86dvh;padding:18px;border-radius:19px;}
  #global-status.notice {bottom:calc(94px + env(safe-area-inset-bottom));left:12px;right:12px;}
  .dashboard-stat {min-height:109px;}
}
@media (max-width:560px) {
  .main-column {padding-left:12px;padding-right:12px;}
  .topbar {margin-left:-12px;margin-right:-12px;padding:10px 12px;}
  .topbar-leading {gap:9px;}
  .topbar h1 {font-size:clamp(18px,5.5vw,23px);}
  .topbar-right {gap:5px;}
  .panel,.cockpit-box,.dashboard-section {padding:16px 13px;}
  .panel-overview,.panel-cockpit {padding:0;}
  .dashboard-stats {gap:10px;}
  .dashboard-stat {padding:14px 12px;min-height:106px;}
  .dashboard-stat strong {font-size:clamp(22px,6vw,29px);}
  .dashboard-section-title h3 {font-size:21px;}
  .quick-grid button {min-height:105px;}
  .studio-mobile-bottom-nav {left:max(7px,env(safe-area-inset-left));right:max(7px,env(safe-area-inset-right));padding:6px 3px;gap:1px;border-radius:20px;}
  .studio-mobile-bottom-nav button {min-height:56px;}
  .studio-mobile-bottom-nav button .app-nav-label {font-size:10px;}
  .button {min-height:46px;}
  .admin-command-dialog {width:calc(100vw - 16px);}
}
@media (max-width:350px) {
  .topbar h1 {font-size:18px;}
  .studio-mobile-bottom-nav button .app-nav-label {font-size:9px;}
}
@media (pointer:coarse) {
  .button,.tab,.sidebar-link,.admin-command-result {min-height:46px;touch-action:manipulation;}
  .studio-mobile-bottom-nav button {touch-action:manipulation;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important;}
}
@media print {
  .studio-mobile-bottom-nav,.app-sidebar-heading,.topbar-visit {display:none!important;}
}
/* Auf kompakten Viewports bleibt die Bereichssuche ein Symbol-Button.
   Der vollständige zugängliche Name bleibt per aria-label/Titel erhalten. */
@media (max-width:860px) {
  #admin-command-open {font-size:0;gap:0;overflow:hidden;text-indent:0;}
  #admin-command-open::before {content:'⌕';font-size:23px;line-height:1;flex:none;}
  #admin-command-open kbd {display:none;}
  .topbar .admin-version-top {display:none;}
}