:root {
  /* --bg-elevated: used throughout Settings and Security panels.
     Not defined in main.css — maps to bg-hover for a subtle raised surface. */
  --bg-elevated: #1b2233;

  /* --r-md: medium border-radius, between --r (9px) and --r-lg (13px). */
  --r-md: 11px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRZ CRM — additions.css  (v3 — responsive layout system)
   ───────────────────────────────────────────────────────────────────────────
   Sizing reference (Salesforce Lightning / HubSpot / Pipedrive conventions)
   ─────────────────────────────────────────────
   Dashboard revenue chart    220px   compact companion beside sidebar
   Dashboard doughnut         180px   tight, legend below
   Report bar/line charts     300px   standard; comfortably readable
   Report doughnut            260px   wider than tall, legend on right
   Report horizontal bar      320px   scales with label count
   Report dual-axis           320px   needs a bit more room for two y-axes

   Breakpoints (mirror main.css exactly)
   ─────────────────────────────────────────────
   1200px  large desktop → tablet landscape
    900px  tablet portrait
    768px  mobile landscape / small tablet
    480px  mobile portrait
═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. REPORTS PAGE — chart sizing & vertical stacking
   ─────────────────────────────────────────────────────────────────────────── */

/* Stack cards vertically with consistent gap */
#page-reports .report-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Every report card is full width */
#page-reports .report-panel .card {
  width: 100%;
}

/* ── Base container ─────────────────────────────────────────────────────────
   Fixed height so Chart.js (maintainAspectRatio:false) fills the box exactly.
   220px is the standard compact height used by Zoho, Pipedrive, HubSpot
   inside content-pane cards — tall enough to read, short enough not to
   dominate the page. */
#page-reports .chart-container {
  position: relative;
  width: 100%;
  height: 220px;
}

/* Doughnut needs a touch less height — legend sits to the right */
#page-reports .chart-container.chart-doughnut {
  height: 200px;
}

/* Horizontal bar: extra rows need a bit more vertical room */
#page-reports .chart-container.chart-hbar {
  height: 240px;
}

/* Dual Y-axis: small premium for two scale labels */
#page-reports .chart-container.chart-dual {
  height: 240px;
}

/* Canvas always fills its container */
#page-reports .chart-container canvas {
  width:  100% !important;
  height: 100% !important;
}

/* Card header: title left, control right, wraps on narrow */
#page-reports .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
#page-reports .card-title {
  font-size: 14px;
  font-weight: 600;
}

/* No lift animation on report cards — feels jittery with charts */
#page-reports .card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* Tab bar: plain inline, not sticky */
#report-tabs {
  margin-bottom: 18px;
  position: static;
}

/* ── Responsive chart heights ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  #page-reports .chart-container            { height: 200px; }
  #page-reports .chart-container.chart-hbar { height: 220px; }
  #page-reports .chart-container.chart-dual { height: 220px; }
  #page-reports .chart-container.chart-doughnut { height: 190px; }
}
@media (max-width: 900px) {
  #page-reports .chart-container            { height: 190px; }
  #page-reports .chart-container.chart-hbar { height: 210px; }
  #page-reports .chart-container.chart-dual { height: 210px; }
  #page-reports .chart-container.chart-doughnut { height: 180px; }
}
@media (max-width: 768px) {
  #page-reports .report-panel               { gap: 12px; }
  #page-reports .chart-container            { height: 170px; }
  #page-reports .chart-container.chart-hbar { height: 190px; }
  #page-reports .chart-container.chart-dual { height: 190px; }
  #page-reports .chart-container.chart-doughnut { height: 170px; }
}
@media (max-width: 480px) {
  #page-reports .chart-container            { height: 150px; }
  #page-reports .chart-container.chart-hbar { height: 170px; }
  #page-reports .chart-container.chart-dual { height: 170px; }
  #page-reports .chart-container.chart-doughnut { height: 150px; }
}

/* Print: one chart per page, no interactive chrome */
@media print {
  #sidebar, .page-header .page-actions, #report-tabs { display: none !important; }
  #page-reports .report-panel.hidden { display: flex !important; }
  #page-reports .chart-container,
  #page-reports .chart-container.chart-hbar,
  #page-reports .chart-container.chart-dual,
  #page-reports .chart-container.chart-doughnut { height: 200px !important; }
  .card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc !important; }
}


/* ───────────────────────────────────────────────────────────────────────────
   2. DASHBOARD — compact chart containers
   ─────────────────────────────────────────────────────────────────────────── */

/* Revenue line chart next to sidebar */
#card-revenue-chart .chart-container {
  height: 220px;
}

/* Small activity doughnut in the sidebar column */
#card-activities-chart .chart-container {
  height: 180px;
}

/* When dashboard collapses to 1 column at 1200px, give both charts more room */
@media (max-width: 1200px) {
  #card-revenue-chart    .chart-container { height: 240px; }
  #card-activities-chart .chart-container { height: 200px; }
}
@media (max-width: 768px) {
  #card-revenue-chart    .chart-container { height: 200px; }
  #card-activities-chart .chart-container { height: 180px; }
}


/* ───────────────────────────────────────────────────────────────────────────
   3. ACTIVITIES — tab bar & filter pills
   ─────────────────────────────────────────────────────────────────────────── */

/* Override the inline style on the tab container in HTML */
#activity-type-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 4px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  position: static; /* never sticky — fights with modals */
}

.activities-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: calc(var(--r-lg) - 3px);
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.activities-tab:hover        { color: var(--text-1); background: var(--bg-hover); }
.activities-tab.active       { background: var(--bg-card); color: var(--amber);
                                box-shadow: 0 1px 3px rgba(0,0,0,.25); font-weight: 500; }

.tab-icon  { font-size: 13px; line-height: 1; }
.tab-label { line-height: 1; }

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--amber-dim);
  color: var(--amber);
}

/* Activity type icon */
.activity-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r);
  font-size: 14px;
  flex-shrink: 0;
}

/* Overdue / done row tints */
.activity-row.row-done     td:not(:last-child) { opacity: .55; }
.activity-row.row-overdue  { background: rgba(244,63,94,.04); }
.activity-row.row-overdue:hover { background: rgba(244,63,94,.08) !important; }

/* Status filter pills */
#activity-status-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.activity-status-pill.active {
  background: var(--amber-dim);
  color: var(--amber);
  border-color: rgba(245,158,11,.4);
}

/* Search input: fluid width, cap at 240px */
#activities-search {
  width: 240px;
  max-width: 100%;
}

/* Responsive tab bar */
@media (max-width: 768px) {
  #activity-type-tabs   { padding: 3px; gap: 1px; }
  .activities-tab       { padding: 6px 10px; font-size: 12px; }
  .tab-label            { display: none; }
  .activities-tab.active .tab-label { display: inline; }
  #activities-search    { width: 100%; max-width: 100%; }
}
@media (max-width: 480px) {
  .activities-tab   { padding: 5px 8px; }
  .tab-badge        { display: none; }
  #activity-status-filters { gap: 5px; }
  .activity-status-pill { font-size: 11px; padding: 0 8px; height: 26px; }
}


/* ───────────────────────────────────────────────────────────────────────────
   4. TABLES — horizontal scroll, touch-friendly
   ─────────────────────────────────────────────────────────────────────────── */

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tables never shrink below comfortable content width */
.table-container table {
  min-width: 600px;
}

/* Row actions always visible on touch (no :hover available) */
@media (hover: none) {
  .row-actions { opacity: 1; }
}

@media (max-width: 768px) {
  thead th,
  tbody td        { padding: 9px 10px; font-size: 12px; }
  .table-toolbar  { gap: 6px; flex-wrap: wrap; }
  .table-pagination {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }
}
@media (max-width: 480px) {
  .table-container table { min-width: 520px; }
}


/* ───────────────────────────────────────────────────────────────────────────
   5. SETTINGS — nav & panels responsive
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    position: static;
    padding: 5px;
    gap: 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-item {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    padding: 7px 10px;
    gap: 6px;
  }
  .settings-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
}
@media (max-width: 480px) {
  .settings-section-title { font-size: 16px; }
  .settings-section-desc  { font-size: 12px; margin-bottom: 16px; }
  .form-row               { grid-template-columns: 1fr; }
}


/* ───────────────────────────────────────────────────────────────────────────
   6. SECURITY PANEL
   ─────────────────────────────────────────────────────────────────────────── */

.security-score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.security-score-ring {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 3px solid var(--emerald);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: var(--emerald);
  flex-shrink: 0;
}
.security-score-text .score-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.security-score-text .score-desc  { font-size: 11px; color: var(--text-2); margin-top: 2px; }

.security-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.security-section:last-child { border-bottom: none; }
.security-section-title {
  font-size: 13px; font-weight: 600; color: var(--text-1);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.security-section-desc {
  font-size: 12px; color: var(--text-2);
  margin-bottom: 12px; line-height: 1.5;
}

.mfa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mfa-row-info  { flex: 1; min-width: 180px; }
.mfa-row-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 3px; }
.mfa-row-desc  { font-size: 12px; color: var(--text-2); }

.toggle-switch {
  position: relative;
  width: 44px; height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { display: none; }
.toggle-switch .track {
  position: absolute; inset: 0;
  border-radius: 99px;
  background: var(--border-light);
  transition: background .2s;
  cursor: pointer;
}
.toggle-switch .thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .2s;
  pointer-events: none;
}
.toggle-switch input:checked ~ .track { background: var(--amber); }
.toggle-switch input:checked ~ .thumb { transform: translateX(20px); }

.api-key-row {
  display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
}
#api-key-display {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 12px;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: default; user-select: all;
}

#audit-log-entries {
  max-height: 340px; overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-card);
}
.audit-log-toolbar {
  display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap;
  margin-bottom: 10px;
}

#active-sessions {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 4px 16px;
}

#rbac-matrix {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto; max-height: 380px;
  -webkit-overflow-scrolling: touch;
}

#encryption-status {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 4px 16px;
}

#compliance-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 768px) {
  #compliance-badges { grid-template-columns: 1fr 1fr; }
  #rbac-matrix table { font-size: 11px; }
}
@media (max-width: 480px) {
  #compliance-badges { grid-template-columns: 1fr; }
}


/* ───────────────────────────────────────────────────────────────────────────
   7. IMPORT / EXPORT & ZOHO MIGRATION
   ─────────────────────────────────────────────────────────────────────────── */

.zoho-step { display: none; }
.zoho-step:not(.hidden) { display: block; }

.migration-step-indicator {
  display: flex; align-items: center;
  margin-bottom: 20px;
}
.migration-step-dot {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  color: var(--text-2);
  flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s;
}
.migration-step-dot.active { background: var(--amber); border-color: var(--amber); color: #000; }
.migration-step-dot.done   { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.migration-step-line {
  flex: 1; height: 2px;
  background: var(--border);
  min-width: 14px;
}
.migration-step-line.done { background: var(--emerald); }

.zoho-format-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 12px;
}
.zoho-format-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  padding: 20px 14px;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s, transform .1s;
}
.zoho-format-card:hover {
  border-color: var(--amber);
  background: var(--amber-dim);
  transform: translateY(-2px);
}
.zoho-format-icon  { font-size: 28px; }
.zoho-format-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.zoho-format-desc  { font-size: 11px; color: var(--text-2); line-height: 1.4; }

#zoho-field-map-display {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px; margin-top: 12px;
  max-height: 280px; overflow-y: auto;
}
#import-field-mapper {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px; margin-top: 12px;
  max-height: 260px; overflow-y: auto;
}
#import-error-details { display: none; margin-top: 12px; }

.import-option-row {
  display: flex; align-items: center;
  gap: 8px; padding: 6px 0;
  font-size: 12px; color: var(--text-2);
  cursor: pointer;
}
.import-option-row input[type="checkbox"] { accent-color: var(--amber); }

#zoho-detected-module {
  display: inline-block;
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--r);
  padding: 3px 10px;
  font-size: 12px; font-weight: 500;
  margin-top: 8px;
}
#zoho-import-status {
  font-size: 13px; padding: 8px 0; min-height: 30px;
}
#zoho-dropzone {
  border: 2px dashed var(--border-light);
  border-radius: var(--r-lg);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--text-2); font-size: 13px;
}
#zoho-dropzone:hover,
#zoho-dropzone.drag-over { border-color: var(--amber); background: var(--amber-dim); }

@media (max-width: 600px) {
  .zoho-format-cards { grid-template-columns: 1fr; }
}


/* ───────────────────────────────────────────────────────────────────────────
   8. BRANDING SUITE PANEL
   ─────────────────────────────────────────────────────────────────────────── */

.theme-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px; margin-top: 8px;
}
.theme-preset-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 8px;
  border-radius: var(--r-lg);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color .15s, transform .1s;
  background: var(--bg-elevated);
}
.theme-preset-card:hover  { border-color: var(--border-light); transform: translateY(-1px); }
.theme-preset-card.active { border-color: var(--amber); background: var(--amber-dim); }
.theme-preset-preview { width: 100%; height: 36px; border-radius: calc(var(--r) - 2px); }
.theme-preset-label   { font-size: 11px; color: var(--text-2); text-align: center; }

.color-input-group {
  display: flex; gap: 8px;
  flex-wrap: wrap; align-items: center;
  margin-top: 8px;
}
.color-input-group .form-input {
  font-family: var(--font-mono);
  font-size: 12px;
  max-width: 128px;
}
.color-format-label {
  font-size: 10px; font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
  min-width: 28px;
}

#settings-branding-suite .appearance-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
#settings-branding-suite .appearance-section:last-child { border-bottom: none; }

.brand-live-preview {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  margin-bottom: 20px;
}
.brand-preview-label {
  position: absolute;
  bottom: 8px; left: 12px;
  font-size: 11px;
  color: rgba(255,255,255,.4);
  pointer-events: none;
}

.favicon-upload-row {
  display: flex; align-items: center;
  gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.favicon-preview {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

@media (max-width: 768px) {
  .color-input-group .form-input { max-width: 100%; }
  .theme-presets-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}


/* ───────────────────────────────────────────────────────────────────────────
   9. BADGE VARIANTS
   ─────────────────────────────────────────────────────────────────────────── */

/* main.css already has badge-rose/sky/violet via -dim vars;
   these make border style consistent with the security/activities panels */
.badge-rose   { background: var(--rose-dim);   color: var(--rose);   border: 1px solid rgba(244,63,94,.25); }
.badge-sky    { background: var(--sky-dim);    color: var(--sky);    border: 1px solid rgba(56,189,248,.25); }
.badge-violet { background: var(--violet-dim); color: var(--violet); border: 1px solid rgba(167,139,250,.25); }

.avatar-xs {
  width: 22px; height: 22px;
  font-size: 9px; flex-shrink: 0;
}


/* ───────────────────────────────────────────────────────────────────────────
   10. PIPELINE BOARD — responsive column widths
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pipeline-column { width: 240px; }
}
@media (max-width: 480px) {
  .pipeline-column { width: 200px; }
  .deal-card       { padding: 10px; }
  .deal-card-title { font-size: 12px; }
}


/* ───────────────────────────────────────────────────────────────────────────
   11. MODALS — bottom sheet on mobile
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
}


/* ───────────────────────────────────────────────────────────────────────────
   12. GRID HELPERS — responsive collapse
   ─────────────────────────────────────────────────────────────────────────── */

/* Already in main.css at 900px; this guard ensures additions don't fight it */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ie-grid { grid-template-columns: 1fr; }
}


/* ───────────────────────────────────────────────────────────────────────────
   13. MAIN CONTENT PADDING
   ─────────────────────────────────────────────────────────────────────────── */

/* main.css sets 16px at 768px; override to 14px for more breathing room on
   mid-size tablets where 16px each side feels cramped */
@media (max-width: 900px) {
  #main-content { padding: 20px 20px 44px; }
}
/* main.css covers 768px and 480px — nothing extra needed here */


/* ───────────────────────────────────────────────────────────────────────────
   14. PAGE ACTIONS — wrap cleanly on narrow widths
   ─────────────────────────────────────────────────────────────────────────── */

.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; justify-content: center; }
  /* Don't stretch search inputs */
  .page-actions input[type="search"] { flex: 0 0 100%; }
}


/* ───────────────────────────────────────────────────────────────────────────
   15. TOAST — full-width strip on mobile
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  #toast-container {
    bottom: 0; right: 0; left: 0;
    padding: 0 10px 10px;
  }
  .toast { max-width: 100%; }
}


/* ───────────────────────────────────────────────────────────────────────────
   16. STATS GRID — explicit column counts per breakpoint
       (main.css already handles 768px and 480px; this fills the gap)
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1200px) {
  /* At tablet sizes, 3 columns is more comfortable than auto-fill at minmax(195px) */
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE & RESPONSIVE — Complete Pass
   Targets: all screens ≤768px (mobile), touch devices, small viewports
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Viewport safety ─────────────────────────────────────────────────────── */
html {
  /* Prevent iOS auto-zoom on input focus */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Prevent horizontal overflow at any breakpoint */
body, #app, #main-content {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── Header: mobile height & layout ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-h: 52px;   /* slightly shorter on mobile */
  }

  #header {
    padding: 0 10px;
    gap: 8px;
  }

  /* Logo text: hide "CRM" sub-label on very small screens */
  .logo-text { font-size: 14px; }

  /* Toggle button: always visible on mobile, large enough touch target */
  #btn-toggle-sidebar {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Header actions: compress */
  .header-actions { gap: 4px; }

  /* All header icon buttons: 44px touch target */
  .header-actions .btn-icon,
  .header-actions .btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Avatar size on mobile */
  .header-avatar {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  #header { padding: 0 8px; gap: 6px; }

  /* Hide logo text entirely below 360px to save space */
  .logo-text { display: none; }

  /* Canvas logo still shows */
  #header-logo-canvas { display: block; }
}

/* ── Sidebar: mobile overlay drawer ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar is off-screen by default */
  #sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: 264px;          /* fixed pixel width, not the CSS variable */
    z-index: 145;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                box-shadow .28s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* When app has mobile-open class, slide sidebar in */
  #app.mobile-open #sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, .55);
  }

  /* Sidebar nav items: larger touch targets */
  .nav-item {
    padding: 13px 18px;
    font-size: 14px;
    min-height: 48px;
  }

  .nav-section-label {
    padding: 18px 18px 6px;
  }

  /* Badge visibility */
  .nav-badge { opacity: 1 !important; }
  .nav-label { opacity: 1 !important; transform: none !important; }

  /* Achievements button */
  #brz-nav-btn {
    padding: 13px 18px;
    min-height: 48px;
    font-size: 14px;
  }
}

/* ── Main content: mobile padding ────────────────────────────────────────── */
@media (max-width: 768px) {
  #main-content {
    padding: 14px 14px 60px; /* extra bottom padding for mobile browsers with nav bars */
  }
}

@media (max-width: 480px) {
  #main-content {
    padding: 10px 10px 60px;
  }
}

/* ── Page headers: mobile stack ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

  .page-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Buttons in page-actions stretch to fill on very small screens */
  .page-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
  }

  /* But don't stretch icon buttons */
  .page-actions .btn-icon { flex: 0 0 auto; }

  .page-title { font-size: 20px; }
  .page-subtitle { font-size: 12px; }
}

@media (max-width: 380px) {
  .page-title { font-size: 18px; }
}

/* ── Stat cards: responsive grid ─────────────────────────────────────────── */
@media (max-width: 900px) and (min-width: 601px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px 14px 12px; }
  .stat-value { font-size: 22px; }
}

@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ── Tables: horizontal scroll + readable cells ──────────────────────────── */
@media (max-width: 768px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-lg);
  }

  .table-container table { min-width: 580px; }

  thead th {
    padding: 8px 10px;
    font-size: 10px;
  }

  tbody td {
    padding: 10px 10px;
    font-size: 12px;
  }

  /* Row actions always visible (no hover on touch) */
  .row-actions { opacity: 1; }

  /* Table toolbar: wrap and use full width */
  .table-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .table-toolbar .header-search,
  .table-toolbar input[type="search"] {
    flex: 1 1 160px;
    max-width: 100%;
  }

  .table-toolbar .form-select {
    flex: 1 1 120px;
    max-width: 160px;
  }

  /* Pagination: center & stack */
  .table-pagination {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .table-container table { min-width: 480px; }
}

/* ── Forms: full-width inputs on mobile ──────────────────────────────────── */
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; gap: 10px; }
  .form-input, .form-select, .form-textarea {
    font-size: 16px; /* prevents iOS zoom-on-focus */
    min-height: 44px;
  }
  .form-textarea { min-height: 80px; }
}

/* ── Modals: bottom sheet on mobile ──────────────────────────────────────── */
@media (max-width: 640px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    /* Drag handle aesthetic */
  }

  .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-light);
    border-radius: 99px;
    margin: 10px auto 0;
  }

  .modal-header {
    padding: 12px 18px 12px;
    border-bottom: 1px solid var(--border);
  }

  .modal-body   { padding: 16px 18px; }
  .modal-footer { padding: 12px 18px; gap: 10px; }

  /* Full-width footer buttons */
  .modal-footer .btn {
    flex: 1;
    justify-content: center;
    min-height: 44px;
  }
}

/* ── Dropdown menus: full width on very small screens ────────────────────── */
@media (max-width: 400px) {
  .dropdown-menu {
    left: 8px !important;
    right: 8px !important;
    width: auto;
    min-width: 0;
  }
}

/* ── Tabs: scroll horizontally ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0;
  }
  .tabs::-webkit-scrollbar { display: none; }

  .tab {
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;   /* touch target */
    display: inline-flex;
    align-items: center;
  }
}

/* ── Pipeline / Kanban board ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pipeline-board {
    padding-bottom: 16px;
    gap: 10px;
  }

  .pipeline-column { width: 240px; }

  .deal-card { padding: 10px 12px; }
  .deal-card-title { font-size: 12px; }
}

@media (max-width: 480px) {
  .pipeline-column { width: 210px; }
}

/* ── Settings: mobile nav strip ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: static;
    padding: 5px;
    gap: 3px;
  }

  .settings-nav::-webkit-scrollbar { display: none; }

  .settings-nav-item {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
    min-height: 40px;
    gap: 6px;
  }

  .settings-nav-item svg { width: 13px; height: 13px; flex-shrink: 0; }

  /* Hide the NEW badge text in settings nav on mobile — just show the dot */
  .settings-nav-item [style*="background:var(--amber)"] {
    padding: 1px 4px;
    font-size: 8px;
  }
}

/* ── Calendar: mobile adjustments ────────────────────────────────────────── */
@media (max-width: 768px) {
  #page-calendar { height: auto; min-height: 0; }

  .cal-canvas {
    min-height: 400px;
    height: calc(100vh - var(--header-h) - 160px);
  }

  /* View pill labels: hide text, show icon only */
  .cal-vpill span { display: none; }
  .cal-vpill { padding: 6px 10px; }
  .cal-vpill--active span { display: inline; }

  /* Month cells: reduced height */
  .cal-month-grid {
    grid-template-rows: repeat(6, minmax(64px, 1fr));
  }
  .cal-cell { padding: 3px 4px; min-height: 64px; }
  .cal-pill { font-size: 10px; padding: 1px 4px; }
  .cal-month-hdr .cal-dow { font-size: 9.5px; padding: 6px 3px; }

  /* Time grid: narrower gutter */
  .cal-tgrid { grid-template-columns: 38px 1fr; }
  .cal-gh { font-size: 9px; padding: 1px 3px 0; }
  .cal-tblock-time { display: none; }

  /* Agenda items */
  .cal-ag-item { padding: 8px 10px; margin: 2px 10px; }
}

@media (max-width: 480px) {
  .cal-canvas { height: calc(100vh - var(--header-h) - 180px); min-height: 340px; }
  .cal-month-grid { grid-template-rows: repeat(6, minmax(52px, 1fr)); }
  .cal-cell { min-height: 52px; padding: 2px 3px; }
  .cal-cell-num { font-size: 11px; }
  .cal-dow { font-size: 9px; }
}

/* ── Operations / Logistics: mobile tabs ─────────────────────────────────── */
@media (max-width: 768px) {
  .ops-tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 3px;
    gap: 1px;
  }
  .ops-tab-bar::-webkit-scrollbar { display: none; }

  .ops-tab {
    flex-shrink: 0;
    padding: 7px 11px;
    font-size: 12px;
    min-height: 40px;
    white-space: nowrap;
  }

  /* Kanban column widths */
  .pipeline-column { width: 230px; }
}

/* ── Charts: mobile heights ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #card-revenue-chart .chart-container    { height: 180px; }
  #card-activities-chart .chart-container { height: 160px; }

  .dashboard-bottom { grid-template-columns: 1fr; }
}

/* ── Toast: mobile strip ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #toast-container {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 10px 10px;
  }
  .toast { max-width: 100%; }
}

/* ── Auth card: mobile ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-card {
    padding: 28px 20px 24px;
    border-radius: var(--r-xl);
  }

  .auth-logo-icon { width: 60px; height: 60px; font-size: 16px; }
  .auth-logo-text { font-size: 22px; }
  .auth-title { font-size: 18px; }
}

@media (max-width: 360px) {
  .auth-card { padding: 22px 14px 20px; }
  .auth-logo { flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; }
}

/* ── Misc mobile polish ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Larger touch targets for all buttons */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .btn-icon { min-width: 40px; min-height: 40px; }

  /* Card padding tighter */
  .card { padding: 14px 14px; }

  /* Stat card title smaller */
  .settings-section-title { font-size: 17px; }

  /* Pipeline stat values */
  .pipeline-stat-value { font-size: 18px; }

  /* Badge chips: wrap */
  .pipeline-stages-row { gap: 4px; }
  .stage-chip { font-size: 10px; padding: 2px 8px; }

  /* Empty states: compact */
  .empty-state { padding: 40px 16px; }
  .empty-state h3 { font-size: 15px; }

  /* Detail drawer grid: single column */
  .detail-field-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Import/Export cards */
  .import-export-card { padding: 14px 14px; }
  .ie-grid { grid-template-columns: 1fr; }

  /* Changelog filter bar: scroll */
  #cl-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  #cl-filter-bar::-webkit-scrollbar { display: none; }
  .cl-filter { flex-shrink: 0; }
}

/* ── Focus-visible: ensure keyboard nav still works on all sizes ─────────── */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Prevent tiny button hit areas on touch devices */
@media (hover: none) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .nav-item { min-height: 48px; }
  .settings-nav-item { min-height: 44px; }
  .tab { min-height: 44px; }
}


/* ── Mobile sidebar: override main.css grid conflict ─────────────────────────
   main.css at 768px sets #app.mobile-open { grid-template-columns: 248px 1fr }
   which pushes main-content right AND expands the grid column while our
   additions.css uses position:fixed + transform for the overlay drawer.
   Both applied simultaneously = double rendering. This override ensures the
   sidebar is ONLY a fixed overlay on mobile — the grid always stays 0 1fr.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Keep grid at 0 1fr regardless of mobile-open — sidebar is a fixed overlay */
  #app,
  #app.mobile-open {
    grid-template-columns: 0 1fr !important;
  }

  /* Sidebar: fixed overlay drawer, hidden by default */
  #sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: 264px;
    z-index: 145;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                box-shadow .28s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Grid positioning ignored when fixed */
    grid-column: unset;
    grid-row: unset;
  }

  /* Slide in when open */
  #app.mobile-open #sidebar {
    transform: translateX(0) !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, .6);
    z-index: 145 !important;
  }

  /* Main content always fills full width — unaffected by sidebar state */
  #main-content {
    grid-column: 1 / -1;
  }
}