/* admin.css - Responsiv adminstil för KFV Signage */
/* Senast uppdaterad: 2026-06-01 16:00 | av: Klasse */

:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --text: #15202b;
    --muted: #607080;
    --border: #d9e2ec;
    --primary: #0f5f8f;
    --primary-dark: #0a4365;
    --success: #16794c;
    --warning: #a86b00;
    --danger: #b42318;
    --shadow: 0 14px 40px rgba(15, 47, 72, 0.10);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: #082033; color: #fff; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: #fff; font-weight: 800; letter-spacing: .03em; }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: #e8f5ff; color: #082033; }
.brand-text { font-size: 1.15rem; }
.topbar-user { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.topbar-user a { color: #fff; }
.role-pill { padding: .25rem .55rem; border-radius: 999px; background: rgba(255,255,255,.15); font-size: .82rem; }

.admin-nav { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1.5rem; background: #fff; border-bottom: 1px solid var(--border); }
.admin-nav a { padding: .65rem .9rem; border-radius: .7rem; color: var(--text); font-weight: 700; }
.admin-nav a:hover { background: #eaf3fb; text-decoration: none; }

.admin-main { width: min(1280px, calc(100% - 2rem)); margin: 1.3rem auto 3rem; }
.admin-footer { width: min(1280px, calc(100% - 2rem)); margin: 2rem auto; color: var(--muted); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }

.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.page-head p { margin: .25rem 0 0; color: var(--muted); }

.panel, .stat-card, .login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 1.2rem; box-shadow: var(--shadow); padding: 1.2rem; }
.panel h2 { margin-top: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-card strong { display: block; font-size: 2rem; color: var(--primary); }
.stat-card span { color: var(--muted); }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.align-start { align-items: start; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid label { display: grid; gap: .35rem; font-weight: 700; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea,
.login-card input { width: 100%; padding: .8rem .85rem; border: 1px solid var(--border); border-radius: .75rem; font: inherit; background: #fff; }
.form-grid textarea { resize: vertical; }
.check { align-content: center; grid-template-columns: auto 1fr !important; display: flex !important; align-items: center; gap: .6rem !important; }
.check input { width: auto !important; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.wide-form { max-width: 980px; }
.content-block { padding: 1rem; border: 1px dashed var(--border); border-radius: 1rem; background: #f9fbfd; }
.content-block h2 { margin-top: 0; }
.template-form-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.template-form-panel .full { grid-column: 1 / -1; }
.template-warning { margin-top: 1rem; padding: .75rem .9rem; border-radius: .8rem; background: #fff8e7; color: var(--warning); border: 1px solid rgba(168,107,0,.25); font-weight: 700; }
.template-preview-panel { padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; }
.template-preview-panel h2 { margin: 0 0 .8rem; }
.template-preview-frame { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: .9rem; overflow: hidden; box-shadow: var(--shadow); }
.template-preview-frame .kfv-signage-screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; color: #000; font-family: Mulish, Arial, Helvetica, sans-serif; box-sizing: border-box; }
.template-preview-frame .kfv-signage-screen * { box-sizing: border-box; }
.template-preview-frame .kfv-safe-area { position: absolute; inset: 5.2%; }
.template-preview-frame .kfv-panel { background: #fff; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
.template-preview-frame .kfv-panel-inner { padding: 2.2%; }
.template-preview-frame .kfv-label { display: inline-flex; align-items: center; font-size: clamp(.55rem, 1.45vw, 1.05rem); line-height: 1; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #febd01; }
.template-preview-frame .kfv-title { margin: .55rem 0 0; font-size: clamp(1.8rem, 4.6vw, 3.1rem); line-height: .98; font-weight: 900; }
.template-preview-frame .kfv-title-medium { margin: .4rem 0 0; font-size: clamp(1.25rem, 3.2vw, 2.2rem); line-height: 1.02; font-weight: 900; }
.template-preview-frame .kfv-text { margin: .8rem 0 0; font-size: clamp(.9rem, 1.9vw, 1.35rem); line-height: 1.22; color: rgba(255,255,255,.78); max-width: 70%; }
.template-preview-frame .kfv-small-text { margin: .55rem 0 0; font-size: clamp(.7rem, 1.45vw, 1rem); line-height: 1.24; color: inherit; }
.template-preview-frame .kfv-list { margin: .8rem 0 0; padding: 0; list-style: none; }
.template-preview-frame .kfv-list li { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 2px solid rgba(255,255,255,.35); font-size: clamp(.65rem, 1.35vw, 1rem); line-height: 1.12; }
.template-preview-frame .kfv-list li:last-child { border-bottom: 0; }
.template-preview-frame .kfv-image-cover { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.template-preview-frame .kfv-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: #dde9fa; color: #1e418c; font-size: clamp(.8rem, 1.5vw, 1.15rem); font-weight: 800; }
.template-preview-frame .kfv-footer-note { position: absolute; left: 5.2%; right: 5.2%; bottom: 2.8%; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.64); font-size: clamp(.55rem, 1.1vw, .8rem); }
.template-preview-frame .kfv-template-one .kfv-single-zone { height: 100%; display: grid; grid-template-columns: 1.08fr .92fr; gap: 2%; }
.template-preview-frame .kfv-template-one .kfv-single-text { display: flex; align-items: center; }
.template-preview-frame .kfv-template-three { display: grid; grid-template-rows: 10% 85% 5%; background: #fff; }
.template-preview-frame .kfv-template-three .kfv-template-header { display: flex; align-items: center; justify-content: space-between; gap: 2%; padding: 0 3.2% 0 0; background: #fff; border-bottom: 0; min-height: 0; overflow: hidden; }
.template-preview-frame .kfv-template-three .kfv-header-logo { height: 100%; width: auto; object-fit: contain; display: block; background: #000; }
.template-preview-frame .kfv-template-three .kfv-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 1.1rem; min-width: 0; margin-left: auto; }
.template-preview-frame .kfv-template-three .kfv-template-header strong { font-size: clamp(.55rem, 1.3vw, .95rem); line-height: 1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; color: #1e418c; }
.template-preview-frame .weather-hidden { display: none !important; }
.template-preview-frame .weather-widget { display: inline-flex; align-items: center; justify-content: flex-end; max-width: 35%; min-width: 0; gap: .35rem; color: #1e418c; font-size: clamp(.5rem, 1vw, .82rem); font-weight: 800; line-height: 1; white-space: nowrap; }
.template-preview-frame .weather-widget span { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.template-preview-frame .weather-style-badge { padding: .2em .45em; border: 1px solid rgba(30,65,140,.18); border-radius: 999px; background: rgba(30,65,140,.05); }
.template-preview-frame .weather-style-icon-only .weather-location,
.template-preview-frame .weather-style-icon-only .weather-wind { display: none; }
.template-preview-frame .kfv-template-three .kfv-three-grid { position: relative; inset: auto; height: 100%; display: grid; grid-template-columns: 65% 35%; grid-template-rows: 62% 38%; gap: 0; }
.template-preview-frame .kfv-template-three .kfv-panel { border-radius: 0; box-shadow: none; border: 0; }
.template-preview-frame .kfv-template-three .kfv-zone-main { position: relative; grid-row: 1 / span 2; display: grid; grid-template-rows: 62% 38%; }
.template-preview-frame .kfv-template-three .kfv-zone-main { background: #ffa0af; }
.template-preview-frame .kfv-template-three .kfv-zone-main .kfv-panel-inner { position: relative; padding: 2.2%; background: #ffa0af; color: #000; }
.template-preview-frame .kfv-template-three .kfv-zone-main .kfv-image-cover { object-fit: cover; }
.template-preview-frame .kfv-template-three .kfv-zone-main .kfv-label { color: #febd01; }
.template-preview-frame .kfv-template-three .kfv-zone-side-top { background: #ffa0af; color: #000; }
.template-preview-frame .kfv-template-three .kfv-zone-side-bottom { background: #ffa0af; color: #000; }
.template-preview-frame .kfv-template-three .kfv-zone-side-top,
.template-preview-frame .kfv-template-three .kfv-zone-side-bottom { position: relative; }
.template-preview-frame .kfv-template-three .kfv-zone-side-top .kfv-label { color: #005024; }
.template-preview-frame .kfv-template-three .kfv-zone-side-bottom .kfv-label { color: #fa642d; }
.template-preview-frame .kfv-template-three .kfv-zone-side-bottom .kfv-title-medium { color: #462a84; }
.template-preview-frame .kfv-template-three .kfv-zone-side-top .kfv-panel-inner,
.template-preview-frame .kfv-template-three .kfv-zone-side-bottom .kfv-panel-inner { position: relative; height: 100%; padding: 4%; }
.template-preview-frame .kfv-zone-number { position: absolute; top: .45rem; right: .5rem; z-index: 2; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: #fff; color: #1e418c; font-size: .8rem; line-height: 1; font-weight: 900; box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.template-preview-frame .kfv-zone-number-main { top: .5rem; left: .5rem; right: auto; }
.template-preview-frame .kfv-zone-number-four { top: .5rem; right: .5rem; background: #5aaf50; color: #fff; }
.template-preview-frame .kfv-template-three .kfv-footer-note { position: relative; left: auto; right: auto; bottom: auto; height: 100%; padding: 0 3.8%; background: #fff; color: #000; }
.template-preview-frame .kfv-template-three .kfv-footer-note::before { content: "■■■"; letter-spacing: .14em; font-size: clamp(.7rem, 1.3vw, 1rem); background: linear-gradient(90deg,#5a8cd2 0 33%,#5aaf50 33% 66%,#ff8d41 66% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: Arial, Helvetica, sans-serif; font-weight: 900; }
.template-preview-frame .kfv-template-four .kfv-four-grid { height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: .62fr .38fr; gap: 2%; }
.template-preview-frame .kfv-template-four .kfv-zone-wide { grid-column: 1 / span 2; }
.template-preview-frame .kfv-template-four .kfv-bottom-grid { height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2%; }
.template-preview-frame .kfv-stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.template-preview-frame .kfv-stat-row:last-child { border-bottom: 0; }
.template-preview-frame .kfv-stat-name { font-size: clamp(.65rem, 1.3vw, .95rem); color: rgba(255,255,255,.78); }
.template-preview-frame .kfv-stat-value { font-size: clamp(.8rem, 1.7vw, 1.25rem); font-weight: 900; color: #ffd166; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: .75rem; padding: .72rem 1rem; font-weight: 800; cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; background: #f3f7fb; }
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-dark); }
.btn.small { padding: .45rem .7rem; font-size: .85rem; }
.btn.danger { color: var(--danger); border-color: rgba(180,35,24,.3); }

.alert { padding: .85rem 1rem; border-radius: .9rem; margin-bottom: 1rem; border: 1px solid var(--border); background: #fff; }
.alert.success { border-color: rgba(22,121,76,.25); background: #edfdf5; color: var(--success); }
.alert.warning { border-color: rgba(168,107,0,.25); background: #fff8e7; color: var(--warning); }
.alert.danger { border-color: rgba(180,35,24,.25); background: #fff1f0; color: var(--danger); }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: .85rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.data-table th { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.badge { display: inline-block; padding: .28rem .55rem; border-radius: 999px; background: #eaf3fb; color: #16435f; font-size: .8rem; font-weight: 800; }
.badge.success { background: #e7f8ef; color: var(--success); }
.badge.warning { background: #fff3d7; color: var(--warning); }
.badge.danger { background: #ffe5e1; color: var(--danger); }
.muted { color: var(--muted); }
.clean-list { margin: 0; padding: 0; list-style: none; }
.clean-list li { padding: .6rem 0; border-bottom: 1px solid var(--border); }

.preview-frame { width: min(100%, 960px); aspect-ratio: 16 / 9; background: #000; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1rem; }
.preview-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.preview-frame .text-slide { transform: scale(0.5); transform-origin: top left; width: 200%; height: 200%; }
.preview-frame .kfv-signage-screen { transform: scale(0.5); transform-origin: top left; width: 200% !important; height: 200% !important; }
.fallback-preview { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; }

.login-body { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at top, #16435f, #071019); }
.login-card { width: min(430px, 100%); display: grid; gap: 1rem; }
.login-card h1 { margin: 0; }
.login-card p { margin: 0; color: var(--muted); }
.login-logo { font-size: 1.6rem; font-weight: 900; color: var(--primary); }
.login-logo span { color: var(--text); }

@media (max-width: 900px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-two { grid-template-columns: 1fr; }
    .page-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
    .topbar { align-items: flex-start; flex-direction: column; }
    .form-grid { grid-template-columns: 1fr; }
    .template-form-panel { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr; }
    .admin-main { width: min(100% - 1rem, 1280px); }
    .admin-nav { padding: .6rem; }
    .admin-nav a { flex: 1 1 auto; text-align: center; }
}