/* stylesheets/extra.css - FINAL VERSION */
:root {
  --md-admonition-icon--privacy: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>');
}


.md-typeset .admonition.privacy,
.md-typeset details.privacy {
    border-color: rgb(21, 101, 192);
}

.md-typeset .privacy>.admonition-title,
.md-typeset .privacy>summary {
    background-color: rgba(21, 101, 192, 0.1);
}

.md-typeset .privacy>.admonition-title::before,
.md-typeset .privacy>summary::before {
    background-color: rgb(21, 101, 192);
    -webkit-mask-image: var(--md-admonition-icon--privacy);
    mask-image: var(--md-admonition-icon--privacy);
}

:root {
    --md-text-font: "Roboto";
    --md-code-font: "monospace";
    --md-header-height: 4rem;
}

/* --- THEME COLORS --- */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: #0284c7;
    --md-accent-fg-color: #0ea5e9;
    --md-default-fg-color: #1e293b;
    --md-default-bg-color: #ffffff;

    /* --- Mermaid Graph Styles (Light) --- */
    /* 'model' class (Sky-themed) */
    --mermaid-model-fill: #f0f9ff;
    --mermaid-model-stroke: #0284c7;
    --mermaid-model-text: #0369a1;

    /* 'condition' class (Amber-themed) */
    --mermaid-condition-fill: #fffbeb;
    --mermaid-condition-stroke: #d97706;
    --mermaid-condition-text: #78350f;

    /* 'startEnd' class (Standard) */
    --mermaid-startEnd-fill: var(--md-default-bg-color);
    --mermaid-startEnd-stroke: var(--md-default-fg-color);
    --mermaid-startEnd-text: var(--md-default-fg-color);

    /* 'logic' class (Gray) */
    --mermaid-logic-fill: #f8fafc;
    --mermaid-logic-stroke: #94a3b8;
    --mermaid-logic-text: #334155;

    /* 'merge' class (Green-themed) */
    --mermaid-merge-fill: #f0fdf4;
    --mermaid-merge-stroke: #16a34a;
    --mermaid-merge-text: #14532d;

    /* Invisible Nodes (Uses your page background) */
    --mermaid-invisible-fill: var(--md-default-bg-color);
    --mermaid-invisible-stroke: var(--md-default-bg-color);
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #0ea5e9;
    --md-accent-fg-color: #38bdf8;
    --md-default-fg-color: #e2e8f0;
    --md-default-bg-color: #0f172a;

    /* --- Mermaid Graph Styles (Dark) --- */
    /* 'model' class (Sky-themed) */
    --mermaid-model-fill: #0c4a6e;
    --mermaid-model-stroke: #38bdf8;
    --mermaid-model-text: #e0f2fe;

    /* 'condition' class (Amber-themed) */
    --mermaid-condition-fill: #451a03;
    --mermaid-condition-stroke: #fcd34d;
    --mermaid-condition-text: #fef3c7;

    /* 'startEnd' class (Standard) */
    --mermaid-startEnd-fill: var(--md-default-bg-color);
    --mermaid-startEnd-stroke: var(--md-default-fg-color);
    --mermaid-startEnd-text: var(--md-default-fg-color);

    /* 'logic' class (Gray) */
    --mermaid-logic-fill: #1e293b;
    --mermaid-logic-stroke: #475569;
    --mermaid-logic-text: #cbd5e1;

    /* 'merge' class (Green-themed) */
    --mermaid-merge-fill: #052e16;
    --mermaid-merge-stroke: #4ade80;
    --mermaid-merge-text: #dcfce7;

    /* Invisible Nodes (Uses your page background) */
    --mermaid-invisible-fill: var(--md-default-bg-color);
    --mermaid-invisible-stroke: var(--md-default-bg-color);
}

/* ========================================================================= */
/* HEADER, LAYOUT, & FINAL TWEAKS                                            */
/* ========================================================================= */

/* 1. HEADER STYLING
/* ------------------------------------------------------------------------- */
.md-header {
    background-color: rgba(248, 250, 252, 0.85);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

[data-md-color-scheme="slate"] .md-header {
    background-color: rgba(2, 6, 23, 0.85);
    border-bottom: 1px solid #334155;
}

.md-header[data-md-state="shadow"] {
    box-shadow: 0 0.2rem 0.5rem #0000001a;
}

.md-header .md-grid {
    max-width: none;
}

.md-main .md-grid {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* 2. LOGO, TITLE, AND ICON STYLING
/* ------------------------------------------------------------------------- */
.md-header .md-logo {
    margin: 0 1rem 0 0;
    padding: 0 0 0 1rem;
    /* TOP | RIGHT | BOTTOM | LEFT */
    display: flex;
    align-items: center;
}

.md-header .md-logo img {
    height: 32px;
    /* Use px instead of rem */
}

.md-header .md-logo:hover {
    background-color: transparent !important;
}

.md-header__topic {
    display: none;
}

[data-md-color-scheme="default"] .md-header__button {
    color: #475569;
}

[data-md-color-scheme="default"] .md-header__button[for="__palette"] {
    color: #94a3b8;
}

[data-md-color-scheme="default"] .md-header__button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 3. SEARCH BAR AND GITHUB LINK
/* ------------------------------------------------------------------------- */
.md-header .md-search {
    margin-left: 0.6rem;
}

[data-md-color-scheme="default"] .md-search__form {
    background-color: #e2e8f0;
    border: none;
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
    color: #475569;
}

[data-md-color-scheme="default"] .md-source,
[data-md-color-scheme="default"] .md-search__input+.md-search__icon {
    color: #475569;
}

[data-md-color-scheme="slate"] .md-search__form {
    background-color: #1e293b99;
}

/* 4. NAVIGATION TABS / LINKS
/* ------------------------------------------------------------------------- */
.md-tabs {
    background-color: transparent;
    border-bottom: 1px solid #e2e8f0;
}

[data-md-color-scheme="slate"] .md-tabs {
    border-bottom-color: #334155;
}

[data-md-color-scheme="default"] .md-tabs__link {
    color: #475569;
}

.md-main .md-grid,
.md-tabs .md-grid {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.md-tabs__list {
    justify-content: flex-start;
}

.md-tabs__link {
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease-in-out;
}

.md-tabs__link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

[data-md-color-scheme="slate"] .md-tabs__link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.md-tabs__link--active {
    color: var(--md-accent-fg-color);
    border-bottom: 2px solid var(--md-accent-fg-color);
}

/* ========================================================================= */
/* CUSTOM SYNTAX HIGHLIGHTING                                                */
/* ========================================================================= */
[data-md-color-scheme="default"] {
    --md-code-hl-color: #000;
    --md-code-hl-keyword-color: #204a87;
    --md-code-hl-operator-color: #ce5c00;
    --md-code-hl-string-color: #4e9a06;
    --md-code-hl-comment-color: #8f5902;
    --md-code-hl-number-color: #0000cf;
    --md-code-hl-function-color: #000;
    --md-code-hl-class-color: #000;
}

[data-md-color-scheme="slate"] {
    --md-code-hl-color: #E6EDF3;
    --md-code-hl-keyword-color: #FF7B72;
    --md-code-hl-operator-color: #FF7B72;
    --md-code-hl-string-color: #A5D6FF;
    --md-code-hl-comment-color: #8B949E;
    --md-code-hl-number-color: #A5D6FF;
    --md-code-hl-function-color: #D2A8FF;
    --md-code-hl-class-color: #F0883E;
}

/* ========================================================================= */
/* CUSTOM FIXES                                                              */
/* ========================================================================= */


/* FIX 2 & 3: Mobile header layout adjustments */
@media screen and (max-width: 76.1875em) {
    .md-header {
        box-shadow: none;
    }


    .md-header__button[for="__drawer"] {
        order: -1;
    }

    .md-header .md-logo {
        padding-left: 0;
        margin-left: 0.2rem;
        margin-right: auto;
    }
}

/* FIX 4: Unify mobile sidebar colors with the main theme */
[data-md-color-scheme="default"] {

    /* Sidebar header: match main page header background and border */
    .md-nav--primary .md-nav__title {
        background-color: rgba(248, 250, 252, 1);
        border-bottom: 1px solid rgba(226, 232, 240, 1);
        box-shadow: none;
        color: #475569;
        /* Match header icon/text color */
    }

    /* Sidebar main background: match page background */
    .md-nav--primary {
        background-color: var(--md-default-bg-color);
    }
}

[data-md-color-scheme="slate"] {

    /* Sidebar header: match main page header background and border */
    .md-nav--primary .md-nav__title {
        background-color: rgba(2, 6, 23, 1);
        border-bottom: 1px solid #334155;
        box-shadow: none;
    }

    /* Sidebar main background: match page background */
    .md-nav--primary {
        background-color: var(--md-default-bg-color);
    }
}


/* Force a 2x2 grid for the homepage cards on wider screens */
@media screen and (min-width: 60em) {
    .md-typeset .grid.two-by-two {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.md-typeset a[target="_blank"]::after {
    content: '';
    /* Required for pseudo-elements */
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.25em;
    vertical-align: middle;

    /* Use the link's current text color for the icon */
    background-color: currentColor;

    /* This is the SVG icon shape, URL-encoded for CSS.
    It acts as a "mask" for the background-color.
  */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Style <code> blocks in the navigation
 */
.md-nav .md-nav__link code {
  /* Adds the light gray background */
  background-color: rgba(0, 0, 0, 0.07);
  
  /* Adds a little space inside the block */
  padding: 0.1em 0.4em;
  
  /* Rounds the corners */
  border-radius: 4px;
  
  /* Optional: make the font color stand out */
  color: #405166; 
}

/*
 * Dark mode version
 */
[data-md-color-scheme="slate"] .md-nav .md-nav__link code {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ccc;
}

/* ========================================================================= */
/* CUSTOM BASH COMMAND HIGHLIGHTING                                          */
/* ========================================================================= */

/*
 * This file overrides two things for 'bash' blocks:
 * 1. --md-code-fg-color: Changes the default text (the command) to yellow.
 * 2. .gp: Targets the "Generic.Prompt" token ($) and makes it blue.
*/

/* --- Light Mode --- */
[data-md-color-scheme="default"] .language-bash {
    /* --md-code-fg-color is the default text color for a code block */
    --md-code-fg-color: #773706; /* Dark Amber/Yellow for command text */
}
[data-md-color-scheme="default"] .language-bash .gp {
    /* .gp is the 'Generic.Prompt' token ($) */
    color: #0284c7; /* Primary Blue for prompts ($) */
}

/* --- Dark Mode --- */
[data-md-color-scheme="slate"] .language-bash {
    --md-code-fg-color: #eab308; /* Bright Yellow for command text */
}
[data-md-color-scheme="slate"] .language-bash .gp {
    color: #0ea5e9; /* Primary Blue for prompts ($) */
}