:root {
  --bg:#f4f5f2;
  --paper:#fff;
  --ink:#202826;
  --muted:#858e89;
  --line:#e9ece7;
  --accent:#b95e2e;
  --accent-soft:#f8eee7;
  --green:#367c5b;
  --green-soft:#eaf3ed;
  --blue:#607da9;
  --blue-soft:#edf1f7;
  --amber:#a97837;
  --amber-soft:#f8f1e6;
  --red:#a4544d;
  --red-soft:#f8eceb;
  --shadow:0 8px 26px #27322b09
}
* {
box-sizing:border-box
}
body {
margin:0;
background:var(--bg);
color:var(--ink);
font:13px 'DM Sans',Arial,sans-serif
}
button,input,select,textarea {
font:inherit
}
button {
cursor:pointer
}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
outline:3px solid #b95e2e35;
outline-offset:2px
}
.sidebar {
position:fixed;
inset:0 auto 0 0;
width:244px;
background:#fff;
border-right:1px solid var(--line);
padding:25px 14px 0;
display:flex;
flex-direction:column;
z-index:5
}
.brand {
height:55px;
display:flex;
align-items:center;
gap:11px;
padding:0 10px;
margin-bottom:31px;
color:inherit;
text-decoration:none
}
.brand-logo {
width:36px;
height:38px;
object-fit:contain;
flex:none
}
.brand b {
font:800 17px Manrope,sans-serif;
letter-spacing:-.5px;
display:block
}
.brand small {
font-size:8px;
letter-spacing:1px;
color:#9ba29d;
display:block;
margin-top:4px
}
.side-caption,.eyebrow {
font-size:9px;
font-weight:700;
letter-spacing:1.15px;
color:#9ba29d
}
.side-caption {
padding:0 12px 10px
}
.nav {
display:grid;
gap:3px
}
.nav-link {
height:42px;
display:flex;
align-items:center;
gap:12px;
padding:0 12px;
border:0;
background:transparent;
border-radius:7px;
text-align:left;
color:#69736d;
font-size:12px
}
.nav-link:hover {
background:#f7f8f6
}
.nav-link.active {
background:#f8f0e9;
color:var(--accent);
font-weight:700
}
.nav-icon {
width:17px;
text-align:center;
font-size:16px
}
.nav-badge {
margin-left:auto;
color:#9ba29d;
font-size:10px
}
.sidebar-bottom {
margin-top:auto
}
.side-note {
display:flex;
gap:10px;
margin:0 3px 14px;
padding:13px;
background:#f7f8f6;
border-radius:8px
}
.side-note>span {
color:var(--accent);
font-size:17px
}
.side-note b {
font-size:10px
}
.side-note p {
font-size:9px;
line-height:1.5;
color:var(--muted);
margin:4px 0 0
}
.profile {
height:66px;
border-top:1px solid var(--line);
display:flex;
align-items:center;
gap:9px;
padding:0 5px
}
.profile-avatar {
height:31px;
width:31px;
display:grid;
place-items:center;
border-radius:50%;
background:#39433e;
color:white;
font-size:9px;
font-weight:700;
flex:none
}
.profile b {
font-size:10px;
display:block
}
.profile small {
font-size:9px;
color:#99a09b;
display:block;
margin-top:4px
}
.dots {
margin-left:auto;
color:#9da49f;
font-size:18px
}
.main {
margin-left:244px;
min-height:100vh
}
.topbar {
height:58px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 38px;
background:#fff;
border-bottom:1px solid var(--line)
}
.breadcrumb {
font-size:10px;
color:#9aa19c
}
.breadcrumb span {
padding:0 9px;
color:#c1c7c1
}
.breadcrumb b {
font-weight:600;
color:#4e5852
}
.top-actions {
display:flex;
align-items:center;
gap:13px
}
.today-label {
font-size:10px;
color:#818b84
}
.profile-avatar.small {
width:28px;
height:28px;
font-size:8px
}
.content {
max-width:1530px;
margin:auto;
padding:30px 38px 18px
}
.view {
display:none
}
.view.active {
display:block
}
.page-heading {
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:15px;
margin-bottom:23px
}
.eyebrow {
margin-bottom:8px
}
h1,h2,p {
margin-top:0
}
h1 {
font:700 25px Manrope,sans-serif;
letter-spacing:-.7px;
margin:0 0 5px
}
h2 {
font:700 14px Manrope,sans-serif;
letter-spacing:-.2px;
margin:0 0 4px
}
.subtitle {
font-size:11px;
color:var(--muted);
margin:0
}
.button {
height:38px;
padding:0 14px;
border-radius:6px;
font-size:10px;
font-weight:700;
white-space:nowrap
}
.primary {
background:var(--accent);
border:1px solid var(--accent);
color:white;
box-shadow:0 2px 5px #b95e2e1c
}
.primary:hover {
background:#a74e22
}
.secondary {
background:#fff;
border:1px solid var(--line);
color:#58635d
}
.danger {
background:var(--red-soft);
border:1px solid #eed5d2;
color:var(--red)
}
.text-button {
border:0;
background:none;
color:var(--accent);
font-size:10px;
font-weight:700
}
.text-button span {
padding-left:5px
}
.square-button {
height:29px;
width:30px;
border:1px solid var(--line);
background:#fff;
border-radius:5px;
color:#748078;
font-size:15px;
display:grid;
place-items:center
}
.square-button:hover,.outline-wide:hover {
border-color:#d7b49c;
color:var(--accent)
}
.stats-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin-bottom:15px
}
.stat-card {
padding:15px 16px;
background:white;
border:1px solid var(--line);
border-radius:8px;
min-height:102px;
box-shadow:var(--shadow)
}
.stat-label {
font-size:10px;
color:#808a83;
display:flex;
justify-content:space-between;
align-items:center
}
.stat-icon {
width:24px;
height:24px;
display:grid;
place-items:center;
border-radius:6px;
font-size:12px
}
.stat-icon.orange {
background:var(--accent-soft);
color:var(--accent)
}
.stat-icon.green {
background:var(--green-soft);
color:var(--green)
}
.stat-icon.blue {
background:var(--blue-soft);
color:var(--blue)
}
.stat-icon.amber {
background:var(--amber-soft);
color:var(--amber)
}
.stat-value {
font:700 21px Manrope,sans-serif;
letter-spacing:-.5px;
margin-top:9px
}
.stat-hint {
font-size:9px;
color:#9ba29d;
margin-top:3px
}
.overview-grid,.overview-bottom {
display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(280px,.9fr);
gap:13px;
margin-bottom:13px
}
.surface {
background:#fff;
border:1px solid var(--line);
border-radius:8px;
box-shadow:var(--shadow)
}
.overview-objects,.calendar-preview,.attention-card,.quick-card {
padding:17px
}
.section-heading {
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
margin-bottom:14px
}
.section-heading p {
font-size:10px;
color:#9aa19c;
margin:0
}
.compact-object-list {
display:grid;
gap:9px
}
.compact-object {
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:8px;
padding:11px 12px;
border:1px solid #eef0ed;
border-radius:7px;
cursor:pointer
}
.compact-object:hover,.object-card:hover {
border-color:#d8c3b4;
box-shadow:0 5px 16px #252e270b
}
.compact-title {
font-size:11px;
font-weight:700
}
.compact-meta {
font-size:9px;
color:#929b94;
margin-top:4px
}
.compact-right {
text-align:right
}
.compact-amount {
font-size:11px;
font-weight:700
}
.compact-progress {
height:3px;
width:85px;
background:#eef0ec;
border-radius:4px;
margin:7px 0 0 auto
}
.compact-progress i {
height:100%;
display:block;
background:#74a184;
border-radius:4px
}
.status {
display:inline-flex;
align-items:center;
gap:5px;
border-radius:30px;
padding:5px 8px;
font-size:8px;
font-weight:700;
white-space:nowrap
}
.status:before {
content:'';
height:5px;
width:5px;
border-radius:50%;
background:currentColor
}
.status.active {
color:var(--green);
background:var(--green-soft)
}
.status.planned {
color:var(--blue);
background:var(--blue-soft)
}
.status.done {
color:#68756d;
background:#eff2ef
}
.status.overdue {
color:var(--red);
background:var(--red-soft)
}
.upcoming-list {
display:grid;
gap:0
}
.upcoming-item {
display:grid;
grid-template-columns:42px 2px 1fr;
gap:10px;
padding:8px 0;
min-height:51px
}
.upcoming-time {
font-size:9px;
color:#939c95;
padding-top:1px
}
.upcoming-marker {
width:2px;
border-radius:3px;
background:#d18655
}
.upcoming-item b {
font-size:10px;
display:block
}
.upcoming-item small {
font-size:9px;
color:#939c95;
display:block;
margin-top:4px
}
.outline-wide {
width:100%;
height:32px;
margin-top:8px;
background:#fff;
border:1px solid var(--line);
border-radius:5px;
font-size:9px;
font-weight:700;
color:#747e77
}
.outline-wide span {
margin-left:5px;
color:var(--accent)
}
.attention-row {
display:flex;
align-items:center;
gap:10px;
padding:9px 0;
border-top:1px solid #f0f2ef
}
.attention-row:first-of-type {
border-top:0
}
.attention-mark {
width:7px;
height:7px;
border-radius:50%;
background:#d99754
}
.attention-row b {
font-size:10px;
display:block
}
.attention-row small {
font-size:9px;
color:#9ba29d;
display:block;
margin-top:4px
}
.attention-amount {
margin-left:auto;
font-size:10px;
font-weight:700
}
.quick-actions {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px
}
.quick-actions button {
min-height:84px;
padding:10px;
border:1px solid #eef0ed;
border-radius:7px;
background:#fff;
text-align:left;
color:#434d47
}
.quick-actions button:hover {
border-color:#d9b99f;
background:#fffdfa
}
.quick-actions button>span {
display:grid;
place-items:center;
height:22px;
width:22px;
border-radius:6px;
color:var(--accent);
background:var(--accent-soft);
font-size:13px;
margin-bottom:7px
}
.quick-actions b {
font-size:9px;
display:block
}
.quick-actions small {
font-size:8px;
color:#9aa19c;
display:block;
margin-top:4px
}
.toolbar {
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:14px
}
.segmented {
display:flex;
gap:3px;
padding:3px;
background:#ecefea;
border-radius:6px
}
.segmented button {
border:0;
background:transparent;
color:#79837c;
border-radius:4px;
font-size:9px;
padding:7px 10px;
white-space:nowrap
}
.segmented button.selected {
background:#fff;
color:#39423d;
box-shadow:0 1px 3px #202a2010;
font-weight:700
}
.search {
height:32px;
border:1px solid var(--line);
background:#fff;
border-radius:5px;
display:flex;
align-items:center;
padding:0 9px;
color:#98a19a;
font-size:17px
}
.search input {
width:200px;
border:0;
outline:0;
background:transparent;
font-size:10px;
color:#414b45
}
.search input::placeholder {
color:#adb4ae
}
.object-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:13px
}
.object-card {
background:#fff;
border:1px solid var(--line);
border-radius:9px;
padding:17px 18px;
cursor:pointer;
box-shadow:var(--shadow);
transition:box-shadow .16s,border-color .16s
}
.object-card-top {
display:flex;
justify-content:space-between;
gap:10px;
align-items:flex-start
}
.object-number {
font-size:8px;
letter-spacing:.7px;
font-weight:700;
color:#9ba29d
}
.object-title {
font:700 15px Manrope,sans-serif;
letter-spacing:-.2px;
margin:5px 0 3px
}
.object-client {
font-size:10px;
color:#7f8982
}
.object-divider {
height:1px;
background:#eff1ee;
margin:14px 0
}
.object-specs {
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
gap:8px
}
.spec-label {
font-size:8px;
color:#a0a7a1;
text-transform:uppercase;
letter-spacing:.45px
}
.spec-value {
font-size:10px;
color:#414b45;
font-weight:600;
margin-top:4px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.object-money {
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
gap:8px;
margin-top:15px;
padding:11px;
background:#f8f9f7;
border-radius:6px
}
.money-label {
font-size:8px;
color:#919b93
}
.money-value {
font:700 12px Manrope;
margin-top:4px;
white-space:nowrap
}
.money-value.muted {
color:#66716a
}
.payment-state {
font-size:8px;
color:var(--amber);
margin-top:4px
}
.payment-state.paid {
color:var(--green)
}
.payment-state.late {
color:var(--red)
}
.object-card-bottom {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-top:13px
}
.document-chips {
display:flex;
gap:5px;
overflow:hidden
}
.doc-chip {
font-size:8px;
color:#69746d;
background:#f0f2ef;
border-radius:4px;
padding:5px 7px;
white-space:nowrap
}
.doc-chip.empty {
color:#a2aaa3
}
.object-open {
font-size:9px;
color:var(--accent);
font-weight:700;
white-space:nowrap
}
.empty-state {
padding:35px 15px;
text-align:center;
color:#8d9790;
font-size:11px;
background:#fff;
border:1px dashed #dfe4dd;
border-radius:8px
}
.empty-state b {
display:block;
color:#465149;
font-size:12px;
margin-bottom:5px
}
.calendar-surface,.calendar-agenda,.list-surface {
padding:17px 18px;
margin-bottom:13px
}
.calendar-toolbar {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px
}
.month-control {
display:flex;
align-items:center;
gap:8px
}
.month-control h2 {
min-width:152px;
text-align:center;
margin:0;
font-size:13px
}
.today-button {
margin-left:7px
}
.calendar-legend {
display:flex;
gap:14px;
color:#8e9891;
font-size:9px
}
.calendar-legend span {
display:flex;
align-items:center;
gap:5px
}
.legend-dot {
height:6px;
width:6px;
border-radius:50%;
background:#6b8eae
}
.legend-dot.active-dot {
background:#67a17b
}
.calendar-grid {
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
border-top:1px solid var(--line);
border-left:1px solid var(--line)
}
.calendar-weekday {
min-height:27px;
background:#f8f9f7;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:7px;
font-size:8px;
color:#8e9891;
text-transform:uppercase;
letter-spacing:.4px
}
.calendar-day {
min-height:83px;
padding:7px;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
cursor:pointer;
background:#fff
}
.calendar-day:hover {
background:#fffdfa
}
.calendar-day.outside {
background:#fafbf9;
color:#bcc3bd
}
.calendar-day.selected {
box-shadow:inset 0 0 0 2px #c87545;
background:#fffaf6
}
.calendar-day.today .day-number {
color:var(--accent);
font-weight:800
}
.day-number {
font-size:9px;
color:#66716a
}
.day-events {
display:grid;
gap:3px;
margin-top:5px
}
.day-event {
padding:3px 4px;
border-radius:3px;
background:var(--blue-soft);
color:#526d97;
font-size:7px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.day-event.active-event {
background:var(--green-soft);
color:#397452
}
.agenda-item {
display:flex;
align-items:center;
gap:12px;
padding:12px 3px;
border-top:1px solid #eff1ee;
cursor:pointer
}
.agenda-item:hover {
background:#fcfcfa
}
.agenda-date {
width:42px;
text-align:center;
flex:none
}
.agenda-date b {
display:block;
font:700 17px Manrope
}
.agenda-date small {
font-size:8px;
color:#969f99
}
.agenda-info {
flex:1
}
.agenda-info b {
font-size:10px;
display:block
}
.agenda-info small {
font-size:9px;
color:#969f99;
display:block;
margin-top:4px
}
.agenda-item .status {
margin-left:auto
}
.small-stats {
grid-template-columns:repeat(3,1fr);
margin-bottom:14px
}
.estimate-row,.payment-row {
display:grid;
grid-template-columns:minmax(180px,1.4fr) minmax(115px,.8fr) minmax(100px,.7fr) minmax(100px,.75fr) auto;
gap:12px;
align-items:center;
padding:13px 0;
border-top:1px solid #eff1ee
}
.estimate-name b,.payment-person b {
font-size:10px;
display:block
}
.estimate-name small,.payment-person small {
font-size:9px;
color:#969f99;
display:block;
margin-top:4px
}
.list-meta-label {
font-size:8px;
color:#a0a8a1;
margin-bottom:4px
}
.list-meta-value {
font-size:9px;
color:#4b554e
}
.list-actions {
display:flex;
gap:5px
}
.icon-action {
height:27px;
min-width:28px;
padding:0 8px;
border:1px solid var(--line);
background:#fff;
border-radius:4px;
color:#6f7a72;
font-size:9px
}
.icon-action:hover {
color:var(--accent);
border-color:#d9b99f
}
.type-tag {
display:inline-block;
padding:4px 6px;
background:#f0f2ef;
color:#68736b;
border-radius:4px;
font-size:8px
}
.client-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:11px
}
.client-card {
padding:16px;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
box-shadow:var(--shadow)
}
.client-head {
display:flex;
gap:10px;
align-items:center
}
.client-avatar {
height:33px;
width:33px;
border-radius:8px;
display:grid;
place-items:center;
background:#f4e9df;
color:#9d5b32;
font-size:10px;
font-weight:700
}
.client-head b {
font-size:11px
}
.client-head small {
display:block;
font-size:9px;
color:#969f99;
margin-top:3px
}
.client-meta {
display:flex;
justify-content:space-between;
margin-top:14px;
padding-top:12px;
border-top:1px solid #eff1ee;
font-size:9px;
color:#8d9790
}
.client-meta b {
color:#465149
}
.modal-backdrop {
position:fixed;
inset:0;
background:#18211d75;
display:none;
align-items:center;
justify-content:center;
padding:20px;
z-index:20
}
.modal-backdrop.show {
display:flex
}
.modal {
position:relative;
background:#fff;
width:min(600px,100%);
max-height:min(90vh,850px);
overflow:auto;
border-radius:11px;
padding:25px;
box-shadow:0 20px 80px #15201830
}
.modal.wide {
width:min(850px,100%)
}
.modal-close {
position:absolute;
right:17px;
top:13px;
width:28px;
height:28px;
background:transparent;
border:0;
color:#89938c;
font-size:21px
}
.modal-kicker {
font-size:8px;
font-weight:700;
color:var(--accent);
letter-spacing:1.15px
}
.modal h2 {
font:700 20px Manrope;
margin:6px 0 4px
}
.modal-intro {
font-size:10px;
color:#949e96;
margin:0 25px 19px 0
}
.form-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:0 12px
}
.field {
display:block;
margin-bottom:12px
}
.field.full {
grid-column:1/-1
}
.field>span {
display:block;
font-size:9px;
color:#5d685f;
font-weight:700;
margin-bottom:5px
}
.field input,.field select,.field textarea {
width:100%;
height:35px;
border:1px solid #e4e9e3;
border-radius:5px;
padding:0 9px;
font-size:10px;
color:#39443c;
background:#fff
}
.field textarea {
height:65px;
resize:vertical;
padding:9px
}
.field input::placeholder,.field textarea::placeholder {
color:#b2bab3
}
.modal-actions {
display:flex;
justify-content:flex-end;
gap:7px;
margin-top:11px;
padding-top:13px;
border-top:1px solid #eff1ee
}
.line-items {
width:100%;
border-collapse:collapse;
margin:9px 0 12px
}
.line-items th {
text-align:left;
padding:6px 5px;
color:#909991;
font-size:8px;
border-bottom:1px solid var(--line)
}
.line-items td {
padding:5px 4px
}
.line-items input {
height:30px;
width:100%;
min-width:0;
border:1px solid #e5e9e4;
border-radius:4px;
padding:0 6px;
font-size:9px
}
.line-items .line-total {
white-space:nowrap;
font-size:9px;
font-weight:700;
padding:0 6px
}
.line-items .remove-line {
background:none;
border:0;
color:#a7afa8;
font-size:14px
}
.estimate-total {
display:flex;
justify-content:flex-end;
align-items:center;
gap:13px;
padding:9px 1px;
border-top:1px solid var(--line);
font-size:10px;
color:#6d786f
}
.estimate-total b {
font:700 17px Manrope;
color:#29342d
}
.add-line {
border:0;
background:none;
color:var(--accent);
font-size:9px;
font-weight:700;
padding:4px 0
}
.detail-header {
display:flex;
justify-content:space-between;
gap:14px;
align-items:flex-start
}
.detail-number {
font-size:8px;
font-weight:700;
letter-spacing:1px;
color:#99a19a
}
.detail-header h2 {
margin-top:5px
}
.detail-client {
font-size:10px;
color:#828c84
}
.detail-block {
border-top:1px solid #eff1ee;
padding:14px 0
}
.detail-block h3 {
font:700 10px Manrope;
margin:0 0 10px
}
.detail-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px
}
.detail-cell small {
font-size:8px;
color:#9ca59e;
display:block;
margin-bottom:4px
}
.detail-cell b {
font-size:10px
}
.detail-money {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
padding:12px;
background:#f7f8f6;
border-radius:6px
}
.detail-doc {
display:flex;
justify-content:space-between;
padding:8px 0;
border-top:1px solid #f0f2ef;
font-size:9px;
color:#566159
}
.detail-doc button {
border:0;
background:none;
color:var(--accent);
font-size:9px
}
.payment-change {
display:flex;
gap:7px;
align-items:end
}
.payment-change .field {
margin:0;
flex:1
}
.payment-change .button {
height:35px
}
.toast {
position:fixed;
left:50%;
bottom:24px;
transform:translate(-50%,15px);
opacity:0;
pointer-events:none;
background:#293a31;
color:#fff;
padding:11px 15px;
border-radius:7px;
z-index:30;
font-size:10px;
transition:.2s
}
.toast.show {
opacity:1;
transform:translate(-50%,0)
}
.footer {
display:flex;
justify-content:space-between;
padding:17px 0 2px;
font-size:8px;
color:#a5aca6
}
.estimate-print {
display:none
}
/* Visual direction adapted from the Fastrak logistics dashboard case study. */
:root {
--bg:#f2f5f9;
--ink:#202a38;
--muted:#7f8b9c;
--line:#e7ecf3;
--accent:#397fe5;
--accent-soft:#edf4ff;
--green:#369b75;
--green-soft:#eaf7f1;
--blue:#4d79cb;
--blue-soft:#edf3ff;
--amber:#bf8538;
--amber-soft:#fff4e4;
--red:#bd625b;
--red-soft:#fff0ef;
--shadow:0 5px 20px #2639550a
}
body {
background:var(--bg);
color:var(--ink)
}
.sidebar,.topbar,.surface,.stat-card,.object-card,.client-card {
background:#fff
}
.sidebar {
border-color:#e7ecf3
}
.brand b {
font-size:18px;
letter-spacing:-.65px
}
.side-caption,.eyebrow {
color:#8997aa;
letter-spacing:1.25px
}
.nav-link {
color:#66758a;
border-radius:8px
}
.nav-link.active {
background:#edf4ff;
color:#3375d5
}
.nav-link.active .nav-icon {
color:#397fe5
}
.main {
background:#f5f7fa
}
.topbar {
border-color:#e7ecf3
}
.breadcrumb {
color:#91a0b3
}
.content {
padding-top:33px
}
.page-heading {
margin-bottom:25px
}
h1 {
font-size:27px;
letter-spacing:-.9px;
color:#1f2b3b
}
h1 em {
font:italic 500 1.02em Georgia,'Times New Roman',serif;
letter-spacing:-1.1px;
color:#397fe5
}
.heading-spark {
font-family:Georgia,serif;
color:#73a4f2
}
.subtitle {
color:#8390a1
}
.primary {
background:#397fe5;
border-color:#397fe5;
box-shadow:0 4px 10px #397fe526
}
.primary:hover {
background:#2869cb
}
.text-button,.object-open,.add-line {
color:#3376d7
}
.square-button:hover,.outline-wide:hover,.icon-action:hover {
border-color:#a8c5f2;
color:#3275d8
}
.stat-card,.surface,.object-card,.client-card {
border-color:#e8edf4;
border-radius:10px;
box-shadow:0 5px 22px #2a416008
}
.stat-card {
min-height:110px;
padding:16px 18px
}
.stat-icon.orange {
background:#fff3e9;
color:#e09a57
}
.stat-icon.green {
background:#eaf7f1;
color:#369b75
}
.stat-icon.blue {
background:#edf4ff;
color:#397fe5
}
.stat-icon.amber {
background:#f3efff;
color:#8572cb
}
.stat-value {
color:#233046
}
.stat-hint,.section-heading p {
color:#8e9bad
}
.section-heading h2 {
color:#253247
}
.section-heading h2 em {
font:italic 500 1em Georgia,'Times New Roman',serif;
color:#397fe5
}
.overview-grid,.overview-bottom {
gap:15px
}
.overview-objects,.calendar-preview,.attention-card,.quick-card,.calendar-surface,.calendar-agenda,.list-surface {
padding:19px
}
.compact-object {
border-color:#edf0f5;
border-radius:8px
}
.compact-object:hover {
border-color:#c9daf6;
background:#fcfdff
}
.compact-title,.upcoming-item b {
color:#263349
}
.compact-meta,.upcoming-item small {
color:#8d9aab
}
.compact-progress i {
background:#4d8fe9
}
.status.active {
background:#eaf7f1;
color:#32956f
}
.status.planned {
background:#edf4ff;
color:#4b79c7
}
.status.done {
background:#f0f2f5;
color:#7b8796
}
.status.overdue {
background:#fff0ef;
color:#bd625b
}
.object-card {
padding:20px
}
.object-card:hover {
border-color:#c5d9f7;
box-shadow:0 10px 26px #30558a12
}
.object-title {
font-size:16px;
color:#223149
}
.object-number,.spec-label,.money-label,.list-meta-label {
color:#95a1b1
}
.object-divider {
background:#edf1f6
}
.object-money {
background:#f5f8fc;
border:1px solid #edf1f6
}
.money-value {
color:#26344a
}
.payment-state {
color:#c28a40
}
.payment-state.paid {
color:#32956f
}
.doc-chip {
background:#eff4fb;
color:#61738d;
border-radius:5px
}
.doc-chip.empty {
color:#98a5b5
}
.calendar-day {
min-height:88px;
border-color:#e8edf4
}
.calendar-day.selected {
box-shadow:inset 0 0 0 2px #4686e6;
background:#f8fbff
}
.calendar-day.today .day-number {
color:#397fe5
}
.day-event {
background:#edf4ff;
color:#4678c4
}
.day-event.active-event {
background:#eaf7f1;
color:#3e956f
}
.upcoming-marker {
background:#4787e6
}
.attention-mark {
background:#e7a34e
}
.quick-actions button {
border-color:#e9eef5;
border-radius:8px
}
.quick-actions button:hover {
border-color:#c6d9f6;
background:#f9fbff
}
.quick-actions button>span {
background:#edf4ff;
color:#397fe5
}
.outline-wide,.icon-action {
border-color:#e5eaf1
}
.segmented {
background:#edf1f6
}
.segmented button.selected {
color:#3477d9;
box-shadow:0 1px 4px #28405d16
}
.search {
border-color:#e5eaf1
}
.search:focus-within {
border-color:#98bbf2
}
.estimate-row,.payment-row {
border-color:#edf0f5
}
.client-avatar {
background:#edf4ff;
color:#397fe5
}
.client-meta {
border-color:#edf0f5
}
.type-tag,.doc-chip {
background:#f0f4f9;
color:#687991
}
.modal {
border-radius:12px
}
.modal h2 {
color:#233149
}
.field input:focus,.field select:focus,.field textarea:focus {
border-color:#86afea
}
.modal-kicker {
color:#397fe5
}
.estimate-total b {
color:#26364e
}
.print-head {
border-color:#397fe5
}
@media(max-width:540px) {
.stat-card {
  min-height:96px;
  padding:12px
}
.object-card {
padding:14px
}
.content {
padding-top:20px
}
}
@media(max-width:1120px) {
.sidebar {
  width:215px
}
.main {
margin-left:215px
}
.content {
padding:25px 23px
}
.topbar {
padding:0 23px
}
.stats-grid {
grid-template-columns:repeat(2,1fr)
}
.object-grid {
grid-template-columns:1fr
}
.client-grid {
grid-template-columns:repeat(2,1fr)
}
.estimate-row,.payment-row {
grid-template-columns:minmax(150px,1fr) 100px 90px 90px auto;
gap:8px
}
}
@media(max-width:790px) {
.sidebar {
  width:64px;
  padding:18px 7px
}
.brand {
justify-content:center;
padding:0;
margin:0 0 25px
}
.brand>span,.side-caption,.sidebar-bottom {
display:none
}
.brand-logo {
width:39px;
height:39px
}
.nav-link {
justify-content:center;
padding:0;
font-size:0
}
.nav-icon {
font-size:17px
}
.nav-badge {
display:none
}
.main {
margin-left:64px
}
.content {
padding:23px 17px
}
.topbar {
padding:0 17px
}
.overview-grid,.overview-bottom {
grid-template-columns:1fr
}
.quick-actions {
grid-template-columns:repeat(3,1fr)
}
.calendar-day {
min-height:66px;
padding:5px
}
.day-event {
font-size:6px
}
.estimate-row,.payment-row {
grid-template-columns:minmax(130px,1fr) 95px auto;
gap:9px
}
.estimate-row>:nth-child(3),.payment-row>:nth-child(3) {
display:none
}
.calendar-legend {
display:none
}
}
@media(max-width:540px) {
.content {
  padding:18px 11px
}
.topbar {
padding:0 11px
}
.today-label {
display:none
}
.page-heading {
align-items:flex-start
}
.page-heading h1 {
font-size:21px
}
.page-heading .button {
padding:0 9px;
font-size:9px
}
.subtitle {
font-size:10px;
line-height:1.5
}
.stats-grid {
gap:7px
}
.stat-card {
padding:11px;
min-height:91px
}
.stat-value {
font-size:18px
}
.stat-label {
font-size:9px
}
.stat-hint {
font-size:8px
}
.overview-objects,.calendar-preview,.attention-card,.quick-card,.calendar-surface,.calendar-agenda,.list-surface {
padding:13px
}
.quick-actions {
grid-template-columns:1fr
}
.quick-actions button {
min-height:auto;
display:grid;
grid-template-columns:24px 1fr;
column-gap:7px;
align-items:center
}
.quick-actions button>span {
grid-row:span 2;
margin:0
}
.quick-actions small {
margin-top:2px
}
.toolbar {
align-items:stretch;
flex-direction:column
}
.segmented {
width:max-content;
max-width:100%;
overflow:auto
}
.search input {
width:100%
}
.search {
width:100%
}
.object-grid,.client-grid {
grid-template-columns:1fr
}
.object-card {
padding:14px
}
.object-title {
font-size:13px
}
.object-specs {
grid-template-columns:1.1fr 1fr 1fr;
gap:5px
}
.spec-value {
font-size:9px
}
.object-money {
gap:5px;
padding:9px
}
.money-value {
font-size:10px
}
.calendar-toolbar {
align-items:flex-start;
gap:8px
}
.month-control {
gap:4px
}
.month-control h2 {
min-width:112px;
font-size:11px
}
.today-button {
display:none
}
.calendar-weekday {
padding:5px 2px;
text-align:center;
font-size:7px
}
.calendar-day {
min-height:53px;
padding:4px 2px
}
.day-number {
font-size:8px
}
.day-events {
gap:2px
}
.day-event {
font-size:0;
height:5px;
padding:0;
width:5px;
border-radius:50%;
background:#6b8eae
}
.day-event.active-event {
background:#67a17b
}
.agenda-item {
gap:7px
}
.agenda-date {
width:34px
}
.agenda-info b {
font-size:9px
}
.agenda-item .status {
font-size:7px;
padding:4px 6px
}
.estimate-row,.payment-row {
grid-template-columns:1fr auto;
gap:7px;
padding:11px 0
}
.estimate-row>:nth-child(2),.payment-row>:nth-child(2) {
display:none
}
.estimate-row .list-actions,.payment-row .list-actions {
grid-column:1/-1;
justify-content:flex-end
}
.estimate-row>:nth-child(3),.payment-row>:nth-child(3) {
display:block
}
.estimate-row>:nth-child(3) {
grid-column:1
}
.estimate-row>:nth-child(4) {
grid-column:2
}
.payment-row>:nth-child(3) {
grid-column:1
}
.payment-row>:nth-child(4) {
grid-column:2
}
.section-heading {
flex-wrap:wrap
}
.section-heading .segmented {
order:2
}
.modal {
padding:20px 15px
}
.form-grid {
grid-template-columns:1fr
}
.field.full {
grid-column:auto
}
.modal.wide {
width:100%
}
.line-items th {
font-size:7px
}
.line-items input {
font-size:8px;
padding:0 3px
}
.detail-grid {
grid-template-columns:repeat(2,1fr)
}
.detail-money {
grid-template-columns:1fr
}
.footer {
font-size:7px
}
.footer span:last-child {
display:none
}
}
@media print {
body {
  background:#fff
}
.sidebar,.topbar,.content,.modal-backdrop,.toast {
display:none!important
}
.estimate-print {
display:block!important;
padding:38px;
color:#202826;
font-family:Arial,sans-serif
}
.print-head {
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:2px solid #b95e2e;
padding-bottom:18px
}
.print-brand {
display:flex;
align-items:center;
gap:12px;
font-size:20px;
font-weight:700
}
.print-brand img {
width:48px;
height:48px;
object-fit:contain
}
.print-title {
text-align:right;
color:#707970;
font-size:12px
}
.print-title b {
display:block;
font-size:24px;
color:#202826;
margin-bottom:5px
}
.print-meta {
display:flex;
justify-content:space-between;
margin:26px 0
}
.print-to {
font-size:13px
}
.print-to small {
display:block;
color:#747d76;
margin-bottom:5px
}
.print-table {
width:100%;
border-collapse:collapse
}
.print-table th,.print-table td {
padding:10px;
border:1px solid #dfe4de;
text-align:left;
font-size:12px
}
.print-table th {
background:#f4f5f2
}
.print-total {
text-align:right;
font-size:22px;
font-weight:700;
margin:20px 0
}
.print-comment {
font-size:12px;
color:#69736c
}
.print-footer {
border-top:1px solid #dfe4de;
margin-top:50px;
padding-top:12px;
color:#7f8881;
font-size:10px
}
}
.action-launchpad {
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(250px,.9fr);
gap:12px;
margin:0 0 16px
}
.main-action {
min-height:104px;
display:flex;
align-items:center;
gap:15px;
padding:18px 20px;
text-align:left;
border:0;
border-radius:11px;
color:#fff;
background:linear-gradient(112deg,#3478df,#5596f2);
box-shadow:0 8px 20px #397fe52b;
transition:transform .16s,box-shadow .16s
}
.main-action:hover {
transform:translateY(-1px);
box-shadow:0 11px 25px #397fe53b
}
.main-action-icon {
height:46px;
width:46px;
display:grid;
place-items:center;
border-radius:12px;
background:#ffffff24;
font-size:27px;
font-weight:400;
flex:none
}
.main-action-copy {
display:grid;
gap:4px
}
.main-action-copy small {
font-size:8px;
font-weight:700;
letter-spacing:1.15px;
color:#d9e8ff
}
.main-action-copy b {
font:700 17px Manrope,sans-serif;
letter-spacing:-.25px
}
.main-action-copy em {
font-style:normal;
font-size:9px;
color:#e3edff
}
.main-action>strong {
margin-left:auto;
font-size:22px;
font-weight:400;
color:#dceaff
}
.secondary-actions {
display:grid;
gap:9px
}
.secondary-actions button {
min-height:47px;
display:flex;
align-items:center;
gap:10px;
padding:9px 12px;
background:#fff;
border:1px solid #e6ecf4;
border-radius:9px;
text-align:left;
color:#35435a;
box-shadow:0 4px 15px #2a416007
}
.secondary-actions button:hover {
border-color:#bed4f5;
background:#fbfdff
}
.secondary-action-icon {
height:29px;
width:29px;
display:grid;
place-items:center;
background:#edf4ff;
color:#397fe5;
border-radius:7px;
font-size:13px
}
.secondary-actions b {
font-size:10px;
display:block
}
.secondary-actions small {
font-size:8px;
color:#8c99ab;
display:block;
margin-top:3px
}
.secondary-actions i {
font-style:normal;
margin-left:auto;
color:#7e9ed0;
font-size:11px
}
.overview-bottom {
grid-template-columns:1fr
}
@media(max-width:790px) {
.action-launchpad {
  grid-template-columns:minmax(0,1.1fr) minmax(210px,.9fr)
}
}
@media(max-width:540px) {
.action-launchpad {
  grid-template-columns:1fr;
  gap:8px
}
.main-action {
min-height:86px;
padding:14px
}
.main-action-icon {
width:40px;
height:40px
}
.main-action-copy b {
font-size:15px
}
.secondary-actions {
grid-template-columns:1fr 1fr
}
.secondary-actions button {
padding:8px;
gap:7px
}
.secondary-actions small {
font-size:7px
}
.secondary-action-icon {
width:26px;
height:26px
}
}
/* Spacious document rows and quieter, branded upload control. */
.detail-doc {
min-height:61px;
display:flex;
align-items:center;
gap:14px;
padding:11px 14px;
margin:0 0 8px;
border:1px solid #e8edf4;
border-radius:8px;
background:linear-gradient(110deg,#fff,#fbfcfe);
color:#34425a;
font-size:11px;
transition:border-color .15s,box-shadow .15s
}
.detail-doc:hover {
border-color:#cbdcf5;
box-shadow:0 4px 13px #2b4c7b0a
}
.detail-doc .doc-name {
display:flex;
align-items:center;
gap:11px;
min-width:0
}
.detail-doc .doc-name i {
width:34px;
height:38px;
display:grid;
place-items:center;
flex:none;
border-radius:6px;
background:#edf4ff;
color:#3e7ed8;
font-size:8px;
font-style:normal;
font-weight:800;
letter-spacing:.3px
}
.detail-doc .doc-name b {
font-size:11px;
font-weight:600;
overflow-wrap:anywhere
}
.detail-doc .doc-origin {
margin-left:auto;
font-size:9px;
color:#9aa6b5;
white-space:nowrap
}
.detail-doc button {
margin-left:auto;
padding:8px 11px;
border:1px solid #dfe9f8;
border-radius:6px;
background:#f6f9ff;
color:#3979d4;
font-size:9px;
font-weight:700;
white-space:nowrap
}
.detail-doc button span {
font-size:12px;
margin-left:5px
}
.document-upload {
display:flex;
gap:9px;
align-items:stretch;
margin-top:12px
}
.file-picker {
min-width:0;
min-height:58px;
flex:1;
display:flex;
align-items:center;
gap:11px;
padding:9px 12px;
border:1px dashed #cdd9e9;
border-radius:8px;
background:#fafcff;
cursor:pointer;
transition:background .15s,border-color .15s
}
.file-picker:hover {
border-color:#83ace7;
background:#f5f9ff
}
.file-picker-icon {
width:34px;
height:34px;
display:grid;
place-items:center;
flex:none;
border-radius:7px;
background:#eaf2ff;
color:#397fe5;
font-size:17px
}
.file-picker-copy {
min-width:0
}
.file-picker-copy b {
display:block;
color:#35445d;
font-size:10px
}
.file-picker-copy small {
display:block;
margin-top:4px;
color:#8d9aae;
font-size:9px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.file-picker input {
position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none
}
.document-upload>.button {
min-height:58px;
height:auto;
padding:0 18px
}
.estimate-row,.payment-row {
min-height:78px;
padding:17px 4px;
gap:16px
}
.estimate-name b,.payment-person b {
font-size:11px
}
.estimate-name small,.payment-person small {
font-size:10px;
margin-top:6px
}
.list-meta-label {
font-size:9px;
margin-bottom:6px
}
.list-meta-value {
font-size:10px
}
.agenda-item {
min-height:70px;
padding:14px 8px;
border-radius:7px
}
.agenda-date b {
font-size:19px
}
.agenda-info b {
font-size:11px
}
.agenda-info small {
font-size:10px;
margin-top:6px
}
.compact-object {
min-height:63px;
padding:14px 15px
}
.compact-title {
font-size:12px
}
.compact-meta {
font-size:10px;
margin-top:6px
}
.upcoming-item {
min-height:61px;
padding:11px 0
}
.upcoming-item b {
font-size:11px
}
.upcoming-item small {
font-size:10px;
margin-top:5px
}
@media(max-width:540px) {
.detail-doc {
  min-height:57px;
  padding:9px;
  gap:7px
}
.detail-doc .doc-name {
gap:7px
}
.detail-doc .doc-name i {
width:30px;
height:34px
}
.detail-doc .doc-name b {
font-size:10px
}
.detail-doc .doc-origin {
display:none
}
.detail-doc button {
padding:7px;
font-size:8px
}
.document-upload {
gap:6px
}
.file-picker {
min-height:54px;
padding:7px
}
.file-picker-icon {
height:30px;
width:30px
}
.file-picker-copy small {
font-size:8px
}
.document-upload>.button {
min-height:54px;
padding:0 10px
}
.estimate-row,.payment-row {
min-height:68px;
padding:13px 2px;
gap:8px
}
.compact-object {
padding:11px;
min-height:58px
}
.agenda-item {
padding:12px 4px
}
}
/* Calendar: roomy month grid and a clear selected-day agenda. */
.calendar-layout {
display:grid;
grid-template-columns:minmax(0,1.8fr) minmax(300px,.85fr);
gap:16px;
align-items:start
}
.calendar-surface,.calendar-agenda {
padding:21px;
border-radius:12px
}
.calendar-agenda {
position:sticky;
top:74px;
min-height:290px
}
.calendar-toolbar {
margin-bottom:18px;
align-items:center
}
.month-control {
gap:10px
}
.month-control .square-button {
width:34px;
height:34px;
border-radius:8px;
font-size:18px
}
.month-control h2 {
min-width:180px;
font:italic 500 19px Georgia,'Times New Roman',serif;
letter-spacing:-.2px;
color:#26354c
}
.calendar-legend {
gap:17px;
font-size:10px;
color:#8190a4
}
.legend-dot {
width:8px;
height:8px
}
.calendar-grid {
grid-template-columns:repeat(7,minmax(0,1fr));
gap:5px;
border:0
}
.calendar-weekday {
min-height:30px;
display:flex;
align-items:center;
justify-content:center;
border:0;
background:transparent;
color:#8b98aa;
font-size:9px;
font-weight:700;
letter-spacing:.7px
}
.calendar-day {
min-width:0;
min-height:116px;
display:flex;
flex-direction:column;
align-items:stretch;
gap:8px;
padding:9px;
background:#fff;
border:1px solid #e9eef5;
border-radius:8px;
text-align:left;
transition:background .15s,border-color .15s,box-shadow .15s
}
.calendar-day:hover {
background:#f9fbff;
border-color:#c9daf4
}
.calendar-day.selected {
background:#f5f9ff;
border-color:#79a5e8;
box-shadow:0 0 0 1px #79a5e8
}
.calendar-day.outside {
background:#fafbfd;
border-color:#f0f2f6
}
.calendar-day.outside .day-number {
color:#b6c0cd
}
.day-number {
width:25px;
height:25px;
display:grid;
place-items:center;
border-radius:50%;
color:#506078;
font-size:11px;
font-weight:600
}
.calendar-day.today .day-number {
background:#397fe5;
color:#fff;
font-weight:700
}
.day-events {
display:grid;
align-content:start;
gap:5px;
margin:0;
min-width:0
}
.day-event {
position:relative;
display:block;
max-width:100%;
padding:6px 7px 6px 15px;
border-radius:5px;
background:#eff5ff;
color:#4776bb;
font-size:9px;
font-style:normal;
font-weight:600;
line-height:1.35;
white-space:normal;
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
text-overflow:ellipsis
}
.day-event:before {
content:'';
position:absolute;
left:6px;
top:9px;
width:4px;
height:4px;
border-radius:50%;
background:#5890e6
}
.day-event.active-event {
background:#eaf6f0;
color:#438467
}
.day-event.active-event:before {
background:#54a27d
}
.day-more {
padding-left:5px;
color:#7e8ea4;
font-size:8px;
font-weight:600
}
.calendar-agenda .section-heading {
padding-bottom:15px;
margin-bottom:2px;
border-bottom:1px solid #edf1f6
}
.calendar-agenda .section-heading h2 {
font:italic 500 18px Georgia,'Times New Roman',serif;
color:#2d3b52
}
.calendar-agenda .section-heading p {
font-size:9px;
color:#8190a4
}
.agenda-item {
min-height:83px;
gap:12px;
padding:14px 2px;
border-top:0;
border-bottom:1px solid #edf1f6;
border-radius:0
}
.agenda-mark {
width:37px;
height:37px;
display:grid;
place-items:center;
flex:none;
border-radius:9px;
background:#edf4ff;
color:#4782d7;
font-size:15px
}
.agenda-mark.is-active {
background:#eaf6f0;
color:#4b9874
}
.agenda-info {
min-width:0
}
.agenda-info b {
font-size:10px;
color:#2c394e;
line-height:1.4
}
.agenda-info small {
font-size:9px;
line-height:1.45;
color:#8794a7;
margin-top:4px
}
.agenda-info>span {
display:block;
font-size:8px;
color:#9ba7b6;
margin-top:5px
}
.agenda-item .status {
margin-left:auto;
align-self:flex-start
}
.calendar-agenda .empty-state {
margin-top:15px;
padding:25px 16px;
background:#f8faff;
border:1px dashed #dce6f4;
border-radius:8px;
font-size:10px;
line-height:1.6
}
@media(max-width:1200px) {
.calendar-layout {
  grid-template-columns:1fr
}
.calendar-agenda {
position:static
}
.calendar-day {
min-height:108px
}
}
@media(max-width:790px) {
.calendar-surface,.calendar-agenda {
  padding:16px
}
.calendar-day {
min-height:91px;
padding:7px
}
.calendar-grid {
gap:4px
}
.day-event {
font-size:8px;
padding:5px 5px 5px 13px
}
.day-event:before {
left:5px;
top:8px
}
}
@media(max-width:540px) {
.calendar-layout {
  gap:10px
}
.calendar-surface,.calendar-agenda {
padding:12px
}
.calendar-toolbar {
margin-bottom:12px
}
.month-control {
gap:5px
}
.month-control .square-button {
width:30px;
height:30px
}
.month-control h2 {
min-width:125px;
font-size:16px
}
.calendar-grid {
gap:3px
}
.calendar-weekday {
min-height:24px;
font-size:7px;
letter-spacing:.3px
}
.calendar-day {
min-height:69px;
padding:5px 3px;
gap:4px;
border-radius:6px
}
.day-number {
width:21px;
height:21px;
font-size:9px
}
.day-events {
gap:3px
}
.day-event {
width:auto;
height:auto;
padding:4px 3px;
border-radius:4px;
font-size:0;
line-height:0;
-webkit-line-clamp:1
}
.day-event:before {
position:static;
display:block;
width:5px;
height:5px;
margin:auto
}
.day-more {
font-size:7px;
padding:0;
text-align:center
}
.agenda-item {
min-height:76px;
gap:8px;
padding:12px 0
}
.agenda-mark {
height:32px;
width:32px
}
.agenda-info b {
font-size:9px
}
.agenda-info small {
font-size:8px
}
.agenda-info>span {
font-size:7px
}
.agenda-item .status {
font-size:7px;
padding:4px 6px
}
}
/* Object cards: stronger hierarchy and a dedicated customer contact block. */
.object-card {
min-height:310px;
display:flex;
flex-direction:column;
padding:22px 23px;
border-radius:12px
}
.object-card-top {
margin-bottom:16px;
align-items:flex-start
}
.object-title {
font-size:17px;
line-height:1.35;
max-width:450px;
margin-top:7px;
margin-bottom:0
}
.object-customer {
min-height:64px;
display:flex;
align-items:center;
gap:12px;
padding:10px 13px;
border:1px solid #eaf0f7;
border-radius:9px;
background:#f8faff
}
.object-customer-avatar {
height:40px;
width:40px;
display:grid;
place-items:center;
flex:none;
border-radius:10px;
background:linear-gradient(145deg,#e7f0ff,#d9e8ff);
color:#477fc8;
font:700 11px Manrope,sans-serif
}
.object-customer-info {
min-width:0;
display:grid;
gap:3px
}
.object-customer-info small {
color:#91a0b3;
font-size:7px;
font-weight:700;
letter-spacing:.9px
}
.object-customer-info b {
overflow:hidden;
color:#33445e;
font-size:10px;
font-weight:700;
text-overflow:ellipsis;
white-space:nowrap
}
.object-phone {
color:#8291a5;
font-size:9px;
white-space:nowrap
}
.customer-chevron {
margin-left:auto;
color:#98b2d8;
font-size:14px
}
.object-divider {
margin:17px 0 15px;
background:#edf1f6
}
.object-specs {
gap:12px
}
.object-specs>div {
min-width:0
}
.object-money {
margin-top:17px;
padding:13px 14px;
border-radius:9px
}
.object-card-bottom {
margin-top:auto;
padding-top:15px;
gap:10px
}
.document-chips {
min-width:0
}
.doc-chip {
max-width:170px;
overflow:hidden;
text-overflow:ellipsis
}
.object-open {
font-size:9px
}
@media(max-width:540px) {
.object-card {
  min-height:0;
  padding:16px
}
.object-card-top {
margin-bottom:12px
}
.object-title {
font-size:14px
}
.object-customer {
min-height:58px;
padding:8px 10px;
gap:9px
}
.object-customer-avatar {
height:35px;
width:35px
}
.object-customer-info b {
font-size:9px
}
.object-phone {
font-size:8px
}
.object-divider {
margin:13px 0
}
.object-money {
margin-top:13px;
padding:10px
}
.object-card-bottom {
padding-top:12px
}
}
/* Slightly larger type and controls across the whole workspace. */
body {
font-size:14px
}
.nav-link {
height:45px;
font-size:13px;
gap:13px
}
.brand b {
font-size:19px
}
.brand small {
font-size:9px
}
.side-caption,.eyebrow {
font-size:10px
}
.topbar {
height:61px
}
.breadcrumb,.today-label {
font-size:11px
}
.page-heading h1 {
font-size:29px
}
.subtitle {
font-size:12px
}
.button {
min-height:42px;
font-size:11px;
padding-left:16px;
padding-right:16px
}
.text-button {
font-size:11px
}
.square-button {
width:33px;
height:33px;
font-size:16px
}
.stat-card {
padding:17px 19px
}
.stat-label {
font-size:11px
}
.stat-value {
font-size:23px
}
.stat-hint {
font-size:10px
}
.stat-icon {
width:27px;
height:27px;
font-size:13px
}
.section-heading h2 {
font-size:15px
}
.section-heading p {
font-size:11px
}
.compact-title {
font-size:13px
}
.compact-meta {
font-size:11px
}
.status {
font-size:9px;
padding:6px 9px
}
.object-number {
font-size:9px
}
.object-title {
font-size:18px
}
.object-customer-info small {
font-size:8px
}
.object-customer-info b {
font-size:11px
}
.object-phone {
font-size:10px
}
.spec-label {
font-size:9px
}
.spec-value {
font-size:11px
}
.money-label {
font-size:9px
}
.money-value {
font-size:13px
}
.payment-state {
font-size:9px
}
.doc-chip {
font-size:9px;
padding:6px 8px
}
.object-open {
font-size:10px
}
.estimate-name b,.payment-person b {
font-size:12px
}
.estimate-name small,.payment-person small {
font-size:10px
}
.list-meta-label {
font-size:10px
}
.list-meta-value {
font-size:11px
}
.type-tag {
font-size:9px
}
.calendar-weekday {
font-size:10px
}
.day-number {
font-size:12px
}
.day-event {
font-size:10px
}
.day-more {
font-size:9px
}
.calendar-legend {
font-size:11px
}
.agenda-info b {
font-size:12px
}
.agenda-info small {
font-size:10px
}
.agenda-info>span {
font-size:9px
}
.detail-cell small {
font-size:9px
}
.detail-cell b {
font-size:11px
}
.detail-doc {
font-size:12px
}
.detail-doc .doc-name b {
font-size:12px
}
.detail-doc .doc-origin {
font-size:10px
}
.detail-doc button {
font-size:10px
}
.file-picker-copy b {
font-size:11px
}
.file-picker-copy small {
font-size:10px
}
.field>span {
font-size:10px
}
.field input,.field select,.field textarea {
font-size:11px;
min-height:38px
}
.line-items th {
font-size:9px
}
.line-items input {
font-size:10px;
min-height:33px
}
.client-head b {
font-size:12px
}
.client-head small,.client-meta {
font-size:10px
}
.footer {
font-size:9px
}
@media(max-width:790px) {
.nav-link {
  height:45px
}
.calendar-weekday {
font-size:9px
}
.day-event {
font-size:9px
}
}
@media(max-width:540px) {
body {
  font-size:13px
}
.page-heading h1 {
font-size:23px
}
.page-heading .button {
font-size:10px;
min-height:40px;
padding:0 11px
}
.subtitle {
font-size:11px
}
.stat-card {
padding:12px
}
.stat-label {
font-size:9px
}
.stat-value {
font-size:19px
}
.stat-hint {
font-size:9px
}
.section-heading h2 {
font-size:14px
}
.section-heading p {
font-size:10px
}
.object-title {
font-size:15px
}
.object-customer-info b {
font-size:10px
}
.object-phone {
font-size:9px
}
.spec-label,.money-label {
font-size:8px
}
.spec-value {
font-size:10px
}
.money-value {
font-size:11px
}
.status {
font-size:8px;
padding:5px 7px
}
.calendar-weekday {
font-size:8px
}
.day-number {
font-size:10px
}
.day-event {
font-size:0
}
.agenda-info b {
font-size:10px
}
.button {
font-size:10px
}
.detail-doc .doc-name b {
font-size:10px
}
.detail-doc button {
font-size:8px
}
.field>span {
font-size:9px
}
.field input,.field select,.field textarea {
font-size:10px
}
.footer {
font-size:8px
}
}
/* Branded estimate editor: clear sections, roomier rows and unit selectors. */
.estimate-modal-head {
display:flex;
gap:13px;
align-items:flex-start;
margin-bottom:19px;
padding-right:26px
}
.estimate-modal-icon {
width:42px;
height:42px;
display:grid;
place-items:center;
flex:none;
border-radius:11px;
background:#edf4ff;
color:#397fe5;
font-size:18px
}
.estimate-modal-head h2 {
font-size:22px;
margin:5px 0 5px
}
.estimate-modal-head .modal-intro {
margin:0;
max-width:620px;
font-size:11px;
line-height:1.55
}
.estimate-fields {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:2px 14px;
padding:15px 16px 3px;
margin-bottom:19px;
border:1px solid #e8eef6;
border-radius:10px;
background:#f8faff
}
.estimate-fields .field {
margin-bottom:12px
}
.estimate-fields .field>span,.estimate-comment>span {
font-size:10px
}
.estimate-fields .field>span small,.estimate-comment>span small {
font-weight:400;
color:#99a5b4;
font-size:9px
}
.estimate-fields input,.estimate-fields select {
height:40px;
border-color:#e3eaf4;
background:#fff;
border-radius:6px;
font-size:11px
}
.estimate-lines-heading {
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin:0 0 10px
}
.estimate-lines-heading h3 {
font:700 13px Manrope,sans-serif;
color:#293850;
margin:0 0 4px
}
.estimate-lines-heading p {
font-size:10px;
color:#8e9bad;
margin:0
}
.estimate-lines-heading .add-line {
padding:9px 12px;
border:1px solid #dce8fa;
border-radius:6px;
background:#f7faff;
font-size:10px;
white-space:nowrap
}
.estimate-table-wrap {
overflow-x:auto;
border:1px solid #e8edf4;
border-radius:9px;
background:#fff
}
.line-items {
min-width:720px;
margin:0;
border-collapse:separate;
border-spacing:0;
table-layout:fixed
}
.line-items th {
height:37px;
padding:8px 9px;
background:#f7f9fc;
border-bottom:1px solid #e9eef5;
color:#8694a7;
font-size:9px;
font-weight:700;
letter-spacing:.2px;
text-align:left
}
.line-items td {
height:58px;
padding:8px 7px;
border-bottom:1px solid #eff2f6
}
.line-items tbody tr:last-child td {
border-bottom:0
}
.line-items .item-description {
width:34%
}
.line-items .item-unit {
width:13%
}
.line-items .item-quantity {
width:17%
}
.line-items .item-price {
width:18%
}
.line-items .item-sum {
width:15%
}
.line-items input,.line-items select {
height:39px;
min-height:39px;
padding:0 9px;
border:1px solid #e3eaf3;
border-radius:6px;
background:#fff;
color:#39475d;
font-size:10px
}
.line-items input:focus,.line-items select:focus {
border-color:#8eb3ed;
outline:0;
box-shadow:0 0 0 3px #397fe514
}
.line-items .unit-select {
width:100%;
appearance:auto;
padding-right:5px;
color:#42638f;
background:#f8fbff;
font-weight:600
}
.line-items .line-total {
padding:8px 7px;
color:#33425a;
font:700 11px Manrope,sans-serif;
white-space:nowrap
}
.line-items .remove-line {
height:30px;
width:28px;
border:0;
border-radius:5px;
background:#f7f8fa;
color:#95a0af;
font-size:17px
}
.line-items .remove-line:hover {
background:#fff0ef;
color:#bd625b
}
.estimate-summary {
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
margin-top:13px;
padding:13px 16px;
border:1px solid #e5edf8;
border-radius:9px;
background:linear-gradient(110deg,#f8faff,#f2f7ff)
}
.discount-field {
display:flex;
align-items:center;
gap:10px;
margin:0
}
.discount-field>span {
margin:0;
color:#687990;
font-size:10px;
white-space:nowrap
}
.discount-field input {
width:115px;
height:36px;
min-height:36px;
border:1px solid #dfe8f4;
border-radius:6px;
background:#fff;
padding:0 10px;
font-size:11px
}
.estimate-final {
text-align:right
}
.estimate-final small {
display:block;
margin-bottom:4px;
color:#7f90a7;
font-size:8px;
font-weight:700;
letter-spacing:.7px
}
.estimate-final b {
font:700 21px Manrope,sans-serif;
color:#2b3d57
}
.estimate-comment {
margin:14px 0 0
}
.estimate-comment textarea {
height:65px;
min-height:65px;
line-height:1.5
}
.estimate-form-shell .modal-actions {
margin-top:17px
}
@media(max-width:700px) {
.estimate-modal-head {
  gap:10px
}
.estimate-fields {
grid-template-columns:1fr;
gap:0;
padding:13px 12px 2px
}
.estimate-lines-heading {
align-items:flex-start;
flex-direction:column
}
.estimate-summary {
align-items:flex-end
}
.discount-field {
align-items:flex-start;
flex-direction:column;
gap:5px
}
.discount-field input {
width:100px
}
}
.print-logo-fallback {
width:48px;
height:48px;
display:grid;
place-items:center;
flex:none;
border-radius:9px;
background:#edf4ff;
color:#397fe5;
font:800 14px Manrope,sans-serif
}
@page {
size:A4 portrait;
margin:14mm
}
@media print {
html,body {
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  overflow:visible!important
}
body>.estimate-print {
position:relative!important;
display:block!important;
visibility:visible!important;
width:100%!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
break-before:avoid!important;
page-break-before:avoid!important;
color:#202826!important
}
body>.sidebar,body>.main,body>.modal-backdrop,body>.toast {
display:none!important
}
.estimate-print * {
visibility:visible!important;
box-shadow:none!important
}
.print-head,.print-meta,.print-total,.print-footer {
break-inside:avoid;
page-break-inside:avoid
}
.print-head {
margin-top:0;
border-bottom-color:#397fe5
}
.print-brand img {
display:block;
width:48px;
height:48px;
object-fit:contain;
background:transparent!important;
mix-blend-mode:multiply;
print-color-adjust:exact;
-webkit-print-color-adjust:exact
}
.print-table {
break-inside:auto;
page-break-inside:auto
}
.print-table tr {
break-inside:avoid;
page-break-inside:avoid
}
.print-table th {
background:#f2f6fc!important;
print-color-adjust:exact;
-webkit-print-color-adjust:exact
}
}

.employee-card {
  display:flex;
  flex-direction:column;
  min-height:190px;
  cursor:pointer;
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.employee-card:hover,.employee-card:focus-visible {
  transform:translateY(-2px);
  border-color:#b6cff5;
  box-shadow:0 10px 24px #26395512;
  outline:none;
}
.employee-contact {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:16px;
  color:var(--muted);
  font-size:11px;
}
.employee-contact b {
  color:var(--ink);
  font-weight:600;
}
.employee-card .client-meta {
  margin-top:auto;
}
.employee-card-hint {
  display:flex;
  justify-content:space-between;
  margin-top:14px;
  color:var(--blue);
  font-size:11px;
  font-weight:700;
}
.employee-card-hint i {font-style:normal;font-size:16px}
.employee-actions {
  display:grid;
  grid-template-columns:minmax(0,1fr) 245px;
  gap:12px;
  margin-bottom:18px;
}
.employee-primary-action {width:100%;min-height:92px}
.employee-add-action {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:var(--ink);
  font:700 12px Manrope,sans-serif;
  box-shadow:var(--shadow);
}
.employee-add-action span {font-size:20px;color:var(--blue)}
.employee-add-action:hover {border-color:#b6cff5;background:#f9fbff}
.employee-detail-heading {display:flex;align-items:center;gap:14px;margin-bottom:18px}
.employee-detail-heading .client-avatar {width:48px;height:48px;border-radius:12px;font-size:15px;flex:none}
.employee-detail-heading h2 {font-size:20px;margin:0 0 4px}
.employee-detail-heading p {margin:0;color:var(--muted);font-size:12px}
.employee-detail-contact {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;padding:14px;border:1px solid var(--line);border-radius:9px}
.employee-detail-contact div {display:grid;gap:5px;min-width:0}
.employee-detail-contact small {color:var(--muted);font-size:10px}
.employee-detail-contact b {font-size:12px;overflow-wrap:anywhere}
.employee-detail-stats {grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:22px}
.employee-detail-stats .stat-card {padding:13px;min-width:0}
.employee-detail-stats .stat-value {font-size:18px}
.employee-history .section-heading {margin-bottom:10px}
.employee-history .section-heading h3 {font:700 14px Manrope,sans-serif;margin:0 0 4px}
.employee-history-row {padding:14px 0;border-top:1px solid var(--line)}
.employee-history-head,.employee-history-amounts {display:flex;align-items:center;justify-content:space-between;gap:10px}
.employee-history-head>div {display:grid;gap:4px;min-width:0}
.employee-history-head b {font-size:12px}
.employee-history-head small {color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.employee-history-amounts {justify-content:flex-start;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:10px}
.employee-history-amounts span {display:flex;gap:5px}
.employee-history-amounts b {color:var(--ink)}
.employee-field {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.employee-field button {
  min-height:38px;
  white-space:nowrap;
}
.employee-picker {
  display:grid;
  gap:5px;
  max-height:210px;
  overflow:auto;
  margin-top:8px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.employee-picker[hidden] {
  display:none;
}
.employee-option {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px;
  border:0;
  border-radius:6px;
  background:transparent;
  text-align:left;
}
.employee-option:hover {
  background:var(--accent-soft);
}
.employee-option span:last-child {
  display:grid;
  gap:3px;
}
.employee-option small,.employee-picker-empty {
  color:var(--muted);
  font-size:11px;
}
.employee-picker-empty {
  margin:6px;
}
@media(max-width:540px) {
  .employee-actions {grid-template-columns:1fr}
  .employee-primary-action {min-height:82px}
  .employee-add-action {min-height:48px}
  .employee-field {
    grid-template-columns:1fr;
  }
  .employee-detail-contact,.employee-detail-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
  .employee-detail-stats .stat-card {padding:10px}
  .employee-detail-stats .stat-value {font-size:15px}
  .employee-history-head {align-items:flex-start}
}

.payment-row {
  grid-template-columns:minmax(0,1.5fr) minmax(170px,1fr) minmax(140px,.8fr) minmax(145px,.8fr) 250px;
  grid-template-areas:"person type date due actions";
}
.payment-row>* {min-width:0}
.payment-row .payment-person {grid-area:person}
.payment-row .payment-type {grid-area:type;min-width:0}
.payment-row .payment-date {grid-area:date}
.payment-row .payment-due {grid-area:due}
.payment-row .list-actions {grid-area:actions;align-items:center}
.payment-row .type-tag {max-width:100%;white-space:normal;line-height:1.3}
@media(max-width:1120px) {
  .payment-row {
    grid-template-columns:minmax(0,1.4fr) minmax(135px,1fr) minmax(100px,.75fr) minmax(120px,.85fr) 205px;
    gap:9px;
  }
}
@media(max-width:790px) {
  .payment-row {
    grid-template-columns:minmax(0,1fr) minmax(125px,.9fr) minmax(115px,.8fr) 210px;
    grid-template-areas:"person type due actions";
    gap:8px;
  }
  .payment-row .payment-date {display:none}
  .payment-row .payment-type {display:block}
}
@media(max-width:540px) {
  .payment-row {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"person due" "type type" "date date" "actions actions";
    gap:7px 10px;
    padding:13px 2px;
  }
  .payment-row .payment-type,.payment-row .payment-date {
    display:flex;
    align-items:center;
    gap:7px;
  }
  .payment-row .payment-type .list-meta-label,.payment-row .payment-date .list-meta-label {
    margin:0;
  }
  .payment-row .payment-type .type-tag {font-size:9px}
  .payment-row .list-actions {justify-content:flex-end}
}

body.auth-pending .sidebar,body.auth-pending .main,body.auth-locked .sidebar,body.auth-locked .main {visibility:hidden}
body.auth-locked {overflow:hidden}
.app-loader,.login-screen {
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  background:#f3f6fb;
}
.app-loader.hidden,.login-screen[hidden] {display:none}
.loader-content {
  display:grid;
  justify-items:center;
  gap:12px;
  color:#26364e;
  font-family:Manrope,sans-serif;
}
.loader-logo {width:58px;height:58px;object-fit:contain;margin-bottom:2px}
.loader-content>b {font-size:22px;letter-spacing:-.5px}
.loader-content>span {font:12px 'DM Sans',Arial,sans-serif;color:#8390a1}
.loader-progress {width:170px;height:4px;overflow:hidden;margin-top:10px;border-radius:8px;background:#dfe8f5}
.loader-progress i {display:block;width:38%;height:100%;border-radius:inherit;background:#397fe5;animation:loader-sweep 1.15s ease-in-out infinite alternate}
@keyframes loader-sweep {from{transform:translateX(-10%)}to{transform:translateX(175%)}}
.login-screen {padding:22px;background:radial-gradient(ellipse at 50% 36%,#fff 0%,#f3f6fb 72%)}
.login-card {
  width:min(100%,460px);
  max-height:min(92vh,760px);
  overflow:auto;
  padding:34px;
  border:1px solid #e6ebf3;
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 70px #28395518;
}
.login-brand {display:flex;align-items:center;gap:12px;margin-bottom:30px}
.login-brand img {width:42px;height:42px;object-fit:contain}
.login-brand b {display:block;color:#202a38;font:800 18px Manrope,sans-serif}
.login-brand small {display:block;margin-top:3px;color:#8997aa;font-size:9px;letter-spacing:1px}
.login-card h1 {margin-bottom:7px;font-size:24px}
.login-intro {margin-bottom:22px;color:#8390a1;font-size:12px;line-height:1.5}
.login-profiles {display:grid;gap:8px;margin-bottom:20px}
.login-profile-option {
  display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;
  border:1px solid #e8edf4;border-radius:9px;background:#fff;text-align:left;
}
.login-profile-option.selected {border-color:#397fe5;background:#f5f9ff;box-shadow:0 0 0 2px #397fe512}
.login-profile-option .profile-avatar {background:#edf4ff;color:#397fe5}
.login-profile-option span:last-child {display:grid;gap:3px}
.login-profile-option b {font-size:12px;color:#28364a}
.login-profile-option small {font-size:10px;color:#8997aa}
.login-form {display:grid;gap:13px}
.login-field {display:grid;gap:6px;color:#697991;font-size:11px;font-weight:600}
.login-field input {height:43px;padding:0 12px;border:1px solid #e0e7f0;border-radius:7px;background:#fff;color:#26364e;font:13px 'DM Sans',Arial,sans-serif}
.login-field input:focus {outline:3px solid #397fe51c;border-color:#86afea}
.login-error {min-height:16px;margin:0;color:#bd625b;font-size:11px}
.login-submit {width:100%;height:46px;font-size:12px}
.login-footnote {margin:16px 0 0;text-align:center;color:#9aa6b6;font-size:10px;line-height:1.5}
.login-profile-actions {display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.login-profile-actions button {border:0;background:transparent;color:#397fe5;font:600 11px 'DM Sans',Arial,sans-serif;cursor:pointer}
.profile {width:100%;border:0;background:transparent;text-align:left;color:inherit;cursor:pointer}
.profile:hover {background:#f8faff}
.profile-copy {min-width:0}
.profile-copy b,.profile-copy small {max-width:138px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-profile-button {padding:0;border:0;cursor:pointer}
.admin-management-list {display:grid;gap:8px;margin:17px 0}
.admin-management-list button {display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;cursor:pointer}
.admin-management-list button:hover {border-color:#a8c5f2;background:#f8fbff}
.admin-management-list span:last-child {display:grid;gap:3px}
.admin-management-list b {font-size:12px}
.admin-management-list small {color:var(--muted);font-size:10px}
@media(max-width:540px) {
  .login-card {padding:25px 20px;border-radius:14px}
  .login-card h1 {font-size:22px}
}