/*
 * COTU branding for the SFTPGo web portal.
 * Loaded after SFTPGo's own CSS via httpd.bindings[].branding.web_client.extra_css.
 * Palette and styling match the COTU website login (COTU/Website Rebuild/login-branding.php).
 */

@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicBook.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicDemi.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- palette: COTU blue as the theme primary, orange as the accent ------- */
html[data-bs-theme=light],
html[data-bs-theme=dark] {
  --cotu-dark: #1C2E39;
  --cotu-blue: #206084;
  --cotu-orange: #BB6233;

  --bs-font-sans-serif: 'Futura Cyrillic', system-ui, 'Segoe UI', sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  --bs-primary: #206084;
  --bs-primary-rgb: 32, 96, 132;
  --bs-primary-active: #1a4f6e;
  --bs-primary-inverse: #ffffff;
  --bs-text-primary: #206084;
  --bs-link-color: #206084;
  --bs-link-color-rgb: 32, 96, 132;
  --bs-link-hover-color: #1a4f6e;
  --bs-link-hover-color-rgb: 26, 79, 110;
}

html[data-bs-theme=light] {
  --bs-primary-light: #e8f1f6;
  --bs-primary-clarity: rgba(32, 96, 132, 0.2);
}

html[data-bs-theme=dark] {
  /* Lighter blue so text and outlines keep contrast on dark surfaces */
  --bs-primary: #3a8bb8;
  --bs-primary-rgb: 58, 139, 184;
  --bs-primary-active: #2f7aa3;
  --bs-text-primary: #5fa8d3;
  --bs-link-color: #5fa8d3;
  --bs-link-color-rgb: 95, 168, 211;
  --bs-link-hover-color: #8cc3e3;
  --bs-primary-light: #1b2c36;
  --bs-primary-clarity: rgba(58, 139, 184, 0.25);
}

body {
  font-family: var(--bs-body-font-family);
}

/* White logo wherever the dark theme is active (sidebar, header, login) */
html[data-bs-theme=dark] img[alt="Logo"] {
  content: url('cotu-logo-white.png');
}

/* Primary buttons: the COTU gradient */
.btn.btn-primary {
  background: linear-gradient(135deg, var(--cotu-blue) 0%, var(--cotu-dark) 100%);
  border: none;
  font-weight: 600;
}
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active {
  background: linear-gradient(135deg, #1a4f6e 0%, #16232c 100%) !important;
}

/* Warnings and errors use the orange accent */
#errorMsg {
  border-color: var(--cotu-orange) !important;
  border-style: solid !important;
  border-width: 0 0 0 4px !important;
}
#errorMsg .ki-information-5 {
  color: var(--cotu-orange) !important;
}

/* --- login, 2FA and password-reset pages (all use body.app-blank) -------- */
body.app-blank {
  background: linear-gradient(135deg, #1C2E39 0%, #206084 55%, #1C2E39 100%) fixed;
  min-height: 100vh;
}

body.app-blank #app_root .shadow-sm {
  border-radius: 16px !important;
  border: 1px solid rgba(32, 96, 132, 0.15);
  box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.45) !important;
}

/* Stack the logo above the title, centred, instead of side by side */
body.app-blank form .container .row {
  flex-direction: column;
  text-align: center;
  gap: 0.75rem;
}
body.app-blank form .container .row > [class*="col-"] {
  width: 100%;
  max-width: 100%;
}
body.app-blank form .container img[alt="Logo"] {
  height: auto !important;
  width: 240px;
  max-width: 100%;
}
body.app-blank form .container h1 {
  margin: 0 !important;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--bs-gray-700) !important;
  letter-spacing: 0.02em;
}

body.app-blank .form-control {
  border-radius: 8px;
  font-family: inherit;
}
body.app-blank .form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 2px var(--bs-primary-clarity);
}
body.app-blank .btn {
  border-radius: 8px;
}

/* The language picker renders empty on these pages; drop its blank strip */
body.app-blank #app_root .shadow-sm > .flex-stack {
  display: none !important;
}

/* Phones: less outer padding so the card gets the width */
@media (max-width: 575.98px) {
  body.app-blank #app_root .p-10 {
    padding: 1.25rem !important;
  }
  body.app-blank #app_root .shadow-sm {
    width: 100%;
    max-width: 420px;
    padding: 2rem 1.5rem !important;
  }
}