/* SKA Technologie branding for the SFTPGo web client.
   Deck tokens: SKA red #ED1C24 (accents only), red-ink for text, Barlow Semi Condensed + IBM Plex.
   Contrast (WCAG AA >= 4.5:1): white on #D3141C 5.4 · #C8141D on white 5.9 · #FF6B70 on dark surfaces >= 5.9. */
@font-face{font-family:'Barlow Semi Condensed';font-weight:600;font-display:swap;src:url(barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-weight:700;font-display:swap;src:url(barlow-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400 600;font-display:swap;src:url(plex-sans.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(plex-mono.woff2) format('woff2')}

:root,[data-bs-theme=light]{
  --ska-red:#ED1C24; --ska-text-red:#C8141D;
  --bs-primary:#D3141C; --bs-primary-active:#B10F16; --bs-primary-light:#FDE8E9; --bs-primary-inverse:#FFFFFF; --bs-primary-rgb:211,20,28;
  --bs-text-primary:#C8141D; --bs-link-color:#C8141D; --bs-link-hover-color:#9E0F15; --bs-link-color-rgb:200,20,29; --bs-link-hover-color-rgb:158,15,21;
  --bs-component-active-bg:#D3141C; --bs-component-hover-color:#C8141D; --bs-component-checked-bg:#D3141C;
  --bs-font-sans-serif:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
[data-bs-theme=dark]{
  --ska-red:#ED1C24; --ska-text-red:#FF6B70;
  --bs-primary:#D3141C; --bs-primary-active:#B10F16; --bs-primary-light:#3A1416; --bs-primary-inverse:#FFFFFF; --bs-primary-rgb:211,20,28;
  --bs-text-primary:#FF6B70; --bs-link-color:#FF6B70; --bs-link-hover-color:#FF9599; --bs-link-color-rgb:255,107,112; --bs-link-hover-color-rgb:255,149,153;
  --bs-component-active-bg:#D3141C; --bs-component-hover-color:#FF6B70; --bs-component-checked-bg:#D3141C;
  --bs-font-sans-serif:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
html,body{font-family:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important}
h1,h2,h3,.card-title{font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif !important;letter-spacing:.01em}
code,.font-monospace{font-family:'IBM Plex Mono',monospace !important}

/* buttons and controls */
.btn.btn-primary{border-radius:2px}
.form-control:focus,.form-control.form-control-solid:focus{border-color:var(--ska-red) !important}
.form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-primary)}
.text-primary,.link-primary{color:var(--ska-text-red) !important}
.menu-item .menu-link.active .menu-title,.menu-item .menu-link.active .menu-icon i,.menu-item.here>.menu-link .menu-title{color:var(--ska-text-red) !important}

/* login: SKA photo on a dark grade, card with red top rule; works in light and dark mode */
body.app-blank{background:#0B0C0D !important;min-height:100vh}
body.app-blank::before{content:"";position:fixed;inset:0;z-index:0;background:#0B0C0D url(login-bg.jpg) center/cover no-repeat}
body.app-blank::after{content:"";position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,rgba(11,12,13,.35),rgba(11,12,13,.8));pointer-events:none}
body.app-blank #app_root{position:relative;z-index:1}
body.app-blank .bg-body.rounded{width:100% !important;max-width:500px;border-radius:2px !important;border-top:4px solid var(--ska-red);box-shadow:0 30px 80px rgba(0,0,0,.45) !important}
@media (max-width:575px){body.app-blank .flex-center.flex-column-fluid{padding:16px !important}body.app-blank .bg-body.rounded{padding:28px 22px !important}}
#sign_in_form .row{flex-direction:column;align-items:flex-start !important}
#sign_in_form .row>[class^=col-]{width:100%;max-width:100%;flex:0 0 auto}
#sign_in_form img[alt=Logo]{height:auto !important;width:180px;max-width:100%;margin-bottom:22px}
/* title: one string per language (SFTPGo has a single short name, so it is set here) */
#sign_in_form h1{margin-left:0 !important;font-size:28px;line-height:1.1;text-transform:uppercase;font-weight:700;color:var(--bs-gray-900)}
#sign_in_form h1::before{content:"";display:inline-block;width:26px;height:16px;margin-right:10px;vertical-align:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Cpath d='M2 0h6l6 8-6 8H2l6-8zM12 0h6l6 8-6 8h-6l6-8z' fill='%23ED1C24'/%3E%3C/svg%3E") no-repeat}
#sign_in_form h1::after{content:"Datenübertragung"}
html[lang^=en] #sign_in_form h1::after{content:"Data transfer"}
html[lang^=fr] #sign_in_form h1::after{content:"Transfert de données"}
html[lang^=it] #sign_in_form h1::after{content:"Trasferimento dati"}

/* logo: red/black on light surfaces, red/white on dark surfaces */
.app-sidebar-logo img{height:34px !important;width:auto}
[data-bs-theme=dark] img[alt=Logo]{content:url(logo-dark.svg)}

/* SFTPGo falls back to "WebClient" when the short name is empty: hide that text, show ours */
#sign_in_form h1{font-size:0 !important}
#sign_in_form h1::after{font-size:28px}
.app-sidebar-logo .text-sidebar{font-size:0 !important;padding-left:14px !important}
.app-sidebar-logo .text-sidebar::after{content:"Datenübertragung";font:600 15px/1.2 'Barlow Semi Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#E6E6E3}
html[lang^=en] .app-sidebar-logo .text-sidebar::after{content:"Data transfer"}
html[lang^=fr] .app-sidebar-logo .text-sidebar::after{content:"Transfert de données"}
html[lang^=it] .app-sidebar-logo .text-sidebar::after{content:"Trasferimento dati"}

/* the sidebar is dark in both themes: white logo, light-red text for the active item */
.app-sidebar img[alt=Logo],#kt_app_header img[alt=Logo]{content:url(logo-dark.svg)}
[data-bs-theme=light] #kt_app_header img[alt=Logo]{content:url(logo.svg)}
.app-sidebar .menu-item .menu-link.active .menu-title,.app-sidebar .menu-item .menu-link.active .menu-icon i{color:#FF6B70 !important}

/* soft red buttons (e.g. "New folder"): readable text on the tinted background */
.btn.btn-light-primary{color:#B10F16 !important}
[data-bs-theme=dark] .btn.btn-light-primary{color:#FF8A8E !important;background-color:#3A1416 !important}
.btn.btn-light-primary:hover,.btn.btn-light-primary:hover i{color:#FFFFFF !important;background-color:#D3141C !important}
.btn.btn-light-primary i{color:inherit !important}

/* sidebar header: logo above the label, not squeezed beside it */
.app-sidebar-logo{display:flex !important;flex-direction:column;align-items:flex-start;gap:12px}
.app-sidebar-logo img{height:44px !important;width:auto}
.app-sidebar-logo .text-sidebar{padding-left:0 !important;border-left:2px solid #ED1C24;padding:2px 0 2px 10px !important}