/* ==========================================

   NOVA AUTHENTICATION - DARK THEME

   AUTHELIA 4.39

   ========================================== */



/* NOVA COLOUR PALETTE */



:root,

[data-theme] {

    --background: #111827 !important;

    --foreground: #ffffff !important;



    --card: #1f2937 !important;

    --card-foreground: #ffffff !important;



    --popover: #1f2937 !important;

    --popover-foreground: #ffffff !important;



    --primary: #f7931e !important;

    --primary-foreground: #111827 !important;



    --secondary: #f7931e !important;

    --secondary-foreground: #111827 !important;



    --accent: #374151 !important;

    --accent-foreground: #ffffff !important;



    --muted: #1f2937 !important;

    --muted-foreground: #cbd5e1 !important;



    --border: #4b5563 !important;

    --input: #4b5563 !important;

    --ring: #f7931e !important;



    --custom-icon: #ffffff !important;

    --custom-loading-bar: #f7931e !important;



    color-scheme: dark;

}



/* ==========================================

   BACKGROUND VIDEO

   ========================================== */



html,

body {

    margin: 0;

    min-height: 100%;

    background: #111827 !important;

    color: #ffffff !important;

}



.nova-auth-video {

    position: fixed;

    inset: 0;



    width: 100%;

    height: 100%;



    object-fit: cover;



    z-index: 0;

    pointer-events: none;

}



/* Transparent overlay over the video */



body::before {

    content: "";



    position: fixed;

    inset: 0;



    background: linear-gradient(

        to bottom,

        rgba(17,24,39,0.08) 0%,

        rgba(17,24,39,0.20) 45%,

        rgba(17,24,39,0.55) 100%

    );



    z-index: 1;

    pointer-events: none;

}



/* Keep the Authelia UI above the video */



#root {

    position: relative !important;

    z-index: 2 !important;

    min-height: 100vh;

    background: transparent !important;

}



/* ==========================================

   REMOVE TOP-LEFT NOVA LOGO

   ========================================== */



.nova-auth-brand {

    display: none !important;

}



/* ==========================================

   LOGIN PANEL - LOWER HALF OF SCREEN

   ========================================== */



#first-factor-stage {

    display: flex !important;



    min-height: calc(100dvh - 56px) !important;



    align-items: flex-end !important;

    justify-content: center !important;



    padding: 20px 16px clamp(30px, 8vh, 110px) !important;

    

    background: transparent !important;

}



/* Translucent black login panel */



#first-factor-stage > div {

    background: rgba(0, 0, 0, 0.60) !important;



    color: #ffffff !important;



    padding: 26px 30px !important;



    border: 1px solid rgba(247,147,30,0.45);



    border-radius: 16px;



    box-shadow: 0 18px 55px rgba(0,0,0,0.45);



    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

}



/* ==========================================

   MFA LOGIN PANEL

   ========================================== */



#second-factor-stage {

    background: transparent !important;

    padding: 24px 16px !important;

}



#second-factor-stage > div {

    background: rgba(0,0,0,0.80) !important;



    color: #ffffff !important;



    padding: 26px 30px !important;



    border: 1px solid rgba(247,147,30,0.45);



    border-radius: 16px;



    box-shadow: 0 18px 55px rgba(0,0,0,0.45);



    backdrop-filter: blur(12px);

}



/* ==========================================

   REPLACE LOGIN USER SILHOUETTE

   ========================================== */



/* Hide Authelia's original user icon */



#first-factor-stage svg.mx-auto.my-2.w-16,

#second-factor-stage svg.mx-auto.my-2.w-16 {

    display: none !important;

}



/* Insert the white Nova icon instead */



#first-factor-stage .w-full.p-2:has(> svg.mx-auto.my-2.w-16)::after,

#second-factor-stage .w-full.p-2:has(> svg.mx-auto.my-2.w-16)::after {

    content: "";



    display: block;



    width: 85px;

    height: 85px;



    margin: 0 auto 10px;



    background-image: url("/nova-icon.svg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

}



/* ==========================================

   ACCOUNT SETTINGS / MFA CARDS

   ========================================== */



#root [data-slot="card"] {

    background: rgba(31,41,55,0.94) !important;



    color: #ffffff !important;



    border-color: rgba(247,147,30,0.35) !important;



    border-radius: 14px;

}



/* Other popup and dropdown panels */



#root [data-slot="popover-content"],

#root [data-slot="dialog-content"],

#root [role="dialog"] {

    background: #1f2937 !important;

    color: #ffffff !important;



    border-color: #4b5563 !important;

}



/* ==========================================

   BUTTONS AND MFA CONTROLS

   ========================================== */



/* Primary orange buttons */



#root button.bg-primary,

#root button[data-variant="default"].bg-primary {

    background-color: #f7931e !important;

    color: #111827 !important;

    font-weight: 700;

}



#root button.bg-primary:hover {

    background-color: #ffaa43 !important;

}



/* Orange primary links, icons and accents */



#root .text-primary {

    color: #f7931e !important;

}



#root .border-primary {

    border-color: #f7931e !important;

}



#root .bg-primary {

    background-color: #f7931e !important;

}



/* Secondary buttons */



#root button.bg-secondary {

    background-color: #f7931e !important;

    color: #111827 !important;

}



/* Do not recolour destructive buttons */



#root button.bg-destructive {

    background-color: #b91c1c !important;

    color: #ffffff !important;

}



/* Checkboxes and switches */



#root [data-slot="checkbox"][data-state="checked"],

#root [role="switch"][data-state="checked"] {

    background-color: #f7931e !important;

    border-color: #f7931e !important;

}



/* Focus highlighting */



#root input:focus-visible,

#root button:focus-visible,

#root select:focus-visible {

    outline-color: #f7931e !important;

}



/* ==========================================

   FORM INPUTS

   ========================================== */



#root input[type="text"],

#root input[type="password"],

#root input[type="email"],

#root input[type="number"] {

    color: #ffffff;

    border-color: #64748b;

}



#root input::placeholder {

    color: #cbd5e1;

}



/* ==========================================

   SMALL SCREEN ADJUSTMENTS

   ========================================== */



@media (max-width: 767px),

       (max-height: 699px) {



    #first-factor-stage {

        min-height: calc(100dvh - 56px) !important;



        align-items: center !important;



        padding: 16px !important;

    }



    #first-factor-stage > div,

    #second-factor-stage > div {

        padding: 20px 18px !important;

    }

}



/* ==========================================

   ACCESSIBILITY

   ========================================== */



@media (prefers-reduced-motion: reduce) {

    .nova-auth-video {

        display: none !important;

    }

}