/* =========================================================
   BUDGETPAKKE

   Dækker budget-package-details, -grid, -workflow og
   -comments. Modulerne bygger selv deres DOM med
   BEM-klasser; det her er laget, der gør dem læsbare.
========================================================= */

.budget-package-details{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
}

/* ---------- Header ---------- */

.budget-package-details__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-5);
    flex-wrap:wrap;

    padding-bottom:var(--space-4);
    border-bottom:1px solid var(--color-border);
}

.budget-package-details__heading{
    min-width:0;
}

.budget-package-details__title{
    font-size:1.5rem;
    font-weight:800;
    letter-spacing:-.01em;
    margin:0;
}

.budget-package-details__subtitle{
    margin-top:4px;
    color:var(--color-text-muted);
    font-size:.92rem;
}

.budget-package-details__header-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:var(--space-2);
    min-width:220px;
}

.budget-package-details__status{
    display:inline-flex;
    align-items:center;

    padding:5px 12px;
    border-radius:999px;

    background:#EEF6FF;
    color:#1D4ED8;

    font-size:.78rem;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
}

.budget-package-details__progress-wrap{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    width:100%;
}

.budget-package-details__progress{
    flex:1 1 auto;
    height:8px;

    appearance:none;
    border:0;
    border-radius:999px;
    overflow:hidden;

    background:var(--color-border);
}

.budget-package-details__progress::-webkit-progress-bar{
    background:var(--color-border);
}

.budget-package-details__progress::-webkit-progress-value{
    background:var(--color-primary);
    border-radius:999px;
}

.budget-package-details__progress::-moz-progress-bar{
    background:var(--color-primary);
}

.budget-package-details__progress-text{
    font-size:.85rem;
    font-weight:700;
    white-space:nowrap;
}

/* ---------- Toolbar ---------- */

.budget-package-details__toolbar{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    flex-wrap:wrap;
}

.budget-package-details__table-select{
    min-width:240px;

    padding:10px 12px;

    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);

    background:var(--color-surface);
    font:inherit;
}

.budget-package-details__refresh{
    padding:10px 16px;

    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);

    background:var(--color-surface);
    font-weight:600;
    cursor:pointer;
}

.budget-package-details__refresh:hover{
    background:#F9FAFB;
}

/* ---------- Layout ---------- */

/*
 * Modulets DOM er:
 *
 *   main
 *     content   (nøgletal + grid, stablet)
 *     aside     (workflow, sessioner, kommentarer)
 *
 * Det er altså main der deler siden op i to spalter,
 * ikke content. Bytter man om, ender griddet som en
 * smal kolonne ved siden af nøgletallene.
 */
.budget-package-details__main{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:var(--space-5);
    align-items:start;
}

.budget-package-details__content{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
}

.budget-package-details__aside{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
}

.budget-package-details__section-title{
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--color-text-muted);
    margin:0 0 var(--space-3);
}

/* ---------- Nøgletal ---------- */

.budget-package-details__summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:var(--space-3);
}

.budget-package-details__summary-item{
    padding:var(--space-3) var(--space-4);

    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface);
}

.budget-package-details__summary-label{
    display:block;
    color:var(--color-text-muted);
    font-size:.78rem;
}

.budget-package-details__summary-value{
    display:block;
    margin-top:2px;
    font-size:1.25rem;
    font-weight:800;
}

/* ---------- Tilstande ---------- */

.budget-package-details__loading,
.budget-package-details__empty{
    padding:var(--space-6);

    border:1px dashed var(--color-border);
    border-radius:var(--radius-md);

    color:var(--color-text-muted);
    text-align:center;
}

.budget-package-details__error,
.budget-package-workflow__error,
.budget-package-comments__error{
    padding:var(--space-4);

    border:1px solid #FCA5A5;
    border-left:4px solid var(--color-danger);
    border-radius:var(--radius-sm);

    background:#FEF2F2;
    color:#991B1B;
    font-weight:600;
}

/* =========================================================
   GRID
========================================================= */

.budget-package-grid{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
    min-width:0;
}

.budget-package-grid__toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    flex-wrap:wrap;
}

.budget-package-grid__status{
    font-size:.85rem;
    color:var(--color-text-muted);
}

.budget-package-grid__viewport{
    overflow:auto;
    max-height:min(68vh,760px);

    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface);
}

.budget-package-grid__table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-variant-numeric:tabular-nums;
}

.budget-package-grid__head .budget-package-grid__header{
    position:sticky;
    top:0;
    z-index:2;

    padding:10px 12px;

    background:#F8FAFC;
    border-bottom:1px solid var(--color-border);

    font-size:.78rem;
    font-weight:700;
    letter-spacing:.02em;
    text-align:right;
    white-space:nowrap;
}

.budget-package-grid__head
.budget-package-grid__header:first-child{
    left:0;
    z-index:3;
    text-align:left;
}

.budget-package-grid__row-header{
    position:sticky;
    left:0;
    z-index:1;

    padding:10px 12px;

    background:var(--color-surface);
    border-bottom:1px solid var(--color-border);
    border-right:1px solid var(--color-border);

    font-weight:600;
    text-align:left;
    white-space:nowrap;
}

.budget-package-grid__row:nth-child(even)
.budget-package-grid__row-header{
    background:#FCFCFD;
}

.budget-package-grid__cell{
    padding:8px 12px;

    border-bottom:1px solid var(--color-border);

    text-align:right;
    white-space:nowrap;
}

.budget-package-grid__row:nth-child(even)
.budget-package-grid__cell{
    background:#FCFCFD;
}

.budget-package-grid__cell--readonly{
    color:var(--color-text-muted);
    background:#F8FAFC;
}

.budget-package-grid__cell--editable{
    cursor:cell;
}

/* ---------------------------------------------------------
   LAAST CELLE

   Loenprocenten kan ikke budgetteres, foer omsaetningen er
   det. Cellen skal se laast ud - ikke bare tom. En tom
   celle inviterer til at taste; en laast forklarer, hvorfor
   det ikke kan lade sig goere, naar man holder musen over
   den.
--------------------------------------------------------- */

.budget-package-grid__cell--locked{
    cursor:not-allowed;
    background:repeating-linear-gradient(
        135deg,
        #F1F5F9,
        #F1F5F9 6px,
        #E7ECF3 6px,
        #E7ECF3 12px
    );
    color:var(--color-text-muted);
}

.budget-package-grid__cell--locked
.budget-package-grid__cell-value{
    opacity:.55;
}

/* ---------------------------------------------------------
   SAMMENLIGNINGSTAL

   Sammenligningen staar under budgettallet og skal kunne
   ses uden at konkurrere med det. Index farves, fordi det
   er det, oejet leder efter: over eller under hundrede.
--------------------------------------------------------- */

.budget-package-grid__cell--has-comparison{
    line-height:1.2;
}

.budget-package-grid__cell-comparison{
    display:flex;
    justify-content:flex-end;
    align-items:baseline;
    gap:6px;
    margin-top:2px;
    font-size:10px;
    font-weight:600;
    color:var(--color-text-muted);
}

/*
 * Hvor sammenligningstallet kom fra. Samme farver som i
 * Excel-skabelonen.
 */
.budget-package-grid__cell-comparison.is-actual{
    color:#166534;
}

.budget-package-grid__cell-comparison.is-budget{
    color:#92400E;
}

.budget-package-grid__cell-comparison.is-mixed{
    color:#1E40AF;
}

.budget-package-grid__cell-comparison.is-actual .budget-package-grid__cell-comparison-value,
.budget-package-grid__cell-comparison.is-budget .budget-package-grid__cell-comparison-value,
.budget-package-grid__cell-comparison.is-mixed .budget-package-grid__cell-comparison-value{
    padding:0 4px;
    border-radius:3px;
}

.budget-package-grid__cell-comparison.is-actual .budget-package-grid__cell-comparison-value{
    background:#E8F5EC;
}

.budget-package-grid__cell-comparison.is-budget .budget-package-grid__cell-comparison-value{
    background:#FEF3C7;
}

.budget-package-grid__cell-comparison.is-mixed .budget-package-grid__cell-comparison-value{
    background:#E0EAFF;
}

.budget-package-grid__cell--comparison.is-actual{
    color:#166534;
    background:#F1FAF3;
}

.budget-package-grid__cell--comparison.is-budget{
    color:#92400E;
    background:#FFFBEB;
}

.budget-package-grid__cell--comparison.is-mixed{
    color:#1E40AF;
    background:#EFF4FF;
}

.budget-package-grid__legend{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    font-size:11px;
    color:var(--color-text-muted);
}

.budget-package-grid__legend[hidden]{
    display:none;
}

.budget-package-grid__legend-title{
    font-weight:600;
}

.budget-package-grid__legend-item{
    padding:2px 8px;
    border-radius:999px;
    font-weight:700;
    cursor:help;
}

.budget-package-grid__legend-item.is-actual{
    color:#166534;
    background:#E8F5EC;
}

.budget-package-grid__legend-item.is-budget{
    color:#92400E;
    background:#FEF3C7;
}

.budget-package-grid__legend-item.is-mixed{
    color:#1E40AF;
    background:#E0EAFF;
}

.budget-package-grid__cell-index.is-up{
    color:#15803D;
}

.budget-package-grid__cell-index.is-down{
    color:#B91C1C;
}

.budget-package-grid__cell--editable:hover{
    background:#EEF6FF;
}

.budget-package-grid__cell--selected{
    outline:2px solid var(--color-primary);
    outline-offset:-2px;
}

.budget-package-grid__cell--editing{
    background:#EEF6FF;
    padding:0;
}

.budget-package-grid__cell--editing input{
    width:100%;
    padding:8px 12px;

    border:0;
    outline:0;
    background:transparent;

    font:inherit;
    text-align:right;
}

.budget-package-grid__cell--dirty{
    box-shadow:inset 3px 0 0 var(--color-warning);
}

.budget-package-grid__cell--saving{
    opacity:.6;
}

.budget-package-grid__cell--error,
.budget-package-grid__editor--invalid{
    background:#FEF2F2;
    box-shadow:inset 3px 0 0 var(--color-danger);
}

.budget-package-grid__dirty-indicator,
.budget-package-grid__saving-indicator,
.budget-package-grid__error-indicator{
    margin-left:6px;
    font-size:.7rem;
    vertical-align:super;
}

.budget-package-grid__error-indicator{
    color:var(--color-danger);
}

.budget-package-grid__empty{
    padding:var(--space-6);
    color:var(--color-text-muted);
    text-align:center;
}

/* =========================================================
   WORKFLOW
========================================================= */

.budget-package-workflow{
    padding:var(--space-4);

    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface);
}

.budget-package-workflow__title{
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--color-text-muted);
    margin:0 0 var(--space-3);
}

.budget-package-workflow__actions{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    margin-top:var(--space-3);
}

.budget-package-workflow__action{
    padding:10px 16px;

    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);

    background:var(--color-surface);
    font-weight:700;
    cursor:pointer;
}

.budget-package-workflow__action:hover{
    background:#F9FAFB;
}

.budget-package-workflow__action--submit{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:white;
}

.budget-package-workflow__action--submit:hover{
    background:var(--color-primary-hover);
}

.budget-package-workflow__action--approve{
    background:var(--color-success);
    border-color:var(--color-success);
    color:white;
}

.budget-package-workflow__action--return{
    background:#FFFBEB;
    border-color:var(--color-warning);
    color:#92400E;
}

.budget-package-workflow__action--cancel{
    color:var(--color-danger);
}

.budget-package-workflow__action:disabled{
    background:var(--color-border);
    border-color:var(--color-border);
    color:var(--color-text-muted);
    cursor:not-allowed;
}

.budget-package-workflow__busy{
    margin-top:var(--space-2);
    color:var(--color-text-muted);
    font-size:.85rem;
}

.budget-package-workflow__validation{
    margin-top:var(--space-3);
    padding:var(--space-3);

    border-radius:var(--radius-sm);
    background:#FFFBEB;
    color:#92400E;
    font-size:.85rem;
}

/* =========================================================
   SESSIONER
========================================================= */

.budget-package-details__sessions{
    padding:var(--space-4);

    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface);
}

.budget-package-details__sessions-list{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    margin:0;
    padding:0;
    list-style:none;
    font-size:.88rem;
}

.budget-package-details__sessions-empty{
    color:var(--color-text-muted);
    font-size:.88rem;
}

/* =========================================================
   KOMMENTARER
========================================================= */

.budget-package-comments{
    padding:var(--space-4);

    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface);
}

.budget-package-comments--loading{
    opacity:.6;
}

.budget-package-comments__toolbar{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    flex-wrap:wrap;
    margin-bottom:var(--space-3);
}

.budget-package-comments__filter{
    padding:8px 10px;

    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);

    background:var(--color-surface);
    font:inherit;
}

.budget-package-comments__count{
    color:var(--color-text-muted);
    font-size:.85rem;
}

.budget-package-comments__scope{
    margin-left:auto;
    color:var(--color-text-muted);
    font-size:.8rem;
}

.budget-package-comments__list{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);

    max-height:420px;
    overflow-y:auto;

    margin:0;
    padding:0;
    list-style:none;
}

.budget-package-comments__item-header{
    display:flex;
    align-items:baseline;
    gap:var(--space-2);
    margin-bottom:2px;
}

.budget-package-comments__author{
    font-weight:700;
    font-size:.88rem;
}

.budget-package-comments__date,
.budget-package-comments__context{
    color:var(--color-text-muted);
    font-size:.78rem;
}

.budget-package-comments__body{
    font-size:.9rem;
    line-height:1.5;
    white-space:pre-wrap;
}

.budget-package-comments__status{
    display:inline-block;
    margin-top:4px;
    padding:2px 8px;

    border-radius:999px;
    background:#ECFDF5;
    color:#047857;

    font-size:.72rem;
    font-weight:700;
}

.budget-package-comments__actions{
    display:flex;
    gap:var(--space-2);
    margin-top:var(--space-2);
}

.budget-package-comments__empty,
.budget-package-comments__loading{
    padding:var(--space-4);
    color:var(--color-text-muted);
    font-size:.88rem;
    text-align:center;
}

.budget-package-comments__composer{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    margin-top:var(--space-4);
    padding-top:var(--space-4);
    border-top:1px solid var(--color-border);
}

.budget-package-comments__composer--readonly{
    display:none;
}

.budget-package-comments__textarea{
    width:100%;
    min-height:84px;
    resize:vertical;

    padding:10px 12px;

    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);

    font:inherit;
}

.budget-package-comments__submit{
    align-self:flex-end;

    padding:10px 16px;

    border:0;
    border-radius:var(--radius-sm);

    background:var(--color-primary);
    color:white;
    font-weight:700;
    cursor:pointer;
}

.budget-package-comments__submit:disabled{
    background:var(--color-border);
    color:var(--color-text-muted);
    cursor:not-allowed;
}

/* =========================================================
   RESPONSIVT
========================================================= */

@media (max-width: 1100px){
    .budget-package-details__main{
        grid-template-columns:minmax(0,1fr);
    }
}

@media (max-width: 720px){
    .budget-package-details__header{
        flex-direction:column;
    }

    .budget-package-details__header-meta{
        align-items:flex-start;
        min-width:0;
        width:100%;
    }
}

.budget-package-page-actions{
    display:flex;
    gap:var(--space-3);
    flex-wrap:wrap;
}

/* =========================================================
   EXCEL-IMPORT OG ÆNDRINGSLOG
========================================================= */

.budget-import-modal{
    width:min(880px,calc(100vw - 32px));

    /*
     * Overskrift og knapper staar fast; kun indholdet
     * ruller. Saa kan man altid naa "Importér" - ogsaa
     * naar oversigten har 50 linjer.
     */
    max-height:calc(100vh - 32px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.budget-import-modal > .modal-header,
.budget-import-modal > .modal-actions{
    flex:0 0 auto;
}

.budget-import-modal > .modal-actions{
    padding-top:var(--space-3, 12px);
    border-top:1px solid var(--border, #e5e7eb);
}

#budgetImportContent{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding-right:4px;
}

.budget-import-summary{
    display:flex;
    gap:var(--space-3);
    flex-wrap:wrap;
    margin:var(--space-4) 0;
}

.budget-import-summary .my-tasks-card{
    flex:1 1 120px;
}

.budget-import-issues{
    max-height:150px;
    overflow-y:auto;

    padding:var(--space-3);
    margin-bottom:var(--space-4);

    border-radius:var(--radius-sm);
    background:#FFFBEB;
    color:#92400E;

    font-size:.85rem;
    line-height:1.7;
}

.budget-import-table-wrap{
    max-height:46vh;
    overflow:auto;

    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
}

.budget-import-table th,
.budget-change-log th{
    position:sticky;
    top:0;
    z-index:1;

    background:#F8FAFC;
    font-size:.78rem;
    letter-spacing:.02em;
}

.budget-import-table .is-number,
.budget-change-log .is-number{
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.budget-import-table .is-new,
.budget-change-log .is-new{
    font-weight:700;
    color:var(--color-primary);
}

.budget-change-log{
    font-size:.88rem;
}


.budget-package-details__grid{
    min-width:0;
    overflow:hidden;
}


/* =========================================================
   OPSUMMERING - aaret i alt mod sidste aar
========================================================= */

.budget-summary{
    margin-bottom:var(--space-4);
}

.budget-summary__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:var(--space-3);
    margin-bottom:var(--space-3);
}

.budget-summary__head .budget-package-details__section-title{
    margin:0 0 2px;
}

.budget-summary__heading{
    margin:var(--space-4) 0 var(--space-2);
    font-size:.9rem;
}

.budget-summary__groups{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(460px,1fr));
    gap:var(--space-3);
}

.budget-summary__group{
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    overflow-x:auto;
}

.budget-summary__group.is-total{
    border-color:#94A3B8;
    background:#F8FAFC;
}

.budget-summary__table{
    width:100%;
    border-collapse:collapse;
    font-size:.86rem;
}

.budget-summary__table th,
.budget-summary__table td{
    padding:6px 10px;
    border-bottom:1px solid var(--color-border);
    white-space:nowrap;
}

.budget-summary__table tbody tr:last-child td{
    border-bottom:none;
}

.budget-summary__table th{
    background:#F8FAFC;
    font-size:.78rem;
    text-align:left;
}

.budget-summary__table th:first-child{
    font-size:.86rem;
    color:var(--color-text, #0F172A);
}

.budget-summary__table .is-number{
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.budget-summary__table tr.is-output td{
    font-weight:700;
}

.budget-summary__table .is-up{
    color:#166534;
}

.budget-summary__table .is-down{
    color:#B91C1C;
}

.budget-summary__hint{
    margin-left:6px;
    padding:1px 6px;
    border-radius:999px;
    background:#EEF2FF;
    color:#3730A3;
    font-size:.68rem;
    font-weight:500;
}

.budget-summary__note{
    margin:0 0 var(--space-3);
    padding:var(--space-2) var(--space-3);
    border-radius:var(--radius-sm);
    background:#FFFBEB;
    color:#92400E;
    font-size:.82rem;
}

/* I importvinduet er der kun plads til een tabel i bredden */
.budget-import-modal .budget-summary__groups{
    grid-template-columns:1fr;
}

.budget-summary__table th:not(:first-child),
.budget-summary__table td:not(:first-child){
    width:1%;
}

.budget-summary__note-hint{
    margin-top:4px;
    opacity:.85;
}

@media (max-width:560px){
    .budget-summary__groups{
        grid-template-columns:1fr;
    }
}