:root{
  --red:#d71920;
  --red-dark:#b9141a;
  --ink:#18232d;
  --muted:#66737d;
  --line:#e1e6ea;
  --bg:#f4f6f8;
  --card:#fff;
  --shadow:0 8px 28px rgba(24,35,45,.08);
}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  min-width:0;
}
img{max-width:100%;height:auto}
a{-webkit-tap-highlight-color:transparent}

/* ===== PORTAL HEADER ===== */
.portal-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:100;
}
.portal-top{
  width:min(1680px,100%);
  margin:auto;
  min-height:88px;
  padding:14px clamp(18px,3vw,42px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{display:flex;gap:16px;align-items:center;min-width:0}
.brand>img{
  width:clamp(180px,20vw,300px);
  max-height:64px;
  object-fit:contain;
  object-position:left center;
}
.brand-mark{width:7px;height:46px;background:var(--red)}
.brand-title{font-size:clamp(17px,1.45vw,25px);font-weight:950;line-height:1.1}
.brand-sub{font-size:clamp(10px,.75vw,13px);color:var(--muted);font-weight:800;margin-top:5px}
.location{
  text-align:right;
  font-size:clamp(10px,.7vw,13px);
  line-height:1.5;
  color:#53616b;
  font-weight:800;
  flex:0 0 auto;
}
.location b{color:var(--red)}

/* ===== HERO ===== */
.portal-hero{
  background:linear-gradient(120deg,#fff 0%,#fff 62%,#fff1f2 100%);
  border-bottom:1px solid var(--line);
}
.portal-hero>div{
  width:min(1680px,100%);
  margin:auto;
  padding:clamp(34px,5vw,72px) clamp(18px,3vw,42px) clamp(30px,4vw,58px);
}
.eyebrow{
  font-size:clamp(11px,.75vw,14px);
  color:var(--red);
  font-weight:950;
  letter-spacing:2px;
}
.portal-hero h1{
  font-size:clamp(38px,4.2vw,72px);
  line-height:.98;
  margin:12px 0 16px;
  letter-spacing:-1.5px;
}
.portal-hero p{
  max-width:850px;
  color:#6e7b84;
  font-size:clamp(13px,1vw,17px);
  line-height:1.65;
  margin:0;
}

/* ===== MAIN ===== */
.portal-container{
  width:min(1680px,100%);
  margin:auto;
  padding:clamp(22px,3vw,42px);
}
.portal-section-head{margin-bottom:20px}
.portal-section-head h2{
  margin:0;
  font-size:clamp(22px,1.7vw,30px);
  line-height:1.2;
}
.portal-section-head p{
  margin:7px 0 0;
  font-size:clamp(12px,.85vw,14px);
  color:var(--muted);
}

/* ===== MODULE GRID ===== */
.portal-modules{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.25vw,22px);
}
.module{
  display:flex;
  flex-direction:column;
  min-height:210px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(18px,1.7vw,28px);
  text-decoration:none;
  color:inherit;
  box-shadow:0 2px 8px rgba(24,35,45,.025);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.module:hover{
  transform:translateY(-3px);
  border-color:#efb9bd;
  box-shadow:var(--shadow);
}
.module:active{transform:translateY(-1px)}
.module .icon{
  width:clamp(44px,3.2vw,56px);
  height:clamp(44px,3.2vw,56px);
  background:#fff0f1;
  color:var(--red);
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:clamp(19px,1.4vw,25px);
  font-weight:950;
}
.module h3{
  font-size:clamp(15px,1.05vw,19px);
  margin:16px 0 8px;
  line-height:1.25;
}
.module p{
  font-size:clamp(12px,.82vw,14px);
  line-height:1.55;
  color:#74818a;
  margin:0;
}
.module .go{
  margin-top:auto;
  padding-top:18px;
  color:var(--red);
  font-size:clamp(11px,.75vw,13px);
  font-weight:950;
}
.portal-note{
  margin-top:20px;
  background:#fff8e7;
  border:1px solid #f0dda9;
  border-radius:10px;
  padding:14px;
  font-size:clamp(11px,.78vw,13px);
  color:#735a20;
  line-height:1.5;
}
.portal-footer{
  width:min(1680px,100%);
  margin:auto;
  padding:22px clamp(18px,3vw,42px) 32px;
  color:#7b868e;
  font-size:clamp(10px,.7vw,12px);
}

/* ===== OPTIONAL KPI GRID ===== */
.portal-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:18px 0;
}
.portal-kpis>div{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
}
.portal-kpis span{font-size:11px;color:#7b8790;font-weight:900}
.portal-kpis strong{display:block;font-size:clamp(24px,2vw,34px);margin-top:6px}
.portal-kpis small{font-size:11px;color:#89949b}

/* ===== LOGIN ===== */
.dms-login-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,17,24,.82);
  backdrop-filter:blur(5px);
  padding:18px;
}
.dms-login-overlay[hidden]{display:none}
.dms-login-card{
  width:min(430px,94vw);
  background:#fff;
  border-radius:20px;
  padding:clamp(24px,4vw,34px) clamp(20px,4vw,30px) 25px;
  box-shadow:0 25px 80px rgba(0,0,0,.42);
  text-align:center;
}
.dms-login-logo{
  display:block;
  width:min(300px,82%);
  max-height:82px;
  object-fit:contain;
  margin:0 auto 16px;
}
.dms-login-brand{font-size:25px;font-weight:950;color:var(--red)}
.dms-login-sub{font-size:12px;color:#66737d;font-weight:800;margin:4px 0 20px}
.dms-login-title{font-size:18px;font-weight:950;color:var(--ink);margin-bottom:16px}
.dms-login-card label{display:block;text-align:left;font-size:11px;font-weight:900;color:#56636f;margin:11px 0 5px}
.dms-login-card input{
  width:100%;
  height:46px;
  border:1px solid #cbd3da;
  border-radius:9px;
  padding:0 12px;
  font-size:15px;
  outline:none;
}
.dms-login-card input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(215,25,32,.12)}
.dms-login-btn{
  width:100%;
  height:46px;
  margin-top:18px;
  border:0;
  border-radius:9px;
  background:var(--red);
  color:#fff;
  font-weight:950;
  font-size:14px;
  cursor:pointer;
}
.dms-login-error{min-height:18px;margin-top:9px;color:var(--red);font-size:11px;font-weight:900}
.dms-login-note{margin-top:14px;font-size:10px;color:#8b969d}

/* ===== MODULE TOP BAR ===== */
.module-shell-bar{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 14px;
  background:#fff;
  border-bottom:2px solid #c9000a;
  position:sticky;
  top:0;
  z-index:9999;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.module-back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border-radius:8px;
  background:#fff;
  color:#c9000a!important;
  text-decoration:none!important;
  font-size:11px;
  font-weight:950;
  white-space:nowrap;
}
.module-back:hover{background:#fff3f3}
.module-name{font-size:11px;font-weight:950;color:#18232d;text-align:center;flex:1}
.module-logout{
  border:0;
  border-radius:8px;
  background:#c9000a;
  color:#fff;
  padding:9px 12px;
  font-size:10px;
  font-weight:950;
  cursor:pointer;
  white-space:nowrap;
}

/* ===== TABLET ===== */
@media (max-width:1100px){
  .portal-modules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-top{min-height:78px}
}

/* ===== PHONE ===== */
@media (max-width:700px){
  .portal-top{
    min-height:74px;
    padding:10px 14px;
    gap:10px;
  }
  .brand{gap:9px}
  .brand>img{
    width:clamp(150px,52vw,235px);
    max-height:52px;
  }
  .brand-title{font-size:15px}
  .brand-sub{font-size:9px;margin-top:2px}
  .location{display:none}

  .portal-hero>div{
    padding:30px 16px 28px;
  }
  .eyebrow{font-size:10px;letter-spacing:1.4px}
  .portal-hero h1{
    font-size:clamp(34px,10vw,48px);
    margin:9px 0 12px;
    letter-spacing:-.8px;
  }
  .portal-hero p{font-size:13px;line-height:1.55}

  .portal-container{padding:20px 14px 12px}
  .portal-section-head{margin-bottom:15px}
  .portal-section-head h2{font-size:22px}
  .portal-section-head p{font-size:12px;line-height:1.45}

  .portal-modules{grid-template-columns:1fr;gap:12px}
  .module{
    min-height:0;
    padding:17px;
    border-radius:13px;
  }
  .module .icon{width:44px;height:44px;font-size:19px;border-radius:10px}
  .module h3{font-size:15px;margin:13px 0 6px}
  .module p{font-size:12px;line-height:1.5}
  .module .go{font-size:11px;padding-top:14px}

  .portal-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .portal-kpis>div{padding:13px}
  .portal-kpis span{font-size:9px}
  .portal-kpis strong{font-size:23px}
  .portal-kpis small{font-size:9px}

  .portal-footer{padding:18px 14px 24px;font-size:9px}

  .module-shell-bar{
    padding:8px 9px;
    gap:8px;
  }
  .module-back{
    padding:8px 9px;
    font-size:10px;
  }
  .module-name{font-size:10px}
  .module-logout{
    padding:8px 9px;
    font-size:9px;
  }

  .dms-login-card{width:min(430px,94vw);padding:24px 20px}
}

/* ===== VERY SMALL PHONES ===== */
@media (max-width:380px){
  .brand>img{width:145px}
  .brand-title{font-size:13px}
  .brand-sub{font-size:8px}
  .portal-hero h1{font-size:33px}
  .portal-container{padding-left:11px;padding-right:11px}
}

/* ===== LARGE TV / WALL DISPLAY ===== */
@media (min-width:1600px){
  .portal-top{min-height:102px}
  .brand>img{width:330px;max-height:74px}
  .portal-hero h1{font-size:72px}
  .portal-modules{gap:22px}
  .module{min-height:235px}
}