/* ============================================================
   auth.css — Fahdan / Novaerp Login Page
   Self-contained. No dependency on silva.css or style.css.
   Link LAST so these rules win over Bootstrap + Argon.
   ============================================================ */

/* ------------------------------------------------------------
   1. GOOGLE FONT
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&display=swap');


/* ------------------------------------------------------------
   2. CSS VARIABLES
   ------------------------------------------------------------ */
:root {
    --auth-primary:        #287F71;
    --auth-primary-dark:   #1a6e60;
    --auth-primary-darker: #154840;

    --auth-bg-1: #1a6e60;
    --auth-bg-2: #287F71;
    --auth-bg-3: #1d5c50;
    --auth-bg-4: #154840;

    --auth-glass-bg:     rgba(255,255,255,0.10);
    --auth-glass-border: rgba(255,255,255,0.20);
    --auth-glass-hover:  rgba(255,255,255,0.16);

    --auth-text-white:  #ffffff;
    --auth-text-muted:  rgba(255,255,255,0.60);
    --auth-text-faint:  rgba(255,255,255,0.38);
    --auth-text-label:  rgba(255,255,255,0.85);

    --auth-input-bg:           rgba(255,255,255,0.10);
    --auth-input-border:       rgba(255,255,255,0.22);
    --auth-input-focus-bg:     rgba(255,255,255,0.17);
    --auth-input-focus-border: rgba(255,255,255,0.55);
    --auth-input-placeholder:  rgba(255,255,255,0.40);
    --auth-input-icon-color:   rgba(255,255,255,0.50);

    --auth-danger-bg:     rgba(236,52,76,0.18);
    --auth-danger-border: rgba(236,52,76,0.35);
    --auth-danger-text:   #ffb3bc;

    --auth-radius-card:  20px;
    --auth-radius-input: 10px;
    --auth-radius-btn:   10px;
    --auth-radius-stat:  12px;
    --auth-radius-logo:  10px;
    --auth-radius-badge: 20px;
}


/* ------------------------------------------------------------
   3. BASE RESET (login page only)
   ------------------------------------------------------------ */
   
body.login-page {
    margin:     0 !important;
    padding:    0 !important;
    min-height: 100vh;
        overflow: hidden !important; /* add this */

    background: none !important;
    font-family: 'Public Sans', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* Neutralise Argon default auth wrappers */
body.login-page .main-content {
    padding:    0 !important;
    margin-top: 0 !important;
    background: none !important;
}

body.login-page .header,
body.login-page footer {
    display: none !important;
}


/* ------------------------------------------------------------
   4. PAGE SHELL
   ------------------------------------------------------------ */
.auth-shell {
    height: 100vh;
    width:      100%;
    display:    flex;
    flex-direction: column;
    background: linear-gradient(
        135deg,
        var(--auth-bg-1)   0%,
        var(--auth-bg-2)  40%,
        var(--auth-bg-3)  70%,
        var(--auth-bg-4) 100%
    ) !important;
    position: relative;
    overflow: hidden;
}

/* Dot-grid texture */
.auth-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}


/* ------------------------------------------------------------
   5. TOP LOGO BAR
   ------------------------------------------------------------ */
.auth-topbar {
    position: relative;
    z-index:  10;
    padding:  16px 150px;
}

.auth-logo-wrap {
    display:       inline-flex;
    align-items:   center;
    background:    rgba(255,255,255,0.56);
    border-radius: var(--auth-radius-logo);
    padding:       8px 16px;
    box-shadow:    0 2px 12px rgba(0,0,0,0.15);
}

.auth-logo-wrap img {
    height:  80px;
    width:   auto;
    display: block;
}


/* ------------------------------------------------------------
   6. MAIN ROW
   ------------------------------------------------------------ */
.auth-main {
    position:        relative;
    z-index:         10;
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
        overflow: hidden;    

    padding: 0 150px 24px;
    gap:             40px;
}

/* ------------------------------------------------------------
   7. LEFT HERO
   ------------------------------------------------------------ */
.auth-hero {
    flex:      1;
    max-width: 560px;
    color:     var(--auth-text-white);
}

.auth-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    background:     var(--auth-glass-bg);
    border:         1px solid var(--auth-glass-border);
    border-radius:  var(--auth-radius-badge);
    padding:        5px 14px;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.90);
    margin-bottom:  24px;
}

.auth-badge::before {
    content:   '●';
    font-size: 8px;
    color:     #7fffd4;
}

.auth-hero h1 {
    font-size:      clamp(34px, 4vw, 52px) !important;
    font-weight:    800 !important;
    line-height:    1.1 !important;
    color:          var(--auth-text-white) !important;
    margin:         0 0 18px !important;
    letter-spacing: -0.5px !important;
}

.auth-hero > p {
    font-size:   16px;
    line-height: 1.65;
    color:       rgba(255,255,255,0.72);
    margin:      0 0 40px;
    max-width:   420px;
}

/* Stats */
.auth-stats {
    display:   flex;
    gap:       14px;
    flex-wrap: wrap;
}

.auth-stat {
    background:      var(--auth-glass-bg);
    border:          1px solid var(--auth-glass-border);
    border-radius:   var(--auth-radius-stat);
    padding:         16px 22px;
    min-width:       110px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:      background 0.2s ease;
}

.auth-stat:hover { background: var(--auth-glass-hover); }

.auth-stat-value {
    font-size:     22px;
    font-weight:   800;
    color:         var(--auth-text-white);
    line-height:   1;
    margin-bottom: 4px;
}

.auth-stat-label {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.55);
}


/* ------------------------------------------------------------
   8. RIGHT LOGIN CARD
   ------------------------------------------------------------ */
 .auth-card{
    width:        100%;
    max-width:    300px;
    flex-shrink:  0;
    background:   var(--auth-glass-bg) !important;
    border:       1px solid var(--auth-glass-border) !important;
    border-radius: var(--auth-radius-card) !important;
    padding:      40px !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

.auth-card-header {
    text-align:    center;
    margin-bottom: 28px;
}

.auth-card-header h2 {
    font-size:   21px !important;
    font-weight: 700 !important;
    color:       var(--auth-text-white) !important;
    margin:      0 0 6px !important;
}

.auth-card-header p {
    font-size: 13px;
    color:     var(--auth-text-muted);
    margin:    0;
}


/* ------------------------------------------------------------
   9. FORM GROUPS & LABELS
   ------------------------------------------------------------ */
 .form-group {
    margin-bottom: 18px !important;
}

 .form-group label,
 label {
    display:       inline-block;
    font-size:     13px !important;
    font-weight:   600 !important;
    color:         var(--auth-text-label) !important;
    margin-bottom: 7px !important;
}


/* ------------------------------------------------------------
   10. INPUT GROUP — aggressive Argon overrides
   The key problem: Argon applies white bg to .form-control and
   adds borders/shadows at high specificity. We beat it here.
   ------------------------------------------------------------ */

/* The wrapper row */
 .input-group {
    flex-wrap:     nowrap !important;
    align-items:   stretch !important;
    border-radius: var(--auth-radius-input) !important;
    overflow:      hidden;
}

/* The styled shell */
 .input-group.input-group-alternative,
 .input-group-alternative {
    background:    var(--auth-input-bg) !important;
    border:        1px solid var(--auth-input-border) !important;
    border-radius: var(--auth-radius-input) !important;
    box-shadow:    none !important;
    transition:    border-color 0.2s ease, background 0.2s ease;
}

 .input-group.input-group-alternative:focus-within,
 .input-group-alternative:focus-within {
    border-color: var(--auth-input-focus-border) !important;
    background:   var(--auth-input-focus-bg) !important;
}

/* Icon prepend */
 .input-group-alternative .input-group-prepend,
 .input-group-prepend {
    display:     inline-flex !important;
    align-items: center !important;
    border:      none !important;
    background:  transparent !important;
}

 .input-group-alternative .input-group-prepend .input-group-text,
 .input-group-prepend .input-group-text {
    background:    transparent !important;
    border:        none !important;
    box-shadow:    none !important;
    color:         var(--auth-input-icon-color) !important;
    padding:       0 8px 0 14px !important;
    font-size:     14px !important;
    line-height:   1 !important;
    border-radius: 0 !important;
}

/* Icon append (eye toggle) */
 .input-group-alternative .input-group-append,
 .input-group-append {
    display:     inline-flex !important;
    align-items: center !important;
    border:      none !important;
    background:  transparent !important;
}

 .input-group-alternative .input-group-append .input-group-text,
 .input-group-append .input-group-text {
    background:    transparent !important;
    border:        none !important;
    box-shadow:    none !important;
    color:         var(--auth-input-icon-color) !important;
    padding:       0 14px 0 8px !important;
    font-size:     14px !important;
    line-height:   1 !important;
    border-radius: 0 !important;
    cursor:        pointer;
    transition:    color 0.2s ease;
}

 .input-group-alternative .input-group-append .input-group-text:hover,
 .input-group-append .input-group-text:hover {
    color: rgba(255,255,255,0.85) !important;
}

/* The actual <input> — most specific rule needed */
 .input-group-alternative .form-control,
 .input-group .form-control {
    background:    transparent !important;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    color:         var(--auth-text-white) !important;
    font-size:     14px !important;
    font-family:   'Public Sans', sans-serif !important;
    padding:       11px 10px !important;
    height:        auto !important;
    flex:          1 !important;
    min-width:     0 !important;
}

 .input-group-alternative .form-control::placeholder,
 .input-group .form-control::placeholder {
    color: var(--auth-input-placeholder) !important;
}

 .input-group-alternative .form-control:focus,
 .input-group .form-control:focus {
    background: transparent !important;
    border:     none !important;
    box-shadow: none !important;
    color:      var(--auth-text-white) !important;
    outline:    none !important;
}

/* Kill autofill yellow tint */
 .form-control:-webkit-autofill,
 .form-control:-webkit-autofill:hover,
 .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(40,127,113,0.3) inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
}


/* ------------------------------------------------------------
   11. REMEMBER ME CHECKBOX
   ------------------------------------------------------------ */
/* Row layout */
 .row.align-items-center {
    margin-bottom: 6px !important;
}


.custom-control-label {
    font-size:   13px !important;
    font-weight: 400 !important;
    cursor:      pointer;
    line-height: 1.5;
}

 .custom-control-input {
    display: none;
}

.custom-control-label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

/* box */
.custom-control-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 15px;
    height: 15px;
    background: #eee;
    border: 2px solid #ccc;
    border-radius: 4px;
}
input[type="password" ]
  {
    width: 73% !important;
}
/* checked state */
.custom-control-input:checked + .custom-control-label::before {
    background: #4CAF50;
    border-color: #4CAF50;
}

/* checkmark */
.custom-control-label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 5px;
    height: 6px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    display: none;
}

.custom-control-input:checked + .custom-control-label::after {
    display: block;
}

/* ------------------------------------------------------------
   12. SUBMIT BUTTON
   ------------------------------------------------------------ */
 .btn-white,
 button[type="submit"].btn-white {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           100% !important;
    float:           none !important;
    background:      #ffffff !important;
    color:           var(--auth-primary-dark) !important;
    border:          none !important;
    border-radius:   var(--auth-radius-btn) !important;
    padding:         13px 20px !important;
    font-size:       15px !important;
    font-weight:     700 !important;
    font-family:     'Public Sans', sans-serif !important;
    line-height:     1.4 !important;
    cursor:          pointer !important;
    gap:             6px;
    margin-top:      6px;
    position:        relative;
    overflow:        hidden;
    transition:      opacity 0.2s ease, transform 0.15s ease !important;
    box-shadow:      none !important;
}

 .btn-white:hover:not(:disabled),
 button[type="submit"].btn-white:hover:not(:disabled) {
    opacity:   0.91 !important;
    transform: translateY(-1px) !important;
}

 .btn-white:active:not(:disabled) {
    transform: translateY(0) !important;
}

 .btn-white:disabled {
    opacity: 0.65 !important;
    cursor:  not-allowed !important;
}

 .btn-white [class*="opacity-0"],
 .btn-white .opacity-0 {
    opacity: 0 !important;
}


/* ------------------------------------------------------------
   13. LOADING DOTS
   ------------------------------------------------------------ */
.login-dots {
    display:   flex;
    gap:       5px;
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.login-dots div {
    width:         7px;
    height:        7px;
    background:    var(--auth-primary-dark);
    border-radius: 50%;
    animation:     auth-dots 0.5s infinite alternate;
}

.login-dots div:nth-child(2) { animation-delay: 0.15s; }
.login-dots div:nth-child(3) { animation-delay: 0.30s; }

@keyframes auth-dots {
    from { transform: scale(1);   opacity: 0.3; }
    to   { transform: scale(1.6); opacity: 1;   }
}


/* ------------------------------------------------------------
   14. ERROR ALERT
   ------------------------------------------------------------ */
 .alert-danger {
    background:    var(--auth-danger-bg) !important;
    border:        1px solid var(--auth-danger-border) !important;
    border-radius: var(--auth-radius-input) !important;
    color:         var(--auth-danger-text) !important;
    font-size:     13px !important;
    padding:       12px 16px !important;
    margin-bottom: 18px !important;
    box-shadow:    none !important;
}


/* ------------------------------------------------------------
   15. DIVIDER
   ------------------------------------------------------------ */
.auth-divider {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      24px 0 16px;
    font-size:   12px;
    font-family: 'Public Sans', sans-serif;
    color:       rgba(255,255,255,0.35);
}

.auth-divider::before,
.auth-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: rgba(255,255,255,0.18);
}


/* ------------------------------------------------------------
   16. CONTACT FOOTER LINK
   ------------------------------------------------------------ */
.auth-contact {
    text-align:  center;
    font-size:   13px;
    font-family: 'Public Sans', sans-serif;
    color:       var(--auth-text-muted);
    margin:      0;
}

.auth-contact a {
    color:           var(--auth-text-white);
    font-weight:     700;
    text-decoration: none;
    transition:      opacity 0.2s ease;
}

.auth-contact a:hover {
    text-decoration: underline;
    opacity: 0.85;
}


/* ------------------------------------------------------------
   17. FORGOT PASSWORD (optional)
   ------------------------------------------------------------ */
.auth-forgot {
    font-size:       12px;
    color:           var(--auth-text-muted);
    text-decoration: none;
    transition:      color 0.2s ease;
}

.auth-forgot:hover { color: var(--auth-text-white); }


/* ------------------------------------------------------------
   18. PAGE FOOTER
   ------------------------------------------------------------ */
.auth-page-footer {
    position:    relative;
    z-index:     10;
    padding:     10px 150px;
    font-size:   12px;
    font-family: 'Public Sans', sans-serif;
    color:       var(--auth-text-faint);
}


/* ------------------------------------------------------------
   19. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
     body.login-page {
        overflow: auto !important; /* allow scroll on small screens */
    }

    .auth-shell {
        height: auto;
        min-height: 100vh;
    }
    .auth-main {
        flex-direction:  column;
        align-items:     center;
        padding:         0 24px 40px;
    }

    .auth-hero {
        max-width:  100%;
        text-align: center;
    }

    .auth-hero > p {
        margin-left:  auto;
        margin-right: auto;
    }

    .auth-stats        { justify-content: center; }
             .auth-card{ max-width: 100%; }
    .auth-topbar,
    .auth-page-footer  { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 480px) {
      .auth-card{ padding: 28px 20px !important; border-radius: 14px !important; }
    .auth-hero h1 { font-size: 28px !important; }
    .auth-stat  { min-width: 90px; padding: 12px 16px; }
}