/* Project Phoenix Appearance System — black / orange / white dark theme */
:root{
  --phoenix-orange:#ff7a00;
  --phoenix-black:#0b0b0b;
  --phoenix-black-2:#151515;
  --phoenix-black-3:#202020;
  --phoenix-white:#ffffff;
}

/* Appearance switch */
#phoenixAppearanceControl{position:fixed;right:12px;bottom:12px;z-index:100000;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
#phoenixAppearanceToggle{width:46px;height:46px;border-radius:999px;border:2px solid var(--phoenix-orange);background:#0b0b0b;color:#fff;display:grid;place-items:center;font-size:21px;font-weight:800;box-shadow:0 5px 18px #0006;cursor:pointer;padding:0}
#phoenixAppearanceMenu{position:absolute;right:0;bottom:54px;width:205px;border:1px solid #343434;border-radius:12px;padding:9px;background:#111;color:#fff;box-shadow:0 12px 32px #0009}
#phoenixAppearanceMenu[hidden]{display:none!important}
#phoenixAppearanceMenu .phoenix-theme-title{font-size:11px;color:#bbb;text-transform:uppercase;letter-spacing:.04em;margin:2px 3px 7px}
#phoenixAppearanceMenu button{width:100%;padding:9px 10px;margin:3px 0;border:1px solid #3a3a3a;border-radius:8px;background:#1b1b1b;color:#fff;text-align:left;cursor:pointer;font:inherit}
#phoenixAppearanceMenu button:hover,#phoenixAppearanceMenu button.active{border-color:var(--phoenix-orange);background:#2a1607;color:#fff}
#phoenixAppearanceMenu button.active:after{content:'✓';float:right;color:var(--phoenix-orange);font-weight:900}

/* Dark palette. Existing operational status colours remain meaningful. */
html[data-phoenix-theme="dark"]{
  color-scheme:dark;
  --brand:#ff7a00!important;
  --bg:#0b0b0b!important;
  --card:#151515!important;
  --ink:#ffffff!important;
  --muted:#b8b8b8!important;
  --line:#343434!important;
}
html[data-phoenix-theme="dark"] body{background:#0b0b0b!important;color:#fff!important}
html[data-phoenix-theme="dark"] header,
html[data-phoenix-theme="dark"] .card,
html[data-phoenix-theme="dark"] .login-card,
html[data-phoenix-theme="dark"] .map-card,
html[data-phoenix-theme="dark"] .modal-card,
html[data-phoenix-theme="dark"] .panel,
html[data-phoenix-theme="dark"] .module,
html[data-phoenix-theme="dark"] .hero,
html[data-phoenix-theme="dark"] .metric,
html[data-phoenix-theme="dark"] .kpi,
html[data-phoenix-theme="dark"] .cell,
html[data-phoenix-theme="dark"] .info,
html[data-phoenix-theme="dark"] .mini,
html[data-phoenix-theme="dark"] .summary>div,
html[data-phoenix-theme="dark"] .detail-cell,
html[data-phoenix-theme="dark"] .run-item,
html[data-phoenix-theme="dark"] .item,
html[data-phoenix-theme="dark"] .job,
html[data-phoenix-theme="dark"] .stop,
html[data-phoenix-theme="dark"] .site,
html[data-phoenix-theme="dark"] .basket-row,
html[data-phoenix-theme="dark"] .basket-setup,
html[data-phoenix-theme="dark"] .route-edit-panel,
html[data-phoenix-theme="dark"] .route-edit-row,
html[data-phoenix-theme="dark"] .reorder-item{
  background:#151515!important;color:#fff!important;border-color:#343434!important
}
html[data-phoenix-theme="dark"] input,
html[data-phoenix-theme="dark"] select,
html[data-phoenix-theme="dark"] textarea{
  background:#0f0f0f!important;color:#fff!important;border-color:#484848!important
}
html[data-phoenix-theme="dark"] input::placeholder,
html[data-phoenix-theme="dark"] textarea::placeholder{color:#8f8f8f!important}
html[data-phoenix-theme="dark"] .btn,
html[data-phoenix-theme="dark"] button{
  background:#202020;color:#fff;border-color:#494949
}
html[data-phoenix-theme="dark"] .btn.primary,
html[data-phoenix-theme="dark"] .primary,
html[data-phoenix-theme="dark"] button.primary,
html[data-phoenix-theme="dark"] .btn:not(.danger):focus-visible{
  background:#ff7a00!important;color:#0b0b0b!important;border-color:#ff7a00!important;font-weight:750
}
html[data-phoenix-theme="dark"] a{color:#ff9b47}
html[data-phoenix-theme="dark"] .small,
html[data-phoenix-theme="dark"] .sub,
html[data-phoenix-theme="dark"] label,
html[data-phoenix-theme="dark"] .muted,
html[data-phoenix-theme="dark"] .mini span,
html[data-phoenix-theme="dark"] .metric span,
html[data-phoenix-theme="dark"] .kpi span,
html[data-phoenix-theme="dark"] .cell span,
html[data-phoenix-theme="dark"] .info span,
html[data-phoenix-theme="dark"] .detail-cell span{color:#b8b8b8!important}
html[data-phoenix-theme="dark"] table{color:#fff}
html[data-phoenix-theme="dark"] th{background:#1b1b1b!important;color:#d0d0d0!important;border-color:#343434!important}
html[data-phoenix-theme="dark"] td{border-color:#303030!important}
html[data-phoenix-theme="dark"] tr.active,
html[data-phoenix-theme="dark"] .run-item.active,
html[data-phoenix-theme="dark"] .item.active{background:#2a1607!important;outline:1px solid #ff7a00}
html[data-phoenix-theme="dark"] .progressbar,
html[data-phoenix-theme="dark"] .progress-line,
html[data-phoenix-theme="dark"] .filltrack{background:#292929!important;border-color:#494949!important}
html[data-phoenix-theme="dark"] .progressbar>div,
html[data-phoenix-theme="dark"] .progress-fill:not(.fullness){background:#ff7a00!important}
html[data-phoenix-theme="dark"] .notice:not(.good):not(.bad),
html[data-phoenix-theme="dark"] .status.busy,
html[data-phoenix-theme="dark"] .edit-notice:not(.good):not(.bad){background:#2a1607!important;color:#ffb16f!important;border-color:#6b3508!important}
html[data-phoenix-theme="dark"] .notice.good,
html[data-phoenix-theme="dark"] .status:not(.bad):not(.busy){background:#082c20!important;color:#7ee2b8!important}
html[data-phoenix-theme="dark"] .notice.bad,
html[data-phoenix-theme="dark"] .status.bad{background:#3a1010!important;color:#ffaaa3!important}
html[data-phoenix-theme="dark"] .badge{border:1px solid #454545}
html[data-phoenix-theme="dark"] .hidden{display:none!important}

/* Keep completed / warning / error status cards visually distinct in dark mode. */
html[data-phoenix-theme="dark"] .site.completed .site-head,
html[data-phoenix-theme="dark"] .stop.completed,
html[data-phoenix-theme="dark"] .completed:not(.badge){background:#0b241b!important}
html[data-phoenix-theme="dark"] .site.in_progress .site-head,
html[data-phoenix-theme="dark"] .in_progress:not(.badge){background:#0c2038!important}
html[data-phoenix-theme="dark"] .site.pending .site-head,
html[data-phoenix-theme="dark"] .pending:not(.badge){background:#30220b!important}
html[data-phoenix-theme="dark"] .site.skipped .site-head,
html[data-phoenix-theme="dark"] .skipped:not(.badge){background:#202020!important}

/* Leaflet / map treatment for night work. */
html[data-phoenix-theme="dark"] .leaflet-container{background:#0b0b0b!important}
html[data-phoenix-theme="dark"] .leaflet-tile-pane{filter:brightness(.58) contrast(1.12) saturate(.72)}
html[data-phoenix-theme="dark"] .leaflet-control,
html[data-phoenix-theme="dark"] .leaflet-control a{background:#171717!important;color:#fff!important;border-color:#404040!important}
html[data-phoenix-theme="dark"] .leaflet-popup-content-wrapper,
html[data-phoenix-theme="dark"] .leaflet-popup-tip{background:#171717!important;color:#fff!important}

/* System option uses either light or dark via JS, so light remains the existing Phoenix look. */
@media(max-width:600px){
  #phoenixAppearanceControl{right:9px;bottom:9px}
  #phoenixAppearanceToggle{width:43px;height:43px;font-size:19px}
  #phoenixAppearanceMenu{bottom:50px;width:190px}
}

/* -------------------------------------------------------------------------
   Contrast repair v7 — pale operational cards/pills must keep dark text
   when the surrounding Phoenix appearance is dark.
   ------------------------------------------------------------------------- */
html[data-phoenix-theme="dark"] .run-kpis > div,
html[data-phoenix-theme="dark"] .address-kpi,
html[data-phoenix-theme="dark"] .planning-area-kpis > div,
html[data-phoenix-theme="dark"] .locality-kpi{
  background:#f9fafb!important;
  color:#17202a!important;
  border-color:#d0d5dd!important;
}
html[data-phoenix-theme="dark"] .run-kpis > div *,
html[data-phoenix-theme="dark"] .address-kpi *,
html[data-phoenix-theme="dark"] .planning-area-kpis > div *,
html[data-phoenix-theme="dark"] .locality-kpi *{
  color:#344054!important;
}
html[data-phoenix-theme="dark"] .run-kpis > div strong,
html[data-phoenix-theme="dark"] .run-kpis > div b,
html[data-phoenix-theme="dark"] .address-kpi b,
html[data-phoenix-theme="dark"] .planning-area-kpis > div b,
html[data-phoenix-theme="dark"] .locality-kpi b{
  color:#101828!important;
}

/* Light/pastel status badges used throughout planning, reports and run control. */
html[data-phoenix-theme="dark"] .badge.assigned,
html[data-phoenix-theme="dark"] .badge.accepted,
html[data-phoenix-theme="dark"] .badge.completed,
html[data-phoenix-theme="dark"] .badge.cancelled,
html[data-phoenix-theme="dark"] .badge.skipped,
html[data-phoenix-theme="dark"] .badge.paused,
html[data-phoenix-theme="dark"] .badge.pending,
html[data-phoenix-theme="dark"] .badge.exception,
html[data-phoenix-theme="dark"] .badge.in_progress{
  font-weight:750!important;
}
html[data-phoenix-theme="dark"] .badge.assigned,
html[data-phoenix-theme="dark"] .badge.accepted{
  background:#e8eefc!important;
  color:#163f73!important;
  border-color:#b7c9e8!important;
}
html[data-phoenix-theme="dark"] .badge.completed{
  background:#dcfce7!important;
  color:#14532d!important;
  border-color:#86efac!important;
}
html[data-phoenix-theme="dark"] .badge.cancelled,
html[data-phoenix-theme="dark"] .badge.skipped{
  background:#e5e7eb!important;
  color:#1f2937!important;
  border-color:#9ca3af!important;
}
html[data-phoenix-theme="dark"] .badge.paused,
html[data-phoenix-theme="dark"] .badge.pending{
  background:#fef3c7!important;
  color:#78350f!important;
  border-color:#fcd34d!important;
}
html[data-phoenix-theme="dark"] .badge.in_progress{
  background:#dbeafe!important;
  color:#1e3a8a!important;
  border-color:#93c5fd!important;
}
html[data-phoenix-theme="dark"] .badge.exception{
  background:#fee2e2!important;
  color:#7f1d1d!important;
  border-color:#fca5a5!important;
}

/* Campaign status pills are also deliberately pale in dark appearance. */
html[data-phoenix-theme="dark"] .campaign-status-badge.approved,
html[data-phoenix-theme="dark"] .campaign-status-badge.reconciled{
  background:#dcfce7!important;color:#14532d!important
}
html[data-phoenix-theme="dark"] .campaign-status-badge.draft{
  background:#e5e7eb!important;color:#1f2937!important
}
html[data-phoenix-theme="dark"] .campaign-status-badge.bags_distributed,
html[data-phoenix-theme="dark"] .campaign-status-badge.awaiting_collection{
  background:#ffedd5!important;color:#7c2d12!important
}
html[data-phoenix-theme="dark"] .campaign-status-badge.collection_in_progress{
  background:#dbeafe!important;color:#1e3a8a!important
}
html[data-phoenix-theme="dark"] .campaign-status-badge.delivered_to_warehouse{
  background:#ede9fe!important;color:#4c1d95!important
}
html[data-phoenix-theme="dark"] .campaign-status-badge.cancelled{
  background:#fee2e2!important;color:#7f1d1d!important
}

/* Staff Onboarding: these panels intentionally stay light, so all copy inside
   them must remain dark and readable in dark appearance. */
html[data-phoenix-theme="dark"] .engagement-hero,
html[data-phoenix-theme="dark"] .work-box,
html[data-phoenix-theme="dark"] .step,
html[data-phoenix-theme="dark"] .check,
html[data-phoenix-theme="dark"] .perm,
html[data-phoenix-theme="dark"] .step-note{
  background:#f9fafb!important;
  color:#17202a!important;
  border-color:#d0d5dd!important;
}
html[data-phoenix-theme="dark"] .engagement-hero *,
html[data-phoenix-theme="dark"] .work-box *,
html[data-phoenix-theme="dark"] .step *,
html[data-phoenix-theme="dark"] .check *,
html[data-phoenix-theme="dark"] .perm *,
html[data-phoenix-theme="dark"] .step-note *{
  color:#344054!important;
}
html[data-phoenix-theme="dark"] .engagement-title,
html[data-phoenix-theme="dark"] .engagement-hero b,
html[data-phoenix-theme="dark"] .work-box b,
html[data-phoenix-theme="dark"] .check b,
html[data-phoenix-theme="dark"] .step-note b{
  color:#101828!important;
}
html[data-phoenix-theme="dark"] .step.active{
  background:#fff0f6!important;
  color:#7a1744!important;
  border-color:#c45888!important;
}
html[data-phoenix-theme="dark"] .step.active *,
html[data-phoenix-theme="dark"] .step.done *{color:inherit!important}
html[data-phoenix-theme="dark"] .step.done{
  background:#dcfce7!important;
  color:#14532d!important;
  border-color:#86efac!important;
}

/* Generic pale helper/status blocks that otherwise inherit white text. */
html[data-phoenix-theme="dark"] .fill-pill,
html[data-phoenix-theme="dark"] .legend span,
html[data-phoenix-theme="dark"] .notes,
html[data-phoenix-theme="dark"] .muted-box{
  background:#f3f4f6!important;
  color:#1f2937!important;
  border-color:#d1d5db!important;
}

/* White/light buttons remain readable when a module intentionally keeps them light. */
html[data-phoenix-theme="dark"] .btn.danger{
  background:#fff!important;
  color:#991b1b!important;
  border-color:#fca5a5!important;
  font-weight:750!important;
}

/* -------------------------------------------------------------------------
   Dark readability repair v8 — strengthen text on genuinely dark surfaces.
   Pale operational cards are reset again below so they retain dark text.
   ------------------------------------------------------------------------- */
html[data-phoenix-theme="dark"] h1,
html[data-phoenix-theme="dark"] h2,
html[data-phoenix-theme="dark"] h3,
html[data-phoenix-theme="dark"] h4,
html[data-phoenix-theme="dark"] h5,
html[data-phoenix-theme="dark"] h6,
html[data-phoenix-theme="dark"] legend,
html[data-phoenix-theme="dark"] .title,
html[data-phoenix-theme="dark"] .site-title,
html[data-phoenix-theme="dark"] .run-title,
html[data-phoenix-theme="dark"] .job-title,
html[data-phoenix-theme="dark"] .detail-title,
html[data-phoenix-theme="dark"] .section-title{
  color:#f7f7f7!important;
}

html[data-phoenix-theme="dark"] .small,
html[data-phoenix-theme="dark"] .sub,
html[data-phoenix-theme="dark"] .muted,
html[data-phoenix-theme="dark"] .meta,
html[data-phoenix-theme="dark"] .address,
html[data-phoenix-theme="dark"] .helper,
html[data-phoenix-theme="dark"] .hint,
html[data-phoenix-theme="dark"] label,
html[data-phoenix-theme="dark"] .photo-meta,
html[data-phoenix-theme="dark"] .drag-handle{
  color:#d0d0d0!important;
}

/* A number of early Phoenix pages used fixed light-theme greys inline. */
html[data-phoenix-theme="dark"] [style*="color:#667085"],
html[data-phoenix-theme="dark"] [style*="color: #667085"],
html[data-phoenix-theme="dark"] [style*="color:#475467"],
html[data-phoenix-theme="dark"] [style*="color: #475467"],
html[data-phoenix-theme="dark"] [style*="color:#344054"],
html[data-phoenix-theme="dark"] [style*="color: #344054"],
html[data-phoenix-theme="dark"] [style*="color:#17202a"],
html[data-phoenix-theme="dark"] [style*="color: #17202a"],
html[data-phoenix-theme="dark"] [style*="color:#101828"],
html[data-phoenix-theme="dark"] [style*="color: #101828"]{
  color:#e0e0e0!important;
}

/* Common dark containers should never inherit a light-theme dark font. */
html[data-phoenix-theme="dark"] .hero,
html[data-phoenix-theme="dark"] .section,
html[data-phoenix-theme="dark"] .sample,
html[data-phoenix-theme="dark"] .card,
html[data-phoenix-theme="dark"] .panel,
html[data-phoenix-theme="dark"] .module,
html[data-phoenix-theme="dark"] .run-item,
html[data-phoenix-theme="dark"] .job,
html[data-phoenix-theme="dark"] .stop,
html[data-phoenix-theme="dark"] .site,
html[data-phoenix-theme="dark"] .bin,
html[data-phoenix-theme="dark"] .detail-cell,
html[data-phoenix-theme="dark"] .info,
html[data-phoenix-theme="dark"] .cell{
  --ink:#f7f7f7;
  --muted:#d0d0d0;
}

/* Form values need stronger contrast than placeholders in night mode. */
html[data-phoenix-theme="dark"] input,
html[data-phoenix-theme="dark"] select,
html[data-phoenix-theme="dark"] textarea{
  color:#f7f7f7!important;
}
html[data-phoenix-theme="dark"] input:disabled,
html[data-phoenix-theme="dark"] select:disabled,
html[data-phoenix-theme="dark"] textarea:disabled,
html[data-phoenix-theme="dark"] input[readonly]{
  color:#dedede!important;
  opacity:1!important;
}
html[data-phoenix-theme="dark"] input::placeholder,
html[data-phoenix-theme="dark"] textarea::placeholder{
  color:#a9a9a9!important;
  opacity:1!important;
}

/* Preserve dark copy on deliberately pale cards/pills after the global repair. */
html[data-phoenix-theme="dark"] .run-kpis > div *,
html[data-phoenix-theme="dark"] .address-kpi *,
html[data-phoenix-theme="dark"] .planning-area-kpis > div *,
html[data-phoenix-theme="dark"] .locality-kpi *,
html[data-phoenix-theme="dark"] .engagement-hero *,
html[data-phoenix-theme="dark"] .work-box *,
html[data-phoenix-theme="dark"] .step *,
html[data-phoenix-theme="dark"] .check *,
html[data-phoenix-theme="dark"] .perm *,
html[data-phoenix-theme="dark"] .step-note *{
  color:#344054!important;
}
html[data-phoenix-theme="dark"] .run-kpis > div strong,
html[data-phoenix-theme="dark"] .run-kpis > div b,
html[data-phoenix-theme="dark"] .address-kpi b,
html[data-phoenix-theme="dark"] .planning-area-kpis > div b,
html[data-phoenix-theme="dark"] .locality-kpi b,
html[data-phoenix-theme="dark"] .engagement-title,
html[data-phoenix-theme="dark"] .engagement-hero b,
html[data-phoenix-theme="dark"] .work-box b,
html[data-phoenix-theme="dark"] .check b,
html[data-phoenix-theme="dark"] .step-note b{
  color:#101828!important;
}
html[data-phoenix-theme="dark"] .step.active,
html[data-phoenix-theme="dark"] .step.active *{
  color:#7a1744!important;
}

/* Pastel notices/status controls also retain their intentional dark/coloured copy. */
html[data-phoenix-theme="dark"] .badge.assigned,
html[data-phoenix-theme="dark"] .badge.accepted{color:#163f73!important}
html[data-phoenix-theme="dark"] .badge.completed{color:#14532d!important}
html[data-phoenix-theme="dark"] .badge.cancelled,
html[data-phoenix-theme="dark"] .badge.skipped{color:#1f2937!important}
html[data-phoenix-theme="dark"] .badge.paused,
html[data-phoenix-theme="dark"] .badge.pending{color:#78350f!important}
html[data-phoenix-theme="dark"] .badge.in_progress{color:#1e3a8a!important}
html[data-phoenix-theme="dark"] .badge.exception{color:#7f1d1d!important}

/* Bin Route Management: route list cards intentionally stay light in dark appearance.
   Keep all route-card copy dark and high contrast. */
html[data-phoenix-theme="dark"] .route-item{
  color:#17202a!important;
}
html[data-phoenix-theme="dark"] .route-item b{
  color:#101828!important;
}
html[data-phoenix-theme="dark"] .route-item .small{
  color:#475467!important;
}
html[data-phoenix-theme="dark"] .route-item .badge{
  color:#344054!important;
}
html[data-phoenix-theme="dark"] .route-item .badge.active{
  background:#ecfdf3!important;
  color:#067647!important;
  border-color:#abefc6!important;
}

/* Supervisor Live View: Open Exceptions use a dark warning treatment in dark appearance. */
html[data-phoenix-theme="dark"] #incidentList > .incident{
  background:#141414!important;
  border:1px solid #f59e0b!important;
  color:#ffcc80!important;
  box-shadow:none!important;
}
html[data-phoenix-theme="dark"] #incidentList > .incident b{
  color:#ff9800!important;
}
html[data-phoenix-theme="dark"] #incidentList > .incident .small{
  color:#ffd6a0!important;
}

/* Supervisor Live View: map information / GPS legend strip in dark appearance. */
html[data-phoenix-theme="dark"] .map-card > .pad{
  background:#101010!important;
  border-top:1px solid #f59e0b!important;
  color:#f5f5f5!important;
}
html[data-phoenix-theme="dark"] .map-card > .pad > .small{
  color:#f3f4f6!important;
  font-weight:600;
}
html[data-phoenix-theme="dark"] .map-card > .pad .legend,
html[data-phoenix-theme="dark"] .map-card > .pad .legend span{
  color:#ffb74d!important;
}
html[data-phoenix-theme="dark"] .map-card > .pad .dot{
  background:#ff9800!important;
  box-shadow:0 0 0 1px #ffd180;
}
html[data-phoenix-theme="dark"] .map-card > .pad .map-legend-dot{
  background:#f5f5f5!important;
  box-shadow:0 0 0 1px #bdbdbd;
}

/* Supervisor Live View v11: remove pale pill backgrounds from map legend labels. */
html[data-phoenix-theme="dark"] .map-card > .pad .legend > span{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#ffb74d!important;
  padding:0!important;
}
html[data-phoenix-theme="dark"] .map-card > .pad .legend > span > .dot{
  background:#ff9800!important;
  border:0!important;
  box-shadow:0 0 0 1px #ffd180!important;
}
html[data-phoenix-theme="dark"] .map-card > .pad .legend > span > .map-legend-dot{
  background:#f5f5f5!important;
  border:0!important;
  box-shadow:0 0 0 1px #bdbdbd!important;
}

/* Street Collection Planning v12: light audit/KPI panels must keep dark readable text in dark appearance. */
html[data-phoenix-theme="dark"] .audit > div,
html[data-phoenix-theme="dark"] .locality-kpi,
html[data-phoenix-theme="dark"] .address-kpi{
  background:#f8fafc!important;
  border-color:#cbd5e1!important;
  color:#17202a!important;
}
html[data-phoenix-theme="dark"] .audit > div *,
html[data-phoenix-theme="dark"] .locality-kpi *,
html[data-phoenix-theme="dark"] .address-kpi *{
  color:#17202a!important;
}
html[data-phoenix-theme="dark"] .audit > div .small,
html[data-phoenix-theme="dark"] .locality-kpi span,
html[data-phoenix-theme="dark"] .address-kpi span{
  color:#475467!important;
}
html[data-phoenix-theme="dark"] .audit > div b,
html[data-phoenix-theme="dark"] .locality-kpi b,
html[data-phoenix-theme="dark"] .address-kpi b{
  color:#101828!important;
}

/* My Work v16: white work cards keep strong dark secondary text in dark appearance. */
html[data-phoenix-theme="dark"] .work{
  background:#f8fafc!important;
  border-color:#cbd5e1!important;
  color:#17202a!important;
}
html[data-phoenix-theme="dark"] .work b{
  color:#f57c00!important;
}
html[data-phoenix-theme="dark"] .work .small{
  color:#475467!important;
  font-weight:600;
}

/* Bin Site Management v17: site list cards intentionally stay light in dark appearance. */
html[data-phoenix-theme="dark"] .site-item{
  color:#17202a!important;
}
html[data-phoenix-theme="dark"] .site-item b{
  color:#101828!important;
}
html[data-phoenix-theme="dark"] .site-item .small{
  color:#475467!important;
  font-weight:600;
}
html[data-phoenix-theme="dark"] .site-item .badge{
  color:#344054!important;
}
html[data-phoenix-theme="dark"] .site-item .badge.active{
  background:#ecfdf3!important;
  color:#067647!important;
  border-color:#abefc6!important;
}
html[data-phoenix-theme="dark"] .site-item .badge.inactive{
  background:#f2f4f7!important;
  color:#475467!important;
  border-color:#d0d5dd!important;
}


/* Bin Collection Dashboard v18: light reporting tables stay readable in dark appearance. */
html[data-phoenix-theme="dark"] .bin-dashboard-page .table-wrap table,
html[data-phoenix-theme="dark"] .bin-dashboard-page .table-wrap tbody,
html[data-phoenix-theme="dark"] .bin-dashboard-page .table-wrap tr,
html[data-phoenix-theme="dark"] .bin-dashboard-page .table-wrap td{
  background:#ffffff!important;
  color:#17202a!important;
}
html[data-phoenix-theme="dark"] .bin-dashboard-page .table-wrap th{
  background:#f8fafc!important;
  color:#344054!important;
}
html[data-phoenix-theme="dark"] .bin-dashboard-page .table-wrap tr:hover td{
  background:#f2f4f7!important;
}
html[data-phoenix-theme="dark"] .bin-dashboard-page .table-wrap .badge{
  background:#f2f4f7!important;
  border:1px solid #d0d5dd!important;
  color:#344054!important;
  font-weight:700;
}
html[data-phoenix-theme="dark"] .bin-dashboard-page .table-wrap .badge.good{background:#ecfdf3!important;color:#067647!important;border-color:#abefc6!important}
html[data-phoenix-theme="dark"] .bin-dashboard-page .table-wrap .badge.warn{background:#fffaeb!important;color:#b54708!important;border-color:#fedf89!important}
html[data-phoenix-theme="dark"] .bin-dashboard-page .table-wrap .badge.bad{background:#fef3f2!important;color:#b42318!important;border-color:#fecdca!important}

/* Bin Collection Dashboard v20: brighten small grey copy on dark panels for easier phone reading. */
html[data-phoenix-theme="dark"] .bin-dashboard-page header .small,
html[data-phoenix-theme="dark"] .bin-dashboard-page .filters label,
html[data-phoenix-theme="dark"] .bin-dashboard-page .kpi span,
html[data-phoenix-theme="dark"] .bin-dashboard-page .section-head .small,
html[data-phoenix-theme="dark"] .bin-dashboard-page #recommendations .small,
html[data-phoenix-theme="dark"] .bin-dashboard-page #userLabel{
  color:#f8fafc!important;
}
html[data-phoenix-theme="dark"] .bin-dashboard-page .chartbox,
html[data-phoenix-theme="dark"] .bin-dashboard-page .chartbox canvas{
  color:#ffffff!important;
}