skills/create-tracker/assets/source/app/globals.css

@import "tailwindcss";

:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ink:#181b1f; --muted:#697078; --line:#d8dadd; --orange:#e77732; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; color:var(--ink); background:#e9e9e5; }
button { font:inherit; }
.topbar { height:78px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; background:#17191c; color:#fff; border-bottom:4px solid var(--orange); }
.eyebrow { margin:0 0 4px; font-size:11px; font-weight:800; letter-spacing:.13em; color:#aeb4bb; }
h1 { margin:0; font-size:22px; font-weight:750; letter-spacing:-.02em; } h2 { margin:0; font-size:16px; font-weight:750; }
.top-actions { display:flex; gap:9px; align-items:center; }.top-actions>span:not(.sync) { min-width:48px; text-align:center; font-size:14px; font-weight:700; }
.sync { padding:5px 9px; border-radius:99px; font-size:12px; font-weight:750; background:#353a3f; color:#dfe3e6; }.sync.saved { color:#89dfaf; }.sync.saving,.sync.loading { color:#f5ce72; }.sync.offline { color:#ff8f88; }
.icon-button,.button { border:1px solid #555a60; border-radius:7px; min-height:38px; padding:0 13px; background:#292d31; color:white; cursor:pointer; }.icon-button { width:38px; padding:0; font-size:21px; }.button.secondary { background:#f5f5f2; color:#222; border-color:#f5f5f2; font-weight:700; }
.selector-bar { display:flex; align-items:center; gap:18px; padding:10px 22px; overflow-x:auto; background:#f3f3f0; border-bottom:1px solid var(--line); }.system-nav { display:flex; flex:0 0 auto; gap:4px; padding:3px; border-radius:8px; background:#dfe0dd; }.system-nav button { min-width:92px; padding:8px 14px; white-space:nowrap; border:0; border-radius:6px; background:transparent; color:#555b60; font-weight:800; cursor:pointer; }.system-nav button.active { background:#17191c; color:#fff; box-shadow:0 1px 3px #0003; }.floor-nav { display:flex; flex:0 0 auto; gap:8px; }.floor-nav button { min-width:138px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 12px; border:1px solid #c9cbcd; border-radius:7px; background:#fff; color:#34383c; cursor:pointer; }.floor-nav button.active { border-color:#b85018; box-shadow:inset 0 -3px #e77732; }.floor-nav strong { font-size:13px; }.floor-nav span { color:var(--muted); font-size:11px; }
.summary { display:grid; grid-template-columns:145px minmax(160px,1fr) auto; align-items:center; gap:20px; padding:13px 22px; background:#fff; border-bottom:1px solid var(--line); }.progress-copy { display:flex; align-items:baseline; gap:8px; }.progress-copy span { font-size:27px; font-weight:850; }.progress-copy small { color:var(--muted); font-size:12px; }.progress-track { height:10px; border-radius:99px; overflow:hidden; background:#e2e3df; }.progress-track div { height:100%; background:#32875a; transition:width .2s ease; }.counts { display:flex; gap:18px; color:var(--muted); font-size:13px; }.counts strong { color:var(--ink); }
.workspace { height:calc(100vh - 196px); display:grid; grid-template-columns:230px minmax(0,1fr); }.sidebar { overflow:auto; padding:18px 16px; background:#f7f7f4; border-right:1px solid #c9cbcd; }.panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }.text-button { border:0; background:transparent; color:#b85018; font-weight:750; cursor:pointer; }.filter-list,.legend { display:grid; gap:5px; }.filter-list button,.legend button { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:1px solid transparent; border-radius:6px; background:transparent; text-align:left; cursor:pointer; color:#34383c; }.filter-list button:hover,.legend button:hover,.filter-list button.active,.legend button.active { background:#fff; border-color:#d1d3d5; }.filter-list .count { margin-left:auto; color:#7b8187; font-size:12px; }.legend { margin-top:24px; padding-top:19px; border-top:1px solid var(--line); }.legend h2 { margin-bottom:7px; }
.dot { width:11px; height:11px; border-radius:50%; display:inline-block; flex:0 0 auto; border:1px solid #0004; }.dot.not-started,.marker[data-status="not-started"] { background:#8b9298; }.dot.roughed-in,.marker[data-status="roughed-in"] { background:#f1c84b; }.dot.finish-installed,.marker[data-status="finish-installed"] { background:#ec863f; }.dot.complete,.marker[data-status="complete"] { background:#35a269; }.dot.issue,.marker[data-status="issue"] { background:#d24b45; }.prototype-note { margin:24px 4px 0; font-size:12px; line-height:1.5; color:#70767c; }
.drawing-shell { min-width:0; position:relative; padding:12px; background:#cacbc8; }.drawing-viewport { width:100%; height:100%; overflow:auto; background:#888c8e; box-shadow:inset 0 0 0 1px #0003; }.drawing-stage { position:relative; aspect-ratio:5460/3900; background:white; }.drawing-stage img { display:block; width:100%; height:100%; user-select:none; }.marker-layer { position:absolute; inset:0; }.marker { position:absolute; translate:-50% -50%; width:17px; height:17px; padding:0; border:2px solid #fff; border-radius:50%; box-shadow:0 1px 4px #0008; cursor:pointer; transition:scale .12s ease,opacity .12s ease; }.marker:hover,.marker:focus-visible { scale:1.4; z-index:5; outline:3px solid #1116; }.marker.hidden { opacity:.08; pointer-events:none; }
.dialog-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:16px; background:#0f11138c; }.dialog-card { width:min(430px,100%); padding:22px; border-radius:10px; background:#fff; box-shadow:0 20px 60px #0006; }.dialog-header { display:flex; align-items:start; justify-content:space-between; }.dialog-header h2 { font-size:25px; }.close-button { border:0; background:#eceeeb; border-radius:50%; width:34px; height:34px; font-size:22px; cursor:pointer; }.fixture-meta { color:var(--muted); margin:8px 0 18px; } fieldset { display:grid; gap:8px; padding:0; border:0; } legend { font-size:13px; font-weight:800; margin-bottom:9px; } fieldset button { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:7px; background:#fff; text-align:left; cursor:pointer; } fieldset button:hover,fieldset button.current { border-color:#555; background:#f5f5f2; }
@media(max-width:760px){.topbar{height:auto;min-height:82px;padding:12px 14px;align-items:flex-start;gap:10px}h1{font-size:17px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.button.secondary{display:none}.selector-bar{overflow-x:auto;gap:10px;padding:8px 14px}.system-nav{position:sticky;left:0;z-index:2;flex:0 0 auto}.system-nav button{min-width:76px;padding:8px 10px}.floor-nav{flex:0 0 auto}.floor-nav button{min-width:130px}.summary{grid-template-columns:1fr;gap:8px;padding:10px 14px}.counts{justify-content:space-between;flex-wrap:wrap}.workspace{height:calc(100vh - 248px);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.sidebar{display:flex;gap:8px;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid #bbb}.panel-heading,.legend,.prototype-note{display:none}.filter-list{display:flex;gap:5px}.filter-list button{white-space:nowrap;background:#fff}.drawing-shell{padding:6px}.marker{width:28px;height:28px}}

.view-tabs { display:flex; gap:3px; padding:3px; border-radius:8px; background:#292d31; }
.view-tabs button { padding:7px 14px; border:0; border-radius:6px; color:#bfc4c9; background:transparent; font-weight:800; cursor:pointer; }
.view-tabs button.active { color:#17191c; background:#fff; }
.button.primary { background:#b85018; border-color:#b85018; font-weight:800; }
.button:disabled { opacity:.45; cursor:not-allowed; }
.bulk-controls { position:absolute; z-index:10; top:20px; left:20px; right:20px; display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:9px; border:1px solid #bbb; border-radius:9px; background:#fffffff2; box-shadow:0 4px 18px #0003; }
.bulk-controls>button,.bulk-statuses button { min-height:35px; padding:7px 11px; border:1px solid #c5c7c9; border-radius:6px; background:#fff; color:#303438; font-weight:750; cursor:pointer; }
.bulk-controls>button.active { background:#17191c; color:#fff; }.bulk-controls>span { padding:0 5px; font-size:13px; font-weight:800; }
.bulk-statuses { display:flex; flex-wrap:wrap; gap:5px; margin-left:auto; }.bulk-statuses button { display:flex; align-items:center; gap:6px; font-size:12px; }
.marker.selected-marker { scale:1.55; z-index:6; outline:3px solid #111; outline-offset:2px; }
.last-change { display:flex; justify-content:space-between; gap:20px; padding:10px 12px; border-radius:7px; background:#f2f3f0; font-size:13px; }.last-change span { color:var(--muted); text-align:right; }
.history { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }.history h3 { margin:0 0 10px; font-size:14px; }.history>div { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-top:1px solid #ececea; font-size:12px; }.history>div span { display:flex; align-items:center; gap:7px; }.history time,.history p { color:var(--muted); }
.notes-view { min-height:calc(100vh - 78px); padding:24px; background:#e7e8e4; }.note-composer,.notes-list { width:min(900px,100%); margin:0 auto; }.note-composer { padding:20px; border:1px solid #c9cbcd; border-radius:10px; background:#fff; box-shadow:0 3px 12px #0001; }.note-composer label { display:block; margin-bottom:9px; font-weight:850; }.note-composer textarea,.note-card textarea { width:100%; min-height:110px; resize:vertical; padding:12px; border:1px solid #bfc2c4; border-radius:7px; font:inherit; line-height:1.5; }.note-composer>div { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }.note-composer>div>span { color:var(--muted); font-size:12px; }
.notes-list { display:grid; gap:12px; margin-top:16px; }.note-card { position:relative; padding:18px 20px; border:1px solid #c9cbcd; border-left:4px solid var(--orange); border-radius:9px; background:#fff; }.note-meta { display:flex; justify-content:space-between; gap:14px; color:#565d63; font-size:12px; font-weight:750; }.note-card p { margin:13px 0; white-space:pre-wrap; line-height:1.55; }.note-card small { color:var(--muted); }.note-actions { display:flex; justify-content:flex-end; gap:7px; margin-top:12px; }.note-actions button { padding:6px 10px; border:1px solid #c9cbcd; border-radius:6px; background:#fff; cursor:pointer; }.note-actions .save-note { color:#fff; background:#32875a; border-color:#32875a; }.note-actions .delete-note { color:#a52d28; }.empty-state { padding:55px 20px; border:1px dashed #b8bbbd; border-radius:10px; background:#f6f6f3; text-align:center; color:var(--muted); }.empty-state h2 { color:var(--ink); }
@media(max-width:900px){.topbar{flex-wrap:wrap}.view-tabs{order:3;width:100%}.view-tabs button{flex:1}.bulk-controls{top:12px;left:12px;right:12px}.bulk-statuses{width:100%;margin-left:0}.notes-view{padding:14px}.note-meta{align-items:flex-start;flex-direction:column;gap:4px}}

.history-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.history-heading h3 { margin:0; }
.clear-history { padding:5px 8px; border:1px solid #d7aaa5; border-radius:6px; color:#a52d28; background:#fff; font-size:12px; font-weight:750; cursor:pointer; }
.settings-view { min-height:calc(100vh - 78px); padding:24px; background:#e7e8e4; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; width:min(980px,100%); margin:0 auto; }
.settings-card { padding:22px; border:1px solid #c9cbcd; border-radius:10px; background:#fff; box-shadow:0 3px 12px #0001; }
.settings-card h2 { margin:5px 0 10px; font-size:21px; overflow-wrap:anywhere; }
.settings-card p:not(.eyebrow) { color:var(--muted); line-height:1.5; }
.danger-zone { border-left:4px solid #a52d28; }
.danger-button { margin-top:18px; padding:10px 13px; border:1px solid #a52d28; border-radius:7px; color:#fff; background:#a52d28; font-weight:800; cursor:pointer; }
.manager-card { grid-column:1/-1; }
.manager-form { display:grid; grid-template-columns:1fr auto; gap:9px; margin:18px 0; }
.manager-form input { min-width:0; padding:11px 12px; border:1px solid #bfc2c4; border-radius:7px; font:inherit; }
.manager-list { border-top:1px solid var(--line); }
.manager-list>div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 2px; border-bottom:1px solid var(--line); }
.manager-list span { display:grid; gap:3px; overflow-wrap:anywhere; }
.manager-list small { color:var(--muted); }
.manager-list button { padding:6px 9px; border:1px solid #d7aaa5; border-radius:6px; color:#a52d28; background:#fff; cursor:pointer; }
.settings-message { grid-column:1/-1; margin:0; padding:12px 14px; border-radius:8px; color:#245c3f; background:#e0f0e7; font-weight:750; }
@media(max-width:760px){.settings-view{padding:14px}.settings-grid{grid-template-columns:1fr}.manager-card,.settings-message{grid-column:auto}.manager-form{grid-template-columns:1fr}.manager-list>div{align-items:flex-start}}

.reports-view { min-height:calc(100vh - 78px); padding:24px; background:#e7e8e4; }
.report-generator,.reports-list { width:min(980px,100%); margin:0 auto; }
.report-generator { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; padding:22px; border:1px solid #c9cbcd; border-left:4px solid var(--orange); border-radius:10px; background:#fff; box-shadow:0 3px 12px #0001; }
.report-generator h2 { margin:5px 0 8px; font-size:22px; }.report-generator>div>p:not(.eyebrow) { max-width:650px; color:var(--muted); line-height:1.5; }
.report-controls { display:flex; align-items:end; gap:10px; }.report-controls label { display:grid; gap:6px; color:#555b61; font-size:12px; font-weight:800; }.report-controls select { min-width:170px; padding:10px 34px 10px 11px; border:1px solid #bfc2c4; border-radius:7px; background:#fff; font:inherit; }
.report-message { grid-column:1/-1; margin:0; padding:10px 12px; border-radius:7px; color:#245c3f; background:#e0f0e7; font-weight:750; }
.reports-list { display:grid; gap:14px; margin-top:16px; }.report-card { padding:22px; border:1px solid #c9cbcd; border-radius:10px; background:#fff; box-shadow:0 3px 12px #0001; }.report-card>header { display:flex; align-items:start; justify-content:space-between; gap:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }.report-card h2 { margin-top:4px; font-size:21px; }.report-card>header>span { padding:7px 10px; border-radius:99px; background:#f0f1ee; color:#555b61; font-size:12px; font-weight:800; white-space:nowrap; }.report-baseline { margin:12px 0; color:var(--muted); font-size:12px; }.report-groups { display:grid; gap:7px; }.report-groups p { margin:0; padding:10px 12px; border-left:3px solid #32875a; background:#f5f6f3; line-height:1.45; }.report-notes { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }.report-notes h3 { margin:0 0 9px; font-size:15px; }.report-notes>div { padding:10px 0; border-top:1px solid #ececea; }.report-notes p { margin:0 0 5px; white-space:pre-wrap; }.report-notes small { color:var(--muted); }.report-card>footer { margin-top:17px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
@media(max-width:760px){.reports-view{padding:14px}.report-generator{grid-template-columns:1fr}.report-controls{align-items:stretch;flex-direction:column}.report-controls select{width:100%}.report-card>header{align-items:flex-start;flex-direction:column}.report-card>header>span{white-space:normal}}