/* =====================================================================
 * mobile.css
 * ---------------------------------------------------------------------
 * Mobile overrides for kunde-vendte sider.
 * Aktiveres KUN under 768px — desktop ser præcis ud som før.
 * ===================================================================== */

/* ----- Hamburger-knap (skjult på desktop) ----- */
.hi-hamburger {
    display: none;
    background: none;
    border: 1px solid var(--hi-line);
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    line-height: 1;
}
.hi-hamburger:focus { outline: 2px solid var(--hi-accent); }
.hi-hamburger-icon {
    display: inline-block;
    width: 22px;
    height: 16px;
    position: relative;
}
.hi-hamburger-icon::before,
.hi-hamburger-icon::after,
.hi-hamburger-icon span {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--hi-ink, #2a2a2a);
    border-radius: 1px;
}
.hi-hamburger-icon::before { top: 0; }
.hi-hamburger-icon span    { top: 7px; }
.hi-hamburger-icon::after  { bottom: 0; }


@media (max-width: 767.98px) {

    /* ===================================================================
     * HEADER
     * ===================================================================
     * Layout (toppen, altid synlig):
     *    [Hübsch]  [kunde-info]   [hamburger]
     *
     * Drawer (åbnes under, lige under header):
     *    Menu-links (My claims, New claim, Profile)
     *    Logout (som menupunkt)
     *    Sprog: en, da, de, fr (som menupunkt)
     * =================================================================== */
    .hi-header {
        padding: 0.6rem 0;
    }
    /* Top-rækken: brand venstre, kundeinfo midt, hamburger højre */
    .hi-header .container > .d-flex {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem !important;
    }
    .hi-brand {
        font-size: 1.4rem !important;
    }
    .hi-brand-mark { display: none; }

    /* Kundeinfo flyttes UD af "højre side"-blokken og placeres som
       sin egen blok i toppen (mellem brand og hamburger) */
    .hi-header .hi-userbox {
        display: block !important;
        text-align: right;
        font-size: 0.78rem;
        line-height: 1.2;
        margin-left: auto;
    }
    .hi-header .hi-userbox strong {
        font-size: 0.85rem;
    }
    .hi-header .hi-userbox br + span {
        color: var(--hi-ink-soft, #888);
    }

    /* Hamburger ALLERSIDST (efter kundeinfo) */
    .hi-hamburger {
        display: inline-flex;
        align-items: center;
        margin-left: 0.5rem;
    }

    /* Den oprindelige "højre side"-container (med login-knap, sprog) skjules
       som default. På mobil håndterer vi alle elementer separat — kundeinfo
       flyttes ud (se ovenfor), logout og sprog kommer i drawer. */
    .hi-header .container > .d-flex > .d-flex.align-items-center.gap-3 {
        display: contents;  /* lad børnene styres direkte af vores regler */
    }

    /* Login/Logout-knapper og sprogvælger skjult som default */
    .hi-header .btn-hi-outline,
    .hi-header .btn-hi-primary,
    .hi-lang {
        display: none;
    }

    /* Hovednavigation som default skjult */
    .hi-nav { display: none; }

    /* === DRAWER (når hamburger er klikket) === */
    body.hi-menu-open .hi-header .container > .d-flex {
        flex-wrap: wrap;
    }
    /* Menu-links lodret, højrestillet */
    body.hi-menu-open .hi-nav {
        display: block;
        order: 10;
        flex: 1 1 100%;  /* tag hele breddenedenunder top-rækken */
        margin-top: 0.5rem;
        border-top: 1px solid var(--hi-line);
    }
    body.hi-menu-open .hi-nav .nav {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    body.hi-menu-open .hi-nav .nav-link {
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--hi-line);
        font-size: 1rem;
        text-align: right;
    }

    /* Logout/login som menupunkt (samme styling som nav-link) */
    body.hi-menu-open .hi-header .btn-hi-outline,
    body.hi-menu-open .hi-header .btn-hi-primary {
        display: block;
        order: 11;
        flex: 1 1 100%;
        text-align: right !important;
        background: none !important;
        color: var(--hi-ink, #2a2a2a) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--hi-line) !important;
        border-radius: 0 !important;
        padding: 0.85rem 0 !important;
        font-size: 1rem !important;
        font-weight: 400 !important;
    }

    /* Sprogvælger som menupunkt: én linje med flag */
    body.hi-menu-open .hi-lang {
        display: flex;
        order: 12;
        flex: 1 1 100%;
        justify-content: flex-end;
        align-items: center;
        gap: 0.5rem;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--hi-line);
        font-size: 0.95rem;
    }
    body.hi-menu-open .hi-lang::before {
        content: attr(data-label);
        margin-right: auto;
        color: var(--hi-ink, #2a2a2a);
    }
    body.hi-menu-open .hi-lang a {
        padding: 0.35rem 0.6rem;
        font-size: 0.95rem;
        text-transform: uppercase;
    }


    /* ===================================================================
     * HERO / FORSIDE
     * =================================================================== */
    .hi-hero h1 {
        font-size: 1.6rem;
    }
    .hi-hero .lead {
        font-size: 1rem;
    }
    .hi-hero .btn,
    .hi-hero .btn-hi-primary,
    .hi-hero .btn-hi-outline {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
        padding: 0.85rem 1rem !important;
        font-size: 1rem;
    }


    /* ===================================================================
     * GENERELLE KORT OG KNAPPER
     * =================================================================== */
    .hi-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .hi-card h1, .hi-card h2 { font-size: 1.25rem; }
    .hi-card h3 { font-size: 1.05rem; }

    .btn, .form-control, .form-select { min-height: 44px; }
    .btn-sm { min-height: 38px; padding: 0.4rem 0.75rem !important; }

    .hi-customer-page .btn-hi-primary,
    .hi-customer-page form .btn-hi-primary { width: 100%; }
    .hi-customer-page .btn-group .btn,
    .hi-customer-page .d-inline-block .btn,
    .hi-customer-page .d-inline .btn { width: auto; }

    .form-control, .form-select {
        font-size: 1rem;
        padding: 0.65rem 0.75rem;
    }
    .form-label { font-size: 0.95rem; }
    textarea.form-control { min-height: 100px; }


    /* ===================================================================
     * CLAIM LISTING (kanban)
     * =================================================================== */
    .hi-customer-page .row > [class*="col-md-"] {
        margin-bottom: 1rem;
    }


    /* ===================================================================
     * CLAIM-DETALJE
     * =================================================================== */
    .hi-customer-page .row.g-3 > .col-md-3 img,
    .hi-customer-page .row.g-3 > .col-md-9 img {
        max-width: 100%;
        height: auto;
        max-height: 200px;
    }
    .hi-customer-page details > summary {
        padding: 0.75rem 0;
        font-size: 1rem;
    }


    /* ===================================================================
     * NEW-CLAIM STEP 1: Vælg faktura
     * Layout pr. faktura-kort:
     *   [radio]  [Faktura-nr (fed)]                            [Beløb]
     *            [Dato] · [PO-nr]
     * =================================================================== */
    .hi-customer-page .invoice-pick-table thead { display: none; }
    .hi-customer-page .invoice-pick-table,
    .hi-customer-page .invoice-pick-table tbody {
        display: block;
        width: 100%;
    }
    .hi-customer-page .invoice-pick-table tr {
        display: grid;
        grid-template-columns: 28px 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 0.6rem;
        row-gap: 0.15rem;
        border: 1px solid var(--hi-line);
        border-radius: 6px;
        margin-bottom: 0.5rem;
        padding: 0.6rem 0.75rem;
        align-items: start;
    }
    .hi-customer-page .invoice-pick-table td {
        padding: 0;
        border: 0;
        text-align: left;
    }
    /* Radio: spans to rows venstre */
    .hi-customer-page .invoice-pick-table td[data-col="radio"] {
        grid-row: 1 / span 2;
        align-self: center;
    }
    .hi-customer-page .invoice-pick-table td[data-col="radio"] input[type="radio"] {
        width: 22px;
        height: 22px;
        margin: 0;
    }
    /* Linje 1: Faktura-nr midt + beløb højre */
    .hi-customer-page .invoice-pick-table td[data-col="invoice"] {
        grid-column: 2;
        grid-row: 1;
        font-weight: 600;
        font-size: 1rem;
    }
    .hi-customer-page .invoice-pick-table td[data-col="amount"] {
        grid-column: 3;
        grid-row: 1;
        text-align: right !important;
        font-weight: 600;
        font-size: 0.95rem;
    }
    /* Linje 2: dato + PO-nr (slået sammen til ét felt) */
    .hi-customer-page .invoice-pick-table td[data-col="date"] {
        grid-column: 2 / span 2;
        grid-row: 2;
        font-size: 0.85rem;
        color: var(--hi-ink-soft, #888);
    }
    /* PO-nummer flyttes ind til samme linje som dato via en lille pseudo-trick:
       vi gør PO til "display:none" og indsætter dens indhold som ::after på dato. */
    .hi-customer-page .invoice-pick-table td[data-col="po"] {
        display: none;
    }
    /* PO bliver tilføjet via JS — eller vi kan vise det som ekstra tekst:
       Vi laver det enkelt og viser PO som lille badge på linje 2 hvis udfyldt. */
    .hi-customer-page .invoice-pick-table td[data-col="po"]:not(:empty) {
        display: block;
        grid-column: 2 / span 2;
        grid-row: 3;
        font-size: 0.78rem;
        color: var(--hi-ink-soft, #aaa);
    }
    .hi-customer-page .invoice-pick-table td[data-col="po"]:not(:empty)::before {
        content: "PO: ";
    }
    /* Expand-knap: fuld bredde nederst i faktura-kortet */
    .hi-customer-page .invoice-pick-table td[data-col="expand"] {
        display: block;
        grid-column: 1 / -1;
        grid-row: 4;
        text-align: left;
        margin-top: 0.15rem;
    }
    /* Detalje-række: egen blok (ikke grid-kort) lige under fakturaen */
    .hi-customer-page .invoice-pick-table tr.invoice-detail-row {
        display: none;
        grid-template-columns: none;
        border: 0;
        margin: -0.35rem 0 0.5rem;
        padding: 0;
    }
    .hi-customer-page .invoice-pick-table tr.invoice-detail-row.is-open { display: block; }
    .hi-customer-page .invoice-pick-table tr.invoice-detail-row > td { display: block; }


    /* ===================================================================
     * NEW-CLAIM STEP 2: Vælg produkter
     * Layout pr. linje:
     *   [thumb 56px]  [Varenr (fed) + navn]
     *                 Antal: 12      [Reklamér: -  0  +]
     * =================================================================== */
    .hi-customer-page .line-picker thead { display: none; }
    .hi-customer-page .line-picker,
    .hi-customer-page .line-picker tbody {
        display: block;
        width: 100%;
    }
    .hi-customer-page .line-picker tr {
        display: grid;
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 0.6rem;
        row-gap: 0.25rem;
        border: 1px solid var(--hi-line);
        border-radius: 6px;
        margin-bottom: 0.5rem;
        padding: 0.6rem 0.75rem;
        align-items: start;
    }
    .hi-customer-page .line-picker td {
        padding: 0;
        border: 0;
        font-size: 0.92rem;
        text-align: left;
    }
    /* Thumbnail: spans 3 rows venstre */
    .hi-customer-page .line-picker td[data-col="thumb"] {
        grid-row: 1 / span 3;
        align-self: start;
    }
    .hi-customer-page .line-picker td[data-col="thumb"] img,
    .hi-customer-page .line-picker .line-thumb {
        width: 56px !important;
        height: 56px !important;
        object-fit: cover;
        border-radius: 4px;
    }
    /* Linje 1: Varenr (fed) */
    .hi-customer-page .line-picker td[data-col="item-no"] {
        grid-column: 2;
        grid-row: 1;
        font-weight: 600;
    }
    /* Linje 2: Varenavn (mindre) */
    .hi-customer-page .line-picker td[data-col="item-name"] {
        grid-column: 2;
        grid-row: 2;
        font-size: 0.88rem;
        color: var(--hi-ink-soft, #555);
        word-break: break-word;
    }
    /* Linje 3: Antal-info + qty-stepper på samme linje */
    .hi-customer-page .line-picker td[data-col="qty-invoiced"] {
        grid-column: 2;
        grid-row: 3;
        text-align: left !important;
        font-size: 0.88rem;
        color: var(--hi-ink-soft, #555);
    }
    .hi-customer-page .line-picker td[data-col="qty-invoiced"]::before {
        content: attr(data-mobile-label) ": ";
        font-weight: 500;
        color: var(--hi-ink, #2a2a2a);
    }
    .hi-customer-page .line-picker td[data-col="qty-claimed"] {
        grid-column: 2;
        grid-row: 4;
        margin-top: 0.25rem;
    }
    .hi-customer-page .line-picker td[data-col="qty-claimed"]::before {
        content: attr(data-mobile-label) ": ";
        display: block;
        font-weight: 500;
        font-size: 0.88rem;
        margin-bottom: 0.25rem;
        color: var(--hi-ink, #2a2a2a);
    }
    /* Qty-stepper: kompakt */
    .hi-customer-page .line-picker .qty-stepper {
        display: inline-flex;
        align-items: center;
    }
    .hi-customer-page .line-picker input[type="number"],
    .hi-customer-page .line-picker .qty-input {
        width: 60px !important;
        max-width: 80px;
        text-align: center;
    }


    /* ===================================================================
     * NEW-CLAIM STEP 3: Knapper
     * Linje 1: Tilbage + Send (lige bredde)
     * Linje 2: Annullér (fuld bredde)
     * =================================================================== */
    .hi-customer-page .step3-actions,
    .hi-customer-page .step3-actions.d-flex {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .hi-customer-page .step3-actions .ms-auto {
        margin-left: 0 !important;
    }
    .hi-customer-page .step3-actions > .btn-hi-primary,
    .hi-customer-page .step3-actions > .btn-hi-outline:not(.btn-cancel) {
        flex: 1 1 0;
        min-width: 0;
        white-space: normal;
        font-size: 0.95rem;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .hi-customer-page .step3-actions > .btn-cancel {
        flex: 1 1 100%;
        order: 99;
        margin-top: 0.25rem;
        text-align: center;
    }


    /* ===================================================================
     * Foto-upload + diverse
     * =================================================================== */
    input[type="file"] {
        font-size: 1rem;
        padding: 0.5rem;
        min-height: 44px;
    }
    .hi-customer-page h1 {
        font-size: 1.5rem;
        word-wrap: break-word;
    }
    .badge.fs-6 { font-size: 0.85rem !important; }
    .hi-customer-page .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    .hi-customer-page .d-flex.justify-content-between.flex-wrap {
        flex-direction: row;
        align-items: center !important;
    }
}


/* =====================================================================
 * Tablet — 768px-991px
 * ===================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hi-customer-page .hi-card { padding: 1.25rem; }
}