/* GMT STAFF PORTAL (team 49807) — Blazor port of interfaces/gmt/_gmt.css, scoped to .gmt-staff-portal.
   Brand: GMT blue #3E55FF, red #EB4149, Anton headings, Inter body. */

.gmt-staff-portal{--gmtsp-blue:#3E55FF; --gmtsp-blue-hover:#5C6FFD; --gmtsp-red:#EB4149; --gmtsp-orange:#FF4A11; --gmtsp-dark:#2F3035; font-family:'Inter',sans-serif; color:#464646; min-height:100vh; display:flex; flex-direction:column;
    /* GMT-blue button branding (Christine 2026-07-03: this portal is the one exception to
       Argenta teal). app.css paints every .btn via an !important high-specificity catch-all
       reading these variables, so redefining them in the portal scope is what actually wins. */
    --color-buttons:#3E55FF; --color-buttons-hover:#5C6FFD; --color-buttons-text:#FFFFFF; --color-buttons-text-hover:#FFFFFF}
.gmt-staff-portal h1{font-family:'Anton',sans-serif; font-size:48px; color:var(--gmtsp-blue)}
.gmt-staff-portal h2{font-family:'Inter',sans-serif; font-size:22px; font-weight:bold; color:var(--gmtsp-blue)}
.gmt-staff-portal h3{font-family:'Anton',sans-serif; font-size:30px; color:var(--gmtsp-blue)}
.gmt-staff-portal p{color:var(--gmtsp-dark)}
.gmt-staff-portal .primary{color:var(--gmtsp-blue)}
.gmt-staff-portal .tertiary{color:var(--gmtsp-red)}
.gmt-staff-portal .red{color:var(--gmtsp-red) !important}
.gmt-staff-portal .orange{color:var(--gmtsp-orange) !important}
.gmt-staff-portal .black{color:#000}
.gmt-staff-portal .gray{color:var(--gmtsp-dark)}
.gmt-staff-portal .white{color:#FFF !important}
.gmt-staff-portal .green{color:#00CC78}
.gmt-staff-portal .bold{font-weight:bold}
.gmt-staff-portal .font-75{font-size:75%}
.gmt-staff-portal .font-90{font-size:90%}
.gmt-staff-portal .font-120{font-size:120%}
.gmt-staff-portal .form-field{font-family:'Inter',sans-serif; font-size:.80em; margin-bottom:2rem}
.gmt-staff-portal .form-field .form-control{font-family:'Inter',sans-serif !important; font-size:12px !important; font-weight:500 !important}
.gmt-staff-portal textarea{font-family:'Inter',sans-serif !important; font-size:12px !important; font-weight:500 !important}
.gmt-staff-portal .rfv{font-size:.5rem; margin-right:.25rem; vertical-align:text-top; padding-top:.30rem; color:var(--gmtsp-red)}
.gmt-staff-portal .border-all{border:solid 1px #CCC !important; margin:.20%; padding:1% !important; margin-bottom:1rem}
.gmt-staff-portal .validation-error{color:var(--gmtsp-red); font-size:.85em; display:block; margin-top:.15rem}
.gmt-staff-portal .alert-inline{color:var(--gmtsp-red); font-size:110%}

/* ── Public (pre-login) chrome ─────────────────────────────────────────── */
.gmtsp-public{background:url('/images/interfaces/49807/bg-staff.jpg') center/cover no-repeat fixed}
.gmtsp-public-header{display:flex; align-items:flex-start; justify-content:flex-start; gap:1.5rem; height:79px; padding-left:5%; padding-top:8px}
.gmtsp-public-logo{height:60px}
.gmtsp-back-link{color:#FFF !important; text-decoration:underline; margin-top:1.4rem; font-size:.9rem}
.gmtsp-public-main{flex:1; display:flex; justify-content:center; align-items:flex-start; padding:4% 1rem 5rem}
.gmtsp-auth-box{background:#FFF; width:100%; max-width:420px; margin-top:6vh; box-shadow:0 2px 12px 0 rgba(40,40,40,.25)}
.gmtsp-auth-box--wide{max-width:640px; margin-top:2vh}
.gmtsp-auth-box h1{text-align:center; margin-top:1rem; font-size:42px}
.gmtsp-auth-box .gmtsp-auth-lead{text-align:center; padding:0 1.5rem; font-size:.85rem}
.gmtsp-auth-fields{padding:0 2rem}
.gmtsp-auth-box--wide .gmtsp-auth-fields{padding:0 2.5rem}
.gmtsp-auth-box .form-field{margin-bottom:1.25rem}
.gmtsp-login-button{display:inline-block; width:75%; padding:16px 10px; background:var(--gmtsp-blue); border:0; font-family:'Inter',sans-serif; font-size:100%; color:#FFF; text-align:center; cursor:pointer; margin:1rem 0}
.gmtsp-login-button:hover{background:var(--gmtsp-blue-hover); color:#FFF}
.gmtsp-login-button:disabled{opacity:.65; cursor:default}
.gmtsp-auth-footer{background:var(--gmtsp-dark); color:#FFF; text-align:center; font-size:.85rem; padding:.5rem 0}
.gmtsp-auth-footer a{color:#FFF; text-decoration:underline}
.gmtsp-forgot-link{display:block; color:var(--gmtsp-dark); font-size:.8rem; text-decoration:underline}
/* Honeypot bot trap — visually hidden, still in the form for bots that fill everything. */
.gmtsp-hp{position:absolute; left:-6000px; top:-6000px}

/* ── Authed chrome ─────────────────────────────────────────────────────── */
.gmtsp-authed{background:#FFF}
.gmtsp-header{display:flex; align-items:center; justify-content:space-between; height:79px; border-bottom:solid 1px #ACBDC9; padding:0}
.gmtsp-header-logo{height:79px; margin-left:5%; background:var(--gmtsp-blue); padding:8px 20px; box-sizing:border-box}
.gmtsp-header-phone{margin-right:5%; font-size:14px; color:#7D8D98}
.gmtsp-quicklinks{text-align:right; padding:.5rem 1rem 0 0; font-size:90%}
.gmtsp-quicklinks a{color:var(--gmtsp-red); text-decoration:none; margin-left:1.5rem}
.gmtsp-quicklinks a:hover{color:var(--gmtsp-blue)}
.gmtsp-main{flex:1; padding-bottom:5rem}
.gmtsp-page-heading{text-align:center; margin:3rem 0}

/* ── Dashboard category tiles (port of a.category-white / a.category-blue) ── */
.gmt-staff-portal a.category-white{border:5px solid var(--gmtsp-blue); margin-top:-1px; background:#FFF; padding:20px; text-align:center; overflow:hidden; display:block; margin-right:-1px; color:#464646; text-decoration:none; transition:border .5s ease-out}
.gmt-staff-portal a.category-white:hover{text-decoration:none; border:5px solid var(--gmtsp-red); color:var(--gmtsp-red)}
.gmt-staff-portal .category-white .icon{width:64px; height:64px; display:inline-block; background-color:var(--gmtsp-blue); color:#FFF; border-radius:50%; margin-top:5px; margin-bottom:15px; transition:background-color .5s ease-out}
.gmt-staff-portal a.category-white:hover .icon{background-color:var(--gmtsp-red); color:#FFF}
.gmt-staff-portal a.category-blue{border:5px solid #FFF; margin-top:-1px; background:var(--gmtsp-blue); color:#FFF; padding:20px; text-align:center; overflow:hidden; display:block; margin-right:-1px; text-decoration:none; transition:background .5s ease-out}
.gmt-staff-portal a.category-blue:hover{text-decoration:none; border:5px solid #FFF; background:var(--gmtsp-red); color:#FFF}
.gmt-staff-portal .category-blue .icon{width:75px; height:64px; width:64px; display:inline-block; background-color:#FFF; color:var(--gmtsp-blue); border-radius:50%; margin-top:5px; margin-bottom:15px; transition:background-color .5s ease-out}
.gmt-staff-portal a.category-blue:hover .icon{background-color:#FFF; color:var(--gmtsp-red)}
.gmt-staff-portal .category-start{font-weight:bold; color:var(--gmtsp-red)}

/* ── Buttons — ALL GMT blue #3E55FF. Christine 2026-07-03: this portal is the one
   exception to the Argenta teal button standard; every button is branded GMT blue. ── */
.gmt-staff-portal .submit-button{min-width:200px; padding:16px 10px; background-color:var(--gmtsp-blue); border:0; font-family:'Inter',sans-serif; font-size:100%; color:#FFF; text-align:center; cursor:pointer}
.gmt-staff-portal .submit-button:hover{background-color:var(--gmtsp-blue-hover); color:#FFF}
.gmt-staff-portal .submit-button:disabled{opacity:.65; cursor:default}
.gmt-staff-portal .btn-blue{background:var(--gmtsp-blue); color:#FFF}
.gmt-staff-portal .btn-blue:hover{background:var(--gmtsp-blue-hover); color:#FFF}
.gmt-staff-portal .btn-gray{background:var(--gmtsp-blue); color:#FFF}
.gmt-staff-portal .btn-gray:hover{background:var(--gmtsp-blue-hover); color:#FFF}
/* Safety net: app.css themes EVERY .btn Argenta teal via a high-specificity catch-all
   (":not(.notification-window-footer) > .btn:not(...)x7" -> var(--color-buttons)), which
   outranks any scoped class rule. !important is the only clean win, and inside this
   portal every .btn is GMT blue anyway. */
.gmt-staff-portal .btn{background:var(--gmtsp-blue) !important; border-color:var(--gmtsp-blue) !important; color:#FFF !important}
.gmt-staff-portal .btn:hover{background:var(--gmtsp-blue-hover) !important; border-color:var(--gmtsp-blue-hover) !important; color:#FFF !important}

/* ── Radio / checkbox rows (port of the .cbl inline lists) ─────────────── */
.gmt-staff-portal .gmtsp-choice-row{display:flex; flex-wrap:wrap; gap:1rem .25rem; align-items:center}
.gmt-staff-portal .gmtsp-choice{display:inline-flex; align-items:center; gap:.35rem; margin-right:1rem; cursor:pointer; color:#464646}
.gmt-staff-portal .gmtsp-choice input{accent-color:var(--gmtsp-blue); width:1.05em; height:1.05em; cursor:pointer}
.gmt-staff-portal .gmtsp-rating-label{color:#747577}

/* ── DateTimePicker inside the portal: GMT blue instead of the component's hardcoded
   Argenta teal (focus ring, nav/icon hovers, today/selected day, time controls). ── */
.gmt-staff-portal .dtp-display:focus{border-color:var(--gmtsp-blue); box-shadow:0 0 0 .2rem rgba(62,85,255,.25)}
.gmt-staff-portal .dtp-icon:hover{color:var(--gmtsp-blue)}
.gmt-staff-portal .dtp-nav:hover{background-color:var(--gmtsp-blue); color:#fff}
.gmt-staff-portal .dtp-day.today{color:var(--gmtsp-blue)}
.gmt-staff-portal .dtp-day.selected{background-color:var(--gmtsp-blue); color:#fff}
.gmt-staff-portal .dtp-time-nav:hover{background-color:var(--gmtsp-blue); color:#fff}
.gmt-staff-portal .dtp-hour:focus, .gmt-staff-portal .dtp-minute:focus{border-color:var(--gmtsp-blue); box-shadow:0 0 0 .2rem rgba(62,85,255,.25)}
.gmt-staff-portal .dtp-ampm-toggle{background-color:var(--gmtsp-blue)}
.gmt-staff-portal .dtp-ampm-toggle:hover{background-color:var(--gmtsp-blue-hover)}
.gmt-staff-portal .dtp-wrapper input::selection{background-color:var(--gmtsp-blue); color:#fff}

/* ── Settings / misc ───────────────────────────────────────────────────── */
.gmt-staff-portal .gmtsp-photo{width:100px; border:1px solid #DEE2E6; border-radius:.25rem; padding:.25rem; background:#FFF}
.gmt-staff-portal .gmtsp-eval-block{border:solid 1px #CCC; padding:1rem; margin-bottom:.75rem}

@media screen and (max-width:768px){
.gmtsp-public-logo{height:44px}
.gmt-staff-portal h1{font-size:34px}
.gmtsp-quicklinks{text-align:center}
.gmtsp-quicklinks a{margin-left:.75rem; margin-right:.75rem}
}