/* ==========================================================================
   PayrollPro Enterprise Theme
   Bootstrap 5.x Compatible
   ========================================================================== */

/* ==========================================================================
   Theme Variables
   ========================================================================== */

:root{

    /* Colors */
    --color-primary:#cfa968;
    --color-primary-hover:#b48e4f;

    --color-body:#f4f6f9;
    --color-content:#ffffff;

    --color-sidebar:#191970;
    --color-sidebar-border:#2c3e50;
    --color-sidebar-text:#cfd8dc;
    --color-sidebar-hover:#1e73be;

    --color-footer:#cfa968;
    --color-footer-text:#ffffff;

    --color-link:#0d6efd;
    --color-danger:#dc3545;
    --color-danger-hover:#c0392b;

    /* Typography */

    --font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;

    --font-size-sm:.9rem;
    --font-size-md:1rem;
    --font-size-lg:1.1rem;

    --font-weight-normal:400;
    --font-weight-medium:500;
    --font-weight-bold:600;

    /* Layout */

    --content-padding:2rem;

    --sidebar-width:250px;

    --login-width:420px;

    --logo-width:180px;

    --footer-logo-width:150px;

    /* Spacing */

    --space-xs:.25rem;
    --space-sm:.5rem;
    --space-md:1rem;
    --space-lg:1.5rem;
    --space-xl:2rem;
    --space-xxl:3rem;

    /* Radius */

    --radius-sm:.25rem;
    --radius-md:.5rem;
    --radius-lg:.75rem;

    /* Shadow */

    --shadow-sm:0 2px 6px rgba(0,0,0,.08);
    --shadow-md:0 4px 12px rgba(0,0,0,.08);

    /* Transition */

    --transition:.3s ease;

}

/* ==========================================================================
   Base
   ========================================================================== */

html,
body{

    height:100%;
    margin:0;

}

body{

    display:flex;
    flex-direction:column;

    font-family:var(--font-family);

    background:var(--color-body);

    color:#333;

}

.container,
.container-fluid{

    flex:1 0 auto;

}

main.content-area{

    flex:1;

    min-height:100vh;

    padding:var(--content-padding);

    background:var(--color-content);

}

/* ==========================================================================
   Login
   ========================================================================== */

.auth-form{

    max-width:var(--login-width);

    margin:60px auto;

    background:#fff;

    padding:30px;

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-md);

}

.form-title{

    margin-bottom:20px;

}

.logo-top{

    display:block;

    margin:40px auto 20px;

    max-width:var(--logo-width);

    height:auto;

}

.honeypot{

    display:none;

}

.auth-footer{

    display:flex;

    justify-content:space-between;

    gap:var(--space-md);

    margin-top:15px;

    font-size:var(--font-size-sm);

}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar{

    position:sticky;

    top:0;

    min-height:100vh;

    background:var(--color-sidebar);

    border-right:1px solid var(--color-sidebar-border);

    display:flex;

    flex-direction:column;

    padding-top:var(--space-xl);

}

.sidebar .nav{

    flex:1;

}

.sidebar .nav-item{

    margin-bottom:.75rem;

}

.sidebar .nav-link{

    display:flex;

    align-items:center;

    padding:12px 20px;

    border-radius:var(--radius-md);

    color:var(--color-sidebar-text);

    font-weight:var(--font-weight-medium);

    text-decoration:none;

    transition:all var(--transition);

}

.sidebar .nav-link:hover{

    background:var(--color-sidebar-hover);

    color:#fff;

}

.sidebar .nav-link.active{

    background:var(--color-sidebar-hover);

    color:#fff;

    font-weight:var(--font-weight-bold);

}

.sidebar .nav-link.text-danger{

    margin-top:auto;

    color:var(--color-danger)!important;

}

.sidebar .nav-link.text-danger:hover{

    background:var(--color-danger-hover);

    color:#fff!important;

}

/* ==========================================================================
   Footer
   ========================================================================== */

footer{

    flex-shrink:0;

    padding:20px 0;

    background:var(--color-footer);

    color:var(--color-footer-text);

    text-align:center;

}

footer img{

    max-width:var(--footer-logo-width);

    margin-bottom:10px;

    height:auto;

    filter:brightness(0) invert(1);

}

footer a{

    color:inherit;

    text-decoration:none;

}

/* ==========================================================================
   Bootstrap Theme
   ========================================================================== */

.bg-primary{

    background:var(--color-primary)!important;

}

.btn-primary{

    --bs-btn-bg:var(--color-primary);

    --bs-btn-border-color:var(--color-primary);

    --bs-btn-hover-bg:var(--color-primary-hover);

    --bs-btn-hover-border-color:var(--color-primary-hover);

    --bs-btn-active-bg:var(--color-primary-hover);

    --bs-btn-active-border-color:var(--color-primary-hover);

}

.text-primary{

    color:var(--color-primary)!important;

}

.border-primary{

    border-color:var(--color-primary)!important;

}

/* ==========================================================================
   Utilities
   ========================================================================== */

.link-button{

    background:none;

    border:none;

    padding:0;

    color:var(--color-link);

    cursor:pointer;

    font-size:var(--font-size-sm);

    text-decoration:none;

}

.link-button:hover{

    text-decoration:underline;

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:991.98px){

    main.content-area{

        min-height:auto;

        padding:1.5rem;

    }

    .sidebar{

        position:relative;

        min-height:auto;

    }

}

@media (max-width:767.98px){

    :root{

        --content-padding:1rem;

        --logo-width:150px;

    }

    .auth-form{

        margin:2rem auto;

        padding:1.5rem;

    }

    .auth-footer{

        flex-direction:column;

        align-items:flex-start;

    }

}