@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap');

:root {
  --night: #0b1327;
  --night-2: #101a33;
  --night-3: #17223e;
  --panel: #111b32;
  --panel-soft: #15213b;
  --panel-hover: #1a2846;
  --border: rgba(255, 255, 255, .085);
  --border-strong: rgba(255, 255, 255, .14);
  --text: #f8f9fc;
  --muted: #919bb3;
  --muted-2: #66728d;
  --red: #cd133b;
  --red-soft: rgba(205, 19, 59, .15);
  --yellow: #f5b114;
  --yellow-soft: rgba(245, 177, 20, .14);
  --blue: #5a7dff;
  --green: #57c785;
  --green-soft: rgba(87, 199, 133, .14);
  --shadow: 0 22px 70px rgba(0, 0, 0, .22);
  --radius: 18px;
  --radius-sm: 12px;
  --sidebar: 252px;
  --topbar: 86px;
  font-family: Lexend, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
.ui-icon { display:block; width:1.2em; height:1.2em; flex:0 0 auto; }
html { min-height: 100%; background: var(--night); }
body { margin: 0; min-height: 100vh; background: var(--night); color: var(--text); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.025em; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
small { color: var(--muted); }
code { color: #ffd36d; background: rgba(255,255,255,.06); padding: 2px 5px; border-radius: 5px; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); display: flex; flex-direction: column; padding: 24px 16px 16px; background: #091122; border-right: 1px solid var(--border); z-index: 40; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-height: 42px; color: var(--text); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--red), #a70c2d); color: white; box-shadow: 0 8px 24px rgba(205, 19, 59, .28); font-size: 17px; }
.brand-large { font-size: 18px; margin-bottom: 34px; }
.brand-large .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
.brand-logo-link { width: 100%; min-height: 46px; }
.brand-logo { display: block; width: 180px; max-width: 100%; height: auto; }
.brand-large.brand-logo-link { width: min(270px, 100%); margin-bottom: 34px; }
.brand-large .brand-logo { width: 265px; }
.main-nav { margin-top: 30px; display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.nav-label { margin: 19px 10px 7px; color: var(--muted-2); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 11px; color: #a4aec4; font-size: 13px; font-weight: 600; transition: .18s ease; }
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.045); }
.nav-link.active { color: white; background: linear-gradient(90deg, rgba(205,19,59,.2), rgba(205,19,59,.07)); box-shadow: inset 3px 0 0 var(--red); }
.nav-icon { width: 21px; display:grid; place-items:center; color: currentColor; }
.nav-icon .ui-icon { width:19px; height:19px; }
.sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.user-chip { min-width: 0; display: flex; align-items: center; gap: 10px; flex: 1; }
.user-chip > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.user-chip strong, .user-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip strong { font-size: 12px; }
.user-chip small { font-size: 10px; }
.avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg, var(--yellow), #d38900); color: var(--night); font-size: 13px; font-weight: 900; }
.avatar-large { width: 64px; height: 64px; font-size: 24px; }
.avatar { background-color:var(--yellow); }
.avatar .ui-icon { width:18px; height:18px; }
.avatar-large .ui-icon { width:30px; height:30px; }
.avatar-client { color:#c9d6ff; background:rgba(90,125,255,.18); }
.avatar-employee, .avatar-owner { color:var(--night); background:var(--yellow); }
.avatar-provider { color:#ff9ab0; background:var(--red-soft); }

.main-area { width: calc(100% - var(--sidebar)); min-width: 0; margin-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 30; min-height: var(--topbar); padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(11, 19, 39, .88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar-title h1 { margin: 2px 0 0; font-size: 22px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.global-search { width: min(280px, 26vw); height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.035); }
.global-search span { color: var(--muted); font-size: 18px; }
.global-search input { width: 100%; border: 0; padding: 0; background: transparent; outline: 0; }
.notification-button { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.035); font-size: 18px; }
.notification-button .ui-icon { width:19px; height:19px; }
.notification-button b { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); border: 2px solid var(--night); font-size: 9px; }
.mobile-menu { display: none; border: 0; background: transparent; color: white; font-size: 23px; cursor: pointer; }
.mobile-menu .ui-icon { width:24px; height:24px; }
.sidebar-overlay { display: none; }
.content { width: min(1600px, 100%); margin: 0 auto; padding: 26px 28px 48px; }

.eyebrow { display: block; color: var(--yellow); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.muted { color: var(--muted); }
.block { display: block; margin-top: 3px; }
.positive, .amount.income { color: var(--green) !important; }
.negative, .amount.expense { color: #f05d7b !important; }
.amount.transfer { color: #91a8ff !important; }
.text-right { text-align: right !important; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 17px; border: 1px solid transparent; border-radius: 11px; color: white; font-weight: 750; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--red), #aa0d31); box-shadow: 0 9px 24px rgba(205,19,59,.2); }
.btn-primary:hover { background: linear-gradient(135deg, #dc2049, var(--red)); }
.btn-secondary { background: var(--panel-soft); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--panel-hover); }
.btn-ghost { color: #aeb7ca; background: transparent; border-color: var(--border); }
.btn-compact { min-height: 36px; padding: 0 13px; font-size: 12px; }
.btn-block { width: 100%; }
.icon-btn { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.035); color: var(--muted); cursor: pointer; }
.icon-btn .ui-icon { width:16px; height:16px; }
.icon-btn:hover { color: white; background: rgba(255,255,255,.08); }
.icon-btn.danger:hover { color: #ff7792; background: var(--red-soft); border-color: rgba(205,19,59,.3); }

.panel { background: linear-gradient(145deg, rgba(20,32,58,.98), rgba(15,25,46,.98)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 42px rgba(0,0,0,.1); }
.panel-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 20px 15px; }
.panel-header h2, .panel-header h3 { margin: 3px 0 0; }
.panel-header > a { color: #aeb7ca; font-size: 12px; font-weight: 650; }
.page-actions { min-height: 46px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.page-actions p { margin: 0; color: var(--muted); }
.page-actions > div:last-child, .export-buttons { display: flex; align-items: center; gap: 9px; }
.welcome-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.welcome-row h2 { margin-bottom: 3px; font-size: 24px; }
.welcome-row p { margin: 0; color: var(--muted); }

.alert { position: relative; margin-bottom: 15px; padding: 13px 42px 13px 15px; border: 1px solid; border-radius: 11px; }
.alert button { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 18px; }
.alert-success { color: #8ceab2; background: var(--green-soft); border-color: rgba(87,199,133,.25); }
.alert-danger { color: #ff8ba3; background: var(--red-soft); border-color: rgba(205,19,59,.3); }
.alert-warning { color: #ffd36d; background: var(--yellow-soft); border-color: rgba(245,177,20,.25); }
.budget-alert-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: var(--yellow-soft); border: 1px solid rgba(245,177,20,.24); }
.budget-alert-strip p { margin: 0; color: #d8b969; font-size: 12px; }
.budget-alert-strip a { margin-left: auto; color: #ffd36d; font-weight: 750; }
.alert-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 6px rgba(245,177,20,.12); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin-bottom: 16px; }
.metric-card { position: relative; min-height: 140px; padding: 18px; overflow: hidden; background: linear-gradient(145deg, var(--panel-soft), var(--panel)); border: 1px solid var(--border); border-radius: 16px; }
.metric-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -35px; bottom: -55px; border-radius: 50%; background: rgba(255,255,255,.025); }
.metric-balance { background: linear-gradient(135deg, #c6133a, #8d0d2b); }
.metric-balance .metric-label, .metric-balance small { color: rgba(255,255,255,.72); }
.metric-icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 9px; background: rgba(255,255,255,.08); color: #cbd4e8; font-size: 17px; }
.metric-icon .ui-icon { width:17px; height:17px; }
.income-icon { color: var(--green); background: var(--green-soft); }
.expense-icon { color: #f05d7b; background: var(--red-soft); }
.net-icon { color: var(--yellow); background: var(--yellow-soft); }
.metric-label { color: var(--muted); font-size: 11px; font-weight: 650; }
.metric-card > strong { display: block; margin: 3px 0 1px; font-size: clamp(20px,2vw,27px); letter-spacing: -.04em; }
.metric-card > small { font-size: 10px; }
.commercial-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); }
.potential-card { border-color:rgba(87,199,133,.25); background-color:rgba(87,199,133,.055); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(310px,.8fr); gap: 16px; margin-bottom: 16px; }
.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(310px,.75fr); gap: 16px; }
.cashflow-panel, .category-panel { min-height: 366px; }
.chart-legend { display: flex; gap: 13px; color: var(--muted); font-size: 11px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #7d8597); }
.income-dot { background: var(--yellow); }
.expense-dot { background: var(--red); }
.canvas-wrap { position: relative; height: 280px; padding: 7px 16px 18px; }
.canvas-wrap canvas { width: 100%; height: 100%; }
.canvas-small { height: 220px; }
.donut-layout { padding: 5px 18px 20px; }
.donut-wrap { position: relative; width: 170px; height: 170px; margin: 0 auto 18px; }
.donut-wrap canvas { width: 100%; height: 100%; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center small { font-size: 9px; }
.donut-center strong { max-width: 100px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.category-legend { display: flex; flex-direction: column; gap: 7px; }
.category-legend > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; }
.category-legend span { min-width: 0; display: flex; align-items: center; gap: 7px; color: #b4bdd0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-legend strong { font-size: 11px; }

.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 11px 15px; color: var(--muted-2); background: rgba(255,255,255,.02); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 9px; text-align: left; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.data-table td { padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,.055); vertical-align: middle; color: #c5ccdb; font-size: 12px; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(255,255,255,.018); }
.transaction-name { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.transaction-name > span:last-child { min-width: 0; }
.transaction-name strong, .transaction-name small { display: block; }
.transaction-name strong { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transaction-symbol { flex: 0 0 auto; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; font-weight: 900; }
.transaction-symbol .ui-icon { width:15px; height:15px; }
.transaction-symbol.income { color: var(--green); background: var(--green-soft); }
.transaction-symbol.expense { color: #f05d7b; background: var(--red-soft); }
.transaction-symbol.transfer { color: #91a8ff; background: rgba(90,125,255,.13); }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.row-actions form { margin: 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.tag, .status-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.055); color: #adb7ca; font-size: 9px; font-weight: 750; }
.status-badge.success, .status-badge.ok { color: #8ceab2; background: var(--green-soft); }
.status-badge.warning { color: #ffd36d; background: var(--yellow-soft); }
.status-badge.over { color: #ff8ba3; background: var(--red-soft); }
.status-badge.muted { color: var(--muted); }

.project-mini-list { padding: 0 16px 14px; }
.project-mini { display: block; padding: 12px 0; border-top: 1px solid var(--border); }
.project-mini:first-child { border-top: 0; }
.project-mini-head { display: flex; align-items: center; gap: 9px; }
.project-mini-head > div { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.project-mini-head b { color: var(--muted); font-size: 11px; }
.project-color { flex: 0 0 auto; display: block; width: 10px; height: 32px; border-radius: 8px; background: var(--project-color); }
.progress { height: 6px; margin: 10px 0 7px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.07); }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--progress-color, var(--yellow)); }
.progress.warning span { background: var(--yellow); }
.progress.over span { background: var(--red); }
.project-mini-foot, .project-card-foot, .budget-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; }
.project-card-foot a, .budget-card-foot a { color: #c2cad9; font-weight: 700; }

input, select, textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(5,11,25,.45); color: var(--text); outline: none; transition: border .15s ease, box-shadow .15s ease; }
input, select { height: 42px; padding: 0 12px; }
textarea { padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: rgba(245,177,20,.55); box-shadow: 0 0 0 3px rgba(245,177,20,.08); }
input:disabled { color: var(--muted); cursor: not-allowed; }
label { display: flex; flex-direction: column; gap: 6px; color: #b7c0d2; font-size: 11px; font-weight: 650; }
label small { font-weight: 400; }
.entity-form { padding: 4px 20px 20px; }
.form-panel { margin-bottom: 18px; border-color: rgba(245,177,20,.2); }
.narrow-panel { max-width: 760px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: span 4; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.form-section-title { grid-column: 1/-1; margin-top: 5px; color: var(--yellow); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.stack-form { display: flex; flex-direction: column; gap: 15px; }
.form-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.form-between a { color: #d5dbea; }
.check-line { flex-direction: row; align-items: center; }
.check-line input { width: 16px; height: 16px; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 55px; }
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--yellow); font-size: 10px; cursor: pointer; }
.check-card { flex-direction: row; align-items: center; min-height: 64px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.025); }
.check-card input { width: 18px; height: 18px; }
.check-card span { display: flex; flex-direction: column; }

.allocation-builder { margin-top: 18px; padding: 16px; border-radius: 14px; background: rgba(3,8,20,.27); border: 1px solid var(--border); }
.allocation-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.allocation-head h3 { margin: 0 0 2px; }
.allocation-head p { margin: 0; color: var(--muted); font-size: 11px; }
.allocation-rows { display: flex; flex-direction: column; gap: 8px; }
.allocation-row { display: grid; grid-template-columns: .85fr 1.1fr 1.25fr 1.15fr .85fr 1fr 34px; align-items: end; gap: 8px; padding: 10px; border-radius: 11px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.045); }
.allocation-row label { min-width: 0; font-size: 9px; }
.allocation-row input, .allocation-row select { height: 37px; padding: 0 9px; font-size: 11px; }
.allocation-summary { display: flex; justify-content: flex-end; gap: 22px; margin-top: 11px; color: var(--muted); font-size: 11px; }
.allocation-summary strong { margin-left: 5px; color: var(--text); }
.allocation-summary strong.invalid { color: #ff7792; }
.is-transfer .allocation-builder { display: none; }
.destination-field { display: none; }
.is-transfer .destination-field { display: flex; }

.filter-bar { display: flex; align-items: center; gap: 8px; padding: 14px; border-bottom: 1px solid var(--border); }
.filter-bar input, .filter-bar select { width: auto; min-width: 120px; height: 36px; font-size: 11px; }
.filter-search { position: relative; flex-direction: row; align-items: center; min-width: 180px; flex: 1; }
.filter-search span { position: absolute; left: 10px; z-index: 1; color: var(--muted); }
.filter-search input { width: 100%; padding-left: 30px; }
.pagination { display: flex; justify-content: center; gap: 5px; padding: 16px; border-top: 1px solid var(--border); }
.pagination a { display: grid; place-items: center; min-width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); }
.pagination a.active { color: var(--night); background: var(--yellow); border-color: var(--yellow); font-weight: 800; }

.account-grid, .project-grid, .budget-grid, .contact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.account-card, .project-card, .contact-card { position: relative; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg,var(--panel-soft),var(--panel)); overflow: hidden; }
.account-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--account-color); }
.account-card-top, .project-card-head, .contact-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.account-type-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--account-color); background:color-mix(in srgb,var(--account-color) 15%,transparent); }
.account-card h2, .project-card h2, .contact-card h2 { margin:4px 0; font-size:18px; }
.account-balance { display:block; margin:15px 0 20px; font-size:27px; letter-spacing:-.04em; }
.account-card-foot { display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid var(--border); color:var(--muted); font-size:10px; }
.archived { opacity:.52; }

.segmented-tabs { display:flex; gap:4px; padding:14px; border-bottom:1px solid var(--border); }
.segmented-tabs button { min-height:34px; padding:0 13px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; }
.segmented-tabs button.active { color:white; background:rgba(255,255,255,.07); }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--border); }
.category-item { display:flex; align-items:center; gap:12px; min-height:78px; padding:14px 17px; background:var(--panel); }
.category-item > div:nth-child(2) { min-width:0; flex:1; display:flex; flex-direction:column; }
.category-color { width:12px; height:42px; border-radius:7px; background:var(--category-color); }
.is-filtered-out { display:none!important; }

.project-card { --project-color:var(--yellow); }
.project-card h2 a:hover, .contact-card h2 a:hover { color:var(--yellow); }
.project-card p, .contact-card p { min-height:21px; color:var(--muted); }
.project-numbers, .contact-money { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.project-numbers div, .contact-money div { display:flex; flex-direction:column; padding:11px; border-radius:10px; background:rgba(255,255,255,.025); }
.project-numbers span, .contact-money small { color:var(--muted); font-size:9px; }
.progress-label { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
.project-card-foot { margin-top:17px; padding-top:13px; border-top:1px solid var(--border); }
.project-detail { padding-bottom:20px; }
.project-detail-head { display:flex; justify-content:space-between; align-items:center; padding:21px; border-bottom:1px solid var(--border); }
.project-detail-head > div:last-child { display:flex; gap:8px; align-items:center; }
.back-link { display:inline-block; margin-bottom:13px; color:var(--muted); font-size:11px; }
.project-title-line { display:flex; align-items:center; gap:12px; }
.project-title-line h2 { margin:2px 0 0; font-size:25px; }
.project-metrics, .contact-metrics, .report-metrics { margin:16px; }
.mini-stat { min-height:100px; display:flex; flex-direction:column; justify-content:center; padding:16px; border-radius:13px; background:rgba(255,255,255,.028); border:1px solid var(--border); }
.mini-stat > span { color:var(--muted); font-size:10px; }
.mini-stat strong { margin:5px 0 1px; font-size:20px; }
.split-detail { display:grid; grid-template-columns:.7fr 1.3fr; gap:18px; padding:0 20px; }
.detail-list { margin:0; }
.detail-list > div { padding:10px 0; border-bottom:1px solid var(--border); }
.detail-list dt { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.detail-list dd { margin:4px 0 0; color:#d6dcea; font-size:12px; }
.activity-list { display:flex; flex-direction:column; }
.activity-list > div { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.activity-list > div:last-child { border-bottom:0; }
.activity-list > div > span:nth-child(2) { min-width:0; flex:1; display:flex; flex-direction:column; }
.activity-list b { font-size:11px; }

.contact-grid { grid-template-columns:repeat(4,minmax(0,1fr)); padding:16px; }
.contact-card { padding:17px; }
.contact-card-head { margin-bottom:13px; }
.contact-meta { display:flex; flex-direction:column; gap:3px; min-height:39px; color:var(--muted); font-size:10px; }
.contact-detail { display:grid; grid-template-columns:320px minmax(0,1fr); gap:16px; }
.contact-detail-simple { display:grid; grid-template-columns:360px minmax(0,1fr); gap:16px; }
.contact-profile { padding:20px; }
.profile-hero { display:flex; align-items:center; gap:13px; margin:5px 0 20px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.profile-hero > div { min-width:0; flex:1; }
.profile-hero h2 { margin:6px 0 1px; }
.profile-hero p { margin:0; color:var(--muted); }
.two-panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.two-panel-grid .panel { padding-bottom:12px; }
.two-panel-grid .activity-list { padding:0 17px; }

.forecast-panel { margin-bottom:16px; }
.forecast-summary { display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--border); }
.forecast-summary > div { padding:11px; border-right:1px solid var(--border); display:flex; flex-direction:column; }
.forecast-summary > div:last-child { border-right:0; }
.forecast-summary span, .forecast-summary small { color:var(--muted); font-size:9px; }
.forecast-summary strong { margin:2px 0; font-size:12px; }
.budget-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.budget-card { padding:18px; }
.budget-card-head, .budget-amounts { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.budget-card-head h2 { margin:4px 0 18px; }
.budget-amounts > div { display:flex; flex-direction:column; }
.budget-amounts > div:last-child { align-items:flex-end; }
.budget-amounts span { color:var(--muted); font-size:9px; }
.budget-amounts strong { font-size:17px; }
.budget-card-foot { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }

.report-filter { padding:17px; }
.filter-submit { display:flex; align-items:flex-end; gap:7px; }
.report-metrics { margin:16px 0; }
.report-metrics .metric-card { min-height:115px; }

.audit-timeline { position:relative; padding:10px 24px 20px; }
.audit-timeline::before { content:""; position:absolute; top:22px; bottom:30px; left:31px; width:1px; background:var(--border-strong); }
.audit-item { position:relative; display:flex; gap:14px; padding:12px 0; }
.audit-dot { position:relative; z-index:1; flex:0 0 auto; width:15px; height:15px; margin-top:4px; border:4px solid var(--panel); border-radius:50%; background:var(--yellow); box-shadow:0 0 0 1px rgba(245,177,20,.3); }
.audit-main { min-width:0; flex:1; }
.audit-main > div:first-child { display:flex; align-items:center; gap:8px; }
.audit-main p { margin:2px 0; color:var(--muted); font-size:10px; }
.audit-main details { margin-top:7px; }
.audit-main summary { color:#b8c0d1; font-size:10px; cursor:pointer; }
.audit-json { display:grid; grid-template-columns:1fr 20px 1fr; align-items:center; gap:8px; margin-top:8px; }
.audit-json pre { max-height:180px; overflow:auto; margin:0; padding:10px; border-radius:8px; background:#070e1e; color:#b8c5db; font-size:9px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.settings-grid .panel { padding-bottom:20px; }
.settings-grid form, .settings-copy { padding:0 20px; }
.settings-copy p { color:var(--muted); }
.settings-wide { grid-column:1/-1; }

.is-hidden { display:none!important; }
.is-muted-field { opacity:.42; }
.status-badge.draft { color:#b8c1d2; }
.status-badge.sent, .status-badge.issued { color:#9bb0ff; background:rgba(90,125,255,.13); }
.status-badge.accepted, .status-badge.paid, .status-badge.partial { color:#8ceab2; background:var(--green-soft); }
.status-badge.rejected, .status-badge.cancelled, .status-badge.expired, .status-badge.overdue { color:#ff8ba3; background:var(--red-soft); }

.document-lines { margin:18px 0 0; padding:18px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,.018); }
.document-line { display:grid; grid-template-columns:minmax(230px,2.4fr) .65fr .8fr 1fr 1fr 36px; align-items:end; gap:9px; padding:10px 0; border-bottom:1px solid var(--border); }
.document-line:last-child { border-bottom:0; }
.document-line label { min-width:0; }
.line-total { min-height:64px; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; }
.line-total small { font-size:9px; }
.document-live-total { display:flex; justify-content:flex-end; align-items:center; gap:18px; padding-top:14px; color:var(--muted); }
.document-live-total strong { color:var(--yellow); font-size:20px; }
.document-detail { overflow:hidden; }
.document-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px; border-bottom:1px solid var(--border); }
.document-detail-head h2 { margin:4px 0; font-size:24px; }
.document-detail-head p { margin:0; color:var(--muted); }
.document-actions, .document-workflow, .document-workflow>div { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.document-metrics { margin:16px; }
.document-item-preview { margin:0 16px 16px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.document-workflow { justify-content:space-between; padding:16px 20px; border-top:1px solid var(--border); }
.document-payments { padding:0 20px 18px; }

.project-v2 { overflow:hidden; }
.project-finance-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 20px 18px; }
.finance-block { min-width:0; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.018); overflow:hidden; }
.finance-metrics { grid-template-columns:1fr 1fr; margin:0 16px 12px; }
.finance-metrics .mini-stat { min-height:90px; }
.finance-metrics-employee { grid-template-columns:repeat(3,1fr); }
.advance-explainer { display:flex; align-items:flex-start; gap:8px; margin:0 17px 12px; padding:10px 12px; border-radius:10px; color:#d7bd6c; background:var(--yellow-soft); font-size:10px; }
.advance-explainer .ui-icon { width:15px; height:15px; margin-top:1px; }
.dialog-note { margin:0; color:var(--muted); font-size:11px; }
.compact-alert { margin:0; padding:10px 12px; font-size:10px; }
.flow-history { padding:0 17px 16px; }
.flow-history h4 { margin:6px 0 7px; font-size:12px; }
.owner-gain { margin:0 17px 18px; padding:22px; border:1px solid rgba(245,177,20,.26); border-radius:12px; background:var(--yellow-soft); }
.owner-gain span, .owner-gain p { color:#dbc06e; }
.owner-gain strong { display:block; margin:4px 0; color:var(--yellow); font-size:29px; }
.owner-gain p { margin:0; font-size:11px; }
.project-secondary { padding:0 20px 18px; }
.padded-list { padding:0 17px 12px; }
.padded-list>a { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.padded-list>a>span:nth-child(2) { min-width:0; flex:1; display:flex; flex-direction:column; }
.padded-detail { padding:0 20px 12px; }
.time-panel { margin:0 20px 20px; }

/* Flat design: aplats francs, profondeur limitée et couleurs de marque. */
.panel, .metric-card, .account-card, .project-card, .contact-card, .auth-card { background:var(--panel); box-shadow:none; }
.metric-balance, .btn-primary, .brand-mark, .avatar, .auth-visual, .orb-one, .orb-two { background-image:none; box-shadow:none; }
.metric-balance, .btn-primary { background-color:var(--red); }
.nav-link.active { background:var(--red-soft); box-shadow:inset 3px 0 0 var(--red); }
.btn-primary:hover { background:var(--red); filter:brightness(1.08); }
.auth-visual { background-color:#101a33; }
.orb-one { background-color:var(--red); opacity:.52; }
.orb-two { background-color:var(--yellow); opacity:.76; }
.auth-visual::after { display:none; }

.search-page { padding-bottom:18px; }
.search-hero { display:flex; align-items:center; gap:10px; padding:20px; border-bottom:1px solid var(--border); }
.search-hero > span { font-size:23px; }
.search-hero input { flex:1; font-size:16px; }
.search-results { display:grid; grid-template-columns:repeat(3,1fr); }
.search-results section { padding:18px; border-right:1px solid var(--border); }
.search-results section:last-child { border-right:0; }
.commercial-search { grid-template-columns:repeat(3,1fr); }
.commercial-search section:nth-child(3n) { border-right:0; }
.commercial-search section:nth-child(n+4) { border-top:1px solid var(--border); }
.search-results h2 { display:flex; justify-content:space-between; font-size:15px; }
.search-results h2 span { color:var(--muted); }
.search-results a { display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid var(--border); }
.search-results a > span:nth-child(2) { min-width:0; flex:1; display:flex; flex-direction:column; }
.search-results a b { font-size:10px; }

.empty-state { min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; color:var(--muted); }
.empty-state.compact { min-height:180px; }
.empty-state h2, .empty-state h3 { color:var(--text); margin-bottom:5px; }
.empty-state p { max-width:440px; }
.empty-icon { display:grid; place-items:center; min-width:48px; height:48px; margin-bottom:12px; padding:0 9px; border-radius:14px; color:var(--yellow); background:var(--yellow-soft); font-weight:850; font-size:18px; }
.empty-icon .ui-icon { width:22px; height:22px; }
.empty-compact { padding:20px; color:var(--muted); text-align:center; }
.muted-row { opacity:.48; }

.app-dialog { width:min(560px,calc(100vw - 30px)); max-height:calc(100vh - 30px); padding:0; overflow:auto; border:1px solid var(--border-strong); border-radius:18px; background:var(--panel); color:var(--text); box-shadow:var(--shadow); }
.app-dialog::backdrop { background:rgba(3,7,17,.76); backdrop-filter:blur(4px); }
.dialog-card { display:flex; flex-direction:column; gap:14px; padding:4px 20px 20px; }
.dialog-card .panel-header { padding-left:0; padding-right:0; }
.dialog-card > p { margin:0; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }

.auth-body { background:radial-gradient(circle at 15% 15%,rgba(205,19,59,.12),transparent 35%),radial-gradient(circle at 85% 85%,rgba(245,177,20,.08),transparent 32%),#07101f; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr); }
.auth-visual { position:relative; display:flex; align-items:flex-end; overflow:hidden; padding:8vw; background:radial-gradient(circle at 28% 24%,rgba(205,19,59,.25),transparent 35%),radial-gradient(circle at 78% 78%,rgba(245,177,20,.14),transparent 35%),linear-gradient(145deg,#111d38,#080f20); }
.auth-visual::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 86%); }
.auth-visual-copy { position:relative; z-index:2; max-width:600px; }
.auth-visual-logo { display:block; width:min(390px,70%); height:auto; margin-bottom:44px; }
.auth-visual-copy h1 { margin:12px 0 18px; font-size:clamp(42px,5vw,72px); line-height:1.02; letter-spacing:-.055em; }
.auth-visual-copy p { max-width:500px; color:#aeb8cb; font-size:16px; }
.visual-orb { position:absolute; border-radius:50%; filter:blur(2px); }
.orb-one { width:180px; height:180px; top:16%; right:16%; background:linear-gradient(135deg,rgba(205,19,59,.82),rgba(205,19,59,.05)); box-shadow:0 30px 80px rgba(205,19,59,.2); }
.orb-two { width:80px; height:80px; top:12%; right:36%; background:linear-gradient(135deg,var(--yellow),rgba(245,177,20,.08)); }
.auth-panel { display:grid; place-items:center; min-height:100vh; padding:40px 20px; }
.auth-form-wrap { width:min(430px,100%); }
.account-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); font-size:12px; }
.account-tools a { color:var(--yellow); }
.account-reset { border:0; background:none; padding:5px 0; color:var(--text); cursor:pointer; }
.account-reset:hover { color:var(--yellow); }
.account-reset:disabled { opacity:.45; cursor:default; }
.auth-heading { margin-bottom:25px; }
.auth-heading h1, .auth-heading h2 { margin:7px 0 6px; font-size:31px; }
.auth-heading p { color:var(--muted); }
.installer-shell { min-height:100vh; display:grid; place-items:center; padding:32px 18px; background:radial-gradient(circle at 20% 10%,rgba(205,19,59,.16),transparent 30%),var(--night); }
.auth-card { width:min(650px,100%); padding:30px; border:1px solid var(--border); border-radius:22px; background:var(--panel); box-shadow:var(--shadow); }
.installer-card { width:min(760px,100%); }

@media (max-width: 1200px) {
  :root { --sidebar: 220px; }
  .nav-link { font-size:12px; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .commercial-metrics { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid, .dashboard-lower-grid { grid-template-columns:1fr; }
  .category-panel { min-height:auto; }
  .donut-layout { display:flex; align-items:center; gap:25px; }
  .donut-wrap { flex:0 0 170px; margin:0; }
  .category-legend { flex:1; }
  .allocation-row { grid-template-columns:repeat(3,1fr) 34px; }
  .allocation-row .allocation-remove { grid-column:4; grid-row:1; }
  .contact-grid { grid-template-columns:repeat(3,1fr); }
  .document-line { grid-template-columns:minmax(200px,2fr) .7fr .8fr 1fr 1fr 34px; }
}

@media (max-width: 900px) {
  :root { --sidebar: 260px; }
  .sidebar { transform:translateX(-102%); transition:transform .22s ease; box-shadow:var(--shadow); }
  body.sidebar-open .sidebar { transform:translateX(0); }
  .sidebar-overlay { position:fixed; inset:0; z-index:35; background:rgba(2,6,15,.7); }
  body.sidebar-open .sidebar-overlay { display:block; }
  .main-area { width:100%; margin-left:0; }
  .mobile-menu { display:block; }
  .content { padding:20px 18px 40px; }
  .topbar { padding:13px 18px; }
  .global-search { display:none; }
  .form-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .span-4 { grid-column:span 2; }
  .account-grid, .project-grid, .contact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-detail { grid-template-columns:1fr; }
  .contact-detail-simple { grid-template-columns:1fr; }
  .contact-profile { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .contact-profile .back-link { grid-column:1/-1; }
  .profile-hero { margin:0; border:0; padding:0; }
  .two-panel-grid { grid-template-columns:1fr; }
  .project-finance-columns { grid-template-columns:1fr; }
  .finance-metrics-employee { grid-template-columns:1fr 1fr; }
  .document-line { grid-template-columns:2fr 1fr 1fr; }
  .document-line .line-description { grid-column:span 2; }
  .document-line .icon-btn { justify-self:end; }
  .filter-bar { flex-wrap:wrap; }
  .filter-bar .filter-search { flex:1 1 100%; }
  .filter-bar input, .filter-bar select { flex:1; }
  .search-results { grid-template-columns:1fr; }
  .search-results section { border-right:0; border-bottom:1px solid var(--border); }
  .settings-grid { grid-template-columns:1fr; }
  .auth-shell { grid-template-columns:1fr; }
  .auth-visual { display:none; }
  .auth-panel { min-height:100vh; }
}

@media (max-width: 650px) {
  .topbar { min-height:72px; }
  .topbar-title .eyebrow { display:none; }
  .topbar-title h1 { font-size:18px; }
  .top-add { display:none; }
  .content { padding:16px 12px 34px; }
  .page-actions, .welcome-row { align-items:flex-start; }
  .page-actions { flex-direction:column; }
  .page-actions > div:last-child { width:100%; }
  .page-actions .btn { flex:1; }
  .metric-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .commercial-metrics { grid-template-columns:1fr 1fr; }
  .metric-card { min-height:124px; padding:14px; }
  .metric-card > strong { font-size:19px; }
  .dashboard-grid, .dashboard-lower-grid { gap:11px; }
  .chart-legend { display:none; }
  .canvas-wrap { height:235px; }
  .donut-layout { display:block; }
  .donut-wrap { margin:0 auto 18px; }
  .account-grid, .project-grid, .budget-grid, .contact-grid, .category-grid { grid-template-columns:1fr; }
  .category-grid { gap:1px; }
  .form-grid, .form-grid-4 { grid-template-columns:1fr; }
  .span-2, .span-4 { grid-column:span 1; }
  .allocation-head { align-items:flex-start; flex-direction:column; }
  .allocation-row { grid-template-columns:1fr 1fr; }
  .allocation-row .allocation-remove { grid-column:2; grid-row:1; justify-self:end; }
  .allocation-summary { flex-direction:column; align-items:flex-end; gap:3px; }
  .project-detail-head { align-items:flex-start; gap:15px; flex-direction:column; }
  .project-metrics { grid-template-columns:1fr 1fr; }
  .split-detail { grid-template-columns:1fr; }
  .contact-profile { display:block; }
  .contact-profile .profile-hero { margin:5px 0 20px; padding-bottom:18px; border-bottom:1px solid var(--border); }
  .forecast-summary { grid-template-columns:repeat(3,1fr); }
  .forecast-summary > div:nth-child(3) { border-right:0; }
  .report-filter { grid-template-columns:1fr 1fr; }
  .report-filter .filter-submit { grid-column:1/-1; }
  .audit-json { grid-template-columns:1fr; }
  .document-detail-head { flex-direction:column; }
  .document-actions { width:100%; }
  .document-line { grid-template-columns:1fr 1fr; }
  .document-line .line-description { grid-column:1/-1; }
  .document-line .line-total { align-items:flex-start; }
  .document-line .icon-btn { justify-self:end; }
  .project-finance-columns, .project-secondary { padding-left:12px; padding-right:12px; }
  .finance-metrics-employee { grid-template-columns:1fr; }
  .audit-json > span { transform:rotate(90deg); text-align:center; }
  .auth-panel { padding:25px 18px; }
  .auth-card { padding:22px 17px; }
}

@media (max-width: 410px) {
  .metric-grid { grid-template-columns:1fr; }
  .commercial-metrics { grid-template-columns:1fr; }
  .project-metrics, .contact-metrics { grid-template-columns:1fr; }
  .report-filter { grid-template-columns:1fr; }
}

@media print {
  .sidebar, .topbar, .page-actions, .filter-bar, .btn, .row-actions { display:none!important; }
  .main-area { margin:0; width:100%; }
  body, html { background:white; color:#111; }
  .panel, .metric-card { background:white; color:#111; border:1px solid #ddd; box-shadow:none; }
}

/* Confidentialité du solde et emails transactionnels */
.balance-privacy{display:flex;align-items:center;gap:12px}.balance-privacy strong{min-width:0}.balance-privacy .icon-btn{flex-shrink:0;color:inherit}.balance-privacy [hidden]{display:none!important}.email-template-tabs,.email-attachment-list{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.email-body-preview{white-space:pre-wrap;overflow-wrap:anywhere;padding:24px;background:var(--panel-soft);border:1px solid var(--border);border-radius:12px;margin:20px 0;line-height:1.8}.email-preview-box{margin:20px 0;border:1px solid var(--border);border-radius:12px;padding:16px}.email-preview-box summary{cursor:pointer}.email-preview-box [data-email-preview]{white-space:pre-wrap;padding-top:20px;line-height:1.8}.email-variable-list{margin:20px 0;padding:16px;border-left:3px solid #F5B114}.email-variable-list code{display:inline-block;font-size:12px;margin:3px;padding:4px;background:var(--panel-soft);border-radius:4px}.email-notify-options{padding:18px;margin:16px 0;border:1px solid var(--border);border-radius:12px;display:grid;gap:12px}.email-notify-options label{display:grid;gap:8px}.email-notify-options .checkbox-line{display:flex;align-items:center;gap:8px}.email-notify-options input[type=checkbox]{width:auto}.email-notify-options small{color:var(--muted);line-height:1.6}.email-composer textarea{min-height:280px}