/* =========================
   AUTH UI (Login/Register/Forgot/Reset)
   Full CSS - centered card + soft shadow + orange gradient button
   Balanced typography (no XXL) + refined header icons
   ========================= */

:root{
  --auth-bg: #f3f6fb;
  --card-bg: #ffffff;

  --text: #0f172a;
  --muted: #64748b;
  --line: #e7edf5;

  --accent-1: #ff7a18;
  --accent-2: #ff9a44;

  --input-bg: #ffffff;
  --input-border: #e5e7eb;
  --input-border-hover: #d6dde8;

  --soft-bg: #f3f4f6;
  --soft-bg-hover: #eceff3;

  --shadow: 0 24px 60px rgba(15, 23, 42, .08);
  --shadow-2: 0 10px 30px rgba(15, 23, 42, .06);

  --radius-card: 34px;
  --radius-input: 14px;
  --radius-pill: 999px;

  --focus: 0 0 0 .25rem rgba(255, 122, 24, .18);

  /* Balanced scale (no XXL) */
  --auth-h1: 34px;
  --auth-h1-sm: 28px;

  --auth-title: 28px;
  --auth-title-sm: 24px;

  --auth-lead: 15px;
  --auth-label: 15px;
  --auth-input: 15px;

  --auth-input-h: 48px;
  --auth-icon-box: 44px;
  --auth-btn-h: 52px;
}

/* Page base */
html, body { height: 100%; }
body{
  background: var(--auth-bg);
  color: var(--text);
  min-height: 100vh;
  margin: 0;
}

/* Center shell (use this wrapper if موجود) */
.auth-shell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}

/* If Bootstrap containers are used: keep centered */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
  display: flex;
  justify-content: center;
}

/* Avoid grid pushing left */
.row{ justify-content: center !important; }
.col, [class*="col-"]{ max-width: 100%; }

/* Card */
.auth-card{
  width: 100% !important;
  max-width: 560px !important;
  margin: 20px auto !important;

  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 34px 34px 26px;
  position: relative;
  overflow: hidden;
  transition: .18s ease;
}

/* Inner border like screenshot */
.auth-card::before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: calc(var(--radius-card) - 12px);
  border: 1px solid rgba(231, 237, 245, .95);
  pointer-events:none;
}

/* Mobile */
@media (max-width: 576px){
  .auth-shell{ padding: 18px 12px; }
  .auth-card{
    max-width: 100% !important;
    border-radius: 28px;
    padding: 26px 18px 20px;
  }
  .auth-card::before{
    inset: 10px;
    border-radius: 22px;
  }
}

/* Small orange square badge (optional if موجود) */
.auth-badge{
  width: 14px;
  height: 14px;
  background: var(--accent-1);
  border-radius: 5px;
  margin: 0 auto 14px;
  box-shadow: 0 10px 18px rgba(255, 122, 24, .18);
}

/* Top title (Trainee Portal style if موجود) */
.auth-title{
  text-align:center;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  font-size: var(--auth-title);
}
@media (max-width:576px){
  .auth-title{ font-size: var(--auth-title-sm); }
}

.auth-lead{
  text-align:center;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 auto 14px;
  max-width: 520px;
  font-size: var(--auth-lead);
}

/* Switch row */
.auth-switch{
  text-align:center;
  margin: 10px 0 12px;
  font-size: 16px;
}
.auth-switch a{
  text-decoration:none;
  font-weight: 700;
}
.auth-switch .link-blue{ color:#2563eb; font-weight: 600; }
.auth-switch .link-accent{ color: var(--accent-1); }

/* Divider line */
.auth-hr{
  height: 1px;
  background: var(--line);
  margin: 16px 0 22px;
}

/* =========================
   HEADER REFINEMENT (Safety Shaybah / Secure Safety Management)
   بدون تغيير النص - فقط تنسيق
   ========================= */
.auth-header,
.brand,
.brandline{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}

/* Shield icon sizing */
.auth-header svg,
.auth-header img,
.brand svg,
.brand img{
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 6px;
}

/* First line: Safety Shaybah */
.auth-header strong,
.brand strong,
.brand .title{
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--text);
}

/* Second line: Secure Safety Management */
.auth-header span,
.brand span,
.brand .subtitle{
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted);
  line-height: 1.4 !important;
}

/* HTTPS badge (if exists) */
.badge,
.https,
.secure-badge{
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  transform: scale(.92);
}

/* =========================
   Form headings inside card
   Your h4.fw-bold used for Create account / Sign in
   ========================= */
h4.fw-bold{
  font-size: var(--auth-h1) !important;
  font-weight: 850 !important;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 8px 0 6px;
}
@media (max-width:576px){
  h4.fw-bold{ font-size: var(--auth-h1-sm) !important; }
}

/* Helper texts */
.note, .text-muted, .small, .form-text{
  color: var(--muted) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* Labels */
.form-label{
  font-weight: 800 !important;
  color: var(--text) !important;
  margin: 0 0 6px !important;
  font-size: var(--auth-label) !important;
  letter-spacing: -.01em;
}

/* Inputs */
.form-control{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius-input) !important;

  min-height: var(--auth-input-h) !important;
  height: var(--auth-input-h) !important;

  font-size: var(--auth-input) !important;
  padding: 11px 13px !important;

  box-shadow: none !important;
  transition: .18s ease;
}
.form-control::placeholder{
  color: rgba(100, 116, 139, .72) !important;
}
.form-control:hover{
  border-color: var(--input-border-hover) !important;
}
.form-control:focus{
  border-color: rgba(255, 122, 24, .55) !important;
  box-shadow: var(--focus) !important;
}

/* Input group icons and buttons */
.input-group{
  border-radius: var(--radius-input);
}

/* Icon box */
.input-group-text{
  background: transparent !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !important;

  min-width: var(--auth-icon-box) !important;
  height: var(--auth-icon-box) !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px 0 0 14px !important;
}

/* Join borders neatly */
.input-group > :not(:first-child){ margin-left: 0 !important; }
.input-group .input-group-text{ border-right: 0 !important; }
.input-group .form-control{
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;

  height: var(--auth-icon-box) !important;
  min-height: var(--auth-icon-box) !important;
}

/* Right button (eye toggle) */
.input-group .btn{
  border: 1px solid var(--input-border) !important;
  border-left: 0 !important;

  min-width: var(--auth-icon-box) !important;
  height: var(--auth-icon-box) !important;

  border-radius: 0 14px 14px 0 !important;
}

/* Soft button */
.btn-soft{
  background: var(--soft-bg) !important;
  color: var(--text) !important;
}
.btn-soft:hover{
  background: var(--soft-bg-hover) !important;
}

/* Icons size */
.bi{
  font-size: 16px !important;
  line-height: 1;
}

/* Buttons */
.btn{
  font-size: 17px;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  letter-spacing: -.01em;
  transition: .18s ease;
}

/* Primary orange gradient */
.btn-accent{
  border: none !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;

  min-height: var(--auth-btn-h) !important;
  height: var(--auth-btn-h) !important;

  box-shadow: 0 16px 30px rgba(255, 122, 24, .22);
}
.btn-accent:hover{
  filter: brightness(.985);
  transform: translateY(-1px);
}
.btn-accent:active{ transform: translateY(0); }
.btn-accent:focus{ box-shadow: var(--focus) !important; }

/* Links */
.small-links, .small-links a{
  color:#2563eb;
  font-weight: 700;
  text-decoration: none;
}
.small-links a:hover{
  text-decoration: underline;
}

/* Divider "or" */
.divider{
  display:flex;
  align-items:center;
  gap: 12px;
  color: rgba(100,116,139,.92);
  font-weight: 800;
  margin: 14px 0;
  justify-content:center;
}
.divider::before,
.divider::after{
  content:"";
  height: 1px;
  background: var(--line);
  flex: 1;
}

/* Checkboxes */
.form-check-label{ color: var(--muted) !important; }
.form-check-input{
  width: 1.05em;
  height: 1.05em;
  margin-top: .25em;
  border-color: var(--input-border);
}
.form-check-input:focus{ box-shadow: var(--focus) !important; }
.form-check-input:checked{
  background-color: var(--accent-1);
  border-color: var(--accent-1);
}

/* Spacing tidy */
.mb-3{ margin-bottom: 12px !important; }
.mb-2{ margin-bottom: 8px !important; }
.mt-3{ margin-top: 12px !important; }

/* Smooth tap */
*{ -webkit-tap-highlight-color: transparent; }
.auth-card, .btn, .form-control, .input-group-text{ transition: .18s ease; }
/* =========================
   FIX: input-group border right side hidden
   ضع هذا آخر auth.css
   ========================= */

/* خل الـ input-group هو اللي يرسم البوردر الكامل */
.input-group{
  border: 1px solid var(--input-border) !important;
  border-radius: 14px !important;
  overflow: hidden;                 /* يحافظ على الزوايا */
  background: var(--input-bg) !important;
}

/* شيل بوردر العناصر الداخلية عشان ما تتعارض وتسبب اختفاء طرف */
.input-group-text,
.input-group .form-control,
.input-group .btn{
  border: 0 !important;
  box-shadow: none !important;
}

/* فاصل خفيف بين مربع الأيقونة وباقي الحقل */
.input-group-text{
  background: rgba(243,244,246,.9) !important; /* نفس الستايل */
  min-width: var(--auth-icon-box) !important;
  height: var(--auth-icon-box) !important;
  border-right: 1px solid var(--line) !important;
}

/* الحقل */
.input-group .form-control{
  height: var(--auth-icon-box) !important;
  min-height: var(--auth-icon-box) !important;
}

/* زر العين/الزر يمين */
.input-group .btn{
  min-width: var(--auth-icon-box) !important;
  height: var(--auth-icon-box) !important;
  background: rgba(243,244,246,.9) !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 0 !important; /* لأن العلبة هي اللي فيها الروند */
}

/* Hover للعلبة */
.input-group:hover{
  border-color: var(--input-border-hover) !important;
}

/* Focus: لما أي عنصر داخلها يصير فوكس */
.input-group:focus-within{
  border-color: rgba(255, 122, 24, .55) !important;
  box-shadow: var(--focus) !important;
}

/* ===== Auth Loader Overlay ===== */
.page-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17,24,39,.55);
  backdrop-filter: blur(6px);
}

.page-loader.is-on{ display:flex; }

.page-loader .loader-card{
  width: min(420px, 92vw);
  border-radius: 16px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  text-align: center;
}

.page-loader .loader-spinner{
  width: 54px;
  height: 54px;
  margin: 4px auto 12px;
  border-radius: 50%;
  border: 6px solid rgba(249,115,22,.20);
  border-top-color: #f97316;
  animation: loaderSpin .9s linear infinite;
}

@keyframes loaderSpin{ to{ transform: rotate(360deg); } }

.page-loader .loader-title{
  font-weight: 800;
  letter-spacing: .2px;
  color: #111827;
  font-size: 16px;
}

.page-loader .loader-sub{
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}