/* ===================================================================== Household Dashboard — theme + layout Dark / light / auto (prefers-color-scheme) with a manual override applied via set by app.js. ===================================================================== */ /* FÄRGERNA UR OCULARA-TEMA (../Oculara-tema/oculara-tema.css, beslut Måns 2026-08-19): Torpet passas in i ekosystemet — temats väggar, text och accent, fyra färgteman (Petrol förval, Natt, Plommon, Grafit) som byts med data-farg. Nytt värde skrivs FÖRST i temat, sedan här; tools/temakontroll.js jämför vid varje release-bygge. */ :root { --accent: #0E7C63; --accent-2: #0A5E4B; --radius: 14px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 24px rgba(0,0,0,.06); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Light palette (default) */ :root, :root[data-theme="light"] { --bg: #F7F6F2; --surface: #ffffff; --surface-2: color-mix(in srgb,#0E2E2A 2.8%,#ffffff); --text: #12302C; --text-dim: #43605A; --border: color-mix(in srgb,#0E2E2A 13%,transparent); --shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 24px rgba(0,0,0,.06); } /* Dark palette */ :root[data-theme="dark"] { --accent: #39C79E; --accent-2: #8FF0D2; --bg: #173F39; --surface: #1B4A43; --surface-2: color-mix(in srgb,#FFFFFF 7%,#1B4A43); --text: #E9F2F0; --text-dim: #B4CBC6; --border: color-mix(in srgb,#FFFFFF 10%,transparent); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35); } /* Auto: follow OS when no manual override is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --accent:#39C79E; --accent-2:#8FF0D2; --bg:#173F39; --surface:#1B4A43; --surface-2:color-mix(in srgb,#FFFFFF 7%,#1B4A43); --text:#E9F2F0; --text-dim:#B4CBC6; --border:color-mix(in srgb,#FFFFFF 10%,transparent); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35); } } /* ---- Färgtemana ur OCULARA-TEMA (petrol = förval, inget block) ---- */ :root[data-farg="natt"], :root[data-farg="natt"][data-theme="light"] { --accent:#106C86; --accent-2:#0B5266; --bg:#F5F6F8; --text:#16283F; --text-dim:#42556E; --surface-2:color-mix(in srgb,#101E30 2.8%,#ffffff); --border:color-mix(in srgb,#101E30 13%,transparent); } :root[data-farg="natt"][data-theme="dark"] { --accent:#35C6D8; --accent-2:#8FE4F0; --bg:#16283F; --surface:#1B3049; --surface-2:color-mix(in srgb,#FFFFFF 7%,#1B3049); --text:#E7EEF8; --text-dim:#B2C4DA; --border:color-mix(in srgb,#FFFFFF 10%,transparent); } :root[data-farg="plommon"], :root[data-farg="plommon"][data-theme="light"] { --accent:#9B2A6B; --accent-2:#7A1F53; --bg:#F9F5F7; --text:#3B2135; --text-dim:#65475A; --surface-2:color-mix(in srgb,#2A1526 2.8%,#ffffff); --border:color-mix(in srgb,#2A1526 13%,transparent); } :root[data-farg="plommon"][data-theme="dark"] { --accent:#EE8FC0; --accent-2:#F8BEDA; --bg:#3B2135; --surface:#48293F; --surface-2:color-mix(in srgb,#FFFFFF 7%,#48293F); --text:#F4EAF0; --text-dim:#D0B8C6; --border:color-mix(in srgb,#FFFFFF 10%,transparent); } :root[data-farg="grafit"], :root[data-farg="grafit"][data-theme="light"] { --accent:#544BB0; --accent-2:#403893; --bg:#F6F6F5; --text:#24272A; --text-dim:#54585B; --surface-2:color-mix(in srgb,#1B1D1F 2.8%,#ffffff); --border:color-mix(in srgb,#1B1D1F 13%,transparent); } :root[data-farg="grafit"][data-theme="dark"] { --accent:#A79BF5; --accent-2:#C9C1FA; --bg:#26292B; --surface:#2F3336; --surface-2:color-mix(in srgb,#FFFFFF 7%,#2F3336); --text:#EDEEEF; --text-dim:#C2C6C9; --border:color-mix(in srgb,#FFFFFF 10%,transparent); } @media (prefers-color-scheme: dark) { :root[data-farg="natt"]:not([data-theme]) { --accent:#35C6D8; --accent-2:#8FE4F0; --bg:#16283F; --surface:#1B3049; --surface-2:color-mix(in srgb,#FFFFFF 7%,#1B3049); --text:#E7EEF8; --text-dim:#B2C4DA; --border:color-mix(in srgb,#FFFFFF 10%,transparent); } } @media (prefers-color-scheme: dark) { :root[data-farg="plommon"]:not([data-theme]) { --accent:#EE8FC0; --accent-2:#F8BEDA; --bg:#3B2135; --surface:#48293F; --surface-2:color-mix(in srgb,#FFFFFF 7%,#48293F); --text:#F4EAF0; --text-dim:#D0B8C6; --border:color-mix(in srgb,#FFFFFF 10%,transparent); } } @media (prefers-color-scheme: dark) { :root[data-farg="grafit"]:not([data-theme]) { --accent:#A79BF5; --accent-2:#C9C1FA; --bg:#26292B; --surface:#2F3336; --surface-2:color-mix(in srgb,#FFFFFF 7%,#2F3336); --text:#EDEEEF; --text-dim:#C2C6C9; --border:color-mix(in srgb,#FFFFFF 10%,transparent); } } * { box-sizing: border-box; } [hidden] { display: none !important; } /* annars vinner .p-form{display:grid} över hidden */ html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } /* ---- Top bar + tabs ---- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .7rem 1.1rem; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .brand { font-weight: 700; letter-spacing: -.02em; margin-right: .5rem; } .brand .dot { color: var(--accent); } .tabs { display: flex; gap: .25rem; flex: 1; overflow-x: auto; } /* På smala skärmar får fliklisten en uttonad högerkant som signalerar att den går att svajpa — annars ser "Kale…" ut som ett fel, inte som en lista. */ @media (max-width: 760px) { /* Stående mobil: logga + fyra ikonknappar fyller hela bredden, så fliklisten (som får krympa tack vare overflow) blev 0 px bred och försvann. Låt den i stället radbryta till en egen, fullbred rad under loggan. */ .topbar { flex-wrap: wrap; gap: .5rem .6rem; padding: .6rem .8rem; } .brand { margin-right: auto; } .tabs { order: 10; flex: 1 1 100%; min-width: 100%; margin: 0 -.8rem; padding: 0 .8rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); } .tabs::-webkit-scrollbar { display: none; } .tab-sep { margin-right: .4rem; } } .tab { padding: .5rem .9rem; border-radius: 999px; color: var(--text-dim); font-weight: 600; font-size: .92rem; white-space: nowrap; } .tab:hover { background: var(--surface-2); color: var(--text); } .tab.active { background: var(--accent); color: #fff; } /* Subtle divider that pushes the personal tabs (Privat/Oculara) to the right */ .tab-sep { flex: none; align-self: center; width: 1px; height: 1.3rem; background: var(--border); margin-left: auto; margin-right: .6rem; } .topbar .spacer { flex: 0; } .iconbtn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 10px; padding: .45rem .6rem; cursor: pointer; font-size: .95rem; } .iconbtn:hover { background: var(--surface-2); } .iconbtn.active { border-color: var(--accent); color: var(--accent); } /* ---- Layout ---- */ .wrap { max-width: 1100px; margin: 0 auto; padding: 1.4rem 1.1rem 4rem; } .grid { display: grid; gap: 1.1rem; } @media (min-width: 780px){ .grid.cols-2 { grid-template-columns: 1fr 1fr; } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; } .card h2 { margin: 0 0 .2rem; font-size: 1.02rem; } .card .sub { color: var(--text-dim); font-size: .85rem; margin-bottom: .8rem; } .row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .kpi { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; } .muted { color: var(--text-dim); } .pill { font-size: .78rem; padding: .12rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); } /* ---- Controls ---- */ select, input, button { font-family: var(--font); font-size: .92rem; color: var(--text); } .segmented { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; } .segmented button { border: 0; background: transparent; color: var(--text-dim); padding: .35rem .7rem; border-radius: 8px; cursor: pointer; font-weight: 600; } .segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .btn { border: 0; background: var(--accent); color: #fff; font-weight: 600; padding: .55rem 1rem; border-radius: 10px; cursor: pointer; } .btn.ghost { background: var(--surface-2); color: var(--text); } /* ---- Table ---- */ table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--border); } th { color: var(--text-dim); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tr:hover td { background: var(--surface-2); } .neg { color: #ef4444; } .pos { color: #16a34a; } .cat-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; margin-right:.4rem; vertical-align:middle; } .cat-select { border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:.2rem .3rem; } /* ---- Login ---- */ .login-wrap { min-height: 100vh; display: grid; place-items: center; } .login-card { width: min(380px, 92vw); } .login-card label { display:block; font-size:.85rem; color:var(--text-dim); margin:.6rem 0 .2rem; } .login-card input { width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); } .error { color:#ef4444; font-size:.88rem; margin-top:.6rem; } canvas { max-width: 100%; } /* ===================================================================== Arbete (work_*) — övertid, störningar, komptid ===================================================================== */ :root { --w-disturb: #be123c; --w-disturb-bg: #fde7ec; --w-overtime: #b45309; --w-overtime-bg:#fdf0dc; --w-comp: #0f766e; --w-comp-bg: #d8f2ef; } :root[data-theme="dark"] { --w-disturb: #fb7185; --w-disturb-bg: #3d1522; --w-overtime: #fbbf24; --w-overtime-bg:#3a2c10; --w-comp: #2dd4bf; --w-comp-bg: #0d2f2c; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --w-disturb: #fb7185; --w-disturb-bg: #3d1522; --w-overtime: #fbbf24; --w-overtime-bg:#3a2c10; --w-comp: #2dd4bf; --w-comp-bg: #0d2f2c; } } .w-chip { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:600; padding:.1rem .5rem; border-radius:999px; background:var(--surface-2); color:var(--text-dim); white-space:nowrap; } .w-chip.disturbance { background:var(--w-disturb-bg); color:var(--w-disturb); } .w-chip.overtime { background:var(--w-overtime-bg); color:var(--w-overtime); } .w-chip.comp_out { background:var(--w-comp-bg); color:var(--w-comp); } .w-chip.ok { background:#ddf3e3; color:#15803d; } .w-chip.accent { background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); } /* Månadssammanfattning: har posten mejlats? */ .w-chip.w-mailed { background:#ddf3e3; color:#15803d; font-weight:500; } .w-chip.w-unmailed { background:#fdecc8; color:#9a5b00; } :root[data-theme="dark"] .w-chip.w-mailed { background:#10301c; color:#4ade80; } :root[data-theme="dark"] .w-chip.w-unmailed { background:#3a2a08; color:#fbbf24; } .w-mailcard.pending { border-color:#d99a2b; } .w-preview { font-size:.8rem; line-height:1.35; white-space:pre-wrap; background:var(--surface-2); padding:.8rem 1rem; border-radius:10px; margin-top:.8rem; max-height:32rem; overflow:auto; } .w-preview-float { position:fixed; inset:4rem 1rem 1rem; z-index:50; margin:0; max-height:none; box-shadow:0 8px 32px rgba(0,0,0,.35); cursor:pointer; } :root[data-theme="dark"] .w-chip.ok { background:#10301c; color:#4ade80; } .w-neg { color: var(--w-comp); } .w-mono { font-variant-numeric: tabular-nums; } /* Nyckeltal */ .w-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; } @media (min-width:760px) { .w-kpis { grid-template-columns:repeat(4,1fr); } } .w-kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:.8rem .9rem; } .w-kpi .lbl { font-size:.73rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; font-weight:600; } .w-kpi .val { font-size:1.6rem; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .w-kpi .sub { font-size:.76rem; color:var(--text-dim); } .w-kpi.disturb .val { color:var(--w-disturb); } .w-kpi.overtime .val { color:var(--w-overtime); } .w-kpi.comp .val { color:var(--w-comp); } /* Mätare för arbetstidslagens tak */ .w-gauge { margin-bottom:.65rem; } .w-gauge .top { display:flex; justify-content:space-between; align-items:baseline; font-size:.84rem; gap:.5rem; } .w-gauge .top b { font-variant-numeric:tabular-nums; } .w-track { height:7px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:.25rem; } .w-track i { display:block; height:100%; border-radius:999px; background:var(--accent); } .w-track i.warn { background:#d97706; } .w-track i.crit { background:#dc2626; } .w-track i.ok { background:#16a34a; } .w-alert { display:flex; gap:.6rem; align-items:flex-start; background:var(--w-disturb-bg); border:1px solid color-mix(in srgb, var(--w-disturb) 30%, transparent); border-radius:11px; padding:.65rem .8rem; font-size:.87rem; } .w-alert b { color:var(--w-disturb); } /* Stor registreringsknapp — den som används tio gånger oftare än de andra */ .btn.w-primary { background:var(--w-disturb); padding:.8rem 1.3rem; font-size:1rem; } .btn.w-primary:hover { filter:brightness(1.06); } /* Veckoradernas delsummor i loggen */ tr.w-week td { background:var(--surface-2); font-weight:650; font-size:.79rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; } tr.w-week td b { color:var(--text); font-variant-numeric:tabular-nums; } tr.w-night td:first-child { box-shadow:inset 2px 0 0 var(--w-disturb); } tr.w-edit > td { background:var(--surface-2); } /* Formulärfält i modulen */ .w-field { padding:.45rem .55rem; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text); font-size:.9rem; font-family:var(--font); } .w-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; } .w-form label.lbl { font-size:.75rem; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } details.w-more > summary { cursor:pointer; color:var(--text-dim); font-size:.85rem; font-weight:600; padding:.35rem 0; list-style:none; } details.w-more > summary::-webkit-details-marker { display:none; } details.w-more > summary::before { content:'▸ '; } details.w-more[open] > summary::before { content:'▾ '; } details.w-more > div { padding-top:.5rem; } /* Scrollbara tabeller: utan min-bredd på tabellen "kollapsar" den i stället för att sidscrolla — kolumnerna blir några tecken breda och raderna skärmhöga. Omslaget .w-tablewrap + min-width ger riktig sidscroll. */ .w-tablewrap { overflow-x: auto; } .w-tablewrap > table { min-width: 720px; } /* Loggen på mobil: tabellen ersätts av en kortlista under 760 px. */ .w-cards { display: none; } @media (max-width: 759px) { .w-tablewrap.w-hide-mobile { display: none; } .w-cards { display: flex; flex-direction: column; gap: .6rem; } } .w-cards .wk { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .78rem; font-weight: 650; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; padding: .55rem .2rem .25rem; border-bottom: 1px solid var(--border); } .w-cards .wk b { color: var(--text); font-variant-numeric: tabular-nums; font-size: .9rem; } .w-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: .65rem .8rem; display: flex; flex-direction: column; gap: .35rem; } .w-card.night { box-shadow: inset 3px 0 0 var(--w-disturb); } .w-card .top { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .w-card .top .when { font-weight: 650; font-variant-numeric: tabular-nums; } .w-card .top .mins { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .w-card .desc { font-size: .86rem; color: var(--text-dim); } .w-card .foot { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .78rem; color: var(--text-dim); } .w-card .foot .pill { margin-left: auto; } .w-card form.w-form { border-top: 1px solid var(--border); padding-top: .5rem; margin-top: .2rem; } /* Radioknappar som chips (källa, längd) */ .w-picks { display:flex; flex-wrap:wrap; gap:.35rem; } /* Chips som är riktiga knappar (snabbval för tid, återanvända etiketter) */ .pick-btn { border:1px solid var(--border); background:var(--surface-2); border-radius:999px; padding:.35rem .7rem; font-size:.85rem; font-weight:600; color:var(--text-dim); cursor:pointer; font-family:var(--font); } .pick-btn:hover { color:var(--text); border-color:var(--accent); } .w-picks label { border:1px solid var(--border); background:var(--surface-2); border-radius:999px; padding:.35rem .7rem; font-size:.85rem; font-weight:600; color:var(--text-dim); cursor:pointer; } .w-picks input { position:absolute; opacity:0; width:0; height:0; } .w-picks input:checked + span { color:#fff; } .w-picks label:has(input:checked) { background:var(--accent); border-color:var(--accent); color:#fff; } .w-picks input:focus-visible + span { outline:2px solid var(--accent); outline-offset:3px; } /* ===================================================================== Husdjur (pet_*) — layout "Moduler" (2026-09-02): enradigt sidhuvud, statusremsa, fast rutnät med fyllda kort, panel för registrering. Statusfärgerna följer Arbete-modulens mönster (ok / snart / förfallen); korten själva är neutrala — färg betyder status, inget annat. ===================================================================== */ :root { --p-ok:#15803d; --p-ok-bg:#ddf3e3; --p-soon:#b45309; --p-soon-bg:#fdf0dc; --p-due:#be123c; --p-due-bg:#fde7ec; --p-info:#0369a1; --p-info-bg:#e0f2fe; } :root[data-theme="dark"] { --p-ok:#4ade80; --p-ok-bg:#10301c; --p-soon:#fbbf24; --p-soon-bg:#3a2c10; --p-due:#fb7185; --p-due-bg:#3d1522; --p-info:#7dd3fc; --p-info-bg:#0c2a3d; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --p-ok:#4ade80; --p-ok-bg:#10301c; --p-soon:#fbbf24; --p-soon-bg:#3a2c10; --p-due:#fb7185; --p-due-bg:#3d1522; --p-info:#7dd3fc; --p-info-bg:#0c2a3d; } } .wrap.p-wide{max-width:1900px;padding-top:.9rem} .lbl{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;font-weight:600} .num{font-variant-numeric:tabular-nums} .grid>*,.card{min-width:0} .btn.small{padding:.3rem .65rem;font-size:.8rem} .btn.on{border:1px solid var(--accent);color:var(--accent)} .p-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;padding:.1rem .5rem; border-radius:999px;background:var(--surface-2);color:var(--text-dim);white-space:nowrap} .p-chip.ok{background:var(--p-ok-bg);color:var(--p-ok)} .p-chip.soon{background:var(--p-soon-bg);color:var(--p-soon)} .p-chip.due{background:var(--p-due-bg);color:var(--p-due)} .p-chip.info{background:var(--p-info-bg);color:var(--p-info)} .p-chip.accent{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)} .p-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap} .p-head h2{margin:0;font-size:.92rem} .p-hint{font-size:.82rem;color:var(--text-dim)} .p-saved{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--p-ok-bg);color:var(--p-ok); border:1px solid color-mix(in srgb,var(--p-ok) 30%,transparent);border-radius:11px;padding:.45rem .8rem;margin-bottom:.7rem;font-size:.88rem} .p-saved b{color:var(--text)} .p-saved .pill{margin-left:auto} /* Sidhuvud, en rad */ .p-top{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);padding:.45rem .9rem;min-height:62px;position:relative;z-index:5} .p-avatar{width:50px;height:50px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;flex:none} .p-avatar svg,.p-avatar img{width:100%;height:100%;display:block;object-fit:cover} .p-id{min-width:0;flex:0 1 auto} .p-id h1{margin:0;font-size:1.05rem;letter-spacing:-.02em;line-height:1.1} .p-tagline{font-size:.78rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .p-facts{display:flex;gap:.3rem;flex-wrap:wrap;min-width:0} .p-top-r{margin-left:auto;display:flex;gap:.4rem;align-items:center;flex:none} .p-popwrap{position:relative} .p-pop{position:absolute;right:0;top:calc(100% + .4rem);width:min(360px,92vw);background:var(--surface);border:1px solid var(--border); border-radius:12px;box-shadow:var(--shadow);padding:.8rem .9rem;z-index:30} .p-spark{width:100%;height:78px;display:block;margin:.3rem 0} .p-wlist{display:flex;flex-wrap:wrap;gap:.3rem} .p-wlist .pill{cursor:pointer} .p-menu{position:relative} .p-menu>summary{list-style:none;cursor:pointer;display:inline-block} .p-menu>summary::-webkit-details-marker{display:none} .p-menu-list{position:absolute;right:0;top:calc(100% + .4rem);min-width:220px;background:var(--surface);border:1px solid var(--border); border-radius:12px;box-shadow:var(--shadow);padding:.35rem;z-index:30;display:flex;flex-direction:column} .p-menu-list a,.p-menu-list label{display:block;padding:.45rem .7rem;border-radius:8px;color:var(--text);font-size:.88rem;cursor:pointer} .p-menu-list a:hover,.p-menu-list label:hover{background:var(--surface-2)} /* Statusremsa */ .p-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:.6rem 0} .p-kpi{min-height:56px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow); padding:.4rem .8rem;display:flex;align-items:center;gap:.7rem;position:relative;overflow:hidden} .p-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--st,var(--border))} .p-kpi.ok{--st:var(--p-ok)} .p-kpi.soon{--st:var(--p-soon)} .p-kpi.due{--st:var(--p-due)} .p-kpi-main{display:flex;flex-direction:column;flex:none} .p-kpi .val{font-weight:700;font-size:.98rem;letter-spacing:-.02em;line-height:1.1} .p-kpi.ok .val{color:var(--p-ok)} .p-kpi.soon .val{color:var(--p-soon)} .p-kpi.due .val{color:var(--p-due)} .p-kpi.none .val{color:var(--text-dim)} .p-kpi .sub{font-size:.74rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .p-kpi .btn{margin-left:auto;flex:none} /* Rutnätet: fasta rutor, korten fyller och scrollar inuti */ .p-board{display:grid;gap:.6rem;grid-template-columns:1fr} .p-board>.card{display:flex;flex-direction:column;padding:0;overflow:hidden;min-width:0} .p-board>.card>.p-head{padding:.6rem .9rem .4rem;flex:none} .p-body{padding:0 .9rem .7rem;flex:1;min-height:0;overflow:auto} .p-body.flush{padding:0} @media (min-width:780px){ .p-board{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(200px,auto)} .p-a-vacc{grid-column:span 2} } @media (min-width:1300px){ .p-board{grid-template-columns:repeat(4,1fr);grid-auto-rows:236px} .p-a-todo{grid-column:1;grid-row:1} .p-a-live{grid-column:2;grid-row:1/3} .p-a-notes{grid-column:3;grid-row:1} .p-a-share{grid-column:4;grid-row:1} .p-a-para{grid-column:1;grid-row:2} .p-a-vacc{grid-column:3/5;grid-row:2} } @media (min-width:1900px){ .p-board{grid-auto-rows:250px} } /* Att göra */ .p-todo{list-style:none;margin:0;padding:0} .p-todo li{display:grid;grid-template-columns:4.8rem 1fr auto;gap:.5rem;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--border)} .p-todo li:last-child{border-bottom:0} .p-todo .when{font-weight:650;font-variant-numeric:tabular-nums;font-size:.86rem} .p-todo .when.due{color:var(--p-due)} .p-todo .when.soon{color:var(--p-soon)} .p-todo .what{display:flex;flex-direction:column;min-width:0;font-size:.88rem} .p-todo .what small{color:var(--text-dim);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Just nu */ .p-cam{position:relative;flex:none} .p-cam img{display:block;width:100%;height:200px;object-fit:cover;background:var(--surface-2)} @media (min-width:1300px){.p-cam img{height:236px}} @media (min-width:1900px){.p-cam img{height:262px}} .zoomable{cursor:zoom-in} #zoomBox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,0,0,.7);cursor:zoom-out} #zoomBox img{width:min(90vw,1200px);max-height:92vh;object-fit:contain;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#000} #zoomBox.cam img{width:min(96vw,2200px)} .p-zoom-hint{position:absolute;bottom:1rem;color:#fff;font-size:.8rem;opacity:0} #zoomBox.pinned .p-zoom-hint{opacity:.8} .p-cam-bar{display:flex;align-items:center;gap:.5rem;font-size:.74rem;color:var(--text-dim);padding:.3rem .9rem 0} .p-cam-bar .p-check{padding:0;font-size:.74rem;margin-left:auto} .p-cam-err{display:none;padding:.5rem .9rem;font-size:.8rem} .p-cam.err img{display:none} .p-cam.err .p-cam-err{display:block} .p-trk{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .8rem;padding-top:.5rem} .p-trk div{display:flex;flex-direction:column;gap:.05rem;min-width:0} .p-trk .v{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15} .p-trk .v small{font-size:.74rem;font-weight:500;color:var(--text-dim)} .p-trk .s{font-size:.74rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .p-bar{height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:.25rem;display:block} .p-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)} .p-trk-foot{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.6rem} details.p-more>summary{cursor:pointer;color:var(--text-dim);font-size:.78rem;font-weight:600;padding:.45rem 0 .2rem;list-style:none} details.p-more>summary::-webkit-details-marker{display:none} details.p-more>summary::before{content:'▸ '} details.p-more[open]>summary::before{content:'▾ '} /* Anteckningar + Dela */ .p-notes{list-style:none;margin:0;padding:0} .p-notes li{display:grid;grid-template-columns:5.6rem 1fr auto;gap:.5rem;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.86rem;align-items:start} .p-notes li:last-child{border-bottom:0} .p-notes .when{font-weight:650;font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:.8rem} .p-note-add{display:flex;gap:.4rem;padding:.5rem .9rem .7rem;border-top:1px solid var(--border);flex:none} .p-note-add .p-field{flex:1} .p-share{display:grid;grid-template-columns:1fr 1fr;gap:.45rem .8rem;font-size:.84rem} .p-share div{display:flex;flex-direction:column;gap:.05rem;min-width:0} /* Tabeller */ .p-tablewrap{overflow-x:auto} .p-table{width:100%;border-collapse:collapse;font-size:.84rem} .p-table th,.p-table td{padding:.4rem .5rem;vertical-align:top;border-bottom:1px solid var(--border);text-align:left} .p-table th{position:sticky;top:0;background:var(--surface);color:var(--text-dim);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .p-table th:first-child,.p-table td:first-child{padding-left:.9rem} .p-table th:last-child,.p-table td:last-child{padding-right:.9rem} .p-table tr:last-child td{border-bottom:0} .p-table td.mono{font-variant-numeric:tabular-nums;white-space:nowrap} .p-table td.iv{font-weight:600} .p-table td small{display:block;color:var(--text-dim);font-size:.76rem} .p-table tr.off td{opacity:.55} /* Formulär, panel, popover */ .p-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem .6rem} .p-form .f{display:flex;flex-direction:column;gap:.15rem} .p-form .f.wide{grid-column:1/-1} .p-field{padding:.45rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font-size:.88rem;font-family:var(--font);width:100%} textarea.p-field{resize:vertical} .p-check{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;padding:.45rem 0} .p-picks{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.7rem} .p-pick{border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:.3rem .7rem;font-size:.82rem;font-weight:600;color:var(--text-dim);cursor:pointer;font-family:var(--font)} .p-pick.active{background:var(--accent);border-color:var(--accent);color:#fff} .p-overlay{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:39} .p-drawer{position:fixed;top:64px;right:0;bottom:0;width:min(440px,94vw);background:var(--surface);border:1px solid var(--border); border-right:0;box-shadow:var(--shadow);border-radius:14px 0 0 14px;padding:.9rem 1.1rem;transform:translateX(110%);transition:transform .2s ease;z-index:40;overflow:auto} .p-drawer.open{transform:none} .p-drawer .p-head{margin-bottom:.7rem} .p-drawer .p-form{grid-template-columns:1fr 1fr} /* Kattvaktssidan m.fl. (kattvakt.php, pet_settings.php) */ .p-sitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem .9rem;font-size:.9rem} .p-sitter div{display:flex;flex-direction:column;gap:.1rem} @media (max-width:779px){ .p-top{flex-wrap:wrap;min-height:0} .p-facts{order:5;flex-basis:100%} .p-top-r{margin-left:auto} .p-kpis{grid-template-columns:1fr 1fr} .p-kpi{flex-wrap:wrap;gap:.3rem .6rem} .p-kpi .sub{flex-basis:100%} .p-kpi .btn{margin-left:auto} .p-todo li{grid-template-columns:4.2rem 1fr} .p-todo li .btn{grid-column:2} .p-share{grid-template-columns:1fr} .p-drawer{top:0;width:100vw;border-radius:0} }