/* Reference-inspired HR access page. All presentation stays scoped to login. */
html:has(#hris-login),html body:has(#hris-login){height:auto!important;min-height:100dvh!important;overflow-x:hidden!important;overflow-y:auto!important;margin:0}
html body .page.login-only-layout:has(#hris-login),html body .page.login-only-layout:has(#hris-login) main,html body .page.login-only-layout:has(#hris-login) .content{display:block!important;width:100%!important;min-height:100dvh!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;background:var(--page)!important}
html body #hris-login{--signin-accent:#0c8277;--signin-ink:#0b1830;--signin-muted:#637897;--signin-line:#cfdaea;position:relative;display:flex!important;flex-direction:column;width:100%!important;min-height:100dvh!important;margin:0!important;padding:40px clamp(32px,4.5vw,88px)!important;overflow:hidden;background:#f8fcfc!important;color:var(--signin-ink);font-family:var(--bs-body-font-family);font-size:14px;line-height:1.45;isolation:isolate;-webkit-font-smoothing:antialiased}
#hris-login *,#hris-login *::before,#hris-login *::after{box-sizing:border-box}
#hris-login [hidden]{display:none!important}
#hris-login button,#hris-login input{font:inherit}
#hris-login a{color:var(--primary-hover);text-decoration:none;font-weight:600}
#hris-login a:hover{text-decoration:underline}
#hris-login a:focus-visible,#hris-login button:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
#hris-login .signin-panel-brand{text-align:left;margin:0 0 18px}
#hris-login .signin-panel-brand img{display:block;width:112px;height:112px;object-fit:contain;margin:0 0 26px;padding:5px;border-radius:50%;background:white;box-shadow:0 5px 18px #244f5612}
#hris-login .signin-panel-brand p{margin:0;font-size:12px;line-height:1.7;letter-spacing:3px;font-weight:700;color:#076f70}
/* Bring the panel closer on wide screens; preserve the sign's clearance on smaller desktops. */
#hris-login .signin-form-side{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;min-width:0;padding:0;transform:translateX(calc(clamp(40px,5vw,96px) + clamp(12px,66.6667vw - 1120px,160px)))}
#hris-login .signin-form-wrap{width:100%;max-width:510px;position:relative;overflow:hidden;padding:40px 32px;border-radius:28px;background:#fff;border:1px solid #fff;box-shadow:0 20px 65px #245b681a;animation:signin-arrive .52s cubic-bezier(.32,.72,0,1) both}
#hris-login .signin-intro h2{font-size:clamp(30px,2.7vw,42px);line-height:1.2;letter-spacing:-1.3px;font-weight:750;color:var(--signin-ink);margin:0 0 10px}
#hris-login .signin-intro p{font-size:16px;line-height:1.6;color:var(--signin-muted);margin:0 0 34px}
#hris-login .signin-mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--page);border:1px solid var(--border);border-radius:12px;margin-bottom:22px}
#hris-login .signin-mode label{position:relative;cursor:pointer;margin:0}
#hris-login .signin-mode input{position:absolute;opacity:0;width:1px;height:1px}
#hris-login .signin-mode span{display:block;padding:10px;text-align:center;border:0;border-radius:9px;font-size:12px;color:var(--muted);transition:background .2s,color .2s,border-color .2s}
#hris-login .signin-mode input:checked+span{background:var(--surface);color:var(--signin-accent);font-weight:700;box-shadow:0 2px 6px #0f172a14}
#hris-login .signin-mode input:focus-visible+span{outline:2px solid var(--signin-accent);outline-offset:2px}
#hris-login .signin-field{margin-bottom:20px}
/* Keep field names available to assistive technology without visible labels. */
#hris-login .signin-field label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#hris-login .signin-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#hris-login .signin-label-row a{font-size:12px}
#hris-login .signin-input-wrap{display:flex;align-items:center;min-height:62px;padding:0 12px 0 18px;gap:16px;border:1px solid var(--signin-line);border-radius:14px;background:#f8fafc;color:var(--signin-muted);transition:border-color .25s,background .25s,box-shadow .25s}
#hris-login .signin-input-wrap:focus-within{border-color:var(--signin-accent);background:var(--surface);box-shadow:0 0 0 4px var(--teal-soft);color:var(--signin-accent)}
#hris-login .signin-input-wrap>svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;flex:none;stroke-linecap:round;stroke-linejoin:round}
#hris-login .signin-input-wrap input{width:100%;min-width:0;border:0!important;box-shadow:none!important;outline:none!important;background:transparent!important;color:var(--signin-ink)!important;padding:10px 0!important;line-height:20px;font-size:14px!important;border-radius:0;min-height:0}
#hris-login .signin-input-wrap input::placeholder{color:var(--muted);opacity:1}
#hris-login .signin-eye{display:grid;place-items:center;border:0;border-radius:9px;background:none;color:var(--muted);width:34px;height:34px;padding:5px;flex:none;cursor:pointer}
#hris-login .signin-eye:hover{background:var(--soft)}
#hris-login .signin-eye svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round}
#hris-login .signin-eye-slash{display:none}
#hris-login .signin-eye[aria-pressed="true"] .signin-eye-slash{display:block}
#hris-login .signin-field.is-invalid .signin-input-wrap{border-color:#ff3b30;box-shadow:0 0 0 4px #ff3b3019}
#hris-login .signin-field.is-shaking{animation:signin-shake .38s ease-in-out}
#hris-login .signin-field-error,#hris-login .signin-submit-error{font-size:12px;line-height:1.5;color:#c02032;margin:7px 0 0}
#hris-login .signin-submit-error{padding:10px 12px;background:#fff0ed;border-radius:8px;margin-bottom:12px}
#hris-login .signin-remember{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:4px 0 20px;cursor:pointer}
#hris-login .signin-remember input{appearance:auto!important;width:18px;height:18px;accent-color:var(--signin-accent);margin:0}
#hris-login .signin-submit{width:100%;position:relative;overflow:hidden;isolation:isolate;min-height:60px;margin-top:18px;border:0;border-radius:14px;color:white;background:linear-gradient(110deg,#119b83,#0d7773);box-shadow:0 10px 22px #0b87752b;font-size:18px;font-weight:600;cursor:pointer;transition:transform .09s ease-out,box-shadow .25s}
#hris-login .signin-submit:hover{box-shadow:0 1px 2px color-mix(in srgb,var(--primary) 30%,transparent),0 10px 25px color-mix(in srgb,var(--primary) 32%,transparent)}
#hris-login .signin-submit:active{transform:scale(.97)}
#hris-login .signin-submit:disabled{cursor:wait}
#hris-login .signin-button-labels{display:block;position:relative;height:20px;line-height:20px}
#hris-login .signin-button-labels>span{position:absolute;inset:0;transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .3s}
#hris-login .signin-label-default>span{position:absolute;right:18px}
#hris-login .signin-label-busy,#hris-login .signin-label-success{transform:translateY(130%);opacity:0}
#hris-login .signin-submit.is-submitting .signin-label-default,#hris-login .signin-submit.is-success .signin-label-default{transform:translateY(-130%);opacity:0}
#hris-login .signin-submit.is-submitting .signin-label-busy,#hris-login .signin-submit.is-success .signin-label-success{transform:translateY(0);opacity:1}
#hris-login .signin-submit.is-success{background:#1db954;box-shadow:0 10px 22px #1db95438}
#hris-login .signin-submit.is-submitting::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff59 50%,transparent 70%);transform:translateX(-100%);animation:signin-sheen 1.1s ease-in-out infinite;pointer-events:none}
#hris-login .signin-label-success>span{margin-right:6px}
#hris-login .signin-notice{padding:12px;border-radius:8px;font-size:12px;line-height:1.5;margin-bottom:16px;background:#edf5ed;color:#316345}
#hris-login .signin-notice.is-error{background:#fff0ed;color:#b63d33}
#hris-login .signin-recovery{font-size:12px;line-height:1.6;margin:18px 0 0}
#hris-login .signin-recovery small{display:block;color:var(--signin-muted)}
#hris-login .signin-screen-reader{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The decorative image has no text or controls; all page content is live HTML. */
#hris-login .signin-background{
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:#f8fcfc url("../images/login-tabuk-city-hall-background.png") calc(50% + clamp(40px,5vw,96px)) center / cover no-repeat;
}
#hris-login .signin-options-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 24px}
#hris-login .signin-options-row .signin-remember{margin:0;font-weight:600}
#hris-login .signin-options-row>a{font-size:12px}
@keyframes signin-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes signin-sheen{to{transform:translateX(100%)}}
@keyframes signin-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
/* Keep the right-hand scene exposed instead of placing the form over the facade. */
#hris-login .signin-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;align-items:center;gap:48px;flex:1;min-width:0;width:calc(100% - 18vw);max-width:1240px;margin:auto 0}
#hris-login .signin-story{min-width:0;color:var(--signin-ink);padding:8px 0 24px}
#hris-login .signin-story h1{margin:0 0 34px;color:var(--signin-ink);font-size:clamp(52px,4.2vw,76px);line-height:1.04;letter-spacing:-2.8px;font-weight:750}
#hris-login .signin-story h1 span{color:#0b947c}
#hris-login .signin-story h1::after{content:"";display:block;width:72px;height:6px;margin-top:26px;border-radius:4px;background:linear-gradient(90deg,#087c79,#15a584)}
#hris-login .signin-feature-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
#hris-login .signin-feature{--feature-color:#0c9f75;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;min-width:0;padding:26px 14px 22px;border:1px solid #fff;border-radius:18px;background:#ffffffed;box-shadow:0 12px 34px #1e77700a}
#hris-login .signin-feature:nth-child(2){--feature-color:#1688e8}
#hris-login .signin-feature:nth-child(3){--feature-color:#df8a17}
#hris-login .signin-feature:nth-child(4){--feature-color:#9160d5}
#hris-login .signin-feature::after{content:"";display:block;width:40px;height:5px;margin-top:auto;border-radius:4px;background:color-mix(in srgb,var(--feature-color) 45%,white)}
#hris-login .signin-feature-icon{display:grid;place-items:center;width:48px;height:48px;color:var(--feature-color)}
#hris-login .signin-feature-icon svg{width:44px;height:44px}
#hris-login .signin-feature strong{display:block;font-size:14px;line-height:1.4;font-weight:700;color:var(--signin-ink)}
#hris-login .signin-feature small{display:block;font-size:11px;line-height:1.5;color:#62758b;margin-top:9px}
@media(max-width:1450px) and (min-width:901px){
    #hris-login .signin-feature-list{grid-template-columns:repeat(2,minmax(0,1fr))}
    #hris-login .signin-feature{padding:18px 14px;gap:12px}
    #hris-login .signin-feature-icon{width:40px;height:40px}
}
@media(max-width:1200px) and (min-width:901px){
    /* Keep the whole sign inside the viewport as the desktop layout narrows. */
    #hris-login .signin-background{background-size:100% auto;background-position:calc(50% + 6vw) center}
    #hris-login .signin-form-side{transform:translateX(2.4vw)}
    html body #hris-login{padding:40px 32px!important}
    #hris-login .signin-content-grid{grid-template-columns:minmax(0,1fr) 350px;gap:24px;width:calc(100% - 16vw)}
    #hris-login .signin-story h1{font-size:38px;letter-spacing:-1.5px}
    #hris-login .signin-feature-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    #hris-login .signin-feature{padding:18px 14px;gap:10px}
    #hris-login .signin-panel-brand img{width:86px;height:86px;margin-bottom:20px}
    #hris-login .signin-panel-brand p{font-size:10px;letter-spacing:2px}
    #hris-login .signin-form-wrap{padding:36px 28px}
}
@media(max-width:900px){
    html body #hris-login{padding:32px 24px 320px!important}
    #hris-login .signin-background{background-position:right bottom;background-size:auto 440px}
    #hris-login .signin-content-grid{grid-template-columns:1fr;gap:28px;width:100%;max-width:620px;margin:auto}
    #hris-login .signin-story{display:contents}
    #hris-login .signin-panel-brand{grid-row:1;text-align:center;margin:0}
    #hris-login .signin-panel-brand img{width:80px;height:80px;margin:0 auto 14px}
    #hris-login .signin-panel-brand p{font-size:10px;letter-spacing:2px}
    #hris-login .signin-story h1{grid-row:2;text-align:center;font-size:48px;margin:0;letter-spacing:-1.8px}
    #hris-login .signin-story h1 br{display:none}
    #hris-login .signin-story h1 span{margin-left:.18em}
    #hris-login .signin-story h1::after{margin:20px auto 0;width:56px;height:4px}
    #hris-login .signin-form-side{grid-row:3;justify-content:center;transform:none}
    #hris-login .signin-feature-list{grid-row:4;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
    html body #hris-login{padding:24px 16px 320px!important}
    #hris-login .signin-form-wrap{padding:30px 24px;border-radius:22px}
    #hris-login .signin-story h1{font-size:39px}
    #hris-login .signin-story h1 br{display:block}
    #hris-login .signin-story h1 span{margin-left:0}
    #hris-login .signin-panel-brand p{font-size:9px;letter-spacing:1.5px}
    #hris-login .signin-input-wrap input{font-size:16px!important}
    #hris-login .signin-input-wrap{padding-left:12px;gap:10px;min-height:56px}
    #hris-login .signin-intro p{font-size:14px;margin-bottom:26px}
    #hris-login .signin-feature-list{gap:12px}
    #hris-login .signin-feature{padding:22px 12px;gap:14px}
    #hris-login .signin-options-row{gap:8px}
    #hris-login .signin-options-row>a,#hris-login .signin-remember{font-size:11px}
}
@media(prefers-reduced-motion:reduce){#hris-login *,#hris-login *::before,#hris-login *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* A compact employee introduction keeps sign-in close to the top on phones. */
#hris-login.is-employee-login .signin-feature-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#hris-login.is-employee-login .signin-feature {
    --feature-color: var(--signin-accent);
    gap: 5px; padding: 6px 2px; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
}
#hris-login.is-employee-login .signin-feature::after { display: none; }
#hris-login.is-employee-login .signin-feature-icon { width: 32px; height: 32px; }
#hris-login.is-employee-login .signin-feature-icon svg { width: 28px; height: 28px; }
#hris-login.is-employee-login .signin-feature strong { font-size: 12px; font-weight: 650; letter-spacing: .02em; }
#hris-login.is-employee-login .signin-story h1 { font-size: clamp(32px, 3vw, 48px); letter-spacing: -.04em; margin-bottom: 16px; text-transform: uppercase; }
#hris-login.is-employee-login .signin-panel-brand p { font-size: 14px; letter-spacing: 2px; }
#hris-login.is-employee-login .signin-story h1::after { display: none; }
#hris-login.is-employee-login .signin-input-wrap input::placeholder { font-size: 13px; }
#hris-login a[aria-disabled="true"],
#hris-login a[aria-disabled="true"]:hover {
    opacity: .5;
    cursor: not-allowed !important;
    user-select: none;
    -webkit-user-select: none;
    /* Keep hover targeting available; these disabled links have no href. */
    pointer-events: auto;
    text-decoration: none;
}
@media (max-width: 900px) {
    html body #hris-login.is-employee-login { padding: 64px 20px 48px !important; }
    #hris-login.is-employee-login .signin-content-grid { flex: none; align-content: start; gap: 10px; max-width: 440px; margin: 0 auto; }
    #hris-login.is-employee-login .signin-panel-brand img { width: 96px; height: 96px; margin-bottom: 8px; }
    #hris-login.is-employee-login .signin-panel-brand p { font-size: clamp(10px, 3vw, 12px); line-height: 1.5; letter-spacing: 1px; }
    #hris-login.is-employee-login .signin-story h1 { font-size: 21px; line-height: 1.2; margin: 0; font-weight: 650; }
    #hris-login.is-employee-login .signin-feature-list { grid-row: 3; gap: 8px; margin: 0 0 2px; }
    #hris-login.is-employee-login .signin-form-side { grid-row: 4; }
    #hris-login.is-employee-login .signin-form-wrap { padding: 26px 22px; border-radius: 22px; box-shadow: 0 12px 36px #245b6814; }
    #hris-login.is-employee-login .signin-intro h2 { font-size: 28px; letter-spacing: -.8px; }
    #hris-login.is-employee-login .signin-intro p { font-size: 14px; margin-bottom: 24px; }
    #hris-login.is-employee-login .signin-options-row { margin: 18px 0; }
    #hris-login.is-employee-login .signin-submit { min-height: 54px; margin-top: 20px; }
    #hris-login.is-employee-login .signin-background { background-size: auto 360px; }
}