/* IMK_UNBLOCK_DOC_INLINE_STYLES_V142: documentets inline-stilar från DB får styra färg/font. */
/* IMK_DOCUMENT_VIEW_V2
   Gemensam CSS-modul för uppladdade dokument.
   Appens runtime-shell styr sidbakgrund och vanliga kort.
   Uppladdade dokument styrs här och ska inte ärva blå appkort-regler.
*/

:root {
  --imk-document-card-bg: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
  --imk-document-card-border: rgba(148, 163, 184, 0.48);
  --imk-document-card-text: #0f172a;
  --imk-document-card-soft: #334155;
  --imk-document-warning-bg: #fff6d8;
  --imk-document-warning-border: #e8c96a;
  --imk-document-warning-text: #5f3f00;
  --imk-document-paper-bg: #ffffff;
  --imk-document-paper-text: #111111;
  --imk-document-action-bg: rgba(23, 37, 84, 0.64);
  --imk-document-action-border: rgba(147, 197, 253, 0.26);
  --imk-document-action-text: #eff6ff;
  --imk-document-danger-bg: #991b1b;
  --imk-document-danger-border: #fecaca;
  --imk-document-danger-text: #fff7f7;
}

/* Dokumentkortet runt "Systemextraherad dokumenttext". */
html body.imk-runtime-shell main .imk-document-view-card,
html body.imk-runtime-shell main .card.doc-preview,
html body main .imk-document-view-card,
html body main .card.doc-preview {
  background: var(--imk-document-card-bg) !important;
  border: 1px solid var(--imk-document-card-border) !important;
  border-radius: 22px !important;
  color: var(--imk-document-card-text) !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.38) !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 980px !important;
  overflow: visible !important;
  padding: 22px !important;
  position: relative !important;
  width: min(100%, 980px) !important;
}

/* Hindra gamla hero/inner-pseudoelement från att lägga blå slöja över dokumentkortet. */
html body main .imk-document-view-card::before,
html body main .card.doc-preview::before {
  content: none !important;
  display: none !important;
}

html body main .imk-document-view-card h1,
html body main .imk-document-view-card h2,
html body main .imk-document-view-card h3,
html body main .card.doc-preview h1,
html body main .card.doc-preview h2,
html body main .card.doc-preview h3 {
  color: var(--imk-document-card-text) !important;
}

html body main .imk-document-view-card p,
html body main .card.doc-preview p {
  color: var(--imk-document-card-soft) !important;
  opacity: 1 !important;
}

/* Varningsrad: "Inte officiell..." */
html body main .imk-document-warning,
html body main .doc-preview .warn,
html body main .imk-document-view-card .warn {
  background: var(--imk-document-warning-bg) !important;
  border: 1px solid var(--imk-document-warning-border) !important;
  border-radius: 10px !important;
  color: var(--imk-document-warning-text) !important;
  opacity: 1 !important;
  padding: 8px 10px !important;
}

/* Själva dokumentpappret. Detta är inte ett appkort. */
html body main .imk-document-paper,
html body main .doc-paper {
  background: var(--imk-document-paper-bg) !important;
  border: 1px solid #dddddd !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18) !important;
  box-sizing: border-box !important;
  filter: none !important;
  isolation: isolate !important;
  margin: 18px auto !important;
  max-width: 794px !important;
  min-height: 1123px !important;
  opacity: 1 !important;
  padding: 56px !important;
  text-shadow: none !important;
  width: min(100%, 794px) !important;
}

/* Gamla globala kortregler får inte tona ner dokumentinnehållet. */
html body main .imk-document-paper *,
html body main .doc-paper * {
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body main .imk-document-paper p,
html body main .imk-document-paper div,
html body main .imk-document-paper span,
html body main .imk-document-paper li,
html body main .imk-document-paper td,
html body main .imk-document-paper th,
html body main .doc-paper p,
html body main .doc-paper div,
html body main .doc-paper span,
html body main .doc-paper li,
html body main .doc-paper td,
html body main .doc-paper th {
}

/* Bilder/loggor i dokumentet ska aldrig få blå filter/slöja. */
html body main .imk-document-image,
html body main .doc-image,
html body main .imk-document-paper img,
html body main .doc-paper img {
  display: block;
  filter: none !important;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 100% !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Knappar under dokumentpappret. */
html body main .imk-document-view-card button,
html body main .card.doc-preview button {
  background: var(--imk-document-action-bg) !important;
  border: 1px solid var(--imk-document-action-border) !important;
  border-radius: 999px !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.20),
    inset 0 1px rgba(255, 255, 255, 0.08) !important;
  color: var(--imk-document-action-text) !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
}

html body main .imk-document-view-card button:hover,
html body main .card.doc-preview button:hover {
  background: var(--button-hover-bg, rgba(23,37,84,0.80)) !important;
  transform: translateY(-1px);
}

html body main .imk-document-view-card form[action*="delete"] button,
html body main .card.doc-preview form[action*="delete"] button {
  background: var(--imk-document-danger-bg) !important;
  border-color: var(--imk-document-danger-border) !important;
  color: var(--imk-document-danger-text) !important;
}

/* Interna verktyg under dokumentet: dokumentzonens sekundära kort. */
html body main .imk-document-view-card .imk-internal-tools-card,
html body main .card.doc-preview .imk-internal-tools-card,
html body main .card.doc-preview:has(a[href*="translation-test"]):has(a[href*="logo-audit"]):has(a[href*="/logs"]) {
  background: rgba(248, 250, 252, 0.88) !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  border-radius: 12px !important;
  color: var(--imk-document-card-text) !important;
}

html body main .imk-document-view-card a,
html body main .card.doc-preview a {
  color: #1d4ed8 !important;
}

@media (max-width: 800px) {
  html body main .imk-document-view-card,
  html body main .card.doc-preview {
    border-radius: 18px !important;
    padding: 14px !important;
    width: 100% !important;
  }

  html body main .imk-document-paper,
  html body main .doc-paper {
    min-height: auto !important;
    padding: 24px !important;
    width: 100% !important;
  }
}


/* IMK_SELECT_READABLE_ARROW_V155_START */
html body.imk-runtime-shell select,
html body.imk-runtime-shell .card select,
html body.imk-runtime-shell .doc-preview select,
html body.imk-runtime-shell .doc-paper select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  display: inline-block !important;
  min-height: 48px !important;
  min-width: 300px !important;
  max-width: 100% !important;

  background-color: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;

  border: 1px solid #2563eb !important;
  border-radius: 12px !important;
  padding: 10px 44px 10px 14px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  cursor: pointer !important;

  background-image: linear-gradient(45deg, transparent 50%, #0f172a 50%),
                    linear-gradient(135deg, #0f172a 50%, transparent 50%) !important;
  background-position: calc(100% - 22px) 50%, calc(100% - 15px) 50% !important;
  background-size: 7px 7px, 7px 7px !important;
  background-repeat: no-repeat !important;
}

html body.imk-runtime-shell select option,
html body.imk-runtime-shell .card select option,
html body.imk-runtime-shell .doc-preview select option,
html body.imk-runtime-shell .doc-paper select option {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

html body.imk-runtime-shell select:focus {
  outline: 3px solid rgba(37, 99, 235, .30) !important;
  outline-offset: 2px !important;
}
/* IMK_SELECT_READABLE_ARROW_V155_END */