/* Sales plan (features/plan) */
.plan-page .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .plan-page .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .plan-page .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-page .mt-1 { margin-top: 4px; } .plan-page .mt-3 { margin-top: 14px; } .plan-page .nowrap { white-space: nowrap; }
.plan-page .stat .value { direction: ltr; unicode-bidi: isolate; text-align: start; }
[dir="rtl"] .plan-page .stat .value { text-align: right; }
.plan-toolbar { margin: 12px 0 10px; }
.plan-tabs { margin: 10px 0 16px; }
.plan-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md, 10px); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); margin: 8px 0; }
.plan-banner svg { width: 18px; height: 18px; flex: none; }
.plan-banner .btn { margin-inline-start: auto; }
.plan-banner.warn { background: var(--warning-soft); color: var(--warning); }
.plan-banner.ok { background: var(--success-soft); color: var(--success); }
.plan-table td, .plan-table th { white-space: nowrap; }
/* long sector names and column titles wrap so the status column stays in view on a laptop screen */
.plan-table th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.plan-table td:first-child { white-space: normal; min-width: 170px; }
.plan-table tr.clickable { cursor: pointer; }
.plan-table tr.clickable:hover td { background: var(--surface-2); }
.plan-table tfoot td { border-top: 2px solid var(--border-strong); }
.plan-seg-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xl, 20px); font-weight: 600; }
.plan-seg-title svg { width: 20px; height: 20px; color: var(--text-3); }
.plan-seg-grid { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 1100px) { .plan-seg-grid { grid-template-columns: 1fr; } }
/* the month chart */
.plan-chart .grid { stroke: var(--border); stroke-width: 1; }
.plan-chart .axis { fill: var(--text-4); font-size: 11px; }
.plan-chart .axis.m { fill: var(--text-3); font-size: 12px; }
.plan-chart .axis.ev { fill: var(--warning); font-size: 10.5px; }
.plan-chart .bar-plan { fill: var(--surface-3); stroke: var(--border-strong); stroke-dasharray: 3 3; }
.plan-chart .bar-actual { fill: var(--brand); }
.plan-chart .bar-actual.ok { fill: var(--success-vivid, #16a34a); }
.plan-chart .bar-actual.warn { fill: var(--warning-vivid, #f59e0b); }
.plan-chart .bar-actual.bad { fill: var(--danger-vivid, #e11d48); }
.plan-chart .bar-fc { fill: var(--brand); opacity: .32; stroke: var(--brand); stroke-dasharray: 4 3; }
.plan-chart .now { stroke: var(--text-3); stroke-dasharray: 2 4; }
.plan-chart .now-t { fill: var(--text-3); }
.plan-legend { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.plan-legend span { display: inline-flex; align-items: center; gap: 6px; }
.plan-legend .lg { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.plan-legend .lg.plan { background: var(--surface-3); border: 1px dashed var(--border-strong); }
.plan-legend .lg.actual { background: var(--success-vivid, #16a34a); }
.plan-legend .lg.fc { background: var(--brand); opacity: .4; }
/* the wizard */
.plan-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .plan-choices { grid-template-columns: 1fr; } }
.plan-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md, 10px); background: var(--surface); text-align: start; cursor: pointer; }
.plan-choice b { display: inline-flex; align-items: center; gap: 6px; }
.plan-choice b svg { width: 16px; height: 16px; }
.plan-choice.active { border: 2px solid var(--brand); background: var(--brand-soft, var(--surface-2)); }
.plan-choice[disabled] { opacity: .5; cursor: not-allowed; }
/* build */
.plan-big { font-size: 18px; font-weight: 700; height: 42px; margin-top: 8px; }
.plan-weights { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.plan-weights span { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.plan-weights i { display: block; width: 100%; background: var(--brand); opacity: .55; border-radius: 2px 2px 0 0; }
.plan-grid-wrap { overflow-x: auto; }
.plan-grid { font-size: 12.5px; }
.plan-grid th, .plan-grid td { padding: 6px 4px; }
.plan-grid .plan-cell { height: 28px; width: 62px; padding: 0 3px; text-align: center; font-size: 12px; }
.plan-grid .plan-cell.total { width: 84px; font-weight: 700; }
.plan-grid .plan-seg { height: 30px; min-width: 168px; font-size: 12.5px; }
.plan-grid tr.locked td { background: var(--surface-2); }
.plan-grid .plan-ev { font-size: 9.5px; padding: 0 4px; margin-top: 2px; }
.plan-grid .btn-icon.active { color: var(--brand); }
.plan-empty { padding: 40px 20px; }
@media print { .plan-page .page-actions, .plan-page .plan-toolbar .segmented, .plan-tabs, .plan-page [data-back], .plan-page [data-nola] { display: none !important; } }
.kcard .ksector { margin-top: 3px; }
.home-plan { cursor: pointer; } .home-plan:hover { border-color: var(--border-strong); }
/* phones: the 12-month grid stays a real grid (scrolls sideways inside its card) — as stacked cards nobody could
   tell which month a number belongs to; the metric switch scrolls inside itself instead of widening the page */
@media (max-width: 760px) {
  .table-wrap.plan-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap.plan-grid-wrap .tbl.plan-grid { display: table; min-width: 980px; }
  .table-wrap.plan-grid-wrap .tbl.plan-grid thead { display: table-header-group; }
  .table-wrap.plan-grid-wrap .tbl.plan-grid tbody { display: table-row-group; }
  .table-wrap.plan-grid-wrap .tbl.plan-grid tfoot { display: table-footer-group; }
  .table-wrap.plan-grid-wrap .tbl.plan-grid tr { display: table-row; padding: 0; border: 0; border-radius: 0; background: none; }
  .table-wrap.plan-grid-wrap .tbl.plan-grid td, .table-wrap.plan-grid-wrap .tbl.plan-grid th { display: table-cell; padding: 6px 4px; border-bottom: 1px solid var(--border); }
  .table-wrap.plan-grid-wrap .tbl.plan-grid td::before { display: none; }
  .plan-toolbar { flex-direction: column; align-items: stretch; }
  .plan-toolbar .segmented, .plan-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .plan-toolbar .segmented button span { white-space: nowrap; }
  .plan-page .page-actions { flex-wrap: wrap; }
}
.plan-help-sec h4 { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); margin: 0 0 3px; } .plan-help-sec h4 svg { width: 16px; height: 16px; color: var(--brand); } .plan-help-sec p { margin: 0; color: var(--text-2); line-height: 1.7; }