/* Inkendaal skin for FileSender (VP-FIL-01).
   FileSender loads skin/styles.css automatically, after its own style sheets.
   Source of this file: projects/filesender/skin/ in the C:\dev repo. Deployed to
   /opt/filesender/filesender/www/skin/ on the server.

   Approach: FileSender's interface takes almost all its colours from --fs-* variables.
   Those are set to the Inkendaal palette here, so every page follows without per-page rules.

   Palette (huisstijlgids): groen #76b72a, geel #ffcf20, donkergrijs #4c4c4b, white.
   Where green carries white text (buttons, links, icons) the darker same-hue green #53811d
   is used, because white on #76b72a is too faint to read (contrast 2.4:1). */

/* ---- Font: Source Sans, served from this server (no request to Google) ---------------- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("fonts/source-sans-3-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
             src: url("fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("fonts/source-sans-3-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("fonts/source-sans-3-latin-700.woff2") format("woff2"); }

/* html:root, not just :root: FileSender's theme script re-adds its theme style sheet at the
   end of the page, after this file. The extra weight keeps these values on top. */
html:root {
    --ink-groen: #76b72a;
    --ink-groen-tekst: #53811d;
    --ink-groen-donker: #446a18;
    --ink-geel: #ffcf20;
    --ink-grijs: #4c4c4b;

    /* text */
    --fs-gray-900: var(--ink-grijs);
    --fs-text-color: var(--ink-grijs);

    /* the former blue family, now green */
    --fs-blue: var(--ink-groen-tekst);
    --fs-blue-300: var(--ink-groen);
    --fs-blue-200: #c8e2a9;
    --fs-blue-100: #f1f8e9;
    --fs-primary: var(--ink-groen-tekst);
    --fs-accent: var(--ink-groen-tekst);

    /* buttons */
    --fs-btn: var(--ink-groen-tekst);
    --fs-btn-hover: var(--ink-groen-donker);
    --fs-btn-active: #38570f;

    /* hover and highlight backgrounds: light green tints */
    --fs-hover: #e4f1d4;
    --fs-hightlight-bg: #f1f8e9;
    --fs-hightlight-bg-alternative: #f1f8e9;
    --fs-hightlight-bg-secondary: #c8e2a9;

    /* status colours: success in brand green, info in brand grey, warning in brand yellow.
       Red stays red: an error must look like an error. */
    --fs-success: var(--ink-groen-tekst);
    --fs-success-hover: var(--ink-groen-donker);
    --fs-success-active: #38570f;
    --fs-info: var(--ink-grijs);
    --fs-info-hover: #666665;
    --fs-info-active: #80807f;
    --fs-warning: var(--ink-geel);
    --fs-warning-hover: #e6ba1d;
    --fs-warning-active: #b3911a;

    /* Bootstrap, which FileSender builds on, has its own font and link variables */
    --bs-font-sans-serif: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: var(--ink-grijs);
    --bs-link-color: var(--ink-groen-tekst);
    --bs-link-color-rgb: 83, 129, 29;
    --bs-link-hover-color: var(--ink-groen-donker);
    --bs-link-hover-color-rgb: 68, 106, 24;
}

body {
    font-family: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
    font-size: 1.0625rem;          /* Source Sans runs small; 17px reads like the old 16px */
}

/* ---- Header ----------------------------------------------------------------------------- */
/* A thin line in the brand green on top, as on Inkendaal's own material. */
header { border-top: 4px solid var(--ink-groen); box-sizing: content-box; }

/* The Inkendaal logo: FileSender puts link padding on the image, which shrinks it. */
header nav img#logo { max-height: 78px; width: auto; padding: 6px 4px; border-radius: 0; }   /* radius 0: the link style rounds the corners and cut off the logo's small text */

/* Menu labels a bit larger than FileSender's very small default. */
.fs-link { font-size: 0.95rem; }

/* ---- Headings ----------------------------------------------------------------------------- */
h1, h2, h3, .h1, .h2, .h3 { font-weight: 600; color: var(--ink-grijs); }

/* ---- Buttons ------------------------------------------------------------------------------ */
.fs-button, .bootbox-accept, .btn-secondary { font-weight: 600; }

/* Yellow buttons and badges get dark text (huisstijl: never white on yellow). */
.fs-button--warning, .fs-badge--warning { color: #1d1d1b !important; }

/* Keyboard focus: clearly visible, in the brand yellow. */
.fs-button:focus-visible, .fs-link:focus-visible, a:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid var(--ink-geel);
    outline-offset: 2px;
}

/* ---- Download page ----------------------------------------------------------------------- */
/* Hide the "Meer informatie over het downloaden van bestanden" link: it leads to the English
   manual of the FileSender project, which means nothing to a patient. */
.fs-info:has(> a[href*="docs.filesender.org"]) { display: none; }
a[href*="docs.filesender.org"] { display: none; }

/* ---- Pages for outsiders: no "Aanmelden" button --------------------------------------------- */
/* The download page and the "translate this e-mail" page are opened by people outside the
   hospital, who have no account. The button stays on every other page. */
body:has(#page.download_page) li:has(> #topmenu_logon),
body:has(#page.translate_email_page) li:has(> #topmenu_logon) { display: none; }

/* ---- "Goed om te weten" block on the upload page (added by skin/script.js) ----------------- */
.ink-tips {
    margin: 24px auto 8px auto;
    max-width: 760px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--fs-border);
    border-left: 4px solid var(--ink-groen);
    border-radius: 6px;
    text-align: left;
}
.ink-tips__title { font-weight: 600; margin-bottom: 6px; color: var(--ink-grijs); }
.ink-tips ul { list-style: none; margin: 0; padding: 0; }
.ink-tips li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.ink-tips li i { color: var(--ink-groen-tekst); width: 18px; text-align: center; flex: 0 0 18px; }

/* ---- One font everywhere ------------------------------------------------------------------- */
/* Browsers give form fields and buttons their own system font unless told otherwise. */
input, button, select, textarea, optgroup, .fs-button, .fs-select, .select2-container { font-family: inherit; }

/* ---- Upload page: the password part --------------------------------------------------------- */
/* Field, "of" and button on one line with even spacing; the field wide enough for its hint text
   and for a generated password. */
.fs-transfer__password-top .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0; }
.fs-transfer__password-top .row > [class*="col"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.fs-transfer__password-top .row { flex-wrap: nowrap; }
.fs-transfer__password-top .row > .col-5 { flex: 1 1 200px; min-width: 150px; max-width: 320px; }
/* On a narrow screen the button may drop below the field. */
@media (max-width: 520px) { .fs-transfer__password-top .row { flex-wrap: wrap; } }
.fs-transfer__password-top .fs-input-group { margin: 0; }
#encryption_password { width: 100%; font-family: Consolas, "Cascadia Mono", "Courier New", monospace; font-size: 0.95rem; }
/* The hint text inside the empty field stays in the page font, so it is not cut off. */
#encryption_password::placeholder { font-family: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif; font-size: 1rem; }
.fs-transfer__password-top .password-gen-button span { color: #80807f; }
.fs-transfer__generate-password { height: auto; }

#encryption_password_show_container { margin: 10px 0 4px 0; font-size: 0.9rem; }
#encryption_password_show_container label { font-weight: 400; }
.fs-transfer__password-bottom small { font-size: 0.9rem; color: #80807f; }

/* FileSender shows each unmet password rule as a loose line of bright red text. Here they become
   small, calm notes. */
.passwordvalidation { margin: 6px 0 !important; padding: 0 !important; }
.passwordvalidation small {
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1.3;
    color: #8a1c13 !important;
    background: #fdeceb;
    border-left: 3px solid var(--fs-danger);
    border-radius: 4px;
    padding: 4px 10px;
}

/* ---- Profile page: no "about" and "privacy" blocks ------------------------------------------ */
/* They only link to pages that are switched off (about, terms, privacy). */
.fs-settings__about, .fs-settings__privacy { display: none; }

/* ---- Help page ------------------------------------------------------------------------------ */
.help_page h3 { font-size: 1.15rem; margin: 22px 0 8px 0; }
.help_page .fs-base-page__content ul { margin: 0 0 6px 0; padding-left: 22px; }
.help_page .fs-base-page__content li { padding: 2px 0; }

/* ---- Footer ------------------------------------------------------------------------------- */
/* Hide the "Een initiatief van" line and the partner logos. */
footer .fs-footer-container { display: none; }