/* ============================================================================
   AMI Global Theme — Layout Layer
   Sidebar · Top Bar · Footer · Main Canvas
   ========================================================================== */

/* ── Main canvas ── */
.s-main {
    background: var(--ami-canvas) !important;
}

/* ── Sidebar premium ── */
.s-sidebar {
    background: var(--sidebar-gradient) !important;
    box-shadow: 4px 0 28px rgba(var(--ami-brand-deep-rgb), 0.18) !important;
}

.s-sidebar-brand {
    background: rgba(0, 0, 0, 0.12) !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

.s-sidebar-section-label {
    color: var(--sidebar-section-color) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.s-sidebar-item.active > .s-sidebar-link {
    box-shadow: inset 3px 0 0 var(--sidebar-section-color) !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

html[lang^="ar"] .s-sidebar-item.active > .s-sidebar-link,
[dir="rtl"] .s-sidebar-item.active > .s-sidebar-link {
    box-shadow: inset -3px 0 0 var(--sidebar-section-color) !important;
}

.s-sidebar-pinned-link.active,
.s-sidebar-pinned-link:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

.s-sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Top header bar ── */
.s-sidebar-header {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    border-bottom-color: var(--ami-border) !important;
    box-shadow: var(--ami-sh-xs) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.s-sidebar-header-link {
    color: var(--header-icon) !important;
    border-radius: var(--ami-r-sm);
    transition: color var(--ami-fast) var(--ami-ease),
                background var(--ami-fast) var(--ami-ease);
}

.s-sidebar-header-link:hover,
.s-sidebar-header #themeToggle:hover {
    color: var(--header-icon-hover) !important;
    background: rgba(var(--ami-brand-rgb), 0.08) !important;
}

html[data-bs-theme="dark"] .s-sidebar-header-link:hover,
[data-bs-theme="dark"] .s-sidebar-header-link:hover {
    background: rgba(var(--ami-brand-rgb), 0.14) !important;
}

/* Theme settings button accent */
#amiThemeSettingsBtn.s-sidebar-header-link:hover {
    color: var(--primary-color) !important;
}

/* ── Footer — single compact line (all items grouped) ── */
.main-footer.ami-footer {
    background: var(--footer-bg) !important;
    color: var(--footer-text) !important;
    border-top: 1px solid var(--footer-border) !important;
    box-shadow: 0 -1px 0 rgba(var(--ami-brand-rgb), 0.04);
    font-size: 12px !important;
    padding: 0 0.75rem !important;
    min-height: var(--footer-height) !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: start !important;
}

html[dir="rtl"] .main-footer.ami-footer,
html[lang^="ar"] .main-footer.ami-footer {
    justify-content: flex-end !important;
    text-align: end !important;
}

.main-footer.ami-footer .ami-footer__bar {
    width: auto !important;
    max-width: 100%;
    min-height: var(--footer-height);
    display: flex !important;
    align-items: center !important;
    justify-content: inherit !important;
    margin-inline: 0;
}

.ami-footer__line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.55rem;
    max-width: 100%;
    padding: 0.3rem 0.75rem;
    line-height: 1.3;
    border-radius: var(--ami-r-pill);
    background: rgba(var(--ami-brand-rgb), 0.05);
    border: 1px solid rgba(var(--ami-brand-rgb), 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ami-footer__group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.ami-footer__group--brand {
    color: var(--footer-text);
    font-weight: 500;
}

.ami-footer__group--time .fa-clock-o {
    color: var(--footer-accent);
    font-size: 0.78rem;
    opacity: 0.9;
}

.ami-footer__group--time time {
    color: var(--footer-accent);
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ami-footer__group--version .ami-footer__chip-key {
    color: var(--footer-text);
    font-size: 11px;
    font-weight: 600;
}

.ami-footer__group--version .ami-footer__chip-val {
    color: var(--footer-accent);
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ami-footer__sep {
    display: inline-block;
    width: 1px;
    height: 0.85rem;
    background: var(--ami-border-strong);
    opacity: 0.55;
    flex-shrink: 0;
}

.ami-footer__symbol {
    color: var(--footer-accent);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.ami-footer__year {
    font-weight: 600;
    color: var(--ami-text-2);
    font-variant-numeric: tabular-nums;
}

.ami-footer__dot {
    color: var(--ami-text-faint);
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.ami-footer__brand-link {
    color: var(--footer-link) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 0.02em;
    transition: color var(--ami-fast) var(--ami-ease);
}

.ami-footer__brand-link:hover {
    color: var(--primary-color) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

html[data-bs-theme="dark"] .main-footer.ami-footer,
[data-bs-theme="dark"] .main-footer.ami-footer {
    background: var(--footer-bg) !important;
    border-top-color: var(--footer-border) !important;
}

/* Legacy selectors */
html[data-bs-theme="dark"] .footer-time,
[data-bs-theme="dark"] .footer-time {
    color: inherit !important;
}

html[data-bs-theme="dark"] .footer-left a,
[data-bs-theme="dark"] .footer-left a {
    color: inherit !important;
}

@media (max-width: 720px) {
    .ami-footer__line {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 0.55rem;
        padding: 0.35rem 0.55rem;
    }

    .ami-footer__sep {
        display: none;
    }
}

/* ── User dropdown card accent ── */
.s-user-avatar {
    background: var(--ami-grad-brand) !important;
}

.s-user-card {
    border-bottom-color: var(--ami-border) !important;
}

/* ── Notification dropdown header ── */
.notification-header {
    border-bottom-color: var(--ami-border) !important;
}

.notification-header h6 {
    color: var(--ami-text) !important;
}

html[data-bs-theme="dark"] #s-sidebar.s-sidebar,
html[data-bs-theme="dark"] aside.s-sidebar {
    background: var(--sidebar-gradient) !important;
}

/* ============================================================================
   Dark mode — global lines & borders (theme tokens, not hardcoded green)
   ========================================================================== */

html[data-bs-theme="dark"],
body.dark-mode,
body.s-dark {
    --bs-border-color: var(--ami-border);
}

html[data-bs-theme="dark"] hr,
body.dark-mode hr,
[data-bs-theme="dark"] hr {
    border-color: var(--ami-divider) !important;
    opacity: 1;
}

html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start,
html[data-bs-theme="dark"] .border-end,
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom {
    border-color: var(--ami-border) !important;
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .panel,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .list-group-item,
body.dark-mode .card,
body.dark-mode .panel {
    border-color: var(--ami-border) !important;
}

html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer,
html[data-bs-theme="dark"] .table > :not(caption) > * > *,
body.dark-mode .card-header,
body.dark-mode .card-footer {
    border-color: var(--ami-border) !important;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] textarea,
body.dark-mode .form-control,
body.dark-mode .form-select {
    border-color: var(--ami-border-strong) !important;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] input:focus,
html[data-bs-theme="dark"] select:focus,
html[data-bs-theme="dark"] textarea:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    border-color: var(--ami-line-focus) !important;
    box-shadow: 0 0 0 3px var(--ami-line-focus-ring) !important;
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
body.dark-mode .select2-container--default .select2-selection--single {
    border-color: var(--ami-border-strong) !important;
}

html[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple,
body.dark-mode .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--ami-line-focus) !important;
    box-shadow: 0 0 0 3px var(--ami-line-focus-ring) !important;
}

html[data-bs-theme="dark"] .select2-dropdown,
body.dark-mode .select2-dropdown {
    border-color: var(--ami-border) !important;
}

html[data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ami-brand-600) !important;
    color: var(--ami-on-brand, #fff) !important;
}

html[data-bs-theme="dark"] .select2-results__option[aria-selected="true"],
body.dark-mode .select2-results__option[aria-selected="true"] {
    color: var(--ami-brand-400) !important;
}

/* Serenity grids & data tables */
html[data-bs-theme="dark"] .s-DataGrid .grid-container,
html[data-bs-theme="dark"] .slick-header-column,
html[data-bs-theme="dark"] .ui-widget-content,
html[data-bs-theme="dark"] .ui-jqgrid,
html[data-bs-theme="dark"] .ui-jqgrid-btable td,
html[data-bs-theme="dark"] .ui-jqgrid-htable th,
body.dark-mode .s-DataGrid .grid-container,
body.dark-mode .slick-header-column {
    border-color: var(--ami-border) !important;
}

html[data-bs-theme="dark"] .slick-row.active,
html[data-bs-theme="dark"] .slick-row:hover,
body.dark-mode .slick-row.active {
    outline-color: var(--ami-line-accent) !important;
}

/* Module dashboards — structural lines */
html[data-bs-theme="dark"] .module-dashboard-pro .stat-card,
html[data-bs-theme="dark"] .module-dashboard-pro .plans-stat-card,
html[data-bs-theme="dark"] .module-dashboard-pro .panel-card,
html[data-bs-theme="dark"] .module-dashboard-pro .chart-card,
html[data-bs-theme="dark"] .module-dashboard-pro .bg-data-table th,
html[data-bs-theme="dark"] .module-dashboard-pro .bg-data-table td,
html[data-bs-theme="dark"] .module-dashboard-pro .plans-table th,
html[data-bs-theme="dark"] .module-dashboard-pro .plans-table td,
body.dark-mode .module-dashboard-pro .stat-card,
body.dark-mode .module-dashboard-pro .panel-card {
    border-color: var(--ami-border) !important;
}

html[data-bs-theme="dark"] .module-dashboard-pro .bg-tabs,
html[data-bs-theme="dark"] .module-dashboard-pro .plans-tabs-nav,
body.dark-mode .module-dashboard-pro .bg-tabs {
    border-color: var(--ami-border) !important;
}

/* Accent lines (active tab, left rail) — follow theme brand */
html[data-bs-theme="dark"] .module-dashboard-pro .bg-tab.active,
html[data-bs-theme="dark"] .module-dashboard-pro .plans-tab-item.active,
body.dark-mode .module-dashboard-pro .bg-tab.active {
    border-color: var(--ami-line-accent) !important;
}

/* ==========================================================================
   Checkboxes & radios — global fix (text-field rules must not flatten them)
   ========================================================================== */

:root {
    --ami-check-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input[type="checkbox"],
input[type="checkbox"]:not(.form-check-input):not(.toggle-switch input) {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-height: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: none !important;
    border-radius: 0.25em;
    background-color: var(--ami-surface) !important;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 88% 88%;
    border: 1.5px solid rgba(var(--ami-brand-rgb), 0.45) !important;
}

.form-check-input[type="checkbox"]:checked,
input[type="checkbox"]:not(.form-check-input):not(.toggle-switch input):checked {
    background-color: var(--ami-brand-600) !important;
    border-color: var(--ami-brand-600) !important;
    background-image: var(--ami-check-mark) !important;
}

.form-check-input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-height: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: none !important;
    border-radius: 50%;
    accent-color: var(--ami-brand-600);
    background-color: var(--ami-surface) !important;
    border: 1.5px solid rgba(var(--ami-brand-rgb), 0.45) !important;
}

.form-check-input:focus,
input[type="checkbox"]:not(.form-check-input):not(.toggle-switch input):focus {
    border-color: rgba(var(--ami-brand-rgb), 0.55) !important;
    box-shadow: 0 0 0 3px rgba(var(--ami-brand-rgb), 0.14) !important;
    outline: none;
}

html[data-bs-theme="dark"] .form-check-input[type="checkbox"],
html[data-bs-theme="dark"] input[type="checkbox"]:not(.form-check-input):not(.toggle-switch input),
body.dark-mode .form-check-input[type="checkbox"],
body.dark-mode input[type="checkbox"]:not(.form-check-input):not(.toggle-switch input),
body.s-dark .form-check-input[type="checkbox"],
body.s-dark input[type="checkbox"]:not(.form-check-input):not(.toggle-switch input) {
    background-color: var(--ami-surface) !important;
    border-color: rgba(var(--ami-brand-rgb), 0.5) !important;
}

html[data-bs-theme="dark"] .form-check-input[type="checkbox"]:checked,
html[data-bs-theme="dark"] input[type="checkbox"]:not(.form-check-input):not(.toggle-switch input):checked,
body.dark-mode .form-check-input[type="checkbox"]:checked,
body.dark-mode input[type="checkbox"]:not(.form-check-input):not(.toggle-switch input):checked,
body.s-dark .form-check-input[type="checkbox"]:checked,
body.s-dark input[type="checkbox"]:not(.form-check-input):not(.toggle-switch input):checked {
    background-color: var(--ami-brand-500) !important;
    border-color: var(--ami-brand-500) !important;
    background-image: var(--ami-check-mark) !important;
}

html[data-bs-theme="dark"] .form-check-input[type="radio"],
body.dark-mode .form-check-input[type="radio"],
body.s-dark .form-check-input[type="radio"] {
    background-color: var(--ami-surface) !important;
    border-color: rgba(var(--ami-brand-rgb), 0.5) !important;
    accent-color: var(--ami-brand-400);
}

/* ==========================================================================
   Date / time inputs — visible picker icons (light theme; dark overrides below)
   Native indicators inherit color-scheme; without explicit styling they can
   match a light field background and disappear in light mode.
   ========================================================================== */

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    color-scheme: light;
    min-height: 2.25rem;
    padding-inline-end: 0.35rem;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
    width: 1.15rem;
    height: 1.15rem;
    margin-inline-start: 0.2rem;
    filter: invert(28%) sepia(90%) saturate(1800%) hue-rotate(195deg) brightness(0.85);
}

html[data-bs-theme="dark"] input[type="date"],
html[data-bs-theme="dark"] input[type="time"],
html[data-bs-theme="dark"] input[type="datetime-local"],
html[data-bs-theme="dark"] input[type="month"],
html[data-bs-theme="dark"] input[type="week"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="month"],
body.dark-mode input[type="week"],
body.s-dark input[type="date"],
body.s-dark input[type="time"],
body.s-dark input[type="datetime-local"],
body.s-dark input[type="month"],
body.s-dark input[type="week"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"] {
    color-scheme: dark;
}

html[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="month"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="week"]::-webkit-calendar-picker-indicator,
body.s-dark input[type="date"]::-webkit-calendar-picker-indicator,
body.s-dark input[type="time"]::-webkit-calendar-picker-indicator,
body.s-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.s-dark input[type="month"]::-webkit-calendar-picker-indicator,
body.s-dark input[type="week"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    filter: invert(0.92) brightness(1.15);
}