/* ============================================================
   MDRRMO — Inventory Equipment Tracking System
   Login Page Stylesheet
   ============================================================ */


/* ──────────────────────────────────────────────────────────
   1.  CSS CUSTOM PROPERTIES
────────────────────────────────────────────────────────── */

/* ── Brand constants (theme-agnostic) ── */
:root {
    --yellow:           #F4B400;
    --yellow-hover:     #D99A00;
    --yellow-dim:       rgba(244, 180, 0, 0.14);
    --yellow-glow:      rgba(244, 180, 0, 0.30);
    --yellow-ring:      rgba(244, 180, 0, 0.22);

    --red-color:        #EF4444;
    --red-dim:          rgba(239,  68,  68, 0.12);
    --red-ring:         rgba(239,  68,  68, 0.22);

    --green-color:      #22C55E;
    --green-dim:        rgba( 34, 197,  94, 0.12);
    --green-ring:       rgba( 34, 197,  94, 0.22);

    /* typography */
    --font:             'Inter', system-ui, -apple-system, sans-serif;

    /* radii */
    --r-xs:             6px;
    --r-sm:             10px;
    --r-md:             16px;
    --r-lg:             24px;
    --r-xl:             32px;
    --r-full:           9999px;

    /* easing */
    --ease:             cubic-bezier(0.4, 0, 0.2, 1);
    --dur:              0.28s;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
    --bg:               #0B0F19;
    --surface:          #151A27;
    --surface-raised:   #1C2333;
    --surface-hover:    #1F2840;

    --txt-primary:      #F8F9FA;
    --txt-secondary:    #ADB5BD;
    --txt-muted:        #6B7280;
    --txt-placeholder:  #3D4A5C;

    --border:           #2B3142;
    --border-subtle:    rgba(255, 255, 255, 0.05);

    --card-shadow:      0 32px 72px rgba(0, 0, 0, 0.55),
                        0  8px 24px rgba(0, 0, 0, 0.30);
    --input-shadow:     0 0 0 3px rgba(244, 180, 0, 0.20);
    --btn-shadow:       0 10px 30px rgba(244, 180, 0, 0.35);

    --blob-a:           rgba(244, 180,   0, 0.055);
    --blob-b:           rgba( 59, 130, 246, 0.045);

    --toggle-bg:        #1C2333;
    --toggle-border:    #2B3142;
    --toggle-thumb:     #F4B400;
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
    --bg:               #F5F7FA;
    --surface:          #FFFFFF;
    --surface-raised:   #F9FAFB;
    --surface-hover:    #F3F4F6;

    --txt-primary:      #1F2937;
    --txt-secondary:    #6B7280;
    --txt-muted:        #9CA3AF;
    --txt-placeholder:  #C4CBD5;

    --border:           #E5E7EB;
    --border-subtle:    rgba(0, 0, 0, 0.05);

    --card-shadow:      0 24px 60px rgba(0, 0, 0, 0.10),
                        0  6px 20px rgba(0, 0, 0, 0.06);
    --input-shadow:     0 0 0 3px rgba(244, 180, 0, 0.18);
    --btn-shadow:       0 10px 30px rgba(244, 180, 0, 0.38);

    --blob-a:           rgba(244, 180,   0, 0.09);
    --blob-b:           rgba( 99, 102, 241, 0.07);

    --toggle-bg:        #E9EBF0;
    --toggle-border:    #D1D5DB;
    --toggle-thumb:     #1F2937;
}


/* ──────────────────────────────────────────────────────────
   2.  RESET & BASE
────────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    font-size:        16px;
    scroll-behavior:  smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering:   optimizeLegibility;
}

body {
    font-family:      var(--font);
    background-color: var(--bg);
    color:            var(--txt-primary);
    min-height:       100vh;
    transition:       background-color var(--dur) var(--ease),
                      color            var(--dur) var(--ease);
    overflow-x:       hidden;
    line-height:      1.6;
}

body.custom-login-bg {
    position: relative;
    background-color: #0b0f19;
}

body.custom-login-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: var(--login-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(var(--login-bg-blur, 10px));
    transform: scale(1.04);
    opacity: 1;
    pointer-events: none;
}

body.custom-login-bg .blob {
    display: none !important;
}

a {
    color:           inherit;
    text-decoration: none;
}

button {
    font-family: var(--font);
    cursor:      pointer;
    border:      none;
    background:  none;
    padding:     0;
}

input, button {
    outline: none;
}

img, svg { display: block; }


/* ──────────────────────────────────────────────────────────
   3.  BACKGROUND BLOBS
────────────────────────────────────────────────────────── */

.blob {
    position:      fixed;
    border-radius: var(--r-full);
    filter:        blur(80px);
    pointer-events: none;
    z-index:        0;
    transition:    background var(--dur) var(--ease);
}

.blob-1 {
    width:      520px;
    height:     520px;
    top:        -140px;
    right:      -160px;
    background: var(--blob-a);
    animation:  blob-drift 14s ease-in-out infinite alternate;
}

.blob-2 {
    width:      440px;
    height:     440px;
    bottom:     -120px;
    left:       -140px;
    background: var(--blob-b);
    animation:  blob-drift 18s ease-in-out infinite alternate-reverse;
}

@keyframes blob-drift {
    from { transform: translate(0, 0)   scale(1);    }
    to   { transform: translate(30px, 20px) scale(1.06); }
}


/* ──────────────────────────────────────────────────────────
   4.  THEME TOGGLE
────────────────────────────────────────────────────────── */

.theme-toggle {
    position:   fixed;
    top:        20px;
    right:      20px;
    z-index:    900;
    background: none;
    border:     none;
    padding:    0;
    cursor:     pointer;
}

.toggle-track {
    display:        flex;
    align-items:    center;
    width:          52px;
    height:         28px;
    background:     var(--toggle-bg);
    border:         1.5px solid var(--toggle-border);
    border-radius:  var(--r-full);
    padding:        3px;
    transition:     background var(--dur) var(--ease),
                    border-color var(--dur) var(--ease);
}

.toggle-thumb {
    width:          22px;
    height:         22px;
    background:     var(--toggle-thumb);
    border-radius:  var(--r-full);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      0.65rem;
    color:          #fff;
    transition:     transform var(--dur) var(--ease),
                    background var(--dur) var(--ease);
    transform:      translateX(0);
    box-shadow:     0 2px 6px rgba(0,0,0,0.25);
}

/* When light mode active — slide thumb to right */
[data-theme="light"] .toggle-thumb {
    transform:  translateX(24px);
    background: var(--yellow);
    color:      #000;
}

.theme-toggle:hover .toggle-track {
    border-color: var(--yellow);
}

.theme-toggle:focus-visible .toggle-track {
    outline:        2px solid var(--yellow);
    outline-offset: 3px;
}


/* ──────────────────────────────────────────────────────────
   5.  PAGE WRAPPER  (centering container)
────────────────────────────────────────────────────────── */

.page-wrapper {
    position:        relative;
    z-index:         1;
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         5rem 1.25rem 2.5rem;
}


/* ──────────────────────────────────────────────────────────
   6.  LOGIN CARD
────────────────────────────────────────────────────────── */

.login-card {
    position:      relative;
    width:         100%;
    max-width:     440px;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow:    var(--card-shadow);
    overflow:      hidden;
    transition:    background var(--dur) var(--ease),
                   border-color var(--dur) var(--ease),
                   box-shadow var(--dur) var(--ease);

    /* entrance animation */
    animation: card-in 0.55s var(--ease) both;
}

@keyframes card-in {
    from {
        opacity:   0;
        transform: translateY(28px) scale(0.96);
    }
    to {
        opacity:   1;
        transform: translateY(0)    scale(1);
    }
}

/* ── Top accent bar ── */
.card-accent-bar {
    height:     4px;
    background: linear-gradient(90deg, var(--yellow) 0%, var(--yellow-hover) 100%);
}


/* ──────────────────────────────────────────────────────────
   7.  CARD HEADER
────────────────────────────────────────────────────────── */

.card-header {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        2.25rem 2.25rem 0;
    gap:            1.1rem;
}

/* ── Logo ── */
.logo-wrap {
    position: relative;
    display:  inline-block;
}

.logo-ring {
    width:           76px;
    height:          76px;
    border-radius:   var(--r-full);
    border:          2px solid var(--yellow-ring);
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--yellow-dim);
    transition:      border-color var(--dur) var(--ease);
}

.logo-core {
    width:           56px;
    height:          56px;
    border-radius:   var(--r-full);
    background:      var(--yellow);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.55rem;
    color:           #000;
    box-shadow:      0 6px 20px var(--yellow-glow);
    transition:      transform var(--dur) var(--ease),
                     box-shadow var(--dur) var(--ease);
}

.login-card:hover .logo-core {
    transform:  scale(1.06);
    box-shadow: 0 8px 28px rgba(244, 180, 0, 0.45);
}

/* Ping dot */
.logo-ping {
    position:      absolute;
    top:           4px;
    right:         4px;
    width:         12px;
    height:        12px;
    background:    var(--green-color);
    border-radius: var(--r-full);
    border:        2px solid var(--surface);
    animation:     ping-pulse 2.4s ease-in-out infinite;
}

@keyframes ping-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);   }
}

/* ── Header text ── */
.header-text {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.45rem;
}

.system-label {
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 3.5px;
    color:          var(--yellow);
    text-transform: uppercase;
}

.system-name {
    font-size:   1.18rem;
    font-weight: 700;
    color:       var(--txt-primary);
    line-height: 1.4;
    transition:  color var(--dur) var(--ease);
}

.auth-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        5px 14px;
    background:     var(--yellow-dim);
    border:         1px solid var(--yellow-ring);
    border-radius:  var(--r-full);
    font-size:      0.72rem;
    font-weight:    600;
    color:          var(--yellow);
    letter-spacing: 0.4px;
}

.auth-badge i {
    font-size: 0.68rem;
}


/* ──────────────────────────────────────────────────────────
   8.  LOGIN FORM
────────────────────────────────────────────────────────── */

.login-form {
    display:        flex;
    flex-direction: column;
    gap:            1.15rem;
    padding:        1.85rem 2.25rem 0;
}


/* ──────────────────────────────────────────────────────────
   9.  ALERTS
────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   10. FIELD GROUPS
────────────────────────────────────────────────────────── */

.field-group {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

/* ── Label ── */
.field-label {
    font-size:   0.8rem;
    font-weight: 600;
    color:       var(--txt-secondary);
    transition:  color var(--dur) var(--ease);
}

/* Label color on focus */
.field-group:focus-within .field-label {
    color: var(--yellow);
}

/* ── Input wrapper ── */
.field-wrap {
    position: relative;
    display:  flex;
    align-items: center;
    isolation: isolate;
}

/* ── Icons inside input ── */
.field-icon {
    position:    absolute;
    top:         50%;
    transform:   translateY(-50%);
    color:       var(--txt-muted);
    font-size:   0.9rem;
    line-height: 1;
    transition:  color var(--dur) var(--ease);
    pointer-events: none;
}

.field-icon--left  { left:  14px; }
.field-icon--right {
    right:          12px;
    pointer-events: all;
    z-index:        3;
}

/* Left icon turns yellow on focus */
.field-group:focus-within .field-icon--left {
    color: var(--yellow);
}

/* ── Eye toggle button ── */
.btn-eye {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--txt-muted);
    font-size:   0.9rem;
    padding:     6px;
    border-radius: var(--r-xs);
    transition:  color var(--dur) var(--ease),
                 background var(--dur) var(--ease);
}

.btn-eye:hover {
    color:       var(--yellow);
    background:  var(--yellow-dim);
}

/* Hide native browser password reveal/clear icons (Edge/IE) so only
   our custom .btn-eye toggle shows inside the field */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* ── Text input ── */
.field-input {
    width:         100%;
    height:        54px;
    padding:       0 46px;
    background:    var(--surface-raised);
    border:        1.5px solid var(--border);
    border-radius: var(--r-md);
    font-family:   var(--font);
    font-size:     0.9rem;
    line-height:   1.2;
    color:         var(--txt-primary);
    transition:    border-color var(--dur) var(--ease),
                   background   var(--dur) var(--ease),
                   box-shadow   var(--dur) var(--ease);
}

.field-input::placeholder {
    color: transparent;
}

/* Focus state */
.field-input:focus {
    border-color: var(--yellow);
    background:   var(--surface);
    box-shadow:   var(--input-shadow);
}

.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover {
    border-color: var(--border);
    -webkit-text-fill-color: var(--txt-primary);
    caret-color: var(--txt-primary);
    box-shadow: 0 0 0 1000px var(--surface-raised) inset;
    transition: background-color 9999s ease-out, color 9999s ease-out;
}

.field-input:-webkit-autofill:focus {
    border-color: var(--yellow);
    -webkit-text-fill-color: var(--txt-primary);
    caret-color: var(--txt-primary);
    box-shadow: 0 0 0 1000px var(--surface) inset, var(--input-shadow);
}

.field-label--floating {
    position:      absolute;
    left:          46px;
    top:           50%;
    transform:     translateY(-50%);
    z-index:       2;
    padding:       2px 8px;
    border-radius: var(--r-xs);
    background:    var(--surface-raised);
    border:        1px solid transparent;
    color:         var(--txt-secondary);
    line-height:   1.1;
    pointer-events: none;
    max-width:     calc(100% - 100px);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    transition:    top var(--dur) var(--ease),
                   transform var(--dur) var(--ease),
                   color var(--dur) var(--ease),
                   background var(--dur) var(--ease),
                   font-size var(--dur) var(--ease),
                   box-shadow var(--dur) var(--ease),
                   border-color var(--dur) var(--ease);
}

.field-label--floating.always-floated,
.field-input:focus + .field-label--floating,
.field-input:not(:placeholder-shown) + .field-label--floating {
    top:       0;
    transform: translateY(-50%);
    font-size: 0.74rem;
    color:     var(--yellow);
    background: var(--surface-raised);
    border-color: var(--yellow);
    box-shadow: none;
}

.field-input:-webkit-autofill + .field-label--floating,
.field-input:focus + .field-label--floating {
    border-color: var(--yellow);
}

.field-input--error + .field-label--floating {
    color: var(--red-color);
    border-color: var(--red-color);
}

/* Error state */
.field-input--error {
    border-color: var(--red-color) !important;
    box-shadow:   0 0 0 3px var(--red-ring) !important;
}

/* Valid state (added via JS) */
.field-input--valid {
    border-color: var(--green-color);
    box-shadow:   0 0 0 3px var(--green-ring);
}

/* ── Field messages ── */
.field-msg {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   0.76rem;
    font-weight: 500;
    line-height: 1.4;
    animation:   shake 0.38s var(--ease);
}

.field-msg--error {
    color: var(--red-color);
}

@keyframes shake {
    0%, 100% { transform: translateX(0);   }
    20%       { transform: translateX(-5px); }
    40%       { transform: translateX( 5px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX( 4px); }
}


/* ──────────────────────────────────────────────────────────
   11. FORM ROW  (Remember Me + Forgot Password)
────────────────────────────────────────────────────────── */

.form-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             0.5rem;
}

/* ── Custom checkbox ── */
.checkbox-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    user-select: none;
    position:    relative;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity:  0;
    width:    1px;
    height:   1px;
    margin:   -1px;
    overflow: hidden;
    clip:     rect(0, 0, 0, 0);
    white-space: nowrap;
}

.checkbox-box {
    width:          18px;
    height:         18px;
    min-width:      18px;
    background:     var(--surface-raised);
    border:         1.5px solid var(--border);
    border-radius:  5px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:     border-color var(--dur) var(--ease),
                    background   var(--dur) var(--ease);
    position:       relative;
}

/* Checkmark (drawn with pseudo-element) */
.checkbox-box::after {
    content:       '';
    display:       block;
    width:         5px;
    height:        9px;
    border:        2px solid #000;
    border-top:    none;
    border-left:   none;
    transform:     rotate(45deg) scale(0) translateY(-1px);
    transition:    transform 0.18s var(--ease);
}

.checkbox-label input:checked ~ .checkbox-box {
    background:   var(--yellow);
    border-color: var(--yellow);
}

.checkbox-label input:checked ~ .checkbox-box::after {
    transform: rotate(45deg) scale(1) translateY(-1px);
}

.checkbox-label:hover .checkbox-box {
    border-color: var(--yellow);
}

.checkbox-text {
    font-size:  0.83rem;
    font-weight: 500;
    color:       var(--txt-secondary);
}

/* ── Forgot link ── */
.forgot-link {
    font-size:   0.83rem;
    font-weight: 600;
    color:       var(--yellow);
    transition:  color var(--dur) var(--ease),
                 opacity var(--dur) var(--ease);
}

.forgot-link:hover {
    color:   var(--yellow-hover);
    opacity: 0.88;
}

.forgot-link:focus-visible {
    outline:        2px solid var(--yellow);
    outline-offset: 3px;
    border-radius:  var(--r-xs);
}


/* ──────────────────────────────────────────────────────────
   12. SIGN IN BUTTON
────────────────────────────────────────────────────────── */

.btn-signin {
    width:           100%;
    height:          52px;
    background:      var(--yellow);
    color:           #000;
    font-family:     var(--font);
    font-size:       0.95rem;
    font-weight:     700;
    letter-spacing:  0.3px;
    border:          none;
    border-radius:   var(--r-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    cursor:          pointer;
    position:        relative;
    overflow:        hidden;
    transition:      background    var(--dur) var(--ease),
                     box-shadow    var(--dur) var(--ease),
                     transform     var(--dur) var(--ease),
                     opacity       var(--dur) var(--ease);
    box-shadow:      var(--btn-shadow);
    margin-top:      0.15rem;
}

/* Shine overlay */
.btn-signin::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.18) 0%,
        transparent 55%
    );
    pointer-events: none;
}

/* Ripple pseudo (decorative) */
.btn-signin::after {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    rgba(0,0,0,0);
    border-radius: inherit;
    transition:    background 0.15s ease;
}

.btn-signin:hover {
    background:  var(--yellow-hover);
    box-shadow:  0 14px 38px rgba(244, 180, 0, 0.48);
    transform:   translateY(-2px);
}

.btn-signin:active {
    transform:   translateY(0);
    box-shadow:  var(--btn-shadow);
}

.btn-signin:active::after {
    background: rgba(0,0,0,0.08);
}

.btn-signin:disabled {
    opacity:   0.72;
    cursor:    not-allowed;
    transform: none;
}

/* ── Button states ── */
.btn-state {
    display:     flex;
    align-items: center;
    gap:         8px;
    transition:  opacity 0.2s var(--ease),
                 transform 0.2s var(--ease);
}

.btn-state--loading {
    position: absolute;
    inset: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.btn-state--loading i {
    font-size: 1rem;
}

.btn-auth-sequence {
    position: relative;
    width: min(176px, 100%);
    height: 44px;
    display: block;
}

.btn-letter-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 44px;
    color: #111827;
    transform: translate(-50%, -50%);
    transition: left 0.34s var(--ease), opacity 0.24s var(--ease), transform 0.34s var(--ease);
}

.btn-auth-label {
    position: absolute;
    top: 50%;
    left: 54px;
    color: #111827;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translate(8px, -50%);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.btn-auth-check {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    border: 2px solid #111827;
    border-radius: var(--r-full);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.62);
    transition: opacity 0.28s var(--ease),
                transform 0.28s var(--ease),
                border-color 0.28s var(--ease);
}

.btn-auth-check::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    width: 11px;
    height: 6px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    border-radius: 1px;
    transform: rotate(-45deg) scale(0.4);
    transform-origin: center;
    opacity: 0;
}

.btn-letter-loader__letter,
.btn-letter-loader__link,
.btn-letter-loader__core {
    position: absolute;
    top: 50%;
    left: 50%;
}

.btn-letter-loader__letter {
    z-index: 2;
    font-size: 0.46rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    opacity: 0;
    transform:
        translate(-50%, -50%)
        rotate(0deg)
        translateX(var(--start-x))
        translateY(6px)
        rotate(var(--tilt))
        scale(0.72);
}

.btn-letter-loader__link {
    z-index: 1;
    width: var(--link-w);
    height: 2px;
    border-radius: var(--r-full);
    background: currentColor;
    opacity: 0;
    transform: translate(calc(-50% + var(--link-x)), -50%) scaleX(0);
    transform-origin: center;
}

.btn-letter-loader__core {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--r-full);
    opacity: 0;
    transform: scale(0.65);
}

.btn-signin--loading .btn-letter-loader__letter {
    animation: letter-line-to-circle 1.15s var(--ease) forwards;
    animation-delay: calc(var(--i) * 0.045s);
}

.btn-signin--loading .btn-letter-loader__link {
    animation: letter-chain-link 0.72s var(--ease) forwards;
    animation-delay: calc(0.34s + (var(--link-i) * 0.055s));
}

.btn-signin--loading .btn-letter-loader__core {
    animation: loader-core-in 0.24s var(--ease) 1.28s forwards;
}

.btn-signin--loading .btn-letter-loader {
    animation: letter-loader-spin 1.05s linear 1.5s infinite;
}

.btn-signin--authenticating .btn-letter-loader {
    left: 24px;
}

.btn-signin--authenticating .btn-auth-label {
    opacity: 1;
    transform: translate(0, -50%);
}

.btn-signin--success .btn-auth-label {
    opacity: 0;
    transform: translate(8px, -50%);
}

.btn-signin--success .btn-letter-loader {
    left: 50%;
    opacity: 0;
    animation: none;
    transform: translate(-50%, -50%) scale(0.72);
}

.btn-signin--success .btn-letter-loader__letter,
.btn-signin--success .btn-letter-loader__link,
.btn-signin--success .btn-letter-loader__core {
    animation: none;
    opacity: 0;
}

.btn-signin--success .btn-auth-check {
    color: #111827;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: auth-check-ring 0.52s var(--ease) forwards;
}

.btn-signin--success .btn-auth-check::after {
    animation: auth-check-draw 0.36s var(--ease) 0.18s forwards;
}

.btn-signin--failed .btn-letter-loader {
    animation: none;
    left: 50%;
}

.btn-signin--failed .btn-auth-label {
    opacity: 0;
    transform: translate(8px, -50%);
}

.btn-signin--failed .btn-letter-loader__letter {
    animation: letter-circle-break 0.7s var(--ease) forwards;
    animation-delay: calc(var(--i) * 0.025s);
}

.btn-signin--failed .btn-letter-loader__link {
    animation: letter-link-break 0.46s var(--ease) forwards;
}

.btn-signin--failed .btn-letter-loader__core {
    animation: loader-core-out 0.24s var(--ease) forwards;
}

@keyframes letter-line-to-circle {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            translateX(var(--start-x))
            translateY(7px)
            rotate(var(--tilt))
            scale(0.72);
    }
    24% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            translateX(var(--line-x))
            translateY(0)
            rotate(var(--tilt))
            scale(1.08);
    }
    48% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            translateX(var(--line-x))
            translateY(0)
            rotate(0deg)
            scale(1);
    }
    66% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            translateX(var(--line-x))
            translateY(0)
            rotate(0deg)
            scale(1);
    }
    100% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(var(--angle))
            translateX(0)
            translateY(-17px)
            rotate(var(--angle-back))
            scale(1);
    }
}

@keyframes letter-chain-link {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--link-x)), -50%) scaleX(0);
    }
    42% {
        opacity: 0.76;
        transform: translate(calc(-50% + var(--link-x)), -50%) scaleX(1);
    }
    76% {
        opacity: 0.5;
        transform: translate(calc(-50% + var(--link-x)), -50%) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--link-x)), -50%) scaleX(0.2);
    }
}

@keyframes loader-core-in {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes loader-core-out {
    to {
        opacity: 0;
        transform: scale(0.65);
    }
}

@keyframes letter-loader-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes letter-circle-break {
    0% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(var(--angle))
            translateX(0)
            translateY(-17px)
            rotate(var(--angle-back))
            scale(1);
    }
    48% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            translateX(var(--line-x))
            translateY(0)
            rotate(0deg)
            scale(1);
    }
    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            translateX(var(--start-x))
            translateY(7px)
            rotate(var(--tilt))
            scale(0.72);
    }
}

@keyframes letter-link-break {
    to {
        opacity: 0;
        transform: translate(calc(-50% + var(--link-x)), -50%) scaleX(0);
    }
}

@keyframes auth-check-ring {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.62);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes auth-check-draw {
    to {
        opacity: 1;
        transform: rotate(-45deg) scale(1);
    }
}

.btn-signin--loading {
    background: var(--yellow-hover);
    cursor: wait;
}

.btn-signin--loading:disabled {
    opacity: 1;
}

.btn-signin--loading .btn-state--default {
    opacity: 0;
    transform: translateY(-8px);
}

.btn-signin--loading .btn-state--loading {
    opacity: 1;
    transform: translateY(0);
}

.btn-signin--loading:hover {
    transform: none;
    box-shadow: var(--btn-shadow);
}


/* ──────────────────────────────────────────────────────────
   13. CARD FOOTER
────────────────────────────────────────────────────────── */

.card-footer {
    padding:      1.5rem 2.25rem 2rem;
    text-align:   center;
    margin-top:   0.5rem;
}

.footer-copy {
    font-size: 0.75rem;
    color:     var(--txt-muted);
}


/* ──────────────────────────────────────────────────────────
   14. SCROLLBAR
────────────────────────────────────────────────────────── */

::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background:    var(--border);
    border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--yellow); }


/* ──────────────────────────────────────────────────────────
   15. RESPONSIVE
────────────────────────────────────────────────────────── */

.toast-stack {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.sys-toast {
    min-width: 290px;
    max-width: 360px;
    background: #fff;
    border: 1px solid #e8e8f0;
    border-left: 4px solid var(--yellow);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(26, 26, 46, 0.16);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 13px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.sys-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.sys-toast.success { border-left-color: #00b894; }
.sys-toast.error { border-left-color: #e17055; }

.sys-toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}

.sys-toast.success .sys-toast-icon {
    background: #e8f8f5;
    color: #00b894;
}

.sys-toast.error .sys-toast-icon {
    background: #fef0ee;
    color: #e17055;
}

.sys-toast-body h5 {
    font-size: 12px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 3px;
}

.sys-toast-body p {
    font-size: 12px;
    color: #4a4a6a;
    line-height: 1.35;
}

[data-theme="dark"] .sys-toast {
    background: #1d2233;
    border-color: #2a3148;
}

[data-theme="dark"] .sys-toast-body h5 {
    color: #e9edff;
}

[data-theme="dark"] .sys-toast-body p {
    color: #b7bfdc;
}

/* Tablet */
@media (max-width: 600px) {
    .login-card {
        border-radius: var(--r-lg);
    }

    .card-header,
    .login-form {
        padding-left:  1.6rem;
        padding-right: 1.6rem;
    }

    .card-footer {
        padding-left:  1.6rem;
        padding-right: 1.6rem;
    }

    .system-name {
        font-size: 1.05rem;
    }
}

/* Mobile */
@media (max-width: 420px) {
    .toast-stack {
        left: 1rem;
        right: 1rem;
    }

    .sys-toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .page-wrapper {
        padding:      4.5rem 1rem 2rem;
        align-items:  flex-start;
    }

    .login-card {
        border-radius: var(--r-md);
    }

    .card-header,
    .login-form {
        padding-left:  1.25rem;
        padding-right: 1.25rem;
    }

    .card-footer {
        padding:     1.25rem 1.25rem 1.6rem;
    }

    .form-row {
        flex-direction: column;
        align-items:    flex-start;
    }

    .theme-toggle {
        top:   14px;
        right: 14px;
    }
}

/* Tall landscape mobile — keep card visible */
@media (max-height: 640px) and (max-width: 768px) {
    .page-wrapper {
        align-items: flex-start;
    }

    .logo-ring {
        width:  60px;
        height: 60px;
    }

    .logo-core {
        width:     44px;
        height:    44px;
        font-size: 1.25rem;
    }

    .card-header {
        padding-top: 1.5rem;
        gap:         0.8rem;
    }
}