/* Suite chrome and management screens. The conversation canvas retains its own compact layout. */
:root {
  --suite-bar:linear-gradient(105deg,#282063,#493099 38%,#5039b6 67%,#30378d);
  --suite-brand:#5836b9; --suite-ink:#27234b; --suite-text:#534e70;
  --suite-line:#dcd7ed; --suite-tint:#f3effd; --suite-paper:#fff; --suite-peach:#ffe2c5;
  --suite-canvas:radial-gradient(ellipse at 2% 0,#e1ddff,transparent 56%),radial-gradient(ellipse at 96% 96%,#ffebe2,transparent 49%),#f1eff8;
  --suite-head:linear-gradient(110deg,#e9e2ff,#eff1ff 68%,#ffeadb);
  --suite-shadow:0 3px 18px #34236b0c;
}
html[data-theme=dark]{
  --suite-brand:#bba9ff; --suite-ink:#f1edff; --suite-text:#c5bed8; --suite-line:#433d56;
  --suite-tint:#2e293d; --suite-paper:#201e29; --suite-canvas:linear-gradient(125deg,#1f1a30,#191925 65%,#28212b);
  --suite-head:linear-gradient(115deg,#34284f,#292740 68%,#3d2e3e); --suite-shadow:0 3px 18px #09061128;
}
.shell.management-shell {
  display:grid; grid-template-columns:minmax(0,1fr); background:var(--suite-canvas); color:var(--suite-ink);
  .sidebar,.breadcrumb,.today {display:none}
  .workspace {min-height:100dvh;min-width:0;background:transparent}
  .topbar {display:flex;align-items:center;justify-content:flex-start;gap:clamp(8px,1vw,18px);position:relative;z-index:25;height:auto;min-height:60px;padding:8px clamp(12px,1.5vw,26px);background:var(--suite-bar);border:0;color:white;box-shadow:0 3px 14px #39267828}
  .vi-brand,.studio-nav {display:flex;align-items:center;gap:7px}
  .vi-brand {white-space:nowrap}.vi-brand img{width:31px;height:31px;padding:4px;background:white;border-radius:8px}.vi-brand b{letter-spacing:.09em;font-size:16px;color:white}.vi-brand span{padding-left:10px;border-left:1px solid #ffffff55;color:#eee9ff;font-size:12px}
  .studio-nav {gap:3px;margin-right:auto}.studio-nav button,.studio-nav summary{display:inline-flex;align-items:center;gap:6px;background:transparent;color:white;cursor:pointer;padding:8px 12px;border:0;border-radius:7px;white-space:nowrap;font:inherit;font-size:13px}.studio-nav summary::after{content:"⌄"}
  .studio-nav button:hover,.studio-nav summary:hover{background:#ffffff21}
  .studio-nav :is(button.active,.current-section){background:var(--suite-peach);color:#482958;font-weight:650}
  .studio-nav svg{width:16px;height:16px}.studio-nav details{position:relative}
  .studio-nav details>div{position:absolute;top:calc(100% + 5px);min-width:165px;background:var(--suite-paper);padding:5px;border:1px solid var(--suite-line);border-radius:10px;box-shadow:0 6px 24px #27173e25}
  .studio-nav details button{width:100%;color:var(--suite-ink)}.studio-nav details button:hover,.studio-nav details button.active{background:var(--suite-tint);color:var(--suite-brand)}
  .top-actions{gap:6px;min-width:0;color:white}.top-actions :is(.btn,.theme-toggle,.icon-button,select,.pill){background:#33277e;color:white;border-color:#796ccc}.top-actions .project-picker{color:white}
  .main{width:100%;max-width:1750px;padding:clamp(14px,2vw,30px);margin-inline:auto;background:transparent}
  .page-head{position:relative;isolation:isolate;overflow:hidden;flex-wrap:wrap;padding:clamp(16px,2vw,26px);gap:12px;border-radius:16px;border:1px solid var(--suite-line);background:var(--suite-head);box-shadow:var(--suite-shadow)}
  .page-head::after{content:"";position:absolute;right:5%;top:-46px;z-index:-1;width:200px;height:200px;background:url('/assets/dolphingo-logo.png') center/contain no-repeat;opacity:.065;transform:rotate(-16deg);pointer-events:none}
  .page-head h1,.directory-side h2{color:var(--suite-ink);letter-spacing:-.035em}.page-head p{color:var(--suite-text);margin-bottom:0}
  :is(.panel,.account-card,.resource-card,.material-card,.table-wrap,.workbench,.customer-directory,.stat){background:var(--suite-paper);border-color:var(--suite-line);box-shadow:var(--suite-shadow);border-radius:14px}
  .stat.emphasis,.directory-summary{background:var(--suite-head);border:1px solid var(--suite-line)}
  .directory-side{background:var(--suite-head);border-color:var(--suite-line)}
  .directory-summary{background:var(--suite-paper)}.directory-summary strong{color:var(--suite-brand)}
  :is(.directory-groups,.directory-countries) button.active{background:var(--suite-paper);color:var(--suite-brand);box-shadow:inset 3px 0 var(--suite-brand)}
  :is(.directory-filters,thead th){background:var(--suite-tint);color:var(--suite-text)}
  .account-icon,.rule-num{background:var(--suite-tint);color:var(--suite-brand);border-radius:10px}
  .rule.active{border-color:var(--suite-brand);background:var(--suite-tint)}
  .assistant-nav,.materials-controls{background:var(--suite-paper);border:1px solid var(--suite-line);padding:8px;border-radius:12px}
  .tab.active,.material-category-tabs button.active{background:var(--suite-tint);color:var(--suite-brand)}
  .resource-card,.project-card{border-top:3px solid #9982d8}
  .resource-card:nth-child(3n+2),.project-card:nth-child(3n+2){border-top-color:#e6a16e}
  .btn.primary{color:white;background:linear-gradient(110deg,#6739bf,#4745a7);border-color:#563bb0}
  :is(button,summary,select,input):focus-visible{outline:2px solid #9273e4;outline-offset:2px}
}
html[data-theme=light] :is(.auth-intro){background:radial-gradient(ellipse at 110% 110%,#ffbd8f,transparent 52%),var(--suite-bar);color:white}
html[data-theme=light] .auth-right{background:var(--suite-canvas)}
html[data-theme=light] .auth-box{background:white;color:var(--suite-ink);border:1px solid var(--suite-line);border-radius:18px;padding:clamp(18px,3vw,32px);box-shadow:var(--suite-shadow)}
#modal .modal-head{background:var(--suite-head);color:var(--suite-ink);border-bottom:1px solid var(--suite-line)}
@media(max-width:1260px){.management-shell.shell .vi-brand span{display:none}.management-shell.shell .topbar{flex-wrap:wrap}.management-shell.shell .studio-nav button,.management-shell.shell .studio-nav summary{padding:7px 9px}}
@media(max-width:900px){.management-shell.shell .main{padding:12px}.management-shell.shell .top-actions{margin-left:auto;max-width:100%;flex-wrap:wrap}.management-shell.shell .main-directory{overflow:auto}.management-shell.shell .page-head{margin-bottom:14px}}
@media(max-width:650px){.management-shell.shell .topbar{padding:8px;gap:7px;flex-wrap:wrap}.management-shell.shell .topbar:before{display:none}.management-shell.shell .vi-brand b{display:none}.management-shell.shell .studio-nav{flex:1}.management-shell.shell .studio-nav details>div{left:auto;right:0}.management-shell.shell .top-actions{width:100%;margin:0;justify-content:flex-start}.management-shell.shell .directory-body{min-width:0}.management-shell.shell .page-head .inline-actions{flex-wrap:wrap}.management-shell.shell .main-inbox{height:auto}}

/* One header rhythm across sales and management, with room for both navigation groups. */
html[data-theme] .shell .topbar {
  background:var(--suite-bar);
  color:#faf8ff;
  .vi-brand {align-items:center;gap:9px;flex-shrink:0}
  .vi-brand img {flex-shrink:0}
  .vi-brand b {font-weight:740;letter-spacing:.075em;line-height:1}
  .vi-brand span {margin-left:3px;padding-left:13px;color:#eeeaff;border-color:#ffffff59}
  .top-actions {align-items:center;gap:8px}
  .top-actions .project-picker {color:#f4efff;font-size:13px;font-weight:600;gap:8px}
  .top-actions :is(.btn,.icon-button,.theme-toggle,select,.pill) {
    min-height:34px;border:1px solid #9186c0;background:#302866;color:#fff;border-radius:8px;
  }
  .top-actions :is(.btn,.icon-button,.theme-toggle,select):hover {background:#443680;border-color:#c5b9ef}
  .top-actions :is(button,select):focus-visible,.studio-nav :focus-visible {outline:2px solid #ffcb9c;outline-offset:2px}
  .top-actions select {color-scheme:dark}
  .studio-nav {column-gap:5px}
}
@media (min-width:901px) {
  html[data-theme] .shell .topbar {
    justify-content:flex-start;gap:clamp(14px,1.4vw,26px);padding-inline:clamp(14px,1.6vw,28px);min-height:60px;height:auto;padding-block:8px;flex-wrap:wrap;
    .studio-nav {margin-right:auto}
    .studio-nav :is(button,summary) {min-height:34px}
    .top-actions {margin-left:auto}
  }
  html[data-theme] .chat-focused .workspace {display:flex;flex-direction:column;height:100dvh}
  html[data-theme] .chat-focused .main-inbox {height:auto;flex:1;min-height:0}
}
@media (min-width:901px) and (max-width:1170px) {
  html[data-theme] .shell .topbar {.vi-brand span{display:none}.top-actions{gap:6px}.studio-nav{column-gap:2px}}
}
@media (max-width:900px) {
  html[data-theme] .chat-focused .topbar {min-height:46px;height:auto;padding-block:5px}
  html[data-theme] .chat-focused .top-actions {overflow-x:auto}
  html[data-theme] .chat-focused .top-actions>* {flex-shrink:0}
}
html[data-theme=dark] {
  color-scheme:dark;
  --suite-bar:linear-gradient(106deg,#201b3a,#382960 46%,#302b55 80%,#29293d);
  --canvas:#191925;--surface:#222130;--raised:#2b293a;--field:#1d1c29;
  --ink:#f1edf9;--text:var(--ink);--secondary:#d1cbdf;--muted:#b4adc6;--border:#474253;
  --brand:#c1a7ff;--brand-soft:#373046;
  .shell .topbar .top-actions :is(.btn,.icon-button,.theme-toggle,select,.pill) {background:#29243f;border-color:#74688c}
  .shell .topbar .top-actions :is(button,select):hover {background:#423354;border-color:#baa8ce}
  .auth-intro {background:radial-gradient(ellipse at 100% 95%,#584051,transparent 53%),var(--suite-bar);color:white}
  .auth-right {background:var(--suite-canvas)}
  .auth-box {background:var(--suite-paper);color:var(--suite-ink);padding:clamp(18px,3vw,32px);border:1px solid var(--suite-line);border-radius:18px}
  .chat-focused .inbox-filters .search,.chat-focused textarea#compose {background:var(--field);color:var(--ink)}
  .chat-focused .studio-nav details button {color:var(--ink)}
  .chat-focused .inline-preview-text,.chat-focused .customer-fact dd {color:var(--ink)}
  .chat-focused .customer-identity .customer-name-edit {color:white}
  .shell .delivery-receipt {color:#b3afc2}
  .shell .delivery-receipt.is-read {color:#63d999}
  .shell .delivery-receipt.is-unknown {color:#ffc284}
  .followed {background:#203d33;color:#91e7bb}
  .not-followed {background:#432d29;color:#ffc7a4}
  #modal {background:var(--surface);color:var(--ink)}
}
html[data-theme=dark] .management-shell .customer-tag-chip {
  background:#322d45;color:#d9c7ff;border-color:#56496b;
  &.tag-tone-1,&.tag-tone-5 {background:#253649;color:#b9deff;border-color:#435d76}
  &.tag-tone-2,&.tag-tone-3 {background:#423039;color:#ffc9b1;border-color:#74545b}
  &.tag-tone-4 {background:#253a36;color:#aee6d1;border-color:#46655d}
}