/* Vaultti — design-järjestelmä (lämmin neutraali paletti, vain vaalea teema). Lähde: UI-design handover 2026-07. Google Fonts ladataan base.html:n issa. */ :root { --bg: #f6f4f0; --card: #ffffff; --ink: #26231e; --muted: #837b70; --faint: #a89f92; --faint-2: #b4ab9d; --line: #e8e3db; --line-strong: #e2dccf; --line-soft: #f1ede6; --surface-2: #faf8f4; --accent: #2b2824; --accent-bg: #eeedec; --green-bg: #eef3ed; --green-fg: #3f6b43; --green-bd: #cfe0d0; --amber-bg: #f7efdf; --amber-fg: #8a6416; --amber-bd: #e6d6ae; --red-bg: #f6ebe9; --red-fg: #9a443d; --red-bd: #e8cbc7; --neutral-bg: #f2ede5; --neutral-fg: #6b6459; --neutral-bd: #e2dccf; --head: 'Newsreader', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace; --r-card: 16px; --r-sm: 10px; --r-pill: 999px; --r-plate: 6px; --shadow-card: 0 1px 2px rgba(38,35,30,.03), 0 18px 40px -26px rgba(38,35,30,.2); --shadow-card-sm: 0 1px 2px rgba(38,35,30,.03), 0 14px 34px -22px rgba(38,35,30,.22); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; font-size: 15px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: rgba(43,40,36,.14); } button { font-family: inherit; } h1, h2, h3 { font-family: var(--head); font-weight: 500; margin: 0; } h1 { font-size: 32px; letter-spacing: -.01em; } h2 { font-size: 19px; } h3 { font-size: 16px; margin-top: 1rem; } .muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: .82rem; } .mono { font-family: var(--mono); } .nowrap { white-space: nowrap; } .center { text-align: center; } .eyebrow { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; } /* ── Shell / sivupalkki ─────────────────────────────────────────────────────── */ .shell { display: flex; min-height: 100vh; } .sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; width: 256px; flex: 0 0 256px; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 22px 18px; overflow-y: auto; } .sidebar .brand { display: flex; align-items: center; gap: 11px; padding: 2px 4px 22px; } .sidebar .brand-mark { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .sidebar .brand-name { font-family: var(--head); font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: .01em; } .sidebar .brand-sub { font: 500 10px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-top: 3px; } .nav-label { font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint-2); padding: 6px 8px 8px; } .nav-label.second { padding-top: 20px; } .nav-group { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--muted); } .nav-item:hover { text-decoration: none; background: var(--surface-2); } .nav-item .ico { color: var(--faint); display: inline-flex; flex: 0 0 auto; } .nav-item .count { margin-left: auto; font: 600 11px/1 var(--mono); color: var(--faint-2); } .nav-item.active { background: var(--accent-bg); border-color: var(--line-strong); color: var(--accent); font-weight: 600; } .nav-item.active .ico { color: var(--accent); } .sidebar-user { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 11px; } .sidebar-user .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--sans); flex: 0 0 auto; } .sidebar-user .who { min-width: 0; line-height: 1.3; } .sidebar-user .name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user .role { font-size: 11px; color: var(--faint); } .sidebar-user button.logout { margin-left: auto; background: none; border: none; color: var(--faint-2); cursor: pointer; display: inline-flex; padding: 4px; } .sidebar-user button.logout:hover { color: var(--accent); } /* Mobiili off-canvas -drawer */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(30,26,20,.38); backdrop-filter: blur(1px); z-index: 50; } .mobile-topbar { position: sticky; top: 0; z-index: 40; display: none; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(246,244,240,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .mobile-topbar .icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); cursor: pointer; } .mobile-topbar .brand-mini { display: flex; align-items: center; gap: 9px; } .mobile-topbar .brand-mini .mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; } .mobile-topbar .brand-mini .name { font-family: var(--head); font-size: 18px; font-weight: 600; } .mobile-topbar .bell-btn { margin-left: auto; position: relative; } .mobile-topbar .bell-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-fg); } .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .content { width: 100%; max-width: 1040px; margin: 0 auto; padding: 36px 44px 88px; } @media (max-width: 860px) { .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 270px; z-index: 60; transform: translateX(-104%); transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: 0 24px 70px -18px rgba(38,35,30,.45); } .sidebar.open { transform: translateX(0); } .mobile-topbar { display: flex; } .content { padding: 20px 16px 64px; } } /* ── Sivun otsikko ───────────────────────────────────────────────────────────── */ .pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .pagehead.sub { align-items: center; margin-bottom: 6px; } .back-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--faint); font: 500 13px/1 var(--sans); cursor: pointer; padding: 2px 0; margin-bottom: 12px; } .back-link:hover { color: var(--accent); text-decoration: none; } .actions { display: flex; gap: 9px; } /* ── Napit ───────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; font: 600 13px/1 var(--sans); border-radius: 9px; padding: 9px 14px; border: 1px solid var(--line-strong); background: #fff; color: #3f3a32; } .btn:hover { text-decoration: none; border-color: #d9cdb6; } .btn.small { font-size: 12px; padding: 7px 11px; border-radius: 8px; } .btn.primary { color: #fff; background: var(--accent); border-color: var(--accent); } .btn.primary:hover { opacity: .92; border-color: var(--accent); } .btn.ghost { background: #fff; border-color: var(--line-strong); color: #3f3a32; } .btn.danger { color: var(--red-fg); background: #fff; border-color: var(--red-bd); } .btn:disabled { opacity: .5; cursor: not-allowed; } .inline { display: inline; } /* ── Badge / pilleri / kilpi ─────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font: 600 12px/1.2 var(--sans); letter-spacing: .01em; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral-fg); border: 1px solid var(--neutral-bd); } .badge.small { font-size: 11px; padding: 2px 8px; } .badge.green { background: var(--green-bg); color: var(--green-fg); border-color: var(--green-bd); } .badge.amber { background: var(--amber-bg); color: var(--amber-fg); border-color: var(--amber-bd); } .badge.red { background: var(--red-bg); color: var(--red-fg); border-color: var(--red-bd); } .badge.accent { background: var(--accent-bg); color: var(--accent); border-color: var(--line-strong); font-family: var(--mono); } .chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font: 500 12px/1 var(--sans); color: var(--muted); background: #f5f2ec; border: 1px solid #ece5da; } .plate { display: inline-flex; align-items: center; font: 600 12.5px/1 var(--mono); letter-spacing: .09em; color: var(--ink); background: var(--surface-2); border: 1px solid #d9d2c6; border-radius: var(--r-plate); padding: 5px 9px; white-space: nowrap; flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } .plate.lg { font-size: 15px; padding: 7px 12px; } /* ── Kortit ──────────────────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 20px 22px; margin-bottom: 16px; } .card.empty { text-align: center; color: var(--faint); padding: 2.5rem; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; margin-bottom: 16px; } .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; } @media (max-width: 780px) { .grid-2col { grid-template-columns: 1fr; } } .card-clickable { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card-sm); transition: border-color .15s, transform .15s; } .card-clickable:hover { border-color: #d9cdb6; transform: translateY(-2px); text-decoration: none; } /* Etusivun KPI-kortit */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; } .stat-card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 17px 18px; cursor: pointer; box-shadow: var(--shadow-card-sm); transition: border-color .15s, transform .15s; display: flex; flex-direction: column; color: var(--ink); } .stat-card:hover { border-color: #d9cdb6; transform: translateY(-2px); text-decoration: none; } .stat-card .row { display: flex; align-items: center; justify-content: space-between; } .stat-card .value { font-family: var(--head); font-size: 34px; font-weight: 500; line-height: 1; } .stat-card .ico { color: #c3b8a4; display: inline-flex; } .stat-card .label { margin-top: 5px; font-size: 13px; color: var(--muted); font-weight: 500; } /* Autot/Aseet-kortit */ .vehicle-card, .firearm-card { padding: 18px 19px; } .vehicle-card .top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vehicle-card .name { font-family: var(--head); font-size: 20px; font-weight: 500; line-height: 1.15; } .vehicle-card .sub { color: var(--faint); font-size: 13px; margin-top: 2px; } .vehicle-card .km-row { display: flex; align-items: center; gap: 7px; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--muted); } .vehicle-card .km-row .ico { color: #c3b8a4; display: inline-flex; } .vehicle-card .km-row .km { font: 500 13px/1 var(--mono); } .firearm-card .top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .firearm-card .title { font-family: var(--head); font-size: 19px; font-weight: 500; line-height: 1.15; } .firearm-card .sub { color: var(--faint); font-size: 13px; margin-top: 2px; } .firearm-card .ico-box { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .firearm-card .chips-row { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line-soft); } /* ── dl.props ────────────────────────────────────────────────────────────────── */ dl.props { display: grid; grid-template-columns: max-content 1fr; gap: 11px 22px; margin: 14px 0 0; } dl.props dt { color: var(--faint); font-size: 13px; } dl.props dd { margin: 0; font-size: 14px; font-weight: 500; word-break: break-word; } /* Mobiili: pinoa label ja arvo allekkain, ettei pitkä kenttä valu ruudun yli */ @media (max-width: 640px) { dl.props { grid-template-columns: 1fr; gap: 2px 0; } dl.props dt { margin-top: 12px; } dl.props dt:first-of-type { margin-top: 0; } dl.props dd { margin: 0 0 2px; } } .notes-box { margin-top: 16px; padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); font-size: 13px; color: #6b6459; line-height: 1.55; white-space: pre-wrap; } /* ── Avattava lisätieto-osio (details/summary) ───────────────────────────────── */ .lisa-box { margin-top: 6px; } .lisa-box > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 500; font-size: 17px; color: var(--ink); } .lisa-box > summary::-webkit-details-marker { display: none; } .lisa-box > summary::before { content: "›"; display: inline-block; color: var(--faint); font-size: 20px; line-height: 1; transition: transform .15s; transform: rotate(0deg); } .lisa-box[open] > summary::before { transform: rotate(90deg); } .lisa-box .props { margin-top: 14px; } /* ── Taulukot ────────────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 14px 12px 0; } .table td { padding: 13px 14px 13px 0; border-top: 1px solid var(--line-soft); vertical-align: top; } .table td:last-child, .table th:last-child { padding-right: 0; } .rowactions { display: flex; gap: .4rem; flex-wrap: wrap; } /* ── Kuvagalleria ────────────────────────────────────────────────────────────── */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; } .gallery-item { position: relative; aspect-ratio: 4/3; border-radius: var(--r-sm); border: 1px solid #e7e1d7; overflow: hidden; background: var(--surface-2); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-item .imgdel { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(38,35,30,.55); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; } .gallery-add { aspect-ratio: 4/3; border-radius: var(--r-sm); border: 1px dashed #d5ccbc; background: #fdfcfa; color: var(--faint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: 500 12px/1 var(--sans); padding: 0; } .gallery-add:hover { border-color: var(--accent); color: var(--accent); } .gallery-add input[type=file] { display: none; } .tinythumb { display: inline-block; width: 22px; height: 22px; border-radius: 4px; overflow: hidden; vertical-align: middle; margin-left: 4px; } .tinythumb img { width: 100%; height: 100%; object-fit: cover; } /* ── Muistutusrivit (etusivu) ────────────────────────────────────────────────── */ .section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; } .section-head.tight { margin-bottom: 14px; } .section-head .ico { display: inline-flex; } .notice-pill { display: flex; align-items: center; gap: 8px; padding: 8px 13px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); } .notice-pill .ico { color: var(--red-fg); display: inline-flex; } .notice-pill b { font-weight: 700; } .reminder-list { display: flex; flex-direction: column; } .reminder-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--line-soft); text-decoration: none; color: inherit; border-radius: 8px; } .reminder-row:first-child { border-top: none; } .reminder-row:hover { text-decoration: none; background: var(--surface-2); } .reminder-row .main { flex: 1; min-width: 0; } .reminder-row .name { font-weight: 600; font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reminder-row .sub { color: var(--faint); font-size: 13px; } .reminder-row .side { text-align: right; flex: 0 0 auto; } .reminder-row .side .date { display: block; font: 500 12px/1.3 var(--mono); color: #6b6459; } .reminder-row .side .cost { font-size: 12px; color: var(--faint); } /* Mobiili: lyhennä nimi ellipsillä, ettei katsastus-badge työnny ruudun yli */ @media (max-width: 560px) { .reminder-row .main { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .reminder-row .badge { flex: 0 0 auto; } } .reminder-row .tl-icon-sm { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } /* ── Aikajana (auton tapahtumat) ─────────────────────────────────────────────── */ .timeline { list-style: none; margin: 8px 0 0; padding: 0; } .tl-item { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-soft); } .tl-item:first-child { border-top: none; } .tl-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .tl-icon.katsastus { background: var(--red-bg); color: var(--red-fg); } .tl-body { flex: 1; min-width: 0; } .tl-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .tl-head .title { font-size: 15px; font-weight: 600; } .tl-head .date { margin-left: auto; font: 500 12px/1 var(--mono); color: var(--faint); } .tl-desc { margin: 7px 0 0; font-size: 13.5px; color: #5c564c; line-height: 1.55; } .tl-meta { margin-top: 8px; font-size: 12.5px; color: var(--faint); font-weight: 500; } .tl-actions { display: flex; gap: 9px; margin-top: 11px; } .type-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); font: 600 11px/1.3 var(--sans); letter-spacing: .02em; background: var(--neutral-bg); color: #7a7266; border: 1px solid var(--neutral-bd); text-transform: capitalize; } /* ── Laskut (event_invoices) ─────────────────────────────────────────────────── */ .invoice-box { margin-top: 11px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); } .invoice-box.tila-vahvistettu { border-color: var(--green-bd); } .invoice-box.tila-epaonnistui { border-color: var(--red-bd); } .inv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .inv-head .fname { font-size: 13px; font-weight: 500; font-family: var(--mono); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inv-status-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--green-fg); font-weight: 600; } .inv-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; align-items: end; } .inv-form .check { grid-column: 1 / -1; margin: 4px 0; } .inv-extra { display: flex; gap: 9px; margin-top: 8px; } @media (max-width: 620px) { .inv-form { grid-template-columns: 1fr; } } /* ── Aseluvat / kortit ───────────────────────────────────────────────────────── */ .license-card { border: 1px solid var(--line-soft); border-radius: 12px; padding: 15px 16px; background: var(--surface-2); } .license-card img { width: 100%; max-height: 160px; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 10px; } .license-imgs { display: flex; gap: 6px; margin-bottom: 10px; } .license-imgs a { flex: 1; min-width: 0; } .license-imgs img { width: 100%; max-height: 140px; margin-bottom: 0; } .license-card .head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; color: var(--accent); } .license-card .numero { font: 500 13px/1 var(--mono); color: var(--ink); margin-bottom: 9px; } .license-card .voimassa { font-size: 12.5px; color: var(--muted); line-height: 1.5; } .license-card .notes { font-size: 12.5px; color: var(--faint); margin-top: 4px; } .list-plain { list-style: none; margin: 12px 0 0; padding: 0; } .list-plain li { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line-soft); } .list-plain li:first-child { border-top: none; } .list-plain .ico { color: #c3b8a4; display: inline-flex; } /* ── Lomakkeet ───────────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field > span { font: 600 11px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); } input, select, textarea { font: 14px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 11px; width: 100%; } input[type=file] { padding: 7px; border-style: dashed; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; align-items: end; } @media (max-width: 620px) { .grid2, .grid4 { grid-template-columns: 1fr; } } .check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .check input { width: auto; } .uploadrow { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .uploadrow input[type=file] { flex: 1; min-width: 180px; } .moverow, .moveform { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .moveform select { min-width: 150px; width: auto; } /* ── Suodatinpalkki (audit) ──────────────────────────────────────────────────── */ .filterbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .filterbar .field { min-width: 140px; flex: 1; margin-bottom: 0; } .filterbar select, .filterbar input { background: var(--surface-2); } /* ── Diff (audit-loki) ───────────────────────────────────────────────────────── */ ul.diff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } ul.diff li { font-size: 12.5px; } ul.diff .k { color: var(--faint); } ul.diff .old { color: var(--red-fg); text-decoration: line-through; } ul.diff .arrow { color: var(--faint-2); } ul.diff .new { color: var(--green-fg); } /* ── Flash-viestit ───────────────────────────────────────────────────────────── */ .flashes { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; } .flash { padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; font-size: 13.5px; } .flash.ok { border-color: var(--green-bd); background: var(--green-bg); color: var(--green-fg); } .flash.error { border-color: var(--red-bd); background: var(--red-bg); color: var(--red-fg); } .flash.warn { border-color: var(--amber-bd); background: var(--amber-bg); color: var(--amber-fg); } /* ── Dialogit (native ) ──────────────────────────────────────────────── */ dialog.dlg { border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; max-width: 640px; width: calc(100% - 2rem); max-height: 90vh; overflow-y: auto; background: #fff; color: var(--ink); box-shadow: var(--shadow-card); } dialog.dlg::backdrop { background: rgba(30,26,20,.42); } dialog.dlg h2 { margin-bottom: 14px; } .dlg-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; } .dlg-actions.between { justify-content: space-between; align-items: center; } /* ── Placeholder-näkymä (esim. tulossa oleva osio) ───────────────────────────── */ .placeholder-view { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; } .placeholder-view .ico-box { width: 56px; height: 56px; border-radius: 16px; background: var(--neutral-bg); color: #c3b8a4; display: inline-flex; align-items: center; justify-content: center; } .placeholder-view p { margin: 0; max-width: 340px; color: var(--faint); font-size: 14px; line-height: 1.6; } /* ── Kirjautuminen ───────────────────────────────────────────────────────────── */ .loginpage { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: var(--bg); } .loginbox { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 2.2rem; width: 100%; max-width: 360px; } .loginbox .brand-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .loginbox h1 { text-align: center; font-size: 26px; } .loginbox p.muted { text-align: center; margin: 4px 0 20px; } .loginbox .btn { width: 100%; justify-content: center; margin-top: 6px; } /* ── Kosketuskohteet mobiilissa ──────────────────────────────────────────────── */ @media (pointer: coarse) { .btn { padding: 11px 16px; } .btn.small { padding: 9px 12px; } .gallery-item .imgdel { width: 28px; height: 28px; font-size: 16px; } } @media (max-width: 860px) { .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .pagehead { align-items: flex-start; } }