/*
* password_css.css
* Styles for all password-related pages
* SADC Online M&E System — PHP 8.5
*
* Covers:
* pc-* — password_change.php (authenticated, in-app)
* reset-* — password_reset.php (standalone public page)
* fp-* — forgot_password.php (standalone public page)
*
* Usage (standalone public pages — full HTML, own body bg):
*
*
*
* Usage (authenticated in-app page):
*
*
*
*/
/* ═══════════════════════════════════════════════════════════════════════════
SHARED — STANDALONE PAGE SHELL
Used by forgot_password.php and password_reset.php
Provides the full-page blue gradient background and centred card layout
═══════════════════════════════════════════════════════════════════════════ */
.pw-page-body {
background: linear-gradient(135deg, #001C84 0%, #0028B8 60%, #001060 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Segoe UI', Arial, sans-serif;
padding: 20px;
}
/* Shared card shell for standalone pages */
.pw-card {
background: #FFFFFF;
border-radius: 12px;
width: 100%;
max-width: 460px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
overflow: hidden;
}
.pw-card--narrow { max-width: 440px; }
.pw-card__header {
background: #001C84;
padding: 28px 32px;
border-bottom: 4px solid #FFD700;
text-align: center;
}
.pw-card__logo {
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.pw-card__sub {
color: rgba(255, 255, 255, .6);
font-size: 12px;
margin-top:4px;
}
.pw-card__body { padding: 32px; }
/* Shared field style inside standalone cards */
.pw-field { margin-bottom: 20px; }
.pw-field label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: #4A5080;
margin-bottom: 6px;
}
.pw-field input {
width: 100%;
padding: 11px 14px;
border: 1.5px solid #D0D5E8;
border-radius: 6px;
font-size: 14px;
color: #0D1240;
transition: border-color .18s, box-shadow .18s;
box-sizing: border-box;
}
.pw-field input:focus {
outline: none;
border-color: #001C84;
box-shadow: 0 0 0 3px rgba(0, 28, 132, .12);
}
/* Shared full-width button */
.pw-btn {
width: 100%;
padding: 13px;
background: #001C84;
color: #FFFFFF;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
border-bottom: 3px solid #FFD700;
transition: opacity .18s;
margin-top: 8px;
display: block;
text-align: center;
text-decoration: none;
}
.pw-btn:hover { opacity: .88; }
.pw-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Shared title + subtitle */
.pw-title {
font-size: 22px;
font-weight: 700;
color: #001C84;
margin: 0 0 6px;
}
.pw-subtitle {
font-size: 13px;
color: #8890B0;
margin: 0 0 24px;
line-height: 1.6;
}
/* Back link */
.pw-back {
display: block;
text-align: center;
margin-top: 18px;
font-size: 13px;
color: #8890B0;
text-decoration: none;
transition: color .15s;
}
.pw-back:hover { color: #001C84; }
/* Success icon */
.pw-success-icon { text-align:center; font-size:56px; color:#00B551; margin-bottom:12px; }
.pw-error-icon { text-align:center; font-size:48px; color:#DC2626; margin-bottom:12px; }
/* Info / notice boxes inside standalone cards */
.pw-notice {
background: #F0F9F4;
border-left: 3px solid #00B551;
border-radius: 4px;
padding: 12px 14px;
font-size: 13px;
color: #1A6B3A;
line-height: 1.6;
margin-bottom: 20px;
}
.pw-notice--blue {
background: #E8EBF8;
border-color:#001C84;
color: #001C84;
}
.pw-notice--warning {
background: #FFF8DC;
border-color:#FFD700;
color: #92400E;
}
/* Strength bar (password_reset.php) */
.pw-strength-bar {
height: 5px;
border-radius: 3px;
background: #E8EBF8;
margin-top: 6px;
overflow: hidden;
}
.pw-strength-fill { height:100%; border-radius:3px; transition: width .3s, background .3s; }
.pw-strength-label { font-size:11px; color:#8890B0; margin-top:4px; }
.pw-match-label { font-size:11px; margin-top:4px; }
/* ═══════════════════════════════════════════════════════════════════════════
FORGOT PASSWORD (forgot_password.php — fp-* classes)
═══════════════════════════════════════════════════════════════════════════ */
.fp-card { background:#FFFFFF; border-radius:12px; width:100%; max-width:440px;
box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; }
.fp-card__header { background:#001C84; padding:28px 32px; border-bottom:4px solid #FFD700;
text-align:center; }
.fp-card__logo { color:#FFFFFF; font-size:20px; font-weight:700; letter-spacing:1px; }
.fp-card__body { padding: 32px; }
.fp-card__title { font-size:22px; font-weight:700; color:#001C84; margin:0 0 8px; }
.fp-card__sub { font-size:13px; color:#8890B0; margin:0 0 24px; line-height:1.6; }
.fp-field { margin-bottom: 20px; }
.fp-field label { display:block; font-size:11px; font-weight:700; letter-spacing:.5px;
text-transform:uppercase; color:#4A5080; margin-bottom:6px; }
.fp-field input { width:100%; padding:11px 14px; border:1.5px solid #D0D5E8;
border-radius:6px; font-size:14px; color:#0D1240;
transition:border-color .18s, box-shadow .18s; box-sizing:border-box; }
.fp-field input:focus { outline:none; border-color:#001C84;
box-shadow:0 0 0 3px rgba(0,28,132,.12); }
.fp-btn { width:100%; padding:13px; background:#001C84; color:#FFFFFF; border:none;
border-radius:6px; font-size:15px; font-weight:700; cursor:pointer;
border-bottom:3px solid #FFD700; transition:opacity .18s; }
.fp-btn:hover { opacity: .88; }
.fp-btn:disabled { opacity: .5; cursor:not-allowed; }
.fp-back { display:block; text-align:center; margin-top:18px; font-size:13px;
color:#8890B0; text-decoration:none; transition:color .15s; }
.fp-back:hover { color: #001C84; }
.fp-success-icon { text-align:center; font-size:52px; color:#00B551; margin-bottom:12px; }
.fp-notice { background:#F0F9F4; border-left:3px solid #00B551; border-radius:4px;
padding:12px 14px; font-size:13px; color:#1A6B3A; line-height:1.6;
margin-bottom:20px; }
.fp-ldap-note { background:#E8EBF8; border-left:3px solid #001C84; border-radius:4px;
padding:10px 14px; font-size:12px; color:#001C84;
margin-top:16px; line-height:1.6; }
/* ═══════════════════════════════════════════════════════════════════════════
PASSWORD RESET (password_reset.php — reset-* classes)
═══════════════════════════════════════════════════════════════════════════ */
.reset-card { background:#FFFFFF; border-radius:12px; width:100%; max-width:460px;
box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; }
.reset-card__header { background:#001C84; padding:28px 32px; border-bottom:4px solid #FFD700;
text-align:center; }
.reset-card__logo { color:#FFFFFF; font-size:20px; font-weight:700; letter-spacing:1px; }
.reset-card__body { padding: 32px; }
.reset-card__title { font-size:22px; font-weight:700; color:#001C84; margin:0 0 6px; }
.reset-card__sub { font-size:13px; color:#8890B0; margin:0 0 24px; }
.reset-field { margin-bottom: 18px; }
.reset-field label { display:block; font-size:11px; font-weight:700; letter-spacing:.5px;
text-transform:uppercase; color:#4A5080; margin-bottom:6px; }
.reset-field input { width:100%; padding:11px 14px; border:1.5px solid #D0D5E8;
border-radius:6px; font-size:14px; color:#0D1240;
transition:border-color .18s, box-shadow .18s; box-sizing:border-box; }
.reset-field input:focus { outline:none; border-color:#001C84;
box-shadow:0 0 0 3px rgba(0,28,132,.12); }
.reset-btn { width:100%; padding:13px; background:#001C84; color:#FFFFFF; border:none;
border-radius:6px; font-size:15px; font-weight:700; cursor:pointer;
border-bottom:3px solid #FFD700; transition:opacity .18s; margin-top:8px; }
.reset-btn:hover { opacity: .88; }
.strength-bar { height:5px; border-radius:3px; background:#E8EBF8;
margin-top:6px; overflow:hidden; }
.strength-fill { height:100%; border-radius:3px; transition:width .3s, background .3s; }
.strength-label { font-size:11px; color:#8890B0; margin-top:4px; }
.success-icon { text-align:center; font-size:56px; color:#00B551; margin-bottom:12px; }
.match-indicator { font-size:11px; margin-top:4px; }
/* ═══════════════════════════════════════════════════════════════════════════
PASSWORD CHANGE (password_change.php — pc-* classes)
In-app authenticated page, no full body background — uses profile layout
═══════════════════════════════════════════════════════════════════════════ */
/* Centred wrapper inside authenticated layout */
.pc-wrapper {
max-width: 560px;
margin: 0 auto;
padding: 0 8px 40px;
}
/* Card */
.pc-card {
background: #FFFFFF !important;
border: 1px solid #D8DCF0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 6px rgba(0, 0, 0, .09);
}
.pc-card__header {
background: #001C84 !important;
color: #FFFFFF !important;
padding: 14px 22px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
border-bottom: 3px solid #FFD700;
display: flex;
align-items: center;
gap: 8px;
}
.pc-card__body { padding: 24px !important; background: #FFFFFF !important; }
/* Field spacing */
.pc-field { margin-bottom: 18px !important; }
/* Input wrapper with eye toggle */
.pc-input-wrap {
position: relative;
display: flex;
}
.pc-input-wrap .sadc-field__input {
padding-right: 42px !important;
flex: 1;
}
.pc-eye {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 40px;
background: transparent;
border: none;
cursor: pointer;
color: #6B7280;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: color .15s;
border-radius: 0 6px 6px 0;
}
.pc-eye:hover { color: #001C84; }
/* Strength bar */
.pc-strength-bar {
height: 5px;
background: #E5E7EB;
border-radius: 3px;
margin-top: 6px;
overflow: hidden;
}
.pc-strength-fill {
height: 100%;
border-radius: 3px;
width: 0;
transition: width .3s, background .3s;
}
.pc-strength-label {
font-size: 11px;
margin-top: 3px;
font-weight:600;
min-height: 16px;
}
/* Match indicator */
.pc-match-indicator {
font-size: 11px;
margin-top: 4px;
font-weight:600;
min-height: 16px;
}
/* Visual separator between current and new password */
.pc-divider {
border: none;
border-top: 2px dashed #E5E7EB;
margin: 20px 0;
}
/* Requirements checklist */
.pc-requirements {
background: #F8F9FC;
border: 1px solid #E5E7EB;
border-radius: 6px;
padding: 14px 16px;
margin-top: 4px;
}
.pc-requirements__title {
font-size: 11px;
font-weight: 700;
color: #374151;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.pc-req-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.pc-req {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
transition: color .2s;
}
.pc-req i { font-size:13px; flex-shrink:0; }
.pc-req--pass { color: #166534; }
.pc-req--pass i { color: #00B551; }
.pc-req--fail { color: #DC2626; }
.pc-req--fail i { color: #DC2626; }
.pc-req--neutral { color: #6B7280; }
.pc-req--neutral i { color: #9CA3AF; }
/* ═══════════════════════════════════════════════════════════════════════════
LOGIN PAGE (login.php — lgn-* classes)
Standalone public page — full-page gradient background, centred card
═══════════════════════════════════════════════════════════════════════════ */
/* Page shell */
.lgn-body {
background: linear-gradient(150deg, #E8EBF8 0%, #D4DCF5 60%, #C8D2EE 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Segoe UI', Arial, sans-serif;
padding: 20px;
}
/* SADC logo / branding above card */
.lgn-brand {
text-align: center;
margin-bottom: 24px;
}
.lgn-brand__logo { width:160px; margin-bottom:10px; }
.lgn-brand__title {
color: #001C84;
font-size: 13px;
font-weight: bolder;
letter-spacing: 1.5px;
text-transform: uppercase;
opacity: .85;
}
.lgn-brand__env {
display: inline-block;
margin-top: 6px;
padding: 3px 12px;
background: #FFBF00;
border: 1px solid rgba(255, 215, 0, .5);
border-radius: 999px;
color: #001C84;
font-size: 10px;
font-weight: bolder;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* Main card */
.lgn-card {
background: #FFFFFF;
border-radius: 14px;
width: 100%;
max-width: 420px;
box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
overflow: hidden;
}
/* Card top bar */
.lgn-card__bar {
height: 4px;
background: linear-gradient(90deg, #001C84 0%, #FFD700 50%, #00B551 100%);
}
/* Card body */
.lgn-card__body { padding: 36px 36px 28px; }
.lgn-card__title {
font-size: 22px;
font-weight: 700;
color: #001C84;
margin: 0 0 4px;
}
.lgn-card__sub {
font-size: 13px;
color: #8890B0;
margin: 0 0 28px;
}
/* Alert messages */
.lgn-alert {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border-radius: 7px;
font-size: 13px;
margin-bottom: 20px;
line-height: 1.5;
border: 1px solid transparent;
}
.lgn-alert i { font-size:16px; flex-shrink:0; margin-top:1px; }
.lgn-alert--danger {
background: #FEF2F2;
border-color: #FECACA;
color: #991B1B;
}
.lgn-alert--danger i { color: #DC2626; }
.lgn-alert--warning {
background: #FFFBEB;
border-color: #FDE68A;
color: #92400E;
}
.lgn-alert--warning i { color: #F59E0B; }
.lgn-alert--success {
background: #F0FDF4;
border-color: #BBF7D0;
color: #166534;
}
.lgn-alert--success i { color: #22C55E; }
.lgn-alert--info {
background: #EFF6FF;
border-color: #BFDBFE;
color: #1E40AF;
}
.lgn-alert--info i { color: #3B82F6; }
/* Field */
.lgn-field { margin-bottom: 18px; }
.lgn-field__label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
color: #374151;
margin-bottom: 7px;
}
.lgn-field__input-wrap {
position: relative;
display: flex;
}
.lgn-field__icon {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
font-size: 14px;
pointer-events: none;
transition: color .18s;
}
.lgn-field__input {
width: 100%;
padding: 11px 14px 11px 40px;
border: 1.5px solid #D1D5DB;
border-radius: 7px;
font-size: 14px;
color: #111827;
background: #FAFAFA;
transition: border-color .18s, box-shadow .18s, background .18s;
box-sizing: border-box;
outline: none;
}
.lgn-field__input:focus {
border-color: #001C84;
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(0, 28, 132, .12);
}
.lgn-field__input:focus + .lgn-field__icon,
.lgn-field__input-wrap:focus-within .lgn-field__icon {
color: #001C84;
}
/* Eye toggle for password field */
.lgn-eye {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 40px;
background: transparent;
border: none;
cursor: pointer;
color: #9CA3AF;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: color .15s;
border-radius: 0 7px 7px 0;
}
.lgn-eye:hover { color: #001C84; }
/* Remember me row */
.lgn-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
flex-wrap: wrap;
gap: 8px;
}
.lgn-remember {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #6B7280;
cursor: pointer;
}
.lgn-remember input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color:#001C84;
cursor: pointer;
}
.lgn-forgot {
font-size: 13px;
color: #6B7280;
text-decoration: none;
transition: color .15s;
}
.lgn-forgot:hover { color: #001C84; text-decoration: underline; }
/* Submit button */
.lgn-btn {
width: 100%;
padding: 13px;
background: #001C84;
color: #FFFFFF;
border: none;
border-radius: 7px;
font-size: 15px;
font-weight: 700;
letter-spacing:.5px;
cursor: pointer;
border-bottom: 3px solid #FFD700;
transition: opacity .18s, transform .12s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.lgn-btn:hover { opacity: .9; transform: translateY(-1px); }
.lgn-btn:active { transform: translateY(0); }
.lgn-btn__spin { display:none; }
.lgn-btn.loading .lgn-btn__text { display:none; }
.lgn-btn.loading .lgn-btn__spin { display:inline-block; }
/* Card footer */
.lgn-card__footer {
padding: 14px 36px 20px;
border-top: 1px solid #F3F4F6;
text-align: center;
font-size: 11px;
color: #9CA3AF;
}
/* Flags / page footer */
.lgn-page-footer {
margin-top: 24px;
text-align: center;
}
.lgn-page-footer img { width:340px; max-width:90vw; border-radius:6px; }
.lgn-page-footer__copy {
color: #001C84;
font-size: 11px;
margin-top: 10px;
font-weight: bolder;
letter-spacing: .5px;
}