/* ==========================================================================
   OIC Statements — Auth pages (Login & Register)
   Uses brand tokens from tokens.css. Standalone full-page layout.
   RTL-first (Arabic default). LTR via html[dir="ltr"].
   ========================================================================== */

/* ---- Page shell ---- */
.oic-auth-page {
  min-height: 100dvh;
  background: var(--oic-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--oic-sp-5) var(--oic-sp-4);
  font-family: var(--oic-font-ar);
  direction: rtl;
}

html[dir="ltr"] .oic-auth-page { direction: ltr; font-family: var(--oic-font-latin); }

/* ---- Card ---- */
.oic-auth-card {
  background: var(--oic-surface);
  border: 1px solid var(--oic-border);
  border-radius: var(--oic-radius-lg);
  box-shadow: var(--oic-shadow-lg);
  width: 100%;
  max-width: 440px;
  padding: var(--oic-sp-7) var(--oic-sp-6);
}

/* ---- Header ---- */
.oic-auth-header {
  text-align: center;
  margin-bottom: var(--oic-sp-6);
}

.oic-auth-logo {
  display: inline-block;
  font-size: var(--oic-fs-2xl);
  font-weight: 800;
  color: var(--oic-primary);
  text-decoration: none;
  line-height: 1.2;
  margin-bottom: var(--oic-sp-2);
}

.oic-auth-logo:hover { color: var(--oic-primary-600); }

.oic-auth-header h1 {
  font-size: var(--oic-fs-xl);
  font-weight: 700;
  color: var(--oic-heading);
  margin: 0 0 var(--oic-sp-1);
}

.oic-auth-header p {
  font-size: var(--oic-fs-sm);
  color: var(--oic-text-muted);
  margin: 0;
}

/* ---- Notice (error / success) ---- */
.oic-auth-notice {
  border-radius: var(--oic-radius-sm);
  padding: var(--oic-sp-3) var(--oic-sp-4);
  font-size: var(--oic-fs-sm);
  margin-bottom: var(--oic-sp-5);
  display: flex;
  align-items: flex-start;
  gap: var(--oic-sp-2);
}

.oic-auth-notice--error {
  background: #fdf2f2;
  border: 1px solid #f5c6c6;
  color: var(--oic-danger);
}

.oic-auth-notice--success {
  background: #f0faf4;
  border: 1px solid #b8e0c8;
  color: var(--oic-success);
}

/* ---- Form ---- */
.oic-auth-form { display: flex; flex-direction: column; gap: var(--oic-sp-4); }

.oic-auth-field { display: flex; flex-direction: column; gap: var(--oic-sp-2); }

.oic-auth-label {
  font-size: var(--oic-fs-sm);
  font-weight: 600;
  color: var(--oic-text);
}

.oic-auth-input {
  width: 100%;
  padding: 0.65rem var(--oic-sp-4);
  border: 1.5px solid var(--oic-border);
  border-radius: var(--oic-radius);
  background: var(--oic-surface);
  font-family: inherit;
  font-size: var(--oic-fs-base);
  color: var(--oic-text);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  direction: inherit;
}

.oic-auth-input:focus {
  border-color: var(--oic-primary);
  box-shadow: 0 0 0 3px rgba(14, 124, 107, 0.14);
}

.oic-auth-input::placeholder { color: var(--oic-text-muted); }

/* ---- Remember / helpers row ---- */
.oic-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oic-sp-3);
  flex-wrap: wrap;
}

.oic-auth-check {
  display: flex;
  align-items: center;
  gap: var(--oic-sp-2);
  font-size: var(--oic-fs-sm);
  color: var(--oic-text-muted);
  cursor: pointer;
}

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

.oic-auth-link {
  font-size: var(--oic-fs-sm);
  color: var(--oic-primary);
  text-decoration: none;
}
.oic-auth-link:hover { text-decoration: underline; }

/* ---- Submit button ---- */
.oic-auth-submit {
  width: 100%;
  padding: 0.8rem var(--oic-sp-5);
  background: var(--oic-primary);
  color: #fff;
  border: none;
  border-radius: var(--oic-radius-pill);
  font-family: inherit;
  font-size: var(--oic-fs-base);
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .12s;
}
.oic-auth-submit:hover  { background: var(--oic-primary-600); }
.oic-auth-submit:active { transform: scale(.98); }

/* ---- Divider ---- */
.oic-auth-divider {
  text-align: center;
  font-size: var(--oic-fs-sm);
  color: var(--oic-text-muted);
  margin-top: var(--oic-sp-5);
}

/* ---- Password strength indicator ---- */
.oic-auth-strength {
  height: 4px;
  border-radius: 2px;
  background: var(--oic-border);
  margin-top: var(--oic-sp-1);
  overflow: hidden;
}
.oic-auth-strength__bar {
  height: 100%;
  width: 0;
  transition: width .25s, background .25s;
  border-radius: 2px;
}

/* ---- Dark theme ---- */
[data-theme="dark"] .oic-auth-page   { background: var(--oic-bg); }
[data-theme="dark"] .oic-auth-card   { background: var(--oic-surface); border-color: var(--oic-border); }
[data-theme="dark"] .oic-auth-input  { background: var(--oic-surface-2); border-color: var(--oic-border); color: var(--oic-text); }
[data-theme="dark"] .oic-auth-notice--error  { background: #2c1a1a; border-color: #6b2222; }
[data-theme="dark"] .oic-auth-notice--success { background: #1a2c22; border-color: #22602e; }