/* ==========================================================================
   MKDOCS MATERIAL THEME - PONTOTEL CUSTOMIZATION
   ========================================================================== */

/* Material Design Color Variables Override */
:root {
    --md-primary-fg-color: #FCCC31;
    /* Pontotel Yellow */
    --md-primary-fg-color--light: #FDD65F;
    --md-primary-fg-color--dark: #E8B81E;

    --md-accent-fg-color: #79397D;
    /* Pontotel Purple */
    --md-accent-fg-color--transparent: rgba(121, 57, 125, 0.1);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.md-header {
    background: linear-gradient(135deg, #FCCC31 0%, #E8B81E 100%) !important;
    color: #000000;
}

.md-header__title {
    font-weight: var(--font-weight-bold);
    color: #000000;
}

.md-header__button {
    color: #000000;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 32px !important;
    width: auto !important;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

/* Active Navigation Link */
.md-nav__link--active {
    color: var(--color-pontotel-purple) !important;
    font-weight: var(--font-weight-semibold);
}

/* Navigation Tabs */
.md-tabs {
    background-color: var(--color-pontotel-yellow);
}

.md-tabs__link {
    color: #000000;
    font-weight: var(--font-weight-medium);
}

.md-tabs__link--active {
    border-bottom: 3px solid var(--color-pontotel-purple);
    color: #000000;
    font-weight: var(--font-weight-bold);
}

/* Navigation hover */
.md-nav__link:hover {
    color: var(--color-pontotel-purple);
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.md-sidebar {
    font-family: var(--font-family-primary);
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.md-content {
    font-family: var(--font-family-primary);
}

/* Content Area Polish */
.md-content__inner h1 {
    color: var(--color-gray-900);
    border-left: 4px solid var(--color-pontotel-yellow);
    padding-left: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

/* Links */
.md-content a {
    color: var(--color-pontotel-purple);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.md-content a:hover {
    border-bottom-color: var(--color-pontotel-purple);
}

/* ==========================================================================
   SEARCH
   ========================================================================== */

.md-search__input {
    font-family: var(--font-family-primary);
    border-radius: var(--border-radius-full);
}

.md-search__input:focus {
    border-color: var(--color-pontotel-purple);
}

/* Search Box on Header */
.md-header .md-search__input {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #000000 !important;
}

.md-header .md-search__input::placeholder {
    color: #000000 !important;
    opacity: 0.7;
}

.md-header .md-search__input:focus {
    background-color: #ffffff !important;
    color: var(--color-gray-900) !important;
}

/* ==========================================================================
   ADMONITIONS
   ========================================================================== */

.md-typeset .admonition,
.md-typeset details {
    border-radius: var(--border-radius-md);
    border-left-width: 4px;
}

/* ==========================================================================
   SWAGGER UI CUSTOMIZATION
   ========================================================================== */

.swagger-ui .topbar {
    display: none;
}

.swagger-ui .info .title {
    font-family: var(--font-family-primary);
    color: var(--color-gray-900);
}

.swagger-ui .opblock {
    border-radius: var(--border-radius-md) !important;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease;
}

.swagger-ui .opblock:hover {
    transform: translateY(-1px);
}

.swagger-ui .opblock.opblock-get {
    border-color: var(--color-info);
    background: rgba(33, 150, 243, 0.05) !important;
}

.swagger-ui .opblock.opblock-get .opblock-summary-method {
    background: var(--color-info) !important;
    border-radius: 4px;
}

.swagger-ui .opblock.opblock-post {
    border-color: var(--color-success);
    background: rgba(76, 175, 80, 0.05) !important;
}

.swagger-ui .opblock.opblock-post .opblock-summary-method {
    background: var(--color-success) !important;
    border-radius: 4px;
}

.swagger-ui .opblock.opblock-put {
    border-color: var(--color-warning);
    background: rgba(255, 152, 0, 0.05) !important;
}

.swagger-ui .opblock.opblock-put .opblock-summary-method {
    background: var(--color-warning) !important;
    border-radius: 4px;
}

.swagger-ui .opblock.opblock-delete {
    border-color: var(--color-error);
    background: rgba(244, 67, 54, 0.05) !important;
}

.swagger-ui .opblock.opblock-delete .opblock-summary-method {
    background: var(--color-error) !important;
    border-radius: 4px;
}

/* ==========================================================================
   SCROLL PROGRESS BAR
   ========================================================================== */

#scroll-progress {
    background: linear-gradient(90deg, var(--color-pontotel-yellow) 0%, var(--color-pontotel-yellow-dark) 100%) !important;
}