/* Keep the navigation at normal size and fit the full page inside the workspace. */
.app-shell, .main-content { height: 100vh; height: 100dvh; min-height: 0; }
.app-shell { padding-top: env(safe-area-inset-top); }
.main-content { height: 100%; padding-bottom: env(safe-area-inset-bottom); }
.content-viewport { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: auto; }
.content-viewport.is-fitted { overflow: auto; }
.content-viewport .content {
  width: 100%; max-width: none; height: auto; min-height: 100%; margin: 0; padding: 16px;
  overflow: visible; transform-origin: top left; display: flow-root;
}
.is-fitted .content { position: static; }
.sidebar { width: 192px; padding: 16px 10px 12px; overflow-y: auto; }
.brand { padding: 0 8px 20px; }
.sidebar-toggle { left: 168px; top: 16px; }
.nav-item { padding: 9px 8px; gap: 9px; font-size: 12px; min-height: 38px; }
.nav-item span { flex: none; width: 25px; }
.brand strong, .brand span, .topbar-title span, .content .eyebrow,
.content .data-table th, .content .kanban-col h3,
.content .calendar-weekdays span, .content .calendar-event span { letter-spacing: 0; }
.topbar { height: 58px; padding: 0 18px; gap: 14px; }
.topbar-actions { gap: 14px; }
.profile { grid-template-columns: 34px auto auto; }
.profile .logout-button { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.content .page-heading { margin-bottom: 12px; gap: 12px; flex-direction: row; align-items: center; }
.content .page-heading h1 { font-size: 22px; margin-top: 4px; }
.content .page-heading p { font-size: 12px; margin-top: 5px; }
.content .page-heading .button { flex: none; align-self: center; }
.content .button { padding: 8px 11px; min-height: 34px; }
.content .kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.content .kpi-grid:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.content .kpi { min-height: 80px; padding: 11px 12px; }
.content .kpi .value { font-size: 22px; margin: 6px 0 3px; overflow-wrap: anywhere; }
.content .dashboard-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.content .panel-head { padding: 11px 12px; gap: 10px; }
.content .chart-wrap { height: 165px; padding: 0 12px 12px; }
.content .bar-chart { height: 115px; margin: 0 18px 28px; }
.content .bar-chart > div { flex: 1; height: 100%; min-width: 0; }
.content .legend { padding-bottom: 10px; }
  .content .table-scroll { overflow-x: auto; overflow-y: visible; }
  .content .data-table { min-width: 940px; table-layout: auto; }
.content .data-table th, .content .data-table td {
  padding: 6px; min-width: 0; white-space: normal; overflow-wrap: anywhere;
}
.column-resizable th, .column-resizable td {
  position: relative; overflow: hidden;
}
.column-resizable th {
  padding-right: 18px;
}
.column-resizer {
  position: absolute; z-index: 2; top: 0; right: -5px; bottom: 0; width: 10px;
  cursor: col-resize; touch-action: none;
}
.column-resizer::after {
  content: ""; position: absolute; top: 20%; bottom: 20%; left: 4px; width: 1px;
  background: transparent; transition: background-color .15s ease;
}
.column-resizer:hover::after, .column-resizer:focus-visible::after,
.is-resizing-column .column-resizer::after {
  background: var(--blue);
}
.column-resizer:focus-visible {
  outline: 2px solid rgba(40,117,167,.28); outline-offset: -2px;
}
html.is-resizing-column, html.is-resizing-column * {
  cursor: col-resize !important; user-select: none !important;
}
.content .data-table td { font-size: 12px; }
.content .data-table th { font-size: 10px; }
.content .data-table input, .content .data-table select { min-width: 0; max-width: 100%; }
.content .data-table .project-name { font-weight: 650; }
.content .status { padding: 4px 6px; }
.content .progress-line { width: 48px; max-width: 100%; }
.content .row-action { padding: 3px 2px; white-space: normal; text-align: left; }
.content .row-action.danger { margin-left: 0; }
.content .status-select-wrap { min-width: 0; width: 100%; }
.content .eoi-bidding-select, .content .eoi-submit-select, .content .eoi-submit-location-input { padding: 7px 2px; font-size: 11px; }
.content .budget-split { min-width: 0; grid-template-columns: 1fr; gap: 1px; }
.content .budget-split small { margin-bottom: 3px; }
.content .lead-firm-stack { min-width: 0; gap: 4px; }
.content .eoi-lead-firm-input { min-width: 0; padding: 4px 5px; }
.content .add-lead-firm { padding: 6px; min-height: 30px; }
.content td.workflow-actions { display: table-cell; }
.content .workflow-actions .row-action { display: block; width: 100%; }
.content .sheet-tabs { margin: 0 0 12px; }
.content .sheet-tabs button { padding: 8px 11px; }
.content .bulk-actions, .content .agent-actions { padding: 0 12px 10px; gap: 8px; }
.content .bulk-actions .button { width: auto; }
.content .ai-agent-panel { margin-bottom: 12px; }
.content .agent-form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; padding: 0 12px 10px; }
.content .agent-form input, .content .agent-form select { min-width: 0; padding: 8px; }
.content .agent-results .data-table th:first-child { width: 40px; }
.content .agent-results .data-table th:nth-child(2) { width: 30%; }
.content .empty-note { padding: 12px; }
.content .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.content .module-grid .panel.span-2 { grid-column: span 2; }
.content .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.content .team-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.8fr); gap: 12px; }
.content .kanban { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; overflow: visible; }
.content .kanban-col { min-height: 280px; padding: 8px; overflow-wrap: anywhere; }
.content .kanban-card { padding: 10px; }
.content .calendar-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; }
.content .calendar-categories { margin-bottom: 12px; }
.content .calendar-category-list { padding: 0 12px 12px; }
.content .calendar-grid, .content .calendar-weekdays { min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.content .calendar-day { min-width: 0; min-height: 82px; padding: 5px; }
.content .calendar-date { margin-bottom: 4px; }
.content .calendar-event { padding: 5px; font-size: 10px; overflow-wrap: anywhere; }
.content .calendar-weekdays span { padding: 7px 5px; }
.content .calendar-chip.compact { white-space: normal; overflow-wrap: anywhere; padding: 3px; gap: 4px; }
.content .calendar-chip i { flex: none; }
.content .calendar-layout .data-table th, .content .calendar-layout .data-table td { padding: 7px 4px; font-size: 10px; }
.content .calendar-layout .data-table th:nth-child(1) { width: 13%; }
.content .calendar-layout .data-table th:nth-child(2) { width: 19%; }
.content .calendar-layout .data-table th:nth-child(3) { width: 28%; }
.content .calendar-layout .data-table th:nth-child(4) { width: 10%; }
.content .calendar-layout .data-table th:nth-child(5) { width: 17%; }
.content .calendar-layout .data-table th:nth-child(6) { width: 13%; }
.content .switch-row { padding: 12px; }
.content .switch-row > div { min-width: 0; }
.content .cc-toggle { flex: none; }
.google-sync-settings { display: grid; gap: 12px; padding: 0 12px 12px; }
.google-sync-settings label { display: grid; gap: 7px; font-weight: 700; }
.google-sync-settings input {
  width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--ink); padding: 9px 10px; font-size: 12px;
}
.google-sync-settings input:focus { outline: 2px solid rgba(40,117,167,.18); border-color: var(--blue); }
.google-sync-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.content .login-screen { min-height: 0; padding: 16px; }
.content .login-shell { width: min(760px, 100%); }
.content .login-card { margin-top: 20px; padding: 12px; }
.content .login-copy h1 { font-size: 26px; }
body.logged-out .bottom-nav { display: none; }
.toast { pointer-events: none; }

/* Reserve space for the long titles and editable fields in the two widest sheets. */
.content [data-columns="14"] th:nth-child(1), .content [data-columns="13"] th:nth-child(1) { width: 48px; }
.content [data-columns="14"] th:nth-child(2), .content [data-columns="13"] th:nth-child(2) { width: 80px; }
.content [data-columns="14"] th:nth-child(3), .content [data-columns="13"] th:nth-child(3) { width: 170px; }
.content [data-columns="14"] th:nth-child(4) { width: 76px; }
.content [data-columns="14"] th:nth-child(9) { width: 104px; }
.content [data-columns="14"] th:nth-child(10) { width: 130px; }
.content [data-columns="14"] th:nth-child(11) { width: 104px; }
.content [data-columns="14"] th:nth-child(12) { width: 90px; }
.content [data-columns="14"] th:nth-child(14) { width: 120px; }
.content [data-columns="12"] th:nth-child(2) { width: 170px; }

@media (max-width: 1180px) {
  .sidebar { display: none; }
  .sidebar.mobile-open { display: flex; position: fixed; z-index: 9; inset: 0 auto 0 0; width: 232px; padding-top: max(16px, env(safe-area-inset-top)); }
  .sidebar.mobile-open .sidebar-toggle { left: 208px; }
  .sidebar-footer { display: block; }
  .mobile-menu { display: block; min-width: 36px; min-height: 40px; }
}
@media (max-width: 760px) {
  body:not(.logged-out) .main-content { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .topbar { height: 52px; padding: 0 10px; gap: 8px; }
  .topbar-actions { gap: 8px; }
  .bottom-nav { min-height: calc(60px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media print {
  .app-shell, .main-content { height: auto; overflow: visible; }
  .sidebar, .topbar, .bottom-nav { display: none; }
  .content-viewport.is-fitted { overflow: visible; }
  .is-fitted .content { position: static; width: 100% !important; transform: none !important; }
}