/* ===============================
   Tvinga vit bakgrund i HF Spaces
   =============================== */

html, body {
    background: #ffffff !important;
    min-height: auto !important;
    overflow-x: hidden !important;
}

/* Gradio root */
.gradio-container {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.gradio-container > .wrap {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* HF wrapper runt appen */
#root,
#app,
.app,
main {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.gradio-container > .main,
.gradio-container > .main > .wrap,
.gradio-container .contain,
.gradio-container .contain > .tabs,
.gradio-container .block,
.gradio-container .form {
    background: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

.gradio-container:focus,
.gradio-container:focus-visible,
.gradio-container:focus-within,
.gradio-container > .wrap:focus,
.gradio-container > .wrap:focus-visible,
.gradio-container > .wrap:focus-within,
.gradio-container > .main:focus,
.gradio-container > .main:focus-visible,
.gradio-container > .main:focus-within,
.gradio-container > .main > .wrap:focus,
.gradio-container > .main > .wrap:focus-visible,
.gradio-container > .main > .wrap:focus-within,
.gradio-container .contain:focus,
.gradio-container .contain:focus-visible,
.gradio-container .contain:focus-within {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* =====================================================
   BAS / RESET (kontrollerad)
   ===================================================== */


:root {
    color-scheme: light !important;
    --body-background-fill: #ffffff !important;
    --background-fill-primary: #ffffff !important;
    --body-text-color: #000000 !important;
    --block-label-background-fill: #ffffff !important;
    --background-fill-secondary: #ffffff !important;
    --panel-background-fill: #ffffff !important;
    --block-label-text-color: #000000 !important;
    --checkbox-background-color: #ffffff;
}

body {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
  color: #1e5bd7 !important;
  text-align: center;
}

.app-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 18px 0;
    padding: 0;
    background: #ffffff !important;
}

.app-header-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    background: transparent !important;
}

.app-header-row .title {
    margin: 0;
    text-align: left;
    background: transparent !important;
}

h2, h3, h4, p, span, label, li {
    color: #000000 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: none !important;
}

.gradio-container hr {
    display: none !important;
}



/* ===============================
   TA BORT GRADIO TOP BAR / BLÅ LINJE
   =============================== */

/* Gradio container header */
.gradio-container > header,
.gradio-container > footer,
.gradio-container .topbar,
.gradio-container .app-header {
    display: none !important;
}

/* Ibland ligger den som hr */
.gradio-container hr {
    display: none !important;
}

/* Ta bort Gradio-h1-linjen */
.prose h1 {
    border-bottom: none !important;
}

/* =====================================================
   FLIKAR
   ===================================================== */

.tabs,
.tabs > div,
.tabs .tab-wrapper,
.tabs .tab-nav,
.tabs .tabitem {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.tabs .tab-nav {
    display: flex !important;
}

button[role="tab"] {
    flex: 1 1 0 !important;
    justify-content: center !important;
    text-align: center !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 12px !important;
    color: #1e5bd7 !important;
    background: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

button[role="tab"][aria-selected="true"] {
    background: #eef3ff !important;
}

.tabitem {
    border: none !important;
    box-shadow: none !important;
}

.tabs:focus,
.tabs:focus-visible,
.tabs:focus-within,
.tabs > div:focus,
.tabs > div:focus-visible,
.tabs > div:focus-within,
.tabs .tab-wrapper:focus,
.tabs .tab-wrapper:focus-visible,
.tabs .tab-wrapper:focus-within,
.tabs .tabitem:focus,
.tabs .tabitem:focus-visible,
.tabs .tabitem:focus-within,
.gradio-container .form:has(.tabs),
.gradio-container div.form:has(.tabs),
.gradio-container .block:has(.tabs),
.gradio-container .wrap:has(.tabs) {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: #ffffff !important;
}

.tab-intro {
    text-align: center;
    margin: 8px 0 14px 0;
    font-size: 15px;
}

/* =====================================================
   HUVUDFRÅGOR (Buttons / Cards)
   ===================================================== */
.main-card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 22px auto 28px auto !important;
}

.main-card-grid > .card {
    min-width: 0 !important;
    width: 100% !important;
}

.card-shell {
    width: 100%;
    max-width: 240px;
    height: 130px;
    margin: 0 auto;
    background: #ffffff !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.card-shell.selected {
    background: #eef3ff !important;
    box-shadow: inset 0 0 0 1px rgba(30, 91, 215, 0.08);
}

button.gr-button.card {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 14px !important;
}

/* Innehåll i huvudfråge-kort */
.card-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

/* Titel – fet */
.card-title {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    color: #000000;
}

/* Huvudfråga – normal text */
.card-question {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.25;
    color: #000000;
}

.card {
    position: relative;
    padding: 12px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Osynlig klick-yta */
.card-overlay {
    position: absolute !important;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.card {
    position: relative;
    padding: 12px;
}

/* Osynlig klickyta ovanpå kortet */
.card-overlay {
    position: absolute !important;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 980px) {
    .main-card-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
        max-width: 620px !important;
    }
}

@media (max-width: 560px) {
    .main-card-grid {
        grid-template-columns: 1fr !important;
        max-width: 280px !important;
        gap: 18px !important;
    }
}

/* =====================================================
   FAQ
   ===================================================== */

.question-list,
.question-list *,
.question-list > div,
.question-list > div > div,
.question-list .wrap,
.question-list .wrap-inner,
.question-list .form,
.question-list .block,
.question-list .container,
.question-list fieldset,
.question-list legend,
.question-list label[data-testid="block-label"],
.question-list label,
.question-list .gr-radio {
    background: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.question-list {
    border: 2px solid #1e5bd7 !important;
    border-radius: 16px !important;
    padding: 6px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.gradio-container .form:has(.question-list),
.gradio-container div.form:has(.question-list),
.gradio-container .block:has(.question-list) {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}

.question-list > div,
.question-list > div > div,
.question-list fieldset,
.question-list .wrap,
.question-list .wrap-inner,
.question-list .block,
.question-list .container,
.question-list .form {
    box-shadow: none !important;
    border-color: transparent !important;
}

.question-list::before,
.question-list::after,
.question-list > div::before,
.question-list > div::after,
.question-list > div > div::before,
.question-list > div > div::after,
.question-list fieldset::before,
.question-list fieldset::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
}

.question-list label[data-testid="block-label"],
.question-list legend {
    display: none !important;
}

.question-list:focus,
.question-list:focus-visible,
.question-list:focus-within,
.question-list > div:focus,
.question-list > div:focus-visible,
.question-list > div:focus-within,
.question-list fieldset:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.question-list .gr-radio {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.question-list .gr-radio label,
.question-list label[data-testid="radio-label"] {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    color: #000000 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

.question-list .gr-radio label::before,
.question-list .gr-radio label::after,
.question-list label[data-testid="radio-label"]::before,
.question-list label[data-testid="radio-label"]::after,
.question-list input[type="radio"] + *::before,
.question-list input[type="radio"] + span::before {
    display: none !important;
    content: none !important;
}

.question-list input[type="radio"] {
    display: none !important;
}

.question-list .gr-radio label span,
.question-list label[data-testid="radio-label"] span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #000000 !important;
}

.question-list .gr-radio label:hover,
.question-list label[data-testid="radio-label"]:hover,
.question-list input[type="radio"]:checked + span,
.question-list label[data-testid="radio-label"]:has(input[type="radio"]:checked) {
    background: #eef3ff !important;
    border-radius: 12px !important;
}

/* =====================================================
   MEDDELANDE (Textbox) – STABIL LÖSNING
   ===================================================== */

/* Yttre container */
.message-box {
    background: #ffffff !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 16px !important;
    padding: 12px !important;
    min-height: 170px;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.gradio-container .message-box,
.gradio-container .message-box > div,
.gradio-container .message-box > label,
.gradio-container .message-box > .wrap,
.gradio-container .message-box .wrap,
.gradio-container .message-box .block,
.gradio-container .message-box .block-label,
.gradio-container .message-box .form {
    border-color: #1e5bd7 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

.gradio-container .form:has(.message-box),
.gradio-container div.form:has(.message-box) {
    background: #ffffff !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.gradio-container .message-box::before,
.gradio-container .message-box::after,
.gradio-container .message-box > div::before,
.gradio-container .message-box > div::after,
.gradio-container .message-box > label::before,
.gradio-container .message-box > label::after,
.gradio-container .message-box .wrap::before,
.gradio-container .message-box .wrap::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ta bort Gradio-inre effekter */
.message-box .wrap,
.message-box.gr-box {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* YTTRE BLOCK – döda Gradio-ram + mörka hörn */
.block.message-box {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

/* Label-container som Gradio använder för extra ram */
.message-box label.show_textbox_border {
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    border-radius: 16px !important;
}

/* Själva textarea – ALL text ritas här */
.message-box textarea {
    width: 100% !important;
    min-height: 120px !important;
    overflow-y: auto !important;

    background-color: #ffffff !important;
    color: #000000 !important;

    border: none !important;
    outline: none !important;
    resize: none;

    font-size: 15px;
    line-height: 1.4;

    -webkit-text-fill-color: #000000 !important;
}

.message-box .scroll-hide,
.message-box .hide-container {
    overflow: visible !important;
}

/* Placeholder */
.message-box textarea::placeholder {
    color: #6b6b6b !important;
    opacity: 1 !important;
}

/* ===============================
   TA BORT YTTRE GRADIO-RAM PÅ TEXTBOX
   =============================== */

/* Label-containern runt textbox */
label.show_textbox_border,
label.container.show_textbox_border {
    border: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 16px !important;
}

/* Säkerhetsnät – om Gradio ändrar klassnamn */
.block:has(.message-box) > label {
    border: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

.gradio-container .message-box textarea,
.gradio-container .message-box textarea:focus,
.gradio-container .message-box textarea:focus-visible,
.gradio-container .message-box textarea:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.message-box + .row,
.message-box ~ .row {
    margin-top: -6px !important;
}

.message-box ~ .row .send-btn,
.message-box ~ .row button.gr-button.send-btn {
    margin-top: 0 !important;
}

/* ===============================
   TA BORT FOCUS-RUTA I TEXTAREA
   =============================== */

/* Browser focus */
.message-box textarea:focus,
.message-box textarea:focus-visible,
.message-box textarea:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Gradio / Svelte focus-layer */
.message-box textarea::after,
.message-box textarea::before {
    display: none !important;
}

/* Om Gradio lägger focus på wrapper */
.message-box .wrap:focus,
.message-box .wrap:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: #1e5bd7 !important; /* behåll din blå ram */
}

/* Safari / Chromium specialfall */
.message-box textarea {
    -webkit-tap-highlight-color: #ffffff !important;
}

/* =====================================================
   SVAR
   ===================================================== */


.answer-box .wrap,
.answer-box.gr-box {
    color: #1e5bd7 !important;
    background: #ffffff !important;
    border: none !important;
}
.answer-box {
    border: 2px solid #1e5bd7 !important;
    border-radius: 10px !important;
    min-height: 260px;
    padding: 14px;
}


.answer-box * {
    color: #000000 !important;
    background: #ffffff !important;
    border: none !important;
    /*border: 2px solid #000000 !important;
    border-radius: 10px !important;*/
}

.answer-box h1,
.answer-box h2,
.answer-box h3,
.answer-box h4 {
    margin-top: 0 !important;
}

.answer-box .faq-example-label {
    margin: 0.35rem 0 0.6rem !important;
    font-size: 1.08rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

.answer-box .faq-example-label strong {
    font-weight: 700 !important;
}

.answer-note {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: #000000 !important;
}

.answer-note,
.answer-note * {
    background: #ffffff !important;
    color: #000000 !important;
}

/* ===============================
   SKICKA & RENSA – ABSOLUT LJUST
   =============================== */

.gradio-container button.gr-button.send-btn,
.gradio-container button.gr-button.send-btn.primary,
.gradio-container button.gr-button.send-btn.secondary,
.gradio-container .send-btn,
.gradio-container .send-btn button {
    background-color: #1e5bd7 !important;
    color: #ffffff !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 10px !important;

    box-shadow: none !important;
    font-weight: 600;

    --button-primary-background-fill: #1e5bd7 !important;
    --button-primary-background-fill-hover: #1748aa !important;
    --button-primary-text-color: #ffffff !important;
}

.gradio-container button.gr-button.send-btn:hover {
    background-color: #1748aa !important;
    border-color: #1748aa !important;
}

.gradio-container .send-btn *,
.gradio-container button.send-btn * {
    color: #ffffff !important;
}

/* ===============================
   CHECKBOX – TA BORT SVART BAKGRUND
   =============================== */

/* Wrapper runt checkbox */
.gradio-container .gr-checkbox,
.gradio-container .gr-checkbox *,
.gradio-container .form:has(.gr-checkbox) {
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

/* Själva checkboxen */
.gradio-container .gr-checkbox input[type="checkbox"] {
    accent-color: #000000;
}

/* Texten */
.gradio-container .gr-checkbox label {
    color: #000000 !important;
    font-weight: 500;
}

  /* ===============================
   TA BORT SVARTA HÖRN I MEDDELANDE
   =============================== */

label.show_textbox_border::before,
label.show_textbox_border::after {
    display: none !important;
    content: none !important;
}

label.show_textbox_border {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===============================
   TVINGA LJUSA KNAPPAR (ÄVEN SECONDARY)
   =============================== */

.gradio-container button.gr-button.secondary,
.gradio-container button.gr-button.primary {
    background-color: #1e5bd7 !important;
    color: #ffffff !important;
    border: 2px solid #1e5bd7 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.gradio-container button.gr-button.secondary:hover,
.gradio-container button.gr-button.primary:hover {
    background-color: #1748aa !important;
    border-color: #1748aa !important;
}  

/* ===============================
   DÖLJ GRADIO-FOOTER I EMBED
   =============================== */

footer,
.gradio-container footer,
.gradio-container .footer,
.gradio-container a[href*="gradio.app"],
.gradio-container a[href*="api"],
.gradio-container button[aria-label*="Settings"],
.gradio-container button[title*="Settings"] {
    display: none !important;
}

.gradio-container .built-with,
.gradio-container .prose footer,
.gradio-container [class*="footer-links"] {
    display: none !important;
}

  /* ===============================
   TA BORT SVART PLATTA BAKOM CHECKBOX
   =============================== */

.gradio-container .form:has(.gr-checkbox) {
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

label.checkbox-container * input[type="checkbox"] {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  /* You might also want to ensure the border style and width are consistent */
  border-style: solid;
  border-width: 2px;
}

/* ===============================
   CHECKBOX – FUNGERANDE SVART BOCK
   =============================== */
/*
.gradio-container input[type="checkbox"] {
    accent-color: #000000 !important;
    background-color: #ffffff !important;
}
*/
.form .block{
    background: #ffffff !important;
}

/* ===============================
   CHECKBOX – KORREKT STYLING
   =============================== */

.gradio-container .gr-checkbox {
    --checkbox-background-color: #ffffff;
    --checkbox-border-color: #000000;
}