:root { --page:#14171a; --panel:#1e2226; --card:#262b30; --line:#343a40; --muted:#aab2bb; --accent:#91c5a9; }
html,body { min-height:100%; background:var(--page); color:#f1f3f5; font-family:"Segoe UI",system-ui,sans-serif; }
body { margin:0; }
a { color:#b2ddc4; }
button,a,input,select,textarea { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #a0d7bb; outline-offset:3px; }
.app-shell { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.app-header,.app-footer { background:var(--panel); padding:1rem max(1.25rem,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.app-header { border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.7rem; font-size:1.1rem; font-weight:650; text-decoration:none; color:#f1f3f5; }
.brand-mark { background:#a7d8bd; color:#163426; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; font-size:1rem; }
.header-actions { display:flex; gap:.75rem; align-items:center; font-size:.875rem; }
.app-content { flex:1; width:100%; max-width:1440px; margin:0 auto; padding:2rem 1.5rem 3rem; }
.app-content:focus { outline:none; }
.app-footer { border-top:1px solid var(--line); padding-bottom:max(.8rem,env(safe-area-inset-bottom)); }
.footer-note { color:var(--muted); font-size:.875rem; }
.menu-wrapper { position:relative; }
.menu-popup { position:absolute; bottom:calc(100% + .7rem); left:0; width:240px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.5rem; box-shadow:0 10px 35px #0008; z-index:20; }
.menu-popup a,.menu-popup button { display:block; width:100%; text-align:left; background:none; border:0; padding:.7rem .9rem; color:#f1f3f5; text-decoration:none; border-radius:6px; }
.menu-popup a:hover,.menu-popup button:hover { background:#ffffff10; }
.menu-popup hr { margin:.4rem; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.8rem; flex-wrap:wrap; }
h1 { font-size:1.7rem; font-weight:650; margin:0; overflow-wrap:anywhere; }
.eyebrow { text-transform:uppercase; font-size:.8rem; letter-spacing:.1em; color:var(--muted); margin-bottom:.4rem; }
.section-heading { display:flex; align-items:center; gap:.7rem; margin:1.8rem 0 1rem; font-size:1rem; font-weight:600; }
.count { color:var(--muted); border:1px solid var(--line); padding:.1rem .5rem; border-radius:20px; font-size:.8rem; }
.work-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:1rem; }
.work-card { display:flex; flex-direction:column; padding:1.2rem; background:var(--card); border:1px solid var(--line); border-left:4px solid #7d8996; border-radius:12px; color:#f1f3f5; text-decoration:none; min-width:0; transition:background .15s,border-color .15s; }
.work-card:hover { background:#2c3339; border-color:#82958c; }
.work-card.open { border-left-color:#78b995; }
.work-card.closed { border-left-color:#b39b72; }
.work-card h3 { font-size:1.05rem; line-height:1.5; margin:.5rem 0; overflow-wrap:anywhere; }
.work-card .company { color:var(--muted); font-size:.9rem; overflow-wrap:anywhere; margin-bottom:1.5rem; }
.card-bottom { margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
.money { font-variant-numeric:tabular-nums; font-weight:650; white-space:nowrap; }
.pill { display:inline-block; font-size:.8rem; border-radius:20px; padding:.25rem .65rem; color:#c0cad4; background:#ffffff0c; }
.pill.open { color:#a3dbbb; background:#2e7d3225; }.pill.closed { color:#e2c896; background:#f9a82515; }
.invoice-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; font-weight:600; padding:.25rem .55rem; border:1px solid; border-radius:6px; }
.invoice-badge.invoiced { background:#234334; border-color:#518767; color:#b6ebca; }
.invoice-badge.not-invoiced { background:#44391e; border-color:#8e7641; color:#f4d994; }
.empty-state { border:1px dashed #49515a; border-radius:12px; padding:2rem; color:var(--muted); text-align:center; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.5rem; }
.form-panel { max-width:780px; margin:0 auto; }
.login-panel { max-width:420px; margin:7vh auto; }
.form-label { font-size:.9rem; color:#dbe0e5; }
.form-control,.form-select { background-color:var(--page); border-color:#49515a; min-height:44px; }
.form-control:focus,.form-select:focus { background-color:var(--page); border-color:#91c5a9; box-shadow:0 0 0 .2rem #91c5a922; }
.form-check-input { width:1.2em; height:1.2em; }.form-check-label { padding-left:.35rem; }
.btn { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
.btn-primary { --bs-btn-bg:#a7d8bd; --bs-btn-border-color:#a7d8bd; --bs-btn-color:#142e20; --bs-btn-hover-bg:#bce6ce; --bs-btn-hover-border-color:#bce6ce; --bs-btn-hover-color:#142e20; --bs-btn-active-bg:#91c5a9; --bs-btn-active-color:#142e20; --bs-btn-disabled-bg:#6a8d79; --bs-btn-disabled-border-color:#6a8d79; }
.btn-outline-secondary { --bs-btn-color:#c0c8d0; --bs-btn-border-color:#59616a; }
.filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:1.5rem; }
.filter-actions { display:flex; gap:.5rem; align-items:flex-end; }
.details-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; }
.meta { display:flex; gap:2rem; flex-wrap:wrap; margin:1.1rem 0 0; }
.meta dt { color:var(--muted); font-weight:400; font-size:.85rem; }.meta dd { margin:.3rem 0 0; overflow-wrap:anywhere; }
.total-panel { text-align:right; align-self:center; }.total-panel .money { font-size:1.8rem; }.total-panel p { color:var(--muted); font-size:.85rem; margin:0 0 .3rem; }
.cost-list { display:grid; gap:.75rem; }
.cost-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:1.2rem; }
.cost-row h3 { font-size:1rem; margin:0 0 .5rem; overflow-wrap:anywhere; }.cost-meta { color:var(--muted); font-size:.85rem; display:flex; gap:.5rem 1rem; flex-wrap:wrap; }
.cost-note { white-space:pre-wrap; overflow-wrap:anywhere; color:#ccd2d8; margin:.8rem 0 0; font-size:.9rem; }
.cost-right { text-align:right; }.cost-actions { display:flex; gap:.5rem; margin-top:.7rem; justify-content:flex-end; }.excluded { opacity:.75; }
.back-link { display:inline-block; margin-bottom:1rem; font-size:.9rem; text-decoration:none; }
.form-actions { display:flex; justify-content:flex-end; gap:.75rem; margin-top:1.5rem; border-top:1px solid var(--line); padding-top:1.2rem; }
.app-toast { position:fixed; top:1rem; left:50%; transform:translateX(-50%); max-width:90vw; padding:.9rem 1.4rem; background:#c0e5cd; color:#173c27; border-radius:10px; box-shadow:0 8px 35px #0005; z-index:100; }
dialog { background:var(--panel); color:#f1f3f5; border:1px solid #59616a; border-radius:12px; padding:1.5rem; width:min(440px,calc(100vw - 2rem)); }dialog::backdrop { background:#0009; }
.error-box { margin-bottom:1rem; }.required-note { color:var(--muted); font-size:.85rem; }
@media(max-width:640px) {
 .app-header,.app-footer { padding-left:1rem; padding-right:1rem; }.app-content { padding:1.4rem 1rem 2rem; }
 .app-header { flex-wrap:wrap; }.brand { font-size:.95rem; }.header-actions #user-name { display:none; }.footer-note { font-size:.75rem; }
 h1 { font-size:1.4rem; }.page-heading { align-items:flex-start; }.filters { grid-template-columns:1fr; }
 .panel { padding:1.1rem; }.details-grid { grid-template-columns:1fr; gap:1.2rem; }.total-panel { text-align:left; border-top:1px solid var(--line); padding-top:1rem; }
 .cost-row { grid-template-columns:1fr; }.cost-right { text-align:left; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }.cost-actions { margin-top:0; }
 .form-actions { flex-wrap:wrap; }.form-actions .btn { flex:1; }.login-panel { margin:3vh auto; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }
[hidden] { display:none!important; }