/* Zenzero ZAI Documentation Custom Styles */

/* Zenzero brand colours */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: #FF8200;
    --md-primary-fg-color--light: #FFA040;
    --md-primary-fg-color--dark: #E07000;
    --md-accent-fg-color: #FF8200;
    --md-accent-fg-color--transparent: rgba(255, 130, 0, 0.1);
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #FF8200;
    --md-primary-fg-color--light: #FFA040;
    --md-primary-fg-color--dark: #E07000;
    --md-accent-fg-color: #FF8200;
    --md-accent-fg-color--transparent: rgba(255, 130, 0, 0.1);
}

/* Custom color variables */
:root {
    --zai-primary: #FF8200;
    --zai-secondary: #0f9d58;
    --zai-accent: #FFA040;
    --zai-danger: #db4437;
}

/* Wider content container */
.md-grid {
    max-width: 1440px;
}

/* Grid cards enhancement */
.grid.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.grid.cards > * {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.grid.cards > *:hover {
    border-color: var(--md-accent-fg-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Status badges */
.status-online {
    color: var(--zai-secondary);
}

.status-offline {
    color: var(--zai-danger);
}

.status-warning {
    color: var(--zai-accent);
}

/* Code block enhancements */
.highlight pre {
    border-radius: 0.5rem;
}

/* Table improvements */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

table thead {
    background-color: var(--md-default-fg-color--lightest);
}

table tbody tr:hover {
    background-color: var(--md-default-fg-color--lightest);
}

/* Admonition customization */
.admonition {
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.admonition.tip {
    border-left: 4px solid var(--zai-primary);
}

.admonition.warning {
    border-left: 4px solid var(--zai-accent);
}

.admonition.danger {
    border-left: 4px solid var(--zai-danger);
}

/* Navigation enhancements */
.md-nav__item--active > .md-nav__link {
    font-weight: 600;
}

/* Search result highlighting */
.md-search-result__article {
    border-radius: 0.5rem;
}

/* Mermaid diagram improvements */
.mermaid {
    text-align: center;
    margin: 2rem 0;
}

/* Custom button styles */
.md-button {
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.md-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] {
    --md-default-bg-color: #1a1a1a;
    --md-default-fg-color: #e0e0e0;
}

[data-md-color-scheme="slate"] .grid.cards > * {
    background-color: #2a2a2a;
}

[data-md-color-scheme="slate"] table thead {
    background-color: #2a2a2a;
}

/* Responsive improvements */
@media screen and (max-width: 768px) {
    .grid.cards {
        grid-template-columns: 1fr;
    }
}

/* Custom task list styling */
.task-list-item {
    list-style-type: none;
}

.task-list-item input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* Icon improvements */
.twemoji {
    vertical-align: text-bottom;
}

/* Release status badges */
.release-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.release-badge.shipped {
    background-color: #0f9d58;
    color: #fff;
}

.release-badge.dev {
    background-color: #F59E0B;
    color: #000;
}

[data-md-color-scheme="slate"] .release-badge.shipped {
    background-color: #34d399;
    color: #000;
}

[data-md-color-scheme="slate"] .release-badge.dev {
    background-color: #FBBF24;
    color: #000;
}

/* Footer customization */
.md-footer {
    border-top: 2px solid var(--md-accent-fg-color);
}

/* Version badge */
.md-version {
    border-radius: 0.5rem;
}

/* Code annotation styling */
.md-annotation {
    border-radius: 0.5rem;
}

/* Keyboard key styling */
kbd {
    background-color: var(--md-default-fg-color--lightest);
    border: 1px solid var(--md-default-fg-color--light);
    border-radius: 0.25rem;
    padding: 0.1rem 0.4rem;
    font-family: var(--md-code-font-family);
    font-size: 0.85em;
}

/* Tabbed content enhancement */
.tabbed-set {
    border-radius: 0.5rem;
}

/* Progress indicators */
.progress-bar {
    height: 4px;
    background-color: var(--zai-primary);
    border-radius: 2px;
    margin: 1rem 0;
}

/* Custom alert boxes */
.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.alert-info {
    background-color: rgba(66, 133, 244, 0.1);
    border-left: 4px solid var(--zai-primary);
}

.alert-success {
    background-color: rgba(15, 157, 88, 0.1);
    border-left: 4px solid var(--zai-secondary);
}

.alert-warning {
    background-color: rgba(244, 180, 0, 0.1);
    border-left: 4px solid var(--zai-accent);
}

.alert-danger {
    background-color: rgba(219, 68, 55, 0.1);
    border-left: 4px solid var(--zai-danger);
}