/* ========================================
   PhishFort API Docs

   A quiet, minimal reading surface built on
   MkDocs Material. One accent, flat surfaces,
   no decoration that competes with content.
   ======================================== */

/* --- Design Tokens: Light --- */

:root {
    --pf-accent: #5457d6;
    --pf-accent-hover: #4345c4;
    --pf-accent-subtle: rgba(84, 87, 214, 0.07);
    --pf-btn-bg: #4f46e5;
    --pf-btn-bg-hover: #4338ca;

    --pf-bg: #fafafb;
    --pf-bg-subtle: #f4f4f6;
    --pf-surface: #fdfdfe;
    --pf-surface-hover: #f6f6f8;
    --pf-border: rgba(23, 23, 43, 0.08);
    --pf-border-strong: rgba(23, 23, 43, 0.16);
    --pf-text: #1a1a21;
    --pf-text-2: #50505c;
    --pf-text-3: #8f8f9b;

    --md-primary-fg-color: #1a1a21;
    --md-primary-fg-color--light: #3f3f4a;
    --md-primary-fg-color--dark: #0b0b10;
    --md-accent-fg-color: var(--pf-accent);
    --md-accent-fg-color--transparent: var(--pf-accent-subtle);
    --md-typeset-a-color: var(--pf-accent);
}

[data-md-color-scheme="default"] {
    --md-typeset-a-color: var(--pf-accent);
}

/* --- Design Tokens: Dark --- */

[data-md-color-scheme="slate"] {
    --pf-accent: #9b9ef7;
    --pf-accent-hover: #b3b5fa;
    --pf-accent-subtle: rgba(155, 158, 247, 0.07);
    --pf-btn-bg: #4f46e5;
    --pf-btn-bg-hover: #5b54ea;

    --pf-bg: #0b0b10;
    --pf-bg-subtle: #121218;
    --pf-surface: #16161d;
    --pf-surface-hover: #1d1d26;
    --pf-border: rgba(235, 235, 255, 0.07);
    --pf-border-strong: rgba(235, 235, 255, 0.13);
    --pf-text: #ececf1;
    --pf-text-2: #9a9aa7;
    --pf-text-3: #62626e;

    --md-primary-fg-color: #16161d;
    --md-primary-fg-color--light: #1d1d26;
    --md-primary-fg-color--dark: #0b0b10;
    --md-accent-fg-color: var(--pf-accent);
    --md-accent-fg-color--transparent: var(--pf-accent-subtle);
    --md-typeset-a-color: var(--pf-accent);
    --md-default-bg-color: #0b0b10;
    --md-default-bg-color--light: #121218;
    --md-default-bg-color--lighter: #1d1d26;
    --md-code-bg-color: #121218;
}

/* --- Hide built-in elements --- */

.md-header__source { display: none; }
.md-content__button { display: none; }

/* --- Header --- */

.md-header {
    background: var(--pf-bg);
    color: var(--pf-text);
    border-bottom: 1px solid var(--pf-border);
    box-shadow: none;
}

.md-header .md-header__button {
    color: var(--pf-text-2);
}

.md-search__input {
    border-radius: 8px;
    font-size: 0.82rem;
    background-color: var(--pf-bg-subtle);
    color: var(--pf-text);
}

.md-search__input::placeholder,
.md-search__icon {
    color: var(--pf-text-3);
}

.md-header__title {
    font-weight: 650;
    letter-spacing: -0.015em;
}

/* --- Sidebar Navigation --- */

.md-sidebar {
    border-right: none;
}

.md-nav__link {
    font-size: 0.815rem;
    border-radius: 6px;
    padding: 0.4em 0.75em;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.md-nav__link:hover {
    background: var(--pf-accent-subtle);
    color: var(--pf-accent);
}

.md-nav__item--active > .md-nav__link {
    font-weight: 600;
    color: var(--pf-accent);
    background: var(--pf-accent-subtle);
}

.md-nav__title {
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pf-text-3);
}

/* --- Content Typography --- */

.md-typeset {
    font-size: 0.855rem;
    line-height: 1.72;
    color: var(--pf-text);
}

.md-typeset h1 {
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--pf-text);
    margin-bottom: 0.8em;
}

.md-typeset h2 {
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-top: 2.4em;
    padding-bottom: 0.45em;
    border-bottom: 1px solid var(--pf-border);
}

.md-typeset h3 {
    font-weight: 640;
    letter-spacing: -0.01em;
}

.md-typeset p {
    color: var(--pf-text-2);
}

.md-typeset strong {
    color: var(--pf-text);
}

/* --- Code Blocks --- */

.md-typeset pre {
    border-radius: 10px;
    border: 1px solid var(--pf-border);
    overflow: hidden;
}

.md-typeset code {
    border-radius: 5px;
    font-size: 0.82em;
    padding: 0.15em 0.42em;
    background: var(--pf-bg-subtle);
    border: 1px solid var(--pf-border);
}

.md-typeset pre > code {
    padding: 0.75em 1.1em;
    font-size: 0.82em;
    background: none;
    border: none;
}

/* --- Tabs --- */

.md-typeset .tabbed-labels {
    border-bottom: 1px solid var(--pf-border);
}

.md-typeset .tabbed-labels > label {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    padding: 0.65em 1.1em;
    color: var(--pf-text-3);
    transition: color 0.15s ease;
}

.md-typeset .tabbed-labels > label:hover {
    color: var(--pf-text-2);
    background: none;
}

.md-typeset .tabbed-labels > label.active,
.md-typeset .tabbed-set > input:checked + label {
    color: var(--pf-accent);
    border-bottom-color: var(--pf-accent);
}

/* --- Tables --- */

.md-typeset table:not([class]) {
    font-size: 0.8em;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--pf-border);
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: none;
    width: 100%;
}

.md-typeset table:not([class]) th {
    white-space: nowrap;
    font-weight: 650;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--pf-text-3);
    background: var(--pf-bg-subtle);
    border-bottom: 1px solid var(--pf-border);
    padding: 0.8em 1.2em;
}

.md-typeset table:not([class]) td {
    border-bottom: 1px solid var(--pf-border);
    padding: 0.75em 1.2em;
    color: var(--pf-text-2);
}

.md-typeset table:not([class]) tr:last-child td {
    border-bottom: none;
}

.md-typeset table:not([class]) tbody tr:hover {
    background: var(--pf-surface-hover);
    box-shadow: none;
}

.md-typeset table:not([class]) td code {
    font-size: 0.86em;
}

/* --- Admonitions --- */

.md-typeset .admonition,
.md-typeset details {
    border-radius: 10px;
    border-width: 1px;
    box-shadow: none;
    overflow: hidden;
}

.md-typeset .admonition-title,
.md-typeset summary {
    font-weight: 600;
    font-size: 0.82rem;
    border-radius: 0;
}

/* --- HTTP Method Badges --- */

.method-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22em 0.6em;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.7em;
    font-family: var(--md-code-font-family);
    vertical-align: middle;
    margin-right: 0.4em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.5;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.method-badge.get {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.09);
    border-color: rgba(59, 130, 246, 0.22);
}

.method-badge.post {
    color: #047857;
    background: rgba(16, 185, 129, 0.09);
    border-color: rgba(16, 185, 129, 0.25);
}

.method-badge.put {
    color: #b45309;
    background: rgba(245, 158, 11, 0.09);
    border-color: rgba(245, 158, 11, 0.28);
}

.method-badge.delete {
    color: #be123c;
    background: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.22);
}

.method-badge.patch {
    color: #7e22ce;
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.22);
}

[data-md-color-scheme="slate"] .method-badge.get {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-md-color-scheme="slate"] .method-badge.post {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-md-color-scheme="slate"] .method-badge.put {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

[data-md-color-scheme="slate"] .method-badge.delete {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.3);
}

[data-md-color-scheme="slate"] .method-badge.patch {
    color: #d8b4fe;
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.3);
}

/* ========================================
   Hero — Landing Page
   ======================================== */

.hero-section {
    padding: 2.5rem 0 2rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--pf-border);
}

.md-typeset .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.85rem 0.28rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--pf-accent);
    background: var(--pf-accent-subtle);
    border: 1px solid var(--pf-border);
    margin-bottom: 1.4rem;
    line-height: 1.5;
}

.hero-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.md-typeset h1.hero-title {
    font-size: clamp(1.9rem, 4.5vw, 2.7rem);
    font-weight: 780;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--pf-text);
    margin: 0 0 0.9rem;
    padding: 0;
    border: none;
}

.md-typeset .hero-desc {
    font-size: 0.98rem;
    line-height: 1.68;
    color: var(--pf-text-2);
    max-width: 560px;
    margin: 0 0 1.8rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.md-typeset a.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.58rem 1.3rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    border: none;
}

.md-typeset a.hero-btn--primary {
    background: var(--pf-btn-bg);
    color: #fdfdfe;
}

.md-typeset a.hero-btn--primary:hover {
    background: var(--pf-btn-bg-hover);
    color: #fdfdfe;
}

.md-typeset a.hero-btn--ghost {
    color: var(--pf-text-2);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pf-border-strong);
}

.md-typeset a.hero-btn--ghost:hover {
    color: var(--pf-text);
    background: var(--pf-surface-hover);
    box-shadow: inset 0 0 0 1px var(--pf-border-strong);
}

.hero-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ========================================
   Base URL Card
   ======================================== */

.base-url-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.1rem;
    border-radius: 10px;
    background: var(--pf-bg-subtle);
    border: 1px solid var(--pf-border);
    margin-bottom: 2.5rem;
}

.base-url-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #047857;
    white-space: nowrap;
    flex-shrink: 0;
}

[data-md-color-scheme="slate"] .base-url-label {
    color: #6ee7b7;
}

.base-url-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.md-typeset .base-url-value {
    font-family: var(--md-code-font-family);
    font-size: 0.84rem;
    color: var(--pf-text-2);
    letter-spacing: 0;
}

.md-typeset .base-url-value code {
    background: none;
    padding: 0;
    border: none;
    color: inherit;
    font-size: inherit;
}

/* ========================================
   Endpoint Grid — Landing Page
   ======================================== */

.endpoint-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.md-typeset a.endpoint-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.95rem 1.1rem;
    border-radius: 10px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    text-decoration: none;
    color: var(--pf-text);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

[data-md-color-scheme="slate"] .md-typeset a.endpoint-card {
    background: var(--pf-bg-subtle);
}

.md-typeset a.endpoint-card:hover {
    border-color: var(--pf-border-strong);
    background: var(--pf-surface-hover);
}

.endpoint-card-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.md-typeset .endpoint-card-path {
    font-family: var(--md-code-font-family);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--pf-text);
    min-width: 0;
    overflow-wrap: anywhere;
}

.md-typeset .endpoint-card-desc {
    font-size: 0.76rem;
    color: var(--pf-text-3);
    line-height: 1.45;
    margin: 0;
}

/* ========================================
   Utility Overrides
   ======================================== */

.md-clipboard {
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.md-clipboard:hover {
    background: rgba(128, 128, 128, 0.12);
}

.md-footer {
    border-top: 1px solid var(--pf-border);
}

.md-tabs__link,
.md-nav__link,
.md-typeset a {
    transition: color 0.15s ease, opacity 0.15s ease;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.18);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.3);
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .hero-section {
        padding: 1.8rem 0 1.6rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .md-typeset a.hero-btn {
        justify-content: center;
        width: 100%;
    }

    .base-url-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .endpoint-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Swagger Dark Mode Compatibility
   ======================================== */

[data-md-color-scheme="slate"] .swagger-ui {
    filter: invert(0.88) hue-rotate(180deg);
}

[data-md-color-scheme="slate"] .swagger-ui img {
    filter: invert(1) hue-rotate(180deg);
}