/*!
 * HRMS Enterprise UI (RTL)
 * Version: 2.1.3
 * Build date: 2026-02-24
 * Notes:
 * - Sidebar layout (desktop) + offcanvas sidebar (mobile)
 * - Light/Dark themes via CSS variables
 * - Smooth animations (respects prefers-reduced-motion)
 */

:root{
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #2563eb;
  --primary-600: #1d4ed8;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --border: rgba(15, 23, 42, .10);
  --shadow: 0 10px 30px rgba(2, 6, 23, .10);
  --shadow-soft: 0 8px 20px rgba(2, 6, 23, .08);
  --radius: 14px;
  --radius-sm: 10px;

  --sidebar-w: 280px;
  --sidebar-w-collapsed: 86px;

  --tr-fast: 150ms cubic-bezier(.2,.8,.2,1);
  --tr: 220ms cubic-bezier(.2,.8,.2,1);
}

body.theme-dark{
  --bg: #0b0b0a;
  --surface: #1a1714;
  --surface-2: #211b15;
  --text: #f8f5ef;
  --muted: #d2c7b8;
  --primary: #ffb12a;
  --primary-600: #f59e0b;
  --success: #65d45c;
  --warning: #ffa726;
  --danger: #ff4d5f;
  --border: rgba(255, 177, 42, .18);
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: #aa9a84;
  --bs-border-color: rgba(255,177,42,.22);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: rgba(255,177,42,.18);
  --bs-heading-color: #fffaf2;
}

html, body{ height: 100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  letter-spacing: .1px;
}

a{ text-decoration: none; }

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
body.theme-dark label,
body.theme-dark .form-label,
body.theme-dark .card-title,
body.theme-dark .table,
body.theme-dark .table td,
body.theme-dark .table th{
  color: var(--text);
}

body.theme-dark .small-muted,
body.theme-dark .text-muted,
body.theme-dark .text-secondary,
body.theme-dark .form-text{
  color: var(--muted) !important;
}

body.theme-dark .text-dark,
body.theme-dark .text-body,
body.theme-dark .text-black{
  color: var(--text) !important;
}

body.theme-dark .card,
body.theme-dark .modal-content,
body.theme-dark .dropdown-menu,
body.theme-dark .list-group-item,
body.theme-dark .accordion-item,
body.theme-dark .toast{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

body.theme-dark .dropdown-item{
  color: var(--text);
}
body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus{
  background: rgba(255,177,42,.16);
  color: #fff;
}

body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .input-group-text,
body.theme-dark textarea{
  background-color: #11100e;
  color: var(--text);
  border-color: rgba(255,177,42,.24);
}
body.theme-dark .form-control::placeholder,
body.theme-dark textarea::placeholder{
  color: #ad9f8b;
}
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus{
  background-color: #11100e;
  color: var(--text);
  border-color: rgba(255,177,42,.75);
  box-shadow: 0 0 0 .2rem rgba(255,177,42,.20);
}
body.theme-dark .form-select option{
  background: #1a1714;
  color: var(--text);
}

body.theme-dark .btn-outline-secondary{
  color: #f3eadc;
  border-color: rgba(255,177,42,.32);
  background: rgba(26,23,20,.45);
}
body.theme-dark .btn-outline-secondary:hover,
body.theme-dark .btn-outline-secondary:focus{
  color: #fff;
  background: rgba(255,177,42,.18);
  border-color: rgba(255,199,92,.68);
}

body.theme-dark .bg-light,
body.theme-dark .btn-light,
body.theme-dark .badge.bg-light,
body.theme-dark .badge.text-bg-light{
  background-color: #2a2118 !important;
  color: #fff7eb !important;
  border-color: rgba(255,177,42,.28) !important;
}

body.theme-dark .table > :not(caption) > * > *{
  background-color: transparent;
  color: var(--text);
  border-bottom-color: rgba(255,177,42,.16);
}
body.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > *{
  --bs-table-bg-type: rgba(255,177,42,.05);
  color: var(--text);
}
body.theme-dark .table-hover > tbody > tr:hover > *{
  --bs-table-bg-state: rgba(101,212,92,.10);
  color: #fff;
}

body.theme-dark [style*="background: var(--surface-2)"],
body.theme-dark [style*="background:var(--surface-2)"]{
  color: var(--text) !important;
}

body.theme-dark code,
body.theme-dark .code,
body.theme-dark .kbd-badge{
  color: #ffd58a;
}

/* App shell */
.app-shell{
  min-height: 100vh;
  display: flex;
  flex-direction: row;
}
body[dir="rtl"] .app-shell{ direction: rtl; } /* In RTL, row places the first item on the right */
body[dir="ltr"] .app-shell{ direction: ltr; }

.app-sidebar{
  width: var(--sidebar-w);
  background: radial-gradient(1200px 800px at 10% 10%, rgba(255,255,255,.08), transparent 60%),
              linear-gradient(180deg, #0b1220 0%, #0b1220 60%, #0a1429 100%);
  color: #e5e7eb;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-left: 1px solid rgba(255,255,255,.08);
  transition: width var(--tr);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.theme-dark .app-sidebar,
body.theme-dark .app-offcanvas{
  background:
    radial-gradient(900px 520px at 8% 8%, rgba(255,177,42,.13), transparent 62%),
    radial-gradient(620px 420px at 94% 24%, rgba(101,212,92,.08), transparent 60%),
    linear-gradient(180deg, #0b0b0a 0%, #14110e 58%, #1c150f 100%);
  color: #f8f5ef;
  border-color: rgba(255,177,42,.14);
}

.app-sidebar::-webkit-scrollbar{ width: 10px; }
.app-sidebar::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; }
.app-sidebar::-webkit-scrollbar-thumb{
  background: rgba(226,232,240,.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.app-sidebar::-webkit-scrollbar-thumb:hover{ background: rgba(226,232,240,.35); background-clip: padding-box; }
.app-sidebar{ scrollbar-width: thin; scrollbar-color: rgba(226,232,240,.25) rgba(255,255,255,.03); }

body.sidebar-collapsed .app-sidebar{ width: var(--sidebar-w-collapsed); }

.sidebar-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 6px 14px 6px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  color:#fff;
}
.brand-logo{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(99,102,241,1));
  box-shadow: 0 10px 24px rgba(37,99,235,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  overflow: hidden;
  padding: 3px;
}
body.theme-dark .brand-logo{
  background: linear-gradient(135deg, #ffb12a, #65d45c);
  box-shadow: 0 10px 24px rgba(255,177,42,.24);
}
.brand-logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 9px;
}

.brand-title{
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
}
.brand-subtitle{ color: rgba(226,232,240,.75); font-size: .82rem; }

body.sidebar-collapsed .brand-text{ display:none; }

.sidebar-btn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform var(--tr-fast), background var(--tr-fast);
}
.sidebar-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.sidebar-section{
  margin-top: 10px;
  padding: 8px 6px;
}

.sidebar-section-title{
  color: rgba(226,232,240,.70);
  font-size: .78rem;
  font-weight: 700;
  padding: 10px 10px 6px;
}

body.sidebar-collapsed .sidebar-section-title{ display:none; }

.sidebar-nav{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(226,232,240,.88);
  transition: background var(--tr-fast), transform var(--tr-fast), color var(--tr-fast);
}
.sidebar-link i{ font-size: 1.15rem; min-width: 22px; text-align: center; }
.sidebar-link:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
  color: #fff;
}
.sidebar-link.active{
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(99,102,241,.92));
  color: #fff;
  box-shadow: 0 12px 24px rgba(37,99,235,.28);
}

body.theme-dark .sidebar-section-title,
body.theme-dark .brand-subtitle{
  color: rgba(248,245,239,.72);
}
body.theme-dark .sidebar-link{
  color: rgba(248,245,239,.86);
}
body.theme-dark .sidebar-link:hover{
  background: rgba(255,177,42,.10);
  color: #fff;
}
body.theme-dark .sidebar-link.active{
  background: linear-gradient(135deg, rgba(255,177,42,.98), rgba(245,128,32,.95));
  color: #17110a;
  box-shadow: 0 14px 28px rgba(255,177,42,.24);
}
body.theme-dark .sidebar-link.active .nav-hint{
  color: rgba(23,17,10,.76);
}
.sidebar-link .nav-text{ font-weight: 700; }
.sidebar-link .nav-hint{ color: rgba(226,232,240,.70); font-size: .78rem; font-weight: 600; }

body.sidebar-collapsed .sidebar-link{ justify-content:center; }
body.sidebar-collapsed .sidebar-link .nav-text,
body.sidebar-collapsed .sidebar-link .nav-hint{ display:none; }

/* Main */
.app-main{ flex: 1; display:flex; flex-direction: column; min-width: 0; }

.app-topbar{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: color-mix(in srgb, var(--surface), transparent 0%);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
}
body[dir="rtl"] .topbar-inner{
  direction: rtl;
  flex-direction: row-reverse; /* Arabic layout */
}
body[dir="ltr"] .topbar-inner{
  direction: ltr;
  flex-direction: row; /* English layout */
}

.topbar-left, .topbar-right{ display:flex; align-items:center; gap: 10px; }

.topbar-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
}
.topbar-title-with-logo{
  gap: 8px;
}
.topbar-title-logo{
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(37,99,235,.16);
  flex: 0 0 auto;
}
.offcanvas-brand-title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.offcanvas-brand-logo{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.kbd-badge{
  font-size: .75rem;
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
}

.app-content{ padding: 18px; width:100%; max-width:1400px; margin-inline:auto; }

.page-enter{
  animation: pageIn 320ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pageIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Bootstrap polish */
.card{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft);
}
.card .card-body{ padding: 18px; }

.card:hover{
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  transition: box-shadow var(--tr), transform var(--tr);
}

.table{
  --bs-table-bg: transparent;
}

.form-control, .form-select{
  border-radius: 12px;
  border-color: var(--border);
}

.btn{ border-radius: 12px; font-weight: 700; }

.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover{ background: var(--primary-600); border-color: var(--primary-600); }

.small-muted{ font-size: .88rem; color: var(--muted); }
.badge-status{ font-size: .78rem; padding: .45em .7em; border-radius: 999px; }

.kpi-card{
  min-height: 118px;
  overflow:hidden;
  position: relative;
}
.kpi-card:before{
  content:"";
  position:absolute;
  inset:-60px -80px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.18), transparent 60%);
  pointer-events:none;
}

/* Topbar widgets */
.user-chip{
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
  padding: 6px 10px;
  border-radius: 999px;
}

.user-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(37,99,235,.9), rgba(99,102,241,.85));
  display:flex;
  align-items:center;
  justify-content:center;
  color: #fff;
  font-weight: 900;
}

/* Offcanvas (mobile) */
.app-offcanvas{
  background: linear-gradient(180deg, #0b1220 0%, #0a1429 100%);
  color:#e5e7eb;
}
.app-offcanvas .offcanvas-header{ border-bottom: 1px solid rgba(255,255,255,.10); }

/* Responsive */
@media (max-width: 992px){
  .app-content{ padding: 14px; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===== Attendance / Time & Attendance ===== */
.btn-punch{
  min-height: 120px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  border-radius: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), filter var(--tr-fast);
}
.btn-punch i{ font-size: 1.85rem; }
.btn-punch:hover{ transform: translateY(-2px); box-shadow: var(--shadow); filter: saturate(1.05); }
.btn-punch:disabled{ opacity: .65; filter: grayscale(.15); transform:none; box-shadow: var(--shadow-soft); }

.att-legend{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.att-legend .badge{ border: 1px solid color-mix(in srgb, var(--border), transparent 0%); }

/* ===== Notifications + Chat ===== */
.topbar-icon-btn{
  width: 38px;
  height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.topbar-badge{
  position:absolute;
  top:-7px;
  inset-inline-start: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 2px solid var(--surface);
  box-shadow: 0 4px 10px rgba(220,38,38,.25);
}
.topbar-badge-chat{
  background: var(--primary);
  box-shadow: 0 4px 10px rgba(37,99,235,.28);
}

.chat-conv-list{
  max-height: 420px;
  overflow:auto;
  border-radius: 12px;
}
.chat-conv-list .list-group-item{
  border-radius: 10px !important;
  margin-bottom: 6px;
  border: 1px solid var(--border);
}

.chat-thread-card .card-body{
  display:flex;
  flex-direction: column;
}

.chat-thread-box{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
  padding: 12px;
  min-height: 380px;
  max-height: 580px;
  overflow:auto;
}

.chat-msg-row{
  display:flex;
  justify-content:flex-start;
  margin-bottom: 10px;
}
.chat-msg-row.mine{ justify-content:flex-end; }

.chat-msg-bubble{
  max-width: min(85%, 720px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow-soft);
}
.chat-msg-row.mine .chat-msg-bubble{
  background: color-mix(in srgb, var(--primary), white 88%);
  border-color: color-mix(in srgb, var(--primary), transparent 75%);
}
body.theme-dark .chat-msg-row.mine .chat-msg-bubble{
  background: color-mix(in srgb, var(--primary), #1a1714 76%);
}

.chat-msg-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  margin-bottom: 4px;
  font-size: .82rem;
  color: var(--muted);
}
.chat-msg-meta strong{
  color: var(--text);
  font-size: .86rem;
}
.chat-msg-body{
  white-space: normal;
  word-break: break-word;
}

.chat-attachments{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.chat-attachment-link{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  border: 1px dashed var(--border);
  padding: 6px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
  color: var(--text);
}
.chat-attachment-link:hover{
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary), transparent 55%);
  color: var(--primary);
}
.chat-attachment-link span{
  max-width: 320px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 992px){
  .chat-thread-box{ min-height: 320px; max-height: 420px; }
  .chat-msg-bubble{ max-width: 100%; }
}

/* ===== Auth (Login / Forgot / Reset) ===== */
.auth-shell{
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.auth-login-shell{
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
}

.auth-login-grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
}

.auth-hero-panel{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(600px 260px at 12% 10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(500px 300px at 85% 15%, rgba(191,219,254,.22), transparent 60%),
    linear-gradient(145deg, #081124, #0f172a 45%, #1d4ed8 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 25px 60px rgba(2,6,23,.22);
  min-height: 640px;
}

.auth-hero-glow{
  position: absolute;
  inset: auto -70px -70px auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(96,165,250,.45), transparent 68%);
  filter: blur(4px);
  pointer-events: none;
}

.auth-hero-content{
  position: relative;
  z-index: 1;
  padding: 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.auth-hero-pill{
  align-self: flex-start;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .4px;
  animation: authFadeIn .55s ease both;
}

.auth-hero-title{
  margin: 14px 0 8px;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1.25;
  font-weight: 800;
  animation: authFadeInUp .6s ease .08s both;
}

.auth-hero-subtitle{
  color: rgba(226,232,240,.85);
  max-width: 48ch;
  line-height: 1.8;
  margin-bottom: 14px;
  animation: authFadeInUp .6s ease .14s both;
}

.auth-hero-visual{
  margin-top: 6px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px;
  position: relative;
  overflow: hidden;
  animation: authFadeInUp .7s ease .2s both;
}

.auth-hero-visual img{
  width: 100%;
  display: block;
  border-radius: 12px;
  box-shadow: 0 18px 35px rgba(2,6,23,.22);
}

.auth-float-card{
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 14px 24px rgba(2,6,23,.15);
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.6);
}
.auth-float-card-a{
  inset-block-start: 18px;
  inset-inline-end: 18px;
  animation: authFloat 4.2s ease-in-out infinite;
}
.auth-float-card-b{
  inset-block-end: 18px;
  inset-inline-start: 18px;
  animation: authFloat 5.1s ease-in-out infinite .7s;
}

.auth-feature-list{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.auth-feature-list li{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
  animation: authFadeInUp .55s ease both;
}
.auth-feature-list li:nth-child(1){ animation-delay: .25s; }
.auth-feature-list li:nth-child(2){ animation-delay: .3s; }
.auth-feature-list li:nth-child(3){ animation-delay: .35s; }
.auth-feature-list li:nth-child(4){ animation-delay: .4s; }
.auth-feature-list i{ color: #93c5fd; margin-top: 2px; }

.auth-form-panel{
  display: flex;
  align-items: center;
}

.auth-card{
  width: 100%;
  background: color-mix(in srgb, var(--surface), white 2%);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: authFadeInUp .55s ease both;
}
.auth-card-narrow{
  max-width: 580px;
  margin-inline: auto;
}
.auth-card-body{
  padding: 24px;
}

.auth-panel-head h3{
  font-weight: 800;
}

.auth-login-btn{
  min-height: 48px;
  box-shadow: 0 12px 22px rgba(37,99,235,.22);
}

@keyframes authFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes authFadeInUp{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes authFloat{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-6px); }
}

@media (max-width: 992px){
  .auth-login-shell{
    min-height: auto;
    align-items: stretch;
  }
  .auth-login-grid{
    grid-template-columns: 1fr;
  }
  .auth-hero-panel{
    min-height: auto;
  }
}

/* ===== Auth Login V2 (Professional Refresh) ===== */
.auth-login-shell-v2{
  position: relative;
  max-width: min(1760px, calc(100vw - 24px));
  margin-inline: auto;
  padding-inline: 6px;
}
.auth-login-shell-v2::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(920px 520px at 12% 18%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(860px 480px at 88% 82%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(560px 300px at 55% 38%, rgba(37,99,235,.06), transparent 65%);
  z-index: 0;
}
.auth-login-shell-v2::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px),
    radial-gradient(520px 220px at 78% 12%, rgba(2,6,23,.06), transparent 70%);
  background-size: 34px 34px, 34px 34px, auto;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,.92), rgba(0,0,0,.35) 72%, transparent 100%);
  z-index: 0;
}
.auth-login-shell-v2 .auth-login-grid-v2{
  position: relative;
  z-index: 1;
  grid-template-columns: 1.18fr .82fr;
  gap: 18px;
  align-items: center;
}
.auth-login-shell-v2 .auth-hero-panel-v2{
  min-height: 0;
  background:
    radial-gradient(520px 220px at 18% 12%, rgba(255,255,255,.14), transparent 65%),
    radial-gradient(640px 340px at 80% 28%, rgba(96,165,250,.18), transparent 68%),
    linear-gradient(160deg, #071022 0%, #0b1530 48%, #153c8a 100%);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow:
    0 26px 68px rgba(2,6,23,.22),
    0 0 0 1px rgba(255,255,255,.02) inset;
}
.auth-login-shell-v2 .auth-hero-content{
  padding: 18px 18px 16px;
}
.auth-login-shell-v2 .auth-hero-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.auth-login-shell-v2 .auth-hero-pill img{
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(37,99,235,.28);
}
.auth-login-shell-v2 .auth-hero-title{
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
}
.auth-login-shell-v2 .auth-hero-subtitle{
  margin-bottom: 12px;
}
.auth-hero-metric-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.auth-hero-metric-card{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  animation: authFadeInUp .55s ease both;
}
.auth-hero-metric-card:nth-child(1){ animation-delay: .12s; }
.auth-hero-metric-card:nth-child(2){ animation-delay: .16s; }
.auth-hero-metric-card:nth-child(3){ animation-delay: .20s; }
.auth-hero-metric-card:nth-child(4){ animation-delay: .24s; }
.auth-hero-metric-label{
  color: rgba(226,232,240,.72);
  font-size: .78rem;
  font-weight: 700;
}
.auth-hero-metric-value{
  color: #fff;
  font-weight: 800;
  margin-top: 2px;
}
.auth-login-shell-v2 .auth-hero-visual{
  margin-top: 0;
  border-radius: 20px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(260px 120px at 20% 18%, rgba(147,197,253,.16), transparent 70%);
  border: 1px solid rgba(255,255,255,.12);
}
.auth-login-shell-v2 .auth-hero-visual img{
  max-height: 310px;
  object-fit: contain;
}
.auth-login-shell-v2 .auth-feature-list{
  margin-top: 10px;
  gap: 8px;
}
.auth-login-shell-v2 .auth-feature-list li{
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(37,99,235,.16), rgba(37,99,235,.08));
  border-color: rgba(147,197,253,.16);
  padding: 8px 10px;
}
.auth-trust-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.auth-trust-strip > span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.auth-trust-strip i{ color: #93c5fd; }

.auth-form-panel-v2{
  align-items: center;
}
.auth-card-login-v2{
  position: relative;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    color-mix(in srgb, var(--surface), white 2%);
  border: 1px solid color-mix(in srgb, var(--border), rgba(59,130,246,.22) 35%);
  box-shadow: 0 24px 54px rgba(2,6,23,.18);
}
.auth-card-login-v2::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, #2563eb, #3b82f6, #0ea5e9);
}
.auth-card-login-v2 .auth-card-body{
  padding: 18px 20px;
}
.auth-login-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--border), rgba(37,99,235,.16) 35%);
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .78rem;
  font-weight: 800;
}
.auth-login-eyebrow i{ color: var(--primary); }
.auth-login-brand-row{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.auth-login-brand-mark{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: block;
  box-shadow: 0 10px 18px rgba(37,99,235,.20);
}
.auth-login-brand-copy{
  min-width: 0;
}
.auth-login-brand-name{
  font-weight: 900;
  line-height: 1.1;
}
.auth-login-brand-subtitle{
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.2;
}
.auth-input-icon-wrap{
  position: relative;
}
.auth-input-icon-wrap > i{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: 14px;
  color: var(--muted);
  font-size: 1rem;
  pointer-events: none;
}
.auth-input-icon-wrap .form-control{
  padding-inline-start: 42px;
  min-height: 52px;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--border), rgba(37,99,235,.12) 30%);
  background: color-mix(in srgb, var(--surface), transparent 0%);
}
.auth-input-icon-wrap .form-control:focus{
  border-color: color-mix(in srgb, var(--primary), white 30%);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.14);
}
.auth-inline-note{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
}
.auth-inline-note i{ color: var(--success); }
.auth-login-shell-v2 .auth-login-btn{
  min-height: 50px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 14px 24px rgba(37,99,235,.24);
}
.auth-form-foot-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.auth-form-foot-card{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
}
.auth-form-foot-card > i{
  color: var(--primary);
  font-size: 1rem;
  margin-top: 2px;
}
body.theme-dark .auth-card-login-v2{
  box-shadow: 0 20px 44px rgba(0,0,0,.34);
}
body.theme-dark .auth-hero-panel,
body.theme-dark .auth-login-shell-v2 .auth-hero-panel-v2{
  background:
    radial-gradient(600px 260px at 12% 10%, rgba(255,177,42,.18), transparent 60%),
    radial-gradient(500px 300px at 85% 15%, rgba(101,212,92,.12), transparent 62%),
    linear-gradient(145deg, #0b0b0a, #14110e 48%, #21170f 100%);
  color: #f8f5ef;
  border-color: rgba(255,177,42,.20);
  box-shadow: 0 25px 60px rgba(0,0,0,.34);
}
body.theme-dark .auth-hero-glow{
  background: radial-gradient(circle, rgba(255,177,42,.42), transparent 68%);
}
body.theme-dark .auth-hero-subtitle{
  color: rgba(248,245,239,.82);
}
body.theme-dark .auth-float-card{
  background: rgba(248,245,239,.92);
  color: #211b15;
}
body.theme-dark .auth-login-shell-v2 .auth-hero-visual{
  background:
    linear-gradient(180deg, rgba(255,177,42,.08), rgba(255,177,42,.02)),
    radial-gradient(260px 120px at 20% 18%, rgba(101,212,92,.12), transparent 70%);
  border-color: rgba(255,177,42,.18);
}
body.theme-dark .auth-login-shell-v2 .auth-feature-list li,
body.theme-dark .auth-hero-metric-card,
body.theme-dark .auth-form-foot-card{
  background: linear-gradient(180deg, rgba(255,177,42,.12), rgba(255,177,42,.04));
  border-color: rgba(255,177,42,.18);
}
body.theme-dark .auth-trust-strip i{
  color: #ffb12a;
}
body.theme-dark .auth-card-login-v2::before{
  background: linear-gradient(90deg, #ffb12a, #65d45c, #30d9f4);
}
body.theme-dark .auth-input-icon-wrap .form-control{
  border-color: rgba(255,177,42,.18);
}
body.theme-dark .auth-input-icon-wrap .form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(255,177,42,.16);
}
body.theme-dark .auth-login-brand-mark,
body.theme-dark .auth-login-shell-v2 .auth-login-btn{
  box-shadow: 0 14px 24px rgba(255,177,42,.18);
}
@media (min-width: 1201px){
  .auth-login-shell-v2{
    min-height: calc(100vh - 122px);
    display: flex;
    align-items: center;
  }
  .auth-login-shell-v2 .auth-login-grid-v2{
    width: 100%;
    min-height: min(760px, calc(100vh - 156px));
  }
  .auth-login-shell-v2 .auth-hero-panel-v2,
  .auth-login-shell-v2 .auth-form-panel-v2{
    height: 100%;
  }
  .auth-login-shell-v2 .auth-hero-content{
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    grid-template-areas:
      "pill pill"
      "title title"
      "subtitle subtitle"
      "metrics metrics"
      "visual features"
      "trust trust";
    align-content: start;
    gap: 10px 12px;
  }
  .auth-login-shell-v2 .auth-hero-pill{ grid-area: pill; }
  .auth-login-shell-v2 .auth-hero-title{ grid-area: title; margin: 4px 0 0; }
  .auth-login-shell-v2 .auth-hero-subtitle{ grid-area: subtitle; margin: 0; line-height: 1.55; }
  .auth-login-shell-v2 .auth-hero-metric-grid{
    grid-area: metrics;
    grid-template-columns: repeat(4, minmax(0,1fr));
    margin-bottom: 0;
  }
  .auth-login-shell-v2 .auth-hero-visual{ grid-area: visual; }
  .auth-login-shell-v2 .auth-feature-list{
    grid-area: features;
    margin: 0;
    align-content: start;
    grid-template-columns: 1fr;
  }
  .auth-login-shell-v2 .auth-trust-strip{
    grid-area: trust;
    margin-top: 0;
  }
  .auth-login-shell-v2 .auth-card-login-v2{
    width: min(100%, 560px);
    margin-inline: auto;
  }
}
@media (min-width: 1440px){
  .auth-login-shell-v2 .auth-login-grid-v2{
    grid-template-columns: 1.28fr .72fr;
    gap: 20px;
  }
  .auth-login-shell-v2 .auth-hero-content{
    padding: 16px 16px 14px;
  }
  .auth-login-shell-v2 .auth-hero-visual img{
    max-height: 280px;
  }
  .auth-login-shell-v2 .auth-feature-list{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
}
@media (max-width: 1200px){
  .auth-login-shell-v2 .auth-login-grid-v2{
    grid-template-columns: 1fr;
  }
  .auth-login-shell-v2 .auth-hero-panel-v2{
    min-height: auto;
  }
}
@media (max-width: 768px){
  .auth-login-shell-v2{
    max-width: calc(100vw - 12px);
    padding-inline: 0;
  }
  .auth-hero-metric-grid{
    grid-template-columns: 1fr;
  }
  .auth-card-login-v2 .auth-card-body{
    padding: 18px;
  }
  .auth-login-brand-row{
    grid-template-columns: 38px 1fr;
    gap: 8px;
  }
  .auth-login-brand-mark{
    width: 38px;
    height: 38px;
  }
  .auth-trust-strip{
    gap: 6px;
  }
  .auth-trust-strip > span{
    font-size: .72rem;
    padding: 5px 8px;
  }
}