/* ==========================================================================
   Light/dark theming layer -- app-owned, loaded AFTER application.css.

   Why this file exists
   --------------------
   application.css is the vendored "light-blue v4.0.1" theme and it is
   dark-by-design: `body { color: #f8f8f8 }` over a dark radial-gradient
   wallpaper, `.widget` panels that are a translucent dark (rgba(51,51,51,.425))
   floating on it, `.sidebar { color: #fff }`, and ~110 `rgba(255,255,255,x)`
   overlays used for every hover/border/divider in the app. None of that
   survives on a light background -- white-on-white overlays vanish and the
   near-white body text is unreadable.

   Rather than editing the vendored stylesheet (or shipping a second 500KB
   copy of it), this file does two things:

     1. Declares design tokens on :root whose DEFAULT VALUES ARE THE CURRENT
        DARK ONES. App-owned CSS (the Task Manager module's own styles, the
        nav rail rules in base-site.html) references the tokens instead of
        hardcoded literals, so it follows whichever theme is active. Because
        the defaults are byte-equivalent to what was there before, dark mode
        renders exactly as it always has.

     2. Overrides the vendored theme's dark-committed rules, all of it scoped
        under `html[data-theme="light"]`. With the attribute absent this file
        contributes nothing but the token declarations -- there is no way for
        it to regress the dark theme.

   The active theme is written to the `ui_theme` cookie and rendered onto
   <html data-theme="..."> server-side by base/base-site.html so the page
   never flashes the wrong theme. The toggle is the "Theme" row in the
   gear-icon settings popover (base/site_template/scripts.html).

   Scope note: the light overrides cover the surfaces this app actually
   renders (.widget, .modal, .table, .panel, .label/.badge, .alert, .nav-tabs,
   .breadcrumb, .pagination, .list-group, form controls, the sidebar/navbar
   chrome, and the Task Manager module). The vendored theme also carries
   styling for plugins this app never mounts -- rickshaw, nvd3, select2,
   backgrid, messenger -- and those are deliberately not themed here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens -- dark (the default, and the app's original look)
   -------------------------------------------------------------------------- */
:root {
    /* Body text + wallpaper. */
    --app-text: #f8f8f8;
    /* Three levels of de-emphasised text, in place of the ad-hoc
       `color: rgba(255,255,255,.3-.76)` values the feature templates each
       invented for themselves. --dim matches the vendored theme's own
       #d2d2d2 muted color so the two agree. */
    --app-text-soft: rgba(255, 255, 255, 0.72);
    --app-text-dim: #d2d2d2;
    --app-text-faint: rgba(255, 255, 255, 0.35);
    /* Chart axis/legend colors. Each dark default is EXACTLY the literal the
       dashboard used before, so dark rendering is unchanged; only the light
       values are new. Separate tokens rather than reusing --app-text-* because
       the dashboards picked their own greys and those choices are kept. */
    --app-chart-text: #c8d0dc;
    --app-chart-tick: rgba(255, 255, 255, .76);
    --app-chart-tick-y: rgba(255, 255, 255, .68);
    --app-chart-grid: rgba(255, 255, 255, .12);
    --app-chart-grid-faint: rgba(255, 255, 255, 0.08);
    --app-bg-color: #414e60;

    /* Panel surfaces. --app-surface is the translucent .widget; it is meant
       to float over the wallpaper. --app-surface-solid is for things that
       stack over page CONTENT instead (modals, the expanded nav rail, the
       New-task dialog) where translucency reads as a washed-out bug. */
    --app-surface: rgba(51, 51, 51, 0.425);
    --app-surface-solid: #4c535a;
    --app-surface-raised: #464c53;
    --app-surface-rail: #2f353b;
    --app-panel-shadow: none;

    /* Hairlines and dividers. */
    --app-border-faint: rgba(255, 255, 255, 0.08);
    --app-border: rgba(255, 255, 255, 0.15);
    --app-border-strong: rgba(255, 255, 255, 0.2);
    --app-border-dashed: rgba(255, 255, 255, 0.25);

    /* Hover/active washes. In dark these lift a surface toward white; the
       light theme flips them to black so they still read as "slightly
       emphasised" rather than disappearing. */
    --app-overlay-faint: rgba(255, 255, 255, 0.04);
    --app-overlay-weak: rgba(255, 255, 255, 0.06);
    --app-overlay: rgba(255, 255, 255, 0.08);
    --app-overlay-strong: rgba(255, 255, 255, 0.10);
    --app-overlay-heavy: rgba(255, 255, 255, 0.14);

    /* Solid-ish neutral fills that must stay VISIBLE rather than just hint at
       emphasis -- the "no priority" dot, the unassigned-avatar circle. An
       overlay token is too faint for these: they carry meaning on their own. */
    --app-muted-fill: rgba(255, 255, 255, 0.25);
    --app-muted-fill-text: rgba(255, 255, 255, 0.5);

    /* Chrome (logo, sidebar, navbar) sits directly on the wallpaper. */
    --app-chrome-text: #ffffff;
    --app-chrome-hover-bg: rgba(255, 255, 255, 0.12);

    /* Inputs that opt out of .form-control's solid white (the task detail
       panel's inline fields). */
    --app-input-solid-bg: #3f464d;
    --app-input-solid-text: #e9ecef;

    /* Scrollbars inside app-owned scroll containers. */
    --app-scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --app-scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);

    /* Accent. Identical in both themes; tokenised because theme.css itself
       needs it (the loader spinner). The module's own blue tints stay literal
       -- a blue wash reads correctly on either ground. */
    --app-accent: #4e85bd;

    /* Tinted-danger pair (the "Blocked" badge). The wash is the same in both
       themes; the TEXT is not -- a pale pink legible on a dark panel is
       unreadable on white, so it needs a dark counterpart. */
    --app-danger-wash: rgba(217, 83, 79, 0.18);
    --app-danger-text: #eb9c99;
}

/* --------------------------------------------------------------------------
   Tokens -- light
   -------------------------------------------------------------------------- */
html[data-theme="light"] {
    --app-text: #23282d;
    --app-text-soft: rgba(16, 24, 40, 0.72);
    --app-text-dim: #5d6873;
    --app-text-faint: rgba(16, 24, 40, 0.38);
    --app-chart-text: #45505c;
    --app-chart-tick: rgba(16, 24, 40, .78);
    --app-chart-tick-y: rgba(16, 24, 40, .68);
    --app-chart-grid: rgba(16, 24, 40, .12);
    --app-chart-grid-faint: rgba(16, 24, 40, 0.09);
    /* Toned down from an earlier, much whiter pass -- a wallpaper that peaks
       at pure #ffffff plus pure-white cards read as glare rather than a
       light theme. Everything below sits a step darker: a soft blue-grey
       page with off-white cards that still stand out from it via the
       hairline + shadow, not via a brightness jump alone. */
    --app-bg-color: #d7dde5;

    /* The translucent-panel-over-wallpaper idea does not translate: at 42%
       opacity over a pale background a panel has almost no edge left. The
       light theme's equivalent is the standard one -- an off-white card with
       a hairline and a soft shadow. */
    --app-surface: #f6f7f9;
    --app-surface-solid: #fbfbfc;
    --app-surface-raised: #eef0f3;
    --app-surface-rail: #f6f7f9;
    --app-panel-shadow: 0 1px 2px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.09);

    --app-border-faint: rgba(16, 24, 40, 0.07);
    --app-border: rgba(16, 24, 40, 0.13);
    --app-border-strong: rgba(16, 24, 40, 0.18);
    --app-border-dashed: rgba(16, 24, 40, 0.22);

    --app-overlay-faint: rgba(16, 24, 40, 0.025);
    --app-overlay-weak: rgba(16, 24, 40, 0.04);
    --app-overlay: rgba(16, 24, 40, 0.06);
    --app-overlay-strong: rgba(16, 24, 40, 0.09);
    --app-overlay-heavy: rgba(16, 24, 40, 0.12);

    --app-muted-fill: rgba(16, 24, 40, 0.22);
    --app-muted-fill-text: rgba(16, 24, 40, 0.5);

    --app-chrome-text: #23282d;
    --app-chrome-hover-bg: rgba(16, 24, 40, 0.07);

    --app-input-solid-bg: #ffffff;
    --app-input-solid-text: #23282d;

    --app-scrollbar-thumb: rgba(16, 24, 40, 0.22);
    --app-scrollbar-thumb-hover: rgba(16, 24, 40, 0.35);

    --app-danger-wash: rgba(217, 83, 79, 0.10);
    --app-danger-text: #a33430;
}

/* ==========================================================================
   Light overrides for the vendored theme
   ========================================================================== */

/* --- Wallpaper + global text ------------------------------------------------
   The dark theme layers img/bg-pattern.svg (white shapes at 8% alpha) over
   its gradient. Those shapes are invisible against a pale ground, so light
   mode drops the pattern rather than shipping a second asset for it. */
html[data-theme="light"] body {
    color: var(--app-text);
    background-color: var(--app-bg-color);
    background-image: radial-gradient(farthest-side ellipse at 10% 0, #e8ecf1 20%, var(--app-bg-color));
    background-image: -webkit-radial-gradient(10% 0, farthest-side ellipse, #e8ecf1 20%, var(--app-bg-color));
}

html[data-theme="light"] h1 small,
html[data-theme="light"] h2 small,
html[data-theme="light"] h3 small,
html[data-theme="light"] h4 small,
html[data-theme="light"] h5 small,
html[data-theme="light"] h6 small,
html[data-theme="light"] .text-muted,
html[data-theme="light"] .help-block,
html[data-theme="light"] .content .content-footer,
html[data-theme="light"] .section small,
html[data-theme="light"] caption {
    color: var(--app-text-dim);
}

html[data-theme="light"] a {
    color: #2f6da3;
}

/* --- Chrome: logo, sidebar, navbar ----------------------------------------- */
html[data-theme="light"] .logo a,
html[data-theme="light"] .logo strong,
html[data-theme="light"] .sidebar {
    color: var(--app-chrome-text);
}

/* The theme's own hover wash here is already rgba(0,0,0,.07), which happens
   to work on both grounds -- left alone deliberately. */

html[data-theme="light"] .page-header .nav > li > a {
    color: rgba(35, 40, 45, 0.55);
}

html[data-theme="light"] .page-header .nav > li > a:hover,
html[data-theme="light"] .page-header .navbar .nav > li > a:focus,
html[data-theme="light"] .page-header .navbar .nav > li > a:hover,
html[data-theme="light"] .page-header .navbar .nav > .active > a,
html[data-theme="light"] .page-header .navbar .nav > .active > a:hover,
html[data-theme="light"] .page-header .navbar .nav > .active > a:focus,
html[data-theme="light"] .page-header .navbar .nav li.dropdown.open > .dropdown-toggle,
html[data-theme="light"] .page-header .navbar .nav li.dropdown.active > .dropdown-toggle {
    color: #14181c;
}

html[data-theme="light"] .page-header .nav > li.divider {
    background: linear-gradient(rgba(16, 24, 40, 0), rgba(16, 24, 40, 0.25), rgba(16, 24, 40, 0));
}

html[data-theme="light"] .page-header .search-query {
    color: var(--app-text);
    background: url(../img/search.png) 5px 6px no-repeat #ffffff;
    border: 1px solid var(--app-border);
}

html[data-theme="light"] .page-header .search-query::-moz-placeholder,
html[data-theme="light"] .page-header .search-query::-webkit-input-placeholder {
    color: #98a2ae;
}

/* --- Panels: .widget / .panel ---------------------------------------------- */
html[data-theme="light"] .widget,
html[data-theme="light"] .panel,
html[data-theme="light"] .content .panel {
    color: var(--app-text);
    background: var(--app-surface);
    border: 1px solid var(--app-border-faint);
    box-shadow: var(--app-panel-shadow);
}

/* `.panel` above is also, unintentionally, what Bootstrap's collapse
   accordion uses internally for the sidebar's OWN nav structure -- every
   top-level item in #side-nav is a `.panel` wrapping its `<a>` and its
   collapsible submenu. In dark mode that accordion panel's translucent dark
   fill (rgba(51,51,51,.425)) blends into the equally-dark sidebar chrome,
   so it reads as one seamless rail; the override above makes it an OPAQUE
   white card with a hairline and a shadow instead, which is correct for a
   real content-area panel but turns every rail icon into its own stacked
   white box against the sidebar. The nav accordion has its own separate
   (unrelated) light/dark handling via --app-chrome-*, so undo the panel
   treatment here specifically. */
html[data-theme="light"] #sidebar .panel,
html[data-theme="light"] .side-nav .panel {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* The bug behind "the widget title disappears in light mode": the vendored
   theme sets `.widget > header { color: white }` UNCONDITIONALLY, and that
   selector (a class + a child element) is more specific than the bare
   `.widget` rule above, so it wins regardless of theme unless overridden
   here explicitly -- setting color on `.widget` alone is not enough. Every
   widget's <header><h3>Title</h3></header> was inheriting this, invisible
   white-on-white. */
html[data-theme="light"] .widget > header {
    color: var(--app-text);
    border-bottom-color: var(--app-border-faint);
}

/* Same specificity trap, one level down: `.widget .table th` (used by every
   dashboard table sitting inside a widget) is more specific than the plain
   `.table > thead > tr > th` rule further below, so it needs its own
   override too. */
html[data-theme="light"] .widget .table th {
    color: var(--app-text-dim);
}

html[data-theme="light"] .widget > header h1 small,
html[data-theme="light"] .widget > header h2 small,
html[data-theme="light"] .widget > header h3 small,
html[data-theme="light"] .widget > header h4 small,
html[data-theme="light"] .widget > header h5 small {
    color: var(--app-text-dim);
}

html[data-theme="light"] .widget-controls > a,
html[data-theme="light"] .widget-controls > span {
    color: rgba(16, 24, 40, 0.4);
}

html[data-theme="light"] .widget-controls > a:hover {
    color: rgba(16, 24, 40, 0.7);
}

/* --- Tables ---------------------------------------------------------------
   The vendored rules give tables no color of their own (they inherit
   .widget's), and hairlines of rgba(51,51,51,.35) -- dark lines that are
   actually too HEAVY on white rather than invisible. Lightened here. */
html[data-theme="light"] .table > thead > tr > th,
html[data-theme="light"] .table > thead > tr > td,
html[data-theme="light"] .table > tbody > tr > th,
html[data-theme="light"] .table > tbody > tr > td,
html[data-theme="light"] .table > tfoot > tr > th,
html[data-theme="light"] .table > tfoot > tr > td {
    border-top-color: var(--app-border-faint);
}

html[data-theme="light"] .table > thead > tr > th {
    border-bottom-color: var(--app-border);
    color: var(--app-text-dim);
}

html[data-theme="light"] .table > tbody + tbody {
    border-top-color: var(--app-border);
}

html[data-theme="light"] .table-hover > tbody > tr:hover,
html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--app-overlay-weak);
}

/* --- Modals ---------------------------------------------------------------- */
html[data-theme="light"] .modal-content {
    background-color: var(--app-surface-solid);
    color: var(--app-text);
    border: 1px solid var(--app-border);
}

html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-footer {
    border-color: var(--app-border-faint);
}

/* --- Floating menus: popovers, and the messages/support/account dropdowns --
   The whole family (Bootstrap's own .popover, the gear-icon .settings-popover,
   and the theme's .messages/.support/.account dropdowns in the top navbar)
   hardcodes a dark translucent plate + white text UNCONDITIONALLY -- unlike
   .widget, none of it was ever meant to react to a theme, so it was missed
   entirely in the first pass and stayed dark islands floating on an
   otherwise-light page. Same "content not clear" fix as .modal-content:
   made opaque on the solid-surface token instead of translucent. */
html[data-theme="light"] .popover,
html[data-theme="light"] .settings-popover,
html[data-theme="light"] .messages,
html[data-theme="light"] .support,
html[data-theme="light"] .account {
    background: var(--app-surface-solid);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-panel-shadow);
}

html[data-theme="light"] .popover h1,
html[data-theme="light"] .popover h2,
html[data-theme="light"] .popover h3,
html[data-theme="light"] .popover h4,
html[data-theme="light"] .popover h5,
html[data-theme="light"] .popover h6 {
    color: var(--app-text);
}

html[data-theme="light"] .popover-title {
    background-color: var(--app-overlay-weak);
    border-bottom-color: var(--app-border-faint);
    color: var(--app-text);
}

/* Each of these repaints its own arrow tip to match its (now light) plate --
   only the "bottom" placement is used anywhere in the app. */
html[data-theme="light"] .settings-popover.bottom .arrow:after,
html[data-theme="light"] .navbar .nav > li > .messages:after,
html[data-theme="light"] .navbar .nav > li > .support:after,
html[data-theme="light"] .navbar .nav > li > .account:after {
    border-bottom-color: var(--app-surface-solid);
}

html[data-theme="light"] .navbar .nav > li > .messages > li > a,
html[data-theme="light"] .navbar .nav > li > .support > li > a,
html[data-theme="light"] .account > li > a {
    color: var(--app-text);
}

html[data-theme="light"] .message .text {
    color: var(--app-text-dim);
}

/* .account > li > a:hover, the messages/support hover state (both solid
   #4e85bd with white text) and .settings-popover's .btn-default buttons
   (dark grey pill, white text) are correct as shipped on either ground --
   left alone deliberately. */

/* --- Navbar hint banner ("Check out settings on the right!") ------------- */
html[data-theme="light"] .notifications .alert,
html[data-theme="light"] .notifications .alert a {
    background: var(--app-surface-solid);
    color: var(--app-text);
    box-shadow: var(--app-panel-shadow);
}

/* --- Bare page headings ----------------------------------------------------
   .page-title sits directly on the wallpaper (not inside a .widget), so its
   hardcoded white text is invisible against a light page -- used across
   ~90 templates as the h1/h2 at the top of the content area. */
html[data-theme="light"] .page-title {
    color: var(--app-text);
}

html[data-theme="light"] .page-title small {
    color: var(--app-text-dim);
}

/* --- Tabs / breadcrumb / pagination / list-group --------------------------- */
html[data-theme="light"] .nav-tabs {
    border-bottom-color: var(--app-border);
}

html[data-theme="light"] .nav-tabs > li > a {
    color: var(--app-text-dim);
}

html[data-theme="light"] .nav-tabs > li.active > a,
html[data-theme="light"] .nav-tabs > li.active > a:hover,
html[data-theme="light"] .nav-tabs > li.active > a:focus {
    color: var(--app-text);
    background: var(--app-surface);
    border-color: var(--app-border) var(--app-border) transparent;
}

html[data-theme="light"] .breadcrumb > li,
html[data-theme="light"] .breadcrumb a,
html[data-theme="light"] .breadcrumb > li + li:before {
    color: var(--app-text-dim);
}

html[data-theme="light"] .pagination > li > a,
html[data-theme="light"] .pagination > li > span {
    color: var(--app-text);
    background: var(--app-surface);
    border-color: var(--app-border);
}

html[data-theme="light"] .list-group-item {
    color: var(--app-text);
    background: transparent;
    border-color: var(--app-border-faint);
}

/* --- Form controls that opted out of Bootstrap's solid white --------------
   .form-control, .dropdown-menu, input[type=search] and .btn-* are all
   still vanilla Bootstrap 3 in this build (white surface, dark text), so
   they need nothing. `.input-transparent` is the exception -- it explicitly
   paints near-white text on a translucent dark plate. */
html[data-theme="light"] .form-control.input-transparent,
html[data-theme="light"] input[type=search].input-transparent,
html[data-theme="light"] input.search.input-transparent {
    color: var(--app-text);
    background: url(../img/search.png) 5px 6px no-repeat #ffffff;
    border: 1px solid var(--app-border);
}

html[data-theme="light"] .form-control.input-transparent::-moz-placeholder,
html[data-theme="light"] .form-control.input-transparent::-webkit-input-placeholder,
html[data-theme="light"] input[type=search].input-transparent::-moz-placeholder,
html[data-theme="light"] input[type=search].input-transparent::-webkit-input-placeholder {
    color: #98a2ae;
}

html[data-theme="light"] .input-group-addon {
    color: var(--app-text-dim);
}

/* Bootstrap's .close is a black glyph relying on opacity; on the dark theme
   the app inherits it over dark panels where it is nearly invisible, but in
   light mode it is correct as shipped -- no override needed. */

/* --- Flash messages ------------------------------------------------------
   The .flash-* rules in base-site.html pair a saturated background with a
   same-hue text color (green on green, red on red) -- low contrast on any
   ground. Light mode restates them as the conventional tinted-surface +
   dark-text + matching border. */
html[data-theme="light"] .alert.flash-success {
    background-color: #e7f4e7;
    color: #24623a;
    border: 1px solid #b6ddb6;
}

html[data-theme="light"] .alert.flash-error {
    background-color: #fdecec;
    color: #8f2c28;
    border: 1px solid #f0c2c0;
}

html[data-theme="light"] .alert.flash-warning {
    background-color: #fdf4e3;
    color: #7d5a12;
    border: 1px solid #ecd6a5;
}

html[data-theme="light"] .alert.flash-info {
    background-color: #eaeefb;
    color: #2c3d7d;
    border: 1px solid #c2ccf0;
}

/* --- Misc surfaces that hardcode the translucent dark plate --------------- */
html[data-theme="light"] .img-thumbnail,
html[data-theme="light"] .widget-tabs .body,
html[data-theme="light"] .widget-tabs .nav > li.active > a,
html[data-theme="light"] .feed-item .icon,
html[data-theme="light"] .announcement-item .icon,
html[data-theme="light"] .sc-card,
html[data-theme="light"] .pos-verifications-card {
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: var(--app-panel-shadow);
}

html[data-theme="light"] .widget-tabs .nav > li:not(.active) > a {
    background: var(--app-overlay-weak);
    color: var(--app-text-dim);
}

html[data-theme="light"] .feed-item-body .time,
html[data-theme="light"] .announcement-item-body .time,
html[data-theme="light"] .news-list .time,
html[data-theme="light"] .users-list .time,
html[data-theme="light"] .chat-message .time {
    color: var(--app-text-dim);
}

/* a/button.list-group-item (element + class) is more specific than the bare
   `.list-group-item` rule above, so a list-group-item rendered as an <a> or
   <button> was still getting the vendored theme's own near-white text. */
html[data-theme="light"] a.list-group-item,
html[data-theme="light"] button.list-group-item {
    color: var(--app-text);
}

/* --- The loader overlay --------------------------------------------------- */
html[data-theme="light"] .loader-wrap {
    color: var(--app-accent);
}


/* ==========================================================================
   Light overrides for feature modules that carry their own inline CSS
   --------------------------------------------------------------------------
   These templates predate the theming layer and each hardcoded the vendored
   theme's dark values into their own <style> blocks -- the translucent panel
   (rgba(51,51,51,.425)), #fff/#f8f8f8 headings, and rgba(255,255,255,x)
   hairlines and dim text. In light mode those would otherwise render as dark
   cards with white-on-white detail.

   They are corrected here rather than by editing the templates on purpose:
   scoped under [data-theme="light"] these rules cannot touch the dark theme,
   whereas rewriting each file's literals to shared tokens measurably shifted
   its dark rendering -- the token alpha steps do not line up with the ad-hoc
   values each file picked for itself. Converting a template properly is a
   per-file job; until then this keeps light mode coherent without risking
   the dark theme.

   Deliberately NOT overridden, being correct on either ground: white text or
   borders sitting on a saturated fill -- .type-tab.active (#4e85bd pill),
   .rainbow-box (gradient ring), .switch-slider::before (toggle knob),
   .conv-badge / .msg-tag (colored chips).
   ========================================================================== */

/* --- home/index.html (landing dashboard) ---------------------------------- */
html[data-theme="light"] .dashboard-kpi,
html[data-theme="light"] .kpi-icon {
    background: var(--app-surface);
    box-shadow: var(--app-panel-shadow);
}

html[data-theme="light"] .appversion_progress_cell.is-clickable:hover {
    background-color: var(--app-overlay-weak);
}

html[data-theme="light"] .campaign-row {
    border-bottom-color: var(--app-border-faint);
}

/* --- home/app_attr/platform_summary.html (metrics dashboard) -------------- */
html[data-theme="light"] .platform-summary,
html[data-theme="light"] .platform-summary .metric-value,
html[data-theme="light"] .platform-summary .panel-title,
html[data-theme="light"] .platform-summary .insight-value,
html[data-theme="light"] .summary-table th,
html[data-theme="light"] .summary-table td,
html[data-theme="light"] .summary-table td:first-child,
html[data-theme="light"] .summary-table th:first-child {
    color: var(--app-text);
}

/* The template's own rule here is !important, so this has to match it. */
html[data-theme="light"] .summary-table tbody td {
    color: var(--app-text) !important;
}

html[data-theme="light"] .summary-hero,
html[data-theme="light"] .summary-action,
html[data-theme="light"] .metric-tile,
html[data-theme="light"] .metric-icon,
html[data-theme="light"] .metric-growth-up,
html[data-theme="light"] .metric-growth-down,
html[data-theme="light"] .summary-panel,
html[data-theme="light"] .metric-picker {
    background: var(--app-surface);
    box-shadow: var(--app-panel-shadow);
}

html[data-theme="light"] .summary-action,
html[data-theme="light"] .metric-picker {
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="light"] .summary-table th {
    background: var(--app-overlay-weak);
}

html[data-theme="light"] .panel-subtitle,
html[data-theme="light"] .insight-label,
html[data-theme="light"] .insight-note1,
html[data-theme="light"] .insight-note2,
html[data-theme="light"] .legend-row {
    color: var(--app-text-dim);
}

html[data-theme="light"] .insight-item,
html[data-theme="light"] .summary-table th,
html[data-theme="light"] .summary-table td,
html[data-theme="light"] .summary-table-footer {
    border-color: var(--app-border-faint);
}

html[data-theme="light"] .summary-table .group-start {
    border-left-color: var(--app-border);
}

html[data-theme="light"] .summary-table tbody tr:nth-child(odd) {
    background: var(--app-overlay-faint);
}

html[data-theme="light"] .summary-table tbody tr:hover {
    background: var(--app-overlay-weak);
}

/* --- home/app_attr/app_account.html -------------------------------------- */
html[data-theme="light"] .account-hint,
html[data-theme="light"] .file-dropzone {
    color: var(--app-text-dim);
}

html[data-theme="light"] .file-chip {
    background: var(--app-overlay);
}

html[data-theme="light"] .type-tabs {
    background: var(--app-overlay-strong);
    border-color: var(--app-border-faint);
}

/* .type-tab.active keeps its white-on-blue; only the resting and hover
   states, which sit on the grey track above, need a dark ink. */
html[data-theme="light"] .type-tab,
html[data-theme="light"] .type-tab:hover {
    color: var(--app-text);
}

/* --- home/app_attr/app_new_edit.html (selectize inputs) ------------------ */
html[data-theme="light"] .selectize-control.single .selectize-input,
html[data-theme="light"] .selectize-control.multi .selectize-input,
html[data-theme="light"] .account-name-selectize .selectize-input {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

html[data-theme="light"] .selectize-control.multi .selectize-input > div,
html[data-theme="light"] .selectize-input input,
html[data-theme="light"] .account-name-selectize .selectize-input input,
html[data-theme="light"] .account-name-selectize .selectize-input > div,
html[data-theme="light"] .account-name-selectize .selectize-input .item,
html[data-theme="light"] .account-name-selectize .item,
html[data-theme="light"] .account-name-selectize .option,
html[data-theme="light"] .account-name-selectize .selectize-dropdown,
html[data-theme="light"] .account-name-selectize .selectize-dropdown [data-selectable] {
    color: var(--app-text) !important;
}

html[data-theme="light"] .account-name-selectize .selectize-dropdown {
    background: var(--app-surface-solid) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="light"] .account-name-selectize .selectize-dropdown .option.active,
html[data-theme="light"] .account-name-selectize .selectize-dropdown [data-selectable].active {
    background: var(--app-overlay) !important;
    color: var(--app-text) !important;
}

/* --- home/app_attr/app_performance_table.html ---------------------------- */
html[data-theme="light"] .head-style {
    background-color: var(--app-overlay-strong);
}

html[data-theme="light"] .chart-percentage,
html[data-theme="light"] .chart-label {
    color: var(--app-text);
}

/* --- communication/campaign_index.html ----------------------------------- */
html[data-theme="light"] .campaign-actions-manage {
    border-right-color: var(--app-border);
}

/* --- communication/wa_campaign_responce.html (WhatsApp thread view) ------ */
html[data-theme="light"] .conversation-list,
html[data-theme="light"] .thread-panel {
    background: var(--app-surface);
    border-color: var(--app-border-faint);
    box-shadow: var(--app-panel-shadow);
}

html[data-theme="light"] .conversation-item,
html[data-theme="light"] .thread-header,
html[data-theme="light"] .composer-area {
    border-color: var(--app-border-faint);
}

html[data-theme="light"] .conversation-item:hover,
html[data-theme="light"] .conversation-item:focus,
html[data-theme="light"] .msg-contact-card,
html[data-theme="light"] .compose-preview,
html[data-theme="light"] .composer-area .nav-tabs > li > a:hover {
    background: var(--app-overlay-weak);
}

html[data-theme="light"] .conversation-item .conv-name,
html[data-theme="light"] .thread-header b,
html[data-theme="light"] .thread-contact-actions a,
html[data-theme="light"] .thread-contact-actions a:hover,
html[data-theme="light"] .thread-contact-actions a:focus,
html[data-theme="light"] .msg-contact-name,
html[data-theme="light"] .composer-area .nav-tabs > li > a:hover {
    color: var(--app-text);
}

html[data-theme="light"] .conversation-item .conv-preview,
html[data-theme="light"] .conversation-item .conv-time,
html[data-theme="light"] .thread-empty,
html[data-theme="light"] .msg-contact-number,
html[data-theme="light"] .composer-area label,
html[data-theme="light"] .composer-area .nav-tabs > li > a {
    color: var(--app-text-dim);
}

/* Matched with !important because the template's own rule is !important. */
html[data-theme="light"] .thread-header .text-muted {
    color: var(--app-text-dim) !important;
}

html[data-theme="light"] .composer-area .nav-tabs > li.disabled > a,
html[data-theme="light"] .composer-area .nav-tabs > li.disabled > a:hover {
    color: var(--app-text-faint);
}

html[data-theme="light"] .thread-tag-chip,
html[data-theme="light"] .msg-button-chip,
html[data-theme="light"] .msg-location-chip {
    background: var(--app-overlay-strong);
    border-color: var(--app-border);
}

html[data-theme="light"] .composer-area .nav-tabs {
    border-bottom-color: var(--app-border);
}

/* Shared status-badge component (core/templates/communication/_status_badge_macros.html).
   Modifier classes cover every {value:{label,css}} meta dict in the Communication module
   (GOAL_OUTCOME_META, FLOW_STATUS_META, MESSAGE_STATUS_META, WA_TEMPLATE_STATUS_META,
   CAMPAIGN_STATUS_META, RESPONSE_TYPE_META). */
.status-badge {
    display: inline-block;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
}
.status-badge--neutral { background: var(--app-muted-fill); color: var(--app-text); }
.status-badge--goal-met { background: #52c732; }
.status-badge--follow-up { background: #f0ad4e; }
.status-badge--requested-dnd { background: #d9534f; }
.status-badge--given-referral { background: #8e5bd9; }
.status-badge--default-flow { background: #4e85bd; }
.status-badge--engaged { background: #4e85bd; }
.status-badge--in-progress { background: #99d4f7; color: #1a3a4a; }
.status-badge--reassigned { background: #c98a3e; }
.status-badge--awaiting { background: #99d4f7; color: #1a3a4a; }
.status-badge--routed { background: #4e85bd; }
.status-badge--completed { background: #52c732; }
.status-badge--review { background: #f0ad4e; }
.status-badge--manual { background: #777; }
.status-badge--expired { background: #999; }
.status-badge--dnd { background: #d9534f; }
.status-badge--flow { background: #5bc0de; }
.status-badge--campaign-sent { background: #4e85bd; }
.status-badge--response { background: #5cb85c; }
.status-badge--approved { background: #52c732; }
.status-badge--pending { background: #f0ad4e; }
.status-badge--rejected { background: #d9534f; }
.status-badge--draft { background: #777; }
.status-badge--sent { background: #4e85bd; }
.status-badge--delivered { background: #337ab7; }
.status-badge--read { background: #52c732; }
.status-badge--failed { background: #d9534f; }
.status-badge--scheduled { background: #4e85bd; }
.status-badge--dispatched { background: #52c732; }
.status-badge--session_text,
.status-badge--interactive_buttons,
.status-badge--cta_url,
.status-badge--media,
.status-badge--flow_type { background: #6c757d; }

/* WhatsApp-chat + call quick-action buttons next to a phone number - shared across any list
   that shows a customer's phone (customer index cards, campaign delivery-details grid, ...). */
.phone-contact-actions { display:inline-flex; align-items:center; gap:6px; margin-left:8px; vertical-align:middle; }
.phone-contact-actions a { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; color:#fff; font-size:13px; text-decoration:none; }
.phone-contact-actions a:hover, .phone-contact-actions a:focus { opacity:.85; color:#fff; text-decoration:none; }
.phone-contact-actions a.whatsapp-action { background:#25D366; }
.phone-contact-actions a.call-action { background:#4e85bd; }