/*
 * vm_luxury.css  — TIDOMAT Vision Manager  v2.0
 * Importeras SIST i base.html efter övriga CSS-filer.
 *
 * VIKTIGT: Inga globala td/th-overrides utan class-selector.
 * Alla table-regler riktas mot .access-table tbody td etc.
 *
 * v2.0 — Premium polish: djupare bakgrund, kraftfullare typografi,
 *         bättre knappar, snyggare badges, visuell klarhet.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ============================================================
   ROOT — mörkare stålgrå bas, skarpare kontraster
   ============================================================ */
:root,
body.theme-vision-light,
body.app-shell {
    --font-stack: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --bg:           #d8dfe9;
    --bg-elevated:  #e8ecf2;
    --bg-soft:      #cfd7e3;
    --panel:        #f5f7fa;
    --panel-2:      #edf1f6;
    --panel-3:      #e4e9f0;
    --border:        rgba(15, 30, 50, 0.11);
    --border-soft:   rgba(15, 30, 50, 0.06);
    --border-strong: rgba(37, 99, 235, 0.30);
    --text:       #0c1524;
    --text-soft:  #2d3b4e;
    --text-muted: #5c6b7f;
    --shadow:      0 1px 2px rgba(10,20,35,0.05), 0 8px 24px rgba(10,20,35,0.09), 0 24px 56px rgba(10,20,35,0.05);
    --shadow-soft: 0 1px 2px rgba(10,20,35,0.04), 0 4px 14px rgba(10,20,35,0.06);
}

/* ============================================================
   TYPOGRAFI — skarpare, med mer auktoritet
   ============================================================ */
body {
    font-family: var(--font-stack) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    font-size: 14px !important;
}

.page-title,
.module-hero-copy h1 {
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.035em !important;
    color: #0c1524 !important;
    line-height: 1.15 !important;
}

.module-panel-head h2,
.module-panel-head h3,
.module-panel-head h4,
.access-panel-header h3,
.access-panel-header h2 {
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #0c1524 !important;
}

.topbar-title {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: -0.025em !important;
    color: #0c1524 !important;
}

/* ============================================================
   BAKGRUND — djupare stål med subtila gradienter
   ============================================================ */
body.app-shell:not(.ops-home-shell) {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(59,130,246,0.045), transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(99,102,241,0.035), transparent 55%),
        linear-gradient(165deg, #d6dee9 0%, #cbd5e3 45%, #c2cede 100%) !important;
}

/* ============================================================
   SIDEBAR — djupare blå, bättre glow
   ============================================================ */
.app-sidebar {
    background: linear-gradient(180deg, #17263e 0%, #111e32 100%) !important;
    border-right: 1px solid rgba(59,130,246,0.10) !important;
    box-shadow: 4px 0 36px rgba(0,0,0,0.18), 1px 0 0 rgba(255,255,255,0.03) !important;
}

.brand-sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
}

.brand-text strong {
    color: #f1f5f9 !important;
    font-size: 0.73rem !important;
    letter-spacing: 0.04em !important;
}

.sidebar-label {
    display: none !important;
}

.sidebar-link {
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    transition: all 0.18s ease !important;
    min-height: 40px !important;
}

.sidebar-link:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.05) !important;
}

.sidebar-link.active {
    background: linear-gradient(135deg, rgba(59,130,246,0.24), rgba(37,99,235,0.16)) !important;
    border-color: rgba(59,130,246,0.32) !important;
    box-shadow: 0 2px 14px rgba(59,130,246,0.20), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.sidebar-link-copy strong {
    color: rgba(226,232,240,0.82) !important;
    font-weight: 500 !important;
    font-size: 0.84rem !important;
}

.sidebar-link:hover .sidebar-link-copy strong,
.sidebar-link.active .sidebar-link-copy strong {
    color: #f8fafc !important;
}

.sidebar-link-icon {
    background: rgba(255,255,255,0.07) !important;
    color: rgba(148,163,184,0.85) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
}

.sidebar-link.active .sidebar-link-icon {
    background: rgba(59,130,246,0.30) !important;
    color: #93c5fd !important;
    box-shadow: 0 0 12px rgba(59,130,246,0.15) !important;
}

.sidebar-system-entry {
    background: linear-gradient(135deg, #1e3a5f 0%, #162e4d 100%) !important;
    border: 1px solid rgba(59,130,246,0.24) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}

.sidebar-logout-link {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(148,163,184,0.75) !important;
    font-weight: 500 !important;
}

.sidebar-logout-link:hover {
    background: rgba(239,68,68,0.08) !important;
    border-color: rgba(239,68,68,0.15) !important;
    color: #fca5a5 !important;
}

/* ============================================================
   TOPBAR — rent glas
   ============================================================ */
.topbar-app {
    background: rgba(238,242,248,0.94) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-bottom: 1px solid rgba(15,30,50,0.07) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.65), 0 4px 28px rgba(10,20,35,0.06) !important;
}

.topbar-status-pill {
    background: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(15,30,50,0.08) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
}

.nav-chip, .nav-link {
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(15,30,50,0.07) !important;
    font-weight: 500 !important;
}

.nav-link:hover {
    background: #ffffff !important;
    border-color: rgba(37,99,235,0.20) !important;
}

/* ============================================================
   CARDS & PANELS — ren vit med tydliga skuggor
   ============================================================ */
.module-hero,
.module-panel,
.panel-soft,
.surface-card,
.card,
.settings-module,
.access-panel,
.access-canvas,
.users-role-card,
.users-matrix-card,
.users-system-card,
.theme-preview-card,
.settings-info-card,
.status-item,
.admin-kpi {
    background: #ffffff !important;
    border: 1px solid rgba(15,30,50,0.06) !important;
    border-radius: 14px !important;
    box-shadow:
        0 1px 2px rgba(10,20,35,0.04),
        0 4px 16px rgba(10,20,35,0.06),
        0 16px 44px rgba(10,20,35,0.04) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

/* Hover-lyft */
.admin-kpi:hover,
.status-item:hover,
.site-item:hover,
.building-card:hover,
.floor-card:hover {
    box-shadow:
        0 1px 2px rgba(10,20,35,0.04),
        0 8px 28px rgba(10,20,35,0.10),
        0 20px 56px rgba(10,20,35,0.05) !important;
    transform: translateY(-2px) !important;
}

.module-panel-head,
.module-toolbar {
    background: linear-gradient(180deg, #f6f8fb 0%, #eff3f8 100%) !important;
    border-bottom: 1px solid rgba(15,30,50,0.05) !important;
}

/* ── KPI accentlinje ── */
.admin-kpi {
    position: relative !important;
    overflow: hidden !important;
}

.admin-kpi::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #0ea5e9) !important;
    border-radius: 14px 14px 0 0 !important;
}

.admin-kpi:nth-child(2)::before {
    background: linear-gradient(90deg, #10b981, #14b8a6, #06b6d4) !important;
}

.admin-kpi:nth-child(3)::before {
    background: linear-gradient(90deg, #f59e0b, #f97316, #ef4444) !important;
}

.admin-kpi:nth-child(4)::before {
    background: linear-gradient(90deg, #8b5cf6, #a78bfa, #6366f1) !important;
}

/* ============================================================
   KNAPPAR — skarpare, mer premium
   ============================================================ */
button,
.btn,
.access-btn,
.access-tab-link,
.users-tab,
.tab-link,
.vision-action {
    font-family: var(--font-stack) !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
}

.btn-primary,
.access-btn-primary,
.access-tab-link.active,
.users-tab.active,
.tab-link.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(37,99,235,0.24), 0 4px 14px rgba(37,99,235,0.24) !important;
    transition: all 0.18s ease !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 2px 4px rgba(37,99,235,0.22), 0 8px 22px rgba(37,99,235,0.32) !important;
    transform: translateY(-1px) !important;
}

.btn-secondary,
.btn-ghost,
.access-btn-ghost {
    background: #ffffff !important;
    border: 1px solid rgba(15,30,50,0.12) !important;
    color: #334155 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(10,20,35,0.04) !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
.access-btn-ghost:hover {
    background: #ffffff !important;
    border-color: rgba(37,99,235,0.30) !important;
    color: #1d4ed8 !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.10) !important;
    transform: translateY(-1px) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(220,38,38,0.20), 0 4px 14px rgba(220,38,38,0.20) !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
    box-shadow: 0 2px 4px rgba(220,38,38,0.20), 0 8px 22px rgba(220,38,38,0.28) !important;
    transform: translateY(-1px) !important;
}

.btn-sm {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.78rem !important;
}

/* ============================================================
   BADGES — snyggare, tydligare, med mer punch
   ============================================================ */
.badge,
.access-status-badge,
.access-pill,
.role-badge,
.ops-badge {
    font-family: var(--font-stack) !important;
    font-weight: 700 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.06em !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
}

.badge-neutral,
.access-status-badge,
.access-pill {
    background: #edf1f7 !important;
    color: #475569 !important;
    border-color: rgba(15,30,50,0.08) !important;
}

.badge-success {
    background: linear-gradient(135deg, rgba(22,163,74,0.12), rgba(16,185,129,0.10)) !important;
    color: #15803d !important;
    border-color: rgba(22,163,74,0.18) !important;
}

.badge-warning {
    background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(217,119,6,0.10)) !important;
    color: #92400e !important;
    border-color: rgba(245,158,11,0.20) !important;
}

.badge-danger {
    background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(220,38,38,0.10)) !important;
    color: #b91c1c !important;
    border-color: rgba(239,68,68,0.18) !important;
}

/* ============================================================
   TABELLWRAP
   ============================================================ */
.table-wrap,
.module-table-wrap,
.access-table-wrap {
    background: #ffffff !important;
    border: 1px solid rgba(15,30,50,0.06) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(10,20,35,0.03), 0 4px 14px rgba(10,20,35,0.05) !important;
}

/* ============================================================
   THEAD — via class-selektorer
   ============================================================ */
.access-table thead th,
.table thead th,
.users-table thead th,
.data-table thead th,
.table-basic thead th {
    background: #f3f6fa !important;
    color: #475569 !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    border-bottom: 2px solid rgba(15,30,50,0.06) !important;
    padding: 12px 16px !important;
}

/* ============================================================
   TBODY TD — via class-selektorer
   ============================================================ */
.access-table tbody td,
.table tbody td,
.users-table tbody td,
.data-table tbody td,
.table-basic tbody td {
    color: #1e293b !important;
    border-bottom: 1px solid rgba(15,30,50,0.04) !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
    font-size: 0.84rem !important;
}

/* ── ZEBRA ── */
.access-table tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) td,
.users-table tbody tr:nth-child(even) td,
.data-table tbody tr:nth-child(even) td {
    background: rgba(37,99,235,0.018) !important;
}

/* ── BORDER-LEFT per status-klass ── */
.access-table tbody tr.row-status-aktiv td:first-child,
.table tbody tr.row-status-aktiv td:first-child {
    border-left: 3px solid #22c55e !important;
    padding-left: 13px !important;
}
.access-table tbody tr.row-status-oppen td:first-child,
.table tbody tr.row-status-oppen td:first-child {
    border-left: 3px solid #f59e0b !important;
    padding-left: 13px !important;
}
.access-table tbody tr.row-status-larm td:first-child,
.table tbody tr.row-status-larm td:first-child {
    border-left: 3px solid #ef4444 !important;
    padding-left: 13px !important;
}
.access-table tbody tr.row-status-inaktiv td:first-child,
.access-table tbody tr.row-status-offline td:first-child,
.table tbody tr.row-status-inaktiv td:first-child {
    border-left: 3px solid #d1d5db !important;
    padding-left: 13px !important;
}

/* ── STATUSTONING ── */
.access-table tbody tr.row-status-larm td,
.table tbody tr.row-status-larm td {
    background: rgba(239,68,68,0.035) !important;
}
.access-table tbody tr.row-status-oppen td,
.table tbody tr.row-status-oppen td {
    background: rgba(245,158,11,0.03) !important;
}
.access-table tbody tr.row-status-larm:nth-child(even) td,
.table tbody tr.row-status-larm:nth-child(even) td {
    background: rgba(239,68,68,0.058) !important;
}
.access-table tbody tr.row-status-oppen:nth-child(even) td,
.table tbody tr.row-status-oppen:nth-child(even) td {
    background: rgba(245,158,11,0.048) !important;
}

/* ── HOVER ── */
.access-table tbody tr:hover td,
.table tbody tr:hover td,
.users-table tbody tr:hover td,
.data-table tbody tr:hover td {
    background: rgba(37,99,235,0.05) !important;
    cursor: pointer;
}

/* Sista raden — ingen border */
.access-table tbody tr:last-child td,
.table tbody tr:last-child td,
.users-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ── Knappar i tabeller ── */
.access-table tbody td .btn,
.access-table tbody td button,
.table tbody td .btn,
.table tbody td button {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 0.74rem !important;
    border-radius: 8px !important;
}

.access-table tbody td .btn-primary,
.table tbody td .btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.22) !important;
}

.access-table tbody td .btn-secondary,
.access-table tbody td .btn-ghost,
.table tbody td .btn-secondary,
.table tbody td .btn-ghost {
    background: #ffffff !important;
    border: 1px solid rgba(15,30,50,0.10) !important;
    color: #334155 !important;
}

/* ── Filter-selects i thead ── */
.access-table thead select,
.table thead select {
    min-height: 30px !important;
    font-size: 0.78rem !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(15,30,50,0.10) !important;
    background: #ffffff !important;
    color: #334155 !important;
}

/* ============================================================
   STATUS-BADGE — avrundade, snyggare
   ============================================================ */
.access-status-badge {
    border-radius: 8px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    letter-spacing: 0.07em !important;
}

/* ============================================================
   PAGE SHELL
   ============================================================ */
.page-shell {
    margin: 14px 16px 24px !important;
    width: calc(100% - 32px) !important;
}

/* ============================================================
   INPUTS — tydligare med bättre focus
   ============================================================ */
body[data-path^="/admin"] input,
body[data-path^="/admin"] select,
body[data-path^="/admin"] textarea,
body[data-path^="/admin"] .text-input,
body[data-path^="/admin"] .select-input,
body[data-path^="/admin"] .field-group input,
body[data-path^="/admin"] .field-group select,
body[data-path^="/admin"] .field-group textarea {
    background: #ffffff !important;
    border: 1px solid rgba(15,30,50,0.12) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(10,20,35,0.04) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
    font-size: 0.85rem !important;
    color: #1e293b !important;
}

body[data-path^="/admin"] input:focus,
body[data-path^="/admin"] select:focus,
body[data-path^="/admin"] textarea:focus,
body[data-path^="/admin"] .text-input:focus,
body[data-path^="/admin"] .select-input:focus,
body[data-path^="/admin"] .field-group input:focus,
body[data-path^="/admin"] .field-group select:focus,
body[data-path^="/admin"] .field-group textarea:focus {
    border-color: rgba(37,99,235,0.50) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12), inset 0 1px 2px rgba(10,20,35,0.03) !important;
    outline: none !important;
}

body[data-path^="/admin"] label {
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: #334155 !important;
    letter-spacing: -0.005em !important;
}

/* ============================================================
   SCROLLBAR — tunn och ren
   ============================================================ */
body[data-path^="/admin"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body[data-path^="/admin"] ::-webkit-scrollbar-track {
    background: transparent;
}

body[data-path^="/admin"] ::-webkit-scrollbar-thumb {
    background: rgba(15,30,50,0.12);
    border-radius: 3px;
}

body[data-path^="/admin"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(15,30,50,0.22);
}

/* ============================================================
   SVG IKONER — tjockare stroke för klarhet
   ============================================================ */
body[data-path^="/admin"] .sidebar-link-icon svg,
body[data-path^="/admin"] .lux-kpi-icon svg,
body[data-path^="/admin"] .vm-empty-icon svg {
    stroke-width: 2.2px !important;
}

/* ============================================================
   HERO-SEKTION — snyggare
   ============================================================ */
.module-hero.admin-dashboard-hero {
    padding: 4px 0 !important;
}

.module-hero.admin-dashboard-hero h1 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

.admin-hero-status {
    gap: 6px !important;
}

.admin-hero-status .badge {
    font-size: 0.68rem !important;
    min-height: 26px !important;
}