/* ==========================================================================
   T-Fiber MIS — Login Page
   Standalone stylesheet, consistent with the T-Fiber MIS design system
   (navy / gold palette, Roboto typography) but self-contained for this page.
   ========================================================================== */

:root{
  --navy:#16233f;
  --navy-2:#2b4a86;
  --navy-3:#1a3568;
  --gold:#e8b13a;
  --bg-page:#eef3f8;
  --card-bg:#fff;
  --border:#e0ded8;
  --text-dark:#1a1815;
  --text-body:#2c2a26;
  --text-muted:#4a4740;
  --text-faint:#8b8880;
  --font-sans:'Roboto',system-ui,sans-serif;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--bg-page);
  font-family:var(--font-sans);
  color:var(--text-body);
}

.login-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- top accent bar ---------- */

.top-accent-bar{
  height:5px;
  flex:none;
  background:linear-gradient(90deg, var(--navy), var(--navy-2), var(--gold));
}

/* ---------- header (styled after the T-Fiber corporate header) ---------- */

.site-header{
  flex:none;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:18px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.header-left,
.header-right{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1;
  min-width:180px;
}
.header-right{justify-content:flex-end}

.header-divider{
  width:1px;
  height:48px;
  background:var(--border);
}

.header-center{
  text-align:center;
  flex:2;
  min-width:260px;
}
.header-title{
  font:900 24px/1.2 var(--font-sans);
  color:brown;
  letter-spacing:.01em;
}
.header-subtitle{
  font:400 12.5px/1.4 var(--font-sans);
  color:var(--text-faint);
  margin-top:2px;
}

/* logo slots (T-Fiber, Government emblem, partner logos) */

.logo-slot{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  overflow:hidden;
}
.logo-slot--tfiber{width:170px;height:60px}
.logo-slot--emblem{width:68px;height:68px;border-radius:50%;border:1px solid var(--border)}
.logo-slot--partner{width:170px;height:68px}


.logo-fallback{
  font:700 11px var(--font-sans);
  letter-spacing:.03em;
  color:var(--navy-2);
  text-align:center;
  padding:0 4px;
}
.logo-slot--emblem .logo-fallback{font-size:11px;color:var(--text-faint)}
.logo-slot--partner .logo-fallback{font-size:10px;color:var(--text-faint)}

.logo-slot img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  background:#fff;
}
.logo-slot--emblem img{border-radius:50%}

/* ---------- body: two-column layout ---------- */

.login-body{
  flex:1;
  display:flex;
  min-height:0;
}

/* ---------- LEFT: dignitaries panel ---------- */

.dignitaries-panel{
  position:relative;
  flex:1.35;
  min-width:0;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--navy);
}

.dignitaries-bg{
  position:absolute;inset:0;
  background-image:
   url('../img/bg_what_we_offer.png');
  background-size:cover;
  background-position:center;
}

.dignitaries-overlay{
  position:absolute;inset:0;
  background:radial-gradient(circle at 15% 15%, rgba(232,177,58,.18), transparent 55%);
}

.dignitaries-content{
  position:relative;
  z-index:1;
  padding:56px 64px;
  width:100%;
}

.dignitaries-heading{
  font:700 40px/1.22 var(--font-sans);
  color:#fff;
  margin:0 0 18px;
  max-width:620px;
  text-shadow:0 2px 14px rgba(0,0,0,.25);
}

.dignitaries-subtext{
  font:400 15px/1.6 var(--font-sans);
  color:rgba(255,255,255,.82);
  max-width:auto;
  margin:0 0 40px;
  background-color:#1a3568;
  padding: 5px;
   border-radius:12px;
}

/* dignitary photo cards */

.dignitary-cards{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.dignitary-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:18px 16px;
  width:168px;
  text-align:center;
  backdrop-filter:blur(6px);
  transition:transform .18s ease, background .18s ease;
}
.dignitary-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.13);
}

.dignitary-photo-slot{
  position:relative;
  width:84px;height:84px;
  margin:0 auto 14px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--navy-2), var(--navy-3));
  border:3px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}

.dignitary-fallback{
  font:700 15px var(--font-sans);
  color:#fff;
  letter-spacing:.02em;
}

.dignitary-photo-slot img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}

.dignitary-name{
  font:600 13px/1.3 var(--font-sans);
  color:#fff;
}

.dignitary-role{
  font:400 11px/1.4 var(--font-sans);
  color:rgba(255,255,255,.68);
  margin-top:3px;
}

/* ---------- RIGHT: login panel ---------- */

.login-panel{
  flex:1;
  min-width:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 32px;
  background:var(--bg-page);
}

.login-card{
  width:100%;
  max-width:500px;
  background:var(--card-bg);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(22,35,63,.14);
  padding:40px 36px;
}

.login-card-title{
  font:700 26px/1.2 var(--font-sans);
  color:var(--navy-2);
  text-align:center;
}

.login-card-subtitle{
  font:400 13.5px/1.4 var(--font-sans);
  color:var(--text-faint);
  text-align:center;
  margin-top:6px;
  margin-bottom:30px;
}

.field{
  margin-bottom:20px;
}

.field-label{
  display:block;
  font:600 12.5px var(--font-sans);
  color:var(--text-muted);
  margin-bottom:7px;
}

.input-with-icon{
  position:relative;
  display:flex;
  align-items:center;
}

.input-icon{
  position:absolute;
  left:14px;
  color:var(--text-faint);
  pointer-events:none;
}

.input-with-icon input{
  width:100%;
  height:46px;
  padding:0 44px;
  border:1px solid #dcd9d2;
  border-radius:9px;
  font:400 14px var(--font-sans);
  color:var(--text-body);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input-with-icon input:focus{
  outline:none;
  border-color:var(--navy-2);
  box-shadow:0 0 0 3px rgba(43,74,134,.15);
}
.input-with-icon input::placeholder{color:var(--text-faint)}

.toggle-password{
  position:absolute;
  right:12px;
  width:28px;height:28px;
  border:none;
  background:none;
  color:var(--text-faint);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  transition:color .15s ease, background .15s ease;
}
.toggle-password:hover{background:var(--bg-page);color:var(--navy-2)}
.toggle-password.is-visible{color:var(--navy-2)}

.field-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:26px;
  flex-wrap:wrap;
  gap:8px;
}

.remember-me{
  display:flex;
  align-items:center;
  gap:7px;
  font:400 12.5px var(--font-sans);
  color:var(--text-muted);
  cursor:pointer;
}
.remember-me input{
  width:15px;height:15px;
  accent-color:var(--navy-2);
  cursor:pointer;
}

.forgot-link{
  font:500 12.5px var(--font-sans);
  color:var(--navy-2);
  text-decoration:none;
}
.forgot-link:hover{text-decoration:underline}

.login-btn{
  width:100%;
  height:48px;
  border:none;
  border-radius:9px;
  background:linear-gradient(135deg, #1f7a5c, #14563f);
  color:#fff;
  font:600 15px var(--font-sans);
  cursor:pointer;
  box-shadow:0 8px 20px rgba(31,122,92,.32);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.login-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(31,122,92,.4);
  background:linear-gradient(135deg, #259670, #14563f);
}
.login-btn:active{transform:translateY(0)}

.login-footnote{
  margin-top:24px;
  text-align:center;
  font:400 11px var(--font-sans);
  color:var(--text-faint);
}

/* ---------- footer ---------- */

.site-footer{
  flex:none;
  padding:14px 24px;
  text-align:center;
  font:400 11.5px var(--font-sans);
  color:var(--text-faint);
  background:#fff;
  border-top:1px solid var(--border);
}

/* ---------- toast ---------- */

.toast{
  position:fixed;
  left:50%;bottom:32px;
  transform:translateX(-50%) translateY(20px);
  background:var(--navy);
  color:#fff;
  font:500 12.5px var(--font-sans);
  padding:10px 18px;
  border-radius:7px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:100;
  max-width:90vw;
  text-align:center;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ---------- responsive ---------- */

@media (max-width: 980px){
  .login-body{flex-direction:column}
  .dignitaries-panel{padding:20px 0}
  .dignitaries-content{padding:36px 28px}
  .dignitaries-heading{font-size:30px}
  .dignitary-cards{justify-content:center}
  .login-panel{padding:32px 20px}
}

@media (max-width: 620px){
  .site-header{padding:12px 16px}
  .header-title{font-size:19px}
  .header-subtitle{font-size:11px}
  .logo-slot--tfiber{width:96px;height:34px}
  .dignitaries-heading{font-size:24px}
  .dignitary-cards{gap:12px}
  .dignitary-card{width:130px;padding:14px 10px}
  .dignitary-photo-slot{width:64px;height:64px}
}