/* ============================================================
   MOSTAQER — AUTH & USER MANAGEMENT STYLES
   Login Screen, User Panel, Export Modal
   ============================================================ */

/* ─────────────────────────────────────────────
   LOGIN SCREEN
───────────────────────────────────────────── */
#login-screen {
  position: fixed; inset: 0; z-index: 99999;
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  font-family: 'Cairo', sans-serif;
}
#login-screen.hidden { display: none !important; }

.login-bg-pattern {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.login-bg-circle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,154,0,.08), transparent);
}
.login-bg-circle:nth-child(1) { width: 500px; height: 500px; top: -100px; right: -100px; background: radial-gradient(circle, rgba(196,154,0,.1), transparent); }
.login-bg-circle:nth-child(2) { width: 400px; height: 400px; bottom: -80px; left: -80px; background: radial-gradient(circle, rgba(16,185,129,.06), transparent); }
.login-bg-circle:nth-child(3) { width: 300px; height: 300px; top: 40%; left: 50%; background: radial-gradient(circle, rgba(245,197,24,.08), transparent); }

.login-box {
  position: relative; z-index: 1;
  background: #FFFFFF;
  border: 1.5px solid #F0E6C8;
  border-radius: 24px;
  padding: 2.5rem 2rem;
  width: 100%; max-width: 420px;
  box-shadow: 0 12px 40px rgba(196,154,0,.08), 0 4px 16px rgba(0,0,0,.04);
  animation: loginFadeIn .5s ease;
}

@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}
.login-box.shake { animation: shake .4s ease; }

.login-brand {
  text-align: center; margin-bottom: 2rem;
}
.login-brand-logo {
  display: flex; align-items: center; justify-content: center; margin-bottom: .85rem;
}
.login-brand-logo img {
  height: 56px; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(245,197,24,.25));
}
.login-brand-title {
  font-size: 1.05rem; font-weight: 800; color: #1F2937;
  margin-bottom: .25rem; line-height: 1.4;
}
.login-brand-sub {
  font-size: .75rem; color: #78716C; letter-spacing: .3px;
}

.login-form { display: flex; flex-direction: column; gap: 1rem; }

.login-field { display: flex; flex-direction: column; gap: .45rem; }
.login-field label {
  font-size: .8rem; font-weight: 700; color: #44403C;
  display: flex; align-items: center; gap: .4rem;
}
.login-field label i { color: #C49A00; }

.login-input-wrap { position: relative; }
.login-input {
  width: 100%;
  background: #FAFAF8;
  border: 1.5px solid #E7E5E4;
  border-radius: 12px;
  padding: .75rem 1rem .75rem 2.8rem;
  color: #1C1917; font-size: .92rem;
  font-family: 'Cairo', sans-serif;
  transition: border-color .2s, box-shadow .2s;
  direction: ltr; text-align: right;
}
.login-input:focus {
  outline: none;
  border-color: #C49A00;
  box-shadow: 0 0 0 3px rgba(196,154,0,.15);
}
.login-input::placeholder { color: #A8A29E; direction: rtl; }
.login-input-icon {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: #A8A29E; font-size: .85rem; pointer-events: none;
}

/* Password toggle */
.login-pwd-toggle {
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #A8A29E; cursor: pointer; font-size: .85rem;
  padding: 0; display: flex; align-items: center;
}
.login-pwd-toggle:hover { color: #78716C; }

#login-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 10px;
  padding: .6rem .9rem;
  font-size: .82rem; color: #DC2626;
  display: none; text-align: center;
}

#login-btn {
  background: linear-gradient(135deg, #C49A00, #D4A914);
  border: none; border-radius: 12px;
  color: #fff; font-family: 'Cairo', sans-serif;
  font-size: .95rem; font-weight: 700;
  padding: .9rem 1.5rem;
  cursor: pointer; transition: all .25s;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: .5rem;
  box-shadow: 0 4px 20px rgba(196,154,0,.3);
}
#login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(196,154,0,.4); }
#login-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.login-footer {
  text-align: center; margin-top: 1.5rem;
  font-size: .72rem; color: #A8A29E;
}

/* ─────────────────────────────────────────────
   HEADER USER INDICATOR
───────────────────────────────────────────── */
#user-indicator {
  display: none; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px; padding: .3rem .7rem .3rem .5rem;
  cursor: pointer; transition: background .2s;
}
#user-indicator:hover { background: rgba(255,255,255,.12); }

.user-ind-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  color: #fff; font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.user-ind-name { font-size: .8rem; font-weight: 700; color: #E5E7EB; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-ind-role { font-size: .65rem; color: #9CA3AF; background: rgba(255,255,255,.08); border-radius: 4px; padding: .1rem .35rem; }

/* Logout button */
.logout-btn {
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25);
  color: #FCA5A5; padding: .3rem .75rem; border-radius: 20px;
  font-size: .75rem; font-family: 'Cairo', sans-serif;
  cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: .35rem;
}
.logout-btn:hover { background: rgba(239,68,68,.2); color: #F87171; }

/* ─────────────────────────────────────────────
   USER MANAGEMENT PANEL
───────────────────────────────────────────── */
#user-mgmt-panel {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(0,0,0,.8);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  font-family: 'Cairo', sans-serif;
}
#user-mgmt-panel.hidden { display: none !important; }

.umgmt-box {
  background: #12122A;
  border: 1px solid rgba(79,70,229,.3);
  border-radius: 20px;
  width: 100%; max-width: 860px;
  max-height: 90vh; overflow-y: auto;
  padding: 1.75rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  scrollbar-width: thin; scrollbar-color: #4F46E5 #0F0F1A;
}

.umgmt-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.umgmt-header h3 { font-size: 1.1rem; font-weight: 800; color: #F9FAFB; margin: 0; display: flex; align-items: center; gap: .5rem; }
.umgmt-header h3 i { color: #4F46E5; }
.umgmt-close { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #D1D5DB; padding: .45rem .65rem; border-radius: 8px; cursor: pointer; font-size: .9rem; transition: all .2s; }
.umgmt-close:hover { background: rgba(239,68,68,.2); color: #FCA5A5; }

/* Add user form */
#add-user-form {
  background: rgba(79,70,229,.07);
  border: 1px solid rgba(79,70,229,.25);
  border-radius: 14px; padding: 1.25rem;
  margin-bottom: 1.25rem;
}
#add-user-form.hidden { display: none; }

.umgmt-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem; margin-bottom: 1rem;
}
.umgmt-field label { font-size: .74rem; color: #9CA3AF; display: block; margin-bottom: .3rem; font-weight: 600; }
.umgmt-input {
  width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; padding: .55rem .8rem; color: #E5E7EB; font-size: .84rem;
  font-family: 'Cairo', sans-serif; transition: border-color .2s;
}
.umgmt-input:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,.2); }
.umgmt-input option { background: #1A1A30; }

/* Users table */
.users-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.users-table thead th {
  background: rgba(79,70,229,.1);
  border-bottom: 1px solid rgba(79,70,229,.3);
  padding: .65rem .9rem;
  color: #A5B4FC; font-weight: 700; text-align: right;
}
.users-row { border-bottom: 1px solid rgba(255,255,255,.05); transition: background .15s; }
.users-row:hover { background: rgba(255,255,255,.03); }
.users-row td { padding: .7rem .9rem; color: #D1D5DB; vertical-align: middle; }

.user-avatar-sm {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid;
  font-size: .82rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.role-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .6rem; border-radius: 20px; font-size: .72rem; font-weight: 700;
}
.role-admin { background: rgba(79,70,229,.15); color: #818CF8; border: 1px solid rgba(79,70,229,.3); }
.role-user  { background: rgba(16,185,129,.12); color: #34D399; border: 1px solid rgba(16,185,129,.25); }

.status-badge {
  font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; border-radius: 20px;
}
.status-active   { color: #34D399; background: rgba(16,185,129,.12); }
.status-inactive { color: #F87171; background: rgba(239,68,68,.12);  }

/* Action buttons */
.umgmt-btn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #D1D5DB; width: 30px; height: 30px; border-radius: 7px;
  cursor: pointer; font-size: .78rem; transition: all .2s;
  display: inline-flex; align-items: center; justify-content: center;
}
.umgmt-edit:hover    { background: rgba(79,70,229,.25);   color: #A5B4FC; border-color: rgba(79,70,229,.4); }
.umgmt-warn:hover    { background: rgba(245,158,11,.2);   color: #FCD34D; border-color: rgba(245,158,11,.4); }
.umgmt-success:hover { background: rgba(16,185,129,.2);   color: #34D399; border-color: rgba(16,185,129,.4); }
.umgmt-danger:hover  { background: rgba(239,68,68,.2);    color: #FCA5A5; border-color: rgba(239,68,68,.4); }

/* Edit panel */
#edit-user-panel {
  background: rgba(245,158,11,.06);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 14px; padding: 1.25rem;
  margin-top: 1rem;
}
#edit-user-panel.hidden { display: none; }

/* ─────────────────────────────────────────────
   EXPORT MODAL
───────────────────────────────────────────── */
#export-modal {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  font-family: 'Cairo', sans-serif;
}
#export-modal.hidden { display: none !important; }

.export-box {
  background: #12122A;
  border: 1px solid rgba(79,70,229,.3);
  border-radius: 20px;
  width: 100%; max-width: 480px;
  padding: 1.75rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}

.export-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.export-header h3 { font-size: 1.05rem; font-weight: 800; color: #F9FAFB; margin: 0; display: flex; align-items: center; gap: .5rem; }
.export-header h3 i { color: #10B981; }

.export-body { display: flex; flex-direction: column; gap: 1rem; }

.export-field label { font-size: .8rem; color: #9CA3AF; display: block; margin-bottom: .4rem; font-weight: 600; }
.export-select {
  width: 100%; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: .65rem .9rem;
  color: #E5E7EB; font-size: .88rem; font-family: 'Cairo', sans-serif;
}
.export-select option { background: #1A1A30; }

.export-info {
  background: rgba(16,185,129,.07);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 10px; padding: .75rem 1rem;
  font-size: .8rem; color: #6EE7B7;
  display: flex; align-items: flex-start; gap: .5rem;
  line-height: 1.6;
}

.export-fields-list {
  display: flex; flex-wrap: wrap; gap: .35rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: .75rem;
}
.export-field-tag {
  background: rgba(79,70,229,.12); color: #A5B4FC;
  border: 1px solid rgba(79,70,229,.25);
  border-radius: 6px; padding: .15rem .5rem; font-size: .7rem; font-weight: 600;
}

.export-footer {
  display: flex; gap: .75rem; justify-content: flex-end;
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

#export-btn {
  background: linear-gradient(135deg, #059669, #10B981);
  border: none; color: #fff; padding: .7rem 1.5rem;
  border-radius: 10px; font-family: 'Cairo', sans-serif; font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: .5rem;
}
#export-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(16,185,129,.4); }
#export-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ─────────────────────────────────────────────
   HISTORY TABLE VIEW
───────────────────────────────────────────── */
.history-view-toggle {
  display: flex; gap: .4rem; align-items: center;
}
.view-toggle-btn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #9CA3AF; padding: .4rem .75rem; border-radius: 8px;
  cursor: pointer; font-size: .8rem; transition: all .2s;
  display: flex; align-items: center; gap: .35rem;
  font-family: 'Cairo', sans-serif;
}
.view-toggle-btn.active { background: rgba(79,70,229,.2); color: #A5B4FC; border-color: rgba(79,70,229,.4); }
.view-toggle-btn:hover  { background: rgba(255,255,255,.12); color: #D1D5DB; }

/* Table view container */
#records-table-wrap {
  overflow-x: auto; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
#records-table-wrap.hidden { display: none; }

/* List/Cards view containers */
#records-list-view { overflow-x: auto; border-radius: 14px; }
#records-list-view.hidden { display: none !important; }
#records-cards-view.hidden { display: none !important; }

.records-table {
  width: 100%; border-collapse: collapse; min-width: 900px;
}
.records-table thead th {
  background: rgba(79,70,229,.08);
  border-bottom: 2px solid rgba(79,70,229,.2);
  padding: .75rem 1rem; color: #A5B4FC; font-weight: 700;
  font-size: .78rem; text-align: right; white-space: nowrap;
  position: sticky; top: 0;
}
.records-table thead th:first-child { border-radius: 14px 0 0 0; }
.records-table thead th:last-child  { border-radius: 0 14px 0 0; }

.records-table tbody tr { transition: background .15s; }
.records-table tbody tr:hover { background: rgba(255,255,255,.04); }
.records-table tbody td {
  padding: .6rem 1rem; font-size: .82rem; color: #D1D5DB;
  border-bottom: 1px solid rgba(255,255,255,.05);
  vertical-align: middle;
}
/* Allow classification cell to wrap */
.records-table tbody td:nth-child(6) { white-space: normal; min-width: 140px; max-width: 220px; }
/* Other cells no-wrap */
.records-table tbody td:not(:nth-child(6)) { white-space: nowrap; }

.tbl-module-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .5rem; border-radius: 6px; font-size: .68rem; font-weight: 700;
}
.tbl-module-vineland { background: rgba(245,197,24,.1); color: #F5C518; }
.tbl-module-compass  { background: rgba(129,140,248,.1); color: #818CF8; }

.tbl-class-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .22rem .65rem; border-radius: 20px; font-size: .7rem; font-weight: 700;
  max-width: 220px; white-space: normal; line-height: 1.3; text-align: center;
}
.tbl-class-ok     { background: rgba(16,185,129,.12); color: #34D399; border: 1px solid rgba(16,185,129,.25); }
.tbl-class-warn   { background: rgba(245,158,11,.12); color: #FBBF24; border: 1px solid rgba(245,158,11,.25); }
.tbl-class-danger { background: rgba(239,68,68,.12);  color: #F87171; border: 1px solid rgba(239,68,68,.25);  }
.tbl-class-normal { background: rgba(156,163,175,.1); color: #9CA3AF; border: 1px solid rgba(156,163,175,.2); }

.rec-list-name { font-weight: 700; color: #F9FAFB !important; }
.rec-list-date { color: #9CA3AF !important; font-size: .77rem !important; }

.tbl-actions { display: flex; gap: .4rem; justify-content: flex-end; }
.tbl-action-btn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: #9CA3AF; width: 28px; height: 28px; border-radius: 6px;
  cursor: pointer; font-size: .75rem; transition: all .18s;
  display: flex; align-items: center; justify-content: center;
}
.tbl-action-btn:hover { background: rgba(79,70,229,.2); color: #A5B4FC; border-color: rgba(79,70,229,.35); }
.tbl-action-print:hover { background: rgba(16,185,129,.15); color: #34D399; border-color: rgba(16,185,129,.3); }

/* ─────────────────────────────────────────────
   DASHBOARD ANALYTICS PAGE
───────────────────────────────────────────── */
#page-analytics {
  /* Uses .page class already */
}
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.analytics-kpi {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1.25rem;
  text-align: center; position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.analytics-kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.analytics-kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--kpi-color, #E6B800);
}
.analytics-kpi-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--kpi-bg, rgba(230,184,0,.12));
  color: var(--kpi-color, #E6B800);
  margin: 0 auto .75rem; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.analytics-kpi-val { font-size: 2rem; font-weight: 900; color: var(--kpi-color, #E6B800); line-height: 1; margin-bottom: .35rem; }
.analytics-kpi-label { font-size: .78rem; color: var(--text-muted, #666); font-weight: 600; }
.analytics-kpi-sub { font-size: .68rem; color: var(--text-muted, #888); margin-top: .2rem; }

.analytics-charts-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; margin-bottom: 1.5rem;
}
@media (max-width: 768px) { .analytics-charts-row { grid-template-columns: 1fr; } }

.analytics-chart-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1.25rem;
}
.analytics-chart-title {
  font-size: .88rem; font-weight: 800; color: #E5E7EB;
  margin-bottom: 1rem; display: flex; align-items: center; gap: .4rem;
}
.analytics-chart-title i { color: #E6B800; }
.analytics-chart-wrap { height: 240px; position: relative; }

.analytics-risk-list { display: flex; flex-direction: column; gap: .65rem; }
.risk-bar-row {
  display: flex; align-items: center; gap: .75rem;
}
.risk-bar-label { font-size: .78rem; color: #9CA3AF; min-width: 160px; flex-shrink: 0; font-weight: 600; }
.risk-bar-track { flex: 1; height: 10px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; }
.risk-bar-fill  { height: 100%; border-radius: 5px; transition: width .7s ease; }
.risk-bar-count { font-size: .85rem; font-weight: 800; min-width: 32px; text-align: left; }

.analytics-page-container {
  max-width: 1100px;
}