/**
 * Patches on top of Synto `public/admin/assets/css/style.css` (not style.min.css — minifier breaks dark selectors).
 *
 * Do NOT import Tailwind here — Synto already ships the full utility bundle.
 */

/* —— Header responsive logos (Synto bundle has invalid :is(.dark.header…) selectors) —— */
html.dark .header .responsive-logo .responsive-logo-dark {
    display: none !important;
}

html.dark .header .responsive-logo .responsive-logo-light {
    display: block !important;
}

html.light .header .responsive-logo .responsive-logo-dark {
    display: block !important;
}

html.light .header .responsive-logo .responsive-logo-light {
    display: none !important;
}

/* —— Header icon circles + Remix icons on dark header —— */
html.dark[data-header-styles='dark'] .header .header-theme-mode button,
html.dark[data-header-styles='dark'] .header .header-search button,
html.dark[data-header-styles='dark'] .header .header-fullscreen button,
html.dark[data-header-styles='dark'] .header .header-country #dropdown-flag,
html.dark[data-header-styles='dark'] .header .header-country .header-language-flag-emoji,
html.dark[data-header-styles='dark'] .header .switcher-icon button {
    background-color: rgb(0 0 0 / 0.25) !important;
    color: rgb(255 255 255) !important;
}

html.dark[data-header-styles='dark'] .header .header-nav-right button .header-icon,
html.dark[data-header-styles='dark'] .header .header-nav-right .ti-dropdown-toggle .header-icon {
    color: rgb(255 255 255) !important;
}

/* —— Dashboard footer (admin shell) —— */
html.dark .admin-dashboard-footer {
    background-color: rgb(var(--dark-bg2)) !important;
    border-top-color: rgb(255 255 255 / 0.1) !important;
}

html.light .admin-dashboard-footer {
    background-color: #fff !important;
    border-top-color: rgb(229 231 235) !important;
}

/* —— Main cards / widgets —— */
html.dark .main-content .box {
    background-color: rgb(var(--dark-bg2)) !important;
    border: 1px solid rgb(255 255 255 / 0.08) !important;
}

html.dark .main-content .box-body {
    color: rgb(226 232 240);
}

/* —— Shared theme-aware typography (legacy — prefer field-styles sectionTitleClassName etc.) —— */
html.dark .admin-text-primary {
    color: rgb(248 250 252) !important;
}

html.dark .admin-text-secondary {
    color: rgb(203 213 225) !important;
}

html.dark .admin-text-muted {
    color: rgb(148 163 184) !important;
}

html.light .admin-text-primary {
    color: rgb(30 41 59) !important;
}

html.light .admin-text-secondary {
    color: rgb(51 65 85) !important;
}

html.light .admin-text-muted {
    color: rgb(100 116 139) !important;
}

/* —— react-hot-toast host (AdminToaster portaled to body) —— */
.admin-toast-host {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 24rem;
}
.site-brand-logo {
    width: auto;
    max-height: 56px;
    object-fit: contain;
}

.app-sidebar .site-brand-logo {
    max-height: 48px;
}

.header-language-flag {
    display: block;
    height: 1.375rem;
    width: 1.375rem;
    flex-shrink: 0;
    border-radius: 9999px;
    overflow: hidden;
}

.header .header-country #dropdown-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(243 244 246) !important;
    border-color: transparent !important;
}

html.dark .header .header-country #dropdown-flag {
    background-color: rgb(var(--dark-bg)) !important;
}

html.dark[data-header-styles='dark'] .header .header-country #dropdown-flag:hover {
    background-color: rgb(0 0 0 / 0.2) !important;
}

html.light .header .header-country #dropdown-flag:hover {
    background-color: rgb(229 231 235) !important;
}

.header-language-flag-wrap {
    height: 1.375rem;
    width: 1.375rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 9999px;
}

/* React-controlled header dropdowns: Synto hides .ti-dropdown-menu until .open is set */
.header .hs-dropdown.open > .ti-dropdown-menu,
.header .hs-dropdown.open > .hs-dropdown-menu,
.header .header-profile.open > .ti-dropdown-menu,
.header .header-profile.open > .hs-dropdown-menu {
    display: block !important;
    opacity: 1 !important;
}

/* —— Admin edit modal widths (Synto defaults .ti-modal-box to max-width: 32rem) —— */
@media (min-width: 480px) {
    .ti-modal.open .ti-modal-box.admin-modal-box--sm {
        width: 100%;
        max-width: 32rem !important;
    }

    .ti-modal.open .ti-modal-box.admin-modal-box--md {
        width: 100%;
        max-width: 48rem !important;
    }

    .ti-modal.open .ti-modal-box.admin-modal-box--lg {
        width: 100%;
        max-width: 56rem !important;
    }
}

.language-switcher-item--active {
    background-color: rgb(241 245 249) !important;
    color: rgb(15 23 42) !important;
}

.language-switcher-item--active p {
    color: inherit !important;
}

html.dark .language-switcher-item--active {
    background-color: rgb(var(--color-primary) / 0.28) !important;
    color: rgb(255 255 255) !important;
}

html.dark .language-switcher-item--active:hover {
    background-color: rgb(var(--color-primary) / 0.35) !important;
    color: rgb(255 255 255) !important;
}

.admin-user-avatar-initials {
    background-color: rgb(229 231 235);
    color: rgb(55 65 81);
}

html.dark .admin-user-avatar-initials:not(.admin-user-avatar-initials--on-primary) {
    background-color: rgb(var(--color-primary)) !important;
    color: rgb(255 255 255) !important;
}

html.dark[data-header-styles='dark'] .header .admin-user-avatar-initials:not(.admin-user-avatar-initials--on-primary) {
    background-color: rgb(var(--color-primary)) !important;
    color: rgb(255 255 255) !important;
    --tw-ring-color: rgb(255 255 255 / 0.15) !important;
}

.admin-user-avatar-initials--on-primary {
    background-color: rgb(0 0 0 / 0.28) !important;
    color: rgb(255 255 255) !important;
}

/* —— DataTable: ellipsis in fixed-layout cells (Synto td uses whitespace-nowrap) —— */
.main-content .ti-custom-table.table-fixed {
    table-layout: fixed !important;
    width: 100% !important;
}

.main-content .ti-custom-table.table-fixed td.admin-table-cell--truncate {
    max-width: 0 !important;
    overflow: hidden !important;
}

.main-content .ti-custom-table.table-fixed td.admin-table-cell--truncate > .admin-table-cell-truncate {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}