/* Denbow SecureLinks — brand skin injected via reverse proxy.
   Matches the Denbow IT portal: brown #6c5d51, crimson #c1272d, cream, Open Sans. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/* :root:root:root wins the CSS-variable cascade vs Mantine's :root / [data-mantine-color-scheme]. */
:root, :root:root, :root:root:root {
  /* Mantine v7 uses CSS light-dark(); this makes it resolve to the light value. */
  color-scheme: light !important;

  --mantine-font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mantine-font-family-headings:'Open Sans',-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Primary scale -> Denbow brown */
  --mantine-primary-color-0:#f3efeb;
  --mantine-primary-color-1:#e7ded3;
  --mantine-primary-color-2:#d6c8ba;
  --mantine-primary-color-3:#bfae9d;
  --mantine-primary-color-4:#a89684;
  --mantine-primary-color-5:#8a7867;
  --mantine-primary-color-6:#6c5d51;
  --mantine-primary-color-7:#5a4f46;
  --mantine-primary-color-8:#473e37;
  --mantine-primary-color-9:#332c26;
  --mantine-primary-color-filled:#6c5d51;
  --mantine-primary-color-filled-hover:#5a4f46;
  --mantine-primary-color-light:#efe9e2;
  --mantine-primary-color-light-hover:#e7ded3;
  --mantine-primary-color-light-color:#5a4f46;
  --mantine-primary-color-outline:#6c5d51;
  --mantine-color-anchor:#c1272d;

  /* Force a LIGHT, cream look even when the app is in dark mode:
     remap Mantine surface + dark-scale tokens to light Denbow tints. */
  --mantine-color-body:#f6f3ef;
  --mantine-color-text:#2b2b2b;
  --mantine-color-dimmed:#6b6259;
  --mantine-color-default:#ffffff;
  --mantine-color-default-hover:#f3efeb;
  --mantine-color-default-border:#e0d9cf;
  --mantine-color-default-color:#2b2b2b;
  --mantine-color-dark-0:#2b2b2b;
  --mantine-color-dark-1:#33302b;
  --mantine-color-dark-2:#4a453d;
  --mantine-color-dark-3:#cdc4b8;
  --mantine-color-dark-4:#e0d9cf;
  --mantine-color-dark-5:#eee9e2;
  --mantine-color-dark-6:#ffffff;
  --mantine-color-dark-7:#f6f3ef;
  --mantine-color-dark-8:#efe9e2;
  --mantine-color-dark-9:#e7ded3;
}

body,button,input,textarea,select,[class*="mantine-"]{
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
}

a,.mantine-Anchor-root{color:#c1272d !important;}
a:hover,.mantine-Anchor-root:hover{color:#a01d23 !important;}

.mantine-Button-root[data-variant="filled"],
.mantine-Button-root:not([data-variant]){
  background-color:#6c5d51 !important;
  color:#fff !important;
}
.mantine-Button-root[data-variant="filled"]:hover,
.mantine-Button-root:not([data-variant]):hover{background-color:#5a4f46 !important;}

mark,.mantine-mark,[data-highlight]{background-color:#efe9e2 !important;color:#5a4f46 !important;}

.mantine-AppShell-header,header[class*="mantine-"]{border-top:3px solid #c1272d !important;}

a[href*="pingvin-share"]{opacity:.35;font-size:11px;}

/* Direct surface overrides -> light cream Denbow look with readable dark text */
body,.mantine-AppShell-root,.mantine-AppShell-main{background-color:#f6f3ef !important;color:#2b2b2b !important;}
.mantine-AppShell-header,.mantine-AppShell-footer,header,nav{background-color:#ffffff !important;color:#2b2b2b !important;}
footer{background-color:#f6f3ef !important;color:#6b6259 !important;}
/* keep the app title crimson & readable in the (now light) header */
header a,header .mantine-Text-root,header .mantine-Title-root{color:#c1272d !important;}

/* Denbow logo in header: preserve aspect ratio (was a circular penguin slot) */
header img,header a img{height:32px !important;width:auto !important;max-width:170px !important;border-radius:0 !important;object-fit:contain !important;}
.mantine-Paper-root,.mantine-Card-root,.mantine-Modal-content,.mantine-Menu-dropdown{background-color:#ffffff !important;color:#2b2b2b !important;border-color:#e7ded3 !important;}
.mantine-Title-root,.mantine-Text-root,.mantine-InputWrapper-label,label{color:#2b2b2b !important;}
input,.mantine-Input-input,.mantine-TextInput-input,.mantine-PasswordInput-input{background-color:#ffffff !important;color:#2b2b2b !important;border-color:#d9d0c4 !important;}
input::placeholder{color:#9a8f83 !important;}

/* CR-2 (2026-07-06): upload drop-zone was dark-on-dark -> lighten panel + readable text/icon */
.mantine-Dropzone-root{background-color:#ffffff !important;border-color:#d9d0c4 !important;}
.mantine-Dropzone-root .mantine-Title-root{color:#2b2b2b !important;}
.mantine-Dropzone-root .mantine-Text-root,.mantine-Dropzone-inner{color:#5a4f46 !important;}
.mantine-Dropzone-root svg{color:#8a7867 !important;}
/* header action icons/buttons readable on the white header */
header .mantine-ActionIcon-root,header .mantine-ActionIcon-root svg{color:#5a4f46 !important;}

/* ===== CR-2026-07-10-readability: file-list contrast + visible action icons =====
   The file table text and the row action icons (preview / copy / DOWNLOAD) were
   faint gray (#868e96) on the cream background — the download control was nearly
   invisible, which read as "can't download". Darken text + brand the icons. */

/* File tables on the upload page AND the recipient /share page: dark readable text */
.mantine-Table-root,
.mantine-Table-root td,
.mantine-Table-root th,
table td, table th { color:#2b2b2b !important; }
.mantine-Table-root thead th,
table thead th { color:#5a4f46 !important; font-weight:700 !important; }

/* "N file · X KB" subtitle and any dimmed helper text -> readable */
.mantine-AppShell-main .mantine-Text-root,
.mantine-AppShell-main .mantine-Anchor-root { color:#2b2b2b !important; }

/* Action icons in the page body (preview / copy-link / DOWNLOAD / sort) were
   faint gray -> make them clearly visible in Denbow brown, crimson on hover. */
.mantine-AppShell-main .mantine-ActionIcon-root,
.mantine-AppShell-main .mantine-ActionIcon-root svg { color:#5a4f46 !important; }
.mantine-AppShell-main .mantine-ActionIcon-root:hover {
  color:#c1272d !important;
  background:rgba(108,93,81,.10) !important;
  border-radius:8px !important;
}
.mantine-AppShell-main .mantine-ActionIcon-root:hover svg { color:#c1272d !important; }

/* CR-2026-07-10-icons2: Mantine v7 ActionIcon color comes from the --ai-color
   custom property; override it globally so the faint gray download/preview/copy
   icons become clearly visible (header icons already brown, unaffected visually). */
.mantine-ActionIcon-root { --ai-color:#5a4f46 !important; --ai-hover:#c1272d !important; --ai-hover-color:#c1272d !important; }
.mantine-ActionIcon-root, .mantine-ActionIcon-root svg { color:#5a4f46 !important; }
.mantine-ActionIcon-root:hover, .mantine-ActionIcon-root:hover svg { color:#c1272d !important; }
/* sort-arrow + generic table svgs too */
.mantine-Table-root svg, table svg { color:#5a4f46 !important; }

/* ===== CR-2026-07-13-redgreen: align SecureLinks to the Denbow RED+GREEN brand
   (matches the refreshed ticketing portal). Red primary, green accents, a
   red/green gradient top bar, kept light + mobile-friendly. ===== */
:root, :root:root, :root:root:root{
  --mantine-primary-color-0:#fbeceb;
  --mantine-primary-color-1:#f6d4d3;
  --mantine-primary-color-2:#eba9a8;
  --mantine-primary-color-3:#e07d7c;
  --mantine-primary-color-4:#d75754;
  --mantine-primary-color-5:#cf3a38;
  --mantine-primary-color-6:#c1272d;
  --mantine-primary-color-7:#a01d23;
  --mantine-primary-color-8:#8a171d;
  --mantine-primary-color-9:#6f1216;
  --mantine-primary-color-filled:#c1272d;
  --mantine-primary-color-filled-hover:#a01d23;
  --mantine-primary-color-light:#fbeceb;
  --mantine-primary-color-light-hover:#f6d4d3;
  --mantine-primary-color-light-color:#a01d23;
  --mantine-primary-color-outline:#c1272d;
  --mantine-color-anchor:#c1272d;
}
/* primary buttons -> red */
.mantine-Button-root[data-variant="filled"],
.mantine-Button-root:not([data-variant]){ background-color:#c1272d !important; color:#fff !important; }
.mantine-Button-root[data-variant="filled"]:hover,
.mantine-Button-root:not([data-variant]):hover{ background-color:#a01d23 !important; }
a,.mantine-Anchor-root{ color:#c1272d !important; }
a:hover,.mantine-Anchor-root:hover{ color:#a01d23 !important; }
/* header: red/green gradient top rule + red brand title */
.mantine-AppShell-header, header[class*="mantine-"]{ border-top:none !important; position:relative !important; }
.mantine-AppShell-header::before, header[class*="mantine-"]::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:5;
  background:#c1272d;
}
header a, header .mantine-Text-root, header .mantine-Title-root{ color:#c1272d !important; }
/* green accents */
.mantine-Dropzone-root svg{ color:#4c8a3f !important; }
mark,.mantine-mark,[data-highlight]{ background-color:#eef5e7 !important; color:#2c5a21 !important; }
/* the Denbow strong-password generator button -> red to match */
.dn-genpw-btn{ background:#c1272d !important; }
.dn-genpw-btn:hover{ background:#a01d23 !important; }
/* keep the header admin-console link on-brand red */
#dn-admin-link{ color:#c1272d !important; }
/* mobile polish: comfortable tap targets + no horizontal overflow */
@media (max-width:640px){
  .mantine-AppShell-header, header[class*="mantine-"]{ padding-left:12px !important; padding-right:12px !important; }
  header img, header a img{ height:28px !important; }
  .mantine-Container-root, .mantine-AppShell-main{ padding-left:14px !important; padding-right:14px !important; }
  .mantine-Table-root{ display:block; overflow-x:auto; }
}

/* ---- 2026-07-15b: fix Mantine variant="light" header buttons rendering as default violet ---- */
/* The header "Sign in" / account buttons are hashed CSS-module anchors that don't pick up our
   --mantine-primary-color-light override, so force the brand red-soft tint directly. */
header a[href^="/auth"],
header a[href="/"][class*="mantine-"] ~ a,
.mantine-Button-root[data-variant="light"],
.mantine-Button-root[data-variant="subtle"],
button.mantine-Button-root[data-variant="light"] {
  background-color:#fbeceb !important;
  color:#c1272d !important;
}
header a[href^="/auth"]:hover,
.mantine-Button-root[data-variant="light"]:hover,
.mantine-Button-root[data-variant="subtle"]:hover {
  background-color:#f6d9d7 !important;
  color:#a01d23 !important;
}

/* ---- 2026-07-19: fix invisible (black-on-black) error toasts/alerts ---- */
/* Login failures render as a Mantine notification/alert; the dark surface + dark
   text made them unreadable. Force a high-contrast white card with red accent. */
[class*="mantine-Notification-root"],
[class*="mantine-Alert-root"]{
  background:#ffffff !important;
  border:1px solid #f0c9c7 !important;
  border-left:5px solid #c1272d !important;
  box-shadow:0 8px 28px rgba(0,0,0,.16) !important;
}
[class*="mantine-Notification-title"],
[class*="mantine-Alert-title"]{ color:#241f1f !important; font-weight:700 !important; }
[class*="mantine-Notification-description"],
[class*="mantine-Alert-message"],
[class*="mantine-Alert-body"]{ color:#3a3330 !important; }
[class*="mantine-Notification-icon"]{ background:#c1272d !important; color:#ffffff !important; }
[class*="mantine-Alert-icon"]{ color:#c1272d !important; }
[class*="mantine-Notification-closeButton"],
[class*="mantine-CloseButton-root"]{ color:#8a7867 !important; }
/* generic safety net: any red-variant alert/notification stays dark-text-on-light */
[data-variant="filled"][class*="Notification"], [role="alert"]{ color:#241f1f !important; }

/* ===== 2026-07-21 consistency fixes: Mantine default INDIGO (#4239c8) was leaking
   into Badge + Tabs (LDAP badges rendered lavender, the TOTP active-tab underline
   rendered blue). Bind them to the Denbow red so nothing is off-brand. ===== */
.mantine-Badge-root,[class*="mantine-Badge-root"]{
  background-color:#fbeceb !important; color:#a01d23 !important; border-color:transparent !important;
}
.mantine-Tabs-tab[data-active],[class*="mantine-Tabs-tab"][data-active],
.mantine-Tabs-tab[aria-selected="true"]{
  border-color:#c1272d !important; color:#c1272d !important;
}
.mantine-Tabs-tab:hover:not([data-active]){ background-color:#fbeceb !important; color:#a01d23 !important; }
/* any remaining Mantine indigo/blue primary surfaces (loader/switch/checkbox/progress
   active states) -> Denbow red, so the accent is consistent app-wide */
.mantine-Loader-root{ color:#c1272d !important; }
[class*="mantine-"][data-checked]{ background-color:#c1272d !important; border-color:#c1272d !important; }

/* ===== 2026-07-21b: DARK MODE = the light Denbow theme + menu/segmented fixes =====
   SecureLinks is a committed light cream theme. When a user (or their System pref)
   selects dark, Mantine sets its dark surface tokens under [data-mantine-color-scheme
   ="dark"] (more specific than our :root remap) so a few components — the Color-scheme
   SegmentedControl track, the avatar button — went black/unreadable. Force light there
   too so dark renders as the (only) Denbow light look, never a broken black screen. */
:root[data-mantine-color-scheme="dark"], [data-mantine-color-scheme="dark"]{
  color-scheme: light !important;
  --mantine-color-body:#f6f3ef !important;
  --mantine-color-text:#2b2b2b !important;
  --mantine-color-dimmed:#6b6259 !important;
  --mantine-color-default:#ffffff !important;
  --mantine-color-default-hover:#f3efeb !important;
  --mantine-color-default-border:#e0d9cf !important;
  --mantine-color-default-color:#2b2b2b !important;
  --mantine-color-dark-0:#2b2b2b !important;  --mantine-color-dark-1:#33302b !important;
  --mantine-color-dark-2:#4a453d !important;  --mantine-color-dark-3:#cdc4b8 !important;
  --mantine-color-dark-4:#e0d9cf !important;  --mantine-color-dark-5:#eee9e2 !important;
  --mantine-color-dark-6:#ffffff !important;  --mantine-color-dark-7:#f6f3ef !important;
  --mantine-color-dark-8:#efe9e2 !important;  --mantine-color-dark-9:#e7ded3 !important;
}
[data-mantine-color-scheme="dark"] body,
[data-mantine-color-scheme="dark"] [class*="AppShell-root"],
[data-mantine-color-scheme="dark"] [class*="AppShell-main"]{ background-color:#f6f3ef !important; color:#2b2b2b !important; }
[data-mantine-color-scheme="dark"] [class*="Paper-root"],
[data-mantine-color-scheme="dark"] [class*="Card-root"],
[data-mantine-color-scheme="dark"] [class*="Modal-content"],
[data-mantine-color-scheme="dark"] [class*="Menu-dropdown"],
[data-mantine-color-scheme="dark"] header,
[data-mantine-color-scheme="dark"] [class*="AppShell-header"]{ background-color:#ffffff !important; color:#2b2b2b !important; }
[data-mantine-color-scheme="dark"] input,
[data-mantine-color-scheme="dark"] [class*="Input-input"]{ background-color:#ffffff !important; color:#2b2b2b !important; border-color:#d9d0c4 !important; }

/* Color-scheme SegmentedControl: readable light track in ANY scheme (was black in dark) */
[class*="SegmentedControl-root"]{ background-color:#efe9e2 !important; }
[class*="SegmentedControl-indicator"]{ background-color:#ffffff !important; }
[class*="SegmentedControl-label"]{ color:#5a4f46 !important; }
[class*="SegmentedControl-label"][data-active]{ color:#c1272d !important; }
/* header avatar/icon buttons keep a light surface (went dark-boxed in dark mode) */
[data-mantine-color-scheme="dark"] header [class*="ActionIcon"],
[data-mantine-color-scheme="dark"] header [class*="Avatar"]{ background-color:#f3efeb !important; color:#5a4f46 !important; }

/* User menu "Sign out" was pure black (a <button>, so the anchor red rule missed it)
   -> make every menu item brand red to match "My account" / "Administration" */
[class*="Menu-item"]{ color:#c1272d !important; }
[class*="Menu-item"] svg{ color:#c1272d !important; }
[class*="Menu-item"]:hover{ background-color:#fbeceb !important; }