/*
 * DAF Documentation Theme — App Skin: WAZI
 * ==========================================
 * This stylesheet is structured for DAF transposability.
 * To skin for another app, replace ONLY Section 1 (App Tokens).
 * Sections 2–5 are framework patterns shared across all DAF apps.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Nunito+Sans:wght@400;600;700&display=swap');


/* ==========================================================================
   1. APP TOKENS
   ========================================================================== */

:root {
  --app-primary:              #2D2D35;
  --app-primary-light:        #3B3B44;
  --app-primary-dark:         #1E1E24;
  --app-accent:               #C59741;
  --app-accent-muted:         #9C7C40;
  --app-accent-transparent:   rgba(197, 151, 65, 0.12);
  --app-surface:              #2D2D35;
  --app-surface-alt:          #3B3B44;
  --app-surface-hover:        #44444E;
  --app-border:               rgba(255, 255, 255, 0.08);
  --app-text:                 #FFFFFF;
  --app-text-muted:           #D2D6DB;
  --app-text-on-accent:       #FFFFFF;
  --app-light-bg:             #F8F8FA;
  --app-light-surface:        #FFFFFF;
  --app-light-text:           #2D2D35;
  --app-light-text-muted:     #5A5A6A;
  --app-light-border:         #E0E0E6;
  --app-radius:               8px;
  --app-radius-sm:            4px;
  --app-font-heading:         'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --app-font-body:            'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
  --tier-daf:                 #2E75B6;
  --tier-mmt:                 #27AE60;
  --tier-app:                 #C59741;
  --risk-low:                 #27AE60;
  --risk-moderate:            #F39C12;
  --risk-high:                #E74C3C;
  --risk-redflag:             #C0392B;
}

/* ==========================================================================
   2. DARK MODE (slate scheme)
   ========================================================================== */

[data-md-color-scheme="slate"] {
  --md-default-bg-color:              var(--app-surface);
  --md-default-fg-color:              var(--app-text);
  --md-default-fg-color--light:       var(--app-text-muted);
  --md-primary-fg-color:              var(--app-primary);
  --md-primary-fg-color--light:       var(--app-primary-light);
  --md-primary-fg-color--dark:        var(--app-primary-dark);
  --md-primary-bg-color:              var(--app-text);
  --md-accent-fg-color:               var(--app-accent);
  --md-accent-fg-color--transparent:  var(--app-accent-transparent);
  --md-typeset-a-color:               var(--app-accent);
  --md-code-bg-color:                 var(--app-primary-dark);
}
[data-md-color-scheme="slate"] .md-header { background: var(--app-primary-dark); border-bottom: 1px solid var(--app-border); }
[data-md-color-scheme="slate"] .md-sidebar { background: var(--app-surface); }
[data-md-color-scheme="slate"] .md-nav__link { color: var(--app-text-muted); }
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link--active { color: var(--app-accent); }
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link { color: var(--app-accent); font-weight: 600; }
[data-md-color-scheme="slate"] .md-search__input { background: var(--app-surface-alt); color: var(--app-text); }
[data-md-color-scheme="slate"] .md-search__input::placeholder { color: var(--app-text-muted); }
[data-md-color-scheme="slate"] .md-footer { background: var(--app-primary-dark); border-top: 1px solid var(--app-border); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background: var(--app-surface-alt); color: var(--app-text); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover { background: var(--app-surface-hover); }
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details { background: var(--app-surface-alt); border-radius: var(--app-radius); border-left-color: var(--app-accent); }
[data-md-color-scheme="slate"] .md-typeset hr { border-color: var(--app-border); }

/* ==========================================================================
   3. LIGHT MODE (default scheme)
   ========================================================================== */

[data-md-color-scheme="default"] {
  --md-default-bg-color:              var(--app-light-bg);
  --md-default-fg-color:              var(--app-light-text);
  --md-default-fg-color--light:       var(--app-light-text-muted);
  --md-primary-fg-color:              var(--app-primary);
  --md-primary-fg-color--light:       var(--app-primary-light);
  --md-primary-fg-color--dark:        var(--app-primary-dark);
  --md-primary-bg-color:              var(--app-text);
  --md-accent-fg-color:               var(--app-accent-muted);
  --md-accent-fg-color--transparent:  var(--app-accent-transparent);
  --md-typeset-a-color:               var(--app-accent-muted);
}
[data-md-color-scheme="default"] .md-header { background: var(--app-primary); }
[data-md-color-scheme="default"] .md-header .md-header__title,
[data-md-color-scheme="default"] .md-header .md-search__input,
[data-md-color-scheme="default"] .md-header .md-icon { color: var(--app-text); }
[data-md-color-scheme="default"] .md-sidebar { background: var(--app-light-surface); border-right: 1px solid var(--app-light-border); }
[data-md-color-scheme="default"] .md-nav__link { color: var(--app-light-text-muted); }
[data-md-color-scheme="default"] .md-nav__link:hover,
[data-md-color-scheme="default"] .md-nav__link--active { color: var(--app-accent-muted); }
[data-md-color-scheme="default"] .md-nav__item--active > .md-nav__link { color: var(--app-accent-muted); font-weight: 600; }
[data-md-color-scheme="default"] .md-footer { background: var(--app-primary); }
[data-md-color-scheme="default"] .md-typeset table:not([class]) th { background: var(--app-light-border); color: var(--app-light-text); }
[data-md-color-scheme="default"] .md-content { background: var(--app-light-surface); border-radius: var(--app-radius); }
[data-md-color-scheme="default"] .md-typeset .admonition,
[data-md-color-scheme="default"] .md-typeset details { border-radius: var(--app-radius); }

/* ==========================================================================
   4. SHARED STYLES
   ========================================================================== */

body, .md-typeset { font-family: var(--app-font-body) !important; font-size: 0.68rem; line-height: 1.7; }
h1, h2, h3, h4, h5, h6, .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 { font-family: var(--app-font-heading) !important; font-weight: 700; line-height: 1.3; }
.md-typeset h1 { font-size: 1.18rem; font-weight: 800; margin: 0 0 0.8rem 0; letter-spacing: -0.01em; }
.md-typeset h2 { font-size: 0.91rem; margin: 1.6rem 0 0.6rem 0; padding-bottom: 0.3rem; border-bottom: 1px solid var(--app-border); }
.md-typeset h3 { font-size: 0.77rem; margin: 1.2rem 0 0.4rem 0; }
.md-typeset h4 { font-size: 0.68rem; margin: 1rem 0 0.3rem 0; font-weight: 600; }
.md-typeset p { margin-bottom: 0.65rem; }
.md-typeset ul, .md-typeset ol { margin-bottom: 0.65rem; }
.md-content__inner > h1:first-child { margin-top: 0; }
.md-typeset a { text-decoration: none; transition: color 0.15s ease; }
.md-typeset a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Navigation sidebar */
.md-nav--primary > .md-nav__title { display: none !important; }
.md-sidebar .md-nav .md-nav__link, .md-nav--primary .md-nav__link { font-family: var(--app-font-body) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; padding: 5px 10px !important; margin: 0 !important; border-radius: var(--app-radius-sm); transition: color 0.15s ease, background 0.15s ease; }
.md-sidebar .md-nav .md-nav__link:hover { background: var(--app-accent-transparent); }
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link { font-family: var(--app-font-heading) !important; font-weight: 700 !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; padding: 10px 10px 4px !important; margin-top: 6px !important; }
.md-nav--primary > .md-nav__list > .md-nav__item > label { font-family: var(--app-font-heading) !important; font-weight: 700; font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; padding: 10px 10px 4px; margin-top: 6px; display: block; cursor: pointer; }
.md-nav--primary > .md-nav__list > .md-nav__item > label .md-ellipsis { font-family: var(--app-font-heading) !important; font-weight: 700 !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.08em; }
.md-sidebar .md-nav--primary .md-nav .md-nav__item > .md-nav__link { font-size: 13px !important; font-weight: 400 !important; padding-left: 18px !important; }
.md-nav .md-nav__item--active > .md-nav__link { font-weight: 600; }
.md-nav__toggle ~ .md-nav { transition: max-height 0.25s ease, opacity 0.2s ease; }
.md-nav .md-nav__list { padding: 0; margin: 0; }

/* Right sidebar (TOC) */
.md-sidebar--secondary .md-nav__title { font-family: var(--app-font-heading) !important; font-weight: 700; font-size: 0 !important; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; padding: 10px 10px 4px; margin-top: 19px; }
.md-sidebar--secondary .md-nav__title::before { content: "Section contents"; font-size: 10px; display: block; }
.md-sidebar--secondary .md-nav__link { font-family: var(--app-font-body) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; padding: 5px 10px !important; margin: 0 !important; border-radius: var(--app-radius-sm); transition: color 0.15s ease, background 0.15s ease; }
.md-sidebar--secondary .md-nav__link:hover { background: var(--app-accent-transparent); }
.md-sidebar--secondary .md-nav__link--active { font-weight: 600 !important; }
.md-sidebar--secondary .md-nav .md-nav .md-nav__link { padding-left: 18px !important; font-size: 12px !important; }

/* Page transitions */
.md-content { animation: fadeIn 0.2s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.md-tabs, .md-header, .md-sidebar { transition: background 0.2s ease, opacity 0.15s ease; }
.md-content { max-width: 52rem; padding: 1.4rem 1.8rem; }
html { scroll-behavior: smooth; }
.md-typeset hr { margin: 1.2rem 0; opacity: 0.4; }

/* Tables */
.md-typeset table:not([class]) { font-size: 0.63rem; border-radius: var(--app-radius); overflow: hidden; }
.md-typeset table:not([class]) th { font-family: var(--app-font-heading) !important; font-weight: 600; font-size: 0.57rem; text-transform: uppercase; letter-spacing: 0.03em; }
.md-typeset table:not([class]) td, .md-typeset table:not([class]) th { padding: 0.55rem 0.8rem; }
.md-typeset code { font-size: 0.63rem; border-radius: var(--app-radius-sm); padding: 0.15rem 0.4rem; }
.md-typeset pre { border-radius: var(--app-radius); }
.md-button, .md-button--primary { border-radius: var(--app-radius); font-family: var(--app-font-heading) !important; font-weight: 600; font-size: 0.63rem; letter-spacing: 0.02em; }
.md-search__input { border-radius: var(--app-radius); font-size: 0.68rem; }
.md-top { border-radius: var(--app-radius); font-size: 0.57rem; }
.md-typeset .admonition, .md-typeset details { font-size: 0.65rem; margin: 0.8rem 0; }
.md-typeset .admonition-title, .md-typeset summary { font-family: var(--app-font-heading) !important; font-weight: 600; font-size: 0.65rem; }

/* ==========================================================================
   5. APP-SPECIFIC UTILITIES
   ========================================================================== */

.tier-daf::after, .tier-mmt::after, .tier-app::after { font-size: 0.55em; font-weight: 600; padding: 2px 8px; border-radius: var(--app-radius-sm); margin-left: 10px; vertical-align: middle; color: var(--app-text-on-accent); }
.tier-daf::after { content: "Platform"; background: var(--tier-daf); }
.tier-mmt::after { content: "Assessment"; background: var(--tier-mmt); }
.tier-app::after { content: "WAZI"; background: var(--tier-app); }
.risk-low { color: var(--risk-low); font-weight: 600; }
.risk-moderate { color: var(--risk-moderate); font-weight: 600; }
.risk-high { color: var(--risk-high); font-weight: 600; }
.risk-redflag { color: var(--risk-redflag); font-weight: 700; }
.md-typeset img { border-radius: var(--app-radius); max-width: 100%; height: auto; }
.md-typeset .screenshot { border-radius: var(--app-radius); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1); margin: 1.2rem 0; max-height: 500px; width: auto; object-fit: contain; }
.md-typeset figcaption, .md-typeset .caption { font-size: 0.57rem; color: var(--app-text-muted); text-align: center; margin-top: 0.3rem; font-style: italic; }

/* 6. Footer */
.md-footer-meta { display: none !important; }


/* Header title — show full app name independently from site_name */
.md-header__topic:first-child > .md-ellipsis {
  font-size: 0 !important;
  overflow: visible !important;
}
.md-header__topic:first-child > .md-ellipsis::before {
  content: "WAZI \2014  System Documentation";
  font-size: 0.8rem;
  font-family: var(--app-font-heading);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}