/* DeenStudy shared components. Only tokens and readability fixes; components keep their page styles. */
@layer ds-unified {
 html{
  
  --ds-line:color-mix(in srgb,var(--ds-text) 13%,transparent);
  --ds-tint:color-mix(in srgb,var(--ds-text) 5%,transparent);
  --ds-tint-accent:color-mix(in srgb,var(--ds-accent) 13%,transparent);
 }

 /* Light mode: text colours reach 4.5:1 on page and card in every palette. Solid accents carry white. */
 html[data-theme="light"]{
  --ds-on-accent:#fff!important;--ds-danger:#c81e1e!important;
  --ds-muted:color-mix(in srgb,var(--ds-text) 66%,var(--ds-bg))!important;
  --ds-muted2:color-mix(in srgb,var(--ds-text) 78%,var(--ds-bg))!important;
 }
 html[data-theme="light"][data-ds-palette="orange"],html[data-theme="light"]:not([data-ds-palette]){--ds-accent:#bd470a!important;--ds-accent2:#bd470a!important}
 html[data-theme="light"][data-ds-palette="green"]{--ds-accent:#117f3a!important;--ds-accent2:#117f3a!important}
 html[data-theme="light"][data-ds-palette="gold"]{--ds-accent:#a95d05!important;--ds-accent2:#a95d05!important}
 html[data-theme="light"]:is([data-ds-palette="teal"],[data-ds-palette="default"]){--ds-accent:#0b7c72!important;--ds-accent2:#0b7c72!important}
 html[data-theme="light"]:is([data-ds-palette="red"],[data-ds-palette="rot"]){--ds-accent:#cd2323!important;--ds-accent2:#cd2323!important}

 html[data-theme="light"]{--ds-accent3:var(--ds-accent)!important}
 html body main :is(.dsc-upload-button,.srf-search-card button[type=submit]){background:var(--ds-accent)!important;color:var(--ds-on-accent,#000)!important}
 html body main :is(.dsc-upload-button,.srf-search-card button[type=submit]) *{color:inherit!important}
 html body main .ds-more{color:var(--ds-accent)!important}
 html body #ds-prayer-guide .pr-hero-aside{background:var(--ds-card)!important}

 html body #ds-game-home .dsg-card.is-active{background:var(--ds-card)!important;background-image:none!important;border-color:color-mix(in srgb,var(--ds-accent) 45%,transparent)!important;color:var(--ds-text)!important}
 html body #ds-game-home .dsg-card.is-active :is(.dsg-card-title,.dsg-card-title *,.dsg-card-body){color:var(--ds-text)!important}
 html body #ds-game-home .dsg-card.is-active .dsg-card-meta{color:var(--ds-muted2)!important}

 /* Home and Wunder re-declare the palette on their sections; give them the readable light values too. */
 html[data-theme="light"][data-ds-palette="orange"],html[data-theme="light"]:not([data-ds-palette]){--ds-acc-l:#bd470a}
 html[data-theme="light"][data-ds-palette="green"]{--ds-acc-l:#117f3a}
 html[data-theme="light"][data-ds-palette="blue"]{--ds-acc-l:#2563eb}
 html[data-theme="light"][data-ds-palette="gold"]{--ds-acc-l:#a95d05}
 html[data-theme="light"]:is([data-ds-palette="purple"],[data-ds-palette="lila"]){--ds-acc-l:#7c3aed}
 html[data-theme="light"]:is([data-ds-palette="teal"],[data-ds-palette="default"]){--ds-acc-l:#0b7c72}
 html[data-theme="light"]:is([data-ds-palette="red"],[data-ds-palette="rot"]){--ds-acc-l:#cd2323}
 html[data-theme="light"][data-ds-palette="basic"]{--ds-acc-l:#18181b}
 html[data-theme="light"] body :is(main.ds-homepage>section,main.ds-homepage>section>*,#ds-wunder-page,#ds-wunder-page section,#deenstudy-wunder-block){
  --ds-accent:var(--ds-acc-l)!important;--ds-accent2:var(--ds-acc-l)!important;--accent:var(--ds-acc-l)!important;--accent2:var(--ds-acc-l)!important;--dsw-accent:var(--ds-acc-l)!important;--dsw-accent2:var(--ds-acc-l)!important;
  --ds-muted:color-mix(in srgb,var(--ds-text) 66%,var(--ds-bg))!important;--ds-muted2:color-mix(in srgb,var(--ds-text) 78%,var(--ds-bg))!important;--ds-on-accent:#fff!important;
 }

 /* Header controls keep their size when the bar gets full. */
 html body #ds-header .ds-right>.ds-iconbtn{flex:0 0 36px!important;width:36px!important;min-width:36px!important}
 html body #ds-header .ds-prayer-trigger{flex:0 0 auto!important;width:auto!important;min-width:36px!important;white-space:nowrap}
 html body #ds-header :is(.ds-palettebtn,.ds-langbtn,.ds-account-chip){flex:0 0 auto!important}
 html body #ds-header .ds-langbtn{min-width:63px!important}

 /* Institution overview: actions as one calm block above the search. */
 html body main#ds-institution>header+.dsi-actions,html body main#ds-institution>.dsi-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 28px}
 html body main#ds-institution>.dsi-actions>small{flex:1 0 100%;color:var(--ds-muted);font-weight:400;font-size:13px;line-height:1.5}
 html body main#ds-institution .dsi-hero .dsi-actions{margin-bottom:0}

 html body main#ds-institution [data-status]:empty{display:none}

 html body #ds-header .ds-prayer-trigger svg{flex:0 0 18px!important;width:18px!important;height:18px!important}
 html body #ds-footer .dsn-consent{align-items:flex-start!important;justify-content:flex-start!important;gap:10px!important;font:400 13px/1.5 var(--ds-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ds-muted2)!important}
 html body #ds-footer .dsn-consent input[type=checkbox]{flex:0 0 18px!important;width:18px!important;min-width:18px!important;height:18px!important;min-height:18px!important;margin:2px 0 0!important;padding:0!important}
 /* Reader sticky bar: full labels, shared width, tidy wrap. Only the search field shrinks. */
 @media(min-width:761px){
html body #dsq-stickybar:not(.dsq-folded):not([aria-hidden=true]){display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:fit-content!important;max-width:min(1500px,calc(100vw - 24px))!important;height:auto!important;left:0!important;right:0!important;margin-inline:auto!important;transform:none!important;padding:8px 10px!important;box-sizing:border-box!important}
 html body #dsq-stickybar:not(.dsq-folded)>*{flex:0 0 auto!important;position:relative!important;margin:0!important;width:auto!important;max-width:none!important;min-width:0!important}
 html body #dsq-stickybar:not(.dsq-folded) #dsq-sticky-jump{display:flex!important;gap:8px!important;overflow:visible!important}
 html body #dsq-stickybar:not(.dsq-folded) #dsq-sticky-jump .dsq-sticky-dd{flex:0 0 auto!important;width:auto!important;max-width:none!important;min-width:0!important}
 html body #dsq-stickybar:not(.dsq-folded) .dsq-sticky-select{width:auto!important;max-width:230px!important;white-space:nowrap!important;padding-inline:12px!important;overflow:hidden;text-overflow:ellipsis}
 html body #dsq-stickybar:not(.dsq-folded)>.dsq-sticky-title{white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;flex:0 0 auto!important}
 html body #dsq-stickybar:not(.dsq-folded)>#dsq-sticky-filter-wrap{flex:1 1 110px!important;width:110px!important;min-width:110px!important;max-width:320px!important}
 html body #dsq-stickybar:not(.dsq-folded) #dsq-sticky-filter{width:100%!important}
 html body #dsq-stickybar:not(.dsq-folded) .dsq-sticky-actions{display:flex!important;gap:8px!important;flex-wrap:nowrap!important;overflow:visible!important}
 }
 /* Play icons sit in the optical centre of their button. */
 html body #ds-quran .dsq-playbtn,html body .dsq-stickybar .dsq-playbtn{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}
 html body :is(#ds-quran,.dsq-stickybar) .dsq-playbtn svg[data-ds-icon=play]{margin:0!important;transform:translateX(-1.5px)}
 /* Prayer times: all fields follow the theme. */
 html body .dspt-page :is(input:not([type=checkbox],[type=radio]),select,textarea){background:var(--ds-input,var(--ds-card))!important;color:var(--ds-text)!important;border:1px solid var(--ds-border)!important}
 html body .dspt-page input::placeholder{color:var(--ds-muted)!important;opacity:1}
 html body #ds-wunder-explore a.ds-btn{display:inline-flex!important;margin:6px 8px 6px 0!important;vertical-align:top}
 html body #ds-institution .dsi-studio-tabs{flex-wrap:wrap!important;overflow:visible!important;row-gap:8px!important}
 html body #ds-header .ds-right{align-items:center!important}
 html body #ds-header .ds-right>.ds-iconbtn,html body #ds-header .ds-prayer-trigger{height:36px!important;min-height:36px!important}
 /* Page fixes found in the logged-in review. */
 html body #ds-institution .dsi-overview{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 @media(max-width:640px){html body #ds-institution .dsi-overview{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
 html body #ds-app-exams .ds-exam-course-hero-body h3{font-size:clamp(20px,2.2vw,26px)!important;line-height:1.25!important}

 /* Plain links in content never fall back to browser blue. */
 html body main a:not([class]){color:var(--ds-accent)}

 /* Texts with plain data-lang spans (legal info pages). */
 html[data-lang="de"] body main span[data-lang="en"],html[data-lang="en"] body main span[data-lang="de"],
 html:not([data-lang]) body main span[data-lang="en"]{display:none!important}

 /* --- Prayer guide: the path list stays readable on phones --- */
 html body #ds-prayer-guide .pr-hero-aside li{min-width:0}
 html body #ds-prayer-guide .pr-hero-aside li span.ds-i18n{white-space:normal!important;color:inherit!important;font-size:inherit!important;font-variant-numeric:normal}
 @media(max-width:640px){html body #ds-prayer-guide .pr-hero-aside ol{grid-template-columns:minmax(0,1fr)!important}}

 /* Layered display values must never reveal what a page hides. */
 html body :is(main,#ds-footer,dialog,.ds-modal-portal) [hidden]{display:none!important}

}

/* Meine Kurse: Hauptaktion auf dem Handy volle Breite, kein Umbruch im Wort */
@media (max-width:480px){.ds-my-action-row .ds-app-btn.primary{grid-column:1/-1!important;white-space:nowrap!important}}

/* Quran-Reader: Anzeige-Karte sticky. hidden machte Vorfahren zu Scrollcontainern; clip schneidet gleich. In der Schicht, weil sie unlayered !important schlaegt. */
@layer ds-unified{@media (min-width:1101px){html body:has(#ds-quran),html body main.ds-page-main:has(#ds-quran),html body #ds-quran.dsq-wrap{overflow:clip visible!important}}}

/* API & Automatisierung: Buttons in Zeilen nicht unter Textbreite stauchen */
@layer ds-unified{@media (min-width:761px){html body #dsa-suite.ds-platform-page .dsa-row>button{flex:0 0 auto!important;white-space:nowrap!important}}}

/* Lernzentrum Lehrerbereich: Aktionen auf dem Handy zweispaltig statt zerbrochener Woerter */
@layer ds-unified{@media (max-width:560px){
  html body .dsa-summary{flex-wrap:wrap!important}
  html body .dsa-summary .dsa-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:8px!important}
  html body .dsa-summary .dsa-actions>*{width:auto!important;min-width:0!important;white-space:nowrap!important;word-break:normal!important}
}}
/* Admin-Tabellen mit Zeilenaktionen: auf dem Handy Karten statt seitlich scrollender Tabelle */
@layer ds-unified{@media (max-width:640px){
  html body table:has(.ds-row-actions),html body table:has(.ds-row-actions) tbody{display:block!important;width:100%!important;min-width:0!important}
  html body table:has(.ds-row-actions) thead{display:none!important}
  html body table:has(.ds-row-actions) tr{display:block!important;width:100%!important;padding:12px 14px!important;border-bottom:1px solid var(--ds-border)!important}
  html body table:has(.ds-row-actions) td{display:block!important;width:100%!important;padding:4px 0!important;border:0!important;white-space:normal!important}
  html body table:has(.ds-row-actions) .ds-row-actions{display:flex!important;flex-flow:row wrap!important;gap:8px!important;width:100%!important;margin-top:6px!important}
  html body table:has(.ds-row-actions) .ds-row-actions>*{flex:1 1 90px!important;width:auto!important;min-width:0!important}
}}

/* Hadith-Leseeinstellungen: Fussleiste volle Breite, sonst scheint Inhalt rechts durch */
@layer ds-unified{html body .dh-comfort .dh-settings-actions{width:auto!important;max-width:none!important}}

/* Forum-Popup: unsichtbare Anonym-Checkbox erzeugte waagerechten Scrollbalken */
@layer ds-unified{html body .dsf-anon-toggle{position:relative!important}html body #dsf-anon{position:absolute!important;left:0!important;width:1px!important;height:1px!important;opacity:0!important}}

/* Quran: Leserahmen ohne halbes Glas */
@layer ds-unified{html body #ds-quran .dsq-reader-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}