/* TS WhatsApp v13.0.4 — navigation, theme and clarity pass */
:root,[data-theme="light"]{
  --studio-bg:#f4f7fb;
  --studio-paper:#ffffff;
  --studio-ink:#18253d;
  --studio-sub:#6f819d;
  --studio-line:#e3e9f2;
  --studio-line-strong:#d4deea;
  --studio-accent:#325fe9;
  --studio-accent-hi:#244bd4;
  --studio-wash:#edf3ff;
  --studio-tint:#f7f9fd;
  --studio-good:#11ab7f;
  --studio-menu:rgba(255,255,255,.98);
}
[data-theme="dark"]{
  --studio-bg:#0b1320;
  --studio-paper:#121c2c;
  --studio-ink:#eef4ff;
  --studio-sub:#9db0cb;
  --studio-line:#29364c;
  --studio-line-strong:#39506e;
  --studio-accent:#82a5ff;
  --studio-accent-hi:#a7beff;
  --studio-wash:#1a2944;
  --studio-tint:#182234;
  --studio-good:#35d0a5;
  --studio-menu:#162236;
  --studio-shadow:0 14px 34px rgba(0,0,0,.26);
}

/* Stronger theme compatibility */
[data-theme="dark"] body.ts-studio .topbar,
[data-theme="dark"] body.ts-studio .app-shell>.sidebar,
[data-theme="dark"] body.ts-studio .content :is(.card,.panel,.stats-card,.stat-card,.content-card,.module-card,.provider-section,.table-card),
[data-theme="dark"] body.ts-studio .studio-inbox-account,
[data-theme="dark"] body.ts-studio .studio-inbox,
[data-theme="dark"] body.ts-studio .studio-page-heading,
[data-theme="dark"] body.ts-studio .workspace-summary-hero{box-shadow:none!important}
[data-theme="dark"] body.ts-studio .content :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){background:var(--studio-tint)!important;color:var(--studio-ink)!important;border-color:var(--studio-line-strong)!important}
[data-theme="dark"] body.ts-studio .content :is(input,textarea)::placeholder{color:#8ea4c0!important}
[data-theme="dark"] body.ts-studio .side-nav .nav-item:hover,
[data-theme="dark"] body.ts-studio .workspace-switcher,
[data-theme="dark"] body.ts-studio .account-trigger,
[data-theme="dark"] body.ts-studio .notif-chip,
[data-theme="dark"] body.ts-studio .topbar-search form,
[data-theme="dark"] body.ts-studio .studio-space-label,
[data-theme="dark"] body.ts-studio .cloud-status{background:var(--studio-tint)!important}
[data-theme="dark"] body.ts-studio .content table th{background:#162233!important;color:#a8bdd7!important}

/* Desktop topbar menu button not needed */
@media(min-width:981px){
  html body.ts-studio .topbar .menu-toggle{display:none!important}
  html body.ts-studio .studio-topbar-left{min-width:240px!important}
}

/* Brandbar: logo always visible, no desktop hamburger here */
html body.ts-studio .studio-brandbar{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  min-height:86px!important;padding:18px 16px!important;gap:0!important;
}
html body.ts-studio .studio-brandbar .brand{width:100%!important;display:flex!important;align-items:center!important;gap:12px!important}
html body.ts-studio .studio-brandbar .brand-mark{display:grid!important;place-items:center!important;flex:0 0 42px!important}
html body.ts-studio .studio-brandbar .brand-copy b{font-size:15px!important;letter-spacing:-.3px!important}
html body.ts-studio .studio-brandbar .brand-copy span{font-size:10.5px!important}

/* Sidebar footer actions */
html body.ts-studio .studio-sidebar-footer{display:flex!important;flex-direction:column!important;gap:8px!important}
html body.ts-studio .sidebar-width-toggle{
  cursor:pointer!important;
  width:100%!important;
  text-align:left!important;
  justify-content:flex-start!important;
  background:transparent!important;
  color:var(--studio-sub)!important;
}
html body.ts-studio .sidebar-width-toggle:hover{color:var(--studio-ink)!important;background:var(--studio-tint)!important;border-color:var(--studio-line)!important}
html body.ts-studio .sidebar-width-toggle .icon-collapse-right{display:none!important}
html body.ts-studio.sidebar-collapsed .sidebar-width-toggle .icon-collapse-left{display:none!important}
html body.ts-studio.sidebar-collapsed .sidebar-width-toggle .icon-collapse-right{display:grid!important}
html body.ts-studio.sidebar-collapsed .sidebar-width-toggle .sidebar-toggle-label::before{content:'Lebarkan sidebar'}
html body.ts-studio:not(.sidebar-collapsed) .sidebar-width-toggle .sidebar-toggle-label::before{content:'Ciutkan sidebar'}
html body.ts-studio .sidebar-width-toggle .sidebar-toggle-label{font-size:12px!important}
html body.ts-studio .sidebar-width-toggle .sidebar-toggle-label{color:transparent!important;position:relative!important}
html body.ts-studio .sidebar-width-toggle .sidebar-toggle-label::before{color:var(--studio-sub)!important;position:static!important}
html body.ts-studio .sidebar-width-toggle:hover .sidebar-toggle-label::before{color:var(--studio-ink)!important}

html body.ts-studio .logout-text-link{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  min-height:40px!important;padding:10px 12px!important;border-radius:10px!important;
  text-decoration:none!important;border:1px solid color-mix(in srgb,#df4d5b 20%, var(--studio-line))!important;
  background:color-mix(in srgb,#df4d5b 7%, var(--studio-paper))!important;
  color:#d94c5c!important;font-size:12px!important;font-weight:760!important;
}
html body.ts-studio .logout-text-link:hover{background:color-mix(in srgb,#df4d5b 12%, var(--studio-paper))!important;color:#be3042!important;border-color:color-mix(in srgb,#df4d5b 36%, var(--studio-line))!important}
[data-theme="dark"] body.ts-studio .logout-text-link{background:rgba(217,76,92,.08)!important;color:#ff8e9b!important;border-color:rgba(217,76,92,.26)!important}
[data-theme="dark"] body.ts-studio .logout-text-link:hover{background:rgba(217,76,92,.14)!important;color:#ffadb6!important}

/* Collapsed sidebar: keep brand logo visible, no weird hamburger */
@media(min-width:981px){
  html body.ts-studio.sidebar-collapsed .app-shell{grid-template-columns:86px minmax(0,1fr)!important}
  html body.ts-studio.sidebar-collapsed .app-shell>.sidebar{width:86px!important;max-width:86px!important;padding:0!important}
  html body.ts-studio.sidebar-collapsed .studio-brandbar{padding:16px 10px 14px!important;justify-content:center!important;border-bottom:1px solid var(--studio-line)!important}
  html body.ts-studio.sidebar-collapsed .studio-brandbar .brand{justify-content:center!important;gap:0!important}
  html body.ts-studio.sidebar-collapsed .studio-brandbar .brand-copy,
  html body.ts-studio.sidebar-collapsed .studio-space-label,
  html body.ts-studio.sidebar-collapsed .sidebar-label,
  html body.ts-studio.sidebar-collapsed .cloud-status>div,
  html body.ts-studio.sidebar-collapsed .side-nav .nav-label,
  html body.ts-studio.sidebar-collapsed .logout-text-link .nav-label{display:none!important}
  html body.ts-studio.sidebar-collapsed .studio-brandbar .brand-mark{width:42px!important;height:42px!important;min-width:42px!important}
  html body.ts-studio.sidebar-collapsed .sidebar-scroll{padding:10px 10px 12px!important}
  html body.ts-studio.sidebar-collapsed .side-nav{gap:8px!important}
  html body.ts-studio.sidebar-collapsed .side-nav .nav-item{justify-content:center!important;padding:0!important;min-height:44px!important;border-radius:14px!important}
  html body.ts-studio.sidebar-collapsed .side-nav .nav-icon{width:19px!important;height:19px!important;flex:0 0 19px!important}
  html body.ts-studio.sidebar-collapsed .side-nav .nav-badge{position:absolute!important;right:5px!important;top:5px!important;margin:0!important;min-width:18px!important;height:18px!important;padding:0 4px!important;font-size:9px!important}
  html body.ts-studio.sidebar-collapsed .studio-sidebar-footer{padding:12px 10px!important}
  html body.ts-studio.sidebar-collapsed .cloud-status{justify-content:center!important;padding:12px 0!important;min-height:44px!important}
  html body.ts-studio.sidebar-collapsed .sidebar-width-toggle{justify-content:center!important;padding:0!important;min-height:44px!important}
  html body.ts-studio.sidebar-collapsed .sidebar-width-toggle .sidebar-toggle-label{display:none!important}
  html body.ts-studio.sidebar-collapsed .logout-text-link{justify-content:center!important;padding:0!important;min-height:40px!important}
}

/* Expanded desktop sidebar slightly calmer */
@media(min-width:981px){
  html body.ts-studio .app-shell{grid-template-columns:256px minmax(0,1fr)!important}
  html body.ts-studio .app-shell>.sidebar{width:256px!important;max-width:256px!important}
}

/* Improve header balance in both themes */
html body.ts-studio .topbar{min-height:74px!important;height:74px!important;padding:0 22px!important;gap:16px!important}
html body.ts-studio .topbar-search form,
html body.ts-studio .workspace-switcher,
html body.ts-studio .account-trigger,
html body.ts-studio .notif-chip{border-color:var(--studio-line)!important}
html body.ts-studio .workspace-switcher,
html body.ts-studio .account-trigger{background:var(--studio-paper)!important}
html body.ts-studio .topbar-search form{background:var(--studio-paper)!important}

/* Mobile / small screens keep header toggle */
@media(max-width:980px){
  html body.ts-studio .topbar .menu-toggle{display:grid!important}
  html body.ts-studio .studio-brandbar{padding:16px 14px!important}
}