:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172033; background: #f4f6fa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.login-page { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 80% 10%, #dbe8ff, transparent 32%), #f4f6fa; }
.login-card { width: min(100%, 420px); background: white; border: 1px solid #e7eaf0; border-radius: 24px; padding: 36px; box-shadow: 0 24px 70px rgba(25, 42, 70, .12); }
.brand { color: #246bfd; font-weight: 800; letter-spacing: .08em; font-size: 13px; }
h1 { margin: 14px 0 8px; font-size: 30px; }
.muted { color: #6c7485; margin: 0 0 28px; line-height: 1.5; }
label { display: block; margin: 18px 0 7px; font-weight: 650; font-size: 14px; }
input { width: 100%; border: 1px solid #d8dde7; border-radius: 12px; padding: 13px 14px; font: inherit; outline: none; }
input:focus { border-color: #246bfd; box-shadow: 0 0 0 4px rgba(36, 107, 253, .1); }
button { border: 0; border-radius: 12px; background: #246bfd; color: white; padding: 13px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.login-card button { width: 100%; margin-top: 24px; }
.error { display: none; margin: 18px 0 0; color: #b42318; background: #fff0ee; border-radius: 10px; padding: 11px 12px; font-size: 14px; }
.error:target { display: block; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
aside { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #172033; color: white; padding: 28px 20px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.nav-title { margin: 10px 0 30px; }
.context-title { appearance: none; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 34px; font-weight: 950; line-height: 1; letter-spacing: .04em; }
.context-title:empty { min-width: 64px; min-height: 34px; }
.context-title.ff { color: #ef3340; }
.context-title.sl1 { color: #ff3028; }
.context-title:disabled { cursor: default; opacity: 1; }
.context-title:not(:disabled):hover { filter: brightness(1.16); transform: translateY(-1px); }
.context-title:not(:disabled):focus-visible { outline: 2px solid #7eabff; outline-offset: 5px; }
.nav-list { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; min-height: 0; overflow-y: auto; }
.nav-list.context-pending { visibility: hidden; }
.nav-item { display: block; width: 100%; flex: 0 0 auto; color: #dce4f2; text-decoration: none; border: 1px solid transparent; border-radius: 12px; padding: 13px 14px; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s ease, color .15s ease; }
.nav-item:link, .nav-item:visited { color: #dce4f2; }
.nav-item:hover { background: #24324b; color: white; }
.nav-item.active, .nav-item.active:visited { background: #2b3953; color: white; }
.sidebar-footer { position: relative; z-index: 5; margin: 0; padding-top: 16px; padding-bottom: max(0px, env(safe-area-inset-bottom)); background: #172033; }
.logout { margin: 8px 0 0; }
.logout button { width: 100%; background: transparent; border: 1px solid #52617d; }
.admin-users-link { display: block; width: 100%; padding: 13px 18px; color: white; text-align: center; text-decoration: none; font-weight: 700; border: 1px solid #52617d; border-radius: 12px; }
.admin-users-link:visited { color: white; }.admin-users-link:hover { background: #24324b; }.admin-users-link[hidden] { display: none; }
main { min-width: 0; padding: 42px; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topline[hidden] { display: none; }
.badge { color: #216e39; background: #dafbe1; border-radius: 999px; padding: 7px 11px; font-size: 13px; font-weight: 700; }
.empty { margin-top: 30px; min-height: 380px; display: grid; place-items: center; text-align: center; background: white; border: 1px solid #e5e9f0; border-radius: 20px; padding: 40px; }
.empty[hidden] { display: none; }
.empty-icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 18px; background: #edf3ff; color: #246bfd; font-size: 25px; }
.charts-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.35fr) minmax(220px, .65fr); gap: 16px; margin-top: 30px; }
.sales-mode main { padding-top: 20px; }
.sales-mode .charts-grid { margin-top: 0; }
.charts-grid[hidden] { display: none; }
.chart-card, .metric-card { min-width: 0; background: white; border: 1px solid #e5e9f0; border-radius: 20px; padding: 20px; }
.chart-card h2 { margin: 0; font-size: 16px; }
.chart-card p { margin: 5px 0 12px; color: #7b8496; font-size: 12px; }
.chart-card canvas { display: block; width: 100%; height: 230px; }
.chart-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; color: #566074; font-size: 11px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 50%; }
.chart-legend .purple { background: #8b5cf6; }.chart-legend .blue { background: #3297f2; }.chart-legend .green { background: #42c77a; }.chart-legend .orange { background: #ff7b45; }
.metric-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(145deg, #fff, #f7fbff); }
.metric-card span { color: #344054; font-size: 17px; font-weight: 650; }
.metric-card strong { margin: 10px 0 4px; color: #0bd957; font-size: clamp(42px, 4vw, 72px); line-height: 1; }
.metric-card strong.negative { color: #e5484d; }
.metric-card small { color: #7b8496; }
.data-panel { margin-top: 30px; min-width: 0; background: white; border: 1px solid #e5e9f0; border-radius: 20px; overflow: hidden; }
.data-panel[hidden] { display: none; }
.table-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid #e5e9f0; }
.table-meta span { color: #6c7485; font-size: 13px; }
.table-scroll { width: 100%; overflow: hidden; }
.sales-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: clamp(8px, .58vw, 12px); white-space: nowrap; }
.sales-table th, .sales-table td { min-width: 0; padding: 9px 4px; overflow: hidden; text-overflow: ellipsis; text-align: right; border-right: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; background: white; }
.sales-table th { position: sticky; top: 0; z-index: 3; color: #344054; background: #f7f9fc; font-weight: 750; }
.sales-table th:first-child, .sales-table td:first-child { position: sticky; left: 0; z-index: 2; min-width: 0; max-width: none; padding-left: 12px; text-align: left; white-space: normal; box-shadow: 1px 0 0 #e5e9f0; }
.sales-table th:first-child { z-index: 4; background: #f7f9fc; }
.sales-table tr.spacer td { height: 16px; padding: 0; background: #f4f6fa; }
.sales-table tr:hover td { background: #f8fbff; }
.sales-table tr:hover td:first-child { background: #f8fbff; }
.sales-table tr.current-year td { color: #101828; background: #eef5ff; font-weight: 800; }
.sales-table tr.current-year td:first-child { background: #e6f0ff; }
.sales-table td.total-cell, .sales-table td.annual-growth-cell { color: #101828; font-weight: 850; }
.sales-table td.positive { color: #14804a; }.sales-table td.negative { color: #c4323b; }
.sales-table td.with-trends { position: relative; padding-right: 16px; }
.trend-stack { position: absolute; top: 50%; right: 3px; display: flex; flex-direction: column; gap: 0; transform: translateY(-50%); font-size: 9px; font-weight: 900; line-height: .85; }
.trend { cursor: help; }.trend.up { color: #169b52; }.trend.down { color: #e23c45; }.trend.flat { color: #8a94a6; }
.marketing-mode main { padding-top: 20px; }
.marketing-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.marketing-kpi { background: white; border: 1px solid #e5e9f0; border-radius: 20px; padding: 20px; }
.marketing-kpi span { color: #667085; font-size: 13px; font-weight: 650; }
.marketing-kpi strong { display: block; margin: 8px 0 5px; color: #101828; font-size: clamp(28px, 3vw, 44px); line-height: 1; }
.marketing-kpi small { color: #6c7485; font-size: 12px; }.marketing-kpi small.positive { color: #14804a; }.marketing-kpi small.negative { color: #c4323b; }
.marketing-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: 16px; }
.marketing-grid canvas { height: 240px; }
.funnel { display: grid; gap: 12px; padding-top: 16px; }
.funnel-row { display: grid; grid-template-columns: 92px 1fr 72px; align-items: center; gap: 10px; font-size: 12px; }
.funnel-track { height: 34px; border-radius: 8px; background: #edf2f8; overflow: hidden; }
.funnel-fill { height: 100%; min-width: 3px; border-radius: 8px; background: linear-gradient(90deg,#246bfd,#62a3ff); }
.funnel-row:nth-child(2) .funnel-fill { background: linear-gradient(90deg,#17a969,#58d79a); }.funnel-row:nth-child(3) .funnel-fill { background: linear-gradient(90deg,#8b5cf6,#b398ff); }
.funnel-value { text-align: right; font-weight: 800; }.marketing-table-panel { margin-top: 16px; }
@media (max-width: 900px) { .marketing-kpis, .marketing-grid { grid-template-columns: 1fr; } }
@media (max-width: 1250px) { .charts-grid { grid-template-columns: 1fr 1fr; } .metric-card { grid-column: 1 / -1; min-height: 170px; } }
@media (max-width: 720px) { .shell { grid-template-columns: 1fr; } aside { position: static; height: auto; min-height: auto; overflow: visible; } .logout { position: static; margin-top: 24px; padding-top: 0; } main { padding: 26px 20px; } .charts-grid { grid-template-columns: 1fr; } .metric-card { grid-column: auto; } .table-meta { align-items: flex-start; flex-direction: column; } .table-scroll { overflow-x: auto; } .sales-table { min-width: 900px; font-size: 10px; } .sales-table th:first-child, .sales-table td:first-child { min-width: 180px; } }
.admin-page{min-height:100vh;background:#f5f7fb;color:#182230}.admin-header{height:72px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e5e9f0}.admin-header>div,.admin-header form,.form-actions,.search-form,.pagination,.user-actions{display:flex;align-items:center;gap:10px;margin:0}.admin-header a{color:#246bfd;text-decoration:none}.admin-main{max-width:1180px;margin:auto;padding:44px 24px}.admin-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.admin-title h1{margin:4px 0;font-size:42px}.eyebrow{color:#246bfd;font-weight:700}.create-user,.users-card{background:#fff;border:1px solid #e5e9f0;border-radius:20px;padding:24px;margin-bottom:22px}.create-user[hidden]{display:none}.create-user form,.search-form{max-width:520px}.create-user label{display:block;margin:14px 0;font-weight:650}.create-user input,.search-form input{width:100%;box-sizing:border-box;padding:12px;border:1px solid #cfd6e3;border-radius:10px}.users-table{width:100%;border-collapse:collapse}.users-table th,.users-table td{padding:14px 12px;border-bottom:1px solid #edf0f5;text-align:left;white-space:nowrap}.status-active{color:#14833b;font-weight:650}.status-blocked{color:#c9362b;font-weight:650}.secondary{background:#fff;color:#344054;border:1px solid #cfd6e3}.compact{padding:7px 10px;font-size:12px}.pagination{justify-content:flex-end;margin-top:20px}button:disabled{opacity:.45}.role-column{text-align:center!important}.role-column input{width:18px;height:18px;margin:0;accent-color:#246bfd}.role-note{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;background:#f4f7fc}.role-note span{color:#687386}.role-note strong{color:#246bfd}.admin-nav[hidden]{display:none}@media(max-width:720px){.admin-title{align-items:stretch;flex-direction:column}.user-actions{flex-direction:column}}
.admin-content{min-width:0;min-height:100vh;background:#f5f7fb;padding:0}.admin-users-link.active{background:#2b3953;border-color:#6b7b98}
@media(max-width:720px){.sidebar-footer{position:static;margin-top:24px;padding:0}.logout{margin-top:8px}}
@media(max-width:720px){aside{display:flex}}
.development-panel{margin-top:0;background:#fff;border:1px solid #e5e9f0;border-radius:20px;overflow:hidden}.year-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border-bottom:1px solid #e5e9f0}.year-buttons{display:flex;gap:8px;flex-wrap:wrap}.year-toolbar button{background:#eef2f8;color:#344054}.year-toolbar button.active{background:#ff3028;color:#fff}.development-search{display:flex;gap:8px;min-width:min(520px,48%)}.development-search select,.development-search input{border:1px solid #d7deea;border-radius:10px;background:#fff;color:#344054;padding:11px 13px;font:inherit}.development-search input{min-width:0;flex:1}.development-table{width:100%;min-width:1250px;border-collapse:collapse;font-size:12px}.development-table th,.development-table td{padding:11px 10px;border-right:1px solid #edf0f5;border-bottom:1px solid #edf0f5;text-align:right;white-space:nowrap}.development-table th{background:#f7f9fc;color:#344054}.development-table th.sortable{cursor:pointer;user-select:none}.development-table th.sortable::after{content:" ↕";color:#98a2b3}.development-table th[data-sort="desc"]::after{content:" ↓";color:#ff3028}.development-table th[data-sort="asc"]::after{content:" ↑";color:#ff3028}.development-table th:first-child,.development-table td:first-child{position:sticky;left:0;text-align:left;background:#fff;font-weight:700}.development-table th:first-child{background:#f7f9fc}.contract-cell{cursor:help}.development-panel .table-scroll{overflow:auto;max-height:calc(100vh - 145px)}
@media(max-width:900px){.year-toolbar{align-items:stretch;flex-direction:column}.development-search{min-width:0;width:100%}}
.development-search input{width:100%}.development-table th:first-child,.development-table td:first-child{min-width:240px;max-width:360px;overflow:hidden;text-overflow:ellipsis}
.development-table{width:100%;min-width:0;table-layout:fixed;font-size:clamp(8px,.58vw,10px)}.development-table th,.development-table td{padding:9px 4px;overflow:hidden;text-overflow:ellipsis}.development-table th:nth-child(1),.development-table td:nth-child(1),.development-table th:nth-child(2),.development-table td:nth-child(2){width:10%;min-width:0;max-width:none}.development-table th:nth-child(n+3),.development-table td:nth-child(n+3){width:auto}.development-panel .table-scroll{overflow-x:hidden}
.development-table{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}