:root{
  --navy:#081a34;
  --deep:#06152c;
  --blue:#316df6;
  --blue-strong:#245eea;
  --blue-soft:#edf3ff;
  --lime:#b8ff36;
  --bg:#f4f7fb;
  --panel:#ffffff;
  --line:#dfe5ee;
  --muted:#8b97aa;
  --text:#0f1f3d;
  --danger:#ef4444;
  --warn:#f59e0b;
  --success:#10b981;
  --shadow:0 8px 24px rgba(15,31,61,.055);
  --shadow-lg:0 18px 48px rgba(6,21,44,.16);
  --sidebar-w:242px;
  /* shared modal/overlay tokens — every "click backdrop to close" dialog in
     the app (CRM, integrações, marketing, canais, publicação) should feel
     like the same component even though each keeps its own class/markup */
  --z-modal:2400;
  --overlay:rgba(7,20,40,.55);
  --r-modal:18px;
  --shadow-modal:0 26px 74px rgba(6,20,40,.28);
}

html,body{background:var(--bg)}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);letter-spacing:-.012em}

/* BRAHI OPS APPLICATION SHELL */
.app{
  height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  grid-template-rows:1fr;
  background:linear-gradient(135deg,#f7f9fc 0%,#f2f6fb 58%,#eef3fb 100%);
  overflow:hidden;
}

.topbar{
  grid-column:1;
  grid-row:1;
  height:100vh;
  min-height:0;
  padding:20px 12px 14px;
  background:linear-gradient(180deg,#07172f 0%,#071a35 100%);
  border:0;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  overflow-y:auto;
  overflow-x:hidden;
  box-shadow:4px 0 18px rgba(6,21,44,.08);
  z-index:40;
}

.brand-pro{
  min-height:68px;
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:8px;
  padding:0 12px 15px;
  border-bottom:1px solid rgba(255,255,255,.08);
  letter-spacing:0;
}

.brand-mark{
  width:92px;
  height:32px;
  border-radius:0;
  background:transparent url('/brahi-group-logo.webp') left center/contain no-repeat;
  box-shadow:none;
  color:transparent;
  overflow:hidden;
  user-select:none;
}

.brand-copy{display:grid;gap:1px;text-transform:uppercase}
.brand-copy strong{font-size:8px;color:#8eacd9;letter-spacing:.18em;font-weight:800}
.brand-copy strong::after{content:' · SALES'}
.brand-copy span{font-size:7px;color:#637a9b;font-weight:750;letter-spacing:.11em}

.tabs{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:5px;
  padding:18px 6px 0;
  overflow:visible;
}

.tabs::before{
  content:'COMPANY WORKSPACE';
  display:block;
  padding:0 9px 7px;
  color:#6680a5;
  font-size:7px;
  line-height:1;
  letter-spacing:.18em;
  font-weight:900;
}

.tab,
.sales-alert-btn{
  width:100%!important;
  min-height:42px!important;
  border:0!important;
  border-radius:11px!important;
  padding:0 12px!important;
  background:transparent!important;
  color:#93a4be!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  font-size:10px!important;
  font-weight:650!important;
  letter-spacing:0!important;
  text-align:left!important;
  transition:.15s ease!important;
}

.tab::before{font-size:15px;width:18px;text-align:center;color:#7187a7}
.tab[data-view="crmView"]::before{content:'⌘'}
.tab[data-view="channelsView"]::before{content:'◌'}
.tab[data-view="knowledgeView"]::before{content:'◇'}
.tab[data-view="settingsView"]::before{content:'⚙'}

.tab:hover,
.sales-alert-btn:hover{background:rgba(255,255,255,.055)!important;color:#fff!important;transform:none!important}
.tab.active,
.sales-alert-btn.active{
  background:linear-gradient(135deg,var(--blue),var(--blue-strong))!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(49,109,246,.28)!important;
}
.tab.active::before{color:#fff}
.sales-alert-btn span:first-child{display:flex;align-items:center;gap:8px}
.sales-alert-count{margin-left:auto}

.view{
  grid-column:2;
  grid-row:1;
  min-width:0;
  min-height:0;
  height:100vh;
  overflow:hidden;
}
.view.active{display:grid}

/* CRM / UNIFIED INBOX */
.crm-layout{
  grid-template-columns:310px minmax(510px,1fr) 390px;
  background:var(--bg);
}

.sidebar,.workspace,.crm-panel,.config-nav,.config-main{min-height:0}
.sidebar{
  background:#fff;
  border-right:1px solid var(--line);
  box-shadow:none;
  z-index:2;
}
.sidebar-head{
  padding:25px 16px 15px;
  gap:11px;
  background:#f8fafc;
  border-bottom:1px solid var(--line);
}
.sidebar-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.side-title{font-size:17px;font-weight:760;letter-spacing:-.025em;color:var(--text);margin-top:3px}
.eyebrow{font-size:7px;letter-spacing:.15em;color:#5278bd;font-weight:900}
.live-pill{font-size:7px;font-weight:850;color:#08795f;background:#ecfdf5;border:1px solid #c8f0e1;border-radius:999px;padding:5px 7px;white-space:nowrap}
.pipeline-summary{gap:6px}
.pipeline-summary span{background:#fff;border:1px solid var(--line);padding:5px 8px;font-size:7.5px;border-radius:8px;color:#5d6b7e}
.search-wrap{position:relative}
.search-wrap>span{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:16px;color:#94a3b8;pointer-events:none}
.search-wrap input{padding-left:32px}
.filters{gap:7px}
.filters select{font-size:9px;background:#fff}
input,select,textarea{border-color:var(--line);background:#fff;border-radius:9px}
input:focus,select:focus,textarea:focus{border-color:#9db9fb;box-shadow:0 0 0 3px rgba(49,109,246,.10)}
/* keyboard-only focus ring — visible for tab navigation, silent for mouse
   clicks (native :focus-visible behavior). Buttons/links/tabs had no focus
   indicator at all before this, so keyboard users couldn't tell what was
   focused anywhere in the app. */
button:focus-visible,a:focus-visible,.btn:focus-visible,.tab:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

/* CARD ELEVATION — every card/KPI surface in the app (CRM, marketing,
   dashboard, settings, canais, publicação) lifts and deepens its shadow on
   hover, and starts with a slightly more present resting shadow. Most of
   these had either no shadow at all or one so faint (.025-.035 alpha) it
   read as flat. One rule, applied everywhere, so the whole product feels
   like it has the same physical "weight" instead of half the screens
   looking flat-2D and half looking raised. */
.marketing-card,.marketing-kpi,.crm-co-kpi,.studio-card,.studio-kpi,
.studio-media-card,.studio-api-card,.integration-card,.channel-card,
.settings-card,.dash-card,.bi-box,.conversation,.action-btn{
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.marketing-card,.studio-card{box-shadow:0 6px 20px rgba(16,33,59,.07)}
.crm-co-kpi,.marketing-kpi,.studio-kpi,.integration-card,.bi-box{box-shadow:0 3px 10px rgba(16,33,59,.045)}
.marketing-card:hover,.marketing-kpi:hover,.crm-co-kpi:hover,.studio-card:hover,
.studio-kpi:hover,.studio-media-card:hover,.studio-api-card:hover,
.integration-card:hover,.channel-card:hover,.settings-card:hover,
.dash-card:hover,.bi-box:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(16,33,59,.12);
  border-color:#c3cee0;
}
.conversation:hover,.action-btn:hover{transform:translateY(-1px)}

.conversation-list{padding:8px;background:#f8fafc}
.conversation{margin-bottom:6px;padding:12px;border:1px solid transparent;border-radius:11px;background:#fff;box-shadow:0 1px 4px rgba(15,31,61,.025);transition:.14s ease}
.conversation:hover{background:#fff;border-color:#d8e1ee;transform:none}
.conversation.active{background:var(--blue-soft);border-color:#b8cdfd;box-shadow:inset 3px 0 0 var(--blue)}
.conv-name{font-size:11px;color:var(--text)}
.conv-time{font-size:7.5px}.conv-meta{font-size:8.5px}.badges{margin-top:7px}.badge,.stage-chip,.lead{font-size:7px;padding:4px 7px}
.badge.high{background:#fff0f0;color:#c13535}.badge.medium{background:#fff7e6;color:#b86b00}.badge.won{background:#e9fbf4;color:#08795f}.badge.low{background:#edf3ff;color:#315fa8}.badge.lost{background:#eef1f5;color:#667386}

.workspace{background:#f5f8fc}
.chat-head{
  padding:22px 19px 17px;
  min-height:92px;
  background:#f8fafc;
  border-bottom:1px solid var(--line);
  box-shadow:none;
  z-index:2;
}
.chat-title{font-size:20px;font-weight:760;color:var(--text);margin-top:3px}
.chat-meta{font-size:8.5px;color:#8e99aa}
.chat-actions{gap:6px}
.chat-actions select{border-radius:9px}
/* .btn base geometry lives once, globally, in admin.css — these are just the
   shared action-color modifiers (primary/soft/danger), kept here so any
   element (not only <button class="btn">) can carry them */
.btn:hover:not(:disabled){filter:brightness(.985)}
.primary{background:var(--blue);border-color:var(--blue-strong);color:#fff;box-shadow:0 4px 11px rgba(49,109,246,.18)}
.soft{background:#eef2f6;border-color:#eef2f6;color:#253650}
.danger{background:#fff0f0;border-color:#ffd7d7;color:#c13535}
.messages{padding:20px 18px;gap:11px;background:#f4f7fb}
.msg{padding:11px 13px;border-radius:14px;line-height:1.5;box-shadow:0 4px 12px rgba(15,31,61,.035)}
.msg.visitor{border:1px solid #e1e7ef;background:#fff}
.msg.ai{background:#f8fbff;border:1px solid #bcd0fd;box-shadow:inset 3px 0 0 var(--blue)}
.msg.agent{background:#0b2342;color:#fff}
.reply{padding:11px 13px;box-shadow:0 -3px 14px rgba(15,31,61,.03)}
.reply textarea{border-radius:10px;background:#fff}

.crm-panel{background:#f7f9fc;border-left:1px solid var(--line)}
.crm-content{padding:15px 13px 28px}
.crm-empty{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--muted);padding:30px}
.crm-empty b{font-size:13px;color:var(--text)}
.crm-empty span{font-size:9px;line-height:1.5;max-width:230px}
.crm-empty-icon{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;color:var(--blue);box-shadow:var(--shadow)}
.crm-section{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:10px;box-shadow:0 3px 10px rgba(15,31,61,.025)}
.customer-hero{background:#fff;border-color:var(--line)}
.section-heading h2{font-size:19px;color:var(--text)}
.section-heading h3{font-size:11px;color:var(--text)}
.stage-chip{background:#eaf1ff;color:var(--blue-strong)}
.action-grid{gap:7px}
.action-btn{min-height:62px;border-radius:10px;background:#fff;transition:.14s ease}
.action-btn:hover{background:#f8faff;border-color:#b9c9e5;box-shadow:none}
.action-btn span{color:var(--blue)}
.action-btn b{font-size:9px}.form-stack{gap:9px}.form-stack label,.form-grid label{font-size:9px}.form-stack input,.form-stack select{background:#fff}
.kv-grid{gap:7px}.kv-grid div,.meeting-box,.summary-box,.rfq-box{background:#f8fafc;border-color:#e1e7ef}.kv-grid div{padding:9px}.kv-grid span,.summary-box span,.meeting-box span,.rfq-box span{font-size:7px}.kv-grid b{font-size:10px}.summary-box p{font-size:9.5px}.rfq-box{border-left:3px solid var(--blue)}

/* CONFIGURATION AREAS - SECONDARY NAVIGATION INSIDE THE OPS SHELL */
.modern-config{background:var(--bg);grid-template-columns:285px minmax(0,1fr)}
.modern-nav{padding:25px 16px;background:#f8fafc;border-right:1px solid var(--line);box-shadow:none}
.config-nav-title{font-size:18px;letter-spacing:-.025em;color:var(--text)}
.knowledge-stats{gap:7px}.knowledge-stats div{padding:10px;background:#fff;border-color:var(--line);border-radius:10px}.knowledge-stats b{font-size:16px}.knowledge-list-modern{gap:7px}
.knowledge-item{border-radius:10px;padding:12px 13px;background:#fff;border-color:var(--line)}
.knowledge-item.active{background:var(--blue-soft);border-color:#adc5fb;box-shadow:inset 3px 0 0 var(--blue)}
.modern-main{padding:28px 34px 96px;background:linear-gradient(135deg,#f8fafc,#f3f6fb);overflow:auto}
.config-page-head{margin-bottom:20px}
.config-page-head h1{font-size:29px!important;letter-spacing:-.035em;color:var(--text)!important}
.config-page-head p{font-size:10.5px!important;line-height:1.6;color:#8995a7!important}
.page-state{padding:8px 11px;background:#fff;border:1px solid var(--line);box-shadow:none}
.editor-grid{gap:18px;grid-template-columns:minmax(0,1fr) 320px}
.settings-card{border-radius:13px;padding:18px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.sticky-card{top:14px}.card-head h2{font-size:14px;color:var(--text)}.card-head p{font-size:9px;max-width:620px}
.language-tab{padding:8px 11px;border-radius:8px;background:#f2f5f9}.language-tab.active{background:var(--blue);color:#fff}
.language-panel textarea{min-height:300px!important;background:#fff}.quality-list div{padding:8px 0}.knowledge-preview{background:#f4f7ff;border-color:#d8e3ff}.save-bar{box-shadow:0 -6px 18px rgba(15,31,61,.05);border-color:var(--line)}
.settings-nav-links button{padding:10px 11px;border-radius:8px}.settings-nav-links button:hover,.settings-nav-links button.active{background:var(--blue-soft);color:var(--blue-strong)}.engine-note{background:#f4f7ff}.playbook-principles span{padding:6px 9px;background:#f1f4f8}.assistant-preview{background:#f4f7ff}

/* OMNICHANNEL WORKSPACE */
.channels-view{background:linear-gradient(135deg,#f8fafc,#f2f6fb)}
.channels-main{padding:30px 34px!important;overflow:auto!important}
.channels-page-head h1{color:var(--text)!important;font-size:29px!important;letter-spacing:-.035em!important}
.channels-page-head p{color:#8b97aa!important}
.omni-summary>div,.channel-card{background:#fff!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:var(--shadow)!important}
.channel-logo{background:#eef3ff!important;color:var(--blue)!important}
.integration-status{border-radius:999px!important}

/* LOGIN */
.token{background:rgba(6,21,44,.72);backdrop-filter:blur(5px)}
.token-card{width:min(460px,100%);padding:28px;border-radius:18px;box-shadow:var(--shadow-lg)}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:18px}.login-mark{background:var(--blue);color:#fff;border-radius:10px}.login-brand strong{display:block;margin-top:2px;color:var(--text);font-size:13px}.token-card h1{font-size:24px;letter-spacing:-.035em;margin:0 0 7px;color:var(--text)}.token-card p{font-size:10.5px;margin:0 0 16px}.token-row input{background:#fff}

/* ALERT DRAWER */
.sales-alert-drawer{right:18px!important;top:18px!important;border-radius:14px!important;box-shadow:var(--shadow-lg)!important;border-color:var(--line)!important}.sales-alert-head{padding:17px!important}.sales-alert-list{padding:10px!important}.sales-alert-item{border-radius:10px!important;padding:11px!important}.sales-alert-btn .sales-alert-count{margin-left:auto}

@media(max-width:1320px){
  :root{--sidebar-w:220px}
  .crm-layout{grid-template-columns:285px minmax(470px,1fr) 360px}
  .modern-config{grid-template-columns:265px minmax(0,1fr)}
}

@media(max-width:1050px){
  :root{--sidebar-w:190px}
  .brand-mark{width:80px}.tab,.sales-alert-btn{font-size:9px!important;padding:0 9px!important}
  .crm-layout{grid-template-columns:270px minmax(430px,1fr)}
  .crm-panel{top:0}
  .modern-main{padding:22px 22px 86px}
}

@media(max-width:820px){
  .app{display:grid;grid-template-columns:1fr;grid-template-rows:64px minmax(0,1fr)}
  .topbar{grid-column:1;grid-row:1;width:100%;height:64px;min-height:64px;padding:8px 10px;flex-direction:row;align-items:center;justify-content:space-between;overflow:visible;border-bottom:1px solid rgba(255,255,255,.08)}
  .brand-pro{min-height:0;padding:0 8px;border:0;flex-direction:row;align-items:center}.brand-mark{width:70px;height:28px}.brand-copy{display:none}
  .tabs{width:auto;max-width:calc(100vw - 95px);height:auto;padding:0;flex-direction:row;overflow-x:auto;gap:5px}
  .tabs::before{display:none}
  .tab,.sales-alert-btn{width:auto!important;min-width:max-content!important;min-height:38px!important;padding:0 10px!important;font-size:8px!important}
  .tab::before{display:none}
  .view{grid-column:1;grid-row:2;height:auto;min-height:0}
  .crm-layout{grid-template-columns:1fr}.sidebar{display:none}.chat-head{padding:12px}.chat-meta{display:none}.chat-actions{max-width:65%}.messages{padding:12px}.crm-panel{top:64px}
  .modern-config{grid-template-columns:1fr}.modern-nav{display:none}.modern-main{padding:17px 14px 84px}.config-page-head h1{font-size:23px!important}.settings-card{padding:14px}.editor-grid{grid-template-columns:1fr}.editor-aside{display:none}.save-bar{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .channels-main{padding:18px 14px!important}
  .sales-alert-drawer{top:70px!important;right:6px!important;left:6px!important;width:auto!important;max-height:calc(100vh - 76px)!important}
}

@media(max-width:520px){
  .tab[data-view="knowledgeView"],.tab[data-view="settingsView"]{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-grid{grid-template-columns:repeat(2,1fr)}.chat-actions{max-width:70%}.chat-actions select{max-width:105px}.msg{max-width:92%}
}