/* Light theme: shared colours and the sidebar switch. Loads after theme-light.generated.css,
   which mirrors the dark stylesheets' colour rules; put hand-made fixes here. */
:root[data-theme="light"]{
  /* Colours from the Flutter app's light theme (lib/src/tasda/tasda_theme.dart, TasdaColors). */
  color-scheme:light;
  --bg-main:#f7f8fa;
  --bg-panel:#ffffff;
  --bg-panel-soft:rgba(255,255,255,.92);
  --bg-input:#ffffff;
  --border-color:#d7dee7;
  --border-strong:#c3ccd8;
  --text-primary:#050505;
  --text-secondary:#172033;
  --text-muted:#64748b;
  --primary:#52e5a5;
  --primary-hover:#3fd893;
  --violet:#6556d8;
  --shadow-hard:0 1px 2px rgba(15,23,42,.06);
}

/* Layout surfaces: #f7f8fa page, white sidebar and cards with #d7dee7 lines, as in the app. */
:root[data-theme="light"] body{background:#f7f8fa}
:root[data-theme="light"] .app-sidebar{background:#fff;border-right:1px solid #d7dee7;box-shadow:none}
:root[data-theme="light"] .app-main{background:transparent;box-shadow:none}
:root[data-theme="light"] .nav-link:hover,:root[data-theme="light"] .nav-link.active{background:#eef2f5}
/* Dark-theme decoration that turns into noise on white: pixel ground strip and the avatar glow. */
:root[data-theme="light"] .app-main::after,:root[data-theme="light"] .representative-detail-heading:before{display:none}
:root[data-theme="light"] .action-btn-pill{background:#fff;border-color:#d7dee7;box-shadow:0 1px 2px rgba(15,23,42,.05)}
:root[data-theme="light"] .action-btn-pill:hover{background:#eef2f5;border-color:#c3ccd8}

/* Logo: black wordmark, the brand dot keeps its green. */
:root[data-theme="light"] .brand-logo,:root[data-theme="light"] .main-brand-logo,:root[data-theme="light"] .builder-brand{color:#000;text-shadow:none}
:root[data-theme="light"] .brand-logo span,:root[data-theme="light"] .main-brand-logo span,:root[data-theme="light"] .builder-brand span{color:var(--primary)}
:root[data-theme="light"] body.sidebar-collapsed .brand-logo::before{color:#000}
:root[data-theme="light"] body.sidebar-collapsed .brand-logo::after{color:var(--primary)}

/* Home Ida demo card: a white card in the light theme instead of the dark default design. */
:root[data-theme="light"] .home-card-demo-card{--dcard-bg:#fff;--dcard-bg-top:#fff;--dcard-panel:#f7f8fa;--dcard-text:#050505;--dcard-muted:#64748b;--dcard-button:#fff;--dcard-button-border:#d7dee7;border-color:#d7dee7;box-shadow:0 1px 3px rgba(15,23,42,.05),0 20px 50px -20px rgba(15,23,42,.15)}
:root[data-theme="light"] .home-card-demo-card .dcard-identity p{color:#13764f}

/* Home hero secondary buttons (My cards, My requests): dark text on their white face; the generated
   rule gives every hero button the primary button's white text. */
:root[data-theme="light"] .home-represent-start.secondary,:root[data-theme="light"] .home-represent-start.secondary:hover{color:#050505}
/* The small "new" word above the count sits on the black primary button. */
:root[data-theme="light"] .home-represent-start:not(.secondary) .home-represent-count-first small{color:#52e5a5}

/* Voice call controls (voice-call.php): the generated pale-grey circles vanished on the white stage and the
   mic is drawn with white strokes. White faces with a line and soft shadow, black strokes, black Start. */
:root[data-theme="light"] .voice-control-icon,:root[data-theme="light"] .voice-chat-button .voice-control-icon{background:#fff;color:#050505;border:1px solid #d7dee7;box-shadow:0 6px 16px rgba(15,23,42,.1)}
:root[data-theme="light"] .voice-chat-button:hover .voice-control-icon{background:#f7f8fa}
:root[data-theme="light"] .voice-mute-button .voice-control-icon::before,:root[data-theme="light"] .voice-mute-button .voice-control-icon::after{border-color:#050505}
:root[data-theme="light"] .voice-mute-button.is-muted .voice-control-icon{background:#ff6674;border-color:#ff6674}
:root[data-theme="light"] .voice-mute-button.is-muted .voice-control-icon::before,:root[data-theme="light"] .voice-mute-button.is-muted .voice-control-icon::after{border-color:#fff}
:root[data-theme="light"] .voice-call-primary .voice-control-icon{background:#050505;border-color:#050505;color:#fff}
:root[data-theme="light"] .voice-call-primary.is-active .voice-control-icon{background:#d9385d;border-color:#d9385d;color:#fff}