/* ============================================================
   Bootstrap Variable Overrides — brand colors applied globally
   ============================================================ */
:root {
    --bs-primary:                   #151b45;
    --bs-primary-rgb:               21, 27, 69;
    --bs-secondary:                 #be772f;
    --bs-secondary-rgb:             190, 119, 47;
    --bs-link-color:                #be772f;
    --bs-link-hover-color:          #f8971e;
    --bs-focus-ring-color:          rgba(190, 119, 47, 0.25);
    --bs-body-font-family:          'Cairo', sans-serif;

    /* Project brand tokens */
    --ng-color-primary:             #151b45;
    --ng-color-secondary:           #be772f;
    --ng-color-accent:              #f8971e;
    --ng-color-auth-bg:             #b8c0f5;
    --ng-brand-panel-bg:            #151b45;
}

/* Bootstrap btn-primary override */
.btn-primary {
    --bs-btn-bg:                    #151b45;
    --bs-btn-border-color:          #151b45;
    --bs-btn-hover-bg:              #1e2660;
    --bs-btn-hover-border-color:    #1e2660;
    --bs-btn-active-bg:             #0f1330;
    --bs-btn-active-border-color:   #0f1330;
    --bs-btn-disabled-bg:           #151b45;
    --bs-btn-disabled-border-color: #151b45;
}

/* Bootstrap btn-secondary override */
.btn-secondary {
    --bs-btn-bg:                    #be772f;
    --bs-btn-border-color:          #be772f;
    --bs-btn-hover-bg:              #a66527;
    --bs-btn-hover-border-color:    #a66527;
    --bs-btn-active-bg:             #8d531f;
    --bs-btn-active-border-color:   #8d531f;
    --bs-btn-color:                 #fff;
    --bs-btn-hover-color:           #fff;
}

/* Form control focus ring — uses secondary */
.form-control:focus {
    border-color:   #be772f;
    box-shadow:     0 0 0 0.25rem rgba(190, 119, 47, 0.18);
}

/* Checkbox accent — uses primary */
.form-check-input:checked {
    background-color:   #151b45;
    border-color:       #151b45;
}

/* ============================================================
   Cairo Font
   ============================================================ */
@font-face {
    font-family: 'Cairo';
    src: url('/auth/fonts/Cairo-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('/auth/fonts/Cairo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('/auth/fonts/Cairo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('/auth/fonts/Cairo-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('/auth/fonts/Cairo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('/auth/fonts/Cairo-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('/auth/fonts/Cairo-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
}

/* ============================================================
   Base Reset
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family:        'Cairo', sans-serif;
    background-color:   var(--ng-color-auth-bg);
    min-height:         100vh;
    direction:          rtl;
}

/* ============================================================
   Auth Wrapper — full-height split screen
   ============================================================ */
.ng-auth-wrapper {
    display:        flex;
    min-height:     100vh;
    align-items:    stretch;
}

/* ============================================================
   Brand Panel — RIGHT side in RTL (first child in flex-row RTL)
   ============================================================ */
.ng-auth-brand-panel {
    flex:               0 0 42%;
    background-color:   var(--ng-brand-panel-bg);
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    justify-content:    center;
    padding:            3rem 2.5rem;
    position:           relative;
    overflow:           hidden;
}

/* Top-right ambient glow */
.ng-auth-brand-panel::before {
    content:        '';
    position:       absolute;
    top:            -120px;
    right:          -100px;
    width:          420px;
    height:         420px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(248, 151, 30, 0.16) 0%, transparent 68%);
    pointer-events: none;
}

/* Bottom-left ambient glow */
.ng-auth-brand-panel::after {
    content:        '';
    position:       absolute;
    bottom:         -130px;
    left:           -90px;
    width:          460px;
    height:         460px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(190, 119, 47, 0.20) 0%, transparent 65%);
    pointer-events: none;
}

.ng-brand-inner {
    position:   relative;
    z-index:    1;
    text-align: center;
    width:      100%;
    max-width:  340px;
}

/* Logo container */
.ng-brand-logo-wrap {
    width:           120px;
    height:          120px;
    margin:          0 auto 1.75rem;
    background:      rgba(255, 255, 255, 0.07);
    border:          1px solid rgba(248, 151, 30, 0.28);
    border-radius:   22px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
    backdrop-filter: blur(6px);
    transition:      border-color 0.3s, background 0.3s;
}

.ng-brand-logo-wrap:hover {
    background:      rgba(255, 255, 255, 0.11);
    border-color:    rgba(248, 151, 30, 0.5);
}

.ng-brand-logo-wrap img {
    width:          100%;
    height:         auto;
    object-fit:     contain;
    filter:         brightness(0) invert(1);
}

/* Brand name */
.ng-brand-title {
    font-size:      2.1rem;
    font-weight:    800;
    color:          #ffffff;
    margin:         0 0 0.4rem;
    letter-spacing: -0.02em;
    line-height:    1.2;
}

/* Gradient accent divider */
.ng-brand-divider {
    width:          48px;
    height:         3px;
    background:     linear-gradient(90deg, #be772f, #f8971e);
    border-radius:  99px;
    margin:         1rem auto 1.25rem;
}

/* Subtitle */
.ng-brand-subtitle {
    font-size:      0.975rem;
    color:          rgba(255, 255, 255, 0.62);
    margin:         0 0 2.25rem;
    line-height:    1.65;
}

/* Feature bullets */
.ng-brand-features {
    display:        flex;
    flex-direction: column;
    gap:            0.85rem;
    text-align:     right;
}

.ng-brand-feature {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    color:          rgba(255, 255, 255, 0.78);
    font-size:      0.88rem;
    font-weight:    500;
}

.ng-brand-feature-icon {
    width:           34px;
    height:          34px;
    flex-shrink:     0;
    border-radius:   9px;
    background:      rgba(248, 151, 30, 0.13);
    border:          1px solid rgba(248, 151, 30, 0.28);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #f8971e;
    font-size:       0.95rem;
}

/* ============================================================
   Form Panel — LEFT side in RTL (second child in flex-row RTL)
   ============================================================ */
.ng-auth-form-panel {
    flex:            1;
    background-color: var(--ng-color-auth-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         2.5rem 1.5rem;
    position:        relative;
    overflow:        hidden;
}

/* Subtle dot-grid pattern */
.ng-auth-form-panel::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: radial-gradient(circle, rgba(21, 27, 69, 0.07) 1px, transparent 1px);
    background-size:  28px 28px;
    pointer-events:   none;
    z-index:          0;
}

/* ============================================================
   Auth Card
   ============================================================ */
.ng-auth-card {
    position:      relative;
    z-index:       1;
    background:    #ffffff;
    border-radius: 20px;
    box-shadow:    0 24px 64px rgba(21, 27, 69, 0.13), 0 4px 16px rgba(21, 27, 69, 0.07);
    padding:       2.5rem 2.25rem 2rem;
    width:         100%;
    max-width:     420px;
    animation:     ng-card-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Top gradient accent bar */
.ng-auth-card::before {
    content:       '';
    position:      absolute;
    top:           0;
    left:          0;
    right:         0;
    height:        4px;
    background:    linear-gradient(90deg, #151b45 0%, #be772f 55%, #f8971e 100%);
    border-radius: 20px 20px 0 0;
}

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

/* Card header */
.ng-card-header {
    text-align:    center;
    margin-bottom: 1.85rem;
}

.ng-card-title {
    font-size:      1.45rem;
    font-weight:    700;
    color:          var(--ng-color-primary);
    margin:         0 0 0.3rem;
    letter-spacing: -0.01em;
}

.ng-card-subtitle {
    font-size:  0.875rem;
    color:      #6b7280;
    margin:     0;
}

/* ============================================================
   Form Groups & Inputs
   ============================================================ */
.ng-form-group {
    margin-bottom: 1.2rem;
}

.ng-form-label {
    display:       block;
    font-size:     0.845rem;
    font-weight:   600;
    color:         #374151;
    margin-bottom: 0.4rem;
}

.ng-input-wrap {
    position: relative;
}

/* RTL: icon sits on the right (text-start) side */
.ng-input-icon {
    position:       absolute;
    top:            50%;
    right:          0.9rem;
    transform:      translateY(-50%);
    color:          #9ca3af;
    font-size:      1rem;
    pointer-events: none;
    z-index:        5;
    transition:     color 0.2s;
}

.ng-input-wrap .form-control {
    padding-right:    2.7rem;
    padding-left:     0.85rem;
    border-radius:    10px;
    border:           1.5px solid #e5e7eb;
    font-family:      'Cairo', sans-serif;
    font-size:        0.9rem;
    color:            #1f2937;
    background-color: #f9fafb;
    height:           46px;
    transition:       border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.ng-input-wrap .form-control:focus {
    background-color: #ffffff;
    border-color:     #be772f;
    box-shadow:       0 0 0 3px rgba(190, 119, 47, 0.15);
    outline:          none;
}

.ng-input-wrap:focus-within .ng-input-icon {
    color: #be772f;
}

.ng-input-wrap .form-control.is-invalid {
    border-color:     #ef4444;
    background-color: #fff5f5;
    /* Disable Bootstrap's built-in validation icon — it conflicts with our custom icons */
    background-image:        none !important;
    padding-right:           2.7rem !important;
    padding-left:            0.85rem !important;
}

.ng-input-wrap .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ng-has-toggle .form-control.is-invalid {
    padding-right: 2.7rem !important;
    padding-left:  2.75rem !important; /* preserve toggle button space */
}

/* Field-level error text — always rendered to prevent card height jump */
.ng-field-error {
    min-height:  1.35rem;
    font-size:   0.815rem;
    color:       #ef4444;
    margin-top:  0.3rem;
    line-height: 1.4;
    display:     block;
}

/* Invalid feedback */
.invalid-feedback {
    font-size:   0.815rem;
    color:       #ef4444;
    margin-top:  0.3rem;
    display:     block;
}

/* Password toggle — LTR side of input */
.ng-has-toggle .form-control {
    padding-left: 2.75rem;
}

.ng-pwd-toggle {
    position:        absolute;
    top:             50%;
    left:            0.7rem;
    transform:       translateY(-50%);
    background:      none;
    border:          none;
    color:           #9ca3af;
    cursor:          pointer;
    padding:         0.2rem;
    line-height:     1;
    z-index:         5;
    transition:      color 0.2s;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.ng-pwd-toggle:hover {
    color: #be772f;
}

/* ============================================================
   Auth Meta — remember + forgot password row
   ============================================================ */
.ng-auth-meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1.5rem;
}

.ng-auth-meta .form-check-label {
    font-size: 0.855rem;
    color:     #374151;
}

.ng-forgot-link {
    font-size:       0.855rem;
    color:           #be772f;
    text-decoration: none;
    font-weight:     500;
    transition:      color 0.2s;
}

.ng-forgot-link:hover {
    color:           #f8971e;
    text-decoration: underline;
}

/* ============================================================
   Login Button
   ============================================================ */
.ng-btn-login {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    width:           100%;
    height:          48px;
    border:          none;
    border-radius:   10px;
    background:      linear-gradient(135deg, #151b45 0%, #1d2460 100%);
    color:           #ffffff;
    font-family:     'Cairo', sans-serif;
    font-size:       1rem;
    font-weight:     700;
    cursor:          pointer;
    position:        relative;
    overflow:        hidden;
    letter-spacing:  0.01em;
    transition:      transform 0.2s, box-shadow 0.2s;
}

/* Hover shimmer — amber gradient slides in from right (RTL-natural) */
.ng-btn-login::before {
    content:    '';
    position:   absolute;
    top:        0;
    right:      -100%;
    width:      100%;
    height:     100%;
    background: linear-gradient(135deg, #f8971e 0%, #be772f 100%);
    transition: right 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    z-index:    0;
}

.ng-btn-login:hover::before {
    right: 0;
}

.ng-btn-login > * {
    position: relative;
    z-index:  1;
}

.ng-btn-login:hover {
    box-shadow: 0 6px 22px rgba(190, 119, 47, 0.38);
    transform:  translateY(-1px);
}

.ng-btn-login:active {
    transform: translateY(0);
}

.ng-btn-login:disabled {
    opacity:   0.75;
    cursor:    not-allowed;
    transform: none;
}

/* Spinner (shown via ng-loading class) */
.ng-spinner {
    display:       none;
    width:         18px;
    height:        18px;
    border:        2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation:     ng-spin 0.7s linear infinite;
    flex-shrink:   0;
}

.ng-btn-login.ng-loading .ng-spinner {
    display: inline-block;
}

.ng-btn-login.ng-loading .ng-btn-icon {
    display: none;
}

@keyframes ng-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Alerts
   ============================================================ */
.ng-alert {
    border-radius: 10px;
    font-size:     0.875rem;
    border:        none;
    border-right:  3px solid transparent;
}

.ng-alert.alert-danger {
    background-color: #fef2f2;
    color:            #dc2626;
    border-right-color: #ef4444;
}

/* ============================================================
   Card Footer
   ============================================================ */
.ng-card-footer {
    text-align:    center;
    margin-top:    1.5rem;
    padding-top:   1.25rem;
    border-top:    1px solid #f3f4f6;
    font-size:     0.78rem;
    color:         #9ca3af;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991.98px) {
    .ng-auth-brand-panel {
        flex: 0 0 38%;
        padding: 2rem 1.75rem;
    }
}

@media (max-width: 767.98px) {
    .ng-auth-wrapper {
        flex-direction: column;
    }

    .ng-auth-brand-panel {
        flex:       none;
        padding:    2.25rem 1.5rem 2rem;
        min-height: 200px;
    }

    .ng-brand-features {
        display: none;
    }

    .ng-brand-logo-wrap {
        width:         80px;
        height:        80px;
        border-radius: 16px;
        margin-bottom: 1rem;
    }

    .ng-brand-title {
        font-size: 1.6rem;
    }

    .ng-auth-form-panel {
        flex:    1;
        padding: 2rem 1rem;
    }

    .ng-auth-card {
        border-radius: 16px;
        padding:       2rem 1.5rem 1.75rem;
    }
}