/* assets/ui.css - Lokhöfe Responsive UI layer Purpose: - consistent layout across Desktop / Tablet / Mobile - better touch targets and readable typography Intended to be loaded at the end of (auto-inject) so it can override duplicate inline styles. */ :root{ --ui-max: 1100px; --ui-pad: 22px; --ui-pad-sm: 16px; --ui-gap: 12px; --ui-gap-lg: 18px; --ui-radius: 22px; --ui-radius-md: 18px; --ui-radius-sm: 14px; --ui-pill: 999px; --ui-border: rgba(255,255,255,.18); --ui-border-strong: rgba(255,255,255,.26); --ui-card: rgba(255,255,255,.10); --ui-card-2: rgba(255,255,255,.08); --ui-field: rgba(255,255,255,.12); --ui-muted: rgba(255,255,255,.78); --ui-muted2: rgba(255,255,255,.62); --ui-shadow: 0 22px 70px rgba(0,0,0,.28); --ui-shadow-sm: 0 14px 40px rgba(0,0,0,.20); --ui-danger: rgba(239,68,68,.18); --ui-danger-border: rgba(239,68,68,.45); --ui-ok: rgba(34,197,94,.16); --ui-ok-border: rgba(34,197,94,.32); } *{box-sizing:border-box} html,body{height:100%} /* Safe global improvements */ img,svg,video,canvas{max-width:100%;height:auto} pre,code{overflow-x:auto} /* Prevent iOS zoom on focus by keeping 16px+ on small screens */ @media (max-width: 820px){ input,select,textarea,button{font-size:16px} } /* Main outer wrapper used across pages (low-risk: only manage padding) */ .wrap{padding: calc(var(--ui-pad) + env(safe-area-inset-top)) calc(var(--ui-pad) + env(safe-area-inset-right)) calc(var(--ui-pad) + env(safe-area-inset-bottom)) calc(var(--ui-pad) + env(safe-area-inset-left));} @media (max-width: 600px){ .wrap{padding: calc(var(--ui-pad-sm) + env(safe-area-inset-top)) calc(var(--ui-pad-sm) + env(safe-area-inset-right)) calc(var(--ui-pad-sm) + env(safe-area-inset-bottom)) calc(var(--ui-pad-sm) + env(safe-area-inset-left));} } /* Panels / Cards (both class names exist in the project) */ .panel, .card{ width: min(var(--ui-max), 96vw); margin: 14px auto; padding: var(--ui-pad); border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-card); box-shadow: var(--ui-shadow); backdrop-filter: blur(10px); } @media (max-width: 600px){ .panel, .card{ padding: 16px; border-radius: 18px; } } /* Headings */ h1{margin:0 0 10px;line-height:1.1} h2{margin:18px 0 8px;line-height:1.2} /* Top bar layouts */ .topbar, .top{ display:flex; justify-content:space-between; align-items:flex-start; gap: var(--ui-gap); flex-wrap: wrap; } /* Text helpers */ .muted{opacity:.85;color:var(--ui-muted)} .small{font-size:12px;opacity:.82;color:var(--ui-muted2)} /* Buttons */ .btn, .primary, button.btn, button.primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius: var(--ui-pill); border:1px solid var(--ui-border); background: rgba(255,255,255,.14); color: rgba(255,255,255,.95); font-weight:800; cursor:pointer; text-decoration:none; min-height:44px; box-shadow: var(--ui-shadow-sm); transition: transform .08s ease, background .12s ease, border-color .12s ease; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .btn:hover, .primary:hover, button.btn:hover, button.primary:hover{ transform: translateY(-1px); background: rgba(255,255,255,.18); border-color: var(--ui-border-strong); } .btn:active, .primary:active, button:active{transform: translateY(1px)} .btn[disabled], button[disabled]{opacity:.55;cursor:not-allowed;transform:none} .btn.danger, button.danger{ background: var(--ui-danger); border-color: var(--ui-danger-border); } /* Forms */ label{ display:block; font-size:13px; margin: 10px 0 6px; color: var(--ui-muted); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } input,select,textarea{ width:100%; padding:12px 12px; border-radius: var(--ui-radius-sm); border:1px solid rgba(255,255,255,.22); background: var(--ui-field); color:#fff; outline:none; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* IMPORTANT: do not treat checkboxes/radios like text inputs. Also ensure the checked state is clearly visible on dark backgrounds. */ input[type="checkbox"], input[type="radio"]{ width:auto; min-width:20px; min-height:20px; height:20px; padding:0; margin:0; vertical-align:middle; cursor:pointer; /* Use a strong accent so the checkmark/background is visible */ accent-color: #ff3ea5; /* Keep native control rendering (prevents invisible checkmarks on some browsers) */ appearance: auto; background: initial; border: initial; box-shadow:none; } .pill input[type="checkbox"], .pill input[type="radio"]{ flex: 0 0 auto; } textarea{min-height:110px;resize:vertical} .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--ui-gap); } @media (max-width: 980px){ .grid{grid-template-columns:1fr} } .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius: var(--ui-pill); border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); font-size:13px; } /* Alerts */ .alert{ margin: 12px 0 16px; padding: 12px 14px; border-radius: var(--ui-radius-sm); border:1px solid rgba(255,255,255,.18); background: rgba(239,68,68,.14); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:13px; } .alert.ok{ background: var(--ui-ok); border-color: var(--ui-ok-border); } /* Tiles */ .tiles{ display:grid; gap: var(--ui-gap); grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 12px; } @media (max-width: 980px){ .tiles{grid-template-columns: repeat(2, minmax(0,1fr))} } @media (max-width: 600px){ .tiles{grid-template-columns: 1fr} } .tile{ display:flex; gap: 12px; padding: 16px; border-radius: var(--ui-radius-md); border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color:inherit; text-decoration:none; align-items:flex-start; transition: transform .08s ease, background .12s ease, border-color .12s ease; } .tile:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); } .tileIcon{font-size:24px;line-height:1;margin-top:2px} .tileTitle{ font-weight:900; font-size:16px; display:flex; align-items:center; gap:8px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .tileDesc{ margin-top:6px; opacity:.82; font-size:13px; line-height:1.35; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* Badge */ .badge{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 8px; border-radius: var(--ui-pill); font-size:12px; font-weight:900; border:1px solid rgba(255,255,255,.18); background: rgba(239,68,68,.18); } /* Tables */ .tableWrap{ margin-top:14px; border:1px solid rgba(255,255,255,.16); border-radius: var(--ui-radius-md); overflow:hidden; background: rgba(255,255,255,.06); } .tableScroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } table{ width:100%; border-collapse:separate; border-spacing:0; } th,td{ padding:12px; border-bottom:1px solid rgba(255,255,255,.14); vertical-align:top; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } th{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.80); background: rgba(255,255,255,.08); } @media (max-width: 760px){ /* If a table is not wrapped in .tableScroll, allow horizontal scroll anyway */ table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} th,td{padding:10px} } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} } /* Focus visibility */ :focus-visible{ outline: 3px solid rgba(255,255,255,.55); outline-offset: 2px; border-radius: 8px; }