:root {
    --primary: #27aae1;
    --secondary: #FE7501;
    --accent: #006d77;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #dc3545;
    --text: #000000;
    --background: #f8f9fa;
    --nav-bg: white;
    --kpi-bg: white;
    --border-radius: 8px;
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --border-radius: 12px;
    --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Custom styles for CEMA Warehouse docs */
.md-header {
    background-color: var(--primary)!important;
}

.highlight-box {
    background-color: var(--background);
    border-left: 4px solid var(--secondary);
    padding: 16px;
    margin: 16px 0;
}

.api-endpoint {
    background-color: var(--accent);
    border-radius: 4px;
    padding: 8px 12px;
    font-family: monospace;
}


/* Tab container background */
.md-tabs {
    background-color: var(--primary) !important;
    border-bottom: 1px solid var(--accent);
    box-shadow: none;
}


/* For dark mode compatibility */
[data-md-color-scheme="slate"] .md-tabs {
    background-color: var(--primary) !important;
    border-bottom: 1px solid var(--accent);
}

[data-md-color-scheme="slate"] .md-tabs__link {
    color: white !important;
}

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

[data-md-color-scheme="slate"] .md-tabs__link--active {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 3px solid var(--secondary);
}