/* ===================================================================
   PAGES — pages.css
   Page-specific styles: login, access denied, dashboard extras.
   Add new page-specific sections at the bottom.
   =================================================================== */

/* ── Auth / Login Page ────────────────────────────────────────────── */
/* Split-panel: left = brand, right = form                             */

.auth-page {
    min-height:            100vh;
    display:               grid;
    grid-template-columns: 420px 1fr;
}

/* ── Left brand panel ─────────────────────────────────────────────── */
.auth-brand {
    background: linear-gradient(160deg, #13114a 0%, #1e1b4b 35%, #312e81 70%, #4338ca 100%);
    position:   relative;
    overflow:   hidden;
    display:    flex;
    align-items:     center;
    justify-content: center;
    padding:    48px 40px;
}

/* Decorative floating shapes */
.auth-brand-shape {
    position:      absolute;
    border-radius: 50%;
    pointer-events: none;
}
.auth-brand-shape.s1 {
    width: 380px; height: 380px;
    top: -120px; right: -100px;
    background: radial-gradient(circle, rgba(99,102,241,.22) 0%, transparent 70%);
}
.auth-brand-shape.s2 {
    width: 280px; height: 280px;
    bottom: -80px; left: -60px;
    background: radial-gradient(circle, rgba(79,70,229,.18) 0%, transparent 70%);
}
.auth-brand-shape.s3 {
    width: 160px; height: 160px;
    bottom: 30%; right: 15%;
    background: radial-gradient(circle, rgba(139,92,246,.15) 0%, transparent 70%);
}

.auth-brand-inner {
    position:   relative;
    z-index:    1;
    text-align: center;
}

.auth-brand-logo {
    display:       block;
    width:         200px;
    height:        auto;
    margin:        0 auto 28px;
    padding:       14px 24px;
    background:    #ffffff;
    border-radius: 16px;
    box-shadow:    0 8px 40px rgba(0,0,0,.35),
                   0 2px  8px rgba(0,0,0,.15);
}

.auth-brand-title {
    color:         #ffffff;
    font-size:     22px;
    font-weight:   700;
    margin:        0 0 12px;
    letter-spacing: -0.3px;
}

.auth-brand-tagline {
    color:       rgba(199,210,254,.80);
    font-size:   14px;
    line-height: 1.75;
    margin:      0 auto 36px;
    max-width:   300px;
}

.auth-brand-features {
    list-style:    none;
    padding:       0;
    margin:        0;
    text-align:    left;
    display:       inline-flex;
    flex-direction: column;
    gap:           14px;
}

.auth-brand-features li {
    display:     flex;
    align-items: center;
    gap:         12px;
    color:       rgba(199,210,254,.88);
    font-size:   13.5px;
}

.auth-brand-features li i {
    width:           30px;
    height:          30px;
    background:      rgba(99,102,241,.30);
    border:          1px solid rgba(139,92,246,.35);
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    color:           #a5b4fc;
    flex-shrink:     0;
}

/* ── Right form panel ─────────────────────────────────────────────── */
.auth-form-panel {
    background:      #ffffff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         48px 40px;
}

.auth-form-box {
    width:     100%;
    max-width: 400px;
}

.auth-form-header {
    margin-bottom: 32px;
}

.auth-form-header h1 {
    font-size:      28px;
    font-weight:    700;
    color:          var(--text-primary);
    margin:         0 0 6px;
    letter-spacing: -0.5px;
}

.auth-form-header p {
    color:     var(--text-secondary);
    font-size: 14px;
    margin:    0;
}

/* Fields */
.auth-field {
    margin-bottom: 20px;
}

.auth-label {
    display:       block;
    font-size:     13px;
    font-weight:   600;
    color:         var(--text-primary);
    margin-bottom: 7px;
}

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

.auth-input-icon {
    position:  absolute;
    left:      14px;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--text-secondary);
    font-size: 16px;
    pointer-events: none;
}

.auth-input {
    display:       block;
    width:         100%;
    height:        48px;
    padding:       0 44px 0 42px;
    font-size:     14px;
    font-family:   inherit;
    color:         var(--text-primary);
    background:    #f9fafb;
    border:        1.5px solid var(--border-color);
    border-radius: 10px;
    outline:       none;
    transition:    border-color .2s, box-shadow .2s, background .2s;
}

.auth-input:focus {
    background:   #ffffff;
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(79,70,229,.12);
}

.auth-eye-btn {
    position:    absolute;
    right:       12px;
    top:         50%;
    transform:   translateY(-50%);
    background:  none;
    border:      none;
    padding:     4px 6px;
    cursor:      pointer;
    color:       var(--text-secondary);
    font-size:   16px;
    line-height: 1;
    transition:  color .15s;
}
.auth-eye-btn:hover { color: var(--text-primary); }

.auth-error {
    display:    block;
    font-size:  12px;
    color:      var(--danger);
    margin-top: 5px;
}

/* Options row (remember me) */
.auth-options {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   24px;
}

.auth-check {
    display:     flex;
    align-items: center;
    gap:         7px;
    font-size:   13px;
    color:       var(--text-secondary);
    cursor:      pointer;
    user-select: none;
}

.auth-check input[type="checkbox"] {
    width:         16px;
    height:        16px;
    accent-color:  var(--primary);
    cursor:        pointer;
    flex-shrink:   0;
}

/* Primary submit button */
.auth-btn-primary {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    height:          48px;
    background:      linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:           #ffffff;
    border:          none;
    border-radius:   10px;
    font-size:       15px;
    font-weight:     600;
    font-family:     inherit;
    cursor:          pointer;
    transition:      opacity .2s, transform .15s, box-shadow .2s;
    box-shadow:      0 4px 14px rgba(79,70,229,.35);
}
.auth-btn-primary:hover {
    opacity:    .93;
    transform:  translateY(-1px);
    box-shadow: 0 6px 20px rgba(79,70,229,.45);
}
.auth-btn-primary:active { transform: translateY(0); }

/* Divider */
.auth-divider {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      24px 0;
    color:       var(--text-secondary);
    font-size:   12px;
}
.auth-divider::before,
.auth-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--border-color);
}

/* Microsoft login button */
.auth-btn-ms {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    width:           100%;
    height:          48px;
    background:      #ffffff;
    color:           var(--text-primary);
    border:          1.5px solid var(--border-color);
    border-radius:   10px;
    font-size:       14px;
    font-weight:     500;
    text-decoration: none;
    transition:      border-color .2s, box-shadow .2s, background .2s;
}
.auth-btn-ms:hover {
    border-color: var(--primary);
    background:   var(--primary-light);
    color:        var(--primary);
    box-shadow:   0 2px 8px rgba(79,70,229,.12);
}

/* Footer help text */
.auth-help {
    text-align: center;
    font-size:  12px;
    color:      var(--text-secondary);
    margin:     20px 0 0;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-form-panel { padding: 40px 24px; min-height: 100vh; }
}

/* ── Legacy class kept for AccessDenied / other pages that use it ─── */
.login-page {
    min-height:      100vh;
    background:      linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4f46e5 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         20px;
}
.login-card {
    background:    #fff;
    border-radius: 20px;
    box-shadow:    var(--shadow-lg);
    width:         100%;
    max-width:     440px;
    overflow:      hidden;
}
.login-card-header { padding: 36px 40px 24px; text-align: center; }
.login-card-body   { padding: 0 40px 36px; }
.login-logo {
    width:56px; height:56px; background:var(--primary); border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:26px; margin:0 auto 16px;
}
.login-title   { font-size:22px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.login-subtitle{ font-size:13px; color:var(--text-secondary); margin:0; }
.login-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text-secondary); font-size:12px; }
.login-divider::before,.login-divider::after { content:''; flex:1; height:1px; background:var(--border-color); }

/* ── Access Denied ────────────────────────────────────────────────── */
.access-denied-page {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--body-bg);
}

/* ── Dashboard ────────────────────────────────────────────────────── */
.dashboard-welcome {
    font-size:   24px;
    font-weight: 700;
    color:       var(--text-primary);
}

.dashboard-welcome span {
    color: var(--primary);
}