/**
 * Atesto Design System
 *
 * Sistema de diseño con soporte para tema claro y oscuro.
 * Basado en Bootstrap 5 con variables CSS personalizadas.
 */

/* ==========================================================================
   CSS Custom Properties - Light Theme (default)
   ========================================================================== */

:root {
    /* Brand colors */
    --atesto-primary: #1a365d;
    --atesto-primary-hover: #153050;
    --atesto-secondary: #2d3748;
    --atesto-accent: #3182ce;
    --atesto-accent-hover: #2c5282;

    /* Semantic colors */
    --atesto-success: #38a169;
    --atesto-warning: #d69e2e;
    --atesto-danger: #e53e3e;
    --atesto-info: #3182ce;

    /* Background colors */
    --atesto-bg-body: #ffffff;
    --atesto-bg-secondary: #f7fafc;
    --atesto-bg-tertiary: #edf2f7;
    --atesto-bg-card: #ffffff;
    --atesto-bg-navbar: var(--atesto-primary);
    --atesto-bg-footer: #f7fafc;

    /* Text colors */
    --atesto-text-primary: #1a202c;
    --atesto-text-secondary: #4a5568;
    --atesto-text-muted: #718096;
    --atesto-text-inverse: #ffffff;

    /* Border colors */
    --atesto-border-color: #e2e8f0;
    --atesto-border-color-light: #edf2f7;

    /* Shadow */
    --atesto-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --atesto-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --atesto-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --atesto-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Focus ring */
    --atesto-focus-ring: 0 0 0 3px rgba(49, 130, 206, 0.4);

    /* Transitions */
    --atesto-transition-fast: 150ms ease-in-out;
    --atesto-transition-base: 200ms ease-in-out;

    /* Typography */
    --atesto-font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --atesto-font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace;

    /* Spacing */
    --atesto-navbar-height: 56px;
}

/* ==========================================================================
   CSS Custom Properties - Dark Theme
   ========================================================================== */

[data-theme="dark"] {
    /* Background colors */
    --atesto-bg-body: #1a202c;
    --atesto-bg-secondary: #2d3748;
    --atesto-bg-tertiary: #4a5568;
    --atesto-bg-card: #2d3748;
    --atesto-bg-navbar: #171923;
    --atesto-bg-footer: #171923;

    /* Text colors */
    --atesto-text-primary: #f7fafc;
    --atesto-text-secondary: #e2e8f0;
    --atesto-text-muted: #a0aec0;
    --atesto-text-inverse: #1a202c;

    /* Border colors */
    --atesto-border-color: #4a5568;
    --atesto-border-color-light: #2d3748;

    /* Shadow - more subtle in dark mode */
    --atesto-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --atesto-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --atesto-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --atesto-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

    /* Accent adjustments for dark mode */
    --atesto-accent: #4299e1;
    --atesto-accent-hover: #63b3ed;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--atesto-font-family);
    color: var(--atesto-text-primary);
    background-color: var(--atesto-bg-body);
    transition: background-color var(--atesto-transition-base), color var(--atesto-transition-base);
}

/* Sticky footer layout */
main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--atesto-primary);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--atesto-text-primary);
}

.text-muted {
    color: var(--atesto-text-muted) !important;
}

a {
    color: var(--atesto-accent);
    transition: color var(--atesto-transition-fast);
}

a:hover {
    color: var(--atesto-accent-hover);
}

.font-monospace {
    font-family: var(--atesto-font-mono);
}

code {
    font-family: var(--atesto-font-mono);
    color: var(--atesto-accent);
    background-color: var(--atesto-bg-tertiary);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar-atesto {
    background-color: var(--atesto-bg-navbar);
    box-shadow: var(--atesto-shadow);
}

.navbar-atesto .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.025em;
}

.navbar-atesto .nav-link {
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--atesto-transition-fast);
}

.navbar-atesto .nav-link:hover,
.navbar-atesto .nav-link:focus {
    color: #ffffff;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-atesto {
    background-color: var(--atesto-accent);
    border-color: var(--atesto-accent);
    color: #ffffff;
    font-weight: 500;
    transition: all var(--atesto-transition-fast);
}

.btn-atesto:hover,
.btn-atesto:focus {
    background-color: var(--atesto-accent-hover);
    border-color: var(--atesto-accent-hover);
    color: #ffffff;
}

.btn-atesto:focus {
    box-shadow: var(--atesto-focus-ring);
}

.btn-atesto-outline {
    background-color: transparent;
    border-color: var(--atesto-accent);
    color: var(--atesto-accent);
    font-weight: 500;
    transition: all var(--atesto-transition-fast);
}

.btn-atesto-outline:hover,
.btn-atesto-outline:focus {
    background-color: var(--atesto-accent);
    border-color: var(--atesto-accent);
    color: #ffffff;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background-color: var(--atesto-bg-card);
    border-color: var(--atesto-border-color);
}

.card-header {
    background-color: var(--atesto-bg-card);
    border-bottom-color: var(--atesto-border-color);
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
    border: none;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(56, 161, 105, 0.2);
    color: #68d391;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(214, 158, 46, 0.2);
    color: #f6e05e;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(229, 62, 62, 0.2);
    color: #fc8181;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(49, 130, 206, 0.2);
    color: #63b3ed;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control,
.form-select {
    background-color: var(--atesto-bg-card);
    border-color: var(--atesto-border-color);
    color: var(--atesto-text-primary);
    transition: border-color var(--atesto-transition-fast), box-shadow var(--atesto-transition-fast);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--atesto-bg-card);
    border-color: var(--atesto-accent);
    color: var(--atesto-text-primary);
    box-shadow: var(--atesto-focus-ring);
}

.form-control::placeholder {
    color: var(--atesto-text-muted);
}

.form-label {
    color: var(--atesto-text-secondary);
    font-weight: 500;
}

.form-text {
    color: var(--atesto-text-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer-atesto {
    background-color: var(--atesto-bg-footer);
    border-top: 1px solid var(--atesto-border-color);
    color: var(--atesto-text-muted);
}

.footer-atesto a {
    color: var(--atesto-text-secondary);
    text-decoration: none;
    transition: color var(--atesto-transition-fast);
}

.footer-atesto a:hover {
    color: var(--atesto-accent);
}

/* ==========================================================================
   Theme Toggle
   ========================================================================== */

.theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    padding: 0.375rem 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--atesto-transition-fast);
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.theme-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.theme-toggle .bi {
    font-size: 1.125rem;
}

/* Show only the relevant icon based on current theme */
.theme-toggle .icon-light,
.theme-toggle .icon-dark {
    display: none;
}

[data-theme="light"] .theme-toggle .icon-dark {
    display: inline-block;
}

[data-theme="dark"] .theme-toggle .icon-light {
    display: inline-block;
}

/* Fallback when no theme is set */
:root:not([data-theme]) .theme-toggle .icon-dark {
    display: inline-block;
}

/* ==========================================================================
   Backgrounds
   ========================================================================== */

.bg-light {
    background-color: var(--atesto-bg-secondary) !important;
}

.bg-secondary-subtle {
    background-color: var(--atesto-bg-tertiary) !important;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Skip link for accessibility - visually hidden until focused */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    background: var(--atesto-accent);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-weight: 500;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--atesto-accent);
    outline-offset: 2px;
}

/* Remove default focus for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   Badge overrides for dark mode
   ========================================================================== */

[data-theme="dark"] .badge.bg-success {
    background-color: rgba(56, 161, 105, 0.3) !important;
    color: #68d391;
}

[data-theme="dark"] .badge.bg-warning {
    background-color: rgba(214, 158, 46, 0.3) !important;
    color: #f6e05e;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: rgba(229, 62, 62, 0.3) !important;
    color: #fc8181;
}

/* ==========================================================================
   List group overrides for dark mode
   ========================================================================== */

[data-theme="dark"] .list-group-item {
    background-color: var(--atesto-bg-card);
    border-color: var(--atesto-border-color);
    color: var(--atesto-text-primary);
}

[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--atesto-text-primary);
}

/* ==========================================================================
   Horizontal rule
   ========================================================================== */

hr {
    border-color: var(--atesto-border-color);
    opacity: 1;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
    background: linear-gradient(135deg, var(--atesto-bg-secondary) 0%, var(--atesto-bg-body) 100%);
    border-bottom: 1px solid var(--atesto-border-color);
}

[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, var(--atesto-bg-tertiary) 0%, var(--atesto-bg-body) 100%);
}

.hero-icon {
    color: var(--atesto-accent);
    opacity: 0.15;
}

[data-theme="dark"] .hero-icon {
    opacity: 0.5;
}

/* ==========================================================================
   Trust indicators section
   ========================================================================== */

.trust-indicators {
    background-color: var(--atesto-bg-secondary);
    border-bottom: 1px solid var(--atesto-border-color);
}

/* ==========================================================================
   Feature Cards
   ========================================================================== */

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--atesto-accent) 0%, var(--atesto-primary) 100%);
    color: #ffffff;
}

.feature-icon .bi {
    font-size: 2rem;
}

/* ==========================================================================
   Accent backgrounds
   ========================================================================== */

.bg-accent-subtle {
    background-color: rgba(49, 130, 206, 0.08);
}

[data-theme="dark"] .bg-accent-subtle {
    background-color: rgba(66, 153, 225, 0.15);
}

/* Badge text color fix for dark mode */
[data-theme="dark"] .bg-accent-subtle.text-primary {
    color: var(--atesto-accent) !important;
}

/* ==========================================================================
   Border overrides for dark mode
   ========================================================================== */

[data-theme="dark"] .border-bottom {
    border-color: var(--atesto-border-color) !important;
}

/* ==========================================================================
   Table overrides for dark mode
   ========================================================================== */

[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--atesto-text-primary);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: var(--atesto-text-primary);
    color: var(--atesto-text-primary);
}

/* ==========================================================================
   Accordion overrides for dark mode
   ========================================================================== */

[data-theme="dark"] .accordion-item {
    background-color: var(--atesto-bg-body);
    border-color: var(--atesto-border-color);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--atesto-bg-body);
    color: var(--atesto-text-primary);
    box-shadow: none !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--atesto-bg-tertiary);
    color: var(--atesto-text-primary);
    border-bottom: 1px solid var(--atesto-border-color);
}

[data-theme="dark"] .accordion-button:focus {
    box-shadow: none !important;
    border-color: var(--atesto-border-color);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

[data-theme="dark"] .accordion-body {
    background-color: var(--atesto-bg-body);
    color: var(--atesto-text-secondary);
}

[data-theme="dark"] .accordion-body p,
[data-theme="dark"] .accordion-body li,
[data-theme="dark"] .accordion-body ul,
[data-theme="dark"] .accordion-body ol {
    color: var(--atesto-text-secondary);
}

/* ==========================================================================
   Input group overrides for dark mode
   ========================================================================== */

[data-theme="dark"] .input-group-text {
    background-color: var(--atesto-accent);
    border-color: var(--atesto-accent);
    color: #ffffff;
}

/* ==========================================================================
   Pagination overrides for dark mode
   ========================================================================== */

[data-theme="dark"] .page-link {
    background-color: var(--atesto-bg-card);
    border-color: var(--atesto-border-color);
    color: var(--atesto-text-primary);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--atesto-bg-tertiary);
    border-color: var(--atesto-border-color);
    color: var(--atesto-text-primary);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--atesto-accent);
    border-color: var(--atesto-accent);
    color: #ffffff;
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--atesto-bg-secondary);
    border-color: var(--atesto-border-color);
    color: var(--atesto-text-muted);
}

/* ==========================================================================
   Badge overrides for dark mode (brighter text)
   ========================================================================== */

[data-theme="dark"] .badge.bg-success {
    background-color: var(--atesto-success) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-warning {
    background-color: var(--atesto-warning) !important;
    color: #1a202c !important;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: var(--atesto-danger) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--atesto-bg-tertiary) !important;
    color: var(--atesto-text-primary) !important;
}

/* ==========================================================================
   Form check/switch overrides for dark mode
   ========================================================================== */

[data-theme="dark"] .form-check-label {
    color: var(--atesto-text-primary);
}

[data-theme="dark"] .form-check-input {
    background-color: var(--atesto-bg-tertiary);
    border-color: var(--atesto-border-color);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--atesto-accent);
    border-color: var(--atesto-accent);
}

[data-theme="dark"] .form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a0aec0'/%3e%3c/svg%3e");
}

[data-theme="dark"] .form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ==========================================================================
   Navbar mobile improvements
   ========================================================================== */

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
    padding: 0.375rem 0.625rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile menu styling */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: var(--atesto-bg-navbar);
        margin-top: 0.5rem;
        padding: 1rem;
        border-radius: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-nav .nav-item {
        margin-bottom: 0.25rem;
    }

    .navbar-nav .nav-link {
        padding: 0.625rem 0.75rem;
        border-radius: 0.375rem;
    }

    .navbar-nav .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .navbar-nav .theme-toggle {
        margin-top: 0.5rem;
        width: 100%;
        justify-content: center;
    }
}

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

@media (max-width: 767.98px) {
    .theme-toggle {
        padding: 0.25rem 0.5rem;
    }
}

/* ==========================================================================
   Footer links
   ========================================================================== */

.footer-link {
    color: var(--atesto-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color var(--atesto-transition-fast);
}

.footer-link:hover {
    color: var(--atesto-accent);
}

.footer-link i {
    opacity: 0.7;
}

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--atesto-bg-card);
    border-top: 1px solid var(--atesto-border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding: 1rem 0;
    z-index: 1050;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

.cookie-banner[aria-hidden="false"] {
    transform: translateY(0);
}

.cookie-banner-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-banner-text {
    flex: 1;
    min-width: 280px;
}

.cookie-banner-text h2 {
    color: var(--atesto-text-primary);
}

.cookie-banner-text p {
    color: var(--atesto-text-muted);
    margin-bottom: 0;
}

.cookie-banner-text a {
    color: var(--atesto-accent);
}

.cookie-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .cookie-banner-content {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner-actions {
        flex-direction: column;
    }

    .cookie-banner-actions .btn {
        width: 100%;
    }
}

/* Dark mode adjustments for cookie banner */
[data-theme="dark"] .cookie-banner {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Breadcrumb overrides for dark mode
   ========================================================================== */

[data-theme="dark"] .breadcrumb {
    --bs-breadcrumb-divider-color: var(--atesto-text-muted);
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--atesto-accent);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--atesto-text-muted);
}

/* ==========================================================================
   Trust badges (footer)
   ========================================================================== */

.badge-trust {
    background-color: var(--atesto-bg-tertiary);
    color: var(--atesto-text-secondary);
    font-weight: 500;
}

[data-theme="dark"] .badge-trust {
    background-color: var(--atesto-bg-tertiary);
    color: var(--atesto-text-primary);
}

/* ==========================================================================
   Legal pages - card text visibility in dark mode
   ========================================================================== */

[data-theme="dark"] .card-body p,
[data-theme="dark"] .card-body li,
[data-theme="dark"] .card-body ul,
[data-theme="dark"] .card-body ol,
[data-theme="dark"] .card-body dl,
[data-theme="dark"] .card-body dt {
    color: var(--atesto-text-secondary);
}

[data-theme="dark"] .card-body h2,
[data-theme="dark"] .card-body h3,
[data-theme="dark"] .card-body h4,
[data-theme="dark"] .card-body strong,
[data-theme="dark"] .card-body dd {
    color: var(--atesto-text-primary);
}

/* Table in dark mode */
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    color: var(--atesto-text-secondary);
    border-color: var(--atesto-border-color);
}

[data-theme="dark"] .table thead th {
    color: var(--atesto-text-primary);
}

/* ==========================================================================
   Technology trust icons in about page (dark mode)
   ========================================================================== */

[data-theme="dark"] .rounded-circle.bg-light {
    background-color: var(--atesto-bg-tertiary) !important;
}

[data-theme="dark"] .rounded-circle.bg-light i {
    color: var(--atesto-accent) !important;
}

/* ==========================================================================
   Admin sidebar
   ========================================================================== */

.admin-sidebar__title {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--atesto-text-muted);
}

.admin-sidebar__link {
    color: var(--atesto-text-primary);
    transition: background-color var(--atesto-transition-fast), color var(--atesto-transition-fast);
}

.admin-sidebar__link:hover,
.admin-sidebar__link:focus-visible {
    background-color: var(--atesto-bg-secondary);
    color: var(--atesto-accent);
}

.admin-sidebar__link--active {
    /* Use a tinted accent so the highlight is visible in both themes
       without depending on Bootstrap's bg-primary-subtle, which only
       reacts to data-bs-theme. */
    background-color: rgba(49, 130, 206, 0.16);
    color: var(--atesto-accent);
}

.admin-sidebar__link--active:hover,
.admin-sidebar__link--active:focus-visible {
    background-color: rgba(49, 130, 206, 0.24);
}

[data-theme="dark"] .admin-sidebar__link--active {
    background-color: rgba(66, 153, 225, 0.22);
}

[data-theme="dark"] .admin-sidebar__link--active:hover,
[data-theme="dark"] .admin-sidebar__link--active:focus-visible {
    background-color: rgba(66, 153, 225, 0.32);
}

/* Numeric "pill" used in admin lists for counts (e.g. certifications per
   user). Stays legible in both themes by using --atesto-* tokens instead
   of Bootstrap's bg-light / text-dark utilities. */
.admin-count-badge {
    display: inline-block;
    padding: 0.25em 0.55em;
    border-radius: 999px;
    background-color: var(--atesto-bg-tertiary);
    color: var(--atesto-text-primary);
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
}

/* Date inputs in the admin filters keep the native browser date picker
   but inherit the project's color tokens so the value and the calendar
   indicator stay readable in both themes. */
.admin-date-input {
    color: var(--atesto-text-primary);
    background-color: var(--atesto-bg-card);
}

.admin-date-input::placeholder {
    color: var(--atesto-text-muted);
}

/* Replace the native WebKit calendar indicator with a themed SVG so we
   have full control over color in both themes. The native indicator's
   color is not consistently styleable across browsers — Chrome relies on
   color-scheme + accent-color, Safari on system theme, Firefox does not
   expose ::-webkit-calendar-picker-indicator at all. Using a background
   image bypasses those quirks.
   The native indicator is kept fully transparent but stretched over the
   icon's hit area so clicking the visible icon still opens the date
   picker (the click handler lives in the indicator pseudo-element). */
.admin-date-input::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    width: 2.25rem;
    height: 100%;
}

.admin-date-input {
    position: relative;
}

.admin-date-input {
    /* Bootstrap icons "calendar-event" rendered as SVG, color taken from
       --atesto-text-primary at runtime is not portable inside a data URL,
       so we ship two static SVGs (dark for light mode, light for dark
       mode) and switch them via [data-theme]. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231a202c' viewBox='0 0 16 16'><path d='M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z'/><path d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
    padding-right: 2.25rem;
}

[data-theme="dark"] .admin-date-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f7fafc' viewBox='0 0 16 16'><path d='M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z'/><path d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/></svg>");
}