/* ============================================================================ CleanApp — warstwa wizualna nowych ekranów kierownictwa. Przeniesiona z design/panel.html. Tokeny są globalne, bo kolory statusów muszą znaczyć to samo na każdym ekranie. Komponenty są odcięte kontenerem .ca i to nie jest ostrożność na zapas: panel ładuje Bootstrapa, Semantic UI i site.css, a prototyp używa nazw .btn, .card, .tag, .search i .pager — wszystkich zajętych. Bez odcięcia pierwszy ekran zepsułby wszystkie stare. Stare ekrany zostają na Bootstrapie do czasu przepisania. Przez ten czas w aplikacji żyją dwa wyglądy; to koszt świadomie wybrany zamiast jednego wielkiego przepisania wszystkiego naraz. Reguła kolorów, bez wyjątków: akcent = "to jest klikalne" statusy = "tak wygląda pokój" Te role się nie mieszają. Kafelek pokoju nigdy nie jest niebieski od tego, że da się w niego kliknąć. ========================================================================= */ :root{ --ca-ground:#eef1f6; --ca-surface:#ffffff; --ca-sunk:#f4f6fa; --ca-line:#dfe4ec; --ca-line-soft:#eaeef4; --ca-ink:#111a26; --ca-ink-soft:#41546b; --ca-muted:#78899e; --ca-accent:#2f5fd8; --ca-accent-ink:#ffffff; --ca-accent-soft:#e3ebfd; --ca-accent-deep:#1c3f9c; /* statusy czystości — nasycone, wyraźnie różne, odsunięte od akcentu */ --ca-st-unknown:#78899e; --ca-st-unknown-bg:#eceff4; --ca-st-dirty:#d63a3a; --ca-st-dirty-bg:#fce7e7; --ca-st-cleaning:#d5860a; --ca-st-cleaning-bg:#fdf1dc; --ca-st-cleaned:#0a95a8; --ca-st-cleaned-bg:#dbf2f5; --ca-st-clean:#1a9161; --ca-st-clean-bg:#dcf1e7; /* usterki i blokada — własne skale, prostopadłe do czystości */ --ca-d-crit:#c02626; --ca-d-high:#e0670c; --ca-d-norm:#a37209; --ca-d-low:#78899e; --ca-blocked:#7c3aed; --ca-blocked-bg:#f0e9fe; /* ruch gości */ --ca-arr:#1d4ed8; --ca-stay:#41546b; --ca-dep:#9333ea; --ca-r:11px; --ca-r-sm:7px; --ca-shadow:0 1px 2px rgba(17,26,38,.05), 0 8px 24px rgba(17,26,38,.07); --ca-shadow-lg:-10px 0 40px rgba(17,26,38,.14); --ca-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* Ciemny motyw w trzech stanach. Panel stempluje data-theme na , ale użytkownik, który nigdy nie tknął przełącznika, nie ma stempla żadnego — wtedy rozstrzyga ustawienie systemu. Bez środkowego bloku taki użytkownik dostaje jasne kolory na ciemnym tle przeglądarki. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ca-ground:#0c1219; --ca-surface:#151c25; --ca-sunk:#1b232e; --ca-line:#27313e; --ca-line-soft:#1f2833; --ca-ink:#e6ecf3; --ca-ink-soft:#b3c1d1; --ca-muted:#8394a8; --ca-accent:#6b96f5; --ca-accent-ink:#0a1526; --ca-accent-soft:#1c2c4c; --ca-accent-deep:#9dbcf9; --ca-st-unknown:#8394a8; --ca-st-unknown-bg:#1d2530; --ca-st-dirty:#f0706c; --ca-st-dirty-bg:#331a1b; --ca-st-cleaning:#e5a63c; --ca-st-cleaning-bg:#2f2510; --ca-st-cleaned:#33bccb; --ca-st-cleaned-bg:#0e2c33; --ca-st-clean:#42bd85; --ca-st-clean-bg:#0f2c21; --ca-d-crit:#f0706c; --ca-d-high:#fb923c; --ca-d-norm:#e5a63c; --ca-d-low:#8394a8; --ca-blocked:#a78bfa; --ca-blocked-bg:#221c3a; --ca-arr:#7aa2ff; --ca-stay:#b3c1d1; --ca-dep:#c084fc; --ca-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --ca-shadow-lg:-10px 0 40px rgba(0,0,0,.5); } } :root[data-theme="dark"]{ --ca-ground:#0c1219; --ca-surface:#151c25; --ca-sunk:#1b232e; --ca-line:#27313e; --ca-line-soft:#1f2833; --ca-ink:#e6ecf3; --ca-ink-soft:#b3c1d1; --ca-muted:#8394a8; --ca-accent:#6b96f5; --ca-accent-ink:#0a1526; --ca-accent-soft:#1c2c4c; --ca-accent-deep:#9dbcf9; --ca-st-unknown:#8394a8; --ca-st-unknown-bg:#1d2530; --ca-st-dirty:#f0706c; --ca-st-dirty-bg:#331a1b; --ca-st-cleaning:#e5a63c; --ca-st-cleaning-bg:#2f2510; --ca-st-cleaned:#33bccb; --ca-st-cleaned-bg:#0e2c33; --ca-st-clean:#42bd85; --ca-st-clean-bg:#0f2c21; --ca-d-crit:#f0706c; --ca-d-high:#fb923c; --ca-d-norm:#e5a63c; --ca-d-low:#8394a8; --ca-blocked:#a78bfa; --ca-blocked-bg:#221c3a; --ca-arr:#7aa2ff; --ca-stay:#b3c1d1; --ca-dep:#c084fc; --ca-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --ca-shadow-lg:-10px 0 40px rgba(0,0,0,.5); } /* ==================================================== wspólne wewnątrz .ca */ .ca{color:var(--ca-ink);font-size:14px;line-height:1.5} .ca *{box-sizing:border-box} .ca button{cursor:pointer;background:none;border:none;padding:0;color:inherit;font:inherit} .ca .ca-mono{font-family:var(--ca-mono);font-variant-numeric:tabular-nums} .ca :focus-visible{outline:2px solid var(--ca-accent);outline-offset:2px;border-radius:5px} .ca .ca-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap} .ca .ca-h1{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0} .ca .ca-sub{font-size:12.5px;color:var(--ca-muted);margin:4px 0 0} .ca .ca-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px; padding:0 13px;border-radius:var(--ca-r-sm);font-size:13px;font-weight:620; border:1px solid var(--ca-line);background:var(--ca-surface);color:var(--ca-ink); transition:background .12s,border-color .12s;white-space:nowrap;text-decoration:none} .ca .ca-btn:hover{background:var(--ca-sunk);border-color:var(--ca-muted);color:var(--ca-ink)} .ca .ca-btn.primary{background:var(--ca-accent);border-color:var(--ca-accent);color:var(--ca-accent-ink)} .ca .ca-btn.primary:hover{background:var(--ca-accent-deep);border-color:var(--ca-accent-deep);color:var(--ca-accent-ink)} .ca .ca-btn.ghost{border-color:transparent;background:transparent;color:var(--ca-ink-soft)} .ca .ca-btn.ghost:hover{background:var(--ca-sunk)} .ca .ca-btn.danger{color:var(--ca-st-dirty);border-color:color-mix(in srgb,var(--ca-st-dirty) 35%,var(--ca-line))} .ca .ca-btn.danger:hover{background:var(--ca-st-dirty-bg)} .ca .ca-btn.sm{height:29px;padding:0 10px;font-size:12.5px} .ca .ca-btn:disabled{opacity:.45;pointer-events:none} .ca .ca-btn i{font-size:14px;line-height:1} .ca .ca-search{display:flex;align-items:center;gap:8px;height:34px;padding:0 11px; border-radius:var(--ca-r-sm);border:1px solid var(--ca-line);background:var(--ca-surface);min-width:0} .ca .ca-search:focus-within{border-color:var(--ca-accent)} .ca .ca-search i{color:var(--ca-muted);flex:none} .ca .ca-search input{border:none;background:none;outline:none;width:100%;font-size:13px;min-width:0;color:inherit} .ca .ca-inp{height:34px;padding:0 10px;border-radius:var(--ca-r-sm);border:1px solid var(--ca-line); background:var(--ca-surface);color:var(--ca-ink);font-size:13px;width:100%} .ca .ca-inp:focus{outline:none;border-color:var(--ca-accent)} .ca textarea.ca-inp{height:auto;min-height:72px;padding:8px 10px;resize:vertical} .ca .ca-seg{display:inline-flex;background:var(--ca-sunk);border:1px solid var(--ca-line); border-radius:var(--ca-r-sm);padding:2px;gap:2px} .ca .ca-seg button{height:27px;padding:0 11px;border-radius:5px;font-size:12.5px;font-weight:620; color:var(--ca-muted);display:inline-flex;align-items:center;gap:6px} .ca .ca-seg button:hover{color:var(--ca-ink)} .ca .ca-seg button[aria-pressed="true"]{background:var(--ca-surface);color:var(--ca-ink);box-shadow:var(--ca-shadow)} /* --------------------------------------------------------------------- formularze Prototyp nie ma ekranu z formularzem, wiec te klasy sa dopisane — ale zbudowane z tych samych tokenow co reszta, zeby ustawienia i konto nie wygladaly jak inna aplikacja. Etykieta NAD polem, nie obok. Obok wymaga zdecydowania o szerokosci kolumny etykiet, a ta zalezy od jezyka: te same pola po polsku i po angielsku maja inne dlugosci podpisow. */ .ca .ca-form{display:flex;flex-direction:column;gap:13px;max-width:460px} .ca .ca-field{display:flex;flex-direction:column;gap:5px;min-width:0} .ca .ca-field>label{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--ca-muted)} .ca .ca-field .ca-inp{width:100%} .ca .ca-field-hint{font-size:12px;color:var(--ca-muted)} .ca .ca-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px} /* Przelacznik. Wlasny, na natywnym checkboxie, a nie komponent Switch z Blazor.Bootstrap: tamten wymagal @ref, zeby dowiedziec sie o swoim wlasnym stanie, i na pierwszym renderowaniu ten ref byl nullem — wiec zaleznie od niego licznik obok startowal jako wygaszony. */ .ca .ca-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none} .ca .ca-switch input{appearance:none;-webkit-appearance:none;width:36px;height:20px;border-radius:99px; background:var(--ca-sunk);border:1px solid var(--ca-line);position:relative;flex:none;margin:0; cursor:pointer;transition:background .15s,border-color .15s} .ca .ca-switch input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px; border-radius:50%;background:var(--ca-muted);transition:transform .15s,background .15s} .ca .ca-switch input:checked{background:var(--ca-accent);border-color:var(--ca-accent)} .ca .ca-switch input:checked::after{transform:translateX(16px);background:var(--ca-accent-ink)} .ca .ca-switch input:disabled{opacity:.5;cursor:default} .ca .ca-switch span{font-size:13px;font-weight:560} /* Licznik. Minus, liczba, plus — jeden element, nie trzy kolumny siatki. */ .ca .ca-stepper{display:inline-flex;align-items:center;gap:1px;background:var(--ca-sunk); border:1px solid var(--ca-line);border-radius:var(--ca-r-sm);padding:2px} .ca .ca-stepper button{width:28px;height:26px;border-radius:5px;display:grid;place-items:center; color:var(--ca-ink-soft)} .ca .ca-stepper button svg{width:14px;height:14px} .ca .ca-stepper button:hover:not(:disabled){background:var(--ca-surface);color:var(--ca-ink)} .ca .ca-stepper button:disabled{opacity:.4;cursor:default} .ca .ca-stepper input{width:54px;height:26px;border:none;background:none;text-align:center; color:var(--ca-ink);font:680 13px var(--ca-mono);font-variant-numeric:tabular-nums;outline:none; -moz-appearance:textfield;appearance:textfield} .ca .ca-stepper input::-webkit-outer-spin-button, .ca .ca-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .ca .ca-stepper.off{opacity:.4;pointer-events:none} /* Wiersz „ruch gosci": jedna decyzja czy-w-ogole i jedna ile. */ .ca .ca-moverow{display:flex;align-items:center;gap:14px;padding:11px 0; border-bottom:1px solid var(--ca-line-soft)} .ca .ca-moverow:last-child{border-bottom:none} .ca .ca-moverow>.ca-switch{width:190px;flex:none} .ca .ca-ta{width:100%;min-height:78px;padding:9px 10px;border-radius:var(--ca-r-sm); border:1px solid var(--ca-line);background:var(--ca-sunk);color:var(--ca-ink);font:inherit; font-size:13px;resize:vertical} .ca .ca-ta:focus{outline:none;border-color:var(--ca-accent);background:var(--ca-surface)} /* Plakietki: wybrane obiekty i obiekty do dobrania. Wybrany ma krzyzyk i barwe akcentu, dostepny ma plus i jest wygaszony — po samym wygladzie widac, ktore klikniecie co robi. Poprzednia wersja rysowala jedne i drugie jako identyczne niebieskie pasy na cala szerokosc. */ .ca .ca-chips{display:flex;flex-wrap:wrap;gap:6px} .ca .ca-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px; border-radius:99px;border:1px solid var(--ca-accent);background:var(--ca-accent-soft); color:var(--ca-accent-deep);font-size:12.5px;font-weight:620;max-width:100%; transition:background .12s,border-color .12s,color .12s} .ca .ca-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ca .ca-chip svg{width:12px;height:12px;flex:none;opacity:.7} .ca .ca-chip:hover{background:var(--ca-st-dirty-bg);border-color:var(--ca-st-dirty); color:var(--ca-st-dirty)} .ca .ca-chip.add{border-color:var(--ca-line);background:var(--ca-sunk);color:var(--ca-ink-soft); border-style:dashed} .ca .ca-chip.add:hover{border-style:solid;border-color:var(--ca-accent); background:var(--ca-accent-soft);color:var(--ca-accent-deep)} /* Wybor jednego z kilku stanow, z kolorem tego stanu. */ .ca .ca-choice{display:flex;gap:7px;flex-wrap:wrap} .ca .ca-choice button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px; border-radius:var(--ca-r-sm);border:1px solid var(--ca-line);background:var(--ca-surface); color:var(--ca-ink-soft);font-size:13px;font-weight:600;transition:background .12s,border-color .12s} .ca .ca-choice button .sw{width:9px;height:9px;border-radius:3px;background:var(--c);flex:none} .ca .ca-choice button:hover{background:var(--ca-sunk);color:var(--ca-ink)} .ca .ca-choice button[aria-pressed="true"]{border-color:var(--c);color:var(--ca-ink); background:color-mix(in srgb,var(--c) 13%,transparent)} /* Pole z przyciskiem w srodku — haslo z podgladem. */ .ca .ca-inp-wrap{position:relative;display:flex;align-items:center} .ca .ca-inp-wrap .ca-inp{width:100%;padding-right:38px} .ca .ca-inp-wrap .ca-inp-btn{position:absolute;right:4px;width:28px;height:28px;border-radius:6px; display:grid;place-items:center;color:var(--ca-muted)} .ca .ca-inp-wrap .ca-inp-btn:hover{background:var(--ca-sunk);color:var(--ca-ink)} .ca .ca-inp-wrap .ca-inp-btn svg{width:16px;height:16px} .ca .ca-card{background:var(--ca-surface);border:1px solid var(--ca-line); border-radius:var(--ca-r);box-shadow:var(--ca-shadow)} .ca .ca-card-head{padding:12px 15px;border-bottom:1px solid var(--ca-line);display:flex; align-items:center;gap:11px;flex-wrap:wrap} .ca .ca-card-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ca-muted)} .ca .ca-card-body{padding:15px} .ca .ca-tag{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:5px; font-size:11.5px;font-weight:680;background:var(--ca-sunk);color:var(--ca-ink-soft);white-space:nowrap} .ca .ca-tag svg{width:12px;height:12px;flex:none} .ca .ca-tag.tint{background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)} .ca .ca-tag.solid{background:var(--c);color:#fff} /* Brak wagi to nieobecność decyzji, nie najniższy poziom — obrys, nigdy wypełnienie. */ .ca .ca-tag.untriaged{background:transparent;border:1px dashed var(--ca-muted);color:var(--ca-muted)} .ca .ca-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none;display:inline-block} .ca .ca-note{font-size:12.5px;color:var(--ca-ink-soft);background:var(--ca-sunk); border:1px solid var(--ca-line);border-radius:var(--ca-r-sm);padding:11px 13px;line-height:1.55} .ca .ca-note.warn{background:var(--ca-st-cleaning-bg); border-color:color-mix(in srgb,var(--ca-st-cleaning) 30%,transparent)} .ca .ca-note.lock{background:var(--ca-accent-soft); border-color:color-mix(in srgb,var(--ca-accent) 26%,transparent)} .ca .ca-note-row{display:flex;align-items:flex-start;gap:10px} .ca .ca-empty{padding:48px 22px;text-align:center;color:var(--ca-muted)} .ca .ca-empty h3{margin:0 0 6px;font-size:14.5px;color:var(--ca-ink);font-weight:650} /* ================================================= PULPIT: pasek liczb Liczby na tym pasku nie są podpisem obok filtrów — one SĄ filtrem. Przy 300 pokojach to jedyny sensowny sposób zawężenia widoku, dlatego żadnej z nich nie wolno schować za przewijaniem. */ .ca .ca-filterbar{display:flex;gap:10px;align-items:stretch;margin-bottom:14px;flex-wrap:wrap} .ca .ca-fgroup{display:flex;gap:4px;padding:9px 11px 8px;background:var(--ca-surface); border:1px solid var(--ca-line);border-radius:var(--ca-r);box-shadow:var(--ca-shadow);position:relative} .ca .ca-fgroup::before{content:attr(data-label);position:absolute;top:-7px;left:12px; font-size:9.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase; color:var(--ca-muted);background:var(--ca-surface);padding:0 6px} .ca .ca-fcell{display:flex;flex-direction:column;gap:2px;padding:7px 11px;border-radius:var(--ca-r-sm); border:1.5px solid transparent;min-width:78px;text-align:left; transition:background .12s,border-color .12s} .ca .ca-fcell:hover{background:var(--ca-sunk)} .ca .ca-fcell[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,transparent)} /* UWAGA na skrot `font`. `font: 700 23px/1.05 inherit` jest NIEPRAWIDLOWY — w skrocie `font` rodzina jest obowiazkowa, a `inherit` nie jest jej nazwa; przegladarka odrzuca wtedy CALA deklaracje, razem z rozmiarem. Tak powstalo „liczby i napisy sa za male": pasek liczb i numery pokoi traciły 23px i 32px i spadaly do 14px dziedziczonych z .ca. W prototypie stalo tam var(--sans) i skrot byl poprawny; przy przenoszeniu rodzina zostala zamieniona na `inherit`, zeby nie wprowadzac nowego tokenu. Rozmiar, waga i interlinia sa od teraz osobnymi wlasciwosciami — rodzina zostaje odziedziczona bez udawania, ze da sie ja wpisac do skrotu. */ .ca .ca-fcell .n{font-weight:700;font-size:23px;line-height:1.05;letter-spacing:-.03em;color:var(--c); font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px} .ca .ca-fcell .n .sw{width:9px;height:9px;border-radius:3px;background:var(--c);flex:none} .ca .ca-fcell .l{font-size:11px;color:var(--ca-ink-soft);white-space:nowrap;font-weight:520} .ca .ca-fcell.untriaged .n{color:var(--ca-muted)} .ca .ca-fcell.untriaged[aria-pressed="true"]{border-style:dashed} .ca .ca-fclear{align-self:center;font-size:12px;font-weight:650;color:var(--ca-accent); padding:8px 12px;border-radius:var(--ca-r-sm);white-space:nowrap} .ca .ca-fclear:hover{background:var(--ca-accent-soft)} .ca .ca-tools{display:flex;gap:9px;align-items:center;margin-bottom:12px;flex-wrap:wrap} .ca .ca-tools .ca-search{width:230px;flex:none} .ca .ca-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:14px; font-size:11.5px;color:var(--ca-muted)} .ca .ca-legend i{display:inline-flex;align-items:center;gap:6px;font-style:normal} .ca .ca-legend i b{width:11px;height:11px;border-radius:3px;background:var(--c);display:block} /* Kolko znaczy „doklejone do pokoju" (usterka, blokada), kwadrat — „stan pokoju". Ten sam kolor w dwoch kształtach niesie inna informacje, wiec kształt musi byc czescia legendy, nie jej ozdoba. */ .ca .ca-legend i b.round{border-radius:50%} /* Trojkat w legendzie: ten sam znak, co na kafelku, tylko bez liczby — objasnia KOLOR, a liczbe pokoj podaje sam. Nieco mniejszy od kafelkowego, bo stoi w wierszu tekstu. */ .ca .ca-legend i.tri b.tri{width:15px;height:13px;border-radius:0;background:var(--c); -webkit-clip-path:polygon(50% 0,100% 100%,0 100%);clip-path:polygon(50% 0,100% 100%,0 100%)} /* Plakietka usterki: ten sam kształt, co na kafelku (pigulka z liczba), tylko bez liczby. */ .ca .ca-legend i b.pill{width:19px;height:12px;border-radius:999px} .ca .ca-legend .sep{width:1px;height:14px;background:var(--ca-line)} /* Grupy legendy: te same podpisy i ta sama ramka, co grupy paska liczb wyzej — jedna gramatyka na caly naglowek ekranu. Odstep u gory robi miejsce podpisowi, ktory siedzi na krawedzi ramki. */ .ca .ca-legend{align-items:stretch} .ca .ca-legend .lg-group{display:flex;gap:14px;flex-wrap:wrap;align-items:center; padding:9px 12px 8px;background:var(--ca-surface);border:1px solid var(--ca-line); border-radius:var(--ca-r);position:relative} .ca .ca-legend .lg-group::before{content:attr(data-label);position:absolute;top:-7px;left:12px; font-size:9.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase; color:var(--ca-muted);background:var(--ca-surface);padding:0 6px} /* Znacznik rysowany ikona, nie kwadracikiem: ikona jest tym samym znakiem, co na kafelku, wiec legendy nie trzeba tlumaczyc przez kolor. */ .ca .ca-legend i.ico{color:var(--ca-muted)} .ca .ca-legend i.ico svg{width:14px;height:14px;flex:none;color:var(--c)} @media(max-width:700px){.ca .ca-legend .lg-group{width:100%}} /* ======================================================================= PIĘTRA */ .ca .ca-floor{margin-bottom:20px} .ca .ca-floor-head{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:4px 0 11px} /* Strzalka pietra. Obrot, nie druga ikona: jeden znak, ktory zmienia kierunek, czyta sie jako ten sam element w innym stanie — a dwie rozne ikony jako dwa rozne przyciski. */ .ca .ca-floor-chev{width:15px;height:15px;flex:none;color:var(--ca-muted); transition:transform .18s ease} .ca .ca-floor-chev:not(.on){transform:rotate(-90deg)} .ca .ca-floor-head:hover .ca-floor-chev{color:var(--ca-ink-soft)} .ca .ca-floor-name{font-size:13.5px;font-weight:680;letter-spacing:-.01em} .ca .ca-floor-n{font:700 11.5px var(--ca-mono);color:var(--ca-muted);background:var(--ca-surface); border:1px solid var(--ca-line);border-radius:99px;padding:2px 9px} .ca .ca-floor-rule{flex:1;height:1px;background:var(--ca-line)} .ca .ca-floor-bar{display:flex;height:6px;width:130px;border-radius:3px;overflow:hidden; background:var(--ca-sunk);flex:none} .ca .ca-floor-bar i{display:block;height:100%} /* ============================================================ KAFELEK POKOJU Wnętrze jest BIAŁE. Tło w kolorze statusu obniżało kontrast tekstu i ikon, a przy pięciu odcieniach ekran wyglądał jak paleta. Status niosą trzy rzeczy na białym: obramowanie, pasek na lewej krawędzi i kolor numeru z podpisem. Maksymalnie trzy w rzędzie: numer i piktogramy są większe, a oko przebiega kolumnę, nie plamę. */ .ca .ca-grid{display:grid;gap:11px;grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1340px){.ca .ca-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:920px){.ca .ca-grid{grid-template-columns:minmax(0,1fr)}} .ca .ca-room{position:relative;border-radius:var(--ca-r); background:var(--ca-surface);border:2px solid var(--ca-st-unknown); min-height:84px;display:flex;align-items:center;gap:14px; padding:12px 14px 12px 22px;text-align:left;width:100%; transition:transform .1s,box-shadow .12s; /* Zawijanie zamiast progu: kafelek schodzi na dwa rzędy dokładnie wtedy, gdy zabraknie miejsca. Jednorzędowy układ potrzebuje ~430px, a dwie kolumny na ekranie 1024px dają mu 361 — bez tego typ pokoju spadał do zera szerokości, a flaga z liczbą usterek wychodziła za obrys. */ flex-wrap:wrap;align-content:center;row-gap:6px} .ca .ca-room:hover{transform:translateY(-2px);box-shadow:var(--ca-shadow)} /* pasek statusu na lewej krawędzi — jedyna kolorowa płaszczyzna na kafelku. Ma własne zaokrąglenie, żeby kafelek nie potrzebował overflow:hidden, które ucinało pulsujący pierścień świeżego zgłoszenia. */ .ca .ca-room::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px; background:var(--ca-st-unknown);border-radius:9px 0 0 9px} .ca .ca-room.s-dirty {border-color:var(--ca-st-dirty)} .ca .ca-room.s-dirty::before {background:var(--ca-st-dirty)} .ca .ca-room.s-cleaning{border-color:var(--ca-st-cleaning)} .ca .ca-room.s-cleaning::before{background:var(--ca-st-cleaning)} .ca .ca-room.s-cleaned {border-color:var(--ca-st-cleaned)} .ca .ca-room.s-cleaned::before {background:var(--ca-st-cleaned)} .ca .ca-room.s-clean {border-color:var(--ca-st-clean)} .ca .ca-room.s-clean::before {background:var(--ca-st-clean)} .ca .ca-room.s-unknown {border-color:var(--ca-st-unknown)} .ca .ca-room.s-unknown::before {background:var(--ca-st-unknown)} .ca .ca-rm-id{flex:none;width:98px;min-width:0} .ca .ca-room-no{display:block;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.045em; font-variant-numeric:tabular-nums} .ca .ca-room-st{display:block;font-size:11px;font-weight:750;letter-spacing:.08em; text-transform:uppercase;margin-top:6px} .ca .ca-room.s-dirty .ca-room-no,.ca .ca-room.s-dirty .ca-room-st{color:var(--ca-st-dirty)} .ca .ca-room.s-cleaning .ca-room-no,.ca .ca-room.s-cleaning .ca-room-st{color:var(--ca-st-cleaning)} .ca .ca-room.s-cleaned .ca-room-no,.ca .ca-room.s-cleaned .ca-room-st{color:var(--ca-st-cleaned)} .ca .ca-room.s-clean .ca-room-no,.ca .ca-room.s-clean .ca-room-st{color:var(--ca-st-clean)} .ca .ca-room.s-unknown .ca-room-no,.ca .ca-room.s-unknown .ca-room-st{color:var(--ca-st-unknown)} /* Trzy piktogramy: przyjazd, pobyt, wyjazd. Zawsze te same trzy miejsca, również przy zerze — oko czyta pozycję, nie treść. */ .ca .ca-picto{display:flex;align-items:center;gap:4px;flex:none} .ca .ca-pic{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:56px; color:var(--ca-muted);opacity:.28} .ca .ca-pic i{font-size:21px;line-height:1;flex:none} .ca .ca-pic .n{font-weight:700;font-size:18px;line-height:1;font-variant-numeric:tabular-nums} .ca .ca-pic.on{opacity:1} .ca .ca-pic.on.arr{color:var(--ca-arr)} .ca .ca-pic.on.stay{color:var(--ca-stay)} .ca .ca-pic.on.dep{color:var(--ca-dep)} .ca .ca-rm-type{flex:1 1 64px;min-width:0;font-size:11.5px;color:var(--ca-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:4px} /* Flaga siedzi w prawym bloku, w jednym rzędzie z notatką i obsadą. Wystawiona poza obrys czytała się jak własność sąsiada — najgorszy możliwy błąd dla elementu, który ma wskazać JEDEN pokój. */ .ca .ca-room-foot{flex:none;display:flex;align-items:center;gap:8px} .ca .ca-room-foot .who{width:27px;height:27px;font-size:10px;color:#fff;border-radius:50%; display:grid;place-items:center;font-weight:800;flex:none} .ca .ca-room-foot .ico{color:var(--ca-muted);display:grid;place-items:center;flex:none} /* Rozmiary ikon w stopce kafelka. Znaczniki i notatka rysowane sa teraz sprite'em , a nie glifem czcionki Bootstrap Icons. Glif dziedziczyl rozmiar z font-size i nie potrzebowal zadnej reguly — bez wymiarow ma domyslne 300x150, wiec bez tego jedna ikona notatki rozpychala kafelek na cala szerokosc siatki. Ikony sprite'a sa tez tymi samymi znakami, co w calym panelu; Bootstrap Icons byly jedynym miejscem, gdzie usterka wygladala inaczej niz na pasku liczb i w szufladzie. */ .ca .ca-room-foot .ico svg{width:16px;height:16px;display:block} .ca .ca-room-foot .mark svg{width:15px;height:15px;display:block} .ca .ca-flag svg{width:14px;height:14px;display:block} /* Trojkat z liczba usterek danej wagi. Ksztalt niesie informacje: trojkat to znak ostrzegawczy i tak jest czytany, wiec dwa trojkaty obok siebie czyta sie jako dwa poziomy ostrzezenia, a nie jako dwie plakietki. Rysowany `clip-path`, nie obrazkiem ani ramka: skos ma wtedy kolor tla z `--c`, wiec ta sama regula obsluguje wszystkie wagi, a liczba zostaje zwyklym tekstem (da sie ja zaznaczyc i przeczyta ja czytnik ekranu). Liczba wypchnieta w DOL, bo gorna czesc trojkata jest zwezona i cyfra postawiona na srodku pudelka wychodzila za skos. */ .ca .ca-tri{flex:none;width:34px;height:29px;display:flex;align-items:flex-end; justify-content:center;padding-bottom:3px;background:var(--c);color:#fff; font-size:13px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; -webkit-clip-path:polygon(50% 0,100% 100%,0 100%);clip-path:polygon(50% 0,100% 100%,0 100%)} /* KILKA TROJKATOW NACHODZI NA SIEBIE o trzecia czesc szerokosci. Stały obok siebie z peleną przerwą i przy trzech wagach zajmowały tyle miejsca, że stopka kafelka rozjeżdżała się na dwa wiersze, a trzy osobne znaki czytały się jak trzy różne rzeczy do zrobienia. Nachodzenie mówi „to jedna sprawa, w trzech wagach" — tak samo jak nachodzące kółka z inicjałami mówią „więcej niż jedna osoba". Ujemny odstęp obejmuje TAKŻE gap stopki (8 px), bo inaczej odejmowałby tylko przerwę. Cyfry zostają widoczne: leżą na dole, na środku trójkąta, a zakrywany jest jego dolny prawy róg. Włoskowy cień w kolorze kafelka oddziela kształty od siebie — bez niego dwa trójkąty tej samej wagi zlewają się w jedną plamę. */ .ca .ca-room-foot .ca-tri + .ca-tri{margin-left:-19px; filter:drop-shadow(-2px 0 0 var(--ca-surface))} /* W okienku wyboru pokoju ten sam znak, tylko mniejszy — kafelki sa tam male. */ .ca-pmodal .ca-rpick .ca-tri{flex:none;width:27px;height:23px;display:flex;align-items:flex-end; justify-content:center;padding-bottom:2px;background:var(--c);color:#fff; font-size:11px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; -webkit-clip-path:polygon(50% 0,100% 100%,0 100%);clip-path:polygon(50% 0,100% 100%,0 100%)} .ca .ca-flag{position:relative;min-width:32px;height:26px;padding:0 9px;flex:none; border-radius:99px;background:var(--ca-d-crit);color:#fff; display:inline-flex;align-items:center;justify-content:center;gap:4px; font:700 14px var(--ca-mono)} .ca .ca-flag.high{background:var(--ca-d-crit)} .ca .ca-flag.med{background:var(--ca-d-high)} .ca .ca-flag.low{background:var(--ca-d-low)} /* Nieoceniona: obrys zamiast wypełnienia. Brak wagi to brak decyzji, nie najniższa waga — i nie może wyglądać jak jeden z poziomów. */ .ca .ca-flag.nosev{background:var(--ca-surface);color:var(--ca-ink); border:2px dashed var(--ca-muted);box-shadow:none} .ca .ca-flag.blocked{background:var(--ca-blocked)} .ca .ca-room-foot .mark{width:24px;height:24px;border-radius:6px;display:grid; place-items:center;flex:none;color:#fff} .ca .ca-room-foot .mark.cant{background:var(--ca-blocked)} .ca .ca-room-foot .mark.prio{background:var(--ca-d-high)} /* Miotla: ktos jest w tym pokoju TERAZ. Kolor statusu „sprzatany", ten sam, ktorym swieci kafelek i karta powiadomienia — trzy miejsca, jeden kolor. */ .ca .ca-room-foot .mark.cleaning{background:var(--ca-st-cleaning)} /* Świeże zgłoszenie: obwódka całego kafelka OBOK paska statusu, nie zamiast niego. Pokój może być jednocześnie czysty i mieć nowe zgłoszenie. */ .ca .ca-room.alarm{box-shadow:0 0 0 3px color-mix(in srgb,var(--ca-d-crit) 42%,transparent)} .ca .ca-room.alarm:hover{box-shadow:0 0 0 3px var(--ca-d-crit),var(--ca-shadow)} .ca .ca-room.changed{animation:ca-flash 1.8s ease-out} @keyframes ca-flash{0%{box-shadow:0 0 0 3px var(--ca-accent)}100%{box-shadow:0 0 0 0 transparent}} .ca .ca-flag.fresh::after{content:"";position:absolute;inset:-5px;border-radius:99px; border:2.5px solid var(--ca-d-crit);animation:ca-ping 1.7s ease-out infinite} @keyframes ca-ping{0%{opacity:.9;transform:scale(1)}80%{opacity:0;transform:scale(2.1)}100%{opacity:0}} /* Pokoje, ktore przywiozla ostatnia synchronizacja — kilkanascie sekund poswiaty. POSWIATA JEST STANEM, NIE ANIMACJA, i to jest cala roznica wobec .changed obok: blok ponizej gasi animacje przy wylaczonym ruchu, wiec z powiadomienia nie zostaloby wtedy nic. Tak zostaje obwodka, odpada samo powiekszenie. */ .ca .ca-room.imported{transform:translateY(-2px) scale(1.015); box-shadow:0 0 0 3px color-mix(in srgb,var(--ca-accent) 48%,transparent),var(--ca-shadow)} .ca .ca-room.imported:hover{box-shadow:0 0 0 3px var(--ca-accent),var(--ca-shadow)} /* Swieze zgloszenie bije nowe dane: czerwien zostaje na wierzchu. Pokoj moze byc jednoczesnie swiezo zgloszony i swiezo zaimportowany, a dwie obwodki na jednym kafelku nie znacza nic. */ .ca .ca-room.alarm.imported{box-shadow:0 0 0 3px color-mix(in srgb,var(--ca-d-crit) 42%,transparent)} /* Na liscie to samo powiedziane inaczej: wiersza nie da sie podniesc ani obwiesc. */ .ca .ca-table tr.imported>td{background:var(--ca-accent-soft)} .ca .ca-table tr.imported>td:first-child{box-shadow:inset 3px 0 0 var(--ca-accent)} @media(prefers-reduced-motion:reduce){ .ca .ca-flag.fresh::after,.ca .ca-room.changed{animation:none!important} .ca .ca-room:hover,.ca .ca-room.imported{transform:none} } /* ============================================================= LICZBY (ODCZYT) Osobne od .ca-fcell, które wygląda podobnie, ale jest przyciskiem filtra: ma stan aria-pressed, podświetlenie pod kursorem i obramowanie w kolorze wybranej wartości. Liczby na pulpicie administratora nic nie filtrują, więc nie mogą reagować na kursor — element, który wygląda na klikalny i nie jest, to zwykły błąd, tylko trudniejszy do zauważenia niż zły kolor. Wartość jest w --ca-ink, nie w kolorze statusu: to liczby, a nie stany pokoi, i nadanie im palety czystości sugerowałoby związek, którego nie ma. Jedyny wyjątek to warianty .bad i .wait niżej — tam liczba sama jest ostrzeżeniem. */ .ca .ca-stats{display:grid;gap:11px; grid-template-columns:repeat(auto-fit,minmax(148px,1fr))} .ca .ca-stat{background:var(--ca-surface);border:1px solid var(--ca-line); border-radius:var(--ca-r);box-shadow:var(--ca-shadow);padding:13px 15px 12px; display:flex;flex-direction:column;gap:3px;min-width:0} .ca .ca-stat .n{font-weight:700;font-size:30px;line-height:1.05;letter-spacing:-.035em;color:var(--ca-ink); font-variant-numeric:tabular-nums} .ca .ca-stat .l{font-size:11.5px;color:var(--ca-ink-soft);font-weight:560;line-height:1.3} .ca .ca-stat .h{font-size:11px;color:var(--ca-muted);line-height:1.35;margin-top:2px} .ca .ca-stat.bad .n{color:var(--ca-st-dirty)} .ca .ca-stat.wait .n{color:var(--ca-st-cleaning)} .ca .ca-stat.lead{grid-column:span 2} /* Sekcja z nagłówkiem: dwie grupy liczb na jednym ekranie odpowiadają na dwa różne pytania i bez podpisu zlewają się w jedną ścianę cyfr. */ .ca .ca-section{margin-bottom:22px} .ca .ca-section:last-child{margin-bottom:0} .ca .ca-section-t{font-size:10.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ca-muted);margin:0 0 9px} @media(max-width:760px){ /* Kafelek wiodący przestaje być wiodący, gdy w rzędzie mieszczą się dwa -- rozciągnięty na oba tory zostawiłby obok siebie pustkę. */ .ca .ca-stats{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))} .ca .ca-stat{padding:11px 12px} .ca .ca-stat .n{font-size:25px} .ca .ca-stat.lead{grid-column:auto} } /* ==================================================================== POWŁOKA Rama aplikacji z design/panel.html: szyna ikon po lewej, górny pasek, obszar ekranu. Dwie rzeczy przeniesione świadomie inaczej niż w prototypie. Nazwy klas mają prefiks ca-. W prototypie są to .nav, .nav-item, .brand, .top, .live, .btn i .spacer — czyli dokładnie nazwy, które Bootstrap i Semantic UI już zajmują, a oba arkusze są w tej aplikacji wczytywane globalnie. Bez prefiksu .nav z Bootstrapa przestawiłby szynę, a .btn zabrałby wygląd wszystkim przyciskom. Kolory idą z tokenów --ca-*, nie z nieprefiksowanych --accent i --surface z prototypu. Tokeny istnieją już w tym pliku w trzech stanach motywu, więc powłoka dostaje jasny i ciemny za darmo i nie może się rozjechać z warstwą treści. Powłoka NIE jest zamknięta w kontenerze .ca. Ona jest ramą całej strony, a nie wyspą wewnątrz starego wyglądu, więc selektory są tu globalne — dlatego prefiks w nazwach jest tym ważniejszy. */ :root{ --ca-rail:230px; --ca-top:54px; } .ca-app{display:grid;grid-template-columns:var(--ca-rail) 1fr;height:100dvh;overflow:hidden; background:var(--ca-ground);color:var(--ca-ink);font-size:14px;line-height:1.5} .ca-app *{box-sizing:border-box} .ca-app button{cursor:pointer;background:none;border:none;padding:0;color:inherit;font:inherit} .ca-app a{color:inherit;text-decoration:none} .ca-app :focus-visible{outline:2px solid var(--ca-accent);outline-offset:2px;border-radius:5px} /* ------------------------------------------------------------------- szyna */ .ca-rail{background:var(--ca-surface);border-right:1px solid var(--ca-line); display:flex;flex-direction:column;min-height:0} .ca-brand{display:flex;align-items:center;gap:10px;padding:0 16px;height:var(--ca-top); border-bottom:1px solid var(--ca-line);flex:none} /* Znak firmowy. Bez tła i bez zaokrąglenia — obraz ma własny kształt i własne kolory, a kwadrat w barwie akcentu pod nim robiłby z gwiazdki naklejkę. */ .ca-brand-mark{width:29px;height:29px;flex:none;display:grid;place-items:center} .ca-brand-mark img{width:100%;height:100%;object-fit:contain;display:block} .ca-brand-name{font-weight:680;font-size:15px;letter-spacing:-.01em;white-space:nowrap} .ca-nav{padding:12px 10px;display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto} .ca-nav-head{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--ca-muted);padding:12px 11px 6px;white-space:nowrap} .ca-nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--ca-r-sm); color:var(--ca-ink-soft);font-weight:520;width:100%;text-align:left; transition:background .12s,color .12s} /* Wyloguj jest