/* ============================================================
   Ivory Insurance Agency Portal — Design System
   Matches ivory-portal-design-reference-v2.html
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg0:#ffffff;--bg1:#f5f4f1;--bg2:#eceae4;
  --bgsuccess:#eaf3de;--bgwarn:#fdf3da;--bgdanger:#fceaea;--bginfo:#e6f1fb;
  --tx0:#181816;--tx1:#64635e;--tx2:#9c9a94;
  --txsuccess:#3b6d11;--txwarn:#7a4a08;--txdanger:#821f1f;--txinfo:#0c447c;
  --bd0:rgba(0,0,0,0.28);--bd1:rgba(0,0,0,0.16);--bd2:rgba(0,0,0,0.09);
  --bdsuccess:rgba(59,109,17,0.22);--bdwarn:rgba(186,117,23,0.28);
  --bddanger:rgba(130,31,31,0.22);--bdinfo:rgba(12,68,124,0.22);
  --r1:8px;--r2:12px;--r3:16px;
  --fs:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  --fm:'JetBrains Mono','Courier New',monospace;
  --ivn:#0B4C72;--ivt:#19AECE;--ivtb:rgba(25,174,206,0.09);
  --shadow-sm:0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:0 2px 8px rgba(0,0,0,0.09);
}

html{font-size:14px;}
body{
  font-family:var(--fs);background:var(--bg2);color:var(--tx0);
  line-height:1.5;min-height:100vh;
}

/* ── Typography ───────────────────────────────────────────── */
h1{font-size:19px;font-weight:500;color:var(--tx0);margin:0 0 4px;}
h2{font-size:15px;font-weight:500;color:var(--tx0);margin:0 0 4px;}
a{color:var(--ivt);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── Form controls ────────────────────────────────────────── */
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],textarea,select{
  width:100%;padding:8px 11px;
  border:0.5px solid var(--bd1);border-radius:var(--r1);
  font-family:var(--fs);font-size:13px;color:var(--tx0);background:var(--bg0);
  outline:none;transition:border-color .15s,box-shadow .15s;line-height:1.4;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--ivt);box-shadow:0 0 0 3px var(--ivtb);
}
input[type="checkbox"]{
  width:14px;height:14px;accent-color:var(--ivn);cursor:pointer;flex-shrink:0;
}
select{cursor:pointer;}
label{display:block;font-size:12px;color:var(--tx1);margin-bottom:3px;}

.field{margin-bottom:10px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.field-note{font-size:11px;color:var(--tx2);margin-top:3px;}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border:0.5px solid transparent;border-radius:var(--r1);
  font-size:13px;font-weight:500;cursor:pointer;
  font-family:var(--fs);transition:opacity .15s,background .15s;
  line-height:1;white-space:nowrap;text-decoration:none;
}
.btn:hover{opacity:.88;text-decoration:none;}
.btn:disabled{opacity:.35;cursor:default;pointer-events:none;}
.btn-primary{background:var(--ivt);color:#fff;border-color:var(--ivt);}
.btn-navy{background:var(--ivn);color:#fff;border-color:var(--ivn);}
.btn-navy:hover{background:#083e5e;opacity:1;}
.btn-ghost{background:var(--bg0);color:var(--tx0);border-color:var(--bd1);}
.btn-ghost:hover{border-color:var(--ivn);color:var(--ivn);opacity:1;}
.btn-danger{background:var(--bgdanger);color:var(--txdanger);border-color:var(--bddanger);}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-block{width:100%;}

/* ── Card ─────────────────────────────────────────────────── */
.card{
  background:var(--bg0);border:0.5px solid var(--bd2);
  border-radius:var(--r2);padding:1.75rem;
  box-shadow:var(--shadow-sm);
}
.card-sm{padding:1.1rem;}

/* ── Auth card (centred login/setup) ─────────────────────── */
.auth-shell{
  min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:2rem 1.25rem;
  background:var(--bg2);
}
.auth-card{width:390px;max-width:100%;}
.auth-logo{
  display:flex;align-items:center;gap:9px;
  margin-bottom:1rem;padding-bottom:1rem;
  border-bottom:0.5px solid var(--bd2);
}
.auth-logo-label{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.07em;}
.auth-title{font-size:19px;font-weight:500;margin:0 0 4px;}
.auth-sub{font-size:13px;color:var(--tx1);margin:0 0 1.1rem;}

/* ── OTP single input ─────────────────────────────────────── */
.otp-row,.otp-single-wrap{margin-bottom:1.1rem;}
.otp-single{
  width:100%;padding:10px 14px;
  border:0.5px solid var(--bd1);border-radius:var(--r1);
  font-family:var(--fm);font-size:22px;font-weight:500;
  letter-spacing:.35em;text-align:center;
  color:var(--tx0);background:var(--bg0);
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.otp-single:focus{border-color:var(--ivt);box-shadow:0 0 0 3px var(--ivtb);}
.otp-single::placeholder{letter-spacing:.2em;color:var(--bd0);}

/* ── Password strength indicators ────────────────────────── */
.pw-rules{margin-bottom:1rem;}
.pw-rule{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--tx1);margin-bottom:3px;
  transition:color .2s;
}
.pw-rule-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--bd1);flex-shrink:0;transition:background .2s;
}
.pw-rule.ok{color:var(--txsuccess);}
.pw-rule.ok .pw-rule-dot{background:var(--txsuccess);}

/* ── MFA method cards ─────────────────────────────────────── */
.mfa-methods{display:flex;gap:9px;margin-bottom:1.1rem;}
.mfa-method{
  border:0.5px solid var(--bd1);border-radius:var(--r1);
  padding:12px;cursor:pointer;flex:1;transition:all .15s;
}
.mfa-method:hover{border-color:var(--ivt);}
.mfa-method.sel{border-color:var(--ivt);background:var(--ivtb);}
.mfa-method p{margin:0;}
.mfa-method svg{display:block;margin-bottom:7px;}

/* ── Backup codes grid ────────────────────────────────────── */
.codes-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0;
}
.code-cell{
  font-family:var(--fm);font-size:13px;letter-spacing:.09em;
  padding:9px 10px;background:var(--bg1);border:0.5px solid var(--bd2);
  border-radius:var(--r1);color:var(--tx0);text-align:center;
}
.codes-actions{display:flex;gap:7px;margin-bottom:1rem;}

/* ── Alert boxes ──────────────────────────────────────────── */
.alert{
  padding:9px 12px;border-radius:var(--r1);font-size:12px;
  display:flex;align-items:flex-start;gap:9px;margin-bottom:10px;
}
.alert svg{flex-shrink:0;margin-top:1px;}
.alert-info{background:var(--bginfo);border:0.5px solid var(--bdinfo);color:var(--txinfo);}
.alert-warn{background:var(--bgwarn);border:0.5px solid var(--bdwarn);color:var(--txwarn);}
.alert-danger{background:var(--bgdanger);border:0.5px solid var(--bddanger);color:var(--txdanger);}
.alert-success{background:var(--bgsuccess);border:0.5px solid var(--bdsuccess);color:var(--txsuccess);}

/* ── Step dots ────────────────────────────────────────────── */
.step-dots{display:flex;align-items:center;gap:4px;margin-bottom:1.25rem;}
.step-dot{
  width:24px;height:24px;border-radius:50%;border:0.5px solid var(--bd1);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--tx1);flex-shrink:0;transition:all .2s;
}
.step-dot.active{background:var(--ivt);color:#fff;border-color:var(--ivt);}
.step-dot.done{background:var(--ivn);color:#fff;border-color:var(--ivn);}
.step-line{flex:1;height:0.5px;background:var(--bd2);min-width:6px;max-width:28px;}

/* ── QR code container ────────────────────────────────────── */
.qr-box {
  display: flex;             /* Use flex for better centering */
  align-items: center;
  justify-content: center;
  width: 200px;              /* Slightly larger than the QR to allow for padding */
  min-height: 200px;
  margin: 0 auto 1.5rem;     /* Increased bottom margin to prevent overlap */
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--bd1);
  border-radius: var(--r1);
  box-sizing: border-box;    /* Standardize box model */
}

/* Ensure the generated QR scales correctly to its container */
.qr-box canvas, 
.qr-box img {
  max-width: 180px !important; 
  max-height: 180px !important;
  display: block;
}

/* Add clear separation for the steps */
.qr-steps {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
  text-align: left;         /* Ensure steps align left even if container is centered */
}

.qr-steps li {
  font-size: 12px;
  color: var(--tx1);
  margin-bottom: 6px;
}

/* ── Portal layout (post-login) ───────────────────────────── */
.portal-wrap{min-height:100vh;display:flex;flex-direction:column;}
.portal-header{
  background:var(--ivn);padding:11px 20px;
  display:flex;justify-content:space-between;align-items:center;
}
.portal-header-left{display:flex;align-items:center;gap:10px;}
.portal-header-logo-label{
  font-size:11px;color:rgba(255,255,255,.5);
  text-transform:uppercase;letter-spacing:.07em;margin:0;
}
.portal-header-name{font-size:14px;color:#fff;font-weight:500;margin:0;}
.portal-header-right{display:flex;align-items:center;gap:10px;}
.portal-user-info{text-align:right;}
.portal-user-info p{margin:0;}
.portal-user-info .uname{font-size:12px;color:#fff;}
.portal-user-info .urole{font-size:11px;color:rgba(255,255,255,.5);}
.portal-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--ivt);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;color:#fff;flex-shrink:0;
}
.portal-signout{
  background:rgba(255,255,255,.1);border:0.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.8);padding:4px 10px;border-radius:var(--r1);
  font-size:11px;cursor:pointer;font-family:var(--fs);
  transition:background .15s;
}
.portal-signout:hover{background:rgba(255,255,255,.2);}

/* ── Portal top nav ───────────────────────────────────────── */
.portal-nav{display:flex;align-items:center;gap:2px;}
.portal-nav-btn{
  background:transparent;border:none;
  color:rgba(255,255,255,.6);padding:5px 11px;
  border-radius:var(--r1);font-size:12px;font-weight:500;
  cursor:pointer;font-family:var(--fs);
  transition:background .15s,color .15s;white-space:nowrap;
}
.portal-nav-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.portal-nav-btn.active{background:rgba(255,255,255,.15);color:#fff;}
.portal-header-divider{
  width:0.5px;height:20px;background:rgba(255,255,255,.2);margin:0 6px;
}

/* Password expiry banner */
.expiry-banner{
  background:var(--bgwarn);border-bottom:0.5px solid var(--bdwarn);
  padding:8px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.expiry-banner p{font-size:12px;color:var(--txwarn);margin:0;}
.expiry-banner-actions{display:flex;gap:10px;align-items:center;flex-shrink:0;}

.portal-body{background:var(--bg1);flex:1;padding:1.25rem 1.5rem;}

/* ── Stat cards ───────────────────────────────────────────── */
.stats-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:9px;margin-bottom:1rem;
}
.stat-card{
  background:var(--bg0);border:0.5px solid var(--bd2);
  border-radius:var(--r1);padding:11px 14px;
}
.stat-card-label{font-size:11px;color:var(--tx1);margin:0 0 3px;}
.stat-card-value{font-size:14px;font-weight:500;color:var(--tx0);margin:0;}
.stat-card-value.ok{color:var(--txsuccess);}
.stat-card select{
  border:none;padding:0;background:transparent;
  color:var(--tx0);font-weight:500;font-size:14px;
  cursor:pointer;font-family:var(--fs);width:100%;
}

/* ── Upload panel ─────────────────────────────────────────── */
.upload-panel{
  background:var(--bg0);border:0.5px solid var(--bd2);
  border-radius:var(--r2);padding:1.25rem;margin-bottom:1rem;
}
.upload-panel-title{font-size:14px;font-weight:500;margin:0 0 3px;}
.upload-panel-sub{font-size:12px;color:var(--tx1);margin:0 0 1rem;}

/* Drop zone */
.drop-zone{
  border:1.5px dashed var(--bd1);border-radius:var(--r2);
  padding:2rem;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s;
  position:relative;
}
.drop-zone:hover,.drop-zone.drag-over{
  border-color:var(--ivt);background:var(--ivtb);
}
.drop-zone p{margin:0;}
.drop-zone input[type="file"]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}
.drop-zone-hint{
  font-size:11px;color:var(--tx2);background:var(--bg1);
  padding:3px 10px;border-radius:var(--r1);display:inline-block;margin-top:9px;
}
.file-selected{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:var(--bg1);border-radius:var(--r1);
  margin-top:10px;font-size:12px;color:var(--tx0);
}

/* ── Validation progress ──────────────────────────────────── */
.progress-step{margin-bottom:12px;}
.progress-step-header{
  display:flex;justify-content:space-between;
  margin-bottom:4px;font-size:12px;
}
.progress-step-label{color:var(--tx1);}
.progress-step-status{color:var(--tx1);}
.progress-step-status.ok{color:var(--txsuccess);}
.progress-step-status.err{color:var(--txdanger);}
.progress-bar{
  height:6px;border-radius:3px;background:var(--bd2);overflow:hidden;
}
.progress-fill{
  height:100%;border-radius:3px;
  transition:width .5s;background:var(--txsuccess);width:0%;
}

/* ── Error report table ───────────────────────────────────── */
.error-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:8px;margin-bottom:1rem;
}
.error-count-card{
  background:var(--bgdanger);border-radius:var(--r1);padding:10px;
}
.error-count-card p{margin:0;}
.error-count-label{font-size:11px;color:var(--txdanger);}
.error-count-num{font-size:18px;font-weight:500;color:var(--txdanger);}

.vtbl{width:100%;border-collapse:collapse;font-size:12px;}
.vtbl th{
  text-align:left;padding:6px 8px;color:var(--tx1);font-weight:400;
  border-bottom:0.5px solid var(--bd2);white-space:nowrap;
}
.vtbl td{
  padding:8px;color:var(--tx0);border-bottom:0.5px solid var(--bd2);
  vertical-align:top;
}
.vtbl tr:last-child td{border-bottom:none;}
.vtbl tr.erow{background:var(--bgdanger);}
.vtbl tr.erow td{color:var(--txdanger);}

.err-cell{
  font-size:11px;color:var(--txdanger);background:var(--bgdanger);
  padding:2px 6px;border-radius:4px;display:inline-block;margin:1px 2px 1px 0;
}
.fix-note{font-size:11px;color:var(--tx1);font-style:italic;}
.mono{font-family:var(--fm);font-size:11px;}

/* ── Import progress ──────────────────────────────────────── */
.import-step{margin-bottom:10px;}
.import-step-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;
}
.import-step-label{font-size:12px;color:var(--tx1);}

/* ── Pills / badges ───────────────────────────────────────── */
.pill{
  display:inline-block;font-size:11px;
  padding:2px 8px;border-radius:100px;white-space:nowrap;
}
.pill-ok{background:var(--bgsuccess);color:var(--txsuccess);}
.pill-err{background:var(--bgdanger);color:var(--txdanger);}
.pill-warn{background:var(--bgwarn);color:var(--txwarn);}
.pill-info{background:var(--bginfo);color:var(--txinfo);}
.pill-muted{background:var(--bg1);color:var(--tx1);}

/* ── Session uploads table ────────────────────────────────── */
.session-panel{
  background:var(--bg0);border:0.5px solid var(--bd2);
  border-radius:var(--r2);padding:1.25rem;
}
.session-panel-title{font-size:13px;font-weight:500;margin:0 0 10px;}
.tbl-overflow{overflow-x:auto;}

/* ── Admin: users table ───────────────────────────────────── */
.admin-section{margin-bottom:1.5rem;}
.admin-section-title{
  font-size:13px;font-weight:500;color:var(--tx0);margin:0 0 10px;
  padding-bottom:9px;border-bottom:0.5px solid var(--bd2);
  display:flex;justify-content:space-between;align-items:center;
}

/* ── Separator ────────────────────────────────────────────── */
.sep{display:flex;align-items:center;gap:8px;margin:10px 0;}
.sep-line{flex:1;height:0.5px;background:var(--bd2);}
.sep-text{font-size:11px;color:var(--tx2);}

/* ── Success screen ───────────────────────────────────────── */
.success-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--bgsuccess);display:flex;align-items:center;
  justify-content:center;margin:0 auto 1rem;
}

/* ── Divider ──────────────────────────────────────────────── */
.divider{height:0.5px;background:var(--bd2);margin:1rem 0;}

/* ── Hidden ───────────────────────────────────────────────── */
.hidden{display:none!important;}

/* ── Spinner ──────────────────────────────────────────────── */
.spinner-inline{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--bd2);border-top-color:var(--ivt);
  animation:spin .7s linear infinite;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Overflow scroll ──────────────────────────────────────── */
.overflow-x{overflow-x:auto;}

/* ── Utility ──────────────────────────────────────────────── */
.text-center{text-align:center;}
.text-sm{font-size:12px;}
.text-xs{font-size:11px;}
.text-muted{color:var(--tx2);}
.text-sub{color:var(--tx1);}
.text-ok{color:var(--txsuccess);}
.text-err{color:var(--txdanger);}
.fw-500{font-weight:500;}
.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:4px!important;}
.mt-1{margin-top:10px!important;}
.mt-2{margin-top:1rem!important;}
.flex{display:flex;}
.flex-between{display:flex;justify-content:space-between;align-items:center;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.gap-sm{gap:7px;}
.gap-md{gap:12px;}
.w100{width:100%;}

/* ── Responsive ───────────────────────────────────────────── */

/* Tablet — header starts to get tight */
@media(max-width:860px){
  .portal-header{padding:8px 14px;flex-wrap:wrap;gap:6px;}
  .portal-header-right{gap:6px;}
  .portal-nav-btn{padding:5px 8px;font-size:11px;}
  .portal-user-info .uname{font-size:11px;}
  .portal-user-info .urole{font-size:10px;}
}

/* Mobile — stack logo row and nav row */
@media(max-width:640px){
  /* Header: two rows */
  .portal-header{
    flex-direction:column;align-items:stretch;
    padding:9px 12px 6px;gap:0;
  }
  /* Row 1: logo left, user/avatar/signout right */
  .portal-header-left{justify-content:space-between;}
  /* Shove user info + avatar + signout into header-left on mobile */
  .portal-header-left{display:flex;align-items:center;width:100%;justify-content:space-between;}
  .portal-header-right{
    order:2;justify-content:flex-start;flex-wrap:wrap;
    gap:3px;padding-top:6px;border-top:0.5px solid rgba(255,255,255,.12);
    margin-top:6px;width:100%;
  }
  /* Move user-info + avatar + signout to the right side of row 1 */
  .portal-user-info{order:0;}
  .portal-avatar{order:1;}
  .portal-signout{order:2;}
  .portal-header-divider{display:none;}
  /* Nav fills its row */
  .portal-nav{flex-wrap:wrap;gap:2px;}
  .portal-nav-btn{font-size:11px;padding:4px 8px;}

  /* Hide full user name row, keep avatar for identity */
  .portal-user-info .uname{display:none;}
  .portal-user-info .urole{display:none;}

  /* Body */
  .portal-body{padding:.75rem;}

  /* Cards */
  .card{padding:1.1rem;}
  .upload-panel{padding:1rem;}

  /* Drop zone less tall on mobile */
  .drop-zone{padding:1.25rem 1rem;}

  /* Stats */
  .stats-row{grid-template-columns:1fr 1fr;}

  /* Form rows */
  .field-row{grid-template-columns:1fr;}

  /* Codes */
  .codes-grid{grid-template-columns:1fr 1fr;}
  .codes-actions{flex-wrap:wrap;}

  /* Error summary */
  .error-summary{grid-template-columns:1fr 1fr;}

  /* Error table — horizontal scroll */
  .tbl-overflow,.vtbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* MFA method cards — stack */
  .mfa-methods{flex-direction:column;}

  /* Expiry banner */
  .expiry-banner{flex-direction:column;align-items:flex-start;gap:8px;padding:8px 12px;}
  .expiry-banner-actions{width:100%;}

  /* Auth shell padding */
  .auth-shell{padding:1rem .75rem;}
  .auth-card .card{padding:1.1rem;}
}

/* Very small screens */
@media(max-width:380px){
  .portal-header{padding:8px 10px 5px;}
  .portal-nav-btn{padding:4px 6px;font-size:10px;}
  .stats-row{grid-template-columns:1fr;}
  .codes-grid{grid-template-columns:1fr;}
  .btn{font-size:12px;padding:8px 12px;}
  .btn-sm{padding:5px 9px;font-size:11px;}
  h1{font-size:17px;}
}

/* ── Toast ────────────────────────────────────────────────── */
#toast{
  position:fixed;bottom:20px;right:20px;
  background:var(--tx0);color:#fff;
  padding:10px 16px;border-radius:var(--r1);font-size:13px;
  box-shadow:var(--shadow-md);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:9999;max-width:320px;
}
#toast.show{opacity:1;}