/**
 * Aerial Light Mode
 * Header/Footer: UNCHANGED (always dark)
 * Content container: Light mode for field readability
 */

/* ── Content area variables (light mode) ───────────────── */
body.aerial-light {
    --bg-primary: #F8FAFC;
    --bg-secondary: #F1F5F9;
    --bg-card: rgba(255, 255, 255, 0.9);
    --text-primary: #0F172A;
    --text-secondary: rgba(15, 23, 42, 0.7);
    --text-muted: rgba(15, 23, 42, 0.5);
    --border-subtle: rgba(15, 23, 42, 0.1);
    --input-bg: #FFFFFF;
    --input-border: rgba(15, 23, 42, 0.15);
    --input-text: #0F172A;
    --link-color: #16A34A;
    --link-hover: #22C55E;
}

/* ══════════════════════════════════════════════════════════
   CONTENT AREA — LIGHT MODE
   ══════════════════════════════════════════════════════════ */

body.aerial-light {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Main content wrapper */
body.aerial-light .site-content,
body.aerial-light #content,
body.aerial-light .ast-container,
body.aerial-light .ast-separate-container,
body.aerial-light .site-main {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Page/post content */
body.aerial-light .entry-content,
body.aerial-light .page-content,
body.aerial-light .ast-article-single,
body.aerial-light .ast-article-post {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Headings */
body.aerial-light h1, body.aerial-light h2, body.aerial-light h3,
body.aerial-light h4, body.aerial-light h5, body.aerial-light h6 {
    color: var(--text-primary) !important;
}

/* Paragraphs and text */
body.aerial-light p,
body.aerial-light li,
body.aerial-light span:not(.ph),
body.aerial-light td,
body.aerial-light th,
body.aerial-light label {
    color: var(--text-primary) !important;
}

/* Links */
body.aerial-light a:not(.ast-nav-menu a):not(.main-header-menu a):not(.site-footer a) {
    color: var(--link-color);
}

body.aerial-light a:not(.ast-nav-menu a):not(.main-header-menu a):not(.site-footer a):hover {
    color: var(--link-hover);
}

/* Cards / sections */
body.aerial-light .wp-block-group.has-background {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background-color: var(--bg-card) !important;
}

/* ── Buttons (keep green gradient, adjust text) ────────── */
body.aerial-light .wp-block-button__link,
body.aerial-light .wp-element-button,
body.aerial-light .ast-custom-button,
body.aerial-light button[type="submit"],
body.aerial-light input[type="submit"] {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #0F172A !important;
    text-shadow: none !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.25) !important;
}

body.aerial-light .wp-block-button__link:hover,
body.aerial-light .wp-element-button:hover,
body.aerial-light button[type="submit"]:hover,
body.aerial-light input[type="submit"]:hover {
    background: linear-gradient(135deg, #4ADE80 0%, #22C55E 100%) !important;
    box-shadow: 0 6px 25px rgba(34, 197, 94, 0.4) !important;
    transform: translateY(-1px);
}

/* ── Form inputs (light) ───────────────────────────────── */
body.aerial-light input[type="text"],
body.aerial-light input[type="email"],
body.aerial-light input[type="password"],
body.aerial-light input[type="tel"],
body.aerial-light input[type="url"],
body.aerial-light input[type="number"],
body.aerial-light input[type="search"],
body.aerial-light textarea,
body.aerial-light select {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 8px !important;
    color: var(--input-text) !important;
    padding: 10px 14px !important;
}

body.aerial-light input:focus,
body.aerial-light textarea:focus,
body.aerial-light select:focus {
    border-color: rgba(34, 197, 94, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15),
                0 0 20px rgba(34, 197, 94, 0.08) !important;
    outline: none !important;
}

/* ── FluentForms styling (light) ───────────────────────── */
body.aerial-light .fluentform .ff-el-input--label label,
body.aerial-light .fluentform .ff-el-group label {
    color: var(--text-secondary) !important;
}

body.aerial-light .fluentform .ff-el-input--content input,
body.aerial-light .fluentform .ff-el-input--content textarea {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--input-text) !important;
    border-radius: 8px !important;
}

body.aerial-light .fluentform .ff_submit_btn_wrapper button {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%) !important;
    color: #0F172A !important;
    border: none !important;
    border-radius: 8px !important;
}

/* ── Scrollbar (light) ─────────────────────────────────── */
body.aerial-light ::-webkit-scrollbar {
    width: 8px;
}
body.aerial-light ::-webkit-scrollbar-track {
    background: #F1F5F9;
}
body.aerial-light ::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}
body.aerial-light ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* ── Selection highlight (light) ───────────────────────── */
body.aerial-light ::selection {
    background: rgba(34, 197, 94, 0.2);
    color: #0F172A;
}

/* ── Toggle button adjustments (still dark glass in light mode) ── */
/* Toggle stays dark-styled for consistency */

/* ══════════════════════════════════════════════════════════
   FOOTER — ALWAYS DARK (keep white text in light mode)
   ══════════════════════════════════════════════════════════ */
body.aerial-light .site-footer,
body.aerial-light .site-footer *,
body.aerial-light footer,
body.aerial-light footer *,
body.aerial-light .ast-small-footer,
body.aerial-light .ast-small-footer *,
body.aerial-light .site-below-footer-wrap,
body.aerial-light .site-below-footer-wrap *,
body.aerial-light .ast-footer-overlay,
body.aerial-light .ast-footer-overlay *,
body.aerial-light .ast-row.site-footer-primary-section-2 *,
body.aerial-light .ast-row.site-footer-primary-section-1 * {
    color: rgba(255, 255, 255, 0.85) !important;
}
body.aerial-light .site-footer a,
body.aerial-light footer a,
body.aerial-light .ast-small-footer a {
    color: rgba(255, 255, 255, 0.85) !important;
}
body.aerial-light .site-footer a:hover,
body.aerial-light footer a:hover,
body.aerial-light .ast-small-footer a:hover {
    color: #00ff88 !important;
}


/* ── Footer social icons — keep white in light mode ── */
body.aerial-light .site-footer .ast-social-element,
body.aerial-light .site-footer .ast-social-element *,
body.aerial-light .site-footer .ast-builder-social-element,
body.aerial-light .site-footer .ast-builder-social-element *,
body.aerial-light .site-footer .footer-social-icons-1,
body.aerial-light .site-footer .footer-social-icons-1 *,
body.aerial-light .site-footer .ast-social-icon-label,
body.aerial-light .site-footer [class*="social"] * {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ── Content container bottom margin ── */
body.aerial-light .site-content {
    margin-bottom: 100px;
}
@media (max-width: 768px) {
    body.aerial-light .site-content {
        margin-bottom: 50px;
    }
}


/* ══════════════════════════════════════════════════════════
   FIX #86: Unify portal container colors — FluentBoards
   tasks wrapper aligned with dashboard widget styling
   (2026-02-27)
   ══════════════════════════════════════════════════════════ */

/* ── Tasks wrapper main container ──────────────────────── */
body.aerial-light .fluent_boards_frontend #fbs_tasks_wrapper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    padding: 16px !important;
    margin-top: 16px !important;
}

/* ── FluentBoards databox ──────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fluentboards_databox {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* ── Board section container ───────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_board_section_container {
    background: transparent !important;
}

/* ── Kanban column wrappers ────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_board_view__section_board {
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* -- Narrower Kanban stage columns (Issue #114) -- */
.fluent_boards_frontend .fbs_board_view__section_board {
    min-width: 180px !important;
    max-width: 220px !important;
    width: 200px !important;
    flex-shrink: 0;
}
.fluent_boards_frontend .fbs_board_section_container {
    gap: 8px !important;
}
/* Ensure task cards fit within narrower columns */
.fluent_boards_frontend .fbs_board_view__section_board .fbs_task_card {
    font-size: 13px !important;
}


/* ── Task cards in kanban ──────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_task_card,
body.aerial-light .fluent_boards_frontend .fbs_board_section__task_list_cover {
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_task_card:hover {
    border-color: rgba(22, 163, 74, 0.4) !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.1) !important;
}

/* ── Task card text ────────────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_task_card *,
body.aerial-light .fluent_boards_frontend .fbs_board_section__task_list_cover * {
    color: var(--text-primary) !important;
}

/* ── Table view ────────────────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_board_section_table_view {
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_tasks_table {
    background: transparent !important;
    color: var(--text-primary) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_tasks_table thead {
    background: var(--bg-secondary) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_tasks_table thead th {
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_tasks_table tbody td {
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_tasks_table tr:hover {
    background: rgba(22, 163, 74, 0.04) !important;
}

/* ── Menu bar inside FluentBoards ──────────────────────── */
body.aerial-light .fluent_boards_frontend .fframe_main-menu-items {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.aerial-light .fluent_boards_frontend .fframe_main-menu-items .fframe_menu_primary {
    color: var(--text-primary) !important;
}

body.aerial-light .fluent_boards_frontend .fframe_main-menu-items .fframe_menu_primary:hover,
body.aerial-light .fluent_boards_frontend .fframe_main-menu-items li.active_item .fframe_menu_primary {
    color: var(--link-color) !important;
    background: rgba(22, 163, 74, 0.08) !important;
}

/* ── Board cards in boards list ────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_board_card,
body.aerial-light .fluent_boards_frontend .fbs-board-card {
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_board_card:hover,
body.aerial-light .fluent_boards_frontend .fbs-board-card:hover {
    border-color: rgba(22, 163, 74, 0.3) !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.1) !important;
}

/* ── Board text elements ───────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs-board-title,
body.aerial-light .fluent_boards_frontend .fbs_board_card .fbs-board-title {
    color: var(--text-primary) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_board_card p,
body.aerial-light .fluent_boards_frontend .fbs-board-card p {
    color: var(--text-secondary) !important;
}

/* ── Report cards ──────────────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs-task-cart {
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.aerial-light .fluent_boards_frontend .fbs-task-cart .fbs-label {
    color: var(--text-secondary) !important;
}

body.aerial-light .fluent_boards_frontend .fbs-task-cart .fbs-value {
    color: var(--text-primary) !important;
}

body.aerial-light .fluent_boards_frontend .fbs-report-chart {
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.aerial-light .fluent_boards_frontend .fbs-report-chart .fbs-chart-nav {
    border-color: var(--border-subtle) !important;
}

body.aerial-light .fluent_boards_frontend .fbs-report-chart .fbs-chart-nav h4 {
    color: var(--text-primary) !important;
}

/* ── Stage headers ─────────────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_board_section__header h3 {
    color: var(--text-primary) !important;
}

/* ── Board title bar ───────────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_board_title_bar {
    color: var(--text-primary) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_board_title_bar .fbs-boards-actions button {
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* ── Settings area ─────────────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_welcome-settings {
    color: var(--text-primary) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_settings_sidebar {
    background: #FFFFFF !important;
    border-color: var(--border-subtle) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_settings_sidebar a,
body.aerial-light .fluent_boards_frontend .fbs_settings_sidebar li {
    color: var(--text-primary) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_settings_sidebar a:hover,
body.aerial-light .fluent_boards_frontend .fbs_settings_sidebar li.active a {
    color: var(--link-color) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_settings_description {
    background: #FFFFFF !important;
    border-color: var(--border-subtle) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_settings_description h3,
body.aerial-light .fluent_boards_frontend .fbs_settings_description h4,
body.aerial-light .fluent_boards_frontend .fbs_settings_description label {
    color: var(--text-primary) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_settings_description p,
body.aerial-light .fluent_boards_frontend .fbs_settings_description span {
    color: var(--text-secondary) !important;
}

/* ── Member list ───────────────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs-setting-member-box {
    background: #FFFFFF !important;
    border-color: var(--border-subtle) !important;
}

/* ── Dashboard widget alignment ────────────────────────── */
body.aerial-light .ass-dashboard-widget {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
}

body.aerial-light .ass-dashboard-card {
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.aerial-light .ass-dashboard-card h3,
body.aerial-light .ass-dashboard-card .ass-stat-value {
    color: var(--text-primary) !important;
}

body.aerial-light .ass-dashboard-card .ass-stat-label {
    color: var(--text-secondary) !important;
}

/* ── Small screen menu ─────────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_small_screen_menu_items,
body.aerial-light .fluent_boards_frontend .fframe_menu.fbs_small_screen_menu_items {
    background: #FFFFFF !important;
    border-color: var(--border-subtle) !important;
}

/* ── Tooltip fix (Settings > General Settings) ─────────── */
body.aerial-light .el-popper.is-light {
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
}

body.aerial-light .el-popper.is-light .el-popper__arrow::before {
    background: #FFFFFF !important;
    border-color: var(--border-subtle) !important;
}

body.aerial-light .el-popper.is-dark {
    background: #1E293B !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #F8FAFC !important;
}

body.aerial-light .el-popper.is-dark .el-popper__arrow::before {
    background: #1E293B !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Element Plus tooltips used by FluentBoards ────────── */
body.aerial-light .el-tooltip__popper.is-light {
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

body.aerial-light .el-tooltip__popper.is-dark {
    background: #1E293B !important;
    color: #F8FAFC !important;
}

/* ── Element Plus inputs/selects inside FluentBoards ───── */
body.aerial-light .fluent_boards_frontend .el-input__wrapper {
    background: var(--input-bg) !important;
    box-shadow: 0 0 0 1px var(--input-border) !important;
}

body.aerial-light .fluent_boards_frontend .el-input__inner {
    color: var(--input-text) !important;
}

body.aerial-light .fluent_boards_frontend .el-select__wrapper {
    background: var(--input-bg) !important;
}

/* ── Element Plus buttons ──────────────────────────────── */
body.aerial-light .fluent_boards_frontend .el-button--default {
    background: #FFFFFF !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

body.aerial-light .fluent_boards_frontend .el-button--default:hover {
    border-color: var(--link-color) !important;
    color: var(--link-color) !important;
}

/* ── Quick search dialog light mode ────────────────────── */
body.aerial-light .el-overlay.fbs-quick-search-dialog .el-dialog {
    background: #FFFFFF !important;
}

body.aerial-light .fbs-quick-search-results li .fbs-quick-search-results-item {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

body.aerial-light .fbs-quick-search-results li .fbs-quick-search-results-item:hover {
    background-color: rgba(22, 163, 74, 0.06) !important;
}

/* ── Task assignees ────────────────────────────────────── */
body.aerial-light .fluent_boards_frontend .fbs_task_assignees li .fbs-assignees-add-btn {
    border-color: var(--border-subtle) !important;
    color: var(--text-muted) !important;
}

body.aerial-light .fluent_boards_frontend .fbs_task_assignees li .fbs-assignees-add-btn:hover {
    border-color: var(--link-color) !important;
    color: var(--link-color) !important;
}

/* ── Greeting — always light text on dark header (Issue #84 fix) ── */
body.aerial-light .ass-greeting,
body.aerial-light li.ass-greeting,
body.aerial-light .ass-greeting *,
body.aerial-light li.ass-greeting span,
body.aerial-light li.ass-greeting a {
    color: #F8FAFC !important;
}