html, body {
    margin: 0;
    min-width: 320px;
    color: #12223f;
    background: #f5f8fc;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
    box-sizing: border-box;
}

h1:focus {
    outline: none;
}

.route-progress{position:fixed;z-index:10000;top:0;left:0;width:100%;height:3px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .15s ease}.route-progress i{display:block;width:38%;height:100%;background:linear-gradient(90deg,#2857b8,#56dcca,#2857b8);box-shadow:0 1px 7px rgba(40,87,184,.45);transform:translateX(-110%)}body.route-loading .route-progress{opacity:1}body.route-loading .route-progress i{animation:route-loading 1s ease-in-out infinite}@keyframes route-loading{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
.app-boot{position:fixed;z-index:9999;inset:0;display:grid;place-content:center;justify-items:center;gap:13px;color:#5f7189;background:#f5f8fc;font-size:12px;font-weight:750}.app-boot i{width:38px;height:38px;border:4px solid #dce6f5;border-top-color:#2857b8;border-radius:50%;animation:app-boot-spin .75s linear infinite}@keyframes app-boot-spin{to{transform:rotate(360deg)}}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Shared back-button treatment across all management screens */
.settings-header a,.branch-header a,.sm-header a,.emp-back,.emp-empty.page>a{
    min-height:39px!important;padding:0 14px!important;display:inline-flex!important;align-items:center!important;
    width:max-content!important;margin-bottom:18px!important;border:1px solid #d4deea!important;border-radius:8px!important;
    color:#52657e!important;background:#fff!important;box-shadow:0 6px 18px rgba(24,49,84,.06)!important;
    font-size:12px!important;font-weight:750!important;text-decoration:none!important;
    transition:transform .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease!important;
}
.settings-header a:hover,.branch-header a:hover,.sm-header a:hover,.emp-back:hover,.emp-empty.page>a:hover{
    color:#2453b2!important;border-color:#aebfe3!important;background:#f7f9ff!important;
    box-shadow:0 10px 22px rgba(36,83,178,.12)!important;transform:translateY(-2px);
}

/* Login password visibility control */
.password-input{padding-right:52px!important}
.password-toggle{position:absolute;z-index:2;right:7px;top:7px;width:34px;height:34px;padding:0;display:grid;place-items:center;
    border:0;border-radius:8px;color:#74849a;background:transparent;cursor:pointer;transition:.2s ease}
.password-toggle:hover,.password-toggle:focus-visible{color:#2857b8;background:#edf3ff;outline:0}
.password-toggle svg{position:static!important;width:18px!important;height:18px!important}
.password-toggle .eye-closed{display:none}.password-toggle.showing .eye-open{display:none}.password-toggle.showing .eye-closed{display:block}

/* Disabled-account login alert */
.access-popup-backdrop{position:fixed;z-index:200;inset:0;padding:20px;display:grid;place-items:center;background:rgba(9,23,48,.62);backdrop-filter:blur(5px)}
.access-popup{width:min(430px,100%);padding:30px 28px 26px;border:1px solid #f2cbd2;border-radius:18px;background:#fff;box-shadow:0 28px 80px rgba(9,23,48,.3);font-family:Inter,"Segoe UI",Arial,sans-serif;text-align:center}
.access-popup-icon{width:56px;height:56px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,#dc4f65,#b92f48);box-shadow:0 10px 24px rgba(185,47,72,.24);font-size:25px;font-weight:900}
.access-popup-label{color:#ba3850;font-size:10px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase}
.access-popup h2{margin:7px 0 8px;color:#263850;font-size:22px;letter-spacing:-.4px}
.access-popup p{margin:0;color:#77859a;font-size:13px;line-height:1.6}
.access-popup a{min-height:43px;margin-top:21px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;color:#fff;background:#c63d54;box-shadow:0 8px 18px rgba(198,61,84,.2);font-size:12px;font-weight:800;text-decoration:none;transition:.2s ease}
.access-popup a:hover{background:#ad2e44;transform:translateY(-2px);box-shadow:0 12px 23px rgba(198,61,84,.28)}

/* Company profile load error is not the same as first-time setup. */
.database-error-state{padding:40px 20px;text-align:center}.database-error-state .error-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#ce4257;font-size:24px;font-weight:900}.database-error-state h1{margin:16px 0 7px;color:#263a54;font-size:24px}.database-error-state p{max-width:480px;margin:0;color:#758398;font-size:13px}.database-error-state a{margin-top:18px;padding:11px 18px;border-radius:9px;color:#fff;background:#2858ba;font-size:12px;font-weight:800;text-decoration:none}

/* Login card brand header follows the portal action color. */
.admin-theme .company-brand{border-bottom-color:#1f4ba9!important;background:#1f4ba9!important}.hr-theme .company-brand{border-bottom-color:#218a77!important;background:#218a77!important}.login-page .company-brand strong{color:#fff!important}.login-page .company-brand small{color:#ffffffb8!important}

/* Shift view/edit/print actions and printable detail sheet. */
.att-card-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.att-card-actions button{min-height:32px;border:0;border-radius:8px;font-size:10px;font-weight:800;cursor:pointer}.att-card-actions .view{color:#fff;background:#17a2b8}.att-card-actions .edit{color:#3d2d00;background:#ffc107}.att-card-actions .print{color:#fff;background:#2857b8}.att-card-actions button:hover{filter:brightness(.94);transform:translateY(-1px)}.att-shift-detail{padding:22px}.att-shift-print-head{padding:16px;display:flex;align-items:center;gap:12px;border:1px solid #dfe7f0;border-radius:13px;background:#f8faff}.att-shift-print-head>i{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;color:#2857b8;background:#e7efff;font-size:21px;font-style:normal}.att-shift-print-head>div{flex:1;display:grid;gap:3px}.att-shift-print-head span{color:#8492a5;font-size:9px;text-transform:uppercase}.att-shift-print-head em{padding:6px 9px;border-radius:15px;font-size:9px;font-style:normal;font-weight:850}.att-shift-print-head em.on{color:#176f57;background:#e5f7f0}.att-shift-print-head em.off{color:#965367;background:#f7e9ee}.att-shift-detail dl{margin:16px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;overflow:hidden;border:1px solid #e1e8f0;border-radius:11px;background:#e1e8f0}.att-shift-detail dl div{padding:13px;background:#fff}.att-shift-detail dt{color:#8794a5;font-size:9px;text-transform:uppercase}.att-shift-detail dd{margin:5px 0 0;color:#344a63;font-size:12px;font-weight:800}.att-shift-signature{width:280px;margin:45px 0 15px auto;display:flex;align-items:flex-end;gap:9px;color:#40536b;font-size:10px;font-weight:800}.att-shift-signature i{flex:1;border-bottom:1px solid #344a63}.att-shift-detail footer{padding-top:15px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #e7edf4}.att-shift-detail footer button{min-height:38px;padding:0 15px;border:1px solid #d3dde8;border-radius:8px;background:#fff;font-weight:750}.att-shift-detail footer .save{color:#fff;border-color:#2857b8;background:#2857b8}
@media print{body *{visibility:hidden!important}.att-shift-print,.att-shift-print *{visibility:visible!important}.att-shift-print{position:absolute!important;inset:0!important;width:100%!important;max-height:none!important;border:0!important;box-shadow:none!important}.att-shift-view-bg{position:static!important;padding:0!important;background:#fff!important}.att-no-print{display:none!important}.att-shift-detail{padding:12mm}.att-shift-signature{margin-top:55px}}

/* Consistent blue title area for every create, edit and view panel. */
.modal-card>header,.sm-modal>header,.att-dialog>header,.emp-wizard>header{
    color:#fff!important;background:#2857b8!important;border-bottom-color:#2857b8!important;
}
.modal-card>header h2,.sm-modal>header h2,.att-dialog>header h2,.emp-wizard>header h2{
    color:#fff!important;
}
.modal-card>header span,.modal-card>header p,.sm-modal>header span,.sm-modal>header p,
.att-dialog>header span,.att-dialog>header p,.emp-wizard>header span,.emp-wizard>header p{
    color:rgba(255,255,255,.78)!important;
}
.modal-card>header>button,.sm-modal>header>button,.att-dialog>header>button,.emp-wizard>header>button{
    color:#fff!important;background:rgba(255,255,255,.15)!important;border:1px solid rgba(255,255,255,.2)!important;
}
.modal-card>header>button:hover,.sm-modal>header>button:hover,.att-dialog>header>button:hover,.emp-wizard>header>button:hover{
    background:rgba(255,255,255,.25)!important;
}

.att-table-actions{display:flex;gap:6px;white-space:nowrap}.att-table-actions button{min-width:54px;border:0!important;color:#fff!important}.att-table-actions .view{background:#17a2b8!important}.att-table-actions .edit{color:#3d2d00!important;background:#ffc107!important}.att-table-actions .print{background:#2857b8!important}.att-date-filter .generate{padding:0 13px;background:#17856d}.att-auto-note{padding:12px;border:1px solid #cfe0fa;border-radius:9px;color:#40618e;background:#f1f6ff;font-size:11px;line-height:1.5}
@media(max-width:650px){.att-table-actions{display:grid;grid-template-columns:repeat(3,1fr)}.att-date-filter{flex-wrap:wrap}.att-date-filter .generate{flex:1;min-width:145px}}