/* Vikariehubb – mobilanpassad design. Ljust läge är standard; mörkt läge sätts av js/tema.js via data-tema på (system / ljus / mork). */ :root { color-scheme: light; --bg: #f5f7fb; --yta: #ffffff; --yta-2: #eef1f8; --kant: #dde3ee; --kant-stark: #c7d0e2; --text: #17203a; --text-svag: #5a6684; --accent: #2f56d3; --accent-svag: #e7ecfd; --accent-text: #ffffff; --gron: #10704a; --gron-svag: #e0f4ea; --varning: #8a5100; --varning-svag: #fdf0da; --fara: #b3261e; --fara-svag: #fdeceb; --radie: 14px; --skugga: 0 1px 2px rgba(16, 24, 48, 0.06), 0 6px 18px rgba(16, 24, 48, 0.05); --nav-hojd: 60px; --sido: 14px; } :root[data-tema='mork'] { color-scheme: dark; --bg: #0e1220; --yta: #171d2f; --yta-2: #1f2740; --kant: #2b3454; --kant-stark: #3a4568; --text: #eef1fa; --text-svag: #a3add0; --accent: #8aa4ff; --accent-svag: #212c4f; --accent-text: #0e1220; --gron: #6fdcac; --gron-svag: #16342a; --varning: #f2c079; --varning-svag: #362a12; --fara: #ff8f86; --fara-svag: #3a1d1c; --skugga: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.28); } /* Innan js/tema.js hunnit köra: undvik en vit blixt för den som kör mörkt system. */ @media (prefers-color-scheme: dark) { :root:not([data-tema]) { color-scheme: dark; --bg: #0e1220; --yta: #171d2f; --text: #eef1fa; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { padding-bottom: calc(var(--nav-hojd) + env(safe-area-inset-bottom, 0px) + 8px); overscroll-behavior-y: contain; } /* ── Topprad ─────────────────────────────────────────────── */ .topp { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--sido) 10px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--kant); } .topp .rubriker { flex: 1; min-width: 0; } .topp h1 { font-size: 17px; margin: 0; letter-spacing: -0.01em; } .topp .undertitel { font-size: 12px; color: var(--text-svag); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manadspill { background: var(--accent-svag); color: var(--accent); border-radius: 999px; padding: 6px 11px; font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; } .temaknapp { flex: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--kant); background: var(--yta); color: var(--text-svag); display: inline-flex; align-items: center; justify-content: center; } .temaknapp svg { width: 19px; height: 19px; } main { padding: var(--sido); max-width: 720px; margin: 0 auto; } /* ── Kort ────────────────────────────────────────────────── */ .kort { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); box-shadow: var(--skugga); padding: 14px; margin-bottom: 12px; } .kort h2 { font-size: 15px; margin: 0 0 10px; letter-spacing: -0.01em; } .kort h2.med-knapp { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .kort.tat { padding: 12px 14px; } .sektionsrubrik { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-svag); margin: 18px 0 8px; } /* ── Passrader ───────────────────────────────────────────── */ .pass { display: flex; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--kant); cursor: pointer; } .pass:first-of-type { border-top: none; padding-top: 2px; } .pass:last-of-type { padding-bottom: 2px; } .pass .tid { min-width: 54px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; } .pass .tid small { display: block; font-weight: 500; color: var(--text-svag); font-size: 11px; } .pass .info { flex: 1; min-width: 0; } .pass .info .rubrik { font-weight: 600; font-size: 15px; } .pass .info .meta { font-size: 12.5px; color: var(--text-svag); margin-top: 1px; } .pass .summa { font-weight: 700; font-size: 13px; color: var(--gron); background: var(--gron-svag); border-radius: 999px; padding: 4px 9px; white-space: nowrap; } .pass .summa.orapporterad { color: var(--varning); background: var(--varning-svag); } .tom { text-align: center; color: var(--text-svag); padding: 22px 10px; font-size: 14px; } .tom strong { display: block; color: var(--text); margin-bottom: 5px; font-size: 15px; } /* ── Statistik ───────────────────────────────────────────── */ .stat-rutnat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .stat { background: var(--yta-2); border-radius: 12px; padding: 11px 12px; } .stat .varde { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; } .stat .etikett { font-size: 11.5px; color: var(--text-svag); margin-top: 1px; } .stat.stor { grid-column: 1 / -1; background: var(--accent-svag); } .stat.stor .varde { color: var(--accent); font-size: 32px; } .stapel-rad { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; } .stapel-rad .namn { flex: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stapel-rad .spar { flex: 1; height: 7px; background: var(--yta-2); border-radius: 999px; overflow: hidden; } .stapel-rad .fyll { height: 100%; background: var(--accent); border-radius: 999px; } .stapel-rad .varde { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 54px; text-align: right; } /* ── Formulär ────────────────────────────────────────────── */ label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-svag); margin-bottom: 5px; } input, select, textarea, button { font: inherit; } input[type='text'], input[type='date'], input[type='time'], input[type='number'], input[type='password'], input[type='tel'], select, textarea { width: 100%; /* 16px hindrar iOS från att zooma in vid fokus. */ font-size: 16px; padding: 10px 11px; border: 1px solid var(--kant-stark); border-radius: 10px; background: var(--yta); color: var(--text); min-height: 44px; appearance: none; -webkit-appearance: none; } input[type='date'], input[type='time'] { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; } /* iOS visar tomma tidsfält utan text – markera dem så de inte ser trasiga ut. */ input[type='time']:invalid, input[type='date']:invalid { border-style: dashed; color: var(--text-svag); } input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } textarea { min-height: 76px; resize: vertical; line-height: 1.4; } .falt { margin-bottom: 11px; } .falt .hjalp { font-size: 12px; color: var(--text-svag); margin-top: 5px; font-weight: 400; } .rad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kryssrad { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; } .kryssrad input[type='checkbox'] { width: 22px; height: 22px; flex: none; accent-color: var(--accent); } .kryssrad label { margin: 0; font-size: 14px; color: var(--text); font-weight: 600; } .chips { display: flex; flex-wrap: wrap; gap: 7px; } .chip { border: 1px solid var(--kant-stark); background: var(--yta-2); color: var(--text); border-radius: 999px; padding: 8px 12px; font-size: 13px; font-weight: 600; min-height: 38px; cursor: pointer; } .chip.markerad, .chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .chip.tidsmall { font-variant-numeric: tabular-nums; } /* Sammanfattningen i formuläret följer med när man skrollar. */ .summering { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 62px); z-index: 10; background: var(--accent-svag); border-radius: 12px; padding: 10px 13px; margin-bottom: 12px; } .summering .total { font-size: 20px; font-weight: 700; color: var(--accent); } .summering .delar { color: var(--text-svag); font-size: 12.5px; margin-top: 1px; } /* ── Knappar ─────────────────────────────────────────────── */ button { cursor: pointer; } .knapp { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--kant-stark); background: var(--yta); color: var(--text); border-radius: 12px; padding: 11px 14px; font-size: 15px; font-weight: 600; min-height: 46px; } .knapp.primar { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .knapp.fara { color: var(--fara); border-color: var(--fara); background: transparent; } .knapp.bred { width: 100%; } .knapp.liten { padding: 7px 11px; min-height: 36px; font-size: 13px; border-radius: 999px; } .knapp:disabled { opacity: 0.55; cursor: not-allowed; } .knapprad { display: flex; gap: 8px; flex-wrap: wrap; } .knapprad > .knapp { flex: 1; min-width: 130px; } /* Spara-knappen ska alltid vara inom räckhåll på mobilen. */ .sparlist { position: sticky; /* Precis ovanför den fasta bottennavigeringen, inte bakom den. */ bottom: calc(var(--nav-hojd) + env(safe-area-inset-bottom, 0px) + 8px); background: linear-gradient(to bottom, transparent, var(--yta) 26%); padding-top: 14px; margin: 0 -14px -14px; padding-left: 14px; padding-right: 14px; padding-bottom: 14px; border-radius: 0 0 var(--radie) var(--radie); } .radlank { background: none; border: none; color: var(--accent); padding: 4px 0; font-size: 13.5px; font-weight: 600; } /* ── Notiser ─────────────────────────────────────────────── */ .notis { border-radius: 12px; padding: 11px 13px; font-size: 13.5px; margin-bottom: 12px; } .notis.info { background: var(--accent-svag); color: var(--text); } .notis.varning { background: var(--varning-svag); color: var(--varning); } .notis.fel { background: var(--fara-svag); color: var(--fara); } .notis.ok { background: var(--gron-svag); color: var(--gron); } .notis .knapp { margin-top: 9px; } .kalenderhjalp ol { margin: 8px 0 0; padding-left: 20px; } .kalenderhjalp li { margin-bottom: 4px; } .kalenderhjalp .knapprad > .knapp { margin-top: 0; } /* ── Import ──────────────────────────────────────────────── */ .forslag { border: 1px solid var(--kant); border-radius: 12px; padding: 11px; margin-bottom: 9px; background: var(--yta); } .forslag.avmarkt { opacity: 0.5; } .forslag .huvud { display: flex; gap: 10px; align-items: flex-start; } .forslag input[type='checkbox'] { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--accent); } .forslag .titel { font-weight: 600; flex: 1; min-width: 0; } .forslag .detaljer { margin-top: 9px; display: none; } .forslag.oppen .detaljer { display: block; } .forslag .flagga { font-size: 11px; color: var(--varning); background: var(--varning-svag); border-radius: 999px; padding: 2px 7px; } .filzon { border: 2px dashed var(--kant-stark); border-radius: var(--radie); padding: 20px 14px; text-align: center; color: var(--text-svag); background: var(--yta); font-size: 13.5px; } .filzon strong { display: block; color: var(--text); margin-bottom: 3px; font-size: 15px; } .forhandsvisning { max-width: 100%; border-radius: 10px; margin-top: 10px; border: 1px solid var(--kant); } /* ── Bottennavigering ────────────────────────────────────── */ .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: color-mix(in srgb, var(--yta) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--kant); padding-bottom: env(safe-area-inset-bottom, 0px); } .nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--nav-hojd); text-decoration: none; color: var(--text-svag); font-size: 10.5px; font-weight: 600; } .nav a[aria-current='page'] { color: var(--accent); } .nav a svg { width: 21px; height: 21px; } /* ── Toast ───────────────────────────────────────────────── */ .toast-lager { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-hojd) + env(safe-area-inset-bottom, 0px) + 12px); z-index: 50; display: flex; flex-direction: column; gap: 7px; width: min(92vw, 420px); } .toast { background: var(--text); color: var(--bg); border-radius: 12px; padding: 11px 13px; font-size: 13.5px; box-shadow: var(--skugga); animation: upp 0.18s ease-out; } .toast.fel { background: var(--fara); color: #fff; } @keyframes upp { from { opacity: 0; transform: translateY(8px); } } .spinner { width: 17px; height: 17px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: snurra 0.7s linear infinite; } @keyframes snurra { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Små telefoner (iPhone SE m.fl.) */ @media (max-width: 360px) { :root { --sido: 11px; } .stat.stor .varde { font-size: 28px; } .knapprad > .knapp { min-width: 0; } } @media (min-width: 640px) { :root { --sido: 20px; } .stat-rutnat { grid-template-columns: repeat(4, 1fr); } .stat.stor { grid-column: span 2; } .kort { padding: 18px; } .sparlist { position: static; margin: 0; padding: 0; background: none; } }