/* Fonts as on nine.ch (both SIL Open Font License). */
@font-face { font-family: "Sora"; src: url("fonts/Sora-Variable.b8d4cd4592ea.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Variable.e9d8a153127f.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Nine corporate design (guidelines 2018): primary Himmelblau #0091CF and Nachtblau #2D3A4C;
   secondary Gelb #FFE163, Erdbeer #EC7987, Petrol #93C0C4, Lavendel #AE94B6.
   One blue only. Nachtblau ground with lighter raised tiles; grid backdrop as on nine.ch. */
:root {
  --brand: #0091cf;         /* Himmelblau: buttons, icons, active states */
  --primary: #0091cf;
  --primary-hover: #00a3e8;
  --navy: #2d3a4c;          /* Nachtblau */
  --bg: #2d3a4c;
  --topbar: #243041;
  --surface: #3a4960;       /* tiles */
  --surface-2: #45566f;     /* cards on tiles, inputs */
  --border: #52647f;
  --grid-line: rgba(255, 255, 255, .055);
  --grid-tile: rgba(255, 255, 255, .025);
  --text: #eef2f6; --muted: #aebbcb; --accent: #8ccbe8; --accent-text: #ffffff;
  --brand-soft: rgba(0, 145, 207, .18);  /* Himmelblau tint for highlighted areas */
  --tab-active-text: var(--text);
  --topbar-edge: #141925;
  --banner: #243041;
  --link-underline: rgba(140, 203, 232, .45);
  --won: #93c0c4;           /* Petrol */
  --lost: #ec7987;          /* Erdbeer */
  --warn: #ffe163;          /* Gelb */
  --radius: 12px; --shadow: 0 2px 6px rgba(0, 0, 0, .18);
  --font-text: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Sora", var(--font-text);
  color-scheme: dark;
}
/* Light mode, like the Deploio pricing page: warm light grey ground, white cards with a navy
   top edge, navy as the single accent, square corners. Chosen with the toggle in the top bar. */
:root[data-nine-theme="light"] {
  --brand: #141b4d; --primary: #141b4d; --primary-hover: #252e6b; --navy: #141b4d;
  --bg: #f4f4f8; --topbar: #ffffff; --topbar-edge: #e3e2ee; --banner: #141b4d;
  --surface: #ffffff; --surface-2: #f2f2f4; --border: #dedde3;
  --grid-line: #e7e5f8;      /* lavender grid as on nine.ch */
  --text: #141b4d; --muted: #6b6f88; --accent: #141b4d; --link-underline: rgba(20, 27, 77, .3);
  --brand-soft: #141b4d; --tab-active-text: #ffffff;
  --won: #2c7a80; --lost: #c2405a; --warn: #9a6b00;
  --radius: 2px; --shadow: 0 10px 28px rgba(20, 27, 77, .07);
  color-scheme: light;
}
:root[data-nine-theme="light"] body {
  /* Some tiles tinted lavender, like the nine.ch hero grid. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='%23ebe9fb'%3E%3Crect x='150' y='0' width='150' height='150'/%3E%3Crect x='450' y='150' width='150' height='150'/%3E%3Crect x='0' y='300' width='150' height='150'/%3E%3Crect x='300' y='450' width='150' height='150'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(var(--grid-line) 2px, transparent 2px),
    linear-gradient(90deg, var(--grid-line) 2px, transparent 2px);
  background-size: 600px 600px, 150px 150px, 150px 150px; }
:root[data-nine-theme="light"] .panel, :root[data-nine-theme="light"] .kpi,
:root[data-nine-theme="light"] .present-totals { border: none; box-shadow: var(--shadow); }
:root[data-nine-theme="light"] .panel, :root[data-nine-theme="light"] .kpi { border-top: 3px solid var(--navy); }
:root[data-nine-theme="light"] .column { box-shadow: var(--shadow); border-top: 3px solid var(--navy); }
:root[data-nine-theme="light"] .card { box-shadow: none; }
:root[data-nine-theme="light"] .tabs { background: transparent; border: none; padding: 0; gap: .4rem; }
:root[data-nine-theme="light"] .tabs a { background: #f4f4f5; border-radius: 0; color: var(--muted); }
:root[data-nine-theme="light"] .tabs a.active { background: var(--navy); color: #ffffff; }
:root[data-nine-theme="light"] .filters { box-shadow: var(--shadow); border: none; border-left: 3px solid var(--navy); }
:root[data-nine-theme="light"] .btn, :root[data-nine-theme="light"] input,
:root[data-nine-theme="light"] select, :root[data-nine-theme="light"] textarea { border-radius: 0; }
:root[data-nine-theme="light"] .table-wrap { border: none; }

* { box-sizing: border-box; }
body { margin: 0; color: var(--text); font: 15px/1.5 var(--font-text); background-color: var(--bg);
  /* Tile grid like nine.ch: 150px squares with a few faintly filled ones. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='white' fill-opacity='.028'%3E%3Crect x='150' y='0' width='150' height='150'/%3E%3Crect x='450' y='150' width='150' height='150'/%3E%3Crect x='0' y='300' width='150' height='150'/%3E%3Crect x='300' y='450' width='150' height='150'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(var(--grid-line) 2px, transparent 2px),
    linear-gradient(90deg, var(--grid-line) 2px, transparent 2px);
  background-size: 600px 600px, 150px 150px, 150px 150px;
  background-attachment: fixed; }
h1, h2, h3, .kpi .value, .present-totals strong, .login-brand h1, .topbar .brand span { font-family: var(--font-head); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; font-weight: 600; margin: 0 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .75rem; }

.topbar { display: flex; align-items: center; gap: 1.25rem; padding: .7rem 1.25rem;
  background: var(--topbar); border-bottom: 1px solid var(--topbar-edge); flex-wrap: wrap; }
.topbar .brand { font-weight: 700; color: var(--text); display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.topbar .brand a { display: flex; }
.topbar .brand span { color: var(--text); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; }
.icon { width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-right: .35rem; fill: none; stroke: var(--brand);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.login-brand { flex-direction: row; justify-content: center; }
.login-brand h1 { margin: 0; color: var(--text); font-size: 2.1rem; font-weight: 600; }
.login-brand img { height: 84px; width: auto; max-width: 75%; }

/* Screenshot-friendly report lists */
.snapshot { max-width: 1100px; }
.snapshot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.snapshot-head h2 { margin: 0; font-size: 1.25rem; }
.snapshot tfoot td { border-top: 2px solid var(--text); font-size: 1.02rem; }

/* Presentation page */
.present { max-width: 1200px; margin: 0 auto 2.5rem; }
.present-banner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.25rem !important;
  background: var(--navy); color: #fff; border-radius: var(--radius) var(--radius) 0 0; padding: 1.1rem 1.5rem;
  border-bottom: 5px solid var(--brand); }
.present-banner.won { border-bottom-color: var(--won); }
.present-banner.lost { border-bottom-color: var(--lost); }
.present-banner h2 { margin: 0; font-size: 1.45rem; color: #fff; }
.present-banner h2 .icon { stroke: var(--brand); width: 1em; height: 1em; }
.present-banner { background: var(--banner); }
.present-banner span { color: #a9bdd3; }
.present-totals { display: grid; grid-template-columns: 1fr 1fr .6fr; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-top: none; margin-bottom: 1rem; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.present-totals div { background: var(--surface); padding: .6rem 1.25rem; }
.present-totals span { display: block; color: var(--muted); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.present-totals strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.present-stage { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 .4rem; font-size: .98rem; }
.present-stage span { color: var(--muted); font-weight: 500; font-size: .9rem; }
.present-table { margin-bottom: .5rem; }
.present-table td.wrap { white-space: normal; width: 40%; color: var(--muted); font-size: .85rem; }
body.presenting .topbar, body.presenting .no-present, body.presenting .messages { display: none; }
@media (max-width: 700px) { .present-totals { grid-template-columns: 1fr; } }

/* Performance */
.section-title { margin: 1.8rem 0 .8rem; font-size: 1.2rem; }
.funnel-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) 3fr minmax(220px, 1.6fr); gap: 1rem; align-items: center; padding: .4rem 0; }
.funnel-bar { background: var(--surface-2); border-radius: 6px; height: 1.3rem; overflow: hidden; }
.funnel-bar span { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.funnel-bar span.won { background: var(--won); }
.funnel-nums { color: var(--muted); font-size: .9rem; }
.funnel-nums strong { color: var(--text); font-size: 1rem; }
@media (max-width: 800px) { .funnel-row { grid-template-columns: 1fr; gap: .25rem; } }

/* Theme toggle */
.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted);
  width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.theme-toggle:hover { color: var(--text); }
.theme-toggle .icon { margin: 0; stroke: currentColor; }
.theme-toggle .sun { display: none; }
:root[data-nine-theme="light"] .theme-toggle .sun { display: inline; }
:root[data-nine-theme="light"] .theme-toggle .moon { display: none; }

/* Deal form: numbered steps */
.deal-form { max-width: 1100px; }
.step h2 { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: .85rem; font-weight: 600; }
.step-hint { color: var(--muted); font-size: .88rem; margin: -.4rem 0 .8rem; }
.step-grid { display: grid; gap: .9rem 1.25rem; margin-bottom: .9rem; }
.step-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.step-grid .span-2 { grid-column: span 2; }
.origin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: start; }
.origin-col .field + .field { margin-top: .6rem; }
.origin-arrow { color: var(--brand); font-size: 1.4rem; padding-top: 1.55rem; }
.info-toggle { background: none; border: none; padding: .3rem 0 0; color: var(--accent); cursor: pointer; font: inherit; font-size: .85rem; }
.info-toggle:hover { text-decoration: underline; }
.info-box { margin-top: .8rem; padding: .6rem .9rem; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 8px; background: var(--surface-2); font-size: .9rem; }
.info-box dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.info-box dt { font-weight: 600; margin: 0; color: var(--text); font-size: inherit; }
.info-box dd { margin: 0; color: var(--muted); }
@media (max-width: 800px) { .info-box dl { grid-template-columns: 1fr; } }
.computed { padding: .4rem .55rem; border: 1px dashed var(--border); border-radius: 8px; font-variant-numeric: tabular-nums; font-weight: 600; }
.form-actions { display: flex; gap: .5rem; margin-bottom: 2rem; }
.configurator-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: end; margin-bottom: .75rem; }
.configurator-row .field input { width: 100%; }
.configurator-result { border: 1px dashed var(--border); border-radius: 8px; padding: .5rem .75rem; margin-bottom: .9rem; }
.configurator-result.error { color: var(--lost); border-color: var(--lost); }
.configurator-result table { width: 100%; }
.configurator-result .muted-cell { color: var(--muted); }
#id_product_groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem 1rem; }
@media (max-width: 800px) { #id_product_groups { grid-template-columns: 1fr; } }
select:disabled { opacity: .55; }
@media (max-width: 800px) {
  .step-grid.cols-3, .step-grid.cols-2, .origin-row { grid-template-columns: 1fr; }
  .step-grid .span-2 { grid-column: auto; }
  .origin-arrow { display: none; }
}

/* Cockpit */
.cockpit-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .cockpit-grid { grid-template-columns: 1fr; } }
.suggestion { display: flex; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.suggestion:last-child { border-bottom: none; }
.suggestion .dot { flex: 0 0 .6rem; height: .6rem; border-radius: 50%; margin-top: .45rem; background: var(--muted); }
.suggestion.p1 .dot { background: var(--lost); }
.suggestion.p2 .dot { background: var(--warn); }
.suggestion.p3 .dot { background: var(--accent); }
.suggestion .what { font-weight: 600; }
.suggestion .why { color: var(--muted); font-size: .85rem; }
.topbar nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); font-weight: 500; }
.topbar nav a.active { color: var(--text); }
.topbar .user { color: var(--muted); display: flex; gap: .75rem; align-items: center; }
.topbar form { margin: 0; }
main { padding: 1.25rem; max-width: 1600px; margin: 0 auto; }

.btn { display: inline-block; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: .45rem .85rem; border-radius: 8px; font: inherit; cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; background: var(--surface-2); }
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.link { border: none; background: none; color: var(--muted); padding: 0; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { padding: .6rem .9rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem;
  background: var(--topbar); border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius); padding: .55rem .75rem; }
.filters input, .filters select { background: var(--surface); }
.filters label { color: var(--muted); font-size: .9rem; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: .4rem .55rem; max-width: 100%; }
.page-head { display: flex; justify-content: flex-start; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.deal-head { justify-content: space-between; }
.deal-actions { display: flex; gap: .5rem; }
.deal-foot { display: flex; justify-content: flex-end; margin-bottom: 2rem; }

/* Board */
.board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.column { flex: 1 1 0; min-width: 165px; background: var(--surface); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 190px); }
.column header { padding: .7rem .8rem .5rem; }
.column header .title { font-weight: 600; display: flex; justify-content: space-between; gap: .5rem; }
.column header .count { color: var(--muted); font-weight: 500; }
.column header .sum { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.column.won header .title { color: var(--won); }
.column.lost header .title { color: var(--lost); }
.cards { padding: 0 .5rem .6rem; overflow-y: auto; min-height: 60px; flex: 1; }
.card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
  padding: .55rem .65rem; margin-bottom: .45rem; cursor: grab; }
.card a.name { color: var(--accent); font-weight: 600; display: block; text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 3px; }
.card a.name:hover { color: var(--text); text-decoration-color: var(--brand); }
.card .meta { color: var(--muted); font-size: .8rem; display: flex; justify-content: space-between; gap: .5rem; margin-top: .2rem; }
.card .amount { font-variant-numeric: tabular-nums; }
.card .overdue { color: var(--warn); }
.card .owner { justify-content: flex-end; }
.card .meta span { white-space: nowrap; }
.btn.danger { color: var(--lost); border-color: var(--lost); }
.sortable-ghost { opacity: .4; }
/* Collapsed closed columns hide their cards but stay a drop target. */
.column.collapsed .card { display: none; }
.column.collapsed .cards { min-height: 90px; border: 2px dashed var(--border); border-radius: 8px; margin: 0 .5rem .6rem; }
.column.collapsed .cards::after { content: "Drop here"; display: block; text-align: center; color: var(--muted); padding-top: 1.6rem; font-size: .85rem; }
.column.collapsed .cards .sortable-ghost { display: block; }
.board-hint { color: var(--muted); font-size: .85rem; margin: -.4rem 0 .8rem; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
th a { color: inherit; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 600; border-bottom: none; }
tr:last-child td { border-bottom: none; }
.tabs { display: flex; gap: .2rem; flex-wrap: wrap; background: var(--topbar); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px; }
.tabs a { padding: .3rem .8rem; border-radius: 7px; color: var(--muted); border: 1px solid transparent; font-size: .92rem; }
.tabs a:hover { color: var(--text); text-decoration: none; background: var(--surface); }
.tabs a.active { background: var(--brand-soft); color: var(--tab-active-text); border-color: var(--brand); }

/* Detail & form */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .9rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem 1.5rem; }
.field label, dt { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; }
.field ul { list-style: none; padding: 0; margin: 0; columns: 2; }
.field .errorlist, .errorlist { color: var(--lost); list-style: none; padding: 0; margin: .25rem 0 0; font-size: .85rem; }
.field .help { color: var(--muted); font-size: .8rem; }
dl { margin: 0; }
dd { margin: 0 0 .2rem; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2); font-size: .8rem; }
.badge.won { color: var(--won); }
.badge.lost { color: var(--lost); }

/* Reports */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; margin-bottom: .9rem; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .8rem; }
.kpi .label { color: var(--muted); font-size: .78rem; font-weight: 600; }
.kpi .value { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kpi .sub { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 1rem; margin-bottom: .9rem; }
.report-grid .panel { margin: 0; min-width: 0; }
.chart-box { position: relative; height: 280px; }
.note { color: var(--muted); font-size: .8rem; }

/* Modal */
dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); width: min(420px, 92vw); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog .actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

.login { max-width: 460px; margin: 10vh auto; }
.login .field { margin-bottom: .8rem; }
.sso-btn { display: block; text-align: center; padding: .7rem; font-size: 1rem; margin-bottom: .6rem; }

@media (max-width: 600px) {
  .report-grid { grid-template-columns: 1fr; }
  main { padding: 1rem; }
}