ء.sidebar .brand-symbol {
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background-color: #282419;
  background-image: url('/brand-logo.jpg');
  background-position: center 13%;
  background-size: auto 54px;
}

.status-chip.private-filter {
  border-color: #8e7540;
  background: #302719;
  color: #f0d27e;
}

.status-chip.private-filter.active {
  background: #47391f;
  box-shadow: inset 0 -2px #d6b45f;
}

.private-card {
  border-color: #806c3e;
  background: linear-gradient(120deg, #2b261d, #1e1c18);
}

.private-card .metric-icon {
  background: #41351f;
  color: #f0d27e;
}

.private-lead-row td {
  background: rgb(214 180 95 / 4%);
}

.private-lead-row td:first-child {
  border-right: 2px solid #d6b45f;
}

.private-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 6px;
  padding: 2px 5px;
  border: 1px solid #796337;
  border-radius: 2px;
  color: #f0d27e;
  font: 8px var(--latin);
  vertical-align: 1px;
}

.protected-owner {
  color: #c8b579;
  font-size: 8px;
}

.notes-edit {
  display: block;
  width: 150px;
  min-height: 28px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: #c4beaf;
  font-size: 9px;
  resize: vertical;
}

.notes-edit:hover,
.notes-edit:focus {
  border-color: #5a4a2b;
  background: #201e19;
}

.private-control {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0 !important;
  padding: 10px;
  border: 1px solid #5b4a2c;
  border-radius: 3px;
  background: #29251d;
  cursor: pointer;
}

.private-control input {
  width: 15px;
  height: 15px;
  accent-color: #d6b45f;
}

.private-control strong,
.private-control small {
  display: block;
}

.private-control strong {
  color: #f0d27e;
  font-size: 9px;
}

.private-control small {
  margin-top: 3px;
  color: #988d74;
  font-size: 8px;
}

.owner-only[hidden] {
  display: none !important;
}

body.is-owner #metrics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.is-owner #pipeline-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.owner-toolbar-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

.owner-toolbar-action[aria-pressed='true'] {
  border-color: var(--gold);
  background: var(--surface-2);
  color: var(--gold-bright);
}

.owner-settings-link {
  position: relative;
  margin-top: 10px;
}

.owner-settings-link::before {
  position: absolute;
  inset: -6px 10px auto;
  border-top: 1px solid var(--line);
  content: '';
}

@media (max-width: 1120px) {
  body.is-owner #leads-view .table-toolbar {
    flex-wrap: wrap;
  }

  body.is-owner #metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.is-owner #pipeline-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  body.is-owner #metrics-grid,
  body.is-owner #pipeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-toolbar-action {
    flex: 1 1 calc(50% - 7px);
  }
}

.topbar-brand-logo { display: none; }
html[data-theme='light'] .topbar-brand-logo { content: url('/brand-logo-light.png'); }
html[data-theme='dark'] .topbar-brand-logo { content: url('/brand-logo.jpg'); }
@media (max-width: 680px) {
  html, body { min-width: 320px; }
  body { overflow-x: hidden; }
  .sidebar {
    position: fixed;
    z-index: 15;
    inset: auto 0 0;
    width: 100%;
    height: calc(66px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    border-left: 0;
    background: var(--surface);
    box-shadow: 0 -5px 20px rgb(0 0 0 / 12%);
  }
  .sidebar .brand, .sidebar-label, .sidebar-bottom { display: none; }
  .main-nav { display: flex; align-items: stretch; justify-content: space-around; gap: 4px; width: 100%; height: 100%; }
  .nav-link {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 54px;
    margin: 0;
    padding: 4px 2px;
    border-radius: 6px;
    font-size: 9px;
  }
  .nav-link > svg { flex: 0 0 19px; width: 19px; height: 19px; }
  .nav-link span { display: block; max-width: 100%; overflow: hidden; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .nav-link i { position: absolute; top: 1px; right: calc(50% - 23px); min-width: 15px; height: 14px; margin: 0; font-size: 7px; transform: none; }
  .main-content { min-height: 100vh; margin: 0; padding: 0 14px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .topbar {
    min-height: 104px;
    gap: 6px;
    padding: 7px 0 47px;
  }
  .breadcrumbs { min-width: 0; gap: 5px; font-size: 9px; }
  .breadcrumbs > span, .breadcrumbs > i { display: none; }
  .breadcrumbs strong { overflow: hidden; max-width: 110px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-brand-logo { display: block; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 4px; object-fit: contain; }
  .topbar-user { flex: 0 0 auto; gap: 4px; }
  .topbar-user .today-label { display: none; }
  .topbar-user .icon-only { width: 36px; height: 36px; }
  .user-avatar { flex: 0 0 32px; width: 32px; height: 32px; }
  .user-meta strong { max-width: 82px; font-size: 10px; }
  .user-meta small { font-size: 8px; }
  .logout-button { margin-right: 0; }
  .announcement-widget {
    top: auto;
    bottom: 6px;
    left: 50%;
    width: calc(100% - 4px);
    gap: 5px;
    padding: 4px;
    transform: translateX(-50%);
  }
  .announcement-summary { min-height: 36px; padding: 5px 8px; }
  .announcement-summary-label { display: none; }
  .announcement-summary-text { font-size: 10px; }
  .announcement-widget .announcement-bell,
  .announcement-widget .announcement-compose { flex-basis: 36px; width: 36px; height: 36px; }
  .announcement-request-button { flex: 0 0 50px; min-height: 36px; font-size: 8px; }
  .announcement-request-button svg { width: 17px; height: 17px; }
  .page-heading { gap: 10px; padding: 17px 0 14px; }
  .page-heading > div { min-width: 0; }
  .page-heading h1 { font-size: 20px; line-height: 1.35; }
  .page-heading p { margin: 4px 0 0; font-size: 11px; line-height: 1.65; }
  .page-heading .gold-button { min-height: 44px; }
  .metrics-grid { gap: 8px; }
  .daily-goal-ring, .daily-whatsapp-counter { width: 88px; height: 88px; flex-basis: 88px; }
  .daily-goal-ring strong, .daily-whatsapp-counter strong { font-size: 15px; }
  .daily-whatsapp-counter svg { width: 28px; height: 28px; }
  .metric-card { min-width: 0; min-height: 88px; padding: 10px; }
  .metric-top { gap: 6px; font-size: 9px; line-height: 1.45; }
  .metric-value { font-size: 21px; }
  .metric-sub { font-size: 9px; line-height: 1.45; }
  .pipeline-panel, .team-performance { margin-top: 10px; padding: 13px 11px; }
  .panel-heading { align-items: flex-start; gap: 8px; }
  .panel-heading h2 { font-size: 15px; }
  .panel-note { text-align: left; }
  .pipeline-layout { gap: 8px; }
  .pipeline-grid { gap: 7px; }
  .pipeline-stage { min-height: 74px; padding: 10px; }
  .pipeline-stage span { font-size: 9px; }
  .pipeline-stage strong { font-size: 19px; }
  .team-performance > .panel-heading .quiet-button { min-height: 38px; white-space: nowrap; }
  .dashboard-team-cards, .team-performance-cards, .team-cards-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .team-member-card { padding: 13px; }
  .team-member-head { gap: 11px; }
  .team-member-avatar, .team-member-avatar .mini-avatar { width: 66px; height: 66px; }
  .team-member-avatar { flex-basis: 66px; }
  .team-member-name-row { gap: 6px; }
  .team-member-name-row h3 { font-size: 14px; }
  .team-member-account-meta { font-size: 10px; }
  .team-member-metrics > div { min-height: 40px; }
  .team-member-metrics dt { font-size: 11px; }
  .team-member-metrics dd { font-size: 14px; }
  .team-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .team-summary .metric-card { min-height: 80px; padding: 9px; }
  .team-summary .metric-card:last-child { grid-column: 1 / -1; }
  .team-search-field { height: 44px; margin-bottom: 9px; }
  .team-cards-panel { padding: 9px; }
  .team-low-performance { margin: 10px 0; padding: 10px; }
  .team-report-heading { align-items: flex-start; gap: 8px; }
  .team-report-heading h3 { font-size: 12px; line-height: 1.5; }
  .team-report-heading p { font-size: 9px; line-height: 1.5; }
  .team-report-heading .quiet-button { min-height: 38px; padding: 0 8px; font-size: 9px; }
  .status-chips { gap: 7px; }
  .status-chip { min-height: 36px; padding-inline: 11px; font-size: 10px; }
  .table-toolbar { gap: 8px; min-height: auto; padding: 7px 0 10px; }
  .search-field { flex: 1 1 100%; width: 100%; height: 44px; }
  .search-field input { font-size: 12px; }
  .table-toolbar .dark-select, .table-toolbar > button { min-height: 42px; }
  .table-scroll { max-height: none; min-height: 0; overflow: auto; overscroll-behavior-x: contain; }
  .data-panel { overflow: hidden; }
  .table-foot { flex-wrap: wrap; font-size: 9px; }
  .dark-input, .dark-select { min-height: 42px; font-size: 12px; }
  .status-select { min-height: 38px; font-size: 11px; }
  .row-action, .lead-contact-icon { width: 38px; height: 38px; }
  .calculator-layout { gap: 10px; }
  .calculator-form { padding: 15px 12px; }
  .calculator-form label, .modal label { font-size: 11px; line-height: 1.5; }
  .calculator-form .dark-input { height: 44px; font-size: 12px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .calculation-summary { min-height: auto; padding: 17px; }
  .calculation-summary::after { top: 65px; }
  .summary-label { margin-top: 22px; }
  .summary-rule { margin: 15px 0 8px; }
  .summary-result { padding: 9px 0; }
  .modal-backdrop { align-items: end; padding: 8px 8px 0; }
  .modal { width: 100%; max-width: none; max-height: calc(100dvh - 16px); padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 12px 12px 0 0; }
  .modal-header { align-items: flex-start; gap: 10px; }
  .modal h2 { font-size: 17px; line-height: 1.45; }
  .modal-close, .modal-header .icon-only { flex: 0 0 40px; width: 40px; height: 40px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .gold-button, .modal-actions .quiet-button { flex: 1 1 auto; min-height: 42px; }
  .toast { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); left: 12px; max-width: none; padding: 12px; font-size: 11px; line-height: 1.5; }
  .main-footer { flex-wrap: wrap; gap: 7px 12px; margin-top: 15px; padding-bottom: 4px; font-size: 9px; }
}
@media (max-width: 420px) {
  .main-content { padding-right: 10px; padding-left: 10px; }
  .topbar { gap: 3px; }
  .breadcrumbs strong { max-width: 82px; font-size: 8px; }
  .topbar-brand-logo { flex-basis: 32px; width: 32px; height: 32px; }
  .topbar-user { gap: 2px; }
  .topbar-user .icon-only { width: 32px; height: 36px; }
  .user-meta strong { max-width: 68px; font-size: 9px; }
  .user-meta small { font-size: 7px; }
  .announcement-widget { gap: 3px; }
  .announcement-widget .announcement-bell,
  .announcement-widget .announcement-compose { flex-basis: 33px; width: 33px; height: 33px; }
  .announcement-request-button { flex-basis: 44px; font-size: 7px; }
  .page-heading h1 { font-size: 19px; }
  .metrics-grid { gap: 6px; }
  .metric-card { padding: 9px; }
  .metric-value { font-size: 19px; }
  .pipeline-panel, .team-performance { padding-inline: 9px; }
  .daily-goal-item { gap: 9px; }
  .daily-goal-ring, .daily-whatsapp-counter { width: 82px; height: 82px; flex-basis: 82px; }
  .daily-goal-ring strong { font-size: 15px; }
  .team-member-actions { gap: 3px; }
  .team-member-actions .icon-only { width: 34px; height: 34px; }
  .team-report-heading { flex-direction: column; }
  .team-report-heading .quiet-button { align-self: flex-start; }
}
@media (max-width: 360px) {
  .main-content { padding-right: 8px; padding-left: 8px; }
  .nav-link { gap: 3px; }
  .nav-link span { font-size: 8px; }
  .topbar-user .icon-only { width: 29px; }
  .user-meta strong { max-width: 58px; }
  .team-member-avatar, .team-member-avatar .mini-avatar { width: 58px; height: 58px; }
  .team-member-avatar { flex-basis: 58px; }
  .team-member-name-row h3 { font-size: 13px; }
  .modal-backdrop { padding-inline: 4px; }
  .modal { padding-inline: 12px; }
}