/* pocket ATA Farbkonzept v1.0 – Design Tokens / Konzept, NICHT im Live-Projekt eingebunden.
   Die Klassennamen sind bewusst pa-* und kollidieren nicht mit bestehenden Modulen.
   Die hier dargestellten Akzentfarben verändern keine DIVI-/ISO-Arzneimittelkennzeichnungen
   und kodieren keine klinischen Alarmgrenzen. */
:root {
  /* Neutrale Flächen und Text */
  --pa-canvas: #F5F8FB;
  --pa-surface: #FFFFFF;
  --pa-surface-subtle: #EDF3F7;
  --pa-stroke: #D6E2EA;
  --pa-ink: #12293B;
  --pa-ink-muted: #506679;

  /* Marke – Interaktion / Fokus */
  --pa-brand: #0F766E;
  --pa-brand-hover: #115E59;
  --pa-brand-soft: #E5F6F2;
  --pa-brand-border: #89D4C6;
  --pa-focus: #0F766E;

  /* Themenbereiche: color / tinted surface / border / ink on tint */
  --pa-knowledge: #1D4ED8;
  --pa-knowledge-soft: #EAF2FF;
  --pa-knowledge-border: #BFDBFE;
  --pa-knowledge-ink: #1E40AF;
  --pa-practice: #047857;
  --pa-practice-soft: #E8F8F1;
  --pa-practice-border: #A8E5CA;
  --pa-practice-ink: #047857;
  --pa-tools: #0E7490;
  --pa-tools-soft: #E6F7FB;
  --pa-tools-border: #A8DDEB;
  --pa-tools-ink: #0E7490;
  --pa-glossary: #6D28D9;
  --pa-glossary-soft: #F3EEFF;
  --pa-glossary-border: #D8C6F7;
  --pa-glossary-ink: #5B21B6;
  --pa-emergency: #B91C1C;
  --pa-emergency-hover: #991B1B;
  --pa-emergency-soft: #FEF2F2;
  --pa-emergency-border: #FECACA;

  /* Semantik: nicht mit Bereichsfarben verwechseln */
  --pa-info-ink: #1E40AF;
  --pa-info-bg: #EAF2FF;
  --pa-info-border: #BFDBFE;
  --pa-caution-ink: #92400E;
  --pa-caution-bg: #FFF7E6;
  --pa-caution-border: #F3D18A;
  --pa-warning-ink: #9A3412;
  --pa-warning-bg: #FFF0E7;
  --pa-warning-border: #FDBA92;
  --pa-danger-ink: #B91C1C;
  --pa-danger-bg: #FEF2F2;
  --pa-danger-border: #FECACA;
  --pa-success-ink: #047857;
  --pa-success-bg: #E8F8F1;
  --pa-success-border: #A8E5CA;

  /* Arbeitsabläufe: nur sparsam an Einstiegen / Chips */
  --pa-stage-pre: #1D4ED8;
  --pa-stage-intra: #0F766E;
  --pa-stage-post: #6D28D9;
  --pa-stage-study: #92400E;

  /* Konstante Raster- und Formwerte */
  --pa-radius-card: 14px;
  --pa-radius-control: 11px;
  --pa-space-1: 4px;
  --pa-space-2: 8px;
  --pa-space-3: 12px;
  --pa-space-4: 16px;
  --pa-space-5: 24px;
  --pa-space-6: 32px;
  --pa-shadow: 0 3px 14px rgba(18,41,59,.045);
}

/* Bereichszuordnung – eine eindeutige Bereichsfarbe je Modul */
.pa-area, [data-pa-area] {
  --pa-area: var(--pa-brand);
  --pa-area-soft: var(--pa-brand-soft);
  --pa-area-border: var(--pa-brand-border);
  --pa-area-ink: var(--pa-brand);
}
[data-pa-area="knowledge"] {
  --pa-area: var(--pa-knowledge);
  --pa-area-soft: var(--pa-knowledge-soft);
  --pa-area-border: var(--pa-knowledge-border);
  --pa-area-ink: var(--pa-knowledge-ink);
}
[data-pa-area="practice"] {
  --pa-area: var(--pa-practice);
  --pa-area-soft: var(--pa-practice-soft);
  --pa-area-border: var(--pa-practice-border);
  --pa-area-ink: var(--pa-practice-ink);
}
[data-pa-area="tools"] {
  --pa-area: var(--pa-tools);
  --pa-area-soft: var(--pa-tools-soft);
  --pa-area-border: var(--pa-tools-border);
  --pa-area-ink: var(--pa-tools-ink);
}
[data-pa-area="glossary"] {
  --pa-area: var(--pa-glossary);
  --pa-area-soft: var(--pa-glossary-soft);
  --pa-area-border: var(--pa-glossary-border);
  --pa-area-ink: var(--pa-glossary-ink);
}
[data-pa-area="emergency"] {
  --pa-area: var(--pa-emergency);
  --pa-area-soft: var(--pa-emergency-soft);
  --pa-area-border: var(--pa-emergency-border);
  --pa-area-ink: var(--pa-emergency);
}

/* Opt-in UI-Primitives für Pilotseiten – keine globale Überschreibung */
.pa-area .pa-card { background:var(--pa-surface); border:1px solid var(--pa-stroke); border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow); }
.pa-area .pa-card__icon { display:grid; place-items:center; background:var(--pa-area-soft); color:var(--pa-area-ink); border-radius:11px; }
.pa-area .pa-card--accent { border-left:4px solid var(--pa-area); }
.pa-area .pa-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--pa-area-border); background:var(--pa-area-soft); color:var(--pa-area-ink); font-weight:700; border-radius:999px; padding:6px 10px; font-size:.78rem; }
.pa-area .pa-tab[aria-selected="true"],.pa-area .pa-tab[aria-pressed="true"] { background:var(--pa-area); color:white; border-color:var(--pa-area); }
.pa-area .pa-hero { background:linear-gradient(112deg,#12293B 5%,#0D4752 100%); color:#fff; border-top:4px solid var(--pa-area); border-radius:18px; }
.pa-area .pa-hero__eyebrow { color:#B9FAEE; }
.pa-area .pa-link { color:var(--pa-area-ink); text-decoration:underline; text-underline-offset:2px; }
.pa-area :is(a,button,input,select,summary):focus-visible { outline:3px solid var(--pa-focus); outline-offset:3px; }
.pa-area .pa-callout { padding:12px 14px; border-radius:12px; display:flex; align-items:flex-start; gap:10px; font-size:.9rem; line-height:1.5; }
.pa-area .pa-callout--info { background:var(--pa-info-bg); border:1px solid var(--pa-info-border); color:var(--pa-info-ink); }
.pa-area .pa-callout--caution { background:var(--pa-caution-bg); border:1px solid var(--pa-caution-border); color:var(--pa-caution-ink); }
.pa-area .pa-callout--warning { background:var(--pa-warning-bg); border:1px solid var(--pa-warning-border); color:var(--pa-warning-ink); }
.pa-area .pa-callout--danger { background:var(--pa-danger-bg); border:1px solid var(--pa-danger-border); color:var(--pa-danger-ink); }
.pa-area .pa-callout--success { background:var(--pa-success-bg); border:1px solid var(--pa-success-border); color:var(--pa-success-ink); }
.pa-area .pa-workflow { border-left:4px solid var(--pa-stage-intra); }
.pa-area .pa-workflow[data-stage="pre"] { border-left-color:var(--pa-stage-pre); }
.pa-area .pa-workflow[data-stage="post"] { border-left-color:var(--pa-stage-post); }
.pa-area .pa-workflow[data-stage="study"] { border-left-color:var(--pa-stage-study); }
/* Interaktions-/Statusfarben nicht vom Themenkontext überschreiben lassen */
.pa-area .pa-primary { background:var(--pa-brand); color:#fff; border-color:var(--pa-brand); }
.pa-area .pa-primary:hover { background:var(--pa-brand-hover); }
.pa-area .pa-emergency-action { background:var(--pa-emergency); color:#fff; border-color:var(--pa-emergency); }

@media (prefers-reduced-motion:reduce) {
  .pa-area * { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* Phase 8.1 – UI surfaces: Startseite, Hauptnavigation und persönliche OP-Tasche.
   Notfall/DIVI/BGA/Medikamentenansichten bleiben absichtlich außerhalb dieses Scopes. */
:root{color-scheme:light}
body[data-pocket-page="overview"]{background:var(--pa-canvas)}

/* Neutral main-navigation shell with small section signatures. */
#appHeader{border-bottom-color:var(--pa-stroke)}
#appHeader .app-topbar,#appHeader .p46-desktop-nav{border-color:var(--pa-stroke)}
#appHeader{--pa-nav-active:var(--pa-brand);--pa-nav-soft:var(--pa-brand-soft);--pa-nav-ink:var(--pa-brand)}
body[data-pa-area="knowledge"] #appHeader{--pa-nav-active:var(--pa-knowledge);--pa-nav-soft:var(--pa-knowledge-soft);--pa-nav-ink:var(--pa-knowledge-ink)}
body[data-pa-area="practice"] #appHeader{--pa-nav-active:var(--pa-practice);--pa-nav-soft:var(--pa-practice-soft);--pa-nav-ink:var(--pa-practice-ink)}
body[data-pa-area="tools"] #appHeader{--pa-nav-active:var(--pa-tools);--pa-nav-soft:var(--pa-tools-soft);--pa-nav-ink:var(--pa-tools-ink)}
body[data-pa-area="glossary"] #appHeader{--pa-nav-active:var(--pa-glossary);--pa-nav-soft:var(--pa-glossary-soft);--pa-nav-ink:var(--pa-glossary-ink)}
#appHeader .ux-desktop-nav>.p46-nav-link.is-active:not(.p46-danger-link),
#appHeader .ux-desktop-nav>.ux-desktop-group>.p46-group-trigger.is-active{background:var(--pa-nav-active,var(--pa-brand));color:#fff;border-radius:11px}
#appHeader .ux-desktop-nav>.p46-nav-link.is-active:not(.p46-danger-link)>i,
#appHeader .ux-desktop-nav>.ux-desktop-group>.p46-group-trigger.is-active>i{color:inherit}
#appHeader .ux-desktop-nav>.p46-nav-link[data-tab="taschenkarten"]>i{color:var(--pa-brand)}
#appHeader .ux-desktop-group[data-p46-group="wissen"]>summary:not(.is-active)>i:first-child{color:var(--pa-knowledge-ink)}
#appHeader .ux-desktop-group[data-p46-group="werkzeuge"]>summary:not(.is-active)>i:first-child{color:var(--pa-tools-ink)}
#appHeader .ux-desktop-nav>.p46-nav-link[data-tab="glossar"]:not(.is-active)>i{color:var(--pa-glossary-ink)}
#appHeader .ux-desktop-nav>.p46-nav-link:not(.p46-danger-link):hover:not(.is-active),
#appHeader .ux-desktop-group>summary:hover:not(.is-active){background:var(--pa-brand-soft);color:var(--pa-brand-hover)}
#appHeader .p46-dropdown-overview{background:var(--pa-brand-soft);color:var(--pa-brand-hover)}
#appHeader .ux-dropdown-cluster{background:#fbfdff;border-color:var(--pa-stroke)}
#appHeader .ux-dropdown-heading{color:var(--pa-brand-hover)}
#appHeader .ux-desktop-group[data-p46-group="wissen"] .ux-dropdown-heading{color:var(--pa-knowledge-ink)}
#appHeader .ux-desktop-group[data-p46-group="werkzeuge"] .ux-dropdown-heading{color:var(--pa-tools-ink)}
/* Burger menu inherits the same page context, but never recolors emergency action. */
#appHeader .ux-mobile-menu .p46-nav-link.is-active:not(.p46-danger-link),
#appHeader .ux-mobile-menu .p46-mobile-group[open]>summary{background:var(--pa-nav-soft,var(--pa-brand-soft));color:var(--pa-nav-ink,var(--pa-brand-hover));border-radius:10px}
#appHeader .ux-mobile-menu a[data-tab="glossar"]>i{color:var(--pa-glossary-ink)}
#appHeader .ux-mobile-menu a[data-tab="taschenkarten"]>i{color:var(--pa-brand)}
#appHeader .ux-mobile-menu .p46-mobile-group[data-p46-group="wissen"]>summary>i:first-child{color:var(--pa-knowledge-ink)}
#appHeader .ux-mobile-menu .p46-mobile-group[data-p46-group="werkzeuge"]>summary>i:first-child{color:var(--pa-tools-ink)}
#appHeader .ux-mobile-menu .p46-mobile-group[open]>summary>i:first-child{color:inherit}
/* Global navigation: emergency red is reserved and remains distinguishable. */
#appHeader .p46-danger-link,
#appHeader .ux-desktop-nav>.p46-danger-link:not(.is-active){color:var(--pa-emergency)}
#appHeader .p46-danger-link.is-active{background:var(--pa-emergency);color:white}

/* Start page: calm hero, constrained accents, no new vertical blocks. */
body[data-pocket-page="overview"] .p46-hero:not(.p46-hero-emergency){background:linear-gradient(113deg,#12293b 5%,#0d4752 100%);border-top:4px solid var(--pa-brand);box-shadow:0 8px 22px rgba(18,41,59,.07)}
body[data-pocket-page="overview"] .p46-hero-symbol{color:#9df4e2}
body[data-pocket-page="overview"] .ux2-eyebrow{color:var(--pa-brand)}
body[data-pocket-page="overview"] .ux2-home-heading h2{color:var(--pa-ink)}
body[data-pocket-page="overview"] .ux2-home-heading p{color:var(--pa-ink-muted)}
body[data-pocket-page="overview"] .ux2-home-search{border-color:var(--pa-brand-border);background:#fff}
body[data-pocket-page="overview"] .ux2-home-search>i:first-child{color:var(--pa-brand)}
/* Three task-entry cards: neutral surface, small colored icon tile. */
body[data-pocket-page="overview"] .ux2-home-areas a{--pa-tile:var(--pa-brand);--pa-tile-soft:var(--pa-brand-soft);--pa-tile-border:var(--pa-brand-border);background:#fff!important;color:var(--pa-ink)!important;border:1px solid var(--pa-stroke)!important;box-shadow:var(--pa-shadow);border-radius:13px;position:relative;overflow:hidden}
body[data-pocket-page="overview"] .ux2-home-areas a:nth-child(2){--pa-tile:var(--pa-tools);--pa-tile-soft:var(--pa-tools-soft);--pa-tile-border:var(--pa-tools-border)}
body[data-pocket-page="overview"] .ux2-home-areas a:nth-child(3){--pa-tile:var(--pa-knowledge);--pa-tile-soft:var(--pa-knowledge-soft);--pa-tile-border:var(--pa-knowledge-border)}
body[data-pocket-page="overview"] .ux2-home-areas a:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--pa-tile)}
body[data-pocket-page="overview"] .ux2-home-areas a>i{display:grid;place-items:center;width:38px;height:38px;min-height:38px;background:var(--pa-tile-soft);border:1px solid var(--pa-tile-border);color:var(--pa-tile);border-radius:10px;font-size:18px;margin:0 auto 2px}
body[data-pocket-page="overview"] .ux2-home-areas a strong{color:var(--pa-ink)}
body[data-pocket-page="overview"] .ux2-home-areas a small{color:var(--pa-ink-muted)}
body[data-pocket-page="overview"] .ux2-home-areas a:hover{border-color:var(--pa-tile-border)!important;background:var(--pa-tile-soft)!important}
body[data-pocket-page="overview"] .ux2-home-shortcuts a{--pa-short:var(--pa-brand);--pa-short-soft:var(--pa-brand-soft);background:#fff;border:1px solid var(--pa-stroke);border-left:3px solid var(--pa-short);border-radius:12px;color:var(--pa-ink);box-shadow:none}
body[data-pocket-page="overview"] .ux2-home-shortcuts a:nth-child(2),
body[data-pocket-page="overview"] .ux2-home-shortcuts a:nth-child(3),
body[data-pocket-page="overview"] .ux2-home-shortcuts a:nth-child(5){--pa-short:var(--pa-tools);--pa-short-soft:var(--pa-tools-soft)}
body[data-pocket-page="overview"] .ux2-home-shortcuts a:nth-child(4){--pa-short:var(--pa-knowledge);--pa-short-soft:var(--pa-knowledge-soft)}
body[data-pocket-page="overview"] .ux2-home-shortcuts a:nth-child(6){--pa-short:var(--pa-practice);--pa-short-soft:var(--pa-practice-soft)}
body[data-pocket-page="overview"] .ux2-home-shortcuts a i{color:var(--pa-short);display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--pa-short-soft)}
body[data-pocket-page="overview"] .ux2-home-shortcuts a:hover{background:var(--pa-short-soft);border-color:var(--pa-short)}
/* Workflows: contextual swatch, always complemented by title and icon. */
body[data-pocket-page="overview"] .ux-context-card{--pa-stage:var(--pa-stage-pre);--pa-stage-soft:var(--pa-knowledge-soft);--pa-stage-border:var(--pa-knowledge-border);background:#fff;border:1px solid var(--pa-stroke);border-top:3px solid var(--pa-stage);box-shadow:var(--pa-shadow)}
body[data-pocket-page="overview"] .ux-context-card:nth-child(2){--pa-stage:var(--pa-stage-intra);--pa-stage-soft:var(--pa-brand-soft);--pa-stage-border:var(--pa-brand-border)}
body[data-pocket-page="overview"] .ux-context-card:nth-child(3){--pa-stage:var(--pa-stage-post);--pa-stage-soft:var(--pa-glossary-soft);--pa-stage-border:var(--pa-glossary-border)}
body[data-pocket-page="overview"] .ux-context-card:nth-child(4){--pa-stage:var(--pa-stage-study);--pa-stage-soft:#fff7e6;--pa-stage-border:#f3d18a}
body[data-pocket-page="overview"] .ux-context-card .ux-context-icon{background:var(--pa-stage-soft);border:1px solid var(--pa-stage-border);color:var(--pa-stage);border-radius:10px}
body[data-pocket-page="overview"] .ux-context-label strong{color:var(--pa-ink)}
body[data-pocket-page="overview"] .ux-context-label small{color:var(--pa-ink-muted)}
body[data-pocket-page="overview"] .ux-context-card[open]{border-color:var(--pa-stage-border);border-top-color:var(--pa-stage)}
body[data-pocket-page="overview"] .ux-context-card nav a{color:var(--pa-ink)}
body[data-pocket-page="overview"] .ux-context-card nav a:hover{color:var(--pa-stage);background:var(--pa-stage-soft)}
/* Established desktop overview cards: category cues, not full-surface recoloring.
   We do NOT recolor the vital-value or clinical status blocks. */
body[data-pocket-page="overview"] #tab-overview [onclick*="switchTab"][class~="group"]{border-top:3px solid var(--pa-brand);background:#fff}
body[data-pocket-page="overview"] #tab-overview [onclick*="switchTab('airway')"][class~="group"],
body[data-pocket-page="overview"] #tab-overview [onclick*="switchTab('verfahren')"][class~="group"],
body[data-pocket-page="overview"] #tab-overview [onclick*="switchTab('pharma')"][class~="group"]{border-top-color:var(--pa-knowledge)}
body[data-pocket-page="overview"] #tab-overview [onclick*="switchTab('tools')"][class~="group"],
body[data-pocket-page="overview"] #tab-overview [onclick*="switchTab('bga')"][class~="group"]{border-top-color:var(--pa-tools)}

/* Personal OP bag: mint is subtle; type, icon and labels preserve meaning. */
body[data-pocket-page="overview"] .ux6-personal{--pa-tile-ink:var(--pa-ink);color:var(--pa-ink)}
body[data-pocket-page="overview"] .ux6-personal-head{border-left:4px solid var(--pa-brand);padding-left:12px}
body[data-pocket-page="overview"] .ux6-personal-head .ux6-eyebrow{color:var(--pa-brand)}
body[data-pocket-page="overview"] .ux6-personal-head h2{color:var(--pa-ink)}
body[data-pocket-page="overview"] .ux6-personal-head p{color:var(--pa-ink-muted)}
body[data-pocket-page="overview"] .ux6-local{color:var(--pa-brand-hover);background:var(--pa-brand-soft);border:1px solid var(--pa-brand-border)}
body[data-pocket-page="overview"] .ux6-panel{background:#fff;border-color:var(--pa-stroke);box-shadow:var(--pa-shadow)}
body[data-pocket-page="overview"] .ux6-pins{border-top:3px solid var(--pa-brand);background:linear-gradient(to bottom,#f4fcfa 0%,white 26%)}
body[data-pocket-page="overview"] .ux6-panel-head h3{color:var(--pa-ink)}
body[data-pocket-page="overview"] .ux6-panel-head h3 i{color:var(--pa-brand)}
body[data-pocket-page="overview"] .ux6-columns>.ux6-panel:first-child{border-top:3px solid #a8c8d4}
body[data-pocket-page="overview"] .ux6-columns>.ux6-panel:nth-child(2){border-top:3px solid var(--pa-brand-border)}
body[data-pocket-page="overview"] .ux6-item{background:#fff;border:1px solid var(--pa-stroke);border-left:3px solid var(--pa-brand-border)}
body[data-pocket-page="overview"] .ux6-item-link{color:var(--pa-ink)}
body[data-pocket-page="overview"] .ux6-item-link:hover{color:var(--pa-brand-hover);background:var(--pa-brand-soft)}
body[data-pocket-page="overview"] .ux6-item-type{color:var(--pa-ink-muted)}
body[data-pocket-page="overview"] .ux6-suggestions button{background:var(--pa-brand-soft);color:var(--pa-brand-hover);border:1px solid var(--pa-brand-border)}
body[data-pocket-page="overview"] .ux6-suggestions button:hover:not(:disabled){background:#d2f2ea}
body[data-pocket-page="overview"] .ux6-privacy{color:var(--pa-ink-muted)}
body[data-pocket-page="overview"] .ux6-personal :is(a,button):focus-visible{outline:3px solid var(--pa-focus);outline-offset:3px}
@media(max-width:767px){
 body[data-pocket-page="overview"] .ux2-home-areas a{min-height:90px;padding:10px 4px 9px}
 body[data-pocket-page="overview"] .ux2-home-areas a>i{width:34px;height:34px;min-height:34px;font-size:16px}
 body[data-pocket-page="overview"] .ux2-home-areas a strong{font-size:13px}
 body[data-pocket-page="overview"] .ux2-home-areas a small{font-size:11px}
 body[data-pocket-page="overview"] .ux2-home-shortcuts a{min-height:72px}
 body[data-pocket-page="overview"] .ux-context-card summary{min-height:68px}
}
@media(prefers-reduced-motion:reduce){
 body[data-pocket-page="overview"] .ux2-home-areas a,body[data-pocket-page="overview"] .ux-context-card{transition:none}
}