/* Admin theme tokens. Components consume these semantic values in both modes. */
:root,
[data-theme="light"] {
    --ui-nav-surface: #0d1017;
    --ui-nav-text: #8da8c8;
    --ui-nav-muted: #8da8c8;
    --ui-nav-border: #1f2d3d;
    --ui-nav-hover: #161a2e;
    --ui-nav-marker: #6a76ff;
    color-scheme: light;
    --ui-canvas: #f4f6fb;
    --ui-nav-active-bg: #191d37;
    --ui-nav-active-text: #a5acff;
    --ui-surface: #ffffff;
    --ui-surface-raised: #ffffff;
    --ui-surface-muted: #eef1f8;
    --ui-input: #ffffff;
    --ui-text: #172033;
    --ui-text-soft: #475569;
    --ui-text-muted: #64748b;
    --ui-border: #dbe3ee;
    --ui-brand: #4e5ae0;
    --ui-brand-hover: #3f4ac6;
    --ui-focus: rgba(78, 90, 224, .24);
    --ui-hover: rgba(78, 90, 224, .08);
    --ui-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    --ui-success: #15803d;
    --ui-danger: #b91c1c;
    --ui-warning: #a16207;
    --ui-info: #0369a1;
    --primary-h: 235;
    --primary-s: 70%;
    --primary-l: 59%;
}

[data-theme="dark"] {
    /* LaravelMail dark palette: bg-void/base/raised/overlay, accent #6470ff */
    --ui-nav-surface: #0d1017;
    --ui-nav-text: #8da8c8;
    --ui-nav-muted: #8da8c8;
    --ui-nav-border: #1f2d3d;
    --ui-nav-hover: #161a2e;
    --ui-nav-marker: #6a76ff;
    color-scheme: dark;
    --ui-canvas: #090b10;
    --ui-nav-active-bg: #191d37;
    --ui-nav-active-text: #a5acff;
    --ui-surface: #121824;
    --ui-surface-raised: #18202e;
    --ui-surface-muted: #1e2a3a;
    --ui-input: #0d1017;
    --ui-text: #e8f0fb;
    --ui-text-soft: #b8c9de;
    --ui-text-muted: #8da8c8;
    --ui-border: #1f2d3d;
    --ui-brand: #6470ff;
    --ui-brand-hover: #7a84ff;
    --ui-focus: rgba(100, 112, 255, .35);
    --ui-hover: rgba(100, 112, 255, .1);
    --ui-shadow: 0 16px 48px rgba(0, 0, 0, .45);
    --ui-success: #10d98e;
    --ui-danger: #fb7185;
    --ui-warning: #f59e0b;
    --ui-info: #22d3ee;
    --primary-h: 235;
    --primary-s: 100%;
    --primary-l: 70%;
}

html, body, .page-wrapper, .body-wrapper, .bodywrapper__inner {
    background: var(--ui-canvas) !important;
    color: var(--ui-text);
}

body, .card, .form-control, .form-select, .dropdown-menu, .modal-content,
.table, .btn, .alert, .badge, .sidebar-menu-item > a {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion: reduce) {
    body, .card, .form-control, .form-select, .dropdown-menu, .modal-content,
    .table, .btn, .alert, .badge, .sidebar-menu-item > a { transition: none; }
}

.card, .card.bg--white, .bg--white, .modal-content, .dropdown-menu,
.list-group-item, .dashboard-widget--card, .add__account {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

.card, .dropdown-menu, .modal-content, .dashboard-widget--card { box-shadow: var(--ui-shadow); }
.card-header, .card-footer, .dropdown-menu__header, .dropdown-menu__footer {
    background: var(--ui-surface-muted) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

h1, h2, h3, h4, h5, h6, .card-title, .form-label, label,
.navbar-user__name, .notifi__title, .dropdown-menu__caption { color: var(--ui-text) !important; }
p, .text-muted, .form-text, small, .time { color: var(--ui-text-muted) !important; }
a { color: var(--ui-brand); }
a:hover { color: var(--ui-brand-hover); }

.form-control, .form-select, .select2-selection, .input-group-text {
    background: var(--ui-input) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--ui-text-muted) !important; opacity: 1; }
.form-control:focus, .form-select:focus, button:focus-visible, a:focus-visible {
    border-color: var(--ui-brand) !important;
    box-shadow: 0 0 0 .2rem var(--ui-focus) !important;
    outline: 0;
}
.form-control:disabled, .form-select:disabled, .btn:disabled {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text-muted) !important;
    opacity: .72;
}
.invalid-feedback, .text--danger { color: var(--ui-danger) !important; }
.valid-feedback, .text--success { color: var(--ui-success) !important; }

.table {
    --bs-table-bg: var(--ui-surface);
    --bs-table-color: var(--ui-text);
    --bs-table-border-color: var(--ui-border);
    --bs-table-hover-bg: var(--ui-hover);
    --bs-table-hover-color: var(--ui-text);
    color: var(--ui-text) !important;
}
.table thead th { background: var(--ui-surface-muted) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
.table tbody td, .table tbody tr { background: transparent !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }

.navbar-wrapper, .breadcrumb-wrapper {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
.navbar-wrapper .btn, .navbar-wrapper button { color: var(--ui-text-soft) !important; }
.navbar-wrapper .btn:hover, .navbar-wrapper button:hover { color: var(--ui-brand) !important; background: var(--ui-hover) !important; }
.navbar-search-field { background: var(--ui-input) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
.search-list { background: var(--ui-surface-raised) !important; border: 1px solid var(--ui-border); }
.search-list li a { color: var(--ui-text-soft) !important; }
.search-list li a:hover { background: var(--ui-hover) !important; color: var(--ui-text) !important; }

/* Flat navigation: no canvas cutouts, pill caps or decorative icon shadows. */
.sidebar { background: var(--ui-nav-surface) !important; border-right: 1px solid var(--ui-nav-border); }
.sidebar__logo, .sidebar-submenu { background: var(--ui-nav-surface) !important; }
.sidebar__logo { border-bottom: 1px solid var(--ui-nav-border); }
.sidebar-menu-item > a { color: var(--ui-nav-text) !important; }
.sidebar-menu-item > a .menu-title, .sidebar-menu-item > a .menu-icon { color: inherit !important; }
.sidebar .menu-icon { text-shadow: none !important; }
/* Fixed icon box so labels line up whatever the glyph width (:where keeps submenu icon rules winning). */
.sidebar :where(.sidebar-menu-item) > a .menu-icon { flex: 0 0 24px; width: 24px; display: inline-flex; align-items: center; justify-content: center; }
.sidebar-menu-item > a:hover { background: var(--ui-nav-hover) !important; }
.sidebar-menu-item.active > a, .sidebar-menu-item > a.side-menu--open {
    background: var(--ui-nav-active-bg) !important;
    border-left-color: var(--ui-nav-marker) !important;
    color: var(--ui-nav-active-text) !important;
}
/* Expanded sections frame the selected child without competing with it. */
.sidebar-menu-item.sidebar-dropdown > a.side-menu--open {
    background: var(--ui-nav-hover) !important;
    color: var(--ui-nav-text) !important;
}
.sidebar-submenu .sidebar-menu-item > a { color: var(--ui-nav-muted) !important; }
.sidebar-submenu .sidebar-menu-item.active > a { color: var(--ui-nav-active-text) !important; }
.sidebar .sidebar-menu-item.active { background: transparent !important; }

.btn--base, .btn--primary { background: var(--ui-brand) !important; border-color: var(--ui-brand) !important; color: #07111f !important; }
[data-theme="light"] .btn--base, [data-theme="light"] .btn--primary { color: #ffffff !important; }
.btn--base:hover, .btn--primary:hover { background: var(--ui-brand-hover) !important; border-color: var(--ui-brand-hover) !important; }
.btn--outline-base { color: var(--ui-brand) !important; border-color: var(--ui-brand) !important; background: transparent !important; }
.btn--outline-base:hover { color: var(--ui-surface) !important; background: var(--ui-brand) !important; }

.badge--success { background: color-mix(in srgb, var(--ui-success) 16%, transparent) !important; color: var(--ui-success) !important; border: 1px solid color-mix(in srgb, var(--ui-success) 35%, transparent); }
.badge--danger { background: color-mix(in srgb, var(--ui-danger) 16%, transparent) !important; color: var(--ui-danger) !important; border: 1px solid color-mix(in srgb, var(--ui-danger) 35%, transparent); }
.badge--warning { background: color-mix(in srgb, var(--ui-warning) 16%, transparent) !important; color: var(--ui-warning) !important; }
.alert { border-color: var(--ui-border) !important; color: var(--ui-text) !important; }

.pagination {
    --bs-pagination-bg: var(--ui-surface);
    --bs-pagination-border-color: var(--ui-border);
    --bs-pagination-color: var(--ui-text-soft);
    --bs-pagination-hover-bg: var(--ui-hover);
    --bs-pagination-hover-color: var(--ui-text);
    --bs-pagination-active-bg: var(--ui-brand);
    --bs-pagination-active-border-color: var(--ui-brand);
}

.dashboard-widget--card:hover, .add__account:hover { border-color: var(--ui-brand) !important; transform: translateY(-2px); }
.dashboard-widget__icon { background: var(--ui-surface-muted) !important; color: var(--ui-brand) !important; }
.dashboard-widget__content .title { color: var(--ui-text-muted) !important; }
.dashboard-widget__content .number, .dashboard-card-icon { color: var(--ui-text) !important; }
.general-navigate--bar li a { color: var(--ui-text-soft) !important; border-radius: .6rem; }
.general-navigate--bar li a:hover { background: var(--ui-hover) !important; }
.general-navigate--bar li a.active { background: var(--ui-brand) !important; color: #fff !important; }
.general-navigate--bar li a.active h6, .general-navigate--bar li a.active i { color: #fff !important; }

.theme-toggle-btn { min-width: 2.4rem; min-height: 2.4rem; border: 1px solid var(--ui-border) !important; border-radius: .6rem; }

/* Data tables scroll horizontally on small viewports instead of clipping off-screen */
@media (max-width: 991.98px) {
    .card-body .table, .custom--card .table, table.table--responsive--lg, table.table--responsive--md {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* CKEditor inside dark forms */
[data-theme="dark"] .ck.ck-toolbar,
[data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
    background: var(--ui-surface-muted) !important; /* admin.css pins white/efefef with !important */
    border-color: var(--ui-border);
}
[data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable {
    background: var(--ui-input) !important;
    color: var(--ui-text);
    border-color: var(--ui-border);
    min-height: 180px;
}
[data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable.ck-focused {
    border-color: var(--ui-brand);
    box-shadow: 0 0 0 3px var(--ui-focus);
}
[data-theme="dark"] .ck.ck-button:not(.ck-disabled):hover,
[data-theme="dark"] .ck.ck-button.ck-on {
    background: var(--ui-hover);
    color: var(--ui-text);
}
[data-theme="dark"] .ck.ck-button, [data-theme="dark"] .ck.ck-toolbar .ck.ck-button {
    background: transparent;
    color: var(--ui-text);
}

/* CKEditor theme variables: the .ck rules above lose specificity races with the
   editor's own injected stylesheet; driving the --ck-color-* tokens themes it
   from the inside regardless of load order. */
[data-theme="dark"] .ck.ck-editor {
    --ck-color-base: var(--ui-input);
    --ck-color-text: var(--ui-text);
    --ck-color-toolbar-background: var(--ui-surface-muted);
    --ck-color-toolbar-border: var(--ui-border);
    --ck-color-border: var(--ui-border);
    --ck-color-focus-border: var(--ui-brand);
    --ck-color-button-default-hover-background: var(--ui-hover);
    --ck-color-button-default-active-background: var(--ui-hover);
    --ck-color-button-on-background: var(--ui-hover);
    --ck-color-button-on-active-background: var(--ui-hover);
    --ck-color-split-button-hover-background: var(--ui-hover);
    --ck-color-list-background: var(--ui-surface);
    --ck-color-list-text: var(--ui-text);
    --ck-color-list-button-hover-background: var(--ui-hover);
    --ck-color-dropdown-panel-background: var(--ui-surface);
    --ck-color-dropdown-panel-border: var(--ui-border);
    --ck-color-input-background: var(--ui-input);
    --ck-color-input-text: var(--ui-text);
    --ck-color-input-border: var(--ui-border);
}

/* Destructive actions follow the theme danger token */
.btn--danger { background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; color: #ffffff !important; }
[data-theme="dark"] .btn--danger { color: #07111f !important; }
.btn--danger:hover { filter: brightness(1.1); }

/* Profile initials avatar fallback (replaces the 300x300 placeholder) */
.profile__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6470ff, #4e5ae0);
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Native file input on the account profile is hidden; the avatar label is the trigger */
#profile__change { display: none; }
.profile__upload label { cursor: pointer; position: relative; display: inline-block; }
.profile__upload label .fa-image {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ui-brand);
    color: #fff;
}

/* Inline code follows theme tokens (Bootstrap default is pink) */
code { color: var(--ui-brand); background: var(--ui-surface-muted); padding: 2px 8px; border-radius: 6px; }

/* Scheduled-posts calendar: stay inside the card, follow theme tokens */
#calendar { max-width: 100%; overflow-x: auto; }
#calendar .fc-theme-standard td, #calendar .fc-theme-standard th { border-color: var(--ui-border); }

/* Mobile topbar: collapse the inline search (the responsive search button
   remains) and tighten action spacing so icons stop crowding/wrapping */
@media (max-width: 767.98px) {
    .navbar-wrapper .navbar-search { display: none; }
    .navbar__action-list { gap: 2px !important; }
    .navbar__action-list > li { margin-inline-start: 2px !important; }
    .navbar__action-list .btn-sm { padding: 4px 7px; }
    .navbar-wrapper .header-favicon--wrap { display: none; }
}

/* Account dashboard stat cards: brand-tinted icon chips */
.dc__account > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(124, 58, 237, .14);
    color: var(--ui-brand);
    font-size: 20px;
}

/* Visual fix: equal-height platform cards with pinned Connect button (Select Platform page) */
.add__account {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.add__account__btn {
    margin-top: auto;
}

/* ============================================================
   UI KIT ALIGNMENT (ui.laravelcompany.com design language)
   Metrics pass: typography, spacing, radii, component shapes.
   Colors continue to come from the --ui-* token sets above.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --body-font: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --kit-radius: 16px;
    --kit-radius-sm: 8px;
    --kit-pad: 24px;
}

body, h1, h2, h3, h4, h5, h6, .btn, .form-control, .form-select,
.sidebar-menu-item > a, .table, .dropdown-menu, .modal-content, .badge {
    font-family: var(--body-font) !important;
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -0.01em; }

/* --- Cards & panels --- */
.card, .modal-content, .custom--card {
    border-radius: var(--kit-radius) !important;
    border-width: 1px !important;
}
.card .card-body, .custom--card .card-body { padding: var(--kit-pad); }
.card-header, .card-footer { padding: 16px var(--kit-pad); }
.card-header:first-child { border-radius: var(--kit-radius) var(--kit-radius) 0 0; }

/* --- Data tables (kit: uppercase micro headers, airy rows) --- */
.table thead th {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-text-muted) !important;
    padding: 12px 16px !important;
    border-bottom-width: 1px !important;
    white-space: nowrap;
}
.table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle;
    font-size: 14px;
}
.table tbody tr:hover { background: var(--ui-hover) !important; }
.table > :not(caption) > * > * { box-shadow: none; }

/* --- Buttons (kit: 8px radius, confident weight) --- */
.btn {
    border-radius: var(--kit-radius-sm) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 9px 18px;
    line-height: 1.45;
}
.btn--sm, .btn.btn-sm { padding: 6px 12px !important; font-size: 13px !important; }
.btn i + span, .btn span + i { margin-inline-start: 6px; }

/* --- Forms (kit: small strong labels, 44px inputs) --- */
.form-label, label:not(.form-check-label) {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 6px;
    color: var(--ui-text-soft) !important;
}
.form-control, .form-select, .select2-selection {
    border-radius: var(--kit-radius-sm) !important;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px !important;
}
textarea.form-control { min-height: 110px; }
.form-control:focus, .form-select:focus { border-width: 1px !important; }

/* --- Badges & status pills --- */
.badge, .badge--success, .badge--danger, .badge--warning, .badge--info, .badge--primary {
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* --- Sidebar: flat rows, stable marker space and one child indent. --- */
.sidebar-menu-item > a {
    border-radius: var(--kit-radius-sm) !important;
    margin: 2px 10px;
    padding: 10px 14px !important;
    min-height: 44px;
    border-left: 2px solid transparent !important;
    flex-wrap: nowrap;
    gap: 0;
}
.sidebar .sidebar-dropdown > a { padding-right: 34px !important; }
.sidebar .sidebar-dropdown > a::before {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-nav-muted);
    font-size: 12px;
}
.sidebar .sidebar-dropdown > a.side-menu--open::before { transform: translateY(-50%) rotate(90deg); }
.sidebar .sidebar-submenu { padding: 0 0 6px; }
.sidebar-submenu .sidebar-menu-item > a { padding: 8px 14px 8px 34px !important; }
.sidebar .sidebar-submenu .menu-icon { flex: 0 0 16px; margin-right: 8px; }

/* --- Dropdowns, modals, pagination --- */
.dropdown-menu { border-radius: 10px !important; padding: 6px; }
.dropdown-menu .dropdown-item { border-radius: 6px; padding: 8px 12px; }
.pagination .page-link { border-radius: var(--kit-radius-sm) !important; margin: 0 2px; }

/* --- Page rhythm: consistent vertical gaps --- */
.bodywrapper__inner { padding: 24px !important; }
.bodywrapper__inner > .row + .row { margin-top: 24px; }

/* --- Widget stat cards (ui.laravelcompany.com reference: big number, right circle icon) --- */
.dashboard-widget--card { border-radius: var(--kit-radius) !important; padding: 24px; flex-wrap: nowrap; gap: 12px; }
.dashboard-widget__content { order: 1; min-width: 0; }
.dashboard-widget__icon { order: 2; margin-left: auto; border-radius: 50% !important; width: 52px !important; height: 52px !important; }
.dashboard-widget__content .title { font-size: 0.8125rem !important; font-weight: 500; }
.dashboard-widget__content .number { font-size: 1.625rem !important; font-weight: 700; line-height: 1.2; margin-top: 2px; }

/* Account overview stat cards: the decorative .dc__img star is only styled in
   post-composer.css, which this page does not load. Unstyled, Bootstrap's
   .card flex column stretches it to the full card width (the giant zigzag).
   Pin it back to a small corner ornament everywhere. */
.dashboard__card {
    position: relative;
    overflow: hidden;
}
.dashboard__card .dc__img {
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: auto;
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

/* Stat-card rhythm: the card had zero padding, so label+count pressed
   against the edges. Kit metric: comfortable inset with a column stack. */
.dashboard__card {
    padding: 18px 20px;
}
.dashboard__card .dc__account {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.dashboard__card .dc__account__content h4 {
    margin-bottom: 2px;
}
.dashboard__card .dc__account__content p {
    margin-bottom: 0;
}

/* Twitter/X brand chip: the seeded brand color is X's dark-mode white
   (#e7e9ea), which vanishes on light surfaces. In light theme use X's
   light-theme ink; dark theme keeps the seeded white. */
[data-theme="light"] .platform-brand-icon[aria-label="Twitter"] {
    background: rgba(15, 20, 25, 0.08) !important;
    color: #0f1419 !important;
}

/* Snapchat: brand yellow #f7f400 washes out on light surfaces the same way. */
[data-theme="light"] .platform-brand-icon[aria-label="Snapchat"] {
    background: rgba(15, 20, 25, 0.06) !important;
    color: #0f1419 !important;
}

/* Image uploader: keep placeholders/previews inside their dashed box (SEO page's
   180x60 placeholder text was overflowing the thumb wrap) */
.image-upload--container .thumb--wrap { max-width: 100%; overflow: hidden; }
.image-upload--container .image--preview { max-width: 100%; height: auto; object-fit: contain; }


/* Shared shell controls: consistent touch targets and visible keyboard focus. */
.navbar-wrapper .res-sidebar-open-btn,
.navbar__action-list > li > a,
.navbar__action-list > li > button,
.navbar__action-list > li > form > button,
.sidebar .res-sidebar-close-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.navbar__action-list > li > a,
.navbar__action-list > li > button:not(.navbar-search-responsive-btn),
.navbar__action-list > li > form > button { display: inline-flex; }
.navbar-wrapper :is(a, button, input):focus-visible,
.sidebar :is(a, button):focus-visible {
    outline: 3px solid var(--ui-brand);
    outline-offset: 3px;
}
.sidebar :is(a, button):focus-visible { outline-color: var(--ui-nav-marker); }
@media (max-width: 767.98px) {
    .navbar-wrapper { flex-wrap: nowrap; gap: 4px; }
    .navbar-wrapper .navbar__left { flex: 0 0 auto; }
    .navbar-wrapper .res-sidebar-open-btn { margin-right: 0 !important; }
    .navbar__action-list { flex-wrap: nowrap; gap: 2px !important; }
    .navbar__action-list > li { margin: 0 !important; }
    .navbar__action-list .navbar-search-responsive-btn { width: 44px; height: 44px; }
    .navbar-wrapper .navbar-search.show { display: block; }
}

/* Admin notifications must remain opaque and readable over either canvas.
   iziToast sets inline colors; these scoped overrides beat those defaults. */
:root .iziToast {
    background: var(--ui-surface-raised) !important;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: var(--ui-shadow);
}
.iziToast > .iziToast-body .iziToast-title,
.iziToast > .iziToast-body .iziToast-message,
.iziToast > .iziToast-close {
    color: var(--ui-text) !important;
}
.iziToast.iziToast-color-red .iziToast-icon { color: var(--ui-danger) !important; }
.iziToast.iziToast-color-green .iziToast-icon { color: var(--ui-success) !important; }
.iziToast.iziToast-color-orange .iziToast-icon { color: var(--ui-warning) !important; }
.iziToast.iziToast-color-blue .iziToast-icon { color: var(--ui-info) !important; }
.iziToast > .iziToast-close:focus-visible {
    outline: 3px solid var(--ui-brand);
    outline-offset: -4px;
}

/* The base stylesheet gives spans their own gray color. Labels must instead
   follow the enabled button's light/dark contrast and real disabled state. */
.post-composer-original .main-action-btn .action-text,
.post-composer-original .main-action-btn i {
    color: inherit !important;
}
.post-composer-original .main-action-btn:disabled,
.post-composer-original .main-action-btn.disabled {
    background: var(--ui-surface-muted) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-muted) !important;
    box-shadow: none !important;
    opacity: 1;
    cursor: not-allowed;
}

[data-theme="dark"] .post-composer-original .main-action-btn:not(:disabled):not(.disabled) {
    color: #07111f !important;
}

/* Some iziToast callers supply an icon without a color class. Keep a readable
   fallback, then map the actual Font Awesome status classes used by notify(). */
:root .iziToast > .iziToast-body .iziToast-icon { color: var(--ui-text) !important; }
:root .iziToast .iziToast-icon:is(.fa-times-circle, .ico-error),
:root .iziToast.iziToast-color-red .iziToast-icon { color: var(--ui-danger) !important; }
:root .iziToast .iziToast-icon:is(.fa-check-circle, .ico-success),
:root .iziToast.iziToast-color-green .iziToast-icon { color: var(--ui-success) !important; }
:root .iziToast .iziToast-icon:is(.fa-exclamation-triangle, .ico-warning),
:root .iziToast.iziToast-color-orange .iziToast-icon { color: var(--ui-warning) !important; }
:root .iziToast .iziToast-icon:is(.fa-exclamation-circle, .ico-info),
:root .iziToast.iziToast-color-blue .iziToast-icon { color: var(--ui-info) !important; }

/* The library's built-in icons are black PNGs, so color alone cannot theme
   them. Text fallbacks use currentColor when a caller omits its custom icon. */
:root .iziToast .iziToast-icon:is(.ico-error, .ico-success, .ico-warning, .ico-info, .ico-question) {
    background-image: none !important;
}
:root .iziToast .iziToast-icon.ico-error::before { content: "⊗"; }
:root .iziToast .iziToast-icon.ico-success::before { content: "✓"; }
:root .iziToast .iziToast-icon.ico-warning::before { content: "⚠"; }
:root .iziToast .iziToast-icon.ico-info::before { content: "ⓘ"; }
:root .iziToast .iziToast-icon.ico-question::before { content: "?"; }

/* Replace the library's black close PNG and legacy icon-font glyph with a
   currentColor glyph that remains visible even if icon fonts fail to load. */
:root .iziToast > .iziToast-close {
    background: none !important;
    font-family: inherit;
    font-size: 24px;
    line-height: 1;
    opacity: 1;
}
:root .iziToast > .iziToast-close::before { content: "×"; }

/* Keep Bootstrap's icon close visible against dark modal surfaces without
   changing the text-glyph close control used by toasts. */
[data-theme="dark"] .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
    min-width: 44px;
    min-height: 44px;
}

[data-theme="dark"] .modal .btn-close:focus-visible {
    outline: 2px solid var(--ui-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--ui-focus);
}

/* LaravelMail parity: one canvas top bar in dark, flush content on phones. */
[data-theme="dark"] .navbar-wrapper,
[data-theme="dark"] .breadcrumb-wrapper { background: var(--ui-canvas) !important; border-bottom: 1px solid var(--ui-border); }
@media (max-width: 575.98px) {
    .body-wrapper { padding-left: 0 !important; padding-right: 0 !important; }
    .bodywrapper__inner { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Stacked mobile tables: rows fill the card, labels stay legible in both themes. */
@media (max-width: 767.98px) {
    .table-responsive--sm .custom-data-table tbody,
    .table-responsive--sm .custom-data-table tbody tr { display: block; width: 100%; }
}
[data-label]::before { color: var(--ui-text-muted) !important; }

/* Scheduled-posts calendar: centred weekday headers, brand-matched controls. */
#calendar.fc {
    --fc-button-bg-color: var(--ui-surface-muted);
    --fc-button-border-color: var(--ui-border);
    --fc-button-text-color: var(--ui-text);
    --fc-button-hover-bg-color: var(--ui-hover);
    --fc-button-hover-border-color: var(--ui-border);
    --fc-button-active-bg-color: var(--ui-brand);
    --fc-button-active-border-color: var(--ui-brand);
    --fc-today-bg-color: var(--ui-hover);
    --fc-border-color: var(--ui-border);
    --fc-page-bg-color: var(--ui-surface);
    --fc-neutral-bg-color: var(--ui-surface-muted);
}
#calendar.fc .fc-col-header-cell { text-align: center; }
#calendar.fc .fc-col-header-cell-cushion { display: block; padding: 8px 4px; }
#calendar.fc .fc-button-primary.fc-button-active { color: #fff; }
#calendar.fc .fc-daygrid-day-number { color: var(--ui-brand); }

/* Notifications: tokenised cards and actions instead of grey-on-grey and default blue. */
.notify__item { background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: 12px; }
.notify__item.unread--notification { background: var(--ui-surface-raised) !important; border-left: 3px solid var(--ui-brand) !important; }
.btn--info { background: var(--ui-brand) !important; border-color: var(--ui-brand) !important; color: #fff !important; }
[data-theme="dark"] .btn--info { color: #07111f !important; }