/* =============================================
   Kundeportal – Frontend CSS
   ============================================= */

:root {
    --kp-primary:       #2563eb;
    --kp-primary-hover: #1d4ed8;
    --kp-success:       #16a34a;
    --kp-warning:       #d97706;
    --kp-danger:        #dc2626;
    --kp-gray-50:       #f9fafb;
    --kp-gray-100:      #f3f4f6;
    --kp-gray-200:      #e5e7eb;
    --kp-gray-400:      #9ca3af;
    --kp-gray-600:      #4b5563;
    --kp-gray-800:      #1f2937;
    --kp-border:        #e5e7eb;
    --kp-radius:        8px;
    --kp-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --kp-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
}

/* ---- Wrap ---- */
.kundeportal-wrap {
    font-family: var(--kp-font);
    color: var(--kp-gray-800);
    max-width: 1000px;
    margin: 0 auto;
}

/* ---- Header ---- */
.kundeportal-header {
    margin-bottom: 28px;
}
.kundeportal-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--kp-gray-800);
}
.kundeportal-welcome {
    color: var(--kp-gray-600);
    margin: 0;
    font-size: 1rem;
}

/* ---- Bokser og meldinger ---- */
.kundeportal-box {
    background: var(--kp-gray-50);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 24px;
    text-align: center;
}

.kundeportal-notice {
    border-radius: var(--kp-radius);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: .95rem;
}
.kundeportal-notice p { margin: 0; }
.kundeportal-notice-info    { background: #eff6ff; border-left: 4px solid var(--kp-primary); color: #1e40af; }
.kundeportal-notice-warning { background: #fffbeb; border-left: 4px solid var(--kp-warning);  color: #92400e; }
.kundeportal-notice-error   { background: #fef2f2; border-left: 4px solid var(--kp-danger);   color: #991b1b; }

/* ---- Knapper ---- */
.kundeportal-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.kundeportal-btn:active { transform: scale(.98); }
.kundeportal-btn-primary {
    background: var(--kp-primary);
    color: #fff;
}
.kundeportal-btn-primary:hover {
    background: var(--kp-primary-hover);
    color: #fff;
}

/* ---- Modul ---- */
.kundeportal-module {
    background: #fff;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    overflow: hidden;
    margin-bottom: 24px;
}
.kundeportal-module-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--kp-border);
    background: var(--kp-gray-50);
}
.kundeportal-module-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--kp-gray-800);
}

/* ---- Kundeinfo ---- */
.kundeportal-customer-info {
    padding: 12px 24px;
    background: #eff6ff;
    border-bottom: 1px solid var(--kp-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.kundeportal-customer-name {
    font-weight: 600;
    font-size: .95rem;
}
.kundeportal-customer-org {
    font-size: .85rem;
    color: var(--kp-gray-600);
    background: var(--kp-gray-100);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ---- Tabell ---- */
.kundeportal-table-wrap {
    overflow-x: auto;
    padding: 0;
}
.kundeportal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.kundeportal-table thead th {
    background: var(--kp-gray-50);
    padding: 11px 20px;
    text-align: left;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kp-gray-600);
    border-bottom: 1px solid var(--kp-border);
    white-space: nowrap;
}
.kundeportal-table tbody tr {
    border-bottom: 1px solid var(--kp-border);
    transition: background .1s;
}
.kundeportal-table tbody tr:last-child { border-bottom: none; }
.kundeportal-table tbody tr:hover { background: var(--kp-gray-50); }
.kundeportal-table td {
    padding: 13px 20px;
    vertical-align: middle;
}
.kundeportal-text-right { text-align: right; }

/* Overfalte rader */
.kundeportal-row-overdue td:first-child {
    border-left: 3px solid var(--kp-danger);
}

/* ---- Statuser / badges ---- */
.kundeportal-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}
.kundeportal-badge-paid    { background: #dcfce7; color: #166534; }
.kundeportal-badge-open    { background: #dbeafe; color: #1e40af; }
.kundeportal-badge-overdue { background: #fee2e2; color: #991b1b; }

/* ---- PDF-lenke ---- */
.kundeportal-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--kp-primary);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    padding: 5px 10px;
    border: 1px solid var(--kp-primary);
    border-radius: 5px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.kundeportal-pdf-link:hover {
    background: var(--kp-primary);
    color: #fff;
}

/* ---- Paginasjon-note ---- */
.kundeportal-pagination-note {
    padding: 12px 24px;
    font-size: .85rem;
    color: var(--kp-gray-400);
    text-align: right;
    border-top: 1px solid var(--kp-border);
    margin: 0;
}

/* =============================================
   Responsiv – mobil
   ============================================= */
@media (max-width: 640px) {
    .kundeportal-title { font-size: 1.35rem; }

    .kundeportal-table thead { display: none; }

    .kundeportal-table,
    .kundeportal-table tbody,
    .kundeportal-table tr,
    .kundeportal-table td {
        display: block;
        width: 100%;
    }
    .kundeportal-table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--kp-border);
    }
    .kundeportal-table td {
        padding: 5px 20px;
        text-align: right;
        position: relative;
    }
    .kundeportal-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 20px;
        font-weight: 600;
        font-size: .8rem;
        color: var(--kp-gray-600);
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    .kundeportal-text-right { text-align: right; }
}

/* =============================================
   Support-modul
   ============================================= */

/* ---- Generelle knapper i support ---- */
.kp-btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--kp-border);
    background: var(--kp-gray-50);
    color: var(--kp-gray-800);
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.kp-btn:hover { background: var(--kp-gray-100); }
.kp-btn:active { transform: scale(.98); }
.kp-btn--primary {
    background: var(--kp-primary);
    border-color: var(--kp-primary);
    color: #fff;
}
.kp-btn--primary:hover {
    background: var(--kp-primary-hover);
    border-color: var(--kp-primary-hover);
    color: #fff;
}
.kp-btn--sm { padding: 6px 12px; font-size: .85rem; }

/* ---- Seksjoner ---- */
.kp-support-wrap {
    margin-top: 32px;
}
.kp-support-section {
    background: #fff;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    overflow: hidden;
    margin-bottom: 28px;
    padding: 24px;
}
.kp-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 20px;
    color: var(--kp-gray-800);
}
.kp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.kp-section-header .kp-section-title { margin-bottom: 0; }

/* ---- Skjema ---- */
.kp-support-form .kp-form-group {
    margin-bottom: 16px;
}
.kp-support-form label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--kp-gray-800);
}
.kp-support-form input[type=text],
.kp-support-form select,
.kp-support-form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    font-size: .92rem;
    font-family: var(--kp-font);
    color: var(--kp-gray-800);
    box-sizing: border-box;
    transition: border-color .15s;
}
.kp-support-form input[type=text]:focus,
.kp-support-form select:focus,
.kp-support-form textarea:focus {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.kp-req { color: var(--kp-danger); }
.kp-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* ---- SLA badge i skjema ---- */
.kp-sla-badge {
    font-size: .875rem;
    color: var(--kp-gray-600);
    display: flex;
    align-items: center;
    gap: 8px;
}
.kp-sla-pill {
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}

/* ---- Sak-liste ---- */
.kp-empty {
    color: var(--kp-gray-400);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

/* ---- Enkelt sak ---- */
.kp-sak {
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}
.kp-sak-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: var(--kp-gray-50);
    cursor: pointer;
    user-select: none;
    gap: 12px;
    flex-wrap: wrap;
}
.kp-sak-header:hover { background: var(--kp-gray-100); }
.kp-sak-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}
.kp-sak-id {
    font-size: .8rem;
    color: var(--kp-gray-400);
    font-family: monospace;
    white-space: nowrap;
}
.kp-sak-tittel {
    font-weight: 600;
    font-size: .95rem;
    color: var(--kp-gray-800);
}
.kp-sak-kategori {
    font-size: .78rem;
    background: var(--kp-gray-200);
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--kp-gray-600);
}
.kp-sak-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kp-pill {
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.kp-sak-dato {
    font-size: .8rem;
    color: var(--kp-gray-400);
    white-space: nowrap;
}
.kp-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .85rem;
    color: var(--kp-gray-400);
    padding: 2px 4px;
    line-height: 1;
}

/* ---- Sak-innhold ---- */
.kp-sak-body {
    padding: 16px;
    border-top: 1px solid var(--kp-border);
    background: #fff;
}

/* ---- Meldinger / historikk ---- */
.kp-svarhistorikk h4 {
    font-size: .85rem;
    font-weight: 600;
    color: var(--kp-gray-600);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 16px 0 10px;
}
.kp-melding {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 6px;
    max-width: 90%;
}
.kp-melding--kunde {
    background: #eff6ff;
    border-left: 3px solid var(--kp-primary);
    margin-left: auto;
    margin-right: 0;
}
.kp-melding--admin {
    background: var(--kp-gray-50);
    border-left: 3px solid var(--kp-gray-400);
    margin-left: 0;
}
.kp-melding-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.kp-melding-header strong { font-size: .875rem; }
.kp-melding-tag {
    font-size: .75rem;
    background: rgba(0,0,0,.07);
    padding: 1px 7px;
    border-radius: 999px;
}
.kp-melding-dato {
    font-size: .75rem;
    color: var(--kp-gray-400);
    margin-left: auto;
}
.kp-melding-tekst {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--kp-gray-800);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Svar-form ---- */
.kp-svar-form-wrap {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--kp-border);
}
.kp-svar-form-wrap h4 {
    font-size: .875rem;
    font-weight: 600;
    margin: 0 0 10px;
}
.kp-svar-form textarea.kp-svar-tekst {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    font-size: .9rem;
    font-family: var(--kp-font);
    color: var(--kp-gray-800);
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 10px;
    transition: border-color .15s;
}
.kp-svar-form textarea.kp-svar-tekst:focus {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.kp-lukket-info {
    color: var(--kp-gray-400);
    font-size: .875rem;
    padding-top: 10px;
}

/* ---- Notices i support ---- */
.kp-notice {
    padding: 11px 14px;
    border-radius: 6px;
    font-size: .9rem;
    margin-bottom: 14px;
    border: 1px solid transparent;
}
.kp-notice--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}
.kp-notice--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.kp-notice--info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

/* ---- Responsiv ---- */
@media (max-width: 640px) {
    .kp-sak-header { flex-direction: column; align-items: flex-start; }
    .kp-melding { max-width: 100%; }
    .kp-form-footer { flex-direction: column; align-items: stretch; }
    .kp-form-footer .kp-btn { text-align: center; }
}

/* =============================================
   Fane-navigasjon
   ============================================= */

.kp-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--kp-border);
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.kp-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    font-size: .95rem;
    font-weight: 500;
    color: var(--kp-gray-600);
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    transition: color .15s, background .15s;
    position: relative;
}

.kp-tab:hover {
    color: var(--kp-gray-800);
    background: var(--kp-gray-100);
    text-decoration: none;
}

.kp-tab--active {
    color: var(--kp-primary);
    background: #fff;
    border-color: var(--kp-border);
    border-bottom-color: #fff;
    font-weight: 600;
}

.kp-tab--active:hover {
    color: var(--kp-primary);
    background: #fff;
}

.kp-tab-icon {
    font-size: .7em;
    opacity: .6;
}

.kp-tab-content {
    /* Innholdet vises direkte under fanene */
}

@media (max-width: 480px) {
    .kp-tabs { gap: 2px; }
    .kp-tab  { padding: 9px 14px; font-size: .88rem; }
}