.page-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-6); }
.page-header h2 { margin: 0; font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.035em; line-height: 1.05; }
.page-header p { max-width: 48ch; margin: var(--space-2) 0 0; color: var(--color-text-muted); }
.page-stage { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: 12px; }
.page-stage::before { width: 7px; height: 7px; border-radius: 50%; background: var(--color-hosa-gold); content: ""; }
.empty-state { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.empty-state h3 { margin: 0 0 var(--space-2); font-size: 16px; } .empty-state p { margin: 0; color: var(--color-text-muted); }
.empty-rule { align-self: stretch; border-left: 1px solid var(--color-border); }
@media (max-width: 700px) { .page-header { display: block; } .page-stage { margin-top: var(--space-4); } .empty-state { grid-template-columns: 1fr; } .empty-rule { display: none; } }

.dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }.dashboard-kpi, .dashboard-panel { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }.dashboard-kpi { padding: var(--space-4); }.dashboard-kpi__label, .dashboard-kpi__context { display: block; color: var(--color-text-muted); font-size: 12px; }.dashboard-kpi__label { font-weight: 650; }.dashboard-kpi__value { display: block; overflow: hidden; margin: 8px 0 5px; font-size: clamp(19px, 2vw, 27px); letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); align-items: start; gap: var(--space-4); }.dashboard-panel { align-self: start; padding: var(--space-5); }.dashboard-panel--projects { grid-column: 1 / -1; }.dashboard-panel__header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }.dashboard-panel__header h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; }.dashboard-panel__header p { margin: 3px 0 0; color: var(--color-text-muted); font-size: 12px; }.dashboard-panel__header a { color: var(--color-text); font-size: 12px; font-weight: 650; text-decoration-color: var(--color-hosa-gold); text-underline-offset: 3px; white-space: nowrap; }
.pipeline-list, .action-list, .project-list { padding: 0; margin: 0; list-style: none; }.pipeline-row { display: grid; grid-template-columns: minmax(110px, 1fr) 110px 115px; align-items: center; gap: var(--space-3); min-height: 47px; border-bottom: 1px solid var(--color-border); font-size: 13px; }.pipeline-row:last-child, .action-row:last-child, .project-row:last-child { border-bottom: 0; }.pipeline-row__stage { font-weight: 650; }.pipeline-row__count { color: var(--color-text-muted); font-size: 12px; }.pipeline-row strong { text-align: right; font-size: 13px; }
.action-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 58px; border-bottom: 1px solid var(--color-border); }.action-row__main { min-width: 0; }.action-row__main strong, .action-row__main span { display: block; }.action-row__main strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.action-row__main span { margin-top: 2px; color: var(--color-text-muted); font-size: 12px; }.action-row__meta { display: flex; align-items: end; flex-direction: column; gap: 4px; }.action-row__date { color: var(--color-text-muted); font-size: 11px; white-space: nowrap; }
.project-row { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }.project-row__main, .project-row__details { display: flex; align-items: center; gap: var(--space-3); }.project-row__main { justify-content: space-between; }.project-row__main strong, .project-row__main span { display: block; }.project-row__main strong { font-size: 13px; }.project-row__main span { margin-top: 2px; color: var(--color-text-muted); font-size: 12px; }.project-row__details { margin-top: var(--space-3); }.progress { flex: 1; height: 4px; overflow: hidden; border-radius: 10px; background: var(--color-surface-muted); }.progress span { display: block; height: 100%; border-radius: inherit; background: var(--color-hosa-green); }.project-row__progress, .project-row__deadline { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }.project-row__progress { width: 40px; }.project-row__deadline { width: 115px; text-align: right; }
.status-badge, .priority, .operational-alert { display: inline-flex; align-items: center; width: fit-content; min-height: 22px; padding: 0 7px; border: 1px solid var(--color-border); border-radius: 99px; font-size: 11px; font-weight: 650; white-space: nowrap; }.status-badge--active { border-color: #a8c8b9; color: var(--color-success); background: #eff7f1; }.priority--high, .is-overdue { color: var(--color-danger) !important; }.priority--high { border-color: #e1b5af; background: #fdf2f0; }.priority--normal { color: var(--color-info); background: #f0f6f7; }.priority--low { color: var(--color-text-muted); background: var(--color-surface-muted); }
.operational-alerts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }.operational-alert { min-height: 26px; }.operational-alert--danger { border-color: #e1b5af; color: var(--color-danger); background: #fdf2f0; }.operational-alert--warning { border-color: #ddcb9d; color: var(--color-warning); background: #fbf7ec; }.operational-alert--info { border-color: #b8d0d7; color: var(--color-info); background: #f0f6f7; }.dashboard-empty { margin: var(--space-5) 0 0; color: var(--color-text-muted); font-size: 13px; }
@media (max-width: 1100px) { .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-grid { grid-template-columns: 1fr; }.dashboard-panel--projects { grid-column: auto; } }@media (max-width: 700px) { .dashboard-kpis { grid-template-columns: 1fr; }.dashboard-panel { padding: var(--space-4); }.pipeline-row { grid-template-columns: 1fr auto; }.pipeline-row__count { display: none; }.project-row__details { flex-wrap: wrap; }.progress { flex-basis: 100%; order: 3; }.project-row__deadline { margin-left: auto; }.dashboard-panel__header a { display: none; } }

.crm-header { align-items: center; }.crm-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; font-size: 12px; font-weight: 700; }.crm-button:hover { background: var(--color-surface-muted); }.crm-button--primary { border-color: var(--color-hosa-green); background: var(--color-hosa-green); color: var(--color-hosa-ivory); }.crm-button--primary:hover { background: #0a2b23; }.crm-button--quiet { background: transparent; }.crm-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }.crm-view-switch { display: inline-flex; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }.crm-view-switch button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 3px; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 12px; font-weight: 700; }.crm-view-switch button[aria-pressed="true"] { background: var(--color-hosa-green); color: var(--color-hosa-ivory); }.crm-search { flex: 1; max-width: 340px; }.crm-search input, .crm-filters select, .crm-drawer input, .crm-drawer select, .crm-drawer textarea { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; }.crm-search input { min-height: 34px; padding: 0 10px; font-size: 12px; }.crm-filters { display: flex; align-items: end; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); }.crm-filters label, .crm-drawer label { display: grid; gap: 5px; color: var(--color-text-muted); font-size: 11px; font-weight: 700; }.crm-filters select { min-width: 150px; height: 32px; padding: 0 8px; font-size: 12px; }
.crm-pipeline { display: grid; grid-template-columns: repeat(4, minmax(248px, 1fr)); align-items: start; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-3); }.crm-column { min-height: 200px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(250,248,243,.68); transition: border-color var(--transition-fast), background var(--transition-fast); }.crm-column.is-drop-target { border-color: var(--color-hosa-gold); background: #f8f3e8; }.crm-column header { padding: 0 2px var(--space-3); border-bottom: 1px solid var(--color-border); }.crm-column h3 { margin: 0; font-size: 14px; }.crm-column p { margin: 3px 0 0; color: var(--color-text-muted); font-size: 11px; }.crm-column__cards { display: grid; gap: var(--space-2); padding-top: var(--space-3); }.crm-column__empty { margin: var(--space-3) 2px; color: var(--color-text-muted); font-size: 12px; }.crm-deal-card { position: relative; display: grid; width: 100%; gap: 3px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; text-align: left; transition: border-color var(--transition-fast), transform var(--transition-fast); }.crm-deal-card:hover { border-color: #b8bcb2; }.crm-deal-card.is-dragging { opacity: .5; transform: scale(.98); }.crm-deal-card__title { padding-right: 30px; font-size: 13px; font-weight: 750; line-height: 1.25; }.crm-deal-card__company, .crm-deal-card__meta, .crm-deal-card__action { overflow: hidden; color: var(--color-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.crm-deal-card__amount { margin-top: 3px; font-size: 12px; font-weight: 700; }.crm-deal-card__action { padding-top: 5px; border-top: 1px solid var(--color-border); }.crm-demo-mark { position: absolute; top: 10px; right: 10px; color: var(--color-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.crm-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }.crm-table { width: 100%; min-width: 1040px; border-collapse: collapse; font-size: 12px; }.crm-table th, .crm-table td { padding: 11px 12px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }.crm-table th { color: var(--color-text-muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }.crm-table tr:last-child td { border-bottom: 0; }.crm-table__deal { padding: 0; border: 0; background: transparent; color: var(--color-text); cursor: pointer; font: inherit; font-weight: 750; text-align: left; }.crm-table__deal:hover { text-decoration: underline; text-decoration-color: var(--color-hosa-gold); text-underline-offset: 3px; }.crm-stage { display: inline-flex; min-height: 22px; align-items: center; padding: 0 7px; border: 1px solid var(--color-border); border-radius: 99px; color: var(--color-text-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }.crm-stage--proposal { border-color: #d7c393; color: #71571f; background: #fbf6e9; }.crm-stage--won { border-color: #a8c8b9; color: var(--color-success); background: #eff7f1; }.crm-stage--lost { border-color: #e1b5af; color: var(--color-danger); background: #fdf2f0; }.crm-empty { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-muted); }
.crm-drawer-layer { position: fixed; z-index: 10; inset: 0; display: flex; justify-content: flex-end; background: rgba(2,23,19,.24); }.crm-drawer { width: min(480px, 100%); height: 100%; overflow-y: auto; padding: var(--space-6); border-left: 1px solid var(--color-border); background: var(--color-surface); box-shadow: -12px 0 32px rgba(2,23,19,.10); }.crm-drawer header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }.crm-drawer header p { margin: 0 0 3px; color: var(--color-text-muted); font-size: 11px; font-weight: 700; }.crm-drawer h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }.crm-drawer form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }.crm-drawer input, .crm-drawer select { height: 36px; padding: 0 9px; }.crm-drawer textarea { min-height: 90px; padding: 9px; resize: vertical; }.crm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }.crm-drawer__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }.crm-drawer__footer > div { display: flex; gap: var(--space-2); flex-wrap: wrap; }.crm-form-error { margin: var(--space-4) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid #e1b5af; border-radius: var(--radius-sm); background: #fdf2f0; color: var(--color-danger); font-size: 12px; }
.crm-contact-create { display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-muted); }.crm-contact-create > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }.crm-contact-create__toggle { justify-self: start; }.crm-contact-create__hint { margin: -2px 0 0; color: var(--color-text-muted); font-size: 11px; }
@media (max-width: 850px) { .crm-toolbar { flex-wrap: wrap; }.crm-search { order: 3; flex-basis: 100%; max-width: none; }.crm-filters { align-items: stretch; flex-direction: column; }.crm-filters select { width: 100%; }.crm-pipeline { grid-template-columns: repeat(4, minmax(230px, 280px)); }.crm-drawer { padding: var(--space-5); }.crm-form-grid { grid-template-columns: 1fr; } }
.projects .dashboard-kpis { margin-bottom: var(--space-4); }.projects-table { min-width: 1180px; }.projects-table th:nth-last-child(-n+3), .projects-table td:nth-last-child(-n+3) { text-align: right; }.project-progress { display: grid; gap: 5px; min-width: 86px; color: var(--color-text-muted); font-size: 11px; }.project-progress i { display: block; height: 4px; overflow: hidden; border-radius: 9px; background: var(--color-surface-muted); }.project-progress b { display: block; height: 100%; border-radius: inherit; background: var(--color-hosa-green); }.project-participants { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); margin: 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }.project-participants legend { padding: 0 4px; color: var(--color-text-muted); font-size: 11px; font-weight: 700; }.project-participants label { display: grid; justify-items: center; align-content: center; min-height: 62px; gap: 6px; padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-xs); color: var(--color-text); cursor: pointer; font-size: 12px; font-weight: 650; text-align: center; transition: border-color var(--transition-fast), background var(--transition-fast); }.project-participants label:hover { border-color: var(--border-strong); background: var(--surface-inset); }.project-participants input.project-participants__checkbox { width: 15px; height: 15px; min-height: 0; margin: 0; padding: 0; accent-color: var(--color-hosa-green); }.project-participants label:has(input:checked) { border-color: rgba(198, 161, 91, .78); background: rgba(198, 161, 91, .11); }.project-participants input:focus-visible { outline-offset: 4px; }
.finance-month-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 34px; border-bottom: 1px solid var(--color-border); font-size: 12px; }.finance-month-row:last-child { border-bottom: 0; }.finance-month-row span { color: var(--color-text-muted); text-transform: capitalize; }.finance-month-row strong { text-align: right; white-space: nowrap; }
.finance-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }.finance-chart { min-height: 0; }.finance-chart h3 { margin: 0 0 var(--space-3); font-size: 14px; }.finance-chart__canvas { height: 240px; } .finance-chart__canvas canvas { width: 100% !important; height: 100% !important; } @media (max-width: 850px) { .finance-charts { grid-template-columns: 1fr; } }

.actions-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }.actions-kpis div { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }.actions-kpis span, .actions-kpis strong { display: block; }.actions-kpis span { color: var(--color-text-muted); font-size: 11px; font-weight: 700; }.actions-kpis strong { margin-top: 4px; font-size: 20px; letter-spacing: -.03em; }.actions-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }.actions-toolbar .crm-search { max-width: 340px; }.actions-filters { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); }.actions-filters label { display: grid; gap: 5px; color: var(--color-text-muted); font-size: 11px; font-weight: 700; }.actions-filters select { min-width: 140px; height: 32px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12px; }.actions-list { display: grid; gap: var(--space-4); }.actions-section { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }.actions-section h3 { margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: 12px; }.actions-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); min-height: 76px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }.actions-row:last-child { border-bottom: 0; }.actions-row__main { display: grid; gap: 3px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--color-text); cursor: pointer; text-align: left; font: inherit; }.actions-row__main strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.actions-row__main span, .actions-row__main small { color: var(--color-text-muted); font-size: 12px; }.actions-row__main small { font-size: 11px; }.actions-row__meta { display: grid; justify-items: end; gap: 5px; }.actions-due, .actions-status { color: var(--color-text-muted); font-size: 11px; white-space: nowrap; }.actions-status { color: var(--color-success); }.actions-row__quick { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }.actions-row__quick .crm-button { min-height: 30px; }.actions-empty { margin: 0; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-muted); }.actions-report { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }.actions-report label { display: grid; gap: 5px; color: var(--color-text-muted); font-size: 11px; font-weight: 700; }.actions-report input { height: 36px; padding: 0 9px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; } @media (max-width: 850px) { .actions-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.actions-toolbar { align-items: stretch; flex-wrap: wrap; }.actions-toolbar .crm-search { flex-basis: 100%; max-width: none; }.actions-row { grid-template-columns: 1fr; gap: var(--space-2); }.actions-row__meta, .actions-row__quick { justify-items: start; justify-content: flex-start; }.actions-report { grid-template-columns: 1fr; } }