/* =====================================================================
   Professional Advantage brand override for CrushFTP 11 new-ui
   Target:  sftp.pacsapps.cloud login and post-login pages
   Author:  Beau Mundt / PA Cloud Ops
   Created: 2026-05-18

   Brand reference:
     Dark Purple   #51215C   (primary brand color, focus states, headings)
     Dark Orange   #EC6608   (primary CTA color, default button state)
     Violet        #804D99   (link hover, secondary accent)
     Lilac         #DECCE5   (subtle backgrounds, input highlights)
     Light Orange  #F7A711   (button hover, secondary CTA)
     Text Grey     #333333   (body copy)

   How to deploy:
     1.  Drop this file at:
         C:\Program Files\CrushFTP11\WebInterface\new-ui\assets\css\pa-branding.css
     2.  Inject it via CrushFTP admin > Preferences > WebInterface > Customize
         (look for a "Custom CSS" or "Additional Head" field, paste either a
         <link rel="stylesheet" href="/WebInterface/new-ui/assets/css/pa-branding.css">
         tag or the CSS body itself depending on what the field accepts).
     3.  Hard refresh login page in InPrivate to test.

   Adjusting selectors:
     CrushFTP 11 ships with Bulma-based class names plus its own custom
     classes.  The selectors below are written broadly so they will hit on
     stock CrushFTP installs.  If a particular element does not change,
     open F12 on the login page, click the element, and add its specific
     class name to the matching rule below.
   ===================================================================== */

/* CSS variables let you tweak the palette in one place if PA ever rebrands */
:root {
    --pa-dark-purple:  #51215C;
    --pa-dark-orange:  #EC6608;
    --pa-violet:       #804D99;
    --pa-lilac:        #DECCE5;
    --pa-light-orange: #F7A711;
    --pa-text-grey:    #333333;
}

/* ----------------------------------------------------------------------
   Primary CTA button:  Sign in
   ---------------------------------------------------------------------- */
.button.is-primary,
.button.is-link,
button[type="submit"],
.btn-primary,
.sign-in-button,
.login-submit {
    background-color: var(--pa-dark-orange) !important;
    border-color:     var(--pa-dark-orange) !important;
    color:            #ffffff !important;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.button.is-primary:hover,
.button.is-link:hover,
button[type="submit"]:hover,
.btn-primary:hover,
.sign-in-button:hover,
.login-submit:hover {
    background-color: var(--pa-light-orange) !important;
    border-color:     var(--pa-light-orange) !important;
    color:            #ffffff !important;
}

.button.is-primary:focus,
.button.is-link:focus,
button[type="submit"]:focus,
.btn-primary:focus,
.sign-in-button:focus,
.login-submit:focus {
    box-shadow: 0 0 0 0.2em rgba(81, 33, 92, 0.25) !important;
    outline: none;
}

.button.is-primary:active,
.button.is-link:active,
button[type="submit"]:active {
    background-color: var(--pa-dark-purple) !important;
    border-color:     var(--pa-dark-purple) !important;
}

/* ----------------------------------------------------------------------
   Links generally - default to PA purple, hover to violet
   ---------------------------------------------------------------------- */
a,
a:visited {
    color: var(--pa-dark-purple) !important;
}

a:hover {
    color: var(--pa-violet) !important;
}

/* ----------------------------------------------------------------------
   "Forgot your password?" link - exception in dark orange to draw the eye
   ---------------------------------------------------------------------- */
.forgot-password,
.forgot-password-link,
.is-forgot-password,
a.has-text-link,
.login-form a {
    color: var(--pa-dark-orange) !important;
}

.forgot-password:hover,
.forgot-password-link:hover,
.is-forgot-password:hover,
a.has-text-link:hover,
.login-form a:hover {
    color: var(--pa-light-orange) !important;
}

/* ----------------------------------------------------------------------
   Form inputs - focus border and ring in PA purple
   ---------------------------------------------------------------------- */
input:focus,
.input:focus,
.textarea:focus,
select:focus {
    border-color: var(--pa-dark-purple) !important;
    box-shadow:   0 0 0 0.125em rgba(81, 33, 92, 0.25) !important;
    outline: none;
}

/* Subtle lilac wash on input hover for polish */
input:hover,
.input:hover {
    border-color: var(--pa-violet) !important;
}

/* ----------------------------------------------------------------------
   "Remember me" checkbox - modern browsers support accent-color
   ---------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--pa-dark-orange);
}

/* Fallback for CrushFTP styled checkboxes */
.checkbox input[type="checkbox"]:checked + .checkbox-label::before,
.is-checked,
.checkbox.is-checked {
    background-color: var(--pa-dark-orange) !important;
    border-color:     var(--pa-dark-orange) !important;
}

/* ----------------------------------------------------------------------
   Headings and labels in PA purple where appropriate
   ---------------------------------------------------------------------- */
.title,
h1, h2, h3, h4 {
    color: var(--pa-dark-purple);
}

.label,
.input-label {
    color: var(--pa-text-grey);
}

/* ----------------------------------------------------------------------
   Body text default
   ---------------------------------------------------------------------- */
body,
.content {
    color: var(--pa-text-grey);
}

/* ----------------------------------------------------------------------
   Sun icon top-left (theme toggle) - bring into orange family
   ---------------------------------------------------------------------- */
.theme-toggle,
.light-mode-icon,
.theme-icon,
.icon.has-text-warning {
    color: var(--pa-dark-orange) !important;
}

/* ----------------------------------------------------------------------
   OPTIONAL:  right side panel background
   The current peach matches the PA marketing image background well, so
   this rule is commented out by default.  Uncomment if you ever swap to
   an image with a transparent or different background and want the panel
   to be PA lilac.
   ---------------------------------------------------------------------- */
/*
.login-right-panel,
.login-side-image,
.is-half:last-child,
.column.is-half:nth-child(2) {
    background-color: var(--pa-lilac) !important;
}
*/

/* ----------------------------------------------------------------------
   Post-login UI hints - safe defaults for the file browser after sign-in
   so the brand carries through past the login page.  Comment out any
   that conflict with how your team uses the file browser.
   ---------------------------------------------------------------------- */
.navbar,
.is-primary {
    background-color: var(--pa-dark-purple) !important;
}

.navbar a,
.navbar-item {
    color: #ffffff !important;
}

.navbar a:hover,
.navbar-item:hover {
    background-color: var(--pa-violet) !important;
    color: #ffffff !important;
}

.tag.is-primary,
.tag.is-info {
    background-color: var(--pa-violet) !important;
    color: #ffffff !important;
}

/* Light mode - PA Lilac on right panel */
html[data-theme="light"] {
    --accent-background-secondary: #DECCE5;
}

/* Dark mode - neutral dark grey on right panel */
html[data-theme="dark"] {
    --accent-background-secondary: #4A4A4A;
}

/* End of pa-branding.css */