:root { --ink:#233b43; --muted:#63767b; --teal:#087b83; --line:#e7edef; --bs-body-color:var(--ink); --bs-body-font-family:"Segoe UI",system-ui,sans-serif; --bs-border-radius:.8rem; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; padding:36px; background:linear-gradient(125deg,#ffd3ac 0%,#efd9d8 40%,#c1a6ed 100%); color:var(--ink); font-size:.9rem; }
a { color:var(--teal); text-decoration:none; }
a:hover { color:#055b63; }
button,input,select,textarea { font:inherit; }
.icon { width:22px; height:22px; flex-shrink:0; vertical-align:middle; }
.workspace-shell { max-width:1700px; min-height:calc(100vh - 72px); margin:auto; display:flex; overflow:hidden; background:#fff; border:1px solid #ffffffc9; border-radius:28px; box-shadow:0 24px 85px #58537612; }
.sidebar { width:244px; flex-shrink:0; border-right:1px solid var(--line); display:flex; flex-direction:column; background:#fff; }
.brand { display:flex; align-items:center; gap:10px; padding:28px 23px; color:#126f80; font-size:1.6rem; font-weight:800; letter-spacing:-.05em; border-bottom:1px solid var(--line); }
.brand-mark { background:linear-gradient(145deg,#6bd4b4,#00a7e7); color:white; padding:9px; border-radius:12px; display:flex; }
.brand-mark .icon { width:25px; height:25px; }
.brand-subtitle { display:block; font-size:.49rem; letter-spacing:.13em; color:#6d8b92; margin-top:1px; }
.profile { margin:24px 21px 28px; display:flex; align-items:center; gap:11px; }
.avatar { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; background:#e4f5ef; color:#197e78; font-weight:700; }
.profile strong { font-size:.9rem; display:block; }
.profile small { display:block; color:var(--muted); font-size:.73rem; margin-top:2px; }
.profile-dot { background:#6ec9ac; width:7px; height:7px; border-radius:50%; margin-left:auto; }
.sidebar-label { color:#819094; font-size:.6rem; letter-spacing:.13em; font-weight:700; margin:0 25px 12px; }
.sidebar-nav { padding:0 14px; gap:6px; }
.sidebar-nav .nav-link,.sidebar-setting { color:#526369; display:flex; align-items:center; gap:13px; border-radius:11px; padding:13px 14px; font-size:.87rem; font-weight:500; }
.sidebar-nav .nav-link:hover,.sidebar-setting:hover { background:#f2f8f7; }
.sidebar-nav .nav-link.active { color:white; background:linear-gradient(105deg,#58c6a6,#0da9e5); box-shadow:0 4px 12px #079aa124; }
.sidebar-setting { border:0; background:transparent; margin:0 14px; text-align:left; }
.sidebar-footer { margin-top:auto; padding:28px 22px; display:flex; gap:10px; border-top:1px solid var(--line); color:#4b716e; }
.sidebar-footer strong { font-size:.65rem; display:block; font-weight:600; }
.sidebar-footer small { display:block; font-size:.6rem; color:#7a8b8d; margin-top:4px; }
.sidebar-footer .icon { width:20px; }
.workspace-main { min-width:0; flex:1; background:linear-gradient(180deg,#fff 0%,#fcfdfd 100%); }
.topbar { padding:27px 28px 23px; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.breadcrumb-label { margin:0 0 6px; font-size:.66rem; color:#71868b; }
.breadcrumb-label span { margin:0 6px; color:#b0bec1; }
h1 { font-size:1.4rem; letter-spacing:-.04em; font-weight:700; margin:0; }
.topbar-actions { display:flex; align-items:center; gap:14px; }
.preview-badge { color:#547375; background:#f2f8f7; border:1px solid #dfedeb; font-size:.62rem; padding:6px 9px; border-radius:6px; white-space:nowrap; }
.btn { font-weight:600; font-size:.77rem; border-radius:9px; padding:10px 15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn .icon { width:17px; height:17px; }
.btn-gradient { background:linear-gradient(105deg,#339d90,#069edc); color:#fff; border:0; box-shadow:0 4px 10px #138c9a18; }
.btn-gradient:hover,.btn-gradient:focus-visible { color:#fff; background:linear-gradient(105deg,#20887f,#0789c1); }
.btn-soft { color:#137a84; background:#eaf7f7; border:1px solid #d9eeed; }
.btn-soft:hover { background:#d9eeee; color:#09636e; }
main { padding:0 28px; }
.quick-card { border:0; width:100%; min-height:88px; border-radius:13px; padding:17px 14px; display:flex; align-items:center; gap:11px; text-align:left; color:inherit; transition:transform .15s; }
.quick-card:hover { transform:translateY(-2px); color:inherit; }
.quick-card strong { display:block; font-size:.76rem; font-weight:650; }
.quick-card small { font-size:.62rem; opacity:.9; display:block; margin-top:4px; }
.action-icon { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; background:#ffffffb0; }
.action-icon .icon { width:20px; }
.tone-blue { background:#e9f6fd; color:#087ca9; }
.tone-peach { background:#fdf2e7; color:#965510; }
.tone-mint { background:#eaf8ed; color:#2c7c43; }
.tone-lilac { background:#f1eafd; color:#7653ac; }
.card { border:1px solid #e0eaeb; border-radius:18px; box-shadow:0 2px 4px #173c4d03; }
.overview-card { background:linear-gradient(125deg,#f0fcf7 0%,#fff 70%); padding:27px; height:100%; }
.section-kicker { font-size:.58rem; color:#517775; font-weight:700; letter-spacing:.13em; }
h2 { font-size:1.05rem; font-weight:650; letter-spacing:-.025em; margin:0; }
.overview-card h2 { color:#116f80; font-size:1.65rem; margin:9px 0; max-width:400px; line-height:1.25; }
.muted { color:var(--muted); font-size:.75rem; line-height:1.65; }
.overview-body { display:flex; gap:34px; align-items:center; padding-top:14px; }
.donut-wrap { text-align:center; flex-shrink:0; }
.job-donut { width:160px; height:160px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(#5acbb2 0% 50%,#91cbf0 50% 75%,#c1a5ed 75% 100%); }
.job-donut>div { width:121px; height:121px; border-radius:50%; background:#fbfffd; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.job-donut strong { color:#176f80; font-size:2.6rem; font-weight:600; line-height:1.15; }
.job-donut span { color:#617a7d; font-size:.62rem; margin-top:5px; }
.chart-caption { color:#697f81; font-size:.58rem; margin-top:13px; display:block; }
.stats-grid { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:28px 18px; }
.stat-item { display:flex; gap:10px; align-items:center; }
.stat-icon { width:39px; height:39px; flex-shrink:0; display:grid; place-items:center; border-radius:13px; }
.stat-icon .icon { width:19px; }
.stat-item strong { display:block; color:#146d80; font-size:1.7rem; line-height:1.1; font-weight:650; }
.stat-item div>span { display:block; color:#62787d; font-size:.64rem; margin-top:6px; white-space:nowrap; }
.report-highlight { padding:20px; height:100%; background:#fafbfe; }
.file-tag { font-size:.55rem; border:1px solid #e2def1; color:#795c9c; background:#f1ecf9; padding:3px 6px; border-radius:4px; font-weight:700; }
.report-paper { margin:15px auto 17px; width:100%; max-width:270px; background:white; border:1px solid #e6e9ec; border-radius:6px; padding:17px 18px; box-shadow:0 5px 13px #304e5e06; }
.mini-brand { color:#137c86; font-size:.8rem; font-weight:800; display:flex; justify-content:space-between; align-items:center; }
.mini-brand span { font-size:.4rem; color:#697f88; letter-spacing:.1em; }
.paper-rule { height:2px; background:linear-gradient(90deg,#5ec9aa,#18a5dd); margin:10px 0 13px; }
.report-paper>strong { display:block; font-size:.78rem; line-height:1.5; margin-bottom:5px; }
.report-paper>.muted { font-size:.52rem; }
.paper-lines { display:grid; gap:5px; margin:12px 0; }
.paper-lines span { height:3px; border-radius:5px; background:#eef2f2; width:100%; }
.paper-lines span:last-child { width:65%; }
.paper-signoff { font-size:.5rem; color:#397559; border-top:1px solid #eef2f2; padding-top:9px; }
.paper-signoff .icon { width:12px; height:12px; }
.report-highlight h2 { font-size:.86rem; }
.report-highlight p { font-size:.65rem; margin:7px 0 13px; }
.jobs-card { margin-top:24px; overflow:hidden; }
.section-header { display:flex; justify-content:space-between; align-items:center; padding:22px; gap:15px; }
.section-header h2 { margin-bottom:5px; }
.section-header p { font-size:.67rem; }
.search-control { display:flex; align-items:center; gap:8px; border:1px solid #e1e8ea; border-radius:8px; padding:8px 11px; min-width:180px; }
.search-control .icon { width:15px; height:15px; color:#71888c; }
.search-control input { width:100%; min-width:0; border:0; outline:0; font-size:.65rem; color:var(--ink); background:transparent; }
.search-control:focus-within { outline:2px solid #1e95ba; outline-offset:2px; }
.job-table { margin:0; font-size:.69rem; }
.job-table thead th { background:#f8fafb; color:#657b83; font-size:.57rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; padding:12px 14px; border-top:1px solid #edf1f2; border-bottom:1px solid #edf1f2; white-space:nowrap; }
.job-table th:first-child,.job-table td:first-child { padding-left:22px; }
.job-table td { padding:16px 14px; border-color:#f0f3f4; }
.job-table tr:last-child td { border-bottom:0; }
.job-cell { display:flex; align-items:center; gap:11px; min-width:240px; }
.job-file-icon { padding:8px; border-radius:10px; background:#eff7f9; color:#548491; }
.job-file-icon .icon { width:17px; height:17px; }
.job-cell strong { display:block; font-size:.69rem; font-weight:650; }
.job-title { display:block; color:#607981; font-size:.62rem; margin:3px 0; }
.job-cell small { color:#697f87; font-size:.58rem; }
.engineer-name,.date-cell { white-space:nowrap; color:#607b83!important; font-size:.64rem; }
.status-pill { display:inline-flex; align-items:center; gap:5px; border-radius:6px; font-size:.56rem; padding:5px 8px; white-space:nowrap; }
.status-pill::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }
.status-complete { background:#e9f8f0; color:#357b5b; }
.status-pending { background:#fff4e5; color:#94601b; }
.status-draft { background:#f0eafa; color:#79569e; }
.icon-button { padding:6px; color:#517d88; }
.table-footer { display:flex; justify-content:space-between; gap:12px; padding:15px 22px; border-top:1px solid #edf1f2; font-size:.6rem; color:#637e87; }
.table-footer a { font-weight:600; }
.table-footer .icon { width:14px; height:14px; margin-left:4px; }
.workspace-footer { display:flex; justify-content:space-between; gap:15px; padding:23px 2px; color:#637d86; font-size:.6rem; }
.modal-content { border:0; border-radius:20px; box-shadow:0 20px 80px #173b4326; }
.modal-header { padding:23px; border-color:var(--line); }
.modal-title { margin-top:5px; }
.modal-body { padding:23px; }
.preview-notice { border:1px solid #d6eae8; background:#f0f9f7; color:#4a7674; padding:12px; border-radius:9px; font-size:.75rem; line-height:1.6; }
.form-label { font-size:.75rem; font-weight:600; }
.form-control,.form-select { font-size:.8rem; border-color:#dce6e8; padding:11px 12px; }
.form-control:focus,.form-select:focus { border-color:#6cbfba; box-shadow:0 0 0 3px #4bb7b020; }
.customer-card { border:1px solid var(--line); border-radius:14px; padding:24px; height:100%; }
.customer-card h3 { font-size:1rem; line-height:1.5; margin:20px 0 5px; }
.customer-card a { font-size:.7rem; }
.customer-card .icon { width:17px; }
.empty-search { padding:20px; color:var(--muted); text-align:center; font-size:.8rem; }
.skip-link { position:absolute; top:-60px; left:20px; z-index:2000; background:white; padding:12px; border:2px solid var(--teal); }
.skip-link:focus { top:10px; }
:focus-visible { outline:3px solid #1389a8; outline-offset:3px; }
@media(min-width:1600px) { body { padding:55px; } .workspace-shell { min-height:calc(100vh - 110px); } .sidebar { width:265px; } .topbar { padding:32px; } main { padding:0 32px; } .quick-card { min-height:103px; padding:20px; } .quick-card strong { font-size:.88rem; } .quick-card small { font-size:.7rem; } .overview-card { padding:32px; } .overview-card h2 { font-size:2rem; } .overview-body { padding:20px 0; gap:45px; } .job-donut { width:185px; height:185px; } .job-donut>div { width:140px; height:140px; } }
@media(max-width:1199.98px) { .overview-body { justify-content:space-around; } .stats-grid { max-width:370px; } .report-highlight { display:none; } .topbar-actions .preview-badge { display:none; } }
@media(max-width:991.98px) { body { padding:15px; } .workspace-shell { border-radius:20px; min-height:calc(100vh - 30px); } .sidebar { --bs-offcanvas-width:270px; } .brand { padding-top:15px; } .workspace-main { width:100%; } .topbar { padding:24px 20px; } main { padding:0 20px; } .overview-card { padding:24px; } }
@media(max-width:575.98px) { body { padding:0; background:#fff; } .workspace-shell { border:0; border-radius:0; min-height:100vh; } .topbar { padding:20px 15px; } .topbar-actions .btn { padding:10px; } .topbar-actions .btn span { display:none; } main { padding:0 15px; } .breadcrumb-label { font-size:.57rem; } h1 { font-size:1.22rem; } .quick-card { padding:13px 10px; gap:8px; min-height:83px; } .quick-card strong { font-size:.66rem; } .quick-card small { font-size:.55rem; line-height:1.5; } .action-icon { width:30px; height:30px; border-radius:10px; } .action-icon .icon { width:17px; } .overview-card h2 { font-size:1.4rem; } .overview-body { gap:20px; flex-direction:column; } .stats-grid { gap:22px; width:100%; margin-top:5px; } .stat-item div>span { font-size:.6rem; } .stat-item strong { font-size:1.5rem; } .section-header { align-items:stretch; flex-direction:column; padding:19px; } .search-control { width:100%; } .workspace-footer { flex-direction:column; gap:7px; line-height:1.6; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }