/* ==========================================================
   UMEGO Admin — Base layout (clean, fixed)
   ========================================================== */

*{ box-sizing:border-box; }
html, body{
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  color:#0f172a;
}

a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

/* Layout: left sidebar fixed, right content fills and scrolls only inside */
.layout{
  display: flex;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.sidebar{
  width: 280px;
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px;
  min-height: 0;
  /* Scroll lives in .sidebar-nav so header/footer stay visible; whole-column flex+no overflow here used to squash nav and overlap footer */
  overflow: hidden;
}

.main{
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px 32px 24px 32px;
}

/* Right content area: fills main, scroll only inside .content-scroll */
#view-container{
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: none;
  width: 100%;
}

/* Content card: header fixed, body scrolls */
.content-card{
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
  width: 100%;
  overflow: hidden;
  padding: 0;          /* override .card default padding — nav goes edge-to-edge */
}
.content-header{
  flex-shrink: 0;
  padding: 16px 20px 0; /* back-btn + title get proper inset */
}
/* flex: 1 1 0% + min-height: 0 gives a bounded height so overflow-y: auto can scroll */
.content-scroll{
  flex: 1 1 0%;
  min-height: 0;
  height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Company tab content: flex column so .tab-scroll-body can scroll */
#tab-content.content-scroll{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 0;
}

/* Brand Ambassadors tab: toolbar fixed, only table body scrolls; thead sticky is in companies.js */
#tab-content.content-scroll .ba-shell{
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}
#tab-content.content-scroll .ba-tab-body.tab-scroll-body{
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#tab-content.content-scroll .ba-table-scroll{
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Customers tab: same scroll shell as Brand Ambassadors */
#tab-content.content-scroll .cust-shell{
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}
#tab-content.content-scroll .cust-tab-body.tab-scroll-body{
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#tab-content.content-scroll .cust-table-scroll{
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Voice Response tab: filter fixed, table scrolls */
#tab-content.content-scroll .vr-tab-shell{
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- Global admin data tables (visual aligned with BA list; not used on .ba-table / .cust-table) ---------- */
.admin-table-wrap{
  width: 100%;
  overflow: visible;
  border-radius: var(--r-lg, 12px);
  border: 1px solid var(--glass-stroke, rgba(255,255,255,.2));
  box-shadow: var(--shadow-lite, 0 4px 20px rgba(0,0,0,.08));
  background: linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.40));
}
.admin-table-wrap .table.admin-data-table{
  display: table;
  overflow: visible;
  table-layout: fixed;
  width: 100%;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 0 !important;
}
.admin-table-wrap .table.admin-data-table thead{ display: table-header-group; }
.admin-table-wrap .table.admin-data-table tbody{ display: table-row-group; }
.admin-table-wrap .table.admin-data-table tr{ display: table-row; }
.admin-table-wrap .table.admin-data-table th,
.admin-table-wrap .table.admin-data-table td{
  display: table-cell;
  vertical-align: middle;
}
/* ai-table keeps top alignment for multiline cells; skin from admin-data-table */
.admin-table-wrap .table.ai-table.admin-data-table th,
.admin-table-wrap .table.ai-table.admin-data-table td{
  vertical-align: top;
}
.table.admin-data-table thead th{
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(15,23,42,0.7);
  background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(255,255,255,0.92));
  border-top: 1px solid rgba(15,23,42,0.10);
  border-bottom: 2px solid rgba(15,23,42,0.12);
  padding: 12px 10px;
  white-space: nowrap;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: 0 1px 0 rgba(15,23,42,0.08);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.table.admin-data-table tbody td{
  padding: 10px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.table.admin-data-table tbody tr:nth-child(even) td{ background: rgba(255,255,255,0.45); }
.table.admin-data-table tbody tr:nth-child(odd) td{ background: rgba(255,255,255,0.52); }
.table.admin-data-table tbody tr:hover td{ background: rgba(37,99,235,0.08) !important; }
.table.admin-data-table tbody tr:last-child td{ border-bottom: none; }

.admin-table-scroll{
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Page shell: fixed header row, only table area scrolls */
.page-panel.card .content-scroll.is-admin-table-page{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.is-admin-table-page > .header-row,
.is-admin-table-page > .admin-table-page-head{
  flex-shrink: 0;
}

/* Customer 360: section title fixed, table scrolls */
#c360-tab.content-scroll .tab-scroll-body.c360-tab-flex{
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#c360-tab.content-scroll .c360-activity-shell{
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}
#c360-tab.content-scroll .c360-activity-shell > .c360-table-section-title{
  flex-shrink: 0;
}
#c360-tab.content-scroll .c360-activity-shell > .admin-table-scroll{
  flex: 1 1 0%;
  min-height: 0;
}

/* AI Logs: scroll area fills below toolbar */
#ai-main-tab.content-scroll .ai-logs-scroll.tab-scroll-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}
#ai-main-tab.content-scroll .ai-logs-scroll .admin-table-scroll{
  flex: 1 1 0%;
  min-height: 0;
}

/* Strip the default .tab-content card appearance — the outer .content-card is the visual container */
.content-card > #tab-content{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 20px !important;   /* align with .content-header 20px side-padding */
  padding-right: 20px !important;
}
.content-card > #tab-content::before{
  display: none !important;
}
.tab-scroll-body{
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
}

/* Customer 360 tab content: same as Company tab - flex column, .tab-scroll-body scrolls */
#c360-tab.content-scroll{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 0;
}

/* AI Pipelines tab content: same - flex column, .tab-scroll-body scrolls */
#ai-main-tab.content-scroll{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 0;
}
/* Card inside AI tab must be flex column so .tab-scroll-body gets bounded height */
#ai-main-tab.content-scroll .card{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* AI Logs: toolbar fixed, table area scrolls */
#ai-main-tab.content-scroll .ai-logs-shell{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#ai-main-tab.content-scroll .ai-logs-toolbar{
  flex-shrink: 0;
}

/* Fallback: simple card without content-card or page-panel (e.g. error message) still scrolls */
#view-container > .card:not(.content-card):not(.page-panel){
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

/* when company details page is rendered, make it wide */
.main.company-wide > #view-container{
  max-width: none;
  width: 100%;
}

/* ===================================================================
   Unified page layout — page-shell / page-topbar / page-panel / page-tabs
   (used by every view; replaces old company-* layout classes)
   =================================================================== */
.page-shell{
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}

/* Topbar: back-btn absolute left, title centered, optional action btn absolute right */
.page-topbar{
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 24px 7px;
}
.page-topbar .back-btn{
  position: absolute;
  left: 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(71, 85, 105, 0.92);
  opacity: 1;
}
.page-topbar .back-btn .back-btn-arrow{
  display: inline-block;
  margin-right: 0.28em;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: -0.14em;
  color: rgba(51, 65, 85, 0.95);
}
.page-topbar .back-btn:hover .back-btn-arrow{
  color: rgba(15, 23, 42, 0.95);
}
.page-topbar .topbar-action{
  position: absolute;
  right: 24px;
}
.page-topbar .page-title{
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  text-align: center;
  padding: 0 90px;   /* keeps title clear of back-btn / topbar-action */
}

/* Optional subtitle row (e.g. customer KV strip) — on gradient, above panel */
.page-topbar-subtitle{
  flex-shrink: 0;
  padding: 0 24px 10px;
  font-size: 13px;
  color: var(--muted);
}

/* Card panel — fills remaining height */
.page-panel{
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Uniform opaque white so tabs and content share the same bg */
  background: rgba(255, 255, 255, 0.92) !important;
}

/* Generic content area inside panel: transparent, no double-card chrome */
.page-panel > .content-scroll{
  flex: 1 1 0%;
  min-height: 0;
  height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 16px 20px 0 !important;
}
.page-panel > .content-scroll::before{ display: none !important; }

/* ---- Page tabs (main nav row at top of panel) ---- */
.page-tabs{
  display:flex;
  align-items:flex-end;
  gap:2px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px 6px 0 6px;
  /* Separator as background layer — child opaque bg paints over it */
  background:
    linear-gradient(rgba(15,23,42,0.10), rgba(15,23,42,0.10)) bottom / 100% 1px no-repeat,
    transparent;
  border-bottom: none;
}
.page-tabs::-webkit-scrollbar{ height:6px; }
/* Main tabs */
.page-tabs .tab-btn{
  flex:0 0 auto;
  white-space:nowrap;
  position:relative;
  z-index:1;
  border-radius:8px 8px 0 0;
  padding:11px 16px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: normal;
  background: transparent;
  border:1px solid transparent;
  border-bottom:none;
  box-shadow:none;
  transform:none;
  color: rgba(15,23,42,0.62);
  cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.page-tabs .tab-btn:hover{
  background: rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.92);
}
.page-tabs .tab-btn.active{
  color: rgb(30, 64, 175);
  font-weight: 600;
  background: #fff;
  border:1px solid var(--glass-stroke, rgba(15,23,42,0.10));
  border-bottom: none;
}
/* "Help" / last-right tab pushed to far right */
.page-tabs .tab-btn[data-tab="help"],
.page-tabs .tab-btn[data-group="help"]{
  margin-left:auto;
}

/* ---- Page subtabs (secondary nav, optional) ---- */
.page-subtabs{
  display:flex;
  align-items:baseline;
  gap:4px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 12px 12px 12px;
  background: rgba(255,255,255,0.25);
}
.page-subtabs[hidden]{ display:none !important; }
.page-subtabs::-webkit-scrollbar{ height:6px; }
.page-subtab-btn{
  flex:0 0 auto;
  white-space:nowrap;
  -webkit-appearance:none;
  appearance:none;
  margin:0;
  padding:5px 9px;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-family:inherit;
  font-size: 14px;
  font-weight:500;
  line-height:1.35;
  color: rgba(71, 85, 105, 0.9);
  cursor:pointer;
  text-decoration:none;
  transition: color .12s ease;
}
.page-subtab-btn:hover{
  color: rgba(15, 23, 42, 0.95);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color: rgba(100, 116, 139, 0.55);
}
.page-subtab-btn.active{
  color: rgb(29, 78, 216);
  font-weight:500;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:5px;
  text-decoration-color: rgb(37, 99, 235);
}
.page-subtab-btn:focus-visible{
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sidebar header — logo only; no card chrome (see liquid.css) */
.sidebar-header{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 0;
  flex-shrink: 0;
}

.sidebar-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.logo{
  height: 34px;
  width: auto;
  display: block;
}

.sidebar-brand-text{
  font-weight: 750;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: rgba(15, 23, 42, 0.82);
}

/* Titles */
.app-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.app-subtitle{
  opacity: .75;
  font-size: 0.88rem;
  margin-top: 2px;
  font-weight: 650;
}

/* Nav — grouped sections; fills space between header and footer and scrolls when items exceed viewport */
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap: 0;
  padding: 6px;
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.sidebar-nav-group{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sidebar-nav-group + .sidebar-nav-group{
  margin-top: 14px;
}
.sidebar-section-label{
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted, rgba(15, 23, 42, 0.48));
  padding: 6px 12px 4px;
  user-select: none;
}
.sidebar-nav-group:first-child .sidebar-section-label{
  padding-top: 2px;
}

.sidebar-footer-divider{
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
  margin: 6px 10px 0;
  height: 0;
  align-self: stretch;
}

.nav-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 650;
}

.nav-icon{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.nav-icon svg{
  display: block;
  width: 22px;
  height: 22px;
}

.sidebar-bottom{
  padding: 8px 6px 2px 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Ghost sign out: icon + label, width = content; collapsed → icon only via .nav-text */
.sidebar-logout{
  appearance: none;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.72);
  transition: background .12s ease, color .12s ease;
}
.sidebar-logout:hover{
  background: rgba(255, 255, 255, 0.35);
  color: rgba(15, 23, 42, 0.9);
}
.sidebar-logout:focus-visible{
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

/* Sidebar collapse control: no filled secondary button — icon only */
.sidebar-toggle-btn{
  appearance: none;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: rgba(15, 23, 42, 0.72);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sidebar-toggle-btn:hover{
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.92);
}
.sidebar-toggle-btn:focus-visible{
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

/* Content typography */
h1{
  font-size: 2.0rem;
  letter-spacing: -0.03em;
  margin: 0 0 10px 0;
  font-weight: 850;
  line-height: 1.1;
}

/* Common helpers used by views */
.card, .tab-content{
  border-radius: 8px;
  padding: 18px;
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.header-row h1{ margin:0; }

/* Buttons base (theme will skin .btn) */
.btn{
  appearance:none;
  border: 0;
  background: transparent;
  padding: 9px 14px;
  border-radius: 8px;
  cursor:pointer;
  font-weight: 600;
  font-size: 14px;
}
.btn.sm{ padding: 7px 12px; font-size: 0.92rem; }
.btn.full{ width:100%; }

/* Icon-only reload — no border/frame; glyph + padding for hit area */
.btn-reload{
  appearance: none;
  flex-shrink: 0;
  margin: 0;
  padding: 6px 8px;
  min-width: 36px;
  min-height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  cursor: pointer;
  box-shadow: none;
  transition: background .12s ease, opacity .12s ease;
}
.btn-reload:hover{
  background: rgba(15, 23, 42, 0.06);
}
.btn-reload:focus-visible{
  outline: 2px solid rgb(37, 99, 235);
  outline-offset: 2px;
}
.btn-reload:active{
  background: rgba(15, 23, 42, 0.1);
}
.btn-reload svg{
  display: block;
  flex-shrink: 0;
}

/* Customer 360: icon refresh aligned to the right of the tab row */
.page-tabs .btn-reload{
  margin-left: auto;
  align-self: center;
  margin-bottom: 2px;
}

/* AI Logs toolbar: one row, filters size to content, refresh right */
.ai-logs-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-bottom: 14px;
}
.ai-logs-toolbar .btn-reload{
  margin-left: auto;
}
.ai-logs-filter{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}
.ai-logs-filter label{
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}
.ai-logs-filter select{
  min-width: 0;
}
.ai-logs-scroll{
  min-height: 0;
}
.ai-logs-table-host{
  min-width: 0;
}

/* Table base structure (theme will skin .table) */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Make tables scroll horizontally instead of squeezing */
.table{
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table thead, .table tbody, .table tr{
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table{
  min-width: 920px; /* keeps columns readable */
}

/* Responsive */
@media (max-width: 760px){
  .layout{ flex-direction: column; height: auto; min-height: 100vh; }
  .sidebar{
    width: 100%;
    flex: 0 0 auto;
    overflow: visible;
  }
  /* Column layout: sidebar height is content-driven; avoid flex-1 nav collapsing to zero */
  .sidebar-nav{
    flex: 0 0 auto;
    overflow: visible;
    min-height: 0;
  }
  .main{
    padding: 22px;
    flex: 1;
    min-height: 0;
  }
  #view-container{
    max-width: none;
  }
}

/* Auth base helpers */
.login-body{ margin:0; }

.auth-shell{
  min-height: 100vh;
  display:grid;
  place-items:center;
  padding: 28px;
}

.auth-card{
  width: 460px;
  max-width: calc(100vw - 32px);
  border-radius: 8px;
  padding: 22px;
}

.auth-header{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 12px;
}

.auth-logo{ width:120px; height:auto; display:block; }
.auth-title{ font-weight: 900; letter-spacing:-0.02em; margin:0; }
.auth-subtitle{ opacity:.75; }

.label{
  margin-top: 10px;
  display:block;
  font-weight: 700;
}

.input{
  margin-top: 6px;
}

.turnstile-row{
  margin-top: 12px;
  margin-bottom: 10px;
}

.error{
  color: #ef4444;
  font-size: 0.9rem;
  margin-top: 8px;
}

/* ===== Forms layout helpers ===== */

.form-row-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  align-items:start;
}
@media (max-width: 760px){
  .form-row-two{ grid-template-columns: 1fr; }
}

.form-row-three{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px 16px;
  align-items: start;
}
@media (max-width: 900px){
  .form-row-three{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .form-row-three{ grid-template-columns: 1fr; }
}

.form-group{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

/* optional helper used in some tabs */
.form-grid{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 10px 14px;
  align-items:center;
}
@media (max-width: 760px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* Company > General Info: logo preview + actions aligned with form-grid */
.c-info-logo-row{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.c-info-logo-preview{
  width: 140px;
  height: 72px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  background: rgba(0,0,0,.04);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.c-info-logo-preview img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.c-info-logo-placeholder{
  font-size: 12px;
  color: rgba(0,0,0,.4);
  text-align: center;
  line-height: 1.3;
}
.c-info-logo-preview.c-info-logo-hit{
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.c-info-logo-preview.c-info-logo-hit:hover{
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.32);
}
.c-info-logo-preview.c-info-logo-hit:focus{
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

.modal-title{
  margin:0;
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing:-0.02em;
}

/* .page-title is now styled via .page-topbar .page-title in app.css */
/* Old .company-shell and .company-nav-panel were removed */

.tab-btn{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.55);
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
  font-weight: 700;
}
.tab-btn.active{
  border-color: rgba(37,99,235,0.35);
  background: rgba(37,99,235,0.12);
}

/* Admin/sensitive tabs: General Info, Configuration, Twilio */
.tab-btn-admin{
  border-left: 3px solid rgba(220, 38, 38, 0.65);
  position: relative;
}
.tab-btn-admin:hover{
  background: rgba(220, 38, 38, 0.06);
}
.tab-btn-admin.active{
  border-left-color: rgba(220, 38, 38, 0.8);
  background: rgba(220, 38, 38, 0.1);
}

/* Langfuse Sync uses .btn.danger — no extra override needed */

.back-btn{
  border: 0;
  background: transparent;
  cursor:pointer;
  font-weight: 750;
  opacity: .8;
  padding: 6px 0;
}
.back-btn:hover{ opacity: 1; text-decoration: underline; }
/* Top bar: typography handled above; keep default .back-btn for non-topbar contexts */
.page-topbar .back-btn:hover{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(100, 116, 139, 0.55);
}

/* =========================
   Modal system (single source of truth)
   ========================= */
.hidden{ display:none !important; }

.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10001;
}
.modal.hidden{ display:none !important; }

.modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.modal-content{
  width: min(820px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 18px;
}
.modal-content.modal-lg{
  width: min(980px, calc(100vw - 48px));
}

.modal-header{ margin-bottom: 12px; }
.modal-body{ margin-top: 6px; }
.modal-footer{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 14px;
}

/* Right group: Cancel / Save / OK / Yes — use after optional .btn.danger on the left */
.modal-footer-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}

/* Single Close (or one primary) — pin to the right */
.modal-footer > button:only-child{
  margin-left: auto;
}
.modal-footer > .modal-footer-actions:only-child{
  margin-left: auto;
}

/* Safety: if some modals create buttons without .btn (JS modals) */
.modal .modal-footer > button:not(.btn){
  appearance:none;
  border: 0;
  background: transparent;
  padding: 9px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 750;
}

/* Import format help: compact ? button + scrollable body */
.import-help-btn{
  min-width: 32px;
  width: 32px;
  padding: 6px 0;
  font-size: 1rem;
  line-height: 1;
  border-radius: 50%;
}
.modal-body.import-help-body{
  max-height: 70vh;
  overflow-y: auto;
}
.modal-body.import-help-body #import-help-content code{
  background: rgba(0,0,0,.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* =========================
   Checkbox / Radio (BASE RESET)
   Important: prevents input{width:100%} look from affecting checkboxes
   ========================= */

.inline-checkbox{
  display:flex;
  align-items:center;
}

.checkbox-label{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  user-select:none;
  cursor:pointer;
  line-height: 1.2;
}

/* make checkbox sit slightly lower (your screenshots) */
.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"]{
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  position: relative;
  top: 1px;           /* <- ключевое: “опустить” */
}

/* Checkbox blocks inside grids: take full row and be lower */
.form-row-two .inline-checkbox,
.form-row-three .inline-checkbox{
  grid-column: 1 / -1;
  margin-top: 10px;
}

/* ===== Modal sizes ===== */
.modal-content.modal-sm{
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  padding: 18px 18px 14px;
  border-radius: 8px;
}

/* Confirm: tighter layout */
#confirm-modal .modal-header{
  padding: 0 0 10px;
}

#confirm-modal .modal-body{
  padding: 0 0 14px;
}

#confirm-modal .modal-footer{
  padding: 0;
}

pre.code-block{
  background: rgba(0,0,0,.06);
  border-radius: 8px;
  padding: 10px;
  overflow:auto;
  max-height: 420px;
  margin: 6px 0 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* AI modals: align inline checkbox groups to the left */
.form-group.inline-checkbox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.checkbox-label{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

/* optional: if your checkbox is drifting */
.checkbox-label input[type="checkbox"]{
  margin: 0;
}
/* header for actions */
.ai-actions-head{
  width: 1%;
}

/* actions cell: flex for buttons */
td.ai-actions{
  white-space: nowrap;
  width: 1%;
  text-align: right;
  padding-right: 14px;
  vertical-align: middle;
}

.ai-actions-wrap{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}


/* AI pipelines compact action buttons — flat, no shadows */
td.ai-actions .ai-btn{
  padding: 6px 10px;
  border-radius: 6px;
  border: 1.5px solid #0f172a;
  background: #fff;
  color: #0f172a;
  box-shadow: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* order ↑↓: secondary */
td.ai-actions .ai-btn-order{
  background: #fff;
  border-color: #0f172a;
  color: #0f172a;
}
td.ai-actions .ai-btn-order:hover{ background: rgba(15,23,42,0.05); }

/* edit: secondary */
td.ai-actions .ai-btn-edit{
  background: #fff;
  border-color: #0f172a;
  color: #0f172a;
}
td.ai-actions .ai-btn-edit:hover{ background: rgba(15,23,42,0.05); }

/* delete: danger */
td.ai-actions .ai-btn-delete{
  background: rgb(220, 38, 38);
  border-color: rgb(185, 28, 28);
  color: #0f172a;
}
td.ai-actions .ai-btn-delete:hover{ filter: brightness(1.08); }

/* ===== AI tables: don't use "block table" hack, it breaks last column ===== */
/* Must win over global .table { min-width: 920px } — otherwise endpoints table forces horizontal scroll */
.table.ai-table{
  display: table;         /* вернуть нормальное поведение table */
  overflow: visible;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100%;
  box-sizing: border-box;
}

.table.ai-table thead,
.table.ai-table tbody,
.table.ai-table tr{
  display: table-row-group; /* reset */
  width: auto;
  table-layout: auto;
}

.table.ai-table tr{ display: table-row; }
.table.ai-table thead{ display: table-header-group; }
.table.ai-table tbody{ display: table-row-group; }


/* =========================================================
   AI Pipelines — flat overrides (align with td.ai-actions)
   ========================================================= */

.ai-actions-wrap .ai-btn{
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: none !important;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* order ↑↓: secondary */
.ai-actions-wrap .ai-btn.ai-btn-order{
  background: #fff !important;
  border: 1.5px solid #0f172a !important;
  color: #0f172a !important;
}
.ai-actions-wrap .ai-btn.ai-btn-order:hover{
  background: rgba(15,23,42,0.05) !important;
}

/* edit: secondary */
.ai-actions-wrap .ai-btn.ai-btn-edit{
  background: #fff !important;
  border: 1.5px solid #0f172a !important;
  color: #0f172a !important;
}
.ai-actions-wrap .ai-btn.ai-btn-edit:hover{
  background: rgba(15,23,42,0.05) !important;
}

/* delete: danger */
.ai-actions-wrap .ai-btn.ai-btn-delete{
  background: rgb(220, 38, 38) !important;
  border: 1px solid rgb(185, 28, 28) !important;
  color: #0f172a !important;
}
.ai-actions-wrap .ai-btn.ai-btn-delete:hover{
  filter: brightness(1.08) !important;
}

/* Make toast always above modals */
.ai-toast, .toast, #toast-container, .toast-container{
  position: fixed;
  z-index: 11000 !important; /* > 10001 modal */
}



/* Customer 360 small add-ons */

.customer-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.customer-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.customer-name {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

.customer-sub {
  opacity: .8;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.customer-kv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 12px;
  margin-top: 10px;
}

.customer-kv label {
  opacity: .75;
}

.pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

.pill .pill-actions {
  display: inline-flex;
  gap: 6px;
}

.pill button {
  padding: 2px 8px;
  font-size: .85rem;
}

.group-card {
  margin-top: 12px;
}

.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.group-title {
  font-weight: 800;
}

.group-body.hidden {
  display: none;
}

.link-like {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .9;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.note-excerpt {
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================
   Customer360 Calls table fix
   ========================= */

/* wrapper делает горизонтальный скролл (can stack with .admin-table-wrap) */
.c360-table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* вернуть таблице нормальное table-поведение (как ты сделал для ai-table) */
.table.c360-table{
  display: table;
  overflow: visible;
  min-width: 0; /* не навязываем 920px именно тут */
}
/* With global admin skin */
.table.c360-table.admin-data-table{
  min-width: 980px;
}

.table.c360-table thead,
.table.c360-table tbody,
.table.c360-table tr{
  display: table-row-group;
  width: auto;
  table-layout: fixed;
}
.table.c360-table tr{ display: table-row; }
.table.c360-table thead{ display: table-header-group; }
.table.c360-table tbody{ display: table-row-group; }

/* фикс ширин колонок + читабельность */
.table.c360-table{
  table-layout: fixed;
  width: 100%;
  min-width: 980px; /* можно 920/980 — на вкус */
}

.table.c360-table td.c360-col-summary{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table.c360-table.admin-data-table tbody tr{
  cursor: pointer;
}


/* =========================
   Customer360 Call modal fix
   ========================= */

.modal-content.c360-modal-fixed{
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  overflow: hidden; /* скролл будет внутри панели */
}

.c360-modal-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.c360-call-panel{
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Customer360 Call modal — one scrollbar (panel), pre expands */
.modal-content.c360-modal-fixed pre.code-block{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important; /* убираем второй скролл */
  margin: 0;
}

.modal-content.c360-modal-fixed .c360-call-panel{
  overflow: auto;  /* единственный скролл */
}

.modal-content.c360-modal-fixed pre.code-block{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0;
}
.modal-content.c360-modal-fixed .c360-call-panel{
  overflow: auto;
  flex: 1;
}
.modal-content.c360-modal-fixed .c360-modal-body{
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}



/* =========================================
   Customer360 Tags — nice hashtag pills + inline editor
   ========================================= */

.pills{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* base chip */
.tag-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;

  border: 1px solid rgba(37,99,235,0.22);
  background: rgba(37,99,235,0.08);
  transition: filter .12s ease, border-color .12s ease;
}

.tag-pill:hover{
  filter: brightness(1.04);
  border-color: rgba(37,99,235,0.34);
}

.tag-pill .tag-hash{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(37,99,235,0.95);
}

.tag-pill .tag-text{
  font-weight: 750;
  color: rgba(15,23,42,0.86);
}

/* editing mode */
.tag-pill.editing{
  cursor: default;
  padding-right: 8px;
  border-color: rgba(37,99,235,0.35);
  background:
    radial-gradient(220px 60px at 25% 0%, rgba(255,255,255,0.70), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.45));
}

.tag-pill.editing:hover{
  transform: none;
}

.tag-input{
  width: 220px;
  max-width: 48vw;
  border-radius: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.95);
  box-shadow: none;
  outline: none;
  font: inherit;
}

.tag-input:focus{
  border-color: rgba(37,99,235,0.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}

.tag-actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
}

.tag-icon-btn{
  appearance: none;
  border: 1.5px solid #0f172a;
  background: #fff;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
  transition: filter .12s ease;
}

.tag-icon-btn:hover{ filter: brightness(1.08); }
.tag-icon-btn:active{ transform: none; }

/* Save ✓: primary (blue) */
.tag-icon-btn.save{
  background: rgb(37, 99, 235);
  border-color: rgb(29, 78, 216);
  color: #fff;
}

/* Cancel ✕: secondary (white + black border) */
.tag-icon-btn.cancel{
  background: #fff;
  border-color: #0f172a;
  color: #0f172a;
}

/* Delete 🗑: same soft danger as .btn.danger (Customers pending-terms palette) */
.tag-icon-btn.delete{
  background: var(--admin-danger-soft-bg, rgba(248, 113, 113, 0.12));
  border: 1px solid var(--admin-danger-soft-border, rgba(248, 113, 113, 0.38));
  color: var(--admin-danger-soft-color, #e54858);
  font-weight: 600;
}
.tag-icon-btn.delete:hover{
  background: var(--admin-danger-soft-bg-hover, rgba(248, 113, 113, 0.22));
  border-color: rgba(248, 113, 113, 0.48);
  color: var(--admin-danger-soft-color, #e54858);
  filter: none;
}
.tag-icon-btn.delete:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

.c360-topbar {
  margin-bottom: 0;
}

#c360-header {
  margin-top: 0;
}


/* ===== Sidebar: collapsed mode polish (remove header capsule) ===== */

/* collapsed size */
#sidebar.collapsed{
  width: 64px !important;
  flex: 0 0 64px !important;
  max-width: 64px !important;
  min-width: 64px !important;
}

/* ALWAYS keep toggle visible */
#sidebar{
  position: relative;
}
#sidebar-toggle{
  position: absolute !important;
  top: 12px;
  right: 10px;
  z-index: 100;

  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* reserve space in expanded header so toggle doesn't overlap */
#sidebar .sidebar-header{
  padding-right: 56px !important;
  position: relative;
}

/* collapsed: show only one image (logo), like nav items; hide text */
#sidebar.collapsed .sidebar-brand-text{
  display: none !important;
}
#sidebar.collapsed .sidebar-brand{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 0 0 auto;
}
#sidebar.collapsed .sidebar-brand .logo{
  max-height: 28px !important;
  height: auto !important;
  width: auto !important;
  display: block !important;
  object-fit: contain;
}

/* IMPORTANT: remove the big header capsule look when collapsed */
#sidebar.collapsed .sidebar-header{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 50px 0 8px 0 !important;   /* logo below toggle (toggle ~34px at top 12px) */
  margin: 0 !important;
  overflow: visible !important;
  flex-direction: column;
  align-items: center;
}

/* remove liquid theme sparkle layer */
#sidebar.collapsed .sidebar-header::before{
  content: none !important;
  display: none !important;
}

/* nav collapse */
#sidebar.collapsed .sidebar-section-label,
#sidebar.collapsed .sidebar-footer-divider{
  display: none !important;
}
#sidebar.collapsed .sidebar-nav-group + .sidebar-nav-group{
  margin-top: 0;
}
#sidebar.collapsed .nav-text{
  display: none !important;
}
#sidebar.collapsed .nav-item{
  justify-content: center !important;
  padding-left: 10px;
  padding-right: 10px;
}
#sidebar.collapsed .sidebar-bottom{
  align-items: center;
  width: 100%;
}
#sidebar.collapsed .sidebar-bottom .sidebar-logout{
  justify-content: center !important;
  padding-left: 10px;
  padding-right: 10px;
}

/* make top spacing look nice (so icons start below toggle) */
#sidebar.collapsed .sidebar-nav{
  margin-top: 52px;
}

/* collapsed size — MUST override base .sidebar */
.layout > aside.sidebar#sidebar.collapsed{
  width: 64px !important;
  flex: 0 0 64px !important;
  max-width: 64px !important;
  min-width: 64px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.layout > aside.sidebar#sidebar{
  transition: width .18s ease, flex-basis .18s ease, padding .18s ease;
}


.sidebar-version{
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  opacity: 0.45;
  font-weight: 600;
  user-select: none;
}
/* контейнер футера — под навигацией; прижатие вниз даёт flex:1 у .sidebar-nav между header и footer */
.sidebar-footer{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* версия */
.sidebar-meta{
  padding: 4px 14px 0;
  text-align: left;
}

.sidebar-version{
  font-size: 0.75rem;
  opacity: 0.45;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#sidebar.collapsed .sidebar-version{
  display: none;
}