:root { --ink:#17211b; --muted:#65736a; --paper:#f5f3ed; --panel:#fffdf8; --line:#d9ded5; --green:#246b4a; --green-dark:#174b35; --lime:#d7ec77; --coral:#e8785d; --shadow:0 20px 55px rgba(23,33,27,.09); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.5 "Trebuchet MS", "Segoe UI", sans-serif; }
button, input, select { font:inherit; } button { cursor:pointer; }
.shell { max-width:1220px; margin:auto; padding:26px 30px 52px; }
header { display:flex; justify-content:space-between; align-items:flex-start; gap:25px; margin-bottom:42px; }
.brand { display:flex; gap:13px; align-items:center; font-weight:800; letter-spacing:.02em; } .mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--green); color:var(--lime); font-size:21px; }
.brand small { display:block; color:var(--muted); font-weight:400; letter-spacing:0; }
.nav { display:flex; gap:5px; padding:4px; background:#e7e9e1; border-radius:12px; } .nav button, .nav a { border:0; background:transparent; color:var(--muted); padding:9px 15px; border-radius:9px; font-weight:700; text-decoration:none; } .nav .active { color:var(--panel); background:var(--green); } .language-button { border:1px solid var(--line)!important; background:var(--panel)!important; color:var(--green-dark)!important; }
.eyebrow { color:var(--coral); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:800; } h1,h2,h3,p { margin-top:0; } h1 { max-width:640px; margin:8px 0 15px; font:800 clamp(25px,3.3vw,45px)/.98 Georgia,serif; letter-spacing:-.045em; } h2 { font:800 32px/1.05 Georgia,serif; letter-spacing:-.03em; } h3 { margin-bottom:4px; font-size:18px; } .highlight { color:var(--coral); }
.lede { color:var(--muted); max-width:565px; font-size:12px; } .hero { display:grid; grid-template-columns:1fr 370px; gap:70px; align-items:end; margin-bottom:42px; } .stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .stat { padding:18px; border:1px solid var(--line); background:var(--panel); border-radius:14px; box-shadow:var(--shadow); } .stat strong { display:block; font:800 35px Georgia,serif; } .stat span { color:var(--muted); font-size:13px; }
.layout { display:grid; grid-template-columns:1fr 345px; gap:24px; align-items:start; } .panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:24px; } .panel-head { display:flex; justify-content:space-between; gap:15px; align-items:start; margin-bottom:20px; } .panel-head h2 { margin-bottom:4px; font-size:26px; } .panel-head p { color:var(--muted); margin-bottom:0; }
.filters { display:flex; gap:9px; margin-bottom:15px; } input,select { width:100%; min-width:0; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); padding:11px 12px; outline-color:var(--green); } .category-group { margin-bottom:10px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; } .category-group summary { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; cursor:pointer; color:var(--green-dark); font-weight:800; list-style:none; } .category-group summary::-webkit-details-marker { display:none; } .category-group summary::after { content:"+"; font-size:20px; font-weight:400; } .category-group[open] summary::after { content:"−"; } .category-group .materials { padding:0 10px 10px; }
.materials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .material { display:grid; grid-template-columns:78px 1fr; gap:8px 12px; align-items:start; padding:14px; border:1px solid var(--line); border-radius:11px; transition:.2s; } .material:hover { border-color:var(--green); transform:translateY(-1px); } .material > span { grid-column:2; grid-row:1 / span 2; } .material .quantity { grid-column:1; grid-row:1; width:78px; border-radius:3px; } .material small { color:var(--muted); display:block; } .tag { display:inline-block; margin-top:7px; padding:2px 7px; border-radius:20px; background:#edf1e7; color:var(--green-dark); font-size:11px; }
.material-info { position:relative; display:inline-grid; place-items:center; width:22px; height:22px; margin-left:5px; border:1px solid var(--green); border-radius:50%; background:#fff; color:var(--green-dark); font-size:13px; font-weight:800; vertical-align:middle; } .material-info img { position:absolute; z-index:4; left:28px; top:-10px; display:none; width:170px; max-height:150px; object-fit:contain; padding:5px; border:1px solid var(--line); border-radius:6px; background:#fff; box-shadow:var(--shadow); } .material-info:hover img, .material-info:focus img { display:block; } .material-info.no-image { opacity:.45; }
.image-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:24px; background:rgba(23,33,27,.58); } .image-modal.hidden { display:none; } .image-modal figure { position:relative; max-width:min(90vw,720px); max-height:90vh; margin:0; padding:12px; border-radius:10px; background:var(--panel); } .image-modal img { display:block; max-width:100%; max-height:78vh; object-fit:contain; } .image-modal figcaption { margin-top:8px; color:var(--muted); font-weight:800; } .image-modal-close { position:absolute; top:-12px; right:-12px; width:30px; height:30px; border:0; border-radius:50%; background:var(--coral); color:#fff; font-size:20px; line-height:1; }
.add-material { grid-column:1; grid-row:2; width:78px; padding:5px 7px; color:var(--green-dark); background:var(--lime); border:1px solid #b9d35b; border-radius:3px; font-size:12px; font-weight:800; } .add-material.added { color:#fff; background:var(--green); border-color:var(--green); }
.form-grid { display:grid; gap:12px; } label { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:700; } .required { color:var(--coral); } .summary { margin:20px 0; padding:14px; border-radius:10px; background:#f0f2e9; color:var(--green-dark); } .summary strong { font-size:24px; } .primary,.secondary { width:100%; border:0; border-radius:9px; padding:13px 16px; font-weight:800; } .primary { color:#fff; background:var(--green); } .primary:hover { background:var(--green-dark); } .secondary { width:auto; padding:9px 12px; background:transparent; border:1px solid var(--line); color:var(--ink); }
.remember-row { display:flex; align-items:center; gap:8px; font-weight:400; } .remember-row input { width:17px; height:17px; accent-color:var(--green); }
.notice,.manual-message { display:none; margin-top:14px; padding:12px; border-radius:9px; background:#e7f2d5; color:var(--green-dark); font-weight:700; } .admin-grid { display:grid; gap:15px; } .order { padding:18px; border:1px solid var(--line); border-radius:12px; background:#fff; } .order-top { display:flex; justify-content:space-between; gap:15px; align-items:start; } .order-top h3 { margin:0; } .order-top small,.meta,.empty { color:var(--muted); } .status { padding:5px 9px; border-radius:20px; background:#fff0d4; color:#8a5a14; font-size:12px; font-weight:800; white-space:nowrap; } .status.returned { background:#e7e9e1; color:var(--muted); } .loan-items { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; } .loan-item { display:flex; gap:8px; align-items:center; padding:7px 9px; border:1px solid var(--line); border-radius:8px; color:var(--ink); font-size:13px; } .loan-item.done { text-decoration:line-through; color:var(--muted); background:#f1f2ed; } .quantity { width:74px; padding:7px 8px; } .order-actions { display:flex; justify-content:space-between; gap:10px; align-items:center; border-top:1px solid var(--line); padding-top:13px; } .order-actions button { width:auto; }
.admin-tabs { display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line); } .admin-tab { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); padding:8px 11px; font-weight:800; } .admin-tab.active { color:var(--green-dark); border-bottom-color:var(--green); } .login-wrap { display:grid; place-items:center; min-height:52vh; } .login-panel { width:min(100%,410px); } .login-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:15px; border-radius:14px; background:#e7f2d5; color:var(--green-dark); font-size:22px; } .login-error { display:none; padding:10px 12px; border-radius:9px; background:#fbe8e2; color:#9a3f2d; font-weight:700; } .manual-order { margin-bottom:18px; border:1px solid var(--line); border-radius:10px; padding:16px; background:#f6f7f1; } .manual-order summary { cursor:pointer; color:var(--green-dark); font-weight:800; } .manual-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:15px; } .manual-materials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:15px 0; } .manual-material { display:grid; grid-template-columns:1fr 70px; align-items:center; gap:8px; padding:9px; border:1px solid var(--line); border-radius:6px; background:#fff; } .manual-material small { display:block; color:var(--muted); }
.hidden { display:none!important; } .empty { padding:40px 10px; text-align:center; }
@media (max-width:800px) { .shell{padding:20px 16px 40px} header{margin-bottom:28px; align-items:center; flex-wrap:wrap} .hero,.layout{grid-template-columns:1fr; gap:25px} .hero{margin-bottom:28px} .materials,.manual-materials{grid-template-columns:1fr} .manual-fields{grid-template-columns:1fr} }
@media (max-width:460px) { .nav button,.nav a{padding:8px 9px;font-size:13px} .filters{flex-direction:column} .panel{padding:17px} .order-top{flex-direction:column;gap:8px} }

/* Fuldbredde materialekort på bestillingssiden */
#borrowView .category-group .materials { grid-template-columns:1fr; padding:0 10px 10px; }
#borrowView .material { grid-template-columns:90px minmax(0,1fr) 88px; gap:8px 14px; align-items:center; min-height:92px; }
#borrowView .material-image { grid-column:1; grid-row:1; display:grid; place-items:center; width:78px; height:68px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#f6f7f1; }
#borrowView .material-image img { width:100%; height:100%; object-fit:contain; }
#borrowView .material-image span { color:var(--muted); font-size:12px; }
#borrowView .material > span { grid-column:2; grid-row:1; min-width:0; }
#borrowView .material-controls { grid-column:3; grid-row:1; display:grid; gap:6px; align-items:center; }
#borrowView .material-controls .quantity { width:100%; border-radius:3px; }
#borrowView .material-controls .add-material { grid-column:auto; grid-row:auto; width:100%; }
@media (max-width:560px) { #borrowView .material { grid-template-columns:72px minmax(0,1fr) 74px; gap:8px; } #borrowView .material-image { width:64px; height:64px; } #borrowView .material-info img { left:auto; right:0; top:24px; } }


/* Materieladministration */
.material-admin-panel { margin-bottom:24px; }
.material-form { display:grid; gap:16px; margin-bottom:28px; padding:18px; border:1px solid var(--line); border-radius:12px; background:#f6f7f1; }
.material-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.material-file-label { grid-column:1 / -1; }
.active-row { display:flex; align-items:center; gap:8px; align-self:end; min-height:44px; }
.active-row input { width:18px; height:18px; accent-color:var(--green); }
.material-form-actions { display:flex; gap:10px; }
.material-form-actions .primary { width:auto; }
.material-preview { display:flex; align-items:center; gap:12px; color:var(--muted); font-weight:700; }
.material-preview img { width:100px; height:75px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#fff; }
.material-list-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; }
.material-list-head h3 { margin:0; }
.material-list-head input { max-width:320px; }
.material-admin-list { display:grid; gap:10px; }
.material-admin-group { margin-bottom:10px; }
.material-admin-group .material-admin-list { padding:0 10px 10px; }
.material-admin-card { display:grid; grid-template-columns:90px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.material-admin-card.inactive { opacity:.58; background:#f1f2ed; }
.material-admin-card small,.material-admin-card span { display:block; color:var(--muted); }
.material-admin-image { display:grid; place-items:center; width:90px; height:68px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#f6f7f1; color:var(--muted); font-size:11px; text-align:center; }
.material-admin-image img { width:100%; height:100%; object-fit:contain; }
.material-admin-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.material-info{position:relative;width:22px;height:22px;border:1px solid #7ea68a;border-radius:50%;background:#fff;color:#246b4a;cursor:pointer;padding:0;overflow:visible;}
.material-info img{position:absolute;left:30px;top:-20px;width:180px;max-height:180px;object-fit:contain;background:#fff;border:1px solid #d9ded5;border-radius:8px;padding:4px;box-shadow:0 10px 20px rgba(0,0,0,.15);display:none;z-index:1000;}
@media (hover:hover){.material-info:hover img{display:block;}}
@media (hover:none){.material-info img{display:none!important;}}
@media (max-width:800px) { .material-form-grid{grid-template-columns:1fr}.material-admin-card{grid-template-columns:70px 1fr}.material-admin-actions{grid-column:1/-1;justify-content:flex-start}.material-list-head{align-items:stretch;flex-direction:column}.material-list-head input{max-width:none} }