:root {
  --bg: #f4f2ee; --surface: #ffffff; --surface2: #f9f8f5;
  --border: #e0ddd6; --border-strong: #c8c4bc;
  --text: #1a1814; --text-2: #6b6760; --text-3: #9e9b96;
  --brand-blue: #1b407e;
  --accent: #1b407e; --accent-light: #e4eef8; --accent-hover: #163268;
  --red: #c0392b; --red-light: #fdf0ee;
  --amber: #d4840a; --amber-light: #fef7e8;
  --blue: #2563a8; --blue-light: #eef4fc;
  --grey-light: #f2f1ef;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --radius: 8px; --sidebar-w: 240px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

/* LOGIN */
#login-page, #reset-page, #forgot-page { min-height:100vh; display:none; align-items:center; justify-content:center; background:var(--accent); background-image:radial-gradient(ellipse at 20% 80%,rgba(255,255,255,0.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(255,255,255,0.04) 0%,transparent 50%); }
.login-card { background:var(--surface); border-radius:16px; padding:48px 44px; width:420px; box-shadow:var(--shadow-lg); }
.login-logo { text-align:center; margin-bottom:36px; }
.login-logo-icon { width:56px;height:56px;background:var(--accent);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px; }
.login-logo-icon svg { color:white; }
.login-logo h1 { font-family:'DM Sans',sans-serif;font-weight:700;font-size:22px;color:var(--text);letter-spacing:-0.3px; }
.login-logo p { font-size:13px;color:var(--text-2);margin-top:4px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-2);margin-bottom:6px; }
.form-group input { width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);background:var(--bg);transition:border-color 0.15s,box-shadow 0.15s;outline:none; }
.form-group input:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(27,64,126,0.1); }
.btn-primary { width:100%;padding:12px;background:var(--accent);color:white;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;transition:background 0.15s,transform 0.1s;margin-top:8px; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-primary:active { transform:scale(0.99); }
.error-msg { background:var(--red-light);color:var(--red);border:1px solid #f5c6c2;border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-bottom:16px;display:none; }
.error-msg.show { display:block; }

/* APP LAYOUT */
#app { display:none; min-height:100vh; }
#app.visible { display:flex; }
.sidebar { width:var(--sidebar-w);min-height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto; }
.sidebar-header { padding:20px 20px 18px;border-bottom:1px solid var(--border); }
.sidebar-brand { display:flex;align-items:center;gap:10px; }
.brand-icon { width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.brand-icon svg { width:18px;height:18px; }
.brand-name { font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;font-weight:700;line-height:1.2; }
.brand-name span { display:block;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:400;color:var(--text-2);letter-spacing:0.4px; }
.nav { padding:12px;flex:1; }
.nav-section-label { font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:var(--accent);padding:8px 8px 4px; }
.nav-item { display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--text-2);cursor:pointer;transition:background 0.1s,color 0.1s;margin-bottom:1px;border:none;background:none;width:100%;text-align:left; }
.nav-item:hover { background:var(--bg);color:var(--text); }
.nav-item.active { background:var(--accent-light);color:var(--accent);font-weight:600; }
.nav-sub { padding-left:24px;font-size:12.5px;color:var(--text-3); }
.nav-sub:hover { color:var(--text); }
.nav-sub.active { color:var(--accent);font-weight:600; }
.nav-subitem { padding-left:26px !important;font-size:12.5px !important; }
.nav-chevron { margin-left:auto;transition:transform .2s;flex-shrink:0; }
.maps-open .nav-chevron { transform:rotate(180deg); }
.nav-item svg { width:16px;height:16px;flex-shrink:0; }
.nav-badge { margin-left:auto;background:var(--red);color:white;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center; }
.sidebar-user { padding:14px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px; }
.sidebar nav { padding-bottom:80px; }
.user-avatar { width:32px;height:32px;background:var(--accent-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--accent);flex-shrink:0; }
.user-info { flex:1;min-width:0; }
.user-info strong { display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.user-info span { font-size:11px;color:var(--text-3); }
.btn-logout { background:none;border:none;color:var(--text-3);padding:4px;border-radius:4px;transition:color 0.1s; }
.btn-logout:hover { color:var(--red); }
.main { margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh; }
.topbar { background:var(--surface);border-bottom:1px solid var(--border);padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50; }
.topbar-left { display:flex;align-items:center;gap:16px; }
.page-title { font-family:'DM Sans',sans-serif;font-weight:700;font-size:20px;font-weight:700; }
.topbar-right { display:flex;align-items:center;gap:10px; }
.lang-toggle { display:flex;align-items:center;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:3px 6px; }
.lang-btn { background:none;border:none;font-size:16px;cursor:pointer;padding:2px 3px;border-radius:4px;opacity:.45;transition:opacity .15s,background .15s;line-height:1; }
.lang-btn:hover { opacity:.75; }
.lang-btn.active { opacity:1;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12); }
.content { padding:28px;flex:1; }
.view { display:none; }
.view.active { display:block; }

/* DASHBOARD */
.stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px; }
.stat-card { background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 22px;transition:box-shadow 0.15s,border-color 0.15s; }
.stat-card:hover { box-shadow:var(--shadow-md); }
.stat-card-clickable { cursor:pointer; }
.stat-card-clickable:hover { border-color:var(--accent); }
.stat-card-active { border:2px solid var(--accent) !important; background:var(--accent-light,#f0f4ff) !important; }
.stat-label { font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-2);margin-bottom:8px; }
.stat-value { font-size:36px;font-weight:700;font-family:'DM Sans',sans-serif;font-weight:700;line-height:1; }
.stat-value.red { color:var(--red); } .stat-value.green { color:var(--accent); } .stat-value.amber { color:var(--amber); }
.stat-sub { font-size:12px;color:var(--text-3);margin-top:6px; }
.dashboard-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.chart-card { background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 22px; }
.chart-card h3 { font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-2);margin-bottom:16px; }
.bar-chart { display:flex;flex-direction:column;gap:10px; }
.bar-row { display:flex;align-items:center;gap:10px; }
.bar-label { font-size:12px;color:var(--text-2);min-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.bar-track { flex:1;height:8px;background:var(--bg);border-radius:4px;overflow:hidden; }
.bar-fill { height:100%;background:var(--accent);border-radius:4px;transition:width 0.6s ease; }
.bar-count { font-size:12px;font-weight:600;color:var(--text);min-width:24px;text-align:right; }

/* COMPLAINTS TABLE */
.toolbar { display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap; }
.search-box { display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:0 12px;flex:1;max-width:320px;transition:border-color 0.15s; }
.search-box:focus-within { border-color:var(--accent); }
.search-box svg { color:var(--text-3);flex-shrink:0; }
.search-box input { border:none;outline:none;background:none;padding:9px 0;font-size:13.5px;width:100%; }
.filter-select { padding:9px 12px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--text);cursor:pointer;outline:none;transition:border-color 0.15s; }
.filter-select:focus { border-color:var(--accent); }
.btn { padding:9px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;border:none;transition:all 0.15s;display:inline-flex;align-items:center;gap:6px; }
.btn-accent { background:var(--accent);color:white; } .btn-accent:hover { background:var(--accent-hover); }
.btn-ghost { background:var(--surface);color:var(--text-2);border:1.5px solid var(--border); } .btn-ghost:hover { background:var(--bg);color:var(--text); }
.btn-danger { background:var(--red-light);color:var(--red);border:1.5px solid #f5c6c2; } .btn-danger:hover { background:#fde8e5; }
.btn-sm { padding:5px 10px;font-size:12px; }
.table-wrap { background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.data-table { width:100%;border-collapse:collapse; }
.data-table th { background:var(--surface2);padding:11px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-2);border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none; }
.data-table th:hover { color:var(--text); }
.data-table td { padding:12px 14px;font-size:13.5px;border-bottom:1px solid var(--border);vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--surface2); }
.data-table tbody tr { cursor:pointer; }
.badge { display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;white-space:nowrap; }
.badge-open { background:var(--red-light);color:var(--red); } .badge-closed { background:var(--grey-light);color:var(--text-2); }
.badge-draft { background:#f0f0f0;color:#888;border:1px dashed #ccc; }
.badge-closing { background:var(--blue-light);color:var(--blue); } .badge-monitoring { background:var(--amber-light);color:var(--amber); }
.overdue td:first-child { border-left:3px solid var(--red); }
.pagination { display:flex;align-items:center;gap:8px;margin-top:16px; }
.pagination-info { font-size:13px;color:var(--text-2);flex:1; }
.page-btns { display:flex;gap:4px; }
.page-btn { width:32px;height:32px;border-radius:6px;border:1px solid var(--border);background:var(--surface);font-size:13px;color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.1s; }
.page-btn:hover { background:var(--bg);color:var(--text); } .page-btn.active { background:var(--accent);color:white;border-color:var(--accent); } .page-btn:disabled { opacity:0.4;cursor:not-allowed; }

/* MODALS */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1200;display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;opacity:0;pointer-events:none;transition:opacity 0.2s;overflow-y:auto; }
.modal-overlay.open { opacity:1;pointer-events:all; }
.modal { background:var(--surface);border-radius:16px;width:100%;max-width:820px;box-shadow:var(--shadow-lg);transform:translateY(20px);transition:transform 0.2s;overflow:hidden; }
.modal-overlay.open .modal { transform:translateY(0); }
.modal-header { padding:22px 28px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:16px; }
.modal-title { font-family:'DM Sans',sans-serif;font-weight:700;font-size:20px;font-weight:700;line-height:1.3; }
.modal-subtitle { font-size:13px;color:var(--text-2);margin-top:3px; }
.btn-close { background:none;border:none;color:var(--text-3);padding:4px;border-radius:4px;transition:color 0.1s;flex-shrink:0;margin-top:2px; }
.btn-close:hover { color:var(--text); }
.modal-body { padding:24px 28px;max-height:70vh;overflow-y:auto; }
.modal-footer { padding:18px 28px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:10px; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.form-grid .span2 { grid-column:1/-1; }
.field { display:flex;flex-direction:column;gap:5px; }
.field label { font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-2); }
.field input, .field select, .field textarea { padding:9px 12px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);font-size:13.5px;color:var(--text);outline:none;transition:border-color 0.15s,box-shadow 0.15s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(27,64,126,0.08);background:var(--surface); }
.field textarea { resize:vertical;min-height:80px;line-height:1.5; }
.field input[readonly], .field textarea[readonly] { background:var(--surface2);color:var(--text-2);cursor:default; }
.section-divider { grid-column:1/-1;border-top:1px solid var(--border);padding-top:4px;margin-top:4px; }
.section-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;color:var(--accent); }
.detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:0; }
.detail-row { padding:12px 0;border-bottom:1px solid var(--border); }
.detail-row:last-child { border-bottom:none; }
.detail-row.span2 { grid-column:1/-1; }
.detail-label { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-3);margin-bottom:3px; }
.detail-value { font-size:14px;color:var(--text);line-height:1.5;white-space:pre-wrap;word-break:break-word; }
.detail-value.empty { color:var(--text-3);font-style:italic; }
.history-list { display:flex;flex-direction:column;gap:10px;margin-top:4px; }
.history-entry { background:var(--surface2);border-radius:var(--radius);padding:12px 14px;border-left:3px solid var(--border-strong); }
.history-meta { font-size:11px;color:var(--text-3);margin-bottom:4px; }
.history-meta strong { color:var(--text-2); }
.history-note { font-size:13px; }
.history-changes { margin-top:6px;font-size:12px;color:var(--text-2); }
.change-item { display:flex;gap:6px;align-items:baseline; }
.change-field { font-weight:600;color:var(--text); }
.change-from { text-decoration:line-through;color:var(--text-3); }
.change-to { color:var(--accent);font-weight:500; }

/* PHOTOS */
.photo-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px; }
.photo-card { border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface2); }
.photo-thumb { width:100%;height:130px;object-fit:cover;cursor:pointer;display:block; }
.photo-thumb-placeholder { width:100%;height:130px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text-3);font-size:12px; }
.photo-info { padding:6px 8px;font-size:11px; }
.photo-type-tag { display:inline-block;background:var(--accent-light);color:var(--accent);padding:1px 6px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;margin-bottom:2px; }
.photo-caption { color:var(--text-2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.photo-meta { color:var(--text-3);font-size:10px;margin-top:2px; }
.photo-del-btn { width:100%;padding:4px;background:#fce4ec;border:none;cursor:pointer;font-size:11px;color:#c62828;border-top:1px solid var(--border);transition:background 0.1s; }
.photo-del-btn:hover { background:#f8bbd0; }
.upload-zone { border:2px dashed var(--border-strong);border-radius:8px;padding:16px;background:var(--surface2);margin-top:8px; }
.upload-zone-title { font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:10px; }
.upload-row { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px; }
.upload-preview { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px; }
.upload-preview img { width:52px;height:52px;object-fit:cover;border-radius:4px;border:1px solid var(--border); }
.upload-status { font-size:12px;color:var(--text-2);margin-left:10px; }
.lightbox { position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:pointer; }

.lightbox img { max-width:90vw;max-height:90vh;object-fit:contain;border-radius:4px; }
.lightbox-caption { position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;background:rgba(0,0,0,0.5);padding:6px 14px;border-radius:4px;max-width:80vw;text-align:center; }

/* REPORTS */
.report-controls { display:flex;gap:10px;align-items:center;margin-bottom:20px; }
.report-table-wrap { background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.report-header-row { display:grid;grid-template-columns:50px 80px 1fr 1fr 140px 160px;padding:10px 16px;background:var(--surface2);border-bottom:1px solid var(--border);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-2); }
.report-row { display:grid;grid-template-columns:50px 80px 1fr 1fr 140px 160px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;align-items:start;cursor:pointer;transition:background 0.1s; }
.report-row:last-child { border-bottom:none; }
.report-row:hover { background:var(--surface2); }

/* USERS */
.user-table-wrap { background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.role-badge { display:inline-flex;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600; }
.role-admin   { background:#fdf0ff;color:#7c3aed; }
.role-editor  { background:var(--accent-light);color:var(--accent); }
.role-viewer  { background:var(--surface2);color:var(--text-2);border:1px solid var(--border); }
.role-kvha    { background:var(--accent-light);color:var(--brand-blue); }
.role-leptos  { background:#fff8e1;color:#f57f17; }
.role-club    { background:#f3e5f5;color:#6a1b9a; }
.role-tala    { background:#e8f5e9;color:#2e7d32; }
.role-koili   { background:#fce4ec;color:#880e4f; }
.role-member  { background:#f5f5f5;color:#616161;border:1px solid #e0e0e0; }

/* TOASTS */
#toast-container { position:fixed;bottom:24px;right:24px;z-index:1500;display:flex;flex-direction:column;gap:8px; }
.toast { background:var(--text);color:white;border-radius:var(--radius);padding:12px 16px;font-size:13.5px;font-weight:500;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;animation:slideIn 0.2s ease;max-width:320px; }
.toast.success { background:var(--accent); } .toast.error { background:var(--red); }
@keyframes slideIn { from{transform:translateX(40px);opacity:0} to{transform:translateX(0);opacity:1} }
.spinner { width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-center { display:flex;justify-content:center;align-items:center;padding:60px; }
.empty-state { text-align:center;padding:60px 20px;color:var(--text-2); }
.empty-state svg { opacity:0.25;margin-bottom:12px; }
.empty-state p { font-size:15px; }
.tab-bar { display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:20px; }
.tab-btn { padding:8px 14px;font-size:13px;font-weight:500;color:var(--text-2);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all 0.1s;margin-bottom:-1px; }
.tab-btn.active { color:var(--accent);border-bottom-color:var(--accent);font-weight:600; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.overdue-flag { font-size:10px;background:var(--red-light);color:var(--red);padding:1px 5px;border-radius:4px;font-weight:700;margin-left:5px; }
.confirm-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1300;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.15s; }
.confirm-overlay.open { opacity:1;pointer-events:all; }
.confirm-box { background:var(--surface);border-radius:12px;padding:28px;max-width:380px;box-shadow:var(--shadow-lg); }
.confirm-box h3 { font-size:17px;margin-bottom:10px; }
.confirm-box p { font-size:14px;color:var(--text-2);line-height:1.5;margin-bottom:20px; }
.confirm-btns { display:flex;justify-content:flex-end;gap:10px; }
/* ── Mobile top-right bar (flag picker + hamburger) ── */
.mobile-top-bar { display:none; position:fixed; top:8px; right:8px; z-index:1001; align-items:center; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:4px; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.mobile-flag-picker { position:relative; }
.mobile-flag-btn { background:none; border:none; font-size:20px; cursor:pointer; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:6px; }
.mobile-flag-btn:hover { background:var(--hover); }
.mobile-flag-dropdown { display:none; position:absolute; top:calc(100% + 6px); right:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.2); padding:4px; flex-direction:column; gap:2px; z-index:1002; min-width:48px; }
.mobile-flag-dropdown.open { display:flex; }
.mobile-flag-dropdown button { background:none; border:none; font-size:22px; cursor:pointer; padding:5px 8px; border-radius:6px; text-align:center; }
.mobile-flag-dropdown button:hover { background:var(--hover); }
.mobile-hamburger-btn { background:var(--accent); color:#fff; border:none; border-radius:6px; width:36px; height:36px; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
@media (max-width:900px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .dashboard-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .span2 { grid-column:1; }
  .sidebar { transform:translateX(-100%); transition:transform .25s ease; z-index:1000; overflow-y:auto !important; padding-bottom:80px; }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0 !important; }
  .mobile-menu-btn { display:none !important; }
  .mobile-top-bar { display:flex !important; }
  .lang-toggle { display:none !important; }
  .sidebar-overlay { display:block; }
  .home-grid { grid-template-columns:1fr !important; }
  .home-panel { min-height:unset !important; }
  #home-grid { grid-template-columns:1fr !important; grid-template-rows:auto !important; height:auto !important; min-height:unset !important; }
  #home-grid > div { grid-column:1 !important; grid-row:auto !important; max-height:400px; }
  #home-grid > div:nth-child(1) { order:1; }
  #home-grid > div:nth-child(2) { order:3; }
  #home-grid > div:nth-child(3) { order:2; }
  #home-grid > div:nth-child(4) { order:4; }
}
.mobile-menu-btn { display:none; position:fixed; top:12px; left:12px; z-index:1001; background:var(--accent); color:#fff; border:none; border-radius:8px; width:40px; height:40px; font-size:20px; cursor:pointer; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999; }
/* ── PHONE LAYOUT (≤640px) ── */
@media (max-width:640px) {
  #kvha-page-grid      { grid-template-columns:1fr !important; }
  #useful-info-list    { grid-template-columns:1fr !important; }
  #kvm-issues          { grid-template-columns:repeat(3,1fr) !important; }
  .stats-grid          { grid-template-columns:1fr 1fr !important; }
  .toolbar             { flex-wrap:wrap !important; }
  .table-wrap          { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .data-table          { min-width:500px; }
  .modal               { width:100% !important; max-width:100% !important; margin:0; border-radius:12px 12px 0 0; position:fixed; bottom:0; max-height:90vh; overflow-y:auto; }
  .modal-overlay       { align-items:flex-end !important; }
  .event-home-card     { flex-wrap:nowrap; }
  #home-recurring-list { gap:8px !important; }
}

/* ── WORK ORDER PRINT ── */
#work-order-print { display:none }
@media print {
  body > *:not(#work-order-print) { display:none !important }
  #work-order-print {
    display:block !important;
    font-family:'DM Sans',Arial,sans-serif;
    color:#000;
    background:#fff;
    margin:0;padding:0;
  }
  @page { size:A4 portrait; margin:10mm 12mm 10mm 12mm }
  html { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* Agenda card print styles */
  #work-order-print [style*="border-radius:10px"] {
    border:1px solid #ccc !important;
    margin-bottom:10px !important;
    page-break-inside:avoid;
  }
  #work-order-print [style*="max-height"] {
    max-height:none !important;
    overflow:visible !important;
  }
}
.wo-page {
  width:100%;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:9.5pt;
  color:#111;
  background:#fff;
}
.wo-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:3px solid #1b407e;
  padding-bottom:6px;
  margin-bottom:8px;
}
.wo-header-logo img { height:104px; width:auto }
.wo-header-title { text-align:right }
.wo-header-title h1 { font-size:16pt;font-weight:700;margin:0;color:#1b407e;font-family:'DM Sans',sans-serif;font-weight:700;font-weight:400;margin:2px 0 0;color:#555 }
.wo-header-meta { font-size:8pt;color:#777;margin-top:3px }
.wo-section { margin-bottom:8px }
.wo-section-title {
  font-size:8.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:#1b407e;border-bottom:1px solid #1b407e;padding-bottom:2px;margin-bottom:5px;
}
.wo-grid { display:grid;grid-template-columns:1fr 1fr;gap:2px 16px }
.wo-field { padding:2px 0;border-bottom:1px solid #eee }
.wo-field-label { font-size:7pt;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#666;margin-bottom:1px }
.wo-field-label .el { font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;margin-left:4px;color:#999 }
.wo-field-value { font-size:10pt;color:#111 }
.wo-field-full { grid-column:1/-1 }
.wo-map { width:100%;border:1px solid #ccc;border-radius:4px;position:relative;overflow:hidden;margin-bottom:4px }
.wo-map img.wo-map-bg { width:100%;display:block }
.wo-map .wo-pin { position:absolute;transform:translate(-50%,-100%);font-size:22px;line-height:1 }
.wo-work-details {
  background:#f0f0fc;
  border:1px solid #1b407e;
  border-radius:4px;
  padding:10px 12px;
  white-space:pre-wrap;
  font-size:10pt;
  line-height:1.5;
  min-height:40px;
}
.wo-photos { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;break-inside:avoid;page-break-inside:avoid }
.wo-photo { break-inside:avoid;page-break-inside:avoid }
.wo-photo img, .wo-photo-img { width:100%;height:48mm;object-fit:cover;border:1px solid #ddd;border-radius:3px;display:block }
.wo-photo-caption { font-size:7.5pt;color:#555;margin-top:2px;text-align:center }
.wo-photo-type { font-size:7pt;font-weight:700;text-transform:uppercase;color:#1b407e;text-align:center }
.wo-footer { border-top:1px solid #ccc;padding-top:6px;margin-top:12px;display:flex;justify-content:space-between;font-size:7.5pt;color:#888 }
/* ── EVENTS ── */
.event-card { background:var(--surface);border:1px solid var(--border);border-radius:10px;display:flex;gap:0;overflow:hidden;cursor:pointer;transition:box-shadow .15s,border-color .15s;min-height:90px }
.event-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08);border-color:var(--accent); }
.event-date-block { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 16px;min-width:72px;background:var(--accent);color:#fff;flex-shrink:0;text-align:center; }
.event-date-month { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;opacity:.9; }
.event-date-day   { font-size:36px;font-weight:800;line-height:1;font-family:'DM Sans',sans-serif;font-weight:700; }
.event-date-time  { font-size:11px;margin-top:4px;opacity:.85;white-space:nowrap; }
.event-card-body  { flex:1;padding:14px 16px;min-width:0;display:flex;flex-direction:column;gap:4px;justify-content:center; }
.event-card-title { font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.event-card-loc   { font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:4px; }
.event-card-desc  { font-size:12.5px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.event-card-poster { width:auto;max-height:120px;object-fit:contain;flex-shrink:0;border-left:1px solid var(--border); }
.event-cancelled  { opacity:.5; }
.event-date-slot  { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border); }
.event-date-slot:last-child { border-bottom:none; }
.event-date-slot.no-event { opacity:.45;text-decoration:line-through; }
.event-home-card { background:linear-gradient(135deg,#dde9f8 0%,#c4d6ef 100%);border:1px solid #b8cfe8;border-radius:10px;display:flex;align-items:stretch;overflow:hidden;cursor:pointer;transition:border-color .15s;gap:0;min-height:66px;max-height:88px; }
.event-home-card:hover { border-color:var(--accent); }
.kvha-pub-card { background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center; }