/* TailAdmin-inspired application theme
   Source inspiration: TailAdmin free dashboard template (MIT/ISC), adapted as local CSS tokens.
   This file intentionally sits last in the cascade and normalizes the app UI without changing runtime logic. */

:root {
    color-scheme: light;
    --app-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    --app-mono-font-family: "Consolas", "Monaco", "Courier New", monospace;

    --ta-white: #ffffff;
    --ta-black: #101828;
    --ta-gray-25: #fcfcfd;
    --ta-gray-50: #f9fafb;
    --ta-gray-100: #f2f4f7;
    --ta-gray-200: #e4e7ec;
    --ta-gray-300: #d0d5dd;
    --ta-gray-400: #98a2b3;
    --ta-gray-500: #667085;
    --ta-gray-600: #475467;
    --ta-gray-700: #344054;
    --ta-gray-800: #1d2939;
    --ta-gray-900: #101828;
    --ta-brand-25: #f5f8ff;
    --ta-brand-50: #eef4ff;
    --ta-brand-100: #e0eaff;
    --ta-brand-500: var(--opendw-primary, #0f62fe);
    --ta-brand-600: var(--opendw-primary-hover, #0353e9);
    --ta-brand-700: #0043ce;
    --ta-success-50: #ecfdf3;
    --ta-success-500: #12b76a;
    --ta-success-700: #027a48;
    --ta-warning-50: #fffaeb;
    --ta-warning-500: #f79009;
    --ta-warning-700: #b54708;
    --ta-error-50: #fef3f2;
    --ta-error-500: #f04438;
    --ta-error-700: #b42318;

    --primary-color: var(--ta-brand-500);
    --primary-dark: var(--ta-brand-600);
    --secondary-color: var(--ta-gray-100);
    --danger-color: var(--ta-error-500);
    --success-color: var(--ta-success-500);
    --warning-color: var(--ta-warning-500);
    --text-primary: var(--ta-gray-900);
    --text-secondary: var(--ta-gray-600);
    --text-tertiary: var(--ta-gray-500);
    --bg-primary: var(--ta-gray-50);
    --bg-secondary: var(--ta-gray-100);
    --bg-card: var(--ta-white);
    --bg-hover: var(--ta-gray-100);
    --header-bg: var(--ta-white);
    --border-color: var(--ta-gray-200);
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
    --transition: all 0.18s ease;

    --widget-surface: var(--ta-white);
    --widget-surface-soft: var(--ta-gray-50);
    --widget-surface-elevated: var(--ta-white);
    --widget-surface-muted: var(--ta-gray-100);
    --widget-surface-subtle: var(--ta-gray-50);
    --widget-border-color: var(--ta-gray-200);
    --widget-border-soft: var(--ta-gray-200);
    --widget-shadow: var(--shadow-sm);
    --widget-shadow-soft: var(--shadow-xs);
    --widget-item-shadow: none;
    --widget-text-primary: var(--ta-gray-900);
    --widget-text-secondary: var(--ta-gray-600);
    --widget-text-muted: var(--ta-gray-500);
    --widget-text: var(--widget-text-primary);
    --widget-border: var(--widget-border-color);
    --widget-chip-bg: var(--ta-gray-100);
    --widget-chip-text: var(--ta-gray-700);
    --widget-input-bg: var(--ta-white);
    --widget-input-border: var(--ta-gray-300);
    --widget-scrollbar: rgba(102, 112, 133, 0.42);
    --widget-scrollbar-hover: rgba(71, 84, 103, 0.66);
    --widget-scrollbar-track: rgba(228, 231, 236, 0.7);
    --widget-accent-soft: rgba(70, 95, 255, 0.1);
    --widget-success-soft: var(--ta-success-50);
    --widget-warning-soft: var(--ta-warning-50);
    --widget-danger-soft: var(--ta-error-50);
    --widget-note-bg: var(--ta-gray-50);
    --widget-note-border: var(--ta-gray-200);
}

html {
    font-size: 16px;
}

body {
    font-family: var(--app-font-family);
    background: var(--ta-gray-50);
    color: var(--ta-gray-900);
    letter-spacing: 0;
}

body::before {
    display: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* Common controls */
.btn,
.admin-shell-btn,
.content-tab-btn,
.category-btn,
.store-tab,
.filter-btn,
.action-btn,
.icon-btn,
.close-btn,
.widget-btn,
.header-icon-btn,
.notification-btn,
.user-avatar-btn {
    border-radius: 10px;
    transition: var(--transition);
}

.btn,
.admin-shell-btn,
.content-tab-btn,
.category-btn,
.store-tab,
.filter-btn {
    min-height: 40px;
    padding: 0.62rem 0.95rem;
    border: 1px solid var(--ta-gray-300);
    background: var(--ta-white);
    color: var(--ta-gray-700);
    box-shadow: var(--shadow-xs);
    font-size: 0.875rem;
    font-weight: 600;
}

.btn:hover,
.admin-shell-btn:hover,
.content-tab-btn:hover,
.category-btn:hover,
.store-tab:hover,
.filter-btn:hover {
    border-color: var(--ta-brand-500);
    color: var(--ta-brand-600);
    background: var(--ta-brand-25);
    transform: none;
}

.btn-primary,
.admin-shell-btn-primary,
.content-tab-btn.tab-active,
.category-btn.active,
.store-tab.active,
.filter-btn.active {
    border-color: var(--ta-brand-500);
    background: var(--ta-brand-500);
    color: #fff;
    box-shadow: 0 1px 2px rgba(70, 95, 255, 0.24);
}

.btn-primary:hover,
.admin-shell-btn-primary:hover,
.content-tab-btn.tab-active:hover,
.category-btn.active:hover,
.store-tab.active:hover,
.filter-btn.active:hover {
    border-color: var(--ta-brand-600);
    background: var(--ta-brand-600);
    color: #fff;
    box-shadow: 0 6px 14px rgba(70, 95, 255, 0.22);
}

.btn-secondary,
.btn-outline,
.btn-ghost,
.admin-shell-btn-outline {
    border-color: var(--ta-gray-300);
    background: var(--ta-white);
    color: var(--ta-gray-700);
}

.btn-danger,
.action-btn.delete,
.widget-btn-delete,
.close-btn.danger {
    border-color: transparent;
    background: var(--ta-error-50);
    color: var(--ta-error-700);
}

.btn-danger:hover,
.action-btn.delete:hover,
.widget-btn-delete:hover {
    background: var(--ta-error-500);
    color: #fff;
}

.form-input,
.form-select,
.form-textarea,
.search-input,
.filter-select,
.store-search input,
.store-search-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea {
    border: 1px solid var(--ta-gray-300);
    background: var(--ta-white);
    color: var(--ta-gray-900);
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.search-input:focus,
.filter-select:focus,
.store-search input:focus,
.store-search-input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ta-brand-500);
    box-shadow: 0 0 0 4px rgba(70, 95, 255, 0.12);
}

.form-label,
.sidebar-title,
.menu-section-title,
.eyebrow,
.help-eyebrow,
.store-label,
.plugin-section-title small,
.table th,
.admin-table th,
.users-table th,
.connected-app-table th,
.connection-table th,
.tokens-table th {
    color: var(--ta-gray-500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
}

/* User shell sidebar/header */
body:not(.admin-app-page) .sidebar {
    background: var(--ta-white);
    border-right: 1px solid var(--ta-gray-200);
    box-shadow: none;
}

body:not(.admin-app-page) .sidebar-header {
    border-bottom: 0;
}

body:not(.admin-app-page) .sidebar-brand-copy,
body:not(.admin-app-page) .logo-text {
    color: var(--ta-gray-900);
}

body:not(.admin-app-page) .sidebar-brand-copy small {
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
}

body:not(.admin-app-page) .menu-section-title {
    color: var(--ta-gray-500);
}

body:not(.admin-app-page) .menu-link,
body:not(.admin-app-page) .submenu-link {
    color: var(--ta-gray-700);
    border-radius: 10px;
}

body:not(.admin-app-page) .menu-link:hover,
body:not(.admin-app-page) .submenu-link:hover {
    background: var(--ta-gray-100);
    color: var(--ta-gray-900);
}

body:not(.admin-app-page) .menu-item.active .menu-link,
body:not(.admin-app-page) .menu-link.active {
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
    box-shadow: none;
}

body:not(.admin-app-page) .sidebar.collapsed .menu-item.active .menu-link {
    box-shadow: inset 0 0 0 1px rgba(70, 95, 255, 0.18);
}

body:not(.admin-app-page) .sidebar.collapsed .menu-item.active .menu-link::before {
    background: var(--ta-brand-500);
}

body:not(.admin-app-page) .rightbar {
    --rightbar-icon-size: 46px;
}

body:not(.admin-app-page) .rightbar-rail {
    padding: 0.75rem 0.5rem;
    gap: 0.85rem;
}

body:not(.admin-app-page) .rightbar-icon-list,
body:not(.admin-app-page) .rightbar-utility-list,
body:not(.admin-app-page) .rightbar-rail-section {
    gap: 0.55rem;
}

body:not(.admin-app-page) .rightbar-icon-btn,
body:not(.admin-app-page) .rightbar-toggle {
    border-radius: 12px;
}

body:not(.admin-app-page) :is(.rightbar-widget-icon, .rightbar-utility-icon).active {
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
    box-shadow: inset 0 0 0 1px rgba(70, 95, 255, 0.18);
}

body:not(.admin-app-page) :is(.rightbar-widget-icon, .rightbar-utility-icon).active::before {
    background: var(--ta-brand-500);
    height: 46px;
}

@media (max-width: 768px) {
    body:not(.admin-app-page) .rightbar {
        --rightbar-icon-size: 38px;
    }

    body:not(.admin-app-page) .rightbar-rail {
        padding: 0.6rem 0.35rem;
        gap: 0.75rem;
    }

    body:not(.admin-app-page) :is(.rightbar-widget-icon, .rightbar-utility-icon).active::before {
        height: 38px;
    }
}

body:not(.admin-app-page) .sidebar-footer,
body:not(.admin-app-page) .sidebar-section {
    border-color: var(--ta-gray-200);
}

body:not(.admin-app-page) .sidebar-search {
    height: 42px;
    gap: 9px;
    margin: 16px;
    padding: 0 12px;
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-300);
    border-radius: var(--radius-md, 10px);
    box-shadow: none;
}

body:not(.admin-app-page) .sidebar-search input,
body:not(.admin-app-page) .sidebar-search .search-input {
    width: 100%;
    min-width: 0;
    background: transparent;
    color: var(--ta-gray-800);
    caret-color: var(--ta-brand-600);
    font: inherit;
    font-size: 0.9rem;
    box-shadow: none;
}

body:not(.admin-app-page) .sidebar-search .search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--ta-gray-600);
    opacity: 1;
}

body:not(.admin-app-page) .sidebar-search .search-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body:not(.admin-app-page) .sidebar-search input::placeholder,
body:not(.admin-app-page) .sidebar-search .search-input::placeholder {
    color: var(--ta-gray-500);
    opacity: 1;
}

body:not(.admin-app-page) .sidebar-search:focus-within {
    border-color: var(--ta-brand-500);
    box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.12);
}

body:not(.admin-app-page) .sidebar-actions-menu {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-xl);
}

body:not(.admin-app-page) .sidebar-actions-menu .btn,
body:not(.admin-app-page) .sidebar-actions-menu .btn.btn-outline,
body:not(.admin-app-page) .sidebar-actions-menu .btn.btn-secondary {
    background: var(--ta-white);
    border-color: var(--ta-gray-200);
    color: var(--ta-gray-700);
}

body:not(.admin-app-page) .header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--ta-gray-200);
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.header-page-title h1,
.header-left h1 {
    color: var(--ta-gray-900);
    font-weight: 700;
}

.header-page-title p {
    color: var(--ta-gray-500);
}

.version-badge,
.header-badge {
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
    box-shadow: none;
}

.header-icon-btn,
.header-notification-wrapper .notification-btn,
.user-avatar-btn,
.btn-header-store {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--ta-gray-200);
    background: var(--ta-white);
    color: var(--ta-gray-500);
    box-shadow: var(--shadow-xs);
}

.header-icon-btn:hover,
.header-notification-wrapper .notification-btn:hover,
.user-avatar-btn:hover,
.btn-header-store:hover {
    border-color: var(--ta-brand-100);
    background: var(--ta-brand-25);
    color: var(--ta-brand-600);
    transform: none;
}

.header-utility-group {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-xs);
}

/* Dashboard */
.dashboard-container,
body.user-app-page .dashboard-container.user-page-shell,
body.user-app-page .page-shell {
    padding: 16px 18px 24px;
    gap: 16px;
}

.dashboard-hero,
.dashboard-hero-main,
.dashboard-hero-side,
.dashboard-hero-collapsed,
.widget,
.modal,
.store-widget-card,
.template-selection-modal,
body.user-app-page .hero-card,
body.user-app-page .intro-card,
body.user-app-page .help-hero,
body.user-app-page .panel-card,
body.user-app-page .content-card,
body.user-app-page .summary-card,
body.user-app-page .card {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-sm);
    border-radius: 16px;
}

.dashboard-hero {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 16px;
}

.dashboard-hero-main,
.dashboard-hero-side {
    overflow: hidden;
}

.dashboard-hero-main::after,
.dashboard-hero-side::after,
.widget::before {
    display: none;
}

.dashboard-hero-eyebrow,
.hero-focus-kicker,
.hero-summary-label,
.metric-label {
    color: var(--ta-gray-500);
}

.dashboard-hero-title,
.hero-focus-title,
.hero-summary-value,
.metric-value,
.widget-title,
.widget-title-text {
    color: var(--ta-gray-900);
}

.dashboard-hero-subtitle,
.hero-focus-copy {
    color: var(--ta-gray-600);
}

.dashboard-chip,
.hero-summary-card,
.dashboard-hero-metric,
.store-widget-preview .badge,
.tag,
.status-badge,
.status-pill {
    background: var(--ta-gray-50);
    border: 1px solid var(--ta-gray-200);
    color: var(--ta-gray-700);
    box-shadow: none;
}

.widget {
    overflow: hidden;
}

.widget:hover {
    border-color: var(--ta-gray-300);
    box-shadow: var(--shadow-md);
    transform: none;
}

.widget.editing {
    border-color: var(--ta-brand-500);
    box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.12), var(--shadow-md);
}

.widget.dragging {
    box-shadow: var(--shadow-xl);
}

.widget-header {
    background: var(--ta-white);
    border-bottom: 1px solid var(--ta-gray-200);
    padding: 14px 16px;
}

.widget-title-icon,
.store-widget-preview,
.stat-icon,
.store-app-icon,
.header-brand-mark,
.logo-image-wrap,
.menu-icon.sidebar-user-avatar {
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
    border: 1px solid var(--ta-brand-100);
    box-shadow: none;
}

.widget-content {
    background: var(--ta-white);
    color: var(--ta-gray-700);
}

.widget-btn {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    color: var(--ta-gray-500);
    box-shadow: var(--shadow-xs);
}

.widget-btn:hover {
    background: var(--ta-brand-25);
    color: var(--ta-brand-600);
    border-color: var(--ta-brand-100);
}

/* Dashboard tabs */
.header-dashboard-tabs,
.dashboard-tabs,
.dashboard-tabs-strip {
    border: 1px solid var(--ta-gray-200);
    background: var(--ta-white);
    box-shadow: var(--shadow-xs);
    border-radius: 12px;
}

.dashboard-tab,
.dashboard-tab-add,
.dashboard-tab-manage {
    border-radius: 8px;
    color: var(--ta-gray-600);
}

.dashboard-tab.active,
.dashboard-tab.is-active {
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
    box-shadow: none;
}

/* Store, modals, notifications */
.modal-overlay {
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(6px);
}

.modal-header,
.modal-footer {
    background: var(--ta-white);
    border-color: var(--ta-gray-200);
}

.modal-header h2,
.modal-header h3 {
    color: var(--ta-gray-900);
}

.store-search input,
.store-search-input {
    min-height: 44px;
}

.store-categories,
.store-tabs {
    gap: 8px;
}

.store-grid,
.store-app-row {
    gap: 16px;
}

.store-widget-card,
.store-app-tile,
.store-ranked-item,
.store-list-panel,
.store-feature-app,
.store-topbar {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-sm);
    border-radius: 16px;
}

.store-widget-card:hover,
.store-app-tile:hover,
.store-ranked-item:hover {
    border-color: var(--ta-brand-100);
    box-shadow: var(--shadow-md);
    transform: none;
}

.notification-panel,
.system-notification-popover,
.header-notification-panel {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-xl);
    border-radius: 16px;
}

.notification-item,
.system-notification-item {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-xs);
    color: var(--ta-gray-700);
}

.notification-item::before,
.system-notification-item::before {
    background: var(--ta-brand-500);
}

.toast-container .toast,
.toast {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    color: var(--ta-gray-900);
    box-shadow: var(--shadow-lg);
    border-radius: 12px;
}

/* User content pages */
body.user-app-page {
    --page-bg: var(--ta-gray-50);
    --page-surface: var(--ta-white);
    --page-surface-muted: var(--ta-gray-50);
    --page-border: var(--ta-gray-200);
    --page-border-soft: var(--ta-gray-200);
    --page-shadow: var(--shadow-sm);
    --page-text: var(--ta-gray-900);
    --page-muted: var(--ta-gray-600);
    --page-accent: var(--ta-brand-500);
    --page-success: var(--ta-success-500);
    --page-warning: var(--ta-warning-500);
    --page-danger: var(--ta-error-500);
    --page-panel-radius: 16px;
    --page-item-radius: 12px;
    --page-control-radius: 10px;
}

body.user-app-page .hero-card,
body.user-app-page .intro-card,
body.user-app-page .help-hero {
    padding: 22px 24px;
}

body.user-app-page .hero-card h1,
body.user-app-page .intro-card h1,
body.user-app-page .help-title,
body.user-app-page .section-title,
body.user-app-page .toolbar-copy h3 {
    letter-spacing: 0;
    color: var(--ta-gray-900);
}

body.user-app-page .table-wrap,
body.user-app-page .connection-table,
body.user-app-page .tokens-table {
    border-radius: 12px;
}

body.user-app-page .connection-table th,
body.user-app-page .tokens-table th {
    background: var(--ta-gray-50);
    color: var(--ta-gray-500);
}

body.user-app-page .connection-table td,
body.user-app-page .tokens-table td {
    background: var(--ta-white);
    border-color: var(--ta-gray-200);
}

/* Admin area */
body.admin-app-page {
    --page-bg: var(--ta-gray-50);
    --page-surface: var(--ta-white);
    --page-surface-muted: var(--ta-gray-50);
    --page-border: var(--ta-gray-200);
    --page-border-soft: var(--ta-gray-200);
    --page-shadow: var(--shadow-sm);
    --page-text: var(--ta-gray-900);
    --page-muted: var(--ta-gray-600);
    --page-accent: var(--ta-brand-500);
    --page-success: var(--ta-success-500);
    --page-warning: var(--ta-warning-500);
    --page-danger: var(--ta-error-500);
    --page-panel-radius: 16px;
    --page-item-radius: 12px;
    --page-control-radius: 10px;
    --primary: var(--ta-brand-500);
    --primary-dark: var(--ta-brand-600);
    --text: var(--ta-gray-900);
    --text-light: var(--ta-gray-600);
    --bg: var(--ta-gray-50);
    --card: var(--ta-white);
    --border: var(--ta-gray-200);
    --panel-shadow: var(--shadow-sm);
    background: var(--ta-gray-50);
    color: var(--ta-gray-900);
}

body.admin-app-page .header {
    background: var(--ta-white);
    border-bottom: 1px solid var(--ta-gray-200);
    box-shadow: none;
    padding: 0.72rem 1.4rem;
}

body.admin-app-page .header h1,
body.admin-app-page .header-left h1 {
    color: var(--ta-gray-900);
    font-weight: 700;
}

body.admin-app-page .nav-tabs {
    background: var(--ta-gray-50);
    border: 1px solid var(--ta-gray-200);
    box-shadow: none;
    border-radius: 12px;
    padding: 4px;
}

body.admin-app-page .nav-tab {
    background: transparent;
    color: var(--ta-gray-600);
    border-radius: 8px;
    box-shadow: none;
}

body.admin-app-page .nav-tab:hover,
body.admin-app-page .nav-tab.active,
body.admin-app-page .nav-tab.tab-active {
    background: var(--ta-white);
    color: var(--ta-brand-600);
    box-shadow: var(--shadow-xs);
}

body.admin-app-page .main-container,
body.admin-app-page .admin-layout {
    background: var(--ta-gray-50);
}

body.admin-app-page .main-container > .sidebar,
body.admin-app-page aside.sidebar {
    background: var(--ta-white);
    border-right: 1px solid var(--ta-gray-200);
    box-shadow: none;
}

body.admin-app-page .content,
body.admin-app-page .admin-main,
body.admin-app-page .admin-page-shell {
    background: transparent;
}

body.admin-app-page .hero,
body.admin-app-page .panel,
body.admin-app-page .card,
body.admin-app-page .table-container,
body.admin-app-page .stat-card,
body.admin-app-page .plugin-sdk-strip,
body.admin-app-page .plugin-register-card,
body.admin-app-page .plugin-review-panel,
body.admin-app-page .plugin-form-section,
body.admin-app-page .plugin-list-card,
body.admin-app-page .upload-dropzone {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-sm);
    border-radius: 16px;
}

body.admin-app-page .hero h1,
body.admin-app-page .hero h2,
body.admin-app-page .content-title,
body.admin-app-page .content-header h2,
body.admin-app-page .panel h3 {
    color: var(--ta-gray-900);
    letter-spacing: 0;
}

body.admin-app-page .hero p,
body.admin-app-page .subtitle,
body.admin-app-page .content-header .subtitle,
body.admin-app-page .table-note {
    color: var(--ta-gray-600);
}

body.admin-app-page .table-toolbar {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-sm);
    border-radius: 16px;
}

body.admin-app-page .table,
body.admin-app-page .connected-app-table,
body.admin-app-page .connection-table,
body.admin-app-page .tokens-table,
body.admin-app-page .users-table,
body.admin-app-page .admin-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    overflow: hidden;
}

body.admin-app-page .table th,
body.admin-app-page .connected-app-table th,
body.admin-app-page .connection-table th,
body.admin-app-page .tokens-table th,
body.admin-app-page .users-table th,
body.admin-app-page .admin-table th {
    background: var(--ta-gray-50);
    color: var(--ta-gray-500);
    border-bottom: 1px solid var(--ta-gray-200);
    white-space: nowrap;
}

body.admin-app-page .table td,
body.admin-app-page .connected-app-table td,
body.admin-app-page .connection-table td,
body.admin-app-page .tokens-table td,
body.admin-app-page .users-table td,
body.admin-app-page .admin-table td {
    background: var(--ta-white);
    color: var(--ta-gray-700);
    border-bottom: 1px solid var(--ta-gray-200);
}

body.admin-app-page .table tr:hover td,
body.admin-app-page .connected-app-table tr:hover td,
body.admin-app-page .users-table tr:hover td,
body.admin-app-page .admin-table tr:hover td {
    background: var(--ta-gray-50);
}

body.admin-app-page .action-btn,
body.admin-app-page .icon-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--ta-gray-200);
    background: var(--ta-white);
    color: var(--ta-gray-500);
    box-shadow: var(--shadow-xs);
}

body.admin-app-page .action-btn.edit,
body.admin-app-page .action-btn.view {
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
}

body.admin-app-page .status-pill,
body.admin-app-page .status-badge,
body.admin-app-page .status-active,
body.admin-app-page .connected-app-table .shortcut-status.active {
    background: var(--ta-success-50);
    color: var(--ta-success-700);
    border: 1px solid rgba(18, 183, 106, 0.18);
}

body.admin-app-page .status-warning,
body.admin-app-page .status-pill.warning,
body.admin-app-page .status-badge.warning {
    background: var(--ta-warning-50);
    color: var(--ta-warning-700);
}

body.admin-app-page .status-danger,
body.admin-app-page .status-pill.danger,
body.admin-app-page .status-badge.danger,
body.admin-app-page .status-inactive,
body.admin-app-page .status-pill.inactive,
body.admin-app-page .status-badge.inactive {
    background: var(--ta-error-50);
    color: var(--ta-error-700);
}

body.admin-app-page .modal {
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-xl);
    border-radius: 16px;
}

/* Scrollbars */
* {
    scrollbar-color: rgba(102, 112, 133, 0.42) rgba(228, 231, 236, 0.7);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: rgba(228, 231, 236, 0.7);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(102, 112, 133, 0.42);
    border-radius: 999px;
    border: 2px solid rgba(228, 231, 236, 0.7);
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(71, 84, 103, 0.66);
}

@media (max-width: 900px) {
    .dashboard-container,
    body.user-app-page .dashboard-container.user-page-shell,
    body.user-app-page .page-shell {
        padding: 12px;
    }

    body.admin-app-page .page-wrap,
    body.admin-app-page .container {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Reset legacy theme presets into the TailAdmin skin. The old presets can stay in JS, but the visual system is now unified. */
body.theme-preset-civic,
body.theme-preset-productivity,
body.theme-preset-glass,
body.theme-preset-enterprise,
body.theme-preset-blueglass,
body.theme-preset-mist,
body.theme-preset-sand,
body.theme-preset-noir,
body.theme-preset-obsidian {
    --primary-color: var(--ta-brand-500);
    --primary-dark: var(--ta-brand-600);
    --secondary-color: var(--ta-gray-100);
    --danger-color: var(--ta-error-500);
    --success-color: var(--ta-success-500);
    --warning-color: var(--ta-warning-500);
    --text-primary: var(--ta-gray-900);
    --text-secondary: var(--ta-gray-600);
    --text-tertiary: var(--ta-gray-500);
    --bg-primary: var(--ta-gray-50);
    --bg-card: var(--ta-white);
    --bg-secondary: var(--ta-gray-100);
    --bg-hover: var(--ta-gray-100);
    --header-bg: var(--ta-white);
    --border-color: var(--ta-gray-200);
    --widget-surface: var(--ta-white);
    --widget-surface-soft: var(--ta-gray-50);
    --widget-surface-elevated: var(--ta-white);
    --widget-surface-muted: var(--ta-gray-100);
    --widget-border-color: var(--ta-gray-200);
    --widget-border-soft: var(--ta-gray-200);
    --widget-shadow: var(--shadow-sm);
    --widget-shadow-soft: var(--shadow-xs);
    --widget-text-primary: var(--ta-gray-900);
    --widget-text-secondary: var(--ta-gray-600);
    background: var(--ta-gray-50);
    color: var(--ta-gray-900);
}

body.theme-preset-noir .header,
body.theme-preset-noir .sidebar,
body.theme-preset-noir .dashboard-hero-main,
body.theme-preset-noir .dashboard-hero-side,
body.theme-preset-noir .hero-summary-card,
body.theme-preset-noir .dashboard-hero-metric,
body.theme-preset-noir .widget,
body.theme-preset-noir .modal,
body.theme-preset-noir .store-widget-card,
body.theme-preset-noir .notification-panel {
    background: var(--ta-white);
    border-color: var(--ta-gray-200);
    color: var(--ta-gray-900);
}

body.theme-preset-noir .header-page-title h1,
body.theme-preset-noir .header-left h1,
body.theme-preset-noir .dashboard-hero-title,
body.theme-preset-noir .hero-focus-title,
body.theme-preset-noir .widget-title,
body.theme-preset-noir .widget-title-text,
body.theme-preset-noir .notification-title {
    color: var(--ta-gray-900);
}

body.theme-preset-noir .header-page-title p,
body.theme-preset-noir .dashboard-hero-subtitle,
body.theme-preset-noir .hero-focus-copy,
body.theme-preset-noir .widget-content,
body.theme-preset-noir .notification-time {
    color: var(--ta-gray-600);
}

/* Browser-like dashboard page tabs, TailAdmin colors. */
.dashboard-pages-bar.header-dashboard-tabs,
.dashboard-pages-bar {
    min-height: 50px;
    margin: 0 0 14px;
    padding: 0 10px;
    align-items: end;
    border: 1px solid var(--ta-gray-200);
    border-radius: 14px 14px 0 0;
    background: var(--ta-white);
    box-shadow: none;
}

.dashboard-pages-tabs {
    align-items: end;
    gap: 0;
    padding-top: 8px;
}

.dashboard-page-tab-wrap {
    position: relative;
    display: inline-flex;
    align-items: end;
    height: 42px;
}

.dashboard-page-tab {
    height: 42px;
    min-width: 122px;
    max-width: 210px;
    padding: 0 38px 0 16px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: transparent;
    color: var(--ta-gray-600);
    box-shadow: none;
    font-weight: 600;
}

.dashboard-page-tab:hover {
    background: var(--ta-gray-50);
    color: var(--ta-gray-900);
}

.dashboard-page-tab.active {
    background: var(--ta-white);
    color: var(--ta-gray-900);
    border-color: var(--ta-gray-200);
    box-shadow: 0 -1px 0 var(--ta-gray-200), 0 1px 0 var(--ta-white);
}

.dashboard-page-tab small {
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
}

.dashboard-page-edit,
.dashboard-page-delete {
    top: 9px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--ta-gray-200);
    background: var(--ta-white);
    color: var(--ta-gray-500);
    border-radius: 8px;
    box-shadow: var(--shadow-xs);
}

.dashboard-page-edit:hover {
    border-color: var(--ta-brand-100);
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
}

.dashboard-page-delete:hover {
    border-color: rgba(240, 68, 56, 0.18);
    background: var(--ta-error-50);
    color: var(--ta-error-700);
}

.dashboard-page-add-tab {
    width: 40px;
    height: 40px;
    margin-left: 6px;
    border: 1px dashed var(--ta-gray-300);
    background: var(--ta-white);
    color: var(--ta-gray-600);
    border-radius: 10px 10px 0 0;
    box-shadow: none;
}

.dashboard-page-add-tab:hover {
    border-color: var(--ta-brand-500);
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
}

.dashboard-page-delete-confirm {
    top: 5px;
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-md);
}

.dashboard-page-confirm-action {
    border-radius: 8px;
}

/* Widget store page should read like an app store, not a poster. */
.widget-store-page {
    max-width: 1360px;
    margin: 0 auto;
}

.store-topbar {
    border-radius: 16px;
    padding: 10px;
}

.store-searchbox {
    max-width: 560px;
}

.store-search-icon {
    color: var(--ta-gray-400);
}

.store-search-input {
    min-height: 44px;
    border-radius: 10px;
    background: var(--ta-white);
}

.store-feature-strip {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

.store-feature-app,
.store-feature-app.compact {
    min-height: 160px;
    border-radius: 16px;
    background: var(--ta-white);
}

.store-feature-copy .store-feature-main-title {
    font-size: clamp(1.8rem, 2.4vw, 2.45rem);
    letter-spacing: 0;
}

.store-feature-icon,
.store-feature-icon.small {
    background: var(--ta-brand-50);
    border: 1px solid var(--ta-brand-100);
    color: var(--ta-brand-600);
    box-shadow: none;
}

.store-app-tile,
.store-ranked-item,
.store-review-list article {
    border-radius: 14px;
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-xs);
}

.store-app-icon,
.store-app-icon.blue,
.store-app-icon.amber,
.store-app-icon.green,
.store-app-icon.violet,
.store-app-icon.cyan {
    background: var(--ta-gray-50);
    border: 1px solid var(--ta-gray-200);
    color: var(--ta-gray-700);
    box-shadow: none;
}

.store-app-meta span,
.store-app-rating {
    background: var(--ta-gray-100);
    color: var(--ta-gray-700);
}

@media (max-width: 780px) {
    .store-feature-strip,
    .store-section.split {
        grid-template-columns: 1fr;
    }

    .dashboard-page-tab {
        min-width: 108px;
    }
}

/* Full TailAdmin component pass: widget chrome, action menus, content primitives, config forms. */
.widget {
    overflow: visible;
    background: var(--widget-surface) !important;
    border: 1px solid var(--widget-border-color) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-sm) !important;
}

.widget-header {
    min-height: 56px;
    padding: 12px 14px !important;
    background: var(--widget-surface-soft) !important;
    border-bottom: 1px solid var(--widget-border-soft) !important;
    border-radius: 16px 16px 0 0;
}

.widget-title {
    gap: 10px;
    min-width: 0;
    color: var(--ta-gray-900) !important;
    font-size: 0.94rem;
    font-weight: 700;
}

.widget-title-icon,
.app-glyph {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--ta-gray-50) !important;
    border: 1px solid var(--ta-gray-200) !important;
    color: var(--ta-brand-600) !important;
    box-shadow: none !important;
}

.widget-title-text {
    color: var(--widget-text-primary) !important;
}

.widget-controls {
    position: relative;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 1 !important;
    transform: none !important;
}

.widget-action-wrap {
    position: relative;
    display: inline-flex;
}

.widget-btn.widget-btn-menu {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--ta-gray-500);
    box-shadow: none;
}

.widget-btn.widget-btn-menu svg {
    width: 20px;
    height: 20px;
}

.widget-btn.widget-btn-menu:hover,
.widget-action-wrap.open .widget-btn-menu {
    background: var(--ta-gray-100);
    color: var(--ta-gray-700);
    transform: none;
}

.widget-action-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    display: none;
    padding: 8px;
    border: 1px solid var(--ta-gray-200);
    border-radius: 14px;
    background: var(--ta-white);
    box-shadow: var(--shadow-xl);
    z-index: 600;
}

.widget-action-wrap.open .widget-action-menu {
    display: grid;
    gap: 4px;
}

.widget-action-item {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ta-gray-700);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.widget-action-item:hover {
    background: var(--ta-gray-50);
    color: var(--ta-gray-900);
}

.widget-action-item.danger {
    color: var(--ta-error-700);
}

.widget-action-item.danger:hover {
    background: var(--ta-error-50);
}

.widget-action-icon {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: currentColor;
}

.widget-action-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.widget-action-confirm {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    background: var(--ta-error-50);
    color: var(--ta-error-700);
    font-size: 0.84rem;
    font-weight: 700;
}

.widget-action-confirm > div {
    display: flex;
    gap: 6px;
}

.widget-action-mini {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ta-gray-200);
    border-radius: 9px;
    background: var(--ta-white);
    color: var(--ta-gray-600);
    cursor: pointer;
}

.widget-action-mini svg {
    width: 16px;
    height: 16px;
}

.widget-action-mini.confirm {
    border-color: rgba(18, 183, 106, 0.2);
    color: var(--ta-success-700);
}

.widget-action-mini.confirm:hover {
    background: var(--ta-success-50);
}

.widget-action-mini.cancel:hover {
    background: var(--ta-gray-100);
}

.widget-content {
    padding: 14px !important;
    background: var(--widget-surface) !important;
    border-radius: 0 0 16px 16px;
    color: var(--widget-text-secondary) !important;
}

.widget-loading {
    color: var(--ta-gray-500);
}

.spinner {
    border-color: var(--ta-gray-200);
    border-top-color: var(--ta-brand-500);
}

/* Retained native widget primitives */
.widget :is(.contact-search-input, .note-search-input, .ai-input) {
    min-height: 40px;
    border: 1px solid var(--widget-input-border) !important;
    border-radius: 10px !important;
    background: var(--widget-input-bg) !important;
    color: var(--widget-text-primary) !important;
}

.widget :is(.contact-search-input, .note-search-input, .ai-input):focus {
    border-color: var(--ta-brand-500) !important;
    box-shadow: 0 0 0 4px rgba(70, 95, 255, 0.12) !important;
    outline: none;
}

.widget :is(.contact-item, .note-item, .shortcut-item) {
    border: 1px solid var(--widget-border-soft) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.widget :is(.contact-btn, .contact-action-btn, .note-action-btn, .ai-send-btn, .shortcut-open) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ai-message.bot .ai-message-content,
.ai-message-content {
    background: var(--ta-gray-50) !important;
    border: 1px solid var(--ta-gray-200) !important;
    color: var(--ta-gray-700) !important;
}

.ai-message.user .ai-message-content {
    background: var(--ta-brand-500) !important;
    border-color: var(--ta-brand-500) !important;
    color: #fff !important;
}

/* Config modal and generated forms */
.widget-config-modal,
.calendar-modal.widget-config-modal,
.note-editor,
.contact-editor,
.task-editor,
.news-modal {
    border-radius: 16px !important;
    border: 1px solid var(--ta-gray-200) !important;
    background: var(--ta-white) !important;
    box-shadow: var(--shadow-xl) !important;
}

.widget-config-modal .modal-header,
.widget-config-modal .modal-footer,
.note-editor-header,
.note-editor-footer,
.contact-editor-header,
.contact-editor-footer,
.task-editor-header,
.task-editor-footer,
.news-modal-header {
    background: var(--ta-white) !important;
    border-color: var(--ta-gray-200) !important;
}

.widget-config-modal .modal-header h2,
.widget-config-modal .config-section h3,
.note-editor-header h3,
.contact-editor-header h3,
.task-editor-header h3,
.news-modal-title {
    color: var(--ta-gray-900) !important;
    letter-spacing: 0;
}

.widget-config-modal .modal-body,
.note-editor-body,
.contact-editor-body,
.task-editor-body,
.news-modal-body {
    background: var(--ta-gray-50) !important;
}

.widget-config-modal {
    max-width: 560px !important;
}

.widget-config-modal .modal-header {
    padding: 16px 20px 14px !important;
}

.widget-config-modal .modal-header h2 {
    font-size: 19px !important;
    line-height: 1.25;
}

.widget-config-modal .modal-body {
    padding: 14px 18px !important;
    max-height: min(70vh, 560px) !important;
}

.widget-config-modal .modal-footer {
    padding: 12px 18px 14px !important;
}

.widget-config-shell {
    gap: 12px !important;
}

.widget-config-modal .config-section,
.config-section-surface,
.config-section-empty,
.shortcut-config-item,
.shortcut-icon-picker-popover {
    background: var(--ta-white) !important;
    border: 1px solid var(--ta-gray-200) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-xs) !important;
}

.widget-config-shell {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.widget-config-modal .config-section,
.widget-config-modal .config-section-surface,
.widget-config-modal .config-section-empty {
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
}

.widget-config-modal .section-title {
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    font-size: 15px !important;
    line-height: 1.25;
}

.widget-config-modal .config-grid {
    gap: 12px 14px !important;
}

.widget-config-modal .form-group {
    margin-bottom: 0 !important;
}

.widget-config-modal .form-label,
.widget-config-modal .form-group > label:not(.form-group-toggle) {
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.2;
    letter-spacing: 0.06em;
}

.widget-config-modal :is(input, textarea, select),
.note-editor :is(input, textarea, select),
.contact-editor :is(input, textarea, select),
.task-editor :is(input, textarea, select) {
    border: 1px solid var(--ta-gray-300) !important;
    border-radius: 10px !important;
    background: var(--ta-white) !important;
    color: var(--ta-gray-900) !important;
    box-shadow: var(--shadow-xs) !important;
}

.widget-config-modal :is(input, select) {
    min-height: 38px !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
}

.widget-config-modal textarea {
    min-height: 72px !important;
    padding: 9px 11px !important;
    font-size: 13px !important;
}

.widget-config-modal .form-help,
.widget-config-modal .field-help,
.widget-config-modal .help-text {
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.widget-config-modal .toggle-input-wrap {
    min-height: 38px !important;
}

.widget-config-modal .form-checkbox {
    width: 16px !important;
    height: 16px !important;
}

.widget-config-modal :is(input, textarea, select):focus,
.note-editor :is(input, textarea, select):focus,
.contact-editor :is(input, textarea, select):focus,
.task-editor :is(input, textarea, select):focus {
    border-color: var(--ta-brand-500) !important;
    box-shadow: 0 0 0 4px rgba(70, 95, 255, 0.12) !important;
    outline: none;
}

.shortcut-icon-current,
.shortcut-icon-choice {
    background: var(--ta-white) !important;
    border: 1px solid var(--ta-gray-200) !important;
    color: var(--ta-gray-700) !important;
    box-shadow: var(--shadow-xs) !important;
}

.shortcut-icon-current:hover,
.shortcut-icon-choice:hover,
.shortcut-icon-choice.active {
    border-color: var(--ta-brand-500) !important;
    background: var(--ta-brand-50) !important;
    color: var(--ta-brand-600) !important;
}

.widget-config-actions-inline,
.modal-footer,
.note-editor-footer,
.contact-editor-footer,
.task-editor-footer {
    gap: 10px;
}

/* Header repair: compact dashboard tabs + clear utility icons. */
body:not(.admin-app-page) .header {
    min-height: 72px;
    padding: 10px 18px 10px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

body:not(.admin-app-page) .header > .topbar-leading {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

body:not(.admin-app-page) .header > .header-right {
    grid-column: 2;
    grid-row: 1;
}

body:not(.admin-app-page) .topbar-leading > .topbar-global-search {
    width: min(340px, 36vw);
}

.dashboard-pages-bar.header-dashboard-tabs,
.dashboard-pages-bar {
    width: fit-content;
    max-width: min(100%, 980px);
    min-height: 48px;
    margin: 0;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    border: 1px solid var(--ta-gray-200);
    border-radius: 14px;
    background: var(--ta-white);
    box-shadow: var(--shadow-xs);
}

.dashboard-pages-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: min(72vw, 900px);
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.dashboard-pages-tabs::-webkit-scrollbar {
    display: none;
}

.dashboard-page-tab-wrap {
    height: 36px;
    align-items: center;
}

.dashboard-page-tab {
    height: 36px;
    min-width: auto;
    max-width: 180px;
    padding: 0 34px 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--ta-gray-600);
    line-height: 36px;
}

.dashboard-page-tab.active {
    border-color: var(--ta-brand-100);
    background: var(--ta-brand-50);
    color: var(--ta-brand-700);
    box-shadow: none;
}

.dashboard-page-tab span {
    max-width: 116px;
}

.dashboard-page-tab small {
    min-height: 18px;
    padding: 0 7px;
    font-size: 0.68rem;
}

.dashboard-page-edit,
.dashboard-page-delete {
    top: 6px;
    width: 24px;
    height: 24px;
    opacity: 0;
}

.dashboard-page-tab-wrap:hover .dashboard-page-edit,
.dashboard-page-tab-wrap:hover .dashboard-page-delete,
.dashboard-page-tab-wrap.confirming-delete .dashboard-page-edit,
.dashboard-page-tab-wrap.confirming-delete .dashboard-page-delete {
    opacity: 1;
}

.dashboard-page-add-tab {
    width: 36px;
    height: 36px;
    margin-left: 2px;
    border-radius: 10px;
    border-style: dashed;
    flex: 0 0 auto;
}

.dashboard-page-delete-confirm {
    top: 2px;
    right: 4px;
}

.header-right {
    justify-self: end;
    gap: 10px;
}

.header-icon-btn,
.header-notification-wrapper .notification-btn,
.user-avatar-btn,
.btn-header-store,
.header-store-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 999px !important;
    border: 1px solid var(--ta-gray-200) !important;
    background: var(--ta-white) !important;
    color: var(--ta-gray-600) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 0 !important;
}

.header-icon-btn:hover,
.header-notification-wrapper .notification-btn:hover,
.user-avatar-btn:hover,
.btn-header-store:hover,
.header-store-btn:hover {
    border-color: var(--ta-brand-200) !important;
    background: var(--ta-brand-50) !important;
    color: var(--ta-brand-600) !important;
}

.header-icon-svg,
.header-store-btn svg,
.notification-btn .header-icon-svg,
.btn-header-store .header-icon-svg,
.header-icon-btn > svg {
    width: 23px !important;
    height: 23px !important;
    stroke-width: 2 !important;
}

.theme-toggle-icon,
.theme-toggle-icon svg {
    width: 23px;
    height: 23px;
    display: block;
}

.user-avatar-icon,
.user-avatar-btn img,
.menu-icon.sidebar-user-avatar img {
    font-size: 1rem;
}

.notification-badge {
    min-width: 18px;
    height: 18px;
    right: -3px;
    top: -4px;
    border: 2px solid var(--ta-white);
    font-size: 0.68rem;
    box-shadow: 0 6px 12px rgba(240, 68, 56, 0.22);
}

@media (max-width: 860px) {
    body:not(.admin-app-page) .header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
    }

    .dashboard-pages-bar.header-dashboard-tabs,
    .dashboard-pages-bar {
        justify-self: stretch;
    }

    body:not(.admin-app-page) .header > .header-right {
        grid-column: 2;
        grid-row: 1;
    }

    body:not(.admin-app-page) .topbar-leading > .topbar-global-search {
        width: min(260px, 42vw);
    }

    .header-right {
        justify-content: flex-end;
    }

    .dashboard-pages-tabs {
        max-width: 100%;
    }
}

/* Header alignment polish. */
body:not(.admin-app-page) .header {
    padding-left: 18px;
    padding-right: 18px;
}

.dashboard-pages-bar.header-dashboard-tabs,
.dashboard-pages-bar {
    margin-left: 0;
}

body.sidebar-collapsed:not(.admin-app-page) .header {
    padding-left: 16px;
}

body.sidebar-collapsed:not(.admin-app-page) .dashboard-pages-bar.header-dashboard-tabs,
body.sidebar-collapsed:not(.admin-app-page) .dashboard-pages-bar {
    margin-left: 0;
}

body:not(.admin-app-page) .sidebar.collapsed + .dashboard-pages-bar {
    margin-left: 0;
}

.dashboard-page-tab {
    padding-left: 16px;
    padding-right: 34px;
}

.dashboard-pages-tabs {
    gap: 8px;
}

.dashboard-page-add-tab {
    margin-left: 0;
}

/* Remove collapsed sidebar horizontal divider that fights the header border. */
body:not(.admin-app-page) .sidebar.collapsed .sidebar-header {
    border-bottom: 0 !important;
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-menu,
body:not(.admin-app-page) .sidebar.collapsed .sidebar-nav,
body:not(.admin-app-page) .sidebar.collapsed .menu-section:first-child {
    border-top: 0 !important;
}

/* Sidebar account menu rewrite. */
body:not(.admin-app-page) .sidebar-footer {
    padding: 10px 8px;
    border-top: 1px solid var(--ta-gray-200);
    background: var(--ta-white);
}

body:not(.admin-app-page) .sidebar-actions-toggle,
body:not(.admin-app-page) .sidebar-user-toggle {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ta-gray-700);
    box-shadow: none;
}

body:not(.admin-app-page) .sidebar-actions-toggle:hover,
body:not(.admin-app-page) .sidebar-footer-actions.open .sidebar-actions-toggle {
    border-color: var(--ta-gray-200);
    background: var(--ta-gray-50);
}

body:not(.admin-app-page) .sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--ta-brand-50);
    border: 1px solid var(--ta-brand-100);
    color: var(--ta-brand-700);
    box-shadow: none;
    font-size: 0.78rem;
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-footer {
    padding: 10px 0 12px;
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-actions-toggle {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 12px;
    background: var(--ta-brand-50);
    border-color: var(--ta-brand-100);
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-actions-toggle:hover,
body:not(.admin-app-page) .sidebar.collapsed .sidebar-footer-actions.open .sidebar-actions-toggle {
    background: var(--ta-brand-100);
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-user-avatar {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
}

body:not(.admin-app-page) .sidebar-actions-menu {
    min-width: 250px;
    padding: 10px;
    gap: 10px;
    border-radius: 16px;
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    box-shadow: var(--shadow-xl);
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-actions-menu {
    left: calc(100% + 10px);
    bottom: 0;
}

body:not(.admin-app-page) .sidebar:not(.collapsed) .sidebar-actions-menu {
    bottom: calc(100% + 10px);
}

body:not(.admin-app-page) .top-actions-group {
    gap: 8px;
}

body:not(.admin-app-page) .top-actions-group-label {
    padding: 2px 2px 0;
    color: var(--ta-gray-500);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

body:not(.admin-app-page) .sidebar-actions-menu .btn,
body:not(.admin-app-page) .sidebar-actions-menu .btn.btn-outline,
body:not(.admin-app-page) .sidebar-actions-menu .btn.btn-secondary {
    min-height: 42px;
    justify-content: flex-start;
    border-radius: 10px;
    background: var(--ta-white);
    border: 1px solid var(--ta-gray-200);
    color: var(--ta-gray-700);
    box-shadow: var(--shadow-xs);
}

body:not(.admin-app-page) .sidebar-actions-menu .btn:hover,
body:not(.admin-app-page) .sidebar-actions-menu .btn.btn-outline:hover,
body:not(.admin-app-page) .sidebar-actions-menu .btn.btn-secondary:hover {
    background: var(--ta-brand-50);
    border-color: var(--ta-brand-100);
    color: var(--ta-brand-700);
}

body:not(.admin-app-page) .top-actions-theme-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0;
}

body:not(.admin-app-page) .top-actions-theme-picker.theme-mode-switcher {
    grid-template-columns: 1fr;
    gap: 8px;
}

body:not(.admin-app-page) .theme-mode-option {
    width: 100%;
    min-height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--ta-gray-200);
    border-radius: 12px;
    background: var(--ta-white);
    color: var(--ta-gray-700);
    box-shadow: var(--shadow-xs);
}

body:not(.admin-app-page) .theme-mode-option:hover,
body:not(.admin-app-page) .theme-mode-option.active {
    border-color: var(--ta-brand-200);
    background: var(--ta-brand-50);
    color: var(--ta-brand-700);
}

body:not(.admin-app-page) .theme-mode-icon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    border-radius: 999px;
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
}

body:not(.admin-app-page) .theme-option-compact {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--ta-gray-200);
    background: var(--ta-white);
    box-shadow: var(--shadow-xs);
}

body:not(.admin-app-page) .theme-option-compact .theme-option-swatch {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 4px 8px rgba(16,24,40,0.08);
}

body:not(.admin-app-page) .theme-option-compact:hover,
body:not(.admin-app-page) .theme-option-compact.active {
    border-color: var(--ta-brand-300);
    background: var(--ta-brand-50);
}

body:not(.admin-app-page) .top-actions-separator {
    background: var(--ta-gray-200);
    height: 1px;
    margin: 0;
}

/* Sidebar collapsed icon scale to match header utilities. */
body:not(.admin-app-page) .sidebar.collapsed .menu-link {
    width: 46px;
    height: 46px;
    border-radius: 12px;
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-section-heading.is-collapsed {
    min-height: 46px;
    margin: 6px 0;
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-section-heading.is-collapsed .sidebar-section-rail-trigger {
    width: 46px;
    height: 46px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ta-gray-700);
    box-shadow: none;
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-section-heading.is-collapsed .sidebar-section-rail-trigger:hover,
body:not(.admin-app-page) .sidebar.collapsed .sidebar-section-heading.is-collapsed .sidebar-section-rail-trigger:focus-visible {
    border-color: var(--ta-gray-200);
    background: var(--ta-gray-50);
    color: var(--ta-gray-900);
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-section-heading.is-collapsed.has-active-child .sidebar-section-rail-trigger {
    border-color: rgba(70, 95, 255, 0.18);
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
    box-shadow: inset 0 0 0 1px rgba(70, 95, 255, 0.18);
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-section-heading.is-collapsed.has-active-child .sidebar-section-rail-trigger::before {
    left: -13px;
    height: 46px;
    background: var(--ta-brand-500);
}

body:not(.admin-app-page) .sidebar.collapsed .menu-icon {
    width: 24px;
    height: 24px;
    font-size: 1.22rem;
}

body:not(.admin-app-page) .sidebar.collapsed .menu-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

body:not(.admin-app-page) .sidebar.collapsed .menu-item.active .menu-link::before {
    height: 46px;
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-actions-toggle {
    width: 46px;
    height: 46px;
    min-height: 46px;
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-user-avatar {
    width: 34px;
    height: 34px;
}

body:not(.admin-app-page) .sidebar.collapsed .sidebar-user-avatar img {
    width: 34px;
    height: 34px;
}

body:not(.admin-app-page) .sidebar-section-flyout {
    padding: 10px;
    gap: 8px;
    border: 1px solid var(--ta-gray-200);
    border-radius: 16px;
    background: var(--ta-white);
    color: var(--ta-gray-900);
    box-shadow: var(--shadow-xl);
}

body:not(.admin-app-page) .sidebar-section-flyout-header {
    padding: 2px 2px 8px;
    border-bottom: 1px solid var(--ta-gray-100);
}

body:not(.admin-app-page) .sidebar-section-flyout-icon {
    background: var(--ta-brand-50);
    border: 1px solid var(--ta-brand-100);
    color: var(--ta-brand-600);
}

body:not(.admin-app-page) .sidebar-section-flyout-header small {
    color: var(--ta-gray-500);
}

body:not(.admin-app-page) .sidebar-section-flyout-header strong {
    color: var(--ta-gray-900);
}

body:not(.admin-app-page) .sidebar-section-flyout-link {
    color: var(--ta-gray-700);
}

body:not(.admin-app-page) .sidebar-section-flyout-link:hover,
body:not(.admin-app-page) .sidebar-section-flyout-link:focus-visible {
    background: var(--ta-gray-50);
    color: var(--ta-gray-900);
}

body:not(.admin-app-page) .sidebar-section-flyout-link.active {
    background: var(--ta-brand-50);
    color: var(--ta-brand-700);
}

body:not(.admin-app-page) .sidebar-section-flyout-badge {
    background: var(--ta-gray-100);
    color: var(--ta-gray-700);
}

body:not(.admin-app-page):not(.user-app-page) > .dashboard-container {
    padding-right: var(--app-page-gutter-x, 18px);
}

@media (max-width: 900px) {
    body:not(.admin-app-page):not(.user-app-page) > .dashboard-container {
        padding-right: var(--app-page-gutter-x, 12px);
    }
}

/* Dashboard page tabs: keep title/default badge separate from edit/delete controls. */
.dashboard-pages-tabs {
    overflow-y: visible;
}

.dashboard-page-tab-wrap {
    isolation: isolate;
}

.dashboard-page-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    max-width: 230px;
    padding-right: 48px !important;
}

.dashboard-page-tab span {
    min-width: 0;
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-page-tab small {
    flex: 0 0 auto;
    background: var(--ta-brand-100) !important;
    color: var(--ta-brand-700) !important;
    border: 1px solid var(--ta-brand-200);
    font-weight: 700;
}

.dashboard-page-tab.active small {
    background: var(--ta-brand-500) !important;
    color: var(--ta-white) !important;
    border-color: var(--ta-brand-500);
}

.dashboard-page-edit,
.dashboard-page-delete {
    z-index: 3;
}

.dashboard-page-edit {
    right: 34px;
}

.dashboard-page-delete {
    right: 7px;
}

.dashboard-page-tab-wrap:hover .dashboard-page-tab,
.dashboard-page-tab-wrap.confirming-delete .dashboard-page-tab {
    padding-right: 64px !important;
}

.dashboard-page-tab-wrap.confirming-delete {
    z-index: 20;
}

.dashboard-page-delete-confirm {
    right: 8px;
    top: calc(100% + 6px);
    min-width: 74px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
}

.dashboard-page-confirm-action {
    width: 28px;
    height: 26px;
}

.dashboard-delete-modal,
.widget-delete-modal {
    width: min(420px, calc(100vw - 32px));
}

.dashboard-delete-modal .close-btn,
.widget-delete-modal .close-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--ta-gray-200);
    background: var(--ta-white);
    color: var(--ta-gray-600);
    box-shadow: var(--shadow-xs);
}

.dashboard-delete-modal .close-btn:hover,
.widget-delete-modal .close-btn:hover {
    border-color: var(--ta-gray-300);
    background: var(--ta-gray-50);
    color: var(--ta-gray-900);
    box-shadow: var(--shadow-sm);
}

.dashboard-delete-modal .modal-body,
.widget-delete-modal .modal-body {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
    padding: 24px 24px 18px;
}

.dashboard-delete-warning-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--ta-error-50);
    color: var(--ta-error-600);
    border: 1px solid rgba(240, 68, 56, 0.16);
}

.dashboard-delete-warning-icon svg {
    width: 22px;
    height: 22px;
}

.dashboard-delete-modal h3,
.widget-delete-modal h3 {
    margin: 0;
    color: var(--ta-gray-900);
    font-size: 1.05rem;
}

.dashboard-delete-modal p,
.widget-delete-modal p {
    margin: 0;
    color: var(--ta-gray-500);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .dashboard-page-tab {
        min-width: 128px;
        max-width: 190px;
    }

    .dashboard-page-tab span {
        max-width: 96px;
    }
}

/* Shortcut header actions need enough contrast on the TailAdmin light sidebar. */
body:not(.admin-app-page) .menu-section-title-action {
    color: var(--ta-gray-600);
}

body:not(.admin-app-page) .menu-section-actions {
    gap: 6px;
}

body:not(.admin-app-page) .menu-section-action {
    width: 28px;
    height: 28px;
    border: 1px solid var(--ta-brand-200);
    background: var(--ta-brand-50);
    color: var(--ta-brand-600);
    box-shadow: var(--shadow-xs);
    opacity: 1;
}

body:not(.admin-app-page) .sidebar-section-heading {
    user-select: none;
}

body:not(.admin-app-page) .sidebar-section-heading[draggable="true"] {
    cursor: grab;
}

body:not(.admin-app-page) .sidebar-section-heading.is-dragging {
    opacity: 0.52;
}

body:not(.admin-app-page) .sidebar-section-heading.is-drag-over {
    color: var(--ta-brand-600);
}

body:not(.admin-app-page) .sidebar-section-heading[draggable="true"]:active {
    cursor: grabbing;
}

body:not(.admin-app-page) .menu-section-action:hover {
    border-color: var(--ta-brand-500);
    background: var(--ta-brand-500);
    color: var(--ta-white);
    transform: none;
}

body:not(.admin-app-page) .sidebar-menu > [data-sidebar-section-node].is-section-collapsed {
    display: none !important;
}

body:not(.admin-app-page) .sidebar-section-collapse {
    width: 24px;
    height: 24px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--ta-gray-400);
}

body:not(.admin-app-page) .sidebar-section-collapse:hover {
    border-color: var(--ta-gray-200);
    background: var(--ta-gray-50);
    color: var(--ta-gray-700);
}

body:not(.admin-app-page) .sidebar-section-heading.is-collapsed {
    color: var(--ta-gray-500);
}

body:not(.admin-app-page) .menu-section-action-icon,
body:not(.admin-app-page) .menu-section-action-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
    opacity: 1;
}

/* Dashboard viewport should use available width; widget cards already provide internal spacing. */
:root {
    --app-page-gutter-y: 16px;
    --app-page-gutter-x: 18px;
    --app-page-gutter-bottom: 24px;
}

body:not(.admin-app-page):not(.user-app-page) > .dashboard-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--app-page-gutter-y) var(--app-page-gutter-x) var(--app-page-gutter-bottom);
}

body.user-app-page .page-shell,
body.user-app-page .dashboard-container.user-page-shell {
    padding: var(--app-page-gutter-y) var(--app-page-gutter-x) var(--app-page-gutter-bottom);
}

@media (max-width: 900px) {
    :root {
        --app-page-gutter-y: 12px;
        --app-page-gutter-x: 12px;
        --app-page-gutter-bottom: 18px;
    }

    body:not(.admin-app-page):not(.user-app-page) > .dashboard-container {
        padding: var(--app-page-gutter-y) var(--app-page-gutter-x) var(--app-page-gutter-bottom);
    }
}

/* Product theme contract: light/dark/system. `system` resolves to one of these classes in JS. */
body.theme-mode-dark {
    --ta-white: #111827;
    --ta-gray-25: #0b1220;
    --ta-gray-50: #0f172a;
    --ta-gray-100: #162033;
    --ta-gray-200: rgba(148, 163, 184, 0.22);
    --ta-gray-300: rgba(148, 163, 184, 0.34);
    --ta-gray-500: #94a3b8;
    --ta-gray-600: #cbd5e1;
    --ta-gray-700: #e2e8f0;
    --ta-gray-800: #f1f5f9;
    --ta-gray-900: #f8fafc;
    --ta-brand-25: rgba(58, 145, 255, 0.08);
    --ta-brand-50: rgba(58, 145, 255, 0.14);
    --ta-brand-100: rgba(58, 145, 255, 0.22);
    --primary-color: #60a5fa;
    --primary-dark: #3b82f6;
    --secondary-color: #1f2937;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --bg-primary: #0b1220;
    --bg-card: #111827;
    --bg-secondary: #162033;
    --bg-hover: #1f2937;
    --header-bg: #0f172a;
    --border-color: rgba(148, 163, 184, 0.22);
    --widget-surface: #111827;
    --widget-surface-soft: #0f172a;
    --widget-surface-elevated: #172033;
    --widget-surface-muted: #162033;
    --widget-surface-subtle: #0f172a;
    --widget-border-color: rgba(148, 163, 184, 0.22);
    --widget-border-soft: rgba(148, 163, 184, 0.18);
    --widget-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
    --widget-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.28);
    --widget-text-primary: #f8fafc;
    --widget-text-secondary: #cbd5e1;
    --widget-text-muted: #94a3b8;
    --widget-text: var(--widget-text-primary);
    --widget-border: var(--widget-border-color);
    --widget-chip-bg: #162033;
    --widget-chip-text: #e2e8f0;
    --widget-input-bg: #0f172a;
    --widget-input-border: rgba(148, 163, 184, 0.24);
    --widget-success-soft: rgba(52, 211, 153, 0.12);
    --widget-warning-soft: rgba(251, 191, 36, 0.12);
    --widget-danger-soft: rgba(248, 113, 113, 0.12);
    --widget-note-bg: #111827;
    --widget-note-border: rgba(148, 163, 184, 0.2);
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 34%), #0b1220;
    color: #f8fafc;
}

body.theme-mode-dark :is(
    .header,
    .sidebar,
    .dashboard-pages-bar,
    .widget,
    .modal,
    .widget-config-modal,
    .widget-store-modal,
    .notification-panel,
    .store-widget-card,
    .dashboard-page-modal,
    .dashboard-empty-state,
    .top-actions-menu
) {
    background: var(--widget-surface);
    border-color: var(--widget-border-color);
    color: var(--widget-text-primary);
}

body.theme-mode-dark :is(
    .widget-header,
    .modal-header,
    .modal-footer,
    .config-header,
    .config-section,
    .notification-header,
    .dashboard-page-tab,
    .top-actions-menu .btn,
    .theme-mode-option
) {
    background: var(--widget-surface-soft);
    border-color: var(--widget-border-soft);
    color: var(--widget-text-primary);
}

body.theme-mode-dark :is(
    input,
    textarea,
    select,
    .search-input,
    .note-search-input,
    .contact-search-input,
    .lib-search-input,
    .ai-input
):not(
    .topbar-global-search input,
    .sidebar-search input,
    .calendar-search input,
    .mail-search input,
    .contacts-search input,
    .tasks-search input,
    .store-searchbox input,
    .doc-search-bar input,
    .contact-search input,
    .lib-search input,
    .note-search input,
    .new-chat-member-search input,
    .resource-share-search input,
    .calendar-input-wrap input,
    .contact-input-wrap input,
    .knowledge-search-form input
) {
    background: var(--widget-input-bg) !important;
    border-color: var(--widget-input-border) !important;
    color: var(--widget-text-primary) !important;
}

body.theme-mode-dark :is(
    input::placeholder,
    textarea::placeholder,
    .search-input::placeholder,
    .note-search-input::placeholder,
    .contact-search-input::placeholder,
    .lib-search-input::placeholder,
    .ai-input::placeholder
) {
    color: var(--widget-text-secondary) !important;
}

body.theme-mode-dark :is(
    .widget-title,
    .widget-title-text,
    .notification-title,
    .header-page-title h1,
    .dashboard-page-tab.active,
    .top-actions-group-label
) {
    color: var(--widget-text-primary);
}

body.theme-mode-dark :is(
    .widget-content,
    .notification-message,
    .notification-time,
    .field-help,
    .help-text,
    .dashboard-page-tab
) {
    color: var(--widget-text-secondary);
}

body.theme-mode-dark .theme-mode-option:hover,
body.theme-mode-dark .theme-mode-option.active {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(96, 165, 250, 0.42);
    color: #bfdbfe;
}