:root{
    --control-width:240px;
    --control-height:42px;
    --radius:2px;
    --border:#bdbdbd;
    --primary:#355c4a;
    --primary-hover:#294638;
    --shadow:0 4px 12px rgba(0,0,0,.12);
    --transition:.2s ease;
    --chip-gap:6px;
    --surface:#ffffff;
    --text:#2b2b2b;
    --muted:#666666;
}
/* ==================================================
   RESET OG GRUNDLAYOUT
================================================== */

*{
    box-sizing:border-box;
}

html{
    overflow-x:hidden;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);
    background:transparent;
}

button,
input{
    font:inherit;
}

.app{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    padding:20px;

    display:flex;
    flex-direction:column;
    gap:24px;
}

.search-panel{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.search-panel h1{
    margin:0;
}

/* ==================================================
   multiselect
================================================== */
.multiselect{
    position:relative;
    width:100%;
    height:100%;
}

.multiselect-header{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 12px;
    border:0;
    border-radius:inherit;
    background:transparent;
    cursor:pointer;
    user-select:none;
}
.multiselect-dropdown{
    top:calc(100% + 4px);
    width:100%;
}

.multiselect-dropdown.open{
    display:block;
}
.multiselect-text{
    flex:1;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.multiselect-arrow{
    flex-shrink:0;
    color:var(--primary);
    font-size:.9rem;
    transition:transform var(--transition);
}

.multiselect-header.open .multiselect-arrow{
    transform:rotate(180deg);
}
/* ==================================================
   autosuggest 
================================================== */
.autosuggest input{
    width:100%;
    height:100%;
    padding:0 12px;
    border:none;
    border-radius:0;
    background:transparent;
    font:inherit;
    box-sizing:border-box;
    outline:none;
}
/* ==================================================
   filter-control 
================================================== */
.filter-control{
    position:relative;
    width:var(--control-width);
    height:var(--control-height);
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    transition:border-color var(--transition);
}

.filter-control:hover,
.filter-control:focus-within{
    border-color:var(--primary);
}

.filter-control input{
    width:100%;
    height:100%;
    padding:0 12px;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
}

.filter-control input::placeholder{
    color:#8a8a8a;
}
}
.filter-dropdown{
    position:absolute;
    top:calc(var(--control-height) + 31px);
    left:0;
    width:var(--control-width);
    max-height:260px;
    overflow-y:auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    display:none;
    z-index:1000;
}
.filter-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    cursor:pointer;
    transition:background .15s;
}

.filter-option:hover{
    background:#f4f7f5;
}

.filters{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}
.filter-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(240px,1fr));
    gap:24px;
    align-items:start;
}
.filter-group{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}
.filter-actions{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:12px;
    padding-top:18px;
    border-top:1px solid #ececec;
}
.advanced-filters{
    border-top:1px solid #ececec;
    padding-top:18px;
}
/* ==================================================
   Panel-system
================================================== */
.panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
}

/* ==================================================
   Knapper
================================================== */
.btn{
    height:42px;
    min-width:90px;
    padding:0 24px;
    border:none;
    border-radius:var(--radius);
    font:inherit;
    font-weight:600;
    cursor:pointer;
    transition:
        background .2s ease,
        opacity .2s ease,
        transform .1s ease;
}
.btn-primary{
    background:var(--primary);
    color:white;
}

.btn-primary:hover{
    background:var(--primary-hover);
}

.btn-primary:active{
    transform:translateY(1px);
}

.btn-page{
    min-width:36px;
    height:36px;
    border:1px solid var(--border);
    background:white;
    border-radius:4px;
    cursor:pointer;
}

.btn-page.active{
    background:var(--primary);
    color:white;
    border-color:var(--primary);
}

.btn-page:disabled{
    opacity:.4;
    cursor:default;
}
.btn-secondary{
    background:var(--surface);
    color:var(--primary);
    border:1px solid var(--primary);
}

.btn-secondary:hover{
    background:#f4f7f5;
}

.btn-secondary:active{
    transform:translateY(1px);
}
.btn:disabled{
    background:#c7c7c7;
    color:#f5f5f5;
    border-color:#c7c7c7;
    cursor:not-allowed;
    opacity:.8;
    transform:none;
}
/* ==================================================
   CHIPS
================================================== */

.selected-chips{
    display:flex;
    flex-wrap:wrap;
    gap:var(--chip-gap);
    min-height:24px;
}

.chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    background:var(--primary);
    color:white;
    font-size:.9rem;
}

.chip button{
    border:0;
    background:none;
    color:inherit;
    cursor:pointer;
    padding:0;
    font-size:1rem;
}
/* ==================================================
   UDVIDEDE FILTRE
================================================== */

.advanced-filters{
    width:100%;
    margin:0;
    padding-top:18px;
    border-top:1px solid #ececec;
}

.advanced-toggle{
    width:100%;
    min-height:42px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    color:var(--text);
    font:inherit;
    font-weight:600;
    cursor:pointer;
    transition:
        background var(--transition),
        border-color var(--transition);
}

.advanced-toggle:hover,
.advanced-toggle.open{
    background:#f4f7f5;
    border-color:var(--primary);
}

.advanced-arrow{
    flex-shrink:0;
    color:var(--primary);
    font-size:.9rem;
    transition:transform .3s ease;
}

.advanced-toggle.open .advanced-arrow{
    transform:rotate(180deg);
}

.advanced-content{
    width:100%;
    max-height:0;
    overflow:hidden;
    margin-top:0;
    padding:0 20px;
    opacity:0;
    visibility:hidden;
    border:1px solid transparent;
    border-radius:var(--radius);
    background:var(--surface);
    transition:
        max-height .35s ease,
        opacity .25s ease,
        visibility 0s linear .35s,
        margin-top .25s ease,
        padding .25s ease,
        border-color .25s ease;
}

.advanced-content.open{
    max-height:1200px;
    margin-top:15px;
    padding:20px;
    opacity:1;
    visibility:visible;
    border-color:var(--border);
    transition:
        max-height .35s ease,
        opacity .25s ease,
        visibility 0s linear 0s,
        margin-top .25s ease,
        padding .25s ease,
        border-color .25s ease;
}
.advanced-grid{
    display:grid;
    grid-template-columns:
        minmax(150px, 220px)
        minmax(240px, 1fr);
    align-items:start;
    gap:16px 24px;
}

.advanced-grid > label{
    padding-top:12px;
    color:var(--primary);
    font-size:.9rem;
    font-weight:600;
}

.advanced-grid > div{
    min-width:0;
}
/* ==================================================
   RANGE-FILTRE
================================================== */

.range-filter{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:var(--control-height);
}

.range-filter input{
    width:110px;
    height:var(--control-height);
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    color:var(--text);
    outline:none;
    transition:border-color var(--transition);
}

.range-filter input:hover,
.range-filter input:focus{
    border-color:var(--primary);
}

.range-filter input::placeholder{
    color:#8a8a8a;
}

.range-filter span{
    color:var(--muted);
    font-weight:600;
}

/* ==================================================
   STATUSPANEL
================================================== */

.status-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:0;
}

.status-left{
    flex:1;
    min-width:0;
}

#resultCount{
    color:var(--text);
    font-weight:600;
    line-height:1.4;
}

.status-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:12px;
}
/* ==================================================
   STATISTIKPANEL
================================================== */

.statistics-panel{
    padding:0;
    overflow:hidden;
}

.statistics-toggle{
    width:100%;
    min-height:52px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:0;
    border-radius:var(--radius);
    background:var(--primary);
    color:white;
    font:inherit;
    font-size:1.05rem;
    font-weight:600;
    cursor:pointer;
    transition:background var(--transition);
}

.statistics-toggle:hover{
    background:var(--primary-hover);
}

#statisticsArrow{
    flex-shrink:0;
    font-size:.9rem;
    transition:transform .45s ease-in-out;
}

.statistics-toggle:has(+ .statistics-content.open) #statisticsArrow{
    transform:rotate(180deg);
}

.statistics-content{
    display:none;
    padding:24px;
    background:var(--surface);
}

.statistics-content.open{
    display:block;
}
/* ==================================================
   STATISTIKINDHOLD
================================================== */

.statistics-section{
    margin-bottom:32px;
}

.statistics-section:last-child{
    margin-bottom:0;
}

.statistics-section h3{
    margin:0 0 16px;
    color:var(--primary);
    font-size:1.05rem;
    font-weight:600;
}

.statistics-row{
    display:grid;
    grid-template-columns:
        minmax(120px, 180px)
        minmax(120px, 1fr)
        80px;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.statistics-row:last-child{
    margin-bottom:0;
}

.statistics-label{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:var(--text);
}

.statistics-bar{
    height:12px;
    overflow:hidden;
    border-radius:999px;
    background:#e7ece9;
}

.statistics-fill{
    height:100%;
    min-width:0;
    border-radius:inherit;
    background:var(--primary);
    transition:width .35s ease;
}

.statistics-value{
    white-space:nowrap;
    text-align:right;
    color:var(--text);
    font-weight:600;
}
/* ==================================================
   RESULTATOMRÅDE
================================================== */

.content{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 420px);
    align-items:start;
    gap:20px;
}
.results-panel,
.detail-panel{
    min-width:0;
}
/* ==================================================
   RESULTATLISTE
================================================== */

.results-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
#results{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
}
.placeholder{
    padding:32px 20px;
    border:1px dashed var(--border);
    border-radius:var(--radius);
    color:var(--muted);
    text-align:center;
    line-height:1.5;
}

.result-row{
    width:100%;
    padding:16px 18px;
    display:grid;
    grid-template-columns:
        minmax(170px, 1.5fr)
        minmax(140px, 1fr)
        minmax(90px, .65fr)
        minmax(140px, 1fr);
    align-items:center;
    gap:16px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    color:var(--text);
    cursor:pointer;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition),
        background var(--transition);
}

.result-row:hover{
    border-color:var(--primary);
    box-shadow:var(--shadow);
    transform:translateY(-1px);
}

.result-row:active{
    transform:translateY(0);
}

.result-row.selected{
    border-color:var(--primary);
    background:#f4f7f5;
    box-shadow:0 0 0 1px var(--primary);
}
.result-cell{
    min-width:0;
}

.result-cell strong{
    display:block;
    margin-bottom:4px;
    color:var(--primary);
    font-size:.82rem;
    font-weight:600;
}

.result-cell span{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:var(--text);
    line-height:1.4;
}

.result-name{
    font-weight:600;
}
.results-empty,
.results-loading{
    padding:32px 20px;
    border:1px dashed var(--border);
    border-radius:var(--radius);
    color:var(--muted);
    text-align:center;
}

.results-loading{
    border-style:solid;
}
/* ==================================================
   PERSONDETALJER
================================================== */

.detail-panel{
    position:sticky;
    top:20px;
    max-height:calc(100vh - 40px);
    overflow:auto;
}
#detail{
    min-width:0;
}
#detail > .placeholder{
    width:100%;
}
#detail:has(.placeholder){
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
}

#detail > h2{
    margin:0 0 18px;
    padding-bottom:14px;
    border-bottom:1px solid #ececec;
    color:var(--primary);
    font-size:1.35rem;
    line-height:1.3;
}

.detail-panel.is-empty{
    position:static;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    text-align:center;
}
.detail-header{
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid #ececec;
}

.detail-header h2{
    margin:0 0 6px;
    color:var(--primary);
    font-size:1.35rem;
    line-height:1.3;
}

.detail-header p{
    margin:0;
    color:var(--muted);
    line-height:1.5;
}
.detail-grid{
    display:grid;
    grid-template-columns:minmax(130px, 170px) minmax(0, 1fr);
    gap:0;
}

.detail-row{
    display:contents;
}

.detail-label,
.detail-value{
    padding:10px 0;
    border-bottom:1px solid #eeeeee;
}

.detail-label{
    padding-right:18px;
    color:var(--primary);
    font-size:.9rem;
    font-weight:600;
}

.detail-value{
    min-width:0;
    color:var(--text);
    line-height:1.5;
    overflow-wrap:anywhere;
}

.detail-row:last-child .detail-label,
.detail-row:last-child .detail-value{
    border-bottom:0;
}
.detail-panel::-webkit-scrollbar{
    width:8px;
}

.detail-panel::-webkit-scrollbar-track{
    background:transparent;
}

.detail-panel::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:#c8cfcb;
}

.detail-panel::-webkit-scrollbar-thumb:hover{
    background:#aeb8b2;
}
.detail-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.detail-table tr{
    border-bottom:1px solid #eeeeee;
}

.detail-table tr:last-child{
    border-bottom:0;
}

.detail-table th,
.detail-table td{
    padding:10px 0;
    vertical-align:top;
    line-height:1.5;
}

.detail-table th{
    width:42%;
    padding-right:18px;
    color:var(--primary);
    font-size:.9rem;
    font-weight:600;
    text-align:left;
}

.detail-table td{
    width:58%;
    color:var(--text);
    overflow-wrap:anywhere;
    word-break:break-word;
}