/* TS WhatsApp 12 — Single design system; application behavior remains in existing PHP/JS */
:root,[data-theme="light"]{--r-bg:#f4f6fa;--r-surface:#fff;--r-surface2:#f8fafc;--r-text:#152338;--r-muted:#64758b;--r-border:#e3eaf1;--r-primary:#0e947e;--r-primary-pale:#e2f5f0;--r-sidebar:#101d2c;--r-shadow:0 3px 16px rgba(28,43,64,.035);--r-radius:14px;--r-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
[data-theme="dark"]{--r-bg:#0c1420;--r-surface:#142133;--r-surface2:#19293c;--r-text:#edf4fa;--r-muted:#95a8bc;--r-border:#28394e;--r-primary:#24c7a9;--r-primary-pale:#103e3b;--r-sidebar:#0b1726;--r-shadow:0 4px 24px rgba(0,0,0,.16)}
html{font-size:14px;scrollbar-gutter:stable}html,body{min-height:100%;background:var(--r-bg)!important;color:var(--r-text)!important;font-family:var(--r-font)!important;-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a,input,select,textarea{outline-offset:3px}a{color:var(--r-primary)}
.app-shell{display:grid!important;grid-template-columns:258px minmax(0,1fr)!important;min-height:100dvh!important;background:var(--r-bg)!important;gap:0!important}.app-shell>.sidebar{position:sticky!important;top:0;height:100dvh!important;width:258px!important;min-width:0!important;background:var(--r-sidebar)!important;color:#dde9f4!important;border-right:1px solid #263448!important;padding:16px 12px 12px!important;overflow-y:auto!important;display:flex!important;flex-direction:column!important;z-index:51!important;box-shadow:none!important}.sidebar *{min-width:0}.sidebar .brand-row{display:flex!important;align-items:center!important;gap:8px!important;padding:7px 7px 19px!important;margin-bottom:17px!important;border-bottom:1px solid #2c394a!important}.sidebar .brand{flex:1!important;display:flex!important;align-items:center!important;gap:12px!important;text-decoration:none!important;color:#f7fbff!important}.brand-mark{width:38px!important;height:38px!important;min-width:38px!important;border-radius:12px!important;background:#123f4d!important;display:grid!important;place-items:center!important}.brand-mark img{max-width:27px!important;max-height:27px!important}.brand-copy b{font-size:14px!important;font-weight:780!important;white-space:nowrap}.brand-copy span{font-size:10px!important;color:#8ca2b7!important;display:block!important;margin-top:4px!important;white-space:nowrap}.sidebar-collapse{width:31px!important;height:31px!important;border:1px solid #334359!important;background:#1c2b3e!important;border-radius:9px!important;color:#bed1e3!important}.sidebar-label{margin:20px 10px 9px!important;color:#718ba2!important;font-size:10px!important;font-weight:780!important;letter-spacing:1.4px!important}.side-nav{display:flex!important;flex-direction:column!important;gap:3px!important}.side-nav .nav-item,.sidebar>.nav-item{display:flex!important;align-items:center!important;gap:12px!important;padding:11px 12px!important;min-height:42px!important;border-radius:10px!important;color:#b8c9d8!important;background:transparent!important;text-decoration:none!important;font-size:12.5px!important;font-weight:570!important;transition:background .15s,color .15s!important;border:1px solid transparent!important;box-shadow:none!important}.side-nav .nav-item:hover{background:#20354a!important;color:#fff!important}.side-nav .nav-item.active{background:#123e45!important;color:#64e3cd!important;border-color:#1e645f!important;font-weight:750!important}.side-nav .nav-icon{width:18px!important;height:18px!important;display:grid!important;place-items:center!important;flex:0 0 18px!important}.nav-icon svg{height:18px!important;width:18px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.8!important}.sidebar .nav-badge{margin-left:auto!important;border-radius:20px!important;padding:2px 7px!important;background:#13bda0!important;color:#062a27!important;font-size:10px!important;font-weight:800!important}.sidebar-spacer{flex:1!important;min-height:20px}.cloud-status{margin:12px 3px!important;padding:12px!important;background:#192a3d!important;border:1px solid #304155!important;border-radius:12px!important;color:#e2edf9!important;display:flex!important;gap:9px!important;align-items:center!important}.cloud-status small{display:block!important;color:#829caf!important;font-size:11px!important;margin-top:3px!important}.cloud-status b{font-size:12px!important}
.workspace{min-width:0!important;max-width:100%!important;display:flex!important;flex-direction:column!important;background:var(--r-bg)!important}.topbar{position:sticky!important;top:0!important;z-index:40!important;height:76px!important;min-height:76px!important;padding:0 32px!important;background:var(--r-surface)!important;display:flex!important;gap:20px!important;align-items:center!important;border-bottom:1px solid var(--r-border)!important;box-shadow:none!important}.breadcrumb{display:flex!important;flex-direction:column!important;gap:5px!important;flex:none!important;min-width:110px!important}.breadcrumb .breadcrumb-eyebrow{font-size:10px!important;color:var(--r-muted)!important;max-width:230px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.breadcrumb strong{font-size:16px!important;color:var(--r-text)!important;font-weight:750!important}.breadcrumb>b{display:none!important}.workspace-switcher,.workspace-static{display:flex!important;align-items:center!important;gap:10px!important;border:1px solid var(--r-border)!important;background:var(--r-surface2)!important;border-radius:10px!important;padding:6px 10px!important;max-width:260px!important;min-height:40px!important;box-shadow:none!important}.workspace-switcher span,.workspace-static span{font-size:9px!important;letter-spacing:.7px!important;text-transform:uppercase!important;color:var(--r-muted)!important;white-space:nowrap!important}.workspace-switcher select{min-width:85px!important;max-width:160px!important;background:transparent!important;color:var(--r-text)!important;border:0!important;font-weight:700!important;font-size:12px!important;padding:5px!important}.topbar-search{flex:1!important;min-width:100px!important;max-width:420px!important;margin-left:auto!important}.topbar-search input{width:100%!important;height:40px!important;border:1px solid var(--r-border)!important;border-radius:10px!important;background:var(--r-surface2)!important;color:var(--r-text)!important;padding:0 14px!important;font-size:12px!important}.topbar-right{display:flex!important;gap:9px!important;align-items:center!important;margin-left:0!important;flex:none!important}.notif-chip,.help-chip,.account-trigger,.menu-toggle{min-height:40px!important;border:1px solid var(--r-border)!important;border-radius:10px!important;background:var(--r-surface)!important;color:var(--r-text)!important;box-shadow:none!important}.notif-chip{width:40px!important;display:grid!important;place-items:center!important;text-decoration:none!important;position:relative!important}.account-trigger{display:flex!important;align-items:center!important;gap:9px!important;padding:4px 10px!important}.account-trigger .avatar{background:var(--r-primary-pale)!important;color:var(--r-primary)!important;border-radius:9px!important}.user-copy b{font-size:12px!important;color:var(--r-text)!important}.user-copy span{font-size:10px!important;color:var(--r-muted)!important}.help-chip{padding:11px!important;font-size:11px!important;text-decoration:none!important}
.content{width:100%!important;max-width:1550px!important;margin:0 auto!important;padding:32px 36px 64px!important;min-width:0!important;background:transparent!important}.page-heading{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;margin:0 0 26px!important;padding:0!important;background:transparent!important;border:0!important}.page-kicker{display:block!important;color:var(--r-primary)!important;font-size:10px!important;letter-spacing:1.8px!important;font-weight:800!important;margin:0 0 8px!important}.page-heading h1{font-size:27px!important;letter-spacing:-.85px!important;line-height:1.2!important;margin:0 0 8px!important;color:var(--r-text)!important;font-weight:810!important}.page-heading p{color:var(--r-muted)!important;font-size:12px!important;margin:0!important;line-height:1.6!important;max-width:700px!important}
.content :is(.card,.panel,.section,.table-card,.stats-card,.stat-card,.module-card,.content-card){border:1px solid var(--r-border)!important;border-radius:var(--r-radius)!important;background:var(--r-surface)!important;box-shadow:var(--r-shadow)!important}.content :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){max-width:100%;border:1px solid var(--r-border)!important;border-radius:10px!important;background:var(--r-surface2)!important;color:var(--r-text)!important;min-height:40px;padding:10px 12px;font-size:12px}.content textarea{min-height:88px;resize:vertical}.content input:focus,.content textarea:focus,.content select:focus{border-color:var(--r-primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--r-primary) 12%,transparent)!important}.content :is(button,.btn,input[type=submit],.button){border-radius:9px;min-height:36px;font-weight:650;font-size:12px;cursor:pointer;transition:filter .16s,transform .12s}.content :is(button,.btn,input[type=submit],.button):hover{filter:brightness(.96)}.content :is(button,.btn,input[type=submit],.button):active{transform:translateY(1px)}.content :is(table){border-collapse:separate!important;border-spacing:0!important;width:100%;font-size:12px}.content th{text-transform:uppercase!important;letter-spacing:.8px!important;font-size:10px!important;color:var(--r-muted)!important;background:var(--r-surface2)!important;padding:13px 14px!important;border-bottom:1px solid var(--r-border)!important;white-space:nowrap!important}.content td{padding:13px 14px!important;border-bottom:1px solid var(--r-border)!important;color:var(--r-text)!important;vertical-align:middle!important}.content tr:hover td{background:color-mix(in srgb,var(--r-primary) 3%,var(--r-surface))!important}.content :is(.notice,.alert){border-radius:11px!important;padding:13px 16px!important;line-height:1.5!important}.content :is(.badge,.chip,.status-badge){border-radius:999px!important;font-size:10px!important;font-weight:750!important}
/* distinct, module-owned layouts */
.page-inbox .content{max-width:none!important;padding:14px 17px!important;height:calc(100dvh - 76px)!important;overflow:hidden!important}.page-inbox .page-heading{display:none!important}.page-inbox :is(.inbox-layout,.inbox-shell,.inbox-grid){height:100%!important;min-height:0!important;border:1px solid var(--r-border)!important;border-radius:16px!important;overflow:hidden!important;background:var(--r-surface)!important}.page-inbox :is(.chat-list,.conversation-list,.inbox-sidebar){background:var(--r-surface)!important;border-right:1px solid var(--r-border)!important}.page-inbox :is(.chat-messages,.message-list,.messages-panel){background:var(--r-surface2)!important}.page-inbox :is(.chat-composer,.composer,.message-composer){background:var(--r-surface)!important;border-top:1px solid var(--r-border)!important}.page-inbox :is(.message-bubble,.chat-bubble){max-width:min(72%,560px)!important;border-radius:12px!important;font-size:12.5px!important;line-height:1.5!important;box-shadow:0 1px 3px #0f263012!important}
.page-campaigns .content,.page-ai_chatbot .content{max-width:1450px!important}.page-campaigns :is(.campaign-form,.broadcast-form,.campaign-editor),.page-ai_chatbot :is(.ai-grid,.chatbot-grid){gap:20px!important}.page-campaigns :is(.preview-card,.message-preview),.page-ai_chatbot :is(.provider-card,.ai-provider-card){border:1px solid var(--r-border)!important;border-radius:16px!important;background:var(--r-surface)!important}.page-contacts :is(.filter-bar,.filters,.toolbar),.page-templates :is(.filter-bar,.filters,.toolbar){display:flex!important;gap:10px!important;align-items:center!important;flex-wrap:wrap!important}.page-system_health .content :is(.health-card,.health-item){border:1px solid var(--r-border)!important;border-radius:12px!important;background:var(--r-surface)!important}.page-settings_admin .content :is(.settings-grid,.settings-row){gap:18px!important}
/* deliberate responsive behavior */
@media(max-width:1240px){.app-shell{grid-template-columns:224px minmax(0,1fr)!important}.app-shell>.sidebar{width:224px!important}.topbar{padding:0 18px!important;gap:12px!important}.content{padding:25px 22px 48px!important}.workspace-switcher{max-width:200px!important}.help-chip{display:none!important}}
@media(max-width:900px){.app-shell{display:block!important}.app-shell>.sidebar{position:fixed!important;left:0!important;transform:translateX(-100%);transition:transform .2s!important;width:258px!important;z-index:120!important}.app-shell>.sidebar.mobile-open,.app-shell>.sidebar.open,body.sidebar-open .app-shell>.sidebar{transform:translateX(0)!important}.topbar{height:64px!important;min-height:64px!important;padding:0 16px!important}.menu-toggle{display:grid!important;place-items:center!important;min-width:38px!important}.topbar-search{display:none!important}.content{padding:23px 15px 48px!important}.page-inbox .content{height:calc(100dvh - 64px)!important;padding:7px!important}.breadcrumb .breadcrumb-eyebrow{display:none!important}.breadcrumb strong{font-size:14px!important}.workspace-switcher,.workspace-static{margin-left:auto!important}}
@media(max-width:570px){.topbar{gap:7px!important}.breadcrumb{min-width:0!important}.workspace-switcher,.workspace-static{display:none!important}.topbar-right{margin-left:auto!important}.help-chip,.topbar .user-copy,.account-chevron{display:none!important}.account-trigger{padding:4px!important;min-width:40px!important}.content{padding:20px 12px 34px!important}.page-heading{margin-bottom:20px!important}.page-heading h1{font-size:23px!important}.content :is(.card,.panel){border-radius:12px!important}.content :is(table){min-width:550px}.content :is(.table-wrap,.table-responsive){overflow-x:auto!important}.page-inbox .content{padding:0!important}.page-inbox :is(.inbox-layout,.inbox-shell,.inbox-grid){border-radius:0!important;border:0!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
@media(max-width:700px){.content .card[style*="grid-template-columns"],.content .panel[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;display:grid!important}.content .card[style*="grid-template-columns"]>*{min-width:0!important}.content .card[style*="grid-template-columns"]{padding:16px!important}.content table{width:max-content!important;min-width:100%!important}.workspace,.content{overflow-x:clip!important}}