:root { --ink:#15253f; --muted:#718096; --line:#e8edf4; --canvas:#f6f8fb; --blue:#3569e8; --violet:#7a57d1; --orange:#e8892e; --mint:#27a985; }
* { box-sizing:border-box; }
html,body { max-width:100%; overflow-x:hidden; } body { margin:0; color:var(--ink); background:var(--canvas); font-family:"DM Sans", sans-serif; font-size:14px; }
button, input { font:inherit; } button { cursor:pointer; } .app-shell { min-height:100vh; display:grid; grid-template-columns:256px minmax(0,1fr); overflow-x:clip; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:3; width:256px; display:flex; flex-direction:column; overflow:hidden; background:#fff; border-right:1px solid var(--line); padding:22px 14px 14px; }
.brand { padding:0 12px 22px; display:flex; align-items:center; gap:10px; font:800 20px/1 Manrope,sans-serif; letter-spacing:-.8px; }.brand>span:last-child span { color:var(--blue); }.brand-mark { display:grid; place-items:center; height:30px; width:30px; border-radius:9px; background:linear-gradient(135deg,#467aff,#315ec5); color:#fff; font-size:17px; }
nav { overflow:visible; } .nav-label, .eyebrow { margin:0; text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:1px; color:#a2adbd; }.nav-label { padding:12px 12px 6px; }.nav-link { display:flex; align-items:center; gap:12px; min-height:38px; padding:0 12px; margin:2px 0; border-radius:8px; color:#637189; font-weight:600; text-decoration:none; }.nav-link:hover { background:#f5f7fc; color:var(--blue); }.nav-link.active { color:var(--blue); background:#edf2ff; }.nav-icon { width:18px; text-align:center; color:currentColor; font-size:19px; }.nav-count { margin-left:auto; padding:2px 7px; border-radius:99px; color:var(--blue); background:#dfe8ff; font-size:11px; }.sidebar-footer { position:relative; margin-top:auto; border-top:1px solid var(--line); padding-top:12px; }.profile-card { width:100%; display:flex; align-items:center; text-align:left; gap:10px; padding:7px; border:0; border-radius:9px; background:transparent; color:var(--ink); }.profile-card:hover { background:#f6f8fc; }.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#dbe7ff; color:#3569e8; font-size:11px; font-weight:700; }.profile-card strong,.profile-card small { display:block; }.profile-card strong { font-size:12px; }.profile-card small { margin-top:2px; color:#96a0af; font-size:10px; }.more { margin-left:auto; color:#a5adba; letter-spacing:1px; }.profile-menu { position:absolute; right:0; bottom:calc(100% + 9px); left:0; z-index:15; padding:8px; border:1px solid #dce4ef; border-radius:10px; background:#fff; box-shadow:0 12px 28px rgb(19 38 69 / 16%); }.profile-menu[hidden] { display:none; }.profile-menu p { margin:4px 8px 7px; color:#98a4b5; font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }.profile-menu button { display:flex; align-items:center; gap:9px; width:100%; padding:9px; border:0; border-radius:7px; background:transparent; color:#40526b; font:700 11px "DM Sans",sans-serif; text-align:left; }.profile-menu button:hover { background:#eff4ff; color:#3569e8; }.profile-menu-icon { display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background:#eaf0ff; color:#3569e8; font-size:13px; }
main { grid-column:2; min-width:0; }.topbar { height:73px; display:flex; align-items:center; gap:20px; padding:0 42px; background:#fff; border-bottom:1px solid var(--line); }.global-search-wrap { position:relative; width:min(510px,60%); }.search { width:100%; height:38px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid #e5eaf2; border-radius:8px; background:#fafbfd; color:#99a4b5; }.search span { font-size:23px; transform:rotate(-18deg); }.search input { min-width:0; width:100%; border:0; outline:0; background:transparent; font-size:12px; color:var(--ink); }.search-suggestions { position:absolute; top:calc(100% + 6px); right:0; left:0; z-index:12; max-height:260px; overflow-y:auto; padding:5px; border:1px solid #dce4ef; border-radius:9px; background:#fff; box-shadow:0 12px 28px rgb(19 38 69 / 15%); }.search-suggestions[hidden] { display:none; }.search-suggestion { width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border:0; border-radius:6px; background:transparent; color:#354760; text-align:left; }.search-suggestion:hover,.search-suggestion:focus-visible { background:#f2f6ff; outline:0; }.search-suggestion strong,.search-suggestion small { display:block; }.search-suggestion strong { font-size:11px; }.search-suggestion small { margin-top:2px; color:#8a97aa; font-size:10px; }.suggestion-icon { display:grid; place-items:center; flex:none; width:27px; height:27px; border-radius:50%; background:#e9efff; color:#3569e8; font-size:10px; font-weight:800; }.topbar-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }.icon-button,.help-button,.mobile-menu { border:0; background:transparent; color:#6d7a8d; }.icon-button { position:relative; font-size:20px; }.notification-dot { position:absolute; top:3px; right:1px; width:6px; height:6px; border:1px solid #fff; border-radius:50%; background:#ef565e; }.help-button { padding:8px 12px; border-radius:7px; background:#f5f7fb; font-size:12px; font-weight:600; }.mobile-menu { display:none; font-size:20px; }
.content { max-width:1460px; padding:42px clamp(25px,4vw,66px) 60px; margin:auto; }.page-heading,.section-title,.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.page-heading h1 { margin:6px 0 4px; font:700 27px/1.2 Manrope,sans-serif; letter-spacing:-1.1px; }.page-heading h1 span { font-size:23px; }.subheading { margin:0; color:var(--muted); }.primary-button { display:inline-flex; align-items:center; gap:7px; padding:11px 16px; border:0; border-radius:8px; background:var(--blue); box-shadow:0 5px 10px rgb(53 105 232 / 16%); color:#fff; font-weight:700; font-size:12px; }.primary-button:hover { background:#2959ca; }.primary-button span { font-size:18px; line-height:11px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; margin:31px 0 38px; }.metric-card { min-height:133px; display:flex; gap:14px; align-items:flex-start; padding:20px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 2px 4px rgb(24 42 70 / 1%); }.metric-icon { display:grid; place-items:center; flex:none; width:35px; height:35px; border-radius:9px; font-size:19px; }.metric-blue .metric-icon { color:#396aef; background:#e8efff; }.metric-purple .metric-icon { color:#7956d4; background:#f1ecff; }.metric-orange .metric-icon { color:#e38228; background:#fff0df; }.metric-green .metric-icon { color:#1b9c79; background:#e5f7f1; }.metric-card p { margin:0 0 8px; color:#788498; font-size:11px; font-weight:600; }.metric-card strong { display:block; margin-bottom:7px; font:700 21px/1 Manrope,sans-serif; letter-spacing:-.7px; }.change { display:block; font-size:10px; font-weight:700; }.change em { margin-left:2px; font-style:normal; color:#9aa4b3; font-weight:500; }.positive { color:#1ba87b; }.neutral { color:#d9852c; }
.section-title { align-items:end; }.section-title h2,.panel h2 { margin:4px 0 0; font:700 17px/1.2 Manrope,sans-serif; letter-spacing:-.5px; }.action-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:14px; }.quick-action { display:flex; align-items:center; gap:11px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#fff; text-align:left; transition:transform .18s,box-shadow .18s; }.quick-action:hover { transform:translateY(-2px); box-shadow:0 7px 18px rgb(28 48 80 / 8%); }.action-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; font-size:17px; }.blue { background:#e8efff;color:#3569e8; }.violet { background:#f1ebff;color:#7956d4; }.amber { background:#fff0df;color:#df852c; }.mint { background:#e6f7f1;color:#22a27d; }.quick-action strong,.quick-action small { display:block; }.quick-action strong { font-size:11px; }.quick-action small { margin-top:3px; color:#98a3b2; font-size:9px; }.quick-action b { margin-left:auto; color:#a4adba; font-size:16px; font-weight:400; }
.dashboard-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-top:30px; }.panel { min-width:0; padding:22px; border:1px solid var(--line); border-radius:12px; background:#fff; }.text-button,.period-picker,.small-add { border:0; background:transparent; color:var(--blue); font-size:11px; font-weight:700; }.renewal-list { margin-top:14px; }.renewal-row { width:100%; display:grid; grid-template-columns:33px 1fr auto; align-items:center; gap:10px; min-height:55px; padding:0; border:0; border-bottom:1px solid #eff2f6; background:transparent; color:var(--ink); text-align:left; }.renewal-row:hover { background:#f6f8fd; }.renewal-row:last-child { border-bottom:0; }.customer-initials { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; font-size:9px; font-weight:700; }.cobalt{background:#dce7ff;color:#315ecb}.coral{background:#ffe7e1;color:#d6604d}.teal{background:#dff4ef;color:#218e73}.purple{background:#eee7ff;color:#7255bd}.renewal-row strong,.renewal-row small { display:block; }.renewal-row strong { font-size:11px; }.renewal-row small { margin-top:3px; color:#929dab; font-size:10px; }.date-tag { padding:5px 8px; border-radius:5px; background:#f2f4f8; color:#768197; font-size:10px; font-weight:600; }.row-menu { border:0; background:transparent; color:#b1b8c3; letter-spacing:1px; }.activity-panel { min-height:238px; }.timeline { list-style:none; margin:17px 0 0; padding:0; }.timeline li { position:relative; display:grid; grid-template-columns:9px 1fr auto; gap:10px; padding:0 0 16px; }.timeline li:not(:last-child)::after { position:absolute; left:4px; top:11px; bottom:0; width:1px; background:#e7ebf3; content:""; }.timeline-dot { z-index:1; width:9px; height:9px; margin-top:3px; border:2px solid #fff; border-radius:50%; }.blue-dot{background:#3569e8;box-shadow:0 0 0 2px #dce7ff}.mint-dot{background:#25a47d;box-shadow:0 0 0 2px #dff4ef}.orange-dot{background:#e8892e;box-shadow:0 0 0 2px #fff0df}.timeline strong { font-size:11px; }.timeline p { margin:3px 0 0; color:#8f9aaa; font-size:10px; }.timeline p b { font-weight:600; color:#6c7890; }.timeline time { color:#a1aab8; font-size:9px; }.customer-detail-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.danger-button { padding:10px 13px; border:1px solid #efc8c4; border-radius:8px; background:#fff7f6; color:#ba4f47; font-size:11px; font-weight:700; }.danger-button:hover { border-color:#d9827b; background:#fff0ef; }.danger-button:disabled { cursor:not-allowed; opacity:.55; }
dialog { width:min(420px,calc(100% - 36px)); padding:0; border:0; border-radius:14px; box-shadow:0 24px 70px rgb(10 27 55 / 25%); } dialog::backdrop { background:rgb(17 32 53 / 35%); }.dialog-close { float:right; border:0; background:transparent; color:#8490a2; font-size:22px; } dialog form { padding:27px; } dialog h2 { margin:5px 0 10px; font:700 20px Manrope,sans-serif; } dialog p:not(.eyebrow) { margin:0 0 22px; color:#66758b; line-height:1.5; }
@media (max-width:1120px) { .metric-grid,.action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-grid { grid-template-columns:1fr; }.activity-panel { grid-column:auto; }.appointments-panel { grid-column:auto; }.topbar { padding:0 30px; } }
@media (max-width:760px) { .app-shell { display:block; }.sidebar { transform:translateX(-100%); transition:transform .2s; box-shadow:12px 0 30px rgb(16 34 58 / 12%); }.sidebar.open { transform:translateX(0); }.sidebar::after { content:""; }.mobile-menu { display:block; }.topbar { height:64px; padding:0 18px; }.global-search-wrap { flex:1; width:auto; }.search { width:100%; }.help-button { display:none; }.content { padding:29px 18px 40px; }.page-heading { align-items:end; }.page-heading h1 { font-size:23px; }.primary-button { padding:10px 12px; white-space:nowrap; }.metric-grid,.action-grid { grid-template-columns:1fr; gap:10px; }.metric-grid { margin:24px 0 30px; }.metric-card { min-height:100px; }.dashboard-grid { margin-top:24px; gap:12px; }.panel { padding:18px; }.bar-chart { gap:12px; } }

.nav-link { width:100%; border:0; background:transparent; text-align:left; }
.import-menu-toggle .admin-badge { margin-left:auto; }.import-chevron { margin-left:2px; color:#97a3b5; font-size:16px; transition:transform .15s ease; }.import-menu-toggle[aria-expanded="true"] .import-chevron { transform:rotate(180deg); }.import-submenu { margin:1px 0 4px 18px; padding-left:8px; border-left:1px solid #e3e8f1; }.import-submenu[hidden] { display:none; }.import-submenu .nav-link { min-height:34px; padding-left:10px; color:#748196; font-size:12px; }.import-submenu .nav-icon { font-size:15px; }
.admin-badge { margin-left:auto; padding:2px 6px; border:1px solid #ddd2fb; border-radius:4px; color:#7654c8; background:#f4efff; font-size:9px; font-weight:700; }
.admin-import { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:20px; padding:16px 18px; border:1px solid #dfd4fb; border-radius:11px; background:linear-gradient(90deg,#fcfbff,#f5f2ff); }.admin-import>div { display:flex; align-items:center; gap:12px; }.admin-import h2 { margin:3px 0; font:700 14px Manrope,sans-serif; }.admin-import p:not(.eyebrow) { margin:0; color:#7b7890; font-size:11px; }.admin-lock { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:#e9e0ff; color:#7654c8; font-size:17px; }.secondary-button { display:inline-flex; align-items:center; gap:7px; padding:10px 13px; border:1px solid #dce3ee; border-radius:8px; background:#fff; color:#56677e; font-size:11px; font-weight:700; }.secondary-button:hover { border-color:#bfcbea; color:var(--blue); }.secondary-button span { font-size:15px; }
.dialog-intro { font-size:12px; }.file-drop { display:flex; flex-direction:column; align-items:center; gap:5px; padding:20px; border:1.5px dashed #bfcbed; border-radius:10px; background:#fafbff; color:#51627b; text-align:center; cursor:pointer; }.file-drop:hover { border-color:#6e8fee; background:#f5f7ff; }.file-drop span { color:#3569e8; font-size:22px; }.file-drop strong { font-size:12px; }.file-drop small,.file-name,.csv-format small { color:#93a0b2; font-size:10px; }.file-name { min-height:14px; margin:9px 0 0 !important; text-align:center; }.csv-format { display:flex; flex-direction:column; gap:6px; margin-top:15px; padding:12px; border-radius:8px; background:#f6f8fc; }.csv-format strong { font-size:10px; }.csv-format code { padding:7px; overflow:auto; border-radius:5px; background:#fff; color:#52647c; font:9px/1.4 monospace; white-space:nowrap; }.csv-preview { margin-top:15px; padding:11px; border:1px solid #dceade; border-radius:8px; background:#f4fbf7; color:#3d725e; font-size:11px; }.csv-preview.error { border-color:#f4d7d3; background:#fff5f4; color:#b65049; }.csv-preview strong { display:block; margin-bottom:3px; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:19px; }.primary-button:disabled { cursor:not-allowed; opacity:.45; box-shadow:none; }
@media (max-width:760px) { .admin-import { align-items:flex-start; flex-direction:column; } }

.empty-state { display:flex; min-height:218px; flex-direction:column; align-items:center; justify-content:center; padding:20px; color:#8f9aaa; text-align:center; }.empty-state[hidden] { display:none; }.empty-state span { display:grid; place-items:center; width:34px; height:34px; margin-bottom:9px; border-radius:9px; background:#f0f3f8; color:#91a0b3; font-size:17px; }.empty-state strong { color:#647187; font-size:11px; }.empty-state p { max-width:240px; margin:5px 0 0; color:#a0aab8; font-size:10px; line-height:1.5; }.empty-state.compact { min-height:150px; }.empty-chart { display:flex; min-height:135px; flex-direction:column; align-items:center; justify-content:center; margin-top:15px; border-bottom:1px solid #edf0f5; color:#a1aab8; text-align:center; }.empty-chart span { color:#c1cad7; font-size:21px; }.empty-chart p { margin:7px 0 14px; font-size:10px; }
.renewals-panel #renewals-empty[hidden] { display:none; }

.page-hidden { display:none; }.customer-directory { margin-top:29px; padding:0; overflow:hidden; }.customer-filters { display:flex; align-items:center; gap:10px; padding:18px; border-bottom:1px solid var(--line); }.customer-search { display:flex; align-items:center; gap:9px; flex:1; min-width:220px; height:39px; padding:0 12px; border:1px solid #dfe5ee; border-radius:8px; background:#fafbfd; color:#8d9bad; }.customer-search span { font-size:20px; transform:rotate(-18deg); }.customer-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:12px; }.filter-select { display:flex; align-items:center; gap:7px; color:#7f8a9a; font-size:11px; font-weight:700; }.filter-select select { min-width:130px; padding:10px 28px 10px 10px; border:1px solid #dfe5ee; border-radius:8px; background:#fff; color:#526077; font-size:11px; }.customer-list-meta { min-height:38px; padding:13px 18px 0; color:#8b97a7; font-size:11px; }.customer-table-wrap { overflow:auto; }.customer-table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; }.customer-table th { padding:11px 18px; border-bottom:1px solid var(--line); background:#fafbfd; color:#94a0b0; font-size:9px; letter-spacing:.6px; text-transform:uppercase; }.customer-table td { max-width:270px; padding:14px 18px; overflow:hidden; border-bottom:1px solid #eef1f5; color:#66758a; font-size:11px; text-overflow:ellipsis; }.customer-table tr:last-child td { border-bottom:0; }.customer-table .customer-name { color:#263750; font-weight:700; }.customer-table .muted-cell { color:#a6aeba; }.customers-empty { min-height:230px; }.customers-empty[hidden], .customer-table-wrap[hidden] { display:none; }
.mocca-filters { flex-wrap:wrap; }.mocca-filters .customer-search { flex:1 1 280px; }.customer-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-top:16px; }.customer-form-grid label { display:flex; flex-direction:column; gap:5px; color:#69768a; font-size:10px; font-weight:700; }.customer-form-grid input,.customer-form-grid select,.customer-form-grid textarea { width:100%; padding:9px 10px; border:1px solid #dfe5ee; border-radius:7px; background:#fff; color:var(--ink); font:11px "DM Sans",sans-serif; outline-color:#9bb5fa; }.customer-form-grid textarea { resize:vertical; }.form-wide { grid-column:1 / -1; }.marketing-options { display:flex; flex-wrap:wrap; gap:11px 16px; margin:17px 0 0; padding:11px; border:1px solid #e3e8f0; border-radius:8px; }.marketing-options legend { padding:0 4px; color:#8490a1; font-size:10px; font-weight:700; }.marketing-options label { display:flex; align-items:center; gap:5px; color:#617087; font-size:11px; }
.customer-row { cursor:pointer; }.customer-row:hover td,.customer-row:focus-visible td { background:#f4f7ff; }.customer-row:focus-visible { outline:2px solid #8eaffc; outline-offset:-2px; }.customer-profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:28px; }.profile-list { display:grid; grid-template-columns:130px 1fr; gap:10px 14px; margin:18px 0 0; }.profile-list dt { color:#8c97a6; font-size:11px; }.profile-list dd { margin:0; color:#354760; font-size:12px; font-weight:600; overflow-wrap:anywhere; }.customer-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; }.customer-actions h2 { margin:4px 0; font:700 15px Manrope,sans-serif; }.customer-actions p:not(.eyebrow) { margin:0; color:#8490a1; font-size:11px; }.customer-actions>div:last-child { display:flex; flex-wrap:wrap; gap:8px; }.customer-actions button:disabled { cursor:not-allowed; opacity:.6; }
.customer-tabs { display:flex; gap:4px; margin-top:25px; border-bottom:1px solid var(--line); overflow:auto; }.customer-tab { padding:11px 14px; border:0; border-bottom:2px solid transparent; background:transparent; color:#7d8a9d; font-size:12px; font-weight:700; white-space:nowrap; }.customer-tab.active { border-color:var(--blue); color:var(--blue); }.customer-tab-panel { margin-top:18px; }.customer-contract-list,.document-list { display:flex; flex-direction:column; gap:8px; }.customer-contract { width:100%; padding:13px; border:1px solid #dfe5ee; border-radius:8px; background:#fff; color:#34465f; text-align:left; font-size:12px; }.current-contract { border-color:#b9d5c9; background:#f5fbf7; }.historic-contract { opacity:.52; }.customer-contract:hover { border-color:#7fa4fa; }.document-upload { display:flex; align-items:center; gap:12px; }.document-upload .file-drop { flex:1; padding:13px; }.document-list { margin-top:16px; }.document-list a { padding:10px; border:1px solid #e0e6ef; border-radius:7px; color:#3569e8; font-size:12px; text-decoration:none; }
.import-option { display:flex; align-items:center; gap:8px; margin-top:14px; color:#56677e; font-size:11px; font-weight:700; }
.customer-contract-heading { align-items:center; margin-bottom:14px; }.customer-contract-heading .primary-button { flex:none; }.customer-contract-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; }.contract-visibility-toggle { display:inline-flex; align-items:center; gap:7px; color:#718096; font-size:10px; font-weight:700; white-space:nowrap; cursor:pointer; }.contract-visibility-toggle input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.contract-visibility-toggle i { position:relative; width:36px; height:20px; border:1px solid #cad5e5; border-radius:999px; background:#e8edf5; transition:background .16s,border-color .16s; }.contract-visibility-toggle i::after { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgb(26 50 82 / 24%); content:""; transition:transform .16s; }.contract-visibility-toggle input:checked + i { border-color:#3569e8; background:#3569e8; }.contract-visibility-toggle input:checked + i::after { transform:translateX(16px); }.contract-visibility-toggle input:focus-visible + i { outline:2px solid #8eaffc; outline-offset:2px; } dialog#contract-create-dialog { width:min(920px,calc(100% - 36px)); }.contract-create-grid { max-height:min(62vh,650px); padding-right:4px; overflow-y:auto; }.contract-create-grid label { min-width:0; }.tariff-search-field { position:relative; }.tariff-suggestions { top:calc(100% - 1px); }.tariff-suggestions .search-suggestion { align-items:flex-start; }.tariff-suggestions .suggestion-icon { border-radius:7px; }
.duplicate-customer-list { display:flex; flex-direction:column; gap:7px; max-height:210px; overflow-y:auto; margin-top:-8px; }.duplicate-customer { padding:10px; border:1px solid #e0e6ef; border-radius:8px; background:#fafbfe; }.duplicate-customer strong,.duplicate-customer small { display:block; }.duplicate-customer strong { color:#3d4f67; font-size:12px; }.duplicate-customer small { margin-top:3px; color:#8693a5; font-size:10px; }.customer-picker-search { display:flex; align-items:center; gap:8px; height:40px; padding:0 11px; border:1px solid #dfe5ee; border-radius:8px; color:#8d9bad; }.customer-picker-search span { font-size:19px; transform:rotate(-18deg); }.customer-picker-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:12px; }.customer-picker-suggestions { position:static; max-height:260px; margin-top:9px; box-shadow:none; }
.customer-contract-row { cursor:pointer; }.customer-contract-row.current-contract td { background:#f5fbf7; }.customer-contract-row.historic-contract td { color:#96a1b0; }.customer-contract-row:hover td,.customer-contract-row:focus-visible td { background:#edf3ff; }.customer-contract-row:focus-visible { outline:2px solid #8eaffc; outline-offset:-2px; } dialog#contract-edit-dialog { width:min(800px,calc(100% - 36px)); }.contract-edit-grid label:has(input[readonly]) input { background:#f5f7fa; color:#7b8798; }
.tariff-filters { flex-wrap:wrap; }.tariff-filters .customer-search { flex:1 1 280px; }.customer-form-grid .checkbox-field { flex-direction:row; align-items:center; align-self:end; gap:8px; min-height:38px; padding:0 2px; }
.reports-filters { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:27px; }.report-custom-range { display:flex; flex-wrap:wrap; align-items:end; gap:8px; }.report-custom-range label { display:flex; flex-direction:column; gap:5px; color:#7f8a9a; font-size:10px; font-weight:700; }.report-custom-range input { width:112px; padding:9px 10px; border:1px solid #dfe5ee; border-radius:8px; background:#fff; color:var(--ink); font-size:11px; outline-color:#9bb5fa; }.report-custom-range[hidden] { display:none; }.report-metrics { margin:20px 0; }.reports-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }.report-chart { display:flex; align-items:end; gap:12px; min-height:225px; margin-top:18px; padding:0 3px; border-bottom:1px solid #e7ecf3; overflow-x:auto; }.report-chart-column { display:flex; flex:1 0 45px; flex-direction:column; align-items:center; gap:7px; min-width:45px; height:205px; }.report-bars { position:relative; display:flex; align-items:end; justify-content:center; width:100%; height:175px; }.report-bars i { display:block; width:16px; min-height:3px; border-radius:4px 4px 0 0; }.commission-bar { background:linear-gradient(180deg,#5e8cff,#3569e8); }.report-chart-column>span { color:#8f9aaa; font-size:9px; white-space:nowrap; }.report-chart-tooltip { position:absolute; bottom:calc(100% + 7px); left:50%; z-index:1; padding:5px 7px; border-radius:5px; background:#15253f; color:#fff; font-size:10px; font-weight:700; opacity:0; pointer-events:none; transform:translateX(-50%) translateY(3px); transition:opacity .15s,transform .15s; white-space:nowrap; }.report-chart-tooltip::after { position:absolute; bottom:-4px; left:50%; width:8px; height:8px; background:#15253f; content:""; transform:translateX(-50%) rotate(45deg); }.report-chart-column:hover .report-chart-tooltip,.report-chart-column:focus-within .report-chart-tooltip { opacity:1; transform:translateX(-50%) translateY(0); }.reports-grid #report-providers-empty[hidden],.reports-grid #report-chart-empty[hidden] { display:none; }
@media (max-width:760px) { .customer-filters { align-items:stretch; flex-direction:column; }.customer-search { min-height:41px; }.filter-select { justify-content:space-between; }.filter-select select { flex:1; }.customer-directory { margin-top:22px; }.customer-table th,.customer-table td { padding-left:13px; padding-right:13px; } }
@media (max-width:560px) { .customer-form-grid { grid-template-columns:1fr; }.form-wide { grid-column:auto; }.customer-contract-heading { align-items:flex-start; flex-direction:column; } }
@media (max-width:760px) { .customer-profile-grid { grid-template-columns:1fr; }.customer-actions { align-items:flex-start; flex-direction:column; }.profile-list { grid-template-columns:110px 1fr; } }
@media (max-width:900px) { .reports-grid { grid-template-columns:1fr; } }
.invoice-items-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }.invoice-items-heading h3 { margin:0; font:700 13px Manrope,sans-serif; }.invoice-items { display:flex; flex-direction:column; gap:7px; margin-top:9px; }.invoice-item-row { display:grid; grid-template-columns:minmax(0,1fr) 74px 96px 68px 26px; gap:7px; align-items:center; }.invoice-item-row input,.invoice-item-row select,.invoice-notes textarea { width:100%; padding:9px 10px; border:1px solid #dfe5ee; border-radius:7px; background:#fff; color:var(--ink); font:11px "DM Sans",sans-serif; outline-color:#9bb5fa; }.invoice-notes { display:flex; flex-direction:column; gap:5px; margin-top:16px; color:#69768a; font-size:10px; font-weight:700; }.invoice-notes textarea { resize:vertical; } dialog#invoice-dialog { width:min(820px,calc(100% - 36px)); } #invoice-print { text-decoration:none; }
@media (max-width:620px) { .invoice-item-row { grid-template-columns:1fr 1fr; }.invoice-item-row input:first-child { grid-column:1 / -1; }.invoice-item-row .row-menu { justify-self:end; } }
.contract-filters { flex-wrap:wrap; }.contract-filters .customer-search { flex:1 1 300px; }.contract-bulk-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 18px; padding:10px 12px; border:1px solid #d7e2ff; border-radius:8px; background:#f4f7ff; color:#52647c; font-size:11px; font-weight:700; }.contract-bulk-actions[hidden] { display:none; }.customer-table input[type="checkbox"] { accent-color:#3569e8; }
.commission-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); margin:24px 0 0; }.commission-filters { flex-wrap:wrap; }.commission-filters .customer-search { flex:1 1 280px; }.filter-select input { width:112px; padding:10px; border:1px solid #dfe5ee; border-radius:8px; background:#fff; color:var(--ink); font-size:11px; outline-color:#9bb5fa; }
.page-heading-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.page-heading-actions .secondary-button { text-decoration:none; }.receipt-filters { flex-wrap:wrap; }.receipt-filters .customer-search { flex:1 1 280px; } dialog#receipt-dialog { width:min(620px,calc(100% - 36px)); }
dialog#offer-dialog { width:min(820px,calc(100% - 36px)); }
.auth-screen { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#15253f,#253d65); }.auth-card { width:min(440px,100%); padding:34px; border-radius:16px; background:#fff; box-shadow:0 28px 80px rgb(0 0 0 / 28%); }.auth-card .brand-mark { display:grid; place-items:center; width:42px; height:42px; margin-bottom:18px; border-radius:11px; background:#3569e8; color:#fff; font:800 22px Manrope,sans-serif; }.auth-card h1 { margin:4px 0 8px; font:800 24px Manrope,sans-serif; }.auth-card p { color:#6c7890; font-size:13px; line-height:1.5; }.auth-card form { display:flex; flex-direction:column; gap:13px; margin-top:24px; }.auth-card label { display:flex; flex-direction:column; gap:6px; color:#69768a; font-size:11px; font-weight:700; }.auth-card input { padding:11px; border:1px solid #dfe5ee; border-radius:8px; font:13px "DM Sans",sans-serif; }.auth-card .primary-button { justify-content:center; margin-top:4px; }.auth-message { min-height:22px; margin:16px 0 0; }.auth-message a { color:#3569e8; font-weight:700; }.settings-panel { margin-top:28px; }.settings-panel h2 { margin:4px 0 0; font:700 16px Manrope,sans-serif; }.settings-intro { max-width:560px; margin:10px 0 0; color:#7b889a; font-size:12px; line-height:1.55; }.theme-preferences { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-top:20px; }.theme-preference { position:relative; display:flex; align-items:center; gap:10px; min-height:82px; padding:13px; border:1px solid #dbe3ef; border-radius:10px; background:#fbfcfe; color:#4d5d74; cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; }.theme-preference:hover { border-color:#a8c0f4; background:#f4f7ff; }.theme-preference:has(input:checked) { border-color:#5d8aef; background:#edf3ff; box-shadow:0 0 0 2px rgb(93 138 239 / 12%); }.theme-preference input { position:absolute; width:1px; height:1px; opacity:0; }.theme-preference-icon { display:grid; place-items:center; flex:0 0 31px; width:31px; height:31px; border-radius:8px; background:#e6edff; color:#3569e8; font-size:17px; }.theme-preference strong,.theme-preference small { display:block; }.theme-preference strong { font-size:11px; }.theme-preference small { margin-top:4px; color:#8793a4; font-size:9px; line-height:1.35; }.user-management { margin-top:20px; }.user-management .panel-heading { padding:18px 18px 0; }.user-management .panel-heading h2 { margin:4px 0; font:700 16px Manrope,sans-serif; }
@media (max-width:620px) { .contract-bulk-actions { align-items:flex-start; flex-direction:column; } }
@media (max-width:760px) { .theme-preferences { grid-template-columns:1fr; } }
.theme-toggle { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #e0e6ef; border-radius:8px; background:#f7f9fc; color:#52647c; font-size:18px; line-height:1; transition:background .18s,color .18s,border-color .18s; }.theme-toggle:hover { border-color:#aebee0; background:#eef3ff; color:#3569e8; }.notification-button { display:grid; place-items:center; width:30px; height:34px; padding:0; }.notification-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.nav-icon { display:grid; place-items:center; }.nav-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }.import-submenu .nav-icon svg { width:15px; height:15px; }
.metric-icon svg,.action-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }.action-icon svg { width:17px; height:17px; }
html[data-theme="dark"] { color-scheme:dark; --ink:#e7edf8; --muted:#a7b4c7; --line:#2a3a52; --canvas:#111b2c; --blue:#78a0ff; }
html[data-theme="dark"] body { background:#111b2c; color:#e7edf8; }
html[data-theme="dark"] .sidebar,html[data-theme="dark"] .topbar,html[data-theme="dark"] .panel,html[data-theme="dark"] .metric-card,html[data-theme="dark"] .quick-action,html[data-theme="dark"] dialog,html[data-theme="dark"] .customer-contract,html[data-theme="dark"] .search-suggestions,html[data-theme="dark"] .tariff-suggestions,html[data-theme="dark"] .contract-bulk-actions { background:#172438; border-color:#2b3b53; color:#e7edf8; }
html[data-theme="dark"] .topbar { background:#172438; } html[data-theme="dark"] .sidebar { background:#142035; }
html[data-theme="dark"] .nav-link { color:#adbbcf; } html[data-theme="dark"] .nav-link:hover { background:#21324b; color:#9db8ff; } html[data-theme="dark"] .nav-link.active { background:#243a60; color:#a9c0ff; }
html[data-theme="dark"] .profile-card,html[data-theme="dark"] .search-suggestion,html[data-theme="dark"] .customer-contract { color:#e7edf8; } html[data-theme="dark"] .profile-card:hover,html[data-theme="dark"] .customer-row:hover td,html[data-theme="dark"] .customer-row:focus-visible td { background:#21324b; }
html[data-theme="dark"] .profile-menu { border-color:#33465f; background:#172438; } html[data-theme="dark"] .profile-menu button { color:#d6e0ee; } html[data-theme="dark"] .profile-menu button:hover { background:#223750; color:#fff; } html[data-theme="dark"] .profile-menu-icon { background:#243c61; color:#a9c2ff; }
html[data-theme="dark"] .search,html[data-theme="dark"] .customer-search,html[data-theme="dark"] .customer-picker-search,html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] .invoice-item-row input,html[data-theme="dark"] .invoice-item-row select,html[data-theme="dark"] .invoice-notes textarea { background:#111b2c; border-color:#354762; color:#e7edf8; }
html[data-theme="dark"] .search input,html[data-theme="dark"] .customer-search input,html[data-theme="dark"] .customer-picker-search input { color:#e7edf8; } html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder { color:#8291a8; }
html[data-theme="dark"] .customer-table th { background:#1b2a40; border-color:#2b3b53; color:#9eacc1; } html[data-theme="dark"] .customer-table td { border-color:#293a52; color:#c3cede; } html[data-theme="dark"] .customer-table .customer-name,html[data-theme="dark"] .profile-list dd { color:#edf3ff; }
html[data-theme="dark"] .help-button,html[data-theme="dark"] .theme-toggle { background:#223149; border-color:#344762; color:#c6d3e6; } html[data-theme="dark"] .help-button:hover,html[data-theme="dark"] .theme-toggle:hover { background:#2b4167; color:#fff; }
html[data-theme="dark"] .secondary-button { background:#203049; border-color:#3a4d68; color:#d2dcec; } html[data-theme="dark"] .secondary-button:hover { background:#293c5b; color:#fff; } html[data-theme="dark"] .danger-button { background:#3c262b; border-color:#72434a; color:#ffb9b3; }
html[data-theme="dark"] .contract-visibility-toggle { color:#b8c5d7; } html[data-theme="dark"] .contract-visibility-toggle i { border-color:#465a77; background:#263952; }
html[data-theme="dark"] .customer-contract.current-contract,html[data-theme="dark"] .customer-contract-row.current-contract td { background:#18352f; border-color:#315d54; } html[data-theme="dark"] .renewal-row { color:#e7edf8; border-color:#2a3a52; } html[data-theme="dark"] .renewal-row:hover { background:#21324b; }
html[data-theme="dark"] .metric-card p,html[data-theme="dark"] .quick-action small,html[data-theme="dark"] .subheading,html[data-theme="dark"] dialog p:not(.eyebrow),html[data-theme="dark"] .customer-list-meta { color:#aab7c9; }
html[data-theme="dark"] .settings-intro { color:#b0bdcf; } html[data-theme="dark"] .theme-preference { border-color:#354762; background:#1b2a40; color:#dbe5f3; } html[data-theme="dark"] .theme-preference:hover { border-color:#5d80bd; background:#223750; } html[data-theme="dark"] .theme-preference:has(input:checked) { border-color:#789fff; background:#243a60; box-shadow:0 0 0 2px rgb(120 159 255 / 16%); } html[data-theme="dark"] .theme-preference-icon { background:#29456f; color:#b6ccff; } html[data-theme="dark"] .theme-preference small { color:#a9b6c8; }
.customer-contract-bulk-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 13px; padding:10px 12px; border:1px solid #d7e2ff; border-radius:8px; background:#f4f7ff; color:#52647c; font-size:11px; font-weight:700; }.customer-contract-bulk-actions[hidden] { display:none; }.customer-contract-bulk-actions>div { display:flex; flex-wrap:wrap; gap:7px; }.contract-group-toggle { display:inline-flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:5px 4px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }.contract-group-toggle:hover .contract-group-chevron { border-color:#9ab8fb; background:#edf3ff; }.contract-group-toggle:focus-visible { outline:2px solid #8eaffc; outline-offset:2px; border-radius:9px; }.contract-group-chevron { display:grid; flex:0 0 30px; place-items:center; width:30px; height:30px; border:1px solid #d7e1f0; border-radius:9px; background:#fff; transition:background .15s,border-color .15s; }.contract-group-chevron::after { width:8px; height:8px; border-right:2px solid #54708f; border-bottom:2px solid #54708f; content:""; transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s; }.contract-group-toggle[aria-expanded="false"] .contract-group-chevron::after { transform:rotate(-45deg) translate(-1px,1px); }.contract-group-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.contract-table td:first-child,.contract-table th:first-child { width:38px; padding-right:5px; text-align:center; }.contract-table input[type="checkbox"] { accent-color:#3569e8; } html[data-theme="dark"] .customer-contract-bulk-actions { border-color:#344d70; background:#1a2b45; color:#c8d6ee; } html[data-theme="dark"] .contract-group-chevron { border-color:#3a4c67; background:#1b2a40; } html[data-theme="dark"] .contract-group-chevron::after { border-color:#b6c8e3; } @media (max-width:620px) { .customer-contract-bulk-actions { align-items:flex-start; flex-direction:column; } }
.contract-provider-row td { display:table-cell; }.contract-provider-controls { display:flex; align-items:center; gap:10px; width:100%; }.contract-provider-controls .contract-group-toggle { width:auto; flex:1; }.contract-provider-selector { appearance:none; display:grid; flex:0 0 22px; place-content:center; width:22px; height:22px; margin:0; border:1px solid #8ea2bc; border-radius:7px; background:#fff; cursor:pointer; transition:background .15s,border-color .15s; }.contract-provider-selector::after { width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; content:""; opacity:0; transform:rotate(45deg) translate(-1px,-2px); transition:opacity .12s; }.contract-provider-selector:hover { border-color:#527bc6; background:#f1f5ff; }.contract-provider-selector:checked { border-color:#3569e8; background:#3569e8; }.contract-provider-selector:checked::after { opacity:1; }.contract-provider-selector:indeterminate { border-color:#6b91df; background:#c9d9ff; }.contract-provider-selector:indeterminate::after { width:9px; height:2px; border:0; border-radius:2px; background:#3569e8; opacity:1; transform:none; }.contract-provider-selector:focus-visible { outline:2px solid #8eaffc; outline-offset:2px; }.contract-type-row td,.contract-provider-row td { cursor:pointer; }.contract-group-toggle { font-size:13px; font-weight:800; }.contract-type-row .contract-group-toggle { font-size:14px; }.contract-provider-selector { vertical-align:middle; }
.contract-status-row td { padding:14px 18px 7px; border-bottom:0; background:#fff; color:#52719e; font:800 10px Manrope,sans-serif; letter-spacing:.7px; text-transform:uppercase; }.contract-status-row.contract-status-inactive td { margin-top:8px; color:#8e98a7; } html[data-theme="dark"] .contract-status-row td { background:#172438; color:#a8c3f5; } html[data-theme="dark"] .contract-status-row.contract-status-inactive td { color:#a8b2c2; }
.energy-contract-table-row>td { padding:0 10px 12px; background:#f7f9fd; }.energy-contract-table-wrap { overflow-x:auto; border:1px solid #e0e7f1; border-radius:10px; background:#fff; }.energy-contract-table { width:100%; min-width:0; border-collapse:collapse; table-layout:fixed; text-align:left; }.energy-contract-table th { padding:8px 5px; border-bottom:1px solid #dfe6f0; background:#eef3fb; color:#71829a; font-size:8px; letter-spacing:.25px; line-height:1.2; text-transform:uppercase; }.energy-contract-table td { padding:8px 5px; overflow-wrap:anywhere; border-bottom:1px solid #edf1f6; color:#4f6077; font-size:10px; line-height:1.3; vertical-align:top; }.energy-contract-table th:nth-child(1) { width:8%; }.energy-contract-table th:nth-child(2) { width:17%; }.energy-contract-table th:nth-child(3) { width:4%; }.energy-contract-table th:nth-child(4) { width:9%; }.energy-contract-table th:nth-child(5) { width:5%; }.energy-contract-table th:nth-child(6) { width:5%; }.energy-contract-table th:nth-child(7) { width:6%; }.energy-contract-table th:nth-child(8) { width:11%; }.energy-contract-table th:nth-child(9) { width:7%; }.energy-contract-table th:nth-child(10),.energy-contract-table th:nth-child(11),.energy-contract-table th:nth-child(12) { width:5%; }.energy-contract-table th:nth-child(13) { width:8%; }.energy-contract-row { cursor:pointer; }.energy-contract-row:last-child td { border-bottom:0; }.energy-contract-row.current-contract td { background:#f2fbf6; }.energy-contract-row.historic-contract td { color:#97a2b2; }.energy-contract-row:hover td,.energy-contract-row:focus-visible td { background:#edf3ff; }.energy-contract-row:focus-visible { outline:2px solid #8eaffc; outline-offset:-2px; }.energy-object-cell { color:inherit; font-weight:800; }.energy-object-content { display:inline-flex; align-items:flex-start; gap:6px; }.energy-object-content .contract-selection-checkbox { flex:0 0 auto; width:15px; height:15px; margin:0; } html[data-theme="dark"] .energy-contract-table-row>td { background:#1b2b43; } html[data-theme="dark"] .energy-contract-table-wrap { border-color:#2c3d57; background:#172438; } html[data-theme="dark"] .energy-contract-table th { border-color:#2c3d57; background:#203149; color:#aebed3; } html[data-theme="dark"] .energy-contract-table td { border-color:#293a52; color:#c5d0df; } html[data-theme="dark"] .energy-contract-row.current-contract td { background:#18352f; } html[data-theme="dark"] .energy-contract-row:hover td,html[data-theme="dark"] .energy-contract-row:focus-visible td { background:#21324b; }
.customer-form-grid .business-customer-field[hidden],.customer-form-grid .private-customer-field[hidden] { display:none; }
.contract-group-row td { max-width:none; overflow:visible; text-overflow:clip; white-space:normal; }.contract-type-row td { padding:17px 18px 8px; border-bottom:0; background:#f7f9fd; color:#314f86; font:800 11px Manrope,sans-serif; letter-spacing:.45px; text-transform:uppercase; }.contract-provider-row td { padding:8px 18px; border-top:1px solid #e7ecf3; border-bottom:1px solid #e7ecf3; background:#fbfcfe; color:#65758d; font-size:10px; font-weight:800; }.contract-type-row:first-child td { padding-top:11px; }.contract-provider-row + .customer-contract-row td { border-top:0; } html[data-theme="dark"] .contract-type-row td { background:#1b2b43; color:#a9c0ff; } html[data-theme="dark"] .contract-provider-row td { border-color:#2b3c55; background:#17263b; color:#c2cede; } html[data-theme="dark"] .contract-provider-selector { border-color:#61738e; background:#22344e; } html[data-theme="dark"] .contract-provider-selector:hover { border-color:#93b3f6; background:#2b4264; } html[data-theme="dark"] .contract-provider-selector:checked { border-color:#78a0ff; background:#618cf0; } html[data-theme="dark"] .contract-provider-selector:indeterminate { border-color:#86a6e8; background:#47658f; }