/**
 * lte_ChangePassword.css — Change Password Page
 * ════════════════════════════════════════════════════════════════════════════
 * SaaS-grade design — inherits tokens from lte_User.css :root
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ═════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS  (mirrors / extends lte_User.css :root)
   ═════════════════════════════════════════════════════════════════════════════ */
:root {
  --cp-accent         : #2563eb;
  --cp-accent-dark    : #1d4ed8;
  --cp-accent-lt      : #eff6ff;
  --cp-accent-bd      : #bfdbfe;

  --cp-success        : #16a34a;
  --cp-success-bg     : #dcfce7;
  --cp-success-fg     : #166534;

  --cp-danger         : #dc2626;
  --cp-danger-bg      : #fee2e2;
  --cp-danger-fg      : #991b1b;

  --cp-warn           : #d97706;
  --cp-warn-bg        : #fef3c7;
  --cp-warn-fg        : #92400e;

  --cp-text           : #0f172a;
  --cp-text-soft      : #475569;
  --cp-text-muted     : #94a3b8;

  --cp-bg             : #f8fafc;
  --cp-surface        : #ffffff;
  --cp-border         : #e2e8f0;
  --cp-border-strong  : #cbd5e1;

  --cp-radius         : .5rem;
  --cp-radius-lg      : .75rem;
  --cp-radius-xl      : 1rem;

  --cp-shadow         : 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --cp-shadow-md      : 0 4px 6px rgba(15,23,42,.05), 0 10px 15px rgba(15,23,42,.08);
  --cp-shadow-focus   : 0 0 0 .2rem rgba(37,99,235,.18);

  --cp-trans          : .18s ease-in-out;
}

/* dark-mode overrides */
body.dark-mode {
  --cp-bg         : #0f172a;
  --cp-surface    : #1e293b;
  --cp-border     : #334155;
  --cp-border-strong: #475569;
  --cp-text       : #f1f5f9;
  --cp-text-soft  : #94a3b8;
  --cp-text-muted : #475569;
  --cp-accent-lt  : #1e3a5f;
}


/* ═════════════════════════════════════════════════════════════════════════════
   PAGE LAYOUT
   ═════════════════════════════════════════════════════════════════════════════ */

.cp-wrapper {
  min-height   : 100%;
  background   : var(--cp-bg);
  padding-bottom: 3rem;
}

/* centred single-column layout */
.cp-layout {
  max-width : 520px;
  margin    : 0 auto;
  padding   : 2rem 1rem;
}


/* ═════════════════════════════════════════════════════════════════════════════
   CARD
   ═════════════════════════════════════════════════════════════════════════════ */

.cp-card {
  background    : var(--cp-surface);
  border        : 1px solid var(--cp-border);
  border-radius : var(--cp-radius-xl);
  box-shadow    : var(--cp-shadow-md);
  overflow      : hidden;
}

/* ── header ── */
.cp-card__head {
  padding    : 1.5rem 1.75rem 1.25rem;
  background : linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  position   : relative;
  overflow   : hidden;
}

/* decorative circle behind text */
.cp-card__head::before {
  content       : '';
  position      : absolute;
  top           : -40px;
  right         : -40px;
  width         : 140px;
  height        : 140px;
  border-radius : 50%;
  background    : rgba(255,255,255,.08);
  pointer-events: none;
}
.cp-card__head::after {
  content       : '';
  position      : absolute;
  bottom        : -50px;
  left          : 30%;
  width         : 100px;
  height        : 100px;
  border-radius : 50%;
  background    : rgba(255,255,255,.05);
  pointer-events: none;
}

.cp-card__icon {
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  width            : 44px;
  height           : 44px;
  border-radius    : var(--cp-radius-lg);
  background       : rgba(255,255,255,.18);
  color            : #fff;
  font-size        : 1.25rem;
  margin-bottom    : .85rem;
  backdrop-filter  : blur(4px);
}

.cp-card__title {
  margin      : 0 0 .25rem;
  font-size   : 1.25rem;
  font-weight : 700;
  color       : #ffffff;
  line-height : 1.3;
}

.cp-card__subtitle {
  margin      : 0;
  font-size   : .82rem;
  color       : rgba(255,255,255,.75);
  font-weight : 400;
}

/* ── body ── */
.cp-card__body {
  padding: 1.75rem;
}

/* ── footer ── */
.cp-card__foot {
  padding       : 1rem 1.75rem;
  background    : var(--cp-bg);
  border-top    : 1px solid var(--cp-border);
  display       : flex;
  gap           : .65rem;
  align-items   : center;
}


/* ═════════════════════════════════════════════════════════════════════════════
   FORM FIELDS
   ═════════════════════════════════════════════════════════════════════════════ */

.cp-field-group {
  margin-bottom: 1.25rem;
}

.cp-label {
  display     : block;
  font-size   : .8rem;
  font-weight : 600;
  color       : var(--cp-text-soft);
  margin-bottom: .45rem;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* editable-field already defined in lte_User.css;
   here we extend it for the change-password context */
.cp-input-wrap {
  position: relative;
  display : flex;
}

.cp-input-wrap .editable-field {
  flex          : 1;
  font-size     : .9rem;
  padding       : .6rem .9rem;
  border        : 1.5px solid var(--cp-border);
  border-radius : var(--cp-radius) 0 0 var(--cp-radius);
  background    : var(--cp-surface);
  color         : var(--cp-text);
  transition    : border-color var(--cp-trans), box-shadow var(--cp-trans), background var(--cp-trans);
  outline       : none;
  width         : 100%;
}

.cp-input-wrap .editable-field:focus {
  border-color : var(--cp-accent);
  box-shadow   : var(--cp-shadow-focus);
  background   : var(--cp-surface);
  z-index      : 2;
}

/* valid / invalid states on editable-field */
.cp-input-wrap .editable-field.is-valid {
  border-color : var(--cp-success);
}
.cp-input-wrap .editable-field.is-valid:focus {
  box-shadow: 0 0 0 .2rem rgba(22,163,74,.18);
}
.cp-input-wrap .editable-field.is-invalid {
  border-color : var(--cp-danger);
}
.cp-input-wrap .editable-field.is-invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(220,38,38,.18);
}

/* password show/hide button */
.cp-toggle-btn {
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  width            : 44px;
  flex-shrink      : 0;
  border           : 1.5px solid var(--cp-border);
  border-left      : none;
  border-radius    : 0 var(--cp-radius) var(--cp-radius) 0;
  background       : var(--cp-bg);
  color            : var(--cp-text-muted);
  cursor           : pointer;
  transition       : color var(--cp-trans), background var(--cp-trans), border-color var(--cp-trans);
  font-size        : .9rem;
  outline          : none;
}

.cp-toggle-btn:hover {
  color       : var(--cp-accent);
  background  : var(--cp-accent-lt);
  border-color: var(--cp-accent-bd);
}

.cp-toggle-btn:focus-visible {
  outline     : 2px solid var(--cp-accent);
  outline-offset: -2px;
}

/* keep toggle border in sync when input is focused */
.cp-input-wrap:focus-within .cp-toggle-btn {
  border-color : var(--cp-accent);
}
.cp-input-wrap:focus-within .editable-field.is-invalid ~ .cp-toggle-btn,
.cp-input-wrap .editable-field.is-invalid ~ .cp-toggle-btn {
  border-color: var(--cp-danger);
}
.cp-input-wrap:focus-within .editable-field.is-valid ~ .cp-toggle-btn,
.cp-input-wrap .editable-field.is-valid ~ .cp-toggle-btn {
  border-color: var(--cp-success);
}


/* ═════════════════════════════════════════════════════════════════════════════
   STRENGTH METER
   ═════════════════════════════════════════════════════════════════════════════ */

.cp-strength {
  margin-top : .55rem;
  display    : none;           /* shown by JS */
}

.cp-strength.is-visible {
  display: block;
}

.cp-strength__track {
  height        : 5px;
  background    : var(--cp-border);
  border-radius : 999px;
  overflow      : hidden;
}

.cp-strength__fill {
  height        : 100%;
  border-radius : 999px;
  width         : 0%;
  transition    : width .35s ease, background-color .35s ease;
}

.cp-strength__fill--weak    { background: #ef4444; }
.cp-strength__fill--fair    { background: #f59e0b; }
.cp-strength__fill--good    { background: #3b82f6; }
.cp-strength__fill--strong  { background: #10b981; }
.cp-strength__fill--best    { background: #059669; }

.cp-strength__meta {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-top     : .3rem;
}

.cp-strength__label {
  font-size  : .75rem;
  font-weight: 600;
  color      : var(--cp-text-soft);
  transition : color .25s;
}

.cp-strength__hint {
  font-size: .72rem;
  color    : var(--cp-text-muted);
}


/* ═════════════════════════════════════════════════════════════════════════════
   MATCH FEEDBACK
   ═════════════════════════════════════════════════════════════════════════════ */

.cp-match {
  font-size  : .75rem;
  font-weight: 600;
  margin-top : .35rem;
  display    : none;
}
.cp-match.is-visible { display: block; }
.cp-match--ok  { color: var(--cp-success); }
.cp-match--bad { color: var(--cp-danger); }


/* ═════════════════════════════════════════════════════════════════════════════
   REQUIREMENTS CHECKLIST
   ═════════════════════════════════════════════════════════════════════════════ */

.cp-requirements {
  margin-top   : .75rem;
  padding      : .75rem 1rem;
  background   : var(--cp-bg);
  border       : 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  display      : none;
}

.cp-requirements.is-visible { display: block; }

.cp-req-title {
  font-size   : .72rem;
  font-weight : 700;
  color       : var(--cp-text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}

.cp-req-list {
  list-style : none;
  padding    : 0;
  margin     : 0;
  display    : grid;
  grid-template-columns: 1fr 1fr;
  gap        : .25rem .5rem;
}

.cp-req-item {
  display    : flex;
  align-items: center;
  gap        : .35rem;
  font-size  : .75rem;
  color      : var(--cp-text-muted);
  transition : color var(--cp-trans);
}

.cp-req-item i {
  font-size : .65rem;
  width     : 14px;
  text-align: center;
  transition: color var(--cp-trans);
}

.cp-req-item--pass {
  color: var(--cp-success);
}
.cp-req-item--pass i {
  color: var(--cp-success);
}


/* ═════════════════════════════════════════════════════════════════════════════
   ALERT BANNER
   ═════════════════════════════════════════════════════════════════════════════ */

.cp-alert {
  display       : none;
  padding       : .8rem 1rem;
  border-radius : var(--cp-radius);
  font-size     : .85rem;
  font-weight   : 500;
  margin-bottom : 1.25rem;
  border        : 1px solid transparent;
  animation     : cp-fade-in .2s ease;
}

.cp-alert.is-visible { display: flex; align-items: flex-start; gap: .6rem; }

.cp-alert--success {
  background  : var(--cp-success-bg);
  border-color: #bbf7d0;
  color       : var(--cp-success-fg);
}

.cp-alert--danger {
  background  : var(--cp-danger-bg);
  border-color: #fecaca;
  color       : var(--cp-danger-fg);
}

@keyframes cp-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}


/* ═════════════════════════════════════════════════════════════════════════════
   SUBMIT BUTTON
   ═════════════════════════════════════════════════════════════════════════════ */

.cp-btn-save {
  display         : inline-flex;
  align-items     : center;
  gap             : .45rem;
  padding         : .6rem 1.4rem;
  background      : linear-gradient(135deg, #1d4ed8, #2563eb);
  border          : none;
  border-radius   : var(--cp-radius);
  color           : #fff;
  font-size       : .875rem;
  font-weight     : 600;
  cursor          : pointer;
  transition      : all var(--cp-trans);
  box-shadow      : 0 1px 3px rgba(37,99,235,.35);
}

.cp-btn-save:hover:not(:disabled) {
  background  : linear-gradient(135deg, #1e40af, #1d4ed8);
  box-shadow  : 0 4px 12px rgba(37,99,235,.4);
  transform   : translateY(-1px);
}

.cp-btn-save:disabled {
  opacity : .65;
  cursor  : not-allowed;
  transform: none;
}

.cp-btn-cancel {
  display         : inline-flex;
  align-items     : center;
  gap             : .4rem;
  padding         : .6rem 1.1rem;
  background      : transparent;
  border          : 1.5px solid var(--cp-border-strong);
  border-radius   : var(--cp-radius);
  color           : var(--cp-text-soft);
  font-size       : .875rem;
  font-weight     : 500;
  cursor          : pointer;
  text-decoration : none;
  transition      : all var(--cp-trans);
}

.cp-btn-cancel:hover {
  background   : var(--cp-bg);
  border-color : var(--cp-accent);
  color        : var(--cp-accent);
}


/* ═════════════════════════════════════════════════════════════════════════════
   INFO BADGE (session info strip)
   ═════════════════════════════════════════════════════════════════════════════ */

.cp-info-strip {
  display       : flex;
  align-items   : center;
  gap           : .5rem;
  padding       : .65rem 1rem;
  background    : var(--cp-accent-lt);
  border        : 1px solid var(--cp-accent-bd);
  border-radius : var(--cp-radius);
  font-size     : .8rem;
  color         : #1e40af;
  margin-bottom : 1.25rem;
}

.cp-info-strip i {
  color      : var(--cp-accent);
  flex-shrink: 0;
}

body.dark-mode .cp-info-strip {
  background   : rgba(37,99,235,.12);
  border-color : rgba(37,99,235,.3);
  color        : #93c5fd;
}
body.dark-mode .cp-info-strip i { color: #93c5fd; }


/* ═════════════════════════════════════════════════════════════════════════════
   DIVIDER
   ═════════════════════════════════════════════════════════════════════════════ */

.cp-divider {
  border     : none;
  border-top : 1px solid var(--cp-border);
  margin     : 1.5rem 0;
}


/* ═════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
  .cp-layout          { padding: 1rem .5rem; }
  .cp-card__head      { padding: 1.25rem 1.25rem 1rem; }
  .cp-card__body      { padding: 1.25rem; }
  .cp-card__foot      { padding: .85rem 1.25rem; flex-wrap: wrap; }
  .cp-req-list        { grid-template-columns: 1fr; }
}