/* KESTREL console — builds on app.css */
.mono { font-family: var(--f-m); } .mt { margin-top: 16px; } .owe { color: var(--coral-2); font-weight: 700; } .ok { color: var(--green); } .sec-t { font: 720 22px/1.1 var(--f-d); margin: 26px 0 12px; }
.kpi__d { font-size: 12.5px; color: var(--mute); } .li__m > b, .li__m > span { display: block; } .li__m > span { font-size: 13px; margin-top: 2px; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); margin: 16px 0; } .tabs a { padding: 10px 14px; text-decoration: none; font-weight: 650; font-size: 14px; color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px; } .tabs a.on { color: var(--ink); border-color: var(--coral); } .tabs a .n { font: 400 10.5px var(--f-m); color: var(--mute); margin-left: 4px; }
.meter { height: 8px; background: var(--soft); border-radius: 99px; overflow: hidden; } .meter span { display: block; height: 100%; background: var(--sea); border-radius: 99px; } .meter.sun span { background: linear-gradient(90deg, var(--coral), var(--sun)); }
.fun { display: grid; grid-template-columns: 150px 1fr 100px; gap: 12px; align-items: center; padding: 6px 0; font-size: 13.5px; } .fun b { text-align: right; font: 500 12.5px var(--f-m); }
.ava { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 13px var(--f-d); color: #fff; background: hsl(var(--h, 20) 45% 42%); flex: none; }
/* live */
.livebig { display: flex; align-items: flex-end; gap: 18px; } .livebig b { font: 300 84px/.85 var(--f-m); letter-spacing: -.06em; } .livebig span { color: var(--mute); font-size: 14px; padding-bottom: 8px; }
.present { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; max-height: 340px; overflow: auto; } .pp { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--soft); font-size: 13px; } .pp > div { flex: 1; min-width: 0; } .pp b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp small { color: var(--mute); font: 500 10.5px var(--f-m); } .pp button { border: 0; background: none; cursor: pointer; color: var(--mute); font-size: 12px; }
.hourbars { display: flex; align-items: flex-end; gap: 3px; height: 70px; } .hourbars i { flex: 1; background: var(--soft); border-radius: 4px 4px 0 0; min-height: 2px; } .hourbars i.now { background: var(--coral); } .hourbars i.past { background: var(--sea); opacity: .55; }
/* coliving gantt */
.gantt { overflow-x: auto; border-radius: 18px; background: var(--panel); box-shadow: var(--sh-1), 0 0 0 1px var(--line); } .gantt table { border-collapse: collapse; } .gantt th, .gantt td { padding: 0; }
.gantt th.d { min-width: 34px; font: 500 10px var(--f-m); color: var(--mute); padding: 8px 0; text-align: center; border-left: 1px solid var(--line); } .gantt th.d.we { background: rgba(0,0,0,.025); } .gantt th.d.today { color: #fff; background: var(--coral); }
.gantt td.u { position: sticky; left: 0; z-index: 2; background: var(--panel); min-width: 170px; padding: 8px 12px; font-size: 13px; border-top: 1px solid var(--line); } .gantt td.u b { display: block; } .gantt td.u small { color: var(--mute); font: 500 10.5px var(--f-m); }
.gantt td.c { height: 46px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); position: relative; cursor: pointer; } .gantt td.c:hover { background: rgba(243,178,58,.15); } .gantt td.c.we { background: rgba(0,0,0,.02); }
.gantt .bar { position: absolute; top: 6px; bottom: 6px; left: 50%; z-index: 1; border-radius: 10px; padding: 4px 8px; font: 650 11.5px/1.25 var(--f); color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; background: var(--sea); box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); } .gantt .bar small { display: block; font: 500 9.5px var(--f-m); opacity: .8; }
.gantt .bar.confirmed { background: #2b5fa8; } .gantt .bar.in_house { background: var(--sea); } .gantt .bar.checked_out { background: #b9b0a2; } .gantt .bar.arr { box-shadow: inset 3px 0 0 var(--sun), 0 6px 14px -8px rgba(0,0,0,.5); }
/* room timeline */
.rt { overflow-x: auto; border-radius: 18px; background: var(--panel); box-shadow: var(--sh-1), 0 0 0 1px var(--line); } .rt table { border-collapse: collapse; min-width: 980px; width: 100%; } .rt th { font: 500 10px var(--f-m); color: var(--mute); padding: 8px 0; text-align: left; }
.rt td { height: 46px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); position: relative; padding: 0; } .rt td.r { position: sticky; left: 0; background: var(--panel); z-index: 2; min-width: 150px; padding: 0 12px; border-left: 0; font-weight: 700; font-size: 13.5px; } .rt td.r small { display: block; font: 500 10px var(--f-m); color: var(--mute); }
.rt td.s { cursor: pointer; } .rt td.s:hover { background: rgba(243,178,58,.2); } .rt .bk { position: absolute; top: 5px; bottom: 5px; left: 1px; z-index: 1; border-radius: 8px; padding: 4px 7px; font: 600 11px/1.2 var(--f); color: #fff; overflow: hidden; white-space: nowrap; cursor: pointer; } .rt .bk small { display: block; font: 500 9.5px var(--f-m); opacity: .85; } .rt .nowl { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--coral); z-index: 3; }
/* desk map */
.dmap { border-radius: 18px; background: var(--panel); box-shadow: var(--sh-1), 0 0 0 1px var(--line); padding: 12px; overflow-x: auto; } .dmap svg { min-width: 760px; width: 100%; }
.dk rect { stroke-width: 1.3; } .dk.free rect { fill: #fff; stroke: var(--ink); } .dk.booked rect { fill: #dbe8f7; stroke: #2b5fa8; } .dk.occupied rect { fill: #dff1e5; stroke: var(--green); } .dk.fixed rect { fill: #f3dccd; stroke: #b07a5c; } .dk.vacant_fixed rect { fill: #fff; stroke: #b07a5c; stroke-dasharray: 3 2; } .dk.fixed.in rect { fill: #cfe9d7; }
.dk text { font: 600 8.5px var(--f-m); fill: var(--ink-2); pointer-events: none; } .dk .who { font: 700 8.5px var(--f); fill: var(--ink); } .dk { cursor: pointer; } .dk:hover rect { stroke-width: 2.4; }
/* kanban */
.kan { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; align-items: start; } .kan__c { background: var(--soft); border-radius: 18px; padding: 10px; } .kan__c h4 { font: 700 14px var(--f); display: flex; justify-content: space-between; padding: 4px 6px 10px; } .kan__c h4 span { font: 500 11px var(--f-m); color: var(--mute); }
.lead { background: var(--panel); border-radius: 14px; padding: 12px; box-shadow: 0 0 0 1px var(--line); margin-bottom: 8px; font-size: 13px; cursor: pointer; } .lead b { display: block; font-size: 14px; } .lead small { color: var(--mute); font: 500 10.5px var(--f-m); } .lead p { margin-top: 6px; color: var(--ink-2); }
/* heatmaps */
.heat { display: grid; grid-template-columns: 44px repeat(17, 1fr); gap: 3px; font: 500 10px var(--f-m); color: var(--mute); } .heat i { aspect-ratio: 1.6; border-radius: 4px; background: rgba(15, 82, 87, var(--a)); } .heat span { display: flex; align-items: center; }
.cal26 { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; } .cal26 i { border-radius: 3px; background: var(--soft); } .cal26 i.v { background: var(--sea); } .cal26 i.v2 { background: #19727a; opacity: .7; }
.stack { display: flex; align-items: flex-end; gap: 6px; height: 210px; } .stack__c { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 1px; min-width: 0; } .stack__c i { width: 100%; max-width: 42px; display: block; } .stack__c i:first-child { border-radius: 6px 6px 0 0; } .stack__c span { font: 500 10px var(--f-m); color: var(--mute); margin-top: 6px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.mrrline { width: 100%; height: 120px; } .codebox { font: 300 34px/1 var(--f-m); letter-spacing: .1em; }
@media (max-width: 760px) { .fun { grid-template-columns: 100px 1fr 80px; } .livebig b { font-size: 60px; } }
@media print { .side, .topbar, .page-h__r { display: none !important; } .shell { display: block; } }