/* TIOCS Theme - Material Theme Variable Overrides */
/* This file contains comprehensive overrides for Material theme default variables */

/* Override all Material theme color variables with TIOCS equivalents */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
    /* Map Material variables to TIOCS variables */
    --md-default-bg-color: var(--tiocs-bg-primary) !important;
    --md-default-bg-color--light: var(--tiocs-bg-secondary) !important;
    --md-default-bg-color--lighter: var(--tiocs-bg-secondary) !important;
    --md-default-bg-color--lightest: var(--tiocs-bg-secondary) !important;

    --md-default-fg-color: var(--tiocs-text-primary) !important;
    --md-default-fg-color--light: var(--tiocs-text-secondary) !important;
    --md-default-fg-color--lighter: var(--tiocs-text-secondary) !important;
    --md-default-fg-color--lightest: var(--tiocs-text-secondary) !important;

    --md-primary-bg-color: var(--tiocs-bg-primary) !important;
    --md-primary-bg-color--light: var(--tiocs-bg-secondary) !important;
    --md-primary-fg-color: var(--tiocs-accent-gold) !important;
    --md-primary-fg-color--light: var(--tiocs-accent-gold) !important;
    --md-primary-fg-color--dark: var(--tiocs-accent-gold) !important;

    --md-accent-fg-color: var(--tiocs-accent-gold) !important;
    --md-accent-fg-color--transparent: var(--tiocs-accent-gold-glow) !important;
    --md-accent-bg-color: var(--tiocs-bg-secondary) !important;
    --md-accent-bg-color--light: var(--tiocs-bg-secondary) !important;

    /* Code block colors */
    --md-code-bg-color: var(--tiocs-bg-secondary) !important;
    --md-code-fg-color: var(--tiocs-text-primary) !important;

    /* Admonition colors */
    --md-admonition-bg-color: var(--tiocs-bg-secondary) !important;
    --md-admonition-fg-color: var(--tiocs-text-primary) !important;

    /* Footer colors */
    --md-footer-bg-color: var(--tiocs-bg-primary) !important;
    --md-footer-bg-color--dark: var(--tiocs-bg-secondary) !important;
    --md-footer-fg-color: var(--tiocs-text-primary) !important;
    --md-footer-fg-color--light: var(--tiocs-text-secondary) !important;
    --md-footer-fg-color--lighter: var(--tiocs-text-secondary) !important;
}

/* Specific component overrides that use Material variables */

/* Navigation */
.md-nav--primary .md-nav__title,
.md-nav--secondary .md-nav__title {
    background: var(--tiocs-bg-primary) !important;
    box-shadow: 0 0 .4rem .4rem var(--tiocs-bg-primary) !important;
}

/* Tabs */
.md-tabs {
    background-color: var(--tiocs-bg-primary) !important;
}

/* All tab links - use text color instead of inherit */
.md-tabs__link {
    color: var(--tiocs-text-secondary) !important;
}

/* Active tab link - use primary text color */
.md-tabs__item--active .md-tabs__link {
    color: var(--tiocs-text-primary) !important;
    opacity: 1;
}

/* Search */
.md-search__form {
    background-color: var(--tiocs-bg-secondary) !important;
}

.md-search__output {
    background-color: var(--tiocs-bg-primary) !important;
}

.md-search__input + .md-search__icon {
    color: var(--md-default-fg-color--light) !important; /* Use same color as placeholder/general icon */
}

/* Header */
.md-header,
.md-header[data-md-state="shadow"] {
    background-color: var(--tiocs-bg-primary) !important;
    box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1) !important;
}

/* Sidebar */
.md-sidebar__scrollwrap {
    background-color: var(--tiocs-bg-primary) !important;
}

.md-sidebar--primary,
.md-sidebar--secondary {
    background-color: var(--tiocs-bg-primary) !important;
}

/* Table of contents */
.md-nav--secondary {
    border-left: 0.2rem solid var(--tiocs-accent-gold) !important;
}

/* Buttons */
.md-button {
    background-color: var(--tiocs-accent-gold) !important;
    color: var(--tiocs-bg-primary) !important;
}

.md-button:hover {
    background-color: var(--tiocs-text-secondary) !important;
}

/* Tooltips */
.md-tooltip {
    background-color: var(--tiocs-bg-secondary) !important;
    color: var(--tiocs-text-primary) !important;
}

/* Dialogs */
.md-dialog {
    background-color: var(--tiocs-bg-primary) !important;
    color: var(--tiocs-text-primary) !important;
}

/* Clipboard button */
.md-clipboard {
    color: var(--tiocs-text-secondary) !important;
}

.md-clipboard:hover {
    color: var(--tiocs-accent-gold) !important;
}

/* Version selector */
.md-version__current {
    background-color: var(--tiocs-bg-secondary) !important;
    color: var(--tiocs-text-primary) !important;
}

/* Announcement bar */
.md-banner {
    background-color: var(--tiocs-accent-gold) !important;
    color: var(--tiocs-bg-primary) !important;
}

/* Back to top button */
.md-top {
    background-color: var(--tiocs-accent-gold) !important;
    color: var(--tiocs-bg-primary) !important;
}

.md-top:hover {
    background-color: var(--tiocs-text-secondary) !important;
}

/* Source file */
.md-source-file {
    background-color: var(--tiocs-bg-secondary) !important;
    color: var(--tiocs-text-primary) !important;
}

/* Content tabs */
.md-typeset .tabbed-labels {
    background-color: var(--tiocs-bg-secondary) !important;
}

.md-typeset .tabbed-content {
    border-color: var(--tiocs-accent-gold) !important;
}

/* Task lists */
.md-typeset .task-list-control [type="checkbox"]:checked + .task-list-indicator::before {
    background-color: var(--tiocs-accent-gold) !important;
}

/* Details/Summary */
.md-typeset details {
    background-color: var(--tiocs-bg-secondary) !important;
    border-color: var(--tiocs-accent-gold) !important;
}

/* Keyboard keys */
.md-typeset kbd {
    background-color: var(--tiocs-bg-secondary) !important;
    color: var(--tiocs-text-primary) !important;
    border-color: var(--tiocs-accent-gold) !important;
}

/* Mark/highlight */
.md-typeset mark {
    background-color: var(--tiocs-accent-gold-glow) !important;
    color: var(--tiocs-text-primary) !important;
}

/* Abbreviations */
.md-typeset abbr {
    border-bottom-color: var(--tiocs-accent-gold) !important;
}

/* Definition lists */
.md-typeset dl dt {
    color: var(--tiocs-text-secondary) !important;
}

/* Horizontal rules */
.md-typeset hr {
    border-bottom-color: var(--tiocs-accent-gold) !important;
}

/* Progress bars */
.md-typeset .progress-bar {
    background-color: var(--tiocs-bg-secondary) !important;
}

.md-typeset .progress-bar::after {
    background-color: var(--tiocs-accent-gold) !important;
}

/* Critic markup */
.md-typeset .critic.comment {
    background-color: var(--tiocs-accent-gold-glow) !important;
    color: var(--tiocs-text-primary) !important;
}

/* MathJax */
.md-typeset .MathJax {
    color: var(--tiocs-text-primary) !important;
}

/* Mermaid diagrams */
.md-typeset .mermaid {
    background-color: var(--tiocs-bg-secondary) !important;
}

/* ============================================================================
   FOOTER TAGS STYLING
   ============================================================================ */
.md-footer-tags {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tiocs-accent-gold);
}

.md-footer-tags__label {
    font-family: var(--tiocs-font-display);
    font-size: 0.9rem;
    color: var(--tiocs-text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.md-footer-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.md-footer-tags .md-tag {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
    background-color: var(--tiocs-accent-gold) !important;
    color: var(--tiocs-bg-primary) !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.md-footer-tags .md-tag:hover {
    background-color: var(--tiocs-text-secondary) !important;
    transform: translateY(-1px);
}

/* Hide default header tags if they exist */
.md-typeset .md-content .md-tag {
    display: none;
}

/* But show footer tags */
.md-footer-tags .md-tag {
    display: inline-block !important;
}

/* Override default tag font size */
.md-typeset .md-tag {
    font-size: min(.64em, .64rem);
}

/* Ensure all these overrides take precedence */
* {
    --md-shadow-z1: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1) !important;
    --md-shadow-z2: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2) !important;
    --md-shadow-z3: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================================
   ART DECO ADMONITION STYLING
   ============================================================================ */

/* Base admonition styling */
.md-typeset .admonition {
    border: 2px solid var(--tiocs-accent-gold);
    border-left: 4px solid var(--tiocs-accent-gold);
    background: linear-gradient(
        135deg,
        var(--tiocs-bg-secondary) 0%,
        var(--tiocs-bg-primary) 100%
    );
    box-shadow:
        0 0 15px var(--tiocs-accent-gold-glow),
        inset 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 0;
    padding: 1.5rem;
    margin: 2rem 0;
    position: relative;
    overflow: visible;
}

/* Art Deco corner decorations - top corners only */
.md-typeset .admonition::before,
.md-typeset .admonition::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--tiocs-accent-gold);
    z-index: 1;
}

.md-typeset .admonition::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.md-typeset .admonition::after {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
}

/* Admonition title */
.md-typeset .admonition-title {
    font-family: var(--tiocs-font-display) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--tiocs-accent-gold) !important;
    padding-left: 3rem !important;
    margin: -1.5rem -1.5rem 1rem -1.5rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-right: 1.5rem !important;
    border-bottom: 1px solid var(--tiocs-accent-gold) !important;
    position: relative !important;
    background: transparent !important;
}

/* Custom Art Deco geometric icons using CSS - replaces Material's SVG icons */
.md-typeset .admonition-title::before {
    content: '' !important;
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    background: var(--tiocs-accent-gold) !important;
    box-shadow: 0 0 10px var(--tiocs-accent-gold-glow) !important;
    /* Override Material's mask-image */
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask-repeat: unset !important;
    mask-repeat: unset !important;
    -webkit-mask-size: unset !important;
    mask-size: unset !important;
}

/* Note - Hexagon */
.md-typeset .admonition.note .admonition-title::before {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
}

/* Abstract - Octagon */
.md-typeset .admonition.abstract .admonition-title::before {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%) !important;
}

/* Info - Circle with inner ring */
.md-typeset .admonition.info .admonition-title::before {
    border-radius: 50% !important;
    border: 3px solid var(--tiocs-bg-primary) !important;
}

/* Tip - Upward triangle */
.md-typeset .admonition.tip .admonition-title::before {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
}

/* Success - Diamond */
.md-typeset .admonition.success .admonition-title::before {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
}

/* Question - Square rotated 45deg */
.md-typeset .admonition.question .admonition-title::before {
    transform: translateY(-50%) rotate(45deg) !important;
}

/* Warning - Pentagon */
.md-typeset .admonition.warning .admonition-title::before {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) !important;
    background: var(--tiocs-text-secondary) !important;
}

/* Failure - Downward triangle */
.md-typeset .admonition.failure .admonition-title::before {
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%) !important;
    background: var(--tiocs-text-secondary) !important;
}

/* Danger - Sharp chevron */
.md-typeset .admonition.danger .admonition-title::before {
    clip-path: polygon(0% 0%, 50% 50%, 100% 0%, 75% 50%, 100% 100%, 50% 50%, 0% 100%, 25% 50%) !important;
    background: var(--tiocs-text-secondary) !important;
}

/* Bug - Gear shape approximation */
.md-typeset .admonition.bug .admonition-title::before {
    clip-path: polygon(
        40% 0%, 60% 0%, 60% 20%, 80% 20%, 100% 40%, 100% 60%,
        80% 80%, 60% 80%, 60% 100%, 40% 100%, 40% 80%, 20% 80%,
        0% 60%, 0% 40%, 20% 20%, 40% 20%
    ) !important;
}

/* Example - Rectangle with corners cut */
.md-typeset .admonition.example .admonition-title::before {
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 100%, 0% 100%, 0% 20%) !important;
}

/* Quote - Art Deco quotation marks */
.md-typeset .admonition.quote .admonition-title::before {
    content: '"' !important;
    clip-path: none !important;
    background: none !important;
    font-family: var(--tiocs-font-display) !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    color: var(--tiocs-accent-gold) !important;
    width: auto !important;
    height: auto !important;
    left: 0.75rem !important;
    box-shadow: none !important;
}

/* Important - Star burst */
.md-typeset .admonition.important .admonition-title::before {
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
        50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
    ) !important;
}

/* Collapsible admonitions */
.md-typeset details.admonition {
    border: 2px solid var(--tiocs-accent-gold);
}

.md-typeset details.admonition > summary {
    cursor: pointer;
    transition: all 0.3s ease;
}

.md-typeset details.admonition > summary:hover {
    background-color: var(--tiocs-bg-secondary);
}

/* Admonition content styling */
.md-typeset .admonition > p,
.md-typeset .admonition > ul,
.md-typeset .admonition > ol {
    color: var(--tiocs-text-primary);
}

.md-typeset .admonition code {
    background-color: var(--tiocs-bg-primary);
    border: 1px solid var(--tiocs-accent-gold);
}

/* Nested admonitions */
.md-typeset .admonition .admonition {
    margin: 1rem 0;
    border-width: 1px;
    box-shadow: 0 0 10px var(--tiocs-accent-gold-glow);
}