/* TS WhatsApp v13.0.7 — theme color contracts and collapsed-sidebar footer.
   Last loaded, all selectors are scoped to the TS Studio UI. */
html[data-theme="light"]{
  color-scheme:light;
  --studio-bg:#f4f7fb;--studio-paper:#fff;--studio-tint:#f8fafd;--studio-wash:#edf2ff;
  --studio-ink:#17253d;--studio-sub:#586d89;--studio-line:#dfe6f1;--studio-line-strong:#cbd7e6;
  --studio-accent:#315de1;--studio-accent-hi:#2049bc;--studio-good:#087e65;--studio-menu:#fff;
  --studio-shadow:0 3px 18px rgba(26,46,77,.045);
  --bg:var(--studio-bg);--panel:var(--studio-paper);--panel-2:var(--studio-tint);--panel-3:var(--studio-wash);
  --sidebar:var(--studio-paper);--text:var(--studio-ink);--muted:var(--studio-sub);--muted2:#7890ab;
  --border:var(--studio-line);--border-soft:var(--studio-line);--green:#09986d;--green-2:#077956;
  --green-soft:#e5f6ef;--green-border:#b7e7d4;--blue:#315de1;
  --wz-bg:var(--studio-bg);--wz-surface:var(--studio-paper);--wz-surface-2:var(--studio-tint);
  --wz-surface-3:var(--studio-wash);--wz-sidebar:var(--studio-paper);
  --wz-line:var(--studio-line);--wz-line-strong:var(--studio-line-strong);--wz-text:var(--studio-ink);
  --wz-muted:var(--studio-sub);--wz-muted-2:#7890ab;
  --r-bg:var(--studio-bg);--r-surface:var(--studio-paper);--r-surface2:var(--studio-tint);
  --r-sidebar:var(--studio-paper);--r-text:var(--studio-ink);--r-muted:var(--studio-sub);
  --r-border:var(--studio-line);--r-primary:#315de1;--r-primary-pale:var(--studio-wash);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --studio-bg:#0c1422;--studio-paper:#152236;--studio-tint:#1b2b42;--studio-wash:#22365a;
  --studio-ink:#f0f5ff;--studio-sub:#b0c2dc;--studio-line:#32445e;--studio-line-strong:#49617f;
  --studio-accent:#a0bbff;--studio-accent-hi:#c2d1ff;--studio-good:#52ddba;--studio-menu:#1b2940;
  --studio-shadow:0 3px 22px rgba(0,0,0,.19);
  --bg:var(--studio-bg);--panel:var(--studio-paper);--panel-2:var(--studio-tint);--panel-3:var(--studio-wash);
  --sidebar:var(--studio-paper);--text:var(--studio-ink);--muted:var(--studio-sub);--muted2:#8ba4c4;
  --border:var(--studio-line);--border-soft:var(--studio-line);--green:#46ceaa;--green-2:#36af90;
  --green-soft:rgba(52,201,159,.13);--green-border:rgba(52,201,159,.33);--blue:#a0bbff;
  --wz-bg:var(--studio-bg);--wz-surface:var(--studio-paper);--wz-surface-2:var(--studio-tint);
  --wz-surface-3:var(--studio-wash);--wz-sidebar:var(--studio-paper);
  --wz-line:var(--studio-line);--wz-line-strong:var(--studio-line-strong);--wz-text:var(--studio-ink);
  --wz-muted:var(--studio-sub);--wz-muted-2:#8ba4c4;
  --r-bg:var(--studio-bg);--r-surface:var(--studio-paper);--r-surface2:var(--studio-tint);
  --r-sidebar:var(--studio-paper);--r-text:var(--studio-ink);--r-muted:var(--studio-sub);
  --r-border:var(--studio-line);--r-primary:#a0bbff;--r-primary-pale:var(--studio-wash);
}

/* The remaining old theme styles still contain fixed colors. Constrain the global shells
   and module surfaces to theme tokens, while not repainting deliberate chat bubbles. */
html[data-theme] body.ts-studio,
html[data-theme] body.ts-studio .app-shell,
html[data-theme] body.ts-studio .workspace,
html[data-theme] body.ts-studio .content{
  background:var(--studio-bg)!important;color:var(--studio-ink)!important;
}
html[data-theme] body.ts-studio .app-shell>.sidebar,
html[data-theme] body.ts-studio .topbar,
html[data-theme] body.ts-studio .studio-inbox-account,
html[data-theme] body.ts-studio .studio-inbox,
html[data-theme] body.ts-studio .studio-inbox .inbox-v2-list-panel,
html[data-theme] body.ts-studio .studio-inbox .inbox-v2-main,
html[data-theme] body.ts-studio .content :is(.card,.panel,.section,.content-card,.module-card,.stat-card,.stats-card,.table-card,.provider-section,.studio-module-intro,.studio-ai-numbers,.ai-bot-card,.ai-bot-accordion,.studio-dashboard-overview .dashboard-attention-tiles a,.workspace-summary-hero),
html[data-theme] body.ts-studio :is(.account-dropdown,.v2-palette-dialog){
  background:var(--studio-paper)!important;color:var(--studio-ink)!important;border-color:var(--studio-line)!important;
}
html[data-theme] body.ts-studio .content :is(.card,.panel,.section,.content-card,.module-card,.stat-card,.stats-card,.table-card,.provider-section,.studio-module-intro,.studio-ai-numbers,.ai-bot-card,.ai-bot-accordion,.workspace-summary-hero){box-shadow:var(--studio-shadow)!important}
html[data-theme] body.ts-studio :is(.sidebar .side-nav .nav-item,.studio-sidebar-footer,.sidebar-width-toggle,.topbar .breadcrumb,.account-dropdown,.account-dropdown a,.topbar-right,.workspace-switcher,.workspace-static){color:var(--studio-ink)!important}
html[data-theme] body.ts-studio :is(.breadcrumb-eyebrow,.studio-overline,.studio-module-intro p,.muted,.small,.form-help,.stat-label,.studio-page-heading p){color:var(--studio-sub)!important}
html[data-theme] body.ts-studio .sidebar .side-nav .nav-item:not(.active):not(:hover){color:var(--studio-sub)!important}
html[data-theme] body.ts-studio .sidebar .side-nav .nav-item.active{color:var(--studio-accent)!important;background:var(--studio-wash)!important}

/* Form fields, option menus, labels, dropdowns and search. */
html[data-theme] body.ts-studio :is(.content,.account-dropdown,.v2-palette-dialog) label{color:var(--studio-ink)!important}
html[data-theme] body.ts-studio .content :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),textarea,select),
html[data-theme] body.ts-studio .account-dropdown :is(input,select),
html[data-theme] body.ts-studio .v2-palette-dialog input,
html[data-theme] body.ts-studio .topbar-search input[type=search]{
  background:var(--studio-tint)!important;color:var(--studio-ink)!important;
  border-color:var(--studio-line-strong)!important;
}
html[data-theme] body.ts-studio :is(input,textarea)::placeholder{color:var(--studio-sub)!important;opacity:1!important}
html[data-theme] body.ts-studio select option{background:var(--studio-paper)!important;color:var(--studio-ink)!important}
html[data-theme] body.ts-studio :is(.workspace-switcher,.workspace-static,.account-trigger,.notif-chip,.v2-command-open,.topbar-search form){background:var(--studio-paper)!important;border-color:var(--studio-line)!important;color:var(--studio-ink)!important}
html[data-theme] body.ts-studio .workspace-switcher select{color:var(--studio-ink)!important;background:transparent!important}
html[data-theme] body.ts-studio .account-dropdown .theme-switch button:not(.active){background:var(--studio-tint)!important;border:1px solid var(--studio-line)!important;color:var(--studio-ink)!important}
html[data-theme] body.ts-studio .account-dropdown .theme-switch button.active{background:var(--studio-wash)!important;border:1px solid var(--studio-accent)!important;color:var(--studio-accent)!important;box-shadow:inset 0 0 0 1px var(--studio-accent)!important}
html[data-theme] body.ts-studio .account-dropdown .theme-switch button:hover{border-color:var(--studio-accent)!important}

/* Text and data tables should read clearly in BOTH themes. */
html[data-theme] body.ts-studio .content :is(h1,h2,h3,h4,h5,h6,strong){color:var(--studio-ink)!important}
html[data-theme] body.ts-studio .content :is(table,.table-wrap,.table-responsive){background:var(--studio-paper)!important;border-color:var(--studio-line)!important;color:var(--studio-ink)!important}
html[data-theme] body.ts-studio .content table th{background:var(--studio-tint)!important;color:var(--studio-sub)!important;border-color:var(--studio-line)!important}
html[data-theme] body.ts-studio .content table td{background:var(--studio-paper)!important;color:var(--studio-ink)!important;border-color:var(--studio-line)!important}
html[data-theme] body.ts-studio .content table tbody tr:hover td{background:var(--studio-tint)!important}
html[data-theme] body.ts-studio .content :is(.table-toolbar,.bulk-bar,.search-form,.studio-contacts-toolbar){color:var(--studio-ink)!important;border-color:var(--studio-line)!important}
html[data-theme] body.ts-studio .content :is(.btn.secondary,.btn.ghost,button.secondary,button.ghost){background:var(--studio-tint)!important;color:var(--studio-ink)!important;border-color:var(--studio-line-strong)!important}
html[data-theme] body.ts-studio .content :is(.btn,.studio-action-primary):not(.ghost):not(.secondary){color:#fff!important}
html[data-theme="dark"] body.ts-studio .content :is(.btn,.studio-action-primary):not(.ghost):not(.secondary){background:#476dce!important;border-color:#476dce!important;color:#fff!important}
html[data-theme] body.ts-studio .content :is(.notice,.alert){border-color:var(--studio-line-strong)!important}
html[data-theme="light"] body.ts-studio .content .notice{color:#7d5318!important;background:#fff8e9!important;border-color:#f0d99e!important}
html[data-theme="dark"] body.ts-studio .content .notice{color:#f5d296!important;background:#362c22!important;border-color:#71583b!important}
html[data-theme="light"] body.ts-studio .content .notice.ok{color:#096443!important;background:#e5f7ee!important;border-color:#b4e3ce!important}
html[data-theme="dark"] body.ts-studio .content .notice.ok{color:#83efc9!important;background:#16372d!important;border-color:#2e7058!important}
html[data-theme="light"] body.ts-studio .content .notice.bad{color:#9d2536!important;background:#fff0f2!important;border-color:#f3c1c9!important}
html[data-theme="dark"] body.ts-studio .content .notice.bad{color:#ffabb4!important;background:#3b202d!important;border-color:#704053!important}
html[data-theme="light"] body.ts-studio .content .notice.info{color:#254f97!important;background:#ecf3ff!important;border-color:#c5d8fa!important}
html[data-theme="dark"] body.ts-studio .content .notice.info{color:#bbd1ff!important;background:#1c3152!important;border-color:#47648b!important}

/* Don't force application-themed text onto WhatsApp message previews. These need
   their own consistent foreground/background for readability in either app theme. */
html[data-theme] body.ts-studio .studio-broadcast .bc-phone{color:#e9f3ec!important;background:#0d201c!important;border-color:#33574b!important}
html[data-theme] body.ts-studio .studio-broadcast .bc-phone-head{color:#f1f7f2!important;background:#1b3d33!important}
html[data-theme] body.ts-studio .studio-broadcast .bc-bubble{color:#173c32!important;background:#d9f5e4!important;border-color:#b9e6ca!important}
html[data-theme] body.ts-studio .studio-broadcast .bc-bubble :is(span,b,strong,p){color:inherit!important}

/* Collapsed desktop sidebar: retain visible readable red "Keluar". Earlier v13.0.4
   explicitly hid it with .nav-label; this wins that rule without showing every label. */
@media(min-width:981px){
 html body.ts-studio.sidebar-collapsed .app-shell>.sidebar .studio-sidebar-footer .logout-text-link{
   display:flex!important;align-items:center!important;justify-content:center!important;
   width:100%!important;min-width:0!important;min-height:39px!important;
   padding:0 2px!important;margin:0!important;border-radius:10px!important;
   background:rgba(222,67,91,.09)!important;border:1px solid rgba(222,67,91,.30)!important;
   color:#d63c52!important;overflow:visible!important;
 }
 html body.ts-studio.sidebar-collapsed .app-shell>.sidebar .studio-sidebar-footer .logout-text-link .nav-label{
   display:inline-block!important;visibility:visible!important;opacity:1!important;
   width:auto!important;min-width:0!important;line-height:1.2!important;
   font-size:11px!important;letter-spacing:0!important;font-weight:800!important;
   color:inherit!important;text-overflow:clip!important;white-space:nowrap!important;
 }
 html[data-theme="dark"] body.ts-studio.sidebar-collapsed .app-shell>.sidebar .studio-sidebar-footer .logout-text-link{
   background:rgba(255,122,141,.11)!important;color:#ff9aa9!important;border-color:rgba(255,122,141,.37)!important;
 }
}
/* Dark-theme blue actions must remain legible with white text. A pale text-accent
   used as a button fill in earlier layers caused low contrast. */
html[data-theme="dark"] body.ts-studio.page-inbox .studio-inbox form.inbox-search button,
html[data-theme="dark"] body.ts-studio .content :is(button.primary,button[type=submit].primary,.btn.primary){
  background:#4262c2!important;border-color:#4262c2!important;color:#fff!important;
}
html[data-theme="dark"] body.ts-studio.page-inbox .studio-inbox form.inbox-search button:hover,
html[data-theme="dark"] body.ts-studio .content :is(button.primary,button[type=submit].primary,.btn.primary):hover{
  background:#3554b0!important;border-color:#3554b0!important;
}