/* Employee portal — warm cream + teal, per chosen mockup */
body:has(#dashboard.active){background:#f7f1e3}
#dashboard{background:#f7f1e3}
.portal-shell{background:#f7f1e3}

.portal-sidebar{background:#fff;border-radius:18px;margin:14px 0 14px 14px;height:calc(100vh - 28px);box-shadow:0 10px 30px rgba(23,48,74,.07);padding:0 12px 18px}
.portal-brand{background:#fff;margin:12px -12px 0;height:108px;border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 8px 22px rgba(20,48,79,.07)}
.portal-brand img{filter:none;opacity:1}
@media(min-width:761px){.portal-brand img{width:192px}}
.portal-nav{padding-top:16px}
.portal-nav a{color:#3f5364;font-weight:600;border-radius:11px;height:42px}
.portal-nav a span{color:#2fa392}
.portal-nav a:hover{background:#eef8f5;color:#1d4a43}
.portal-nav a.active{background:#2fa392;color:#fff;box-shadow:0 8px 18px rgba(47,163,146,.28)}
.portal-nav a.active span{color:#fff}
.portal-nav .side-count{background:#2fa392;color:#fff}
.portal-quote{color:#8a97a3}
.portal-quote strong{color:#5a6b78}
.portal-logout{color:#6b7c8d;border-top:1px solid #f0e9da;padding-top:14px;margin-top:10px}
.portal-logout:hover{color:#2fa392}

.portal-main{padding:0 14px 30px}
.portal-topbar{background:#f7f1e3;border-bottom:0;margin:12px -14px 0;padding:0 18px;position:sticky;top:0}
.portal-search{background:#fff;border:1px solid #f0e9da;height:38px}
.portal-icon-btn{color:#3f5364}
.portal-profile-mini b{color:#3f5364}

.portal-hero{border-radius:18px}
.portal-stat-row{gap:12px;margin:14px 0}
.portal-stat{border:0;border-radius:14px;box-shadow:0 8px 24px rgba(23,48,74,.06);min-height:76px}
.portal-stat small{color:#8a97a3;font-weight:700}
.portal-stat strong{color:#33475a;font-size:15px}

.portal-content-grid{gap:14px;margin-top:4px}
.portal-main-column,.portal-right-column{gap:14px}
.portal-card{border:0;border-radius:16px;box-shadow:0 8px 26px rgba(23,48,74,.06);padding:18px}
.portal-card h3{color:#33475a}
.portal-card p{color:#8a97a3}
.portal-card-head .view-all{color:#2fa392}

.complete-meter>div{background:#efe9db}
.complete-meter>div span{background:linear-gradient(90deg,#2fa392,#5cc3ae)}
.portal-timeline:before{background:#e3ddd0}
.portal-timeline .step i{background:#f4f0e6;box-shadow:0 0 0 1px #e7e0d2;color:#9aa89f}
.portal-timeline .step.done i{background:#2fa392;color:#fff;box-shadow:0 0 0 3px #d9efe9}
.portal-timeline .step:not(.done):nth-child(4) i{background:#26897a;color:#fff;box-shadow:0 0 0 3px #d9efe9}
.portal-timeline .step b{color:#3f5364}
.portal-timeline .step small{color:#a4b0ac}

.portal-doc-grid .doc{border:1px solid #f0e9da;border-radius:12px}
.portal-doc-grid .doc.available em{background:#e2f4ee;color:#20876f}
.portal-doc-grid .doc a{background:#2fa392;color:#fff}
.portal-doc-grid .doc a:hover{background:#26897a}
.portal-doc-grid .doc>span{background:#f2eee2;color:#8a97a3}

.portal-upload-form{background:#fbf7ec;border-color:#e5dcc7;border-radius:12px}
.portal-upload-form input,.portal-upload-form select{border-color:#e5dcc7}
#dashboard .btn.primary{background:#2fa392;color:#fff;box-shadow:0 8px 20px rgba(47,163,146,.25);border-radius:10px}
#dashboard .btn.primary:hover{background:#26897a}
.portal-blue-btn{background:#2fa392}
.portal-blue-btn:hover{background:#26897a}
.portal-upload-form input[type=file]{background:#fff}
.pill-soft{background:#eef7f4;color:#2f8d7d}

#chat .portal-card-head{background:#2fa392;margin:-18px -18px 14px;padding:15px 18px;border-radius:16px 16px 0 0}
#chat .portal-card-head h3{color:#fff}
#chat .portal-card-head p{color:rgba(255,255,255,.82)}
#chat .chat-status{background:rgba(255,255,255,.2);color:#fff}
#chat .chat-status.on{background:#fff;color:#1d8a76}
#chat .chat-status.off{background:#fff;color:#a52828}
.chat-contact.active{background:#eef8f5}
.chat-avatar{background:#e2f4ee;color:#20876f}
.chat-messages{background:#fbf9f3;border-color:#f0e9da;border-radius:12px}
.chat-msg.mine{background:#2fa392}
.portal-send-btn{background:#2fa392}
.portal-send-btn:hover{background:#26897a}
.chat-unread,.badge-count{background:#2fa392}

.next-card{background:linear-gradient(135deg,#eef8f5,#fff)}
.next-card>span{background:#e2f4ee;color:#20876f}
.quick-link{border-color:#f0e9da}
.active-tag{background:#e2f4ee;color:#20876f}
.motivation-card span{color:#c98a2c}

@media(max-width:760px){
 .portal-sidebar{margin:10px 8px 0;height:auto;position:relative;border-radius:16px;padding:0 8px 14px}
 .portal-brand{margin:10px -8px 0;height:70px;border-radius:16px 16px 0 0}
 .portal-brand img{width:46px;object-fit:cover;object-position:left}
 .portal-nav a{height:38px}
 .portal-topbar{background:#f7f1e3}
}
@media(max-width:480px){
 .portal-main{padding:0 8px 20px}
 .portal-stat{min-height:64px}
}

/* Welcome banner + topbar logout */
.portal-welcome{padding:14px 6px 2px}
.portal-welcome h2{margin:0;font:800 clamp(22px,3.2vw,30px)/1.15 Manrope;color:#26323f;letter-spacing:-.5px}
.portal-welcome h2 span{color:#2fa392}
.portal-welcome p{margin:7px 0 0;color:#5d6f7d;font-size:15px;font-weight:500}
.portal-top-logout{border:1.5px solid #2fa392;background:#fff;color:#1d8a76;border-radius:999px;padding:9px 16px;font:700 15px Inter;cursor:pointer;transition:.2s}
.portal-top-logout:hover{background:#2fa392;color:#fff;transform:translateY(-1px)}

/* Bigger, clearer text across the portal */
#dashboard{font-size:15px;color:#33475a}
.portal-nav a{font-size:16px;color:#33475a}
.portal-nav a span{font-size:19px}
.portal-card h3{font-size:18px;color:#26323f}
.portal-card p{font-size:15px;color:#5d6f7d;line-height:1.55}
.portal-card-head .view-all{font-size:14px}
.portal-stat small{font-size:13px;color:#6b7c8d}
.portal-stat strong{font-size:16px;color:#26323f}
.portal-timeline .step b{font-size:13px;color:#33475a}
.portal-timeline .step small{font-size:12px;color:#7d8b90}
.portal-doc-grid .doc strong{font-size:15px;color:#26323f}
.portal-doc-grid .doc small{font-size:13px;color:#6b7c8d}
.portal-doc-grid .doc em{font-size:12px}
.portal-doc-grid .doc a,.portal-doc-grid .doc>span{font-size:12px;height:28px}
.portal-upload-form label{font-size:13px;color:#5d6f7d}
.portal-upload-form input,.portal-upload-form select{font-size:15px;height:38px}
.portal-subhead{font-size:14px}
.portal-upload-list .upload-item strong{font-size:14px}
.portal-upload-list .upload-item small{font-size:13px}
.portal-upload-list .upload-item em{font-size:12px}
.upload-item strong{font-size:15px}
.upload-item small{font-size:13px}
.upload-item em{font-size:12px}
.chat-contact b{font-size:14px}
.chat-contact small{font-size:12px}
.chat-msg p{font-size:14px}
.chat-msg small{font-size:12px}
.chat-status{font-size:13px}
.chat-form input{font-size:15px;height:38px}
.quick-link b{font-size:14px;color:#33475a}
.quick-link small{font-size:13px;color:#7d8b90}
.portal-notification-list b{font-size:14px;color:#33475a}
.portal-notification-list span{font-size:13px;color:#6b7c8d}
.portal-notification-list time{font-size:12px}
.notification-item b{font-size:14px}
.notification-item p{font-size:13px}
.profile-card h3{font-size:20px}
.profile-card-top p{font-size:15px}
.profile-code{font-size:13px}
.complete-meter strong{font-size:14px}
.pill-soft{font-size:12px}
.muted{color:#6b7c8d!important;opacity:1!important}
.portal-search input{font-size:15px}
.portal-quote{font-size:15px;color:#8a97a3}

/* Login form readability */
.form label{font-size:14px;color:#44566b}
.form input,.form select{font-size:15px;padding:13px}
.form .demo-note{font-size:14px}

/* Light bumps on the public pages */
.cards p,.panel>p{font-size:16px}
.feature-strip div{font-size:15px}
.footer-grid{font-size:16px}
.footer-links a{font-size:16px}

@media(max-width:760px){
 .portal-welcome{padding:12px 4px 0}
 .portal-welcome h2{font-size:22px}
 .portal-welcome p{font-size:16px}
 .portal-top-logout{padding:8px 12px;font-size:14px}
 .chat-messages{height:240px}
 .portal-stat small{font-size:12px}
 .portal-stat strong{font-size:15px}
}
@media(max-width:480px){
 .portal-top-logout{padding:7px 11px}
}

/* ===== Mobile upgrade: portal becomes a top bar with the real logo ===== */
@media(max-width:760px){
  .portal-shell{display:block;min-height:100vh;padding-bottom:18px}
  .portal-sidebar{position:sticky;top:0;z-index:90;width:auto;flex:none;height:auto;margin:0;padding:0 10px 8px;background:#fff;border-radius:0 0 16px 16px;box-shadow:0 8px 22px rgba(23,48,74,.10)}
  .portal-brand{display:flex;height:54px;margin:0;padding:0;border-radius:0;border-bottom:1px solid #eef2f5}
  .portal-brand img{width:148px;height:auto;max-height:44px;object-fit:contain;object-position:left;filter:none;opacity:1}
  .portal-sidebar-spacer,.portal-quote,.portal-logout{display:none}
  .portal-nav{height:auto;flex-direction:row;align-items:center;gap:4px;padding:8px 0 2px;overflow-x:auto;scrollbar-width:none}
  .portal-nav::-webkit-scrollbar{display:none}
  .portal-nav a{height:40px;min-width:0;flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:7px;padding:0 12px;border-radius:9px;font-size:13px!important;font-weight:700;text-align:left;color:#33475a;position:relative}
  .portal-nav a span{font-size:16px;width:auto;margin:0!important}
  .portal-nav a.active{background:#e9f2fd;color:#147ac2}
  .portal-nav .side-count{position:static;margin:0;min-width:17px;height:17px;font-size:12px}
  .portal-main{padding:12px 10px 22px}
  .portal-topbar{position:static;height:56px;margin:0 -10px;padding:0 10px;gap:8px;background:#fff;border-bottom:1px solid #eef2f5}
  .portal-search{width:40vw;height:38px}
  .portal-stat-row{grid-template-columns:1fr 1fr;gap:10px}
  .portal-stat{min-height:78px;padding:12px}
  .portal-content-grid{grid-template-columns:1fr;gap:12px}
  .portal-right-column{display:flex;flex-direction:column;gap:12px}
  .portal-card{padding:16px;border-radius:14px}
  .portal-card-head{flex-wrap:wrap;gap:6px}
  .portal-hero{height:170px;margin:12px 0 10px}
  .portal-welcome{padding:10px 2px 0}
  .portal-welcome h2{font-size:21px}
  .portal-timeline{grid-template-columns:repeat(3,1fr);row-gap:16px;padding-top:8px}
  .portal-doc-grid{grid-template-columns:1fr;gap:10px}
  .portal-doc-grid .doc{min-height:0;padding:12px}
  .portal-form-row{grid-template-columns:1fr;gap:10px}
  .chat-layout{grid-template-columns:1fr;gap:10px}
  .profile-card-top{flex-wrap:wrap}
  .modal-card{max-width:94vw;width:94vw}
}
@media(max-width:480px){
  .portal-timeline{grid-template-columns:repeat(2,1fr)}
  .portal-search{width:34vw}
  .portal-brand img{width:132px}
}