/**
 * Light theme — only when html[data-theme="light"]. Dark = no attribute (unchanged).
 */

html[data-theme="light"] {
  --color-bg: #f1f5f9;
  --color-panel: #ffffff;
  --color-border: #94a3b8;
  --color-text: #020617;
  --color-text-muted: #1e293b;
  --color-text-inverse: #0f172a;
  --color-navy-900: #0f172a;
  --color-navy-800: #1e293b;
  --color-navy-700: #0f172a;
  --color-slate-800: #334155;
  --color-link: #0369a1;

  --staff-glass-pad: #e8ecf2;
  --staff-glass-pad-deep: #dde3eb;
  --staff-glass-fill: rgba(255, 255, 255, 0.88);
  --staff-glass-fill-soft: rgba(255, 255, 255, 0.94);
  --staff-glass-fill-chip: rgba(255, 255, 255, 0.98);
  --staff-glass-border: 1px solid rgba(15, 23, 42, 0.18);
  --staff-glass-border-top: 1px solid rgba(255, 255, 255, 1);
  --staff-glass-blur: blur(16px) saturate(1.15);
  --staff-glass-shadow:
    0 4px 18px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --staff-glass-shadow-chip: 0 2px 10px rgba(15, 23, 42, 0.06);
  --staff-glow-border: 1px solid rgba(15, 23, 42, 0.12);
  --staff-glow-border-top: 1px solid rgba(255, 255, 255, 0.95);
  --staff-glow-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
  --staff-glow-shadow-hover: 0 4px 14px rgba(15, 23, 42, 0.1);
  --staff-glow-text: none;
  --staff-glass-text: #0f172a;
  --staff-glass-muted: #1e293b;
  --staff-glass-accent: #0d9488;
  --toolbar-live-lbl: #1e293b;
}

html[data-theme="light"] body,
html[data-theme="light"] .app-fullscreen-frame {
  background:
    radial-gradient(ellipse 90% 60% at 10% 0%, rgba(56, 189, 248, 0.12), transparent 50%),
    radial-gradient(ellipse 70% 50% at 95% 100%, rgba(45, 212, 191, 0.1), transparent 48%),
    linear-gradient(165deg, #f8fafc 0%, #e2e8f0 45%, #f1f5f9 100%) !important;
  color: #0f172a !important;
  background-attachment: fixed;
}

html[data-theme="light"] body::before,
html[data-theme="light"] .app-fullscreen-frame::before {
  opacity: 0.25;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0,
      transparent 18px,
      rgba(15, 23, 42, 0.02) 18px,
      rgba(15, 23, 42, 0.02) 19px
    );
}

html[data-theme="light"] .my-sidebar {
  background: #dde3eb !important;
  color: #0f172a !important;
}

html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-toggle:hover {
  background: rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .nav-item--active {
  background: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
  box-shadow: inset 3px 0 0 #e11d48 !important;
}

html[data-theme="light"] .nav-row--account,
html[data-theme="light"] .nav-row--announce,
html[data-theme="light"] .nav-row--period,
html[data-theme="light"] .nav-row--member,
html[data-theme="light"] .nav-row--summary,
html[data-theme="light"] .nav-row--report,
html[data-theme="light"] .nav-row--delete,
html[data-theme="light"] .nav-row--payment {
  --row-header-bg: rgba(15, 23, 42, 0.05);
  --row-header-bg-hover: rgba(15, 23, 42, 0.08);
  --row-header-bg-open: rgba(15, 23, 42, 0.1);
  --row-header-text: #0f172a;
  --row-active-bg: rgba(13, 148, 136, 0.15);
}

html[data-theme="light"] .nav-toggle,
html[data-theme="light"] .nav-row--account > .nav-item,
html[data-theme="light"] .nav-row--announce > .nav-item,
html[data-theme="light"] .nav-row--payment > .nav-item {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .submenu {
  background: rgba(255, 255, 255, 0.65) !important;
  border-top-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #dashboardGrid .cell--topbar .tab {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme="light"] #dashboardGrid .cell--topbar .tab--active {
  background: #fff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .my-header .tab {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme="light"] .my-header .tab--active {
  background: #fff !important;
  color: #0f172a !important;
}

html[data-theme="light"] #dashboardGrid .cell--topbar .brand,
html[data-theme="light"] .my-header .brand {
  color: #0f172a !important;
}

html[data-theme="light"] .topbar-clock {
  color: #1e293b !important;
}

html[data-theme="light"] .cell--workspace,
html[data-theme="light"] .my-workspace {
  color: #0f172a;
}

/* ---------- Member light ---------- */
html[data-theme="light"] {
  --mp-bg: #e8ecf2;
  --mp-meta-text: #0f172a;
  --mp-glass-text: #0f172a;
  --mp-dock-bg: #f1f5f9;
  --mp-dock-bg-open: rgba(255, 255, 255, 0.92);
  --mp-kb-pad-bg: #dde3eb;
  --mp-glass-fill: rgba(255, 255, 255, 0.94);
  --mp-glass-fill-soft: rgba(255, 255, 255, 0.9);
  --mp-glass-text: #020617;
  --mp-glass-muted: #1e293b;
  --mp-glass-border: rgba(15, 23, 42, 0.22);
  --mp-glass-border-top: rgba(255, 255, 255, 0.98);
  --mp-glass-border-left: rgba(15, 23, 42, 0.16);
  --mp-glass-border-right: rgba(15, 23, 42, 0.2);
  --mp-glass-border-bottom: rgba(15, 23, 42, 0.32);
  --mp-feed-bg: #fff;
  --mp-feed-border: #64748b;
}

html[data-theme="light"] body.member-page {
  background: linear-gradient(165deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%) !important;
  color: #0f172a !important;
}

html[data-theme="light"] body.member-page .mp-meta__row {
  background: rgba(255, 255, 255, 0.92) !important;
  border-top-color: rgba(15, 23, 42, 0.08) !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

html[data-theme="light"] body.member-page .mp-meta__nav,
html[data-theme="light"] body.member-page .mp-meta__user,
html[data-theme="light"] body.member-page .mp-meta__period-name,
html[data-theme="light"] body.member-page .mp-meta__date-label,
html[data-theme="light"] body.member-page .mp-meta__panel-type,
html[data-theme="light"] body.member-page .mp-meta__status-prefix,
html[data-theme="light"] body.member-page .mp-meta__status-value,
html[data-theme="light"] body.member-page .mp-meta__logout {
  color: #0f172a !important;
}

html[data-theme="light"] body.member-page .mobile-main-workspace {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* ---------- Role hub (index / login.html) ---------- */
html[data-theme="light"] body.hub-role-page {
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
  color: #0f172a;
}

html[data-theme="light"] body.hub-role-page .card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body.hub-role-page .hint {
  color: #1e293b;
  opacity: 1;
}

/* ---------- Member / sub-agent / staff login ---------- */
html[data-theme="light"] body.member-login-page {
  background: linear-gradient(160deg, #f1f5f9 0%, #e2e8f0 45%, #f8fafc 100%);
  color: #0f172a;
}

html[data-theme="light"] body.member-login-page .member-login-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body.sa-login-page {
  background: linear-gradient(160deg, #f5f3ff 0%, #e2e8f0 45%, #f8fafc 100%);
  color: #0f172a;
}

html[data-theme="light"] body.sa-login-page .sa-login-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}

html[data-theme="light"] body.login-page .login-card {
  background: #fff;
  border-color: #cbd5e1;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body.login-page .login-card__title,
html[data-theme="light"] body.login-page .login-card__subtitle,
html[data-theme="light"] body.login-page .login-hint {
  color: #1e293b;
}

/* ---------- Sub-agent app shell ---------- */
html[data-theme="light"] body.sa-app {
  background: #f1f5f9;
  color: #0f172a;
}

/* ========== Light theme: readable text (dark unchanged) ========== */

/* Staff shell — top bar */
html[data-theme="light"] .cell--topbar,
html[data-theme="light"] .my-header,
html[data-theme="light"] .cell--topbar .topbar-left,
html[data-theme="light"] .cell--topbar .topbar-right,
html[data-theme="light"] .my-header .topbar-left,
html[data-theme="light"] .my-header .topbar-right {
  color: #0f172a !important;
}

html[data-theme="light"] .topbar-ticker {
  color: #1d4ed8 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .topbar-clock,
html[data-theme="light"] .topbar-clock__date,
html[data-theme="light"] .topbar-clock__time {
  color: #1e293b !important;
  opacity: 1 !important;
}

html[data-theme="light"] .tb-lbl {
  color: #1e293b !important;
}

html[data-theme="light"] .tab--active {
  color: #0f172a !important;
}

html[data-theme="light"] .btn--signout,
html[data-theme="light"] .cell--topbar .btn,
html[data-theme="light"] .my-header .btn {
  color: #0f172a !important;
}

/* Sidebar / nav */
html[data-theme="light"] .cell--sidebar,
html[data-theme="light"] .nav-item,
html[data-theme="light"] .nav-toggle,
html[data-theme="light"] .nav-parent,
html[data-theme="light"] .submenu .nav-item {
  color: #0f172a !important;
}

/* Workspace panels */
html[data-theme="light"] #dashboardGrid,
html[data-theme="light"] .my-workspace,
html[data-theme="light"] .cell--workspace,
html[data-theme="light"] [class*="-panel"],
html[data-theme="light"] .summary-page,
html[data-theme="light"] .payment-panel {
  color: #0f172a;
}

/* Muted / secondary / hints */
html[data-theme="light"] .muted:not(td):not(th),
html[data-theme="light"] #dashboardGrid .muted,
html[data-theme="light"] #dashboardGrid table .muted,
html[data-theme="light"] .table-wrap .muted,
html[data-theme="light"] .table-loading,
html[data-theme="light"] .agent-summary-grid-table__empty,
html[data-theme="light"] .login-card__subtitle,
html[data-theme="light"] .login-hint,
html[data-theme="light"] .member-login-card__subtitle,
html[data-theme="light"] .sa-login-card__subtitle,
html[data-theme="light"] .admin-agent-settings-intro,
html[data-theme="light"] body.hub-role-page .sub {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* Form labels */
html[data-theme="light"] label,
html[data-theme="light"] .login-field label,
html[data-theme="light"] .form-group label,
html[data-theme="light"] .agent-mgmt-inline-label,
html[data-theme="light"] .member-login-field label,
html[data-theme="light"] .sa-login-field label {
  color: #1e293b !important;
}

/* Placeholders & disabled */
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .sa-search::placeholder {
  color: #1e293b !important;
  opacity: 1 !important;
}

html[data-theme="light"] input:disabled,
html[data-theme="light"] select:disabled,
html[data-theme="light"] textarea:disabled,
html[data-theme="light"] button:disabled,
html[data-theme="light"] .is-disabled {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* Tables on glass (cell text; opaque staff tables keep --staff-table-ink) */
html[data-theme="light"] #dashboardGrid table td,
html[data-theme="light"] #dashboardGrid table th,
html[data-theme="light"] .summary-page table td,
html[data-theme="light"] .summary-page table th,
html[data-theme="light"] .table-wrap table td,
html[data-theme="light"] .table-wrap table th {
  color: #0f172a;
}

html[data-theme="light"] #dashboardGrid table .muted,
html[data-theme="light"] .summary-page table .muted {
  color: #1e293b !important;
}

/* Member — override dark-glass light ink on light surfaces */
html[data-theme="light"] body.member-page .mp-feed--2d,
html[data-theme="light"] body.member-page .mp-feed--3d,
html[data-theme="light"] body.member-page .mp-feed-stack {
  color: #0f172a !important;
}

html[data-theme="light"] body.member-page .mp-feed-placeholder,
html[data-theme="light"] body.member-page .member-guide-block__lbl,
html[data-theme="light"] body.member-page .member-menu-password-form__lbl,
html[data-theme="light"] body.member-page .member-menu-password-form__hint,
html[data-theme="light"] body.member-page .member-menu-profile-details dt,
html[data-theme="light"] body.member-page .member-menu-link__hint {
  color: #1e293b !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.member-page .member-guide-block__val,
html[data-theme="light"] body.member-page .member-guide-block__val li,
html[data-theme="light"] body.member-page .member-guide-block__val p,
html[data-theme="light"] body.member-page .member-guide-block__val span,
html[data-theme="light"] body.member-page .member-guide-ol,
html[data-theme="light"] body.member-page .member-guide-ul,
html[data-theme="light"] body.member-page .member-guide-ol li,
html[data-theme="light"] body.member-page .member-guide-ul li,
html[data-theme="light"] body.member-page .member-guide-inline-panel__body,
html[data-theme="light"] body.member-page .member-guide-inline-panel__body li,
html[data-theme="light"] body.member-page .member-guide-inline-panel__body p,
html[data-theme="light"] body.member-page .member-guide-inline-panel__body span,
html[data-theme="light"] body.member-page .member-menu-action,
html[data-theme="light"] body.member-page .member-menu-link,
html[data-theme="light"] body.member-page .member-menu-link__label,
html[data-theme="light"] body.member-page .member-menu-profile-details,
html[data-theme="light"] body.member-page .member-menu-profile-details dd {
  color: #0f172a !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.member-page .member-guide-r-col__title,
html[data-theme="light"] body.member-page .member-guide-composer,
html[data-theme="light"] body.member-page .member-guide-inline-panel__title {
  color: #0f766e !important;
}

html[data-theme="light"] body.member-page .member-menu-action--primary {
  color: #0f766e !important;
}

html[data-theme="light"] body.member-page .member-guide-kbd {
  color: #0f172a !important;
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

/* Sub-agent app (main shell; header bar stays purple/white) */
html[data-theme="light"] body.sa-app .sa-shell,
html[data-theme="light"] body.sa-app .sa-view,
html[data-theme="light"] body.sa-app .sa-split,
html[data-theme="light"] body.sa-app .sa-chat-list,
html[data-theme="light"] body.sa-app .sa-member-meta,
html[data-theme="light"] body.sa-app .sa-thread-summary,
html[data-theme="light"] body.sa-app .sa-thread-feed,
html[data-theme="light"] body.sa-app .sa-member-menu-card {
  color: #0f172a;
}

html[data-theme="light"] body.sa-app .sa-home-hint,
html[data-theme="light"] body.sa-app .sa-empty,
html[data-theme="light"] body.sa-app .sa-muted,
html[data-theme="light"] body.sa-app .sa-detail-empty__sub,
html[data-theme="light"] body.sa-app .sa-thread-feed .sa-muted,
html[data-theme="light"] body.sa-app .sa-member-menu-card__hint,
html[data-theme="light"] body.sa-app .sa-detail-empty__title {
  color: #1e293b !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.sa-app .sa-member-meta__period,
html[data-theme="light"] body.sa-app .sa-thread-bar__ro {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* ---------- Member 2D/3D — beat member-dark-glass on light surfaces ---------- */
html[data-theme="light"] body.member-page .mp-dock--keyboard-open,
html[data-theme="light"] body.member-page #mpDock.mp-dock--keyboard-open,
html[data-theme="light"] body.member-page #mp3dDock.mp-dock--keyboard-open {
  --mp-glass-text: #020617;
}

html[data-theme="light"] body.member-page .mp-kb-key,
html[data-theme="light"] body.member-page .mp-kb-key--cat,
html[data-theme="light"] body.member-page #mp3dKeyboard .mp-kb-key,
html[data-theme="light"] body.member-page #mp3dKeyboard .key-btn {
  background: var(--mp-glass-fill, rgba(255, 255, 255, 0.94)) !important;
  color: #020617 !important;
  text-shadow: none !important;
  border: 1.5px solid #64748b !important;
  border-top-color: #f8fafc !important;
  border-left-color: #94a3b8 !important;
  border-right-color: #64748b !important;
  border-bottom-color: #475569 !important;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] body.member-page .mp-kb-key__hide-sub {
  color: #1e293b !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.member-page .mp-kb-key:disabled,
html[data-theme="light"] body.member-page .mp-kb-key.mp-kb-dim,
html[data-theme="light"] body.member-page .mp-kb-key--cat:disabled,
html[data-theme="light"] body.member-page .mp-kb-key--cat.mp-kb-dim,
html[data-theme="light"] body.member-page .mp-keyboard--2d .mp-kb-key.mp-kb-dim,
html[data-theme="light"] body.member-page .mp-keyboard--3d .mp-kb-key.mp-kb-dim,
html[data-theme="light"] body.member-page #mp3dKeyboard .mp-kb-key.mp-kb-dim,
html[data-theme="light"] body.member-page .mp-send-btn.mp-kb-dim,
html[data-theme="light"] body.member-page .mp-send-btn:disabled,
html[data-theme="light"] body.member-page .mp-dock--keyboard-open .mp-send-btn:not(.mp-send-btn--ready) {
  background: #e2e8f0 !important;
  color: #475569 !important;
  border-color: #94a3b8 !important;
  border-top-color: #cbd5e1 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.member-page .mp-dock--keyboard-open .mp-recall-bar,
html[data-theme="light"] body.member-page .mp-dock--keyboard-open .mp-recall-bar__btn,
html[data-theme="light"] body.member-page .mp-dock--keyboard-open .mp-recall-bar__clock,
html[data-theme="light"] body.member-page .mp-dock--keyboard-open .mp-yangon-clock__time,
html[data-theme="light"] body.member-page .mp-dock--keyboard-open .mp-recall-bar__total {
  color: #020617 !important;
  border-color: #64748b !important;
}

html[data-theme="light"] body.member-page .mp-dock--keyboard-open .mp-recall-bar__val--empty {
  color: #475569 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.member-page .mp-feed-line,
html[data-theme="light"] body.member-page .mp-feed-grid,
html[data-theme="light"] body.member-page .mp-feed-cell,
html[data-theme="light"] body.member-page .mp-feed-placeholder {
  color: #020617 !important;
  border-color: #94a3b8 !important;
}

html[data-theme="light"] body.member-page .mp-dock--keyboard-open .mp-input-form__bar,
html[data-theme="light"] body.member-page .mp-dock--keyboard-open .mp-input-field__value,
html[data-theme="light"] body.member-page .mp-dock--keyboard-open .mp-input-field__label {
  color: #020617 !important;
  border-color: #64748b !important;
}

/* ---------- Staff 2D/3D main board (phone / tablet) ---------- */
html[data-theme="light"] .main2d-page-head__mark,
html[data-theme="light"] .main-board-aside-title,
html[data-theme="light"] .main-board-agent-caret,
html[data-theme="light"] .main-board-member-row__meta,
html[data-theme="light"] .main-board-grid-hint,
html[data-theme="light"] .main-board-footer-box__lbl {
  color: #1e293b !important;
}

html[data-theme="light"] .main-board-aside,
html[data-theme="light"] .main-board-agent-block,
html[data-theme="light"] .main-board-grid-wrap {
  border-color: #94a3b8 !important;
}

html[data-theme="light"] .main-board-aside-title {
  background: #e2e8f0 !important;
  border-bottom-color: #94a3b8 !important;
}