/* SAVAGE V14.1.16 — login redesign and native accessible modal workflows.
   All data actions use the existing authenticated server API. */
:root{--sv-ink:#122d42;--sv-deep:#082436;--sv-sea:#126a70;--sv-mint:#2aab8c;--sv-gold:#f2c77f;--sv-faint:#eef6f8;--sv-line:#dfebf0}
[hidden]{display:none!important}
body:not(.logged-in){min-height:100vh;background:#e8f0f3;color:var(--sv-ink)}
body:not(.logged-in)>header{display:none}
#auth.auth-shell{max-width:none;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);width:min(1170px,calc(100% - 56px));min-height:min(748px,calc(100svh - 72px));margin:36px auto;border:none;border-radius:26px;padding:0;box-shadow:0 28px 80px rgba(11,43,59,.17);overflow:hidden;background:#fff}
#auth.auth-shell:before{display:none}
.auth-visual{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;padding:46px 55px 36px;background:radial-gradient(ellipse at 85% 3%,#22798273,transparent 42%),radial-gradient(ellipse at 0% 100%,#24737483,transparent 48%),linear-gradient(150deg,#092e3f,#0b3441 58%,#0b4550);color:#fff;isolation:isolate}
.auth-visual:before,.auth-visual:after{content:"";position:absolute;z-index:-1;pointer-events:none;border:1px solid #bbefdf1a;border-radius:50%}
.auth-visual:before{width:520px;height:520px;left:-290px;top:155px;box-shadow:0 0 0 55px #d4ffe107,0 0 0 125px #b1fff107,0 0 0 200px #ffffff05}
.auth-visual:after{height:380px;width:380px;right:-260px;top:-200px;box-shadow:0 0 0 75px #ffffff08,0 0 0 160px #ffffff05}
.auth-brand{display:flex;align-items:center;gap:14px;letter-spacing:.05em}
.auth-brand-symbol{width:56px;height:56px;display:grid;place-items:center;border:1px solid #ffffff56;border-radius:17px;background:#ffffff14;color:#fff;font-size:30px;letter-spacing:-.11em;font-weight:900;box-shadow:0 10px 30px #001e2730}
.auth-brand-symbol span{color:var(--sv-gold);font-size:12px;position:relative;top:-11px;left:-6px}
.auth-brand strong{display:block;font-size:24px;letter-spacing:.13em;line-height:1.1}
.auth-brand small{display:block;font-size:10px;font-weight:800;letter-spacing:.27em;color:#c3e2df;margin-top:7px}
.auth-hero{margin:auto 0 32px;max-width:455px;padding-top:55px}
.auth-eyebrow{display:block;color:#f2ca8d;font-size:10px;font-weight:900;letter-spacing:.15em;line-height:1.7}
.auth-hero h1{font-size:clamp(38px,4vw,57px);line-height:1.12;font-weight:850;letter-spacing:-.055em;margin:21px 0}
.auth-hero h1 em{font-style:normal;color:var(--sv-gold)}
.auth-hero p{font-size:15px;line-height:1.8;color:#b8d4d8;max-width:400px;margin:0}
.auth-feature-list{display:grid;gap:7px;max-width:460px}
.auth-feature-list>div{display:flex;align-items:center;gap:16px;border:1px solid #ffffff22;background:#ffffff09;border-radius:14px;padding:14px 16px;backdrop-filter:blur(5px)}
.feature-number{flex:none;display:grid;place-items:center;width:39px;height:39px;border-radius:11px;color:#f1c785;background:#f1c7851c;font-weight:900;font-size:12px;letter-spacing:.06em}
.auth-feature-list strong{display:block;font-size:13px;font-weight:760}
.auth-feature-list small{display:block;font-size:11px;color:#b0cfd2;line-height:1.5;margin-top:3px}
.auth-visual-footer{font-size:10px;letter-spacing:.13em;color:#7fb4b8;font-weight:800;display:flex;align-items:center;gap:9px;margin-top:35px}
.auth-orb{width:7px;height:7px;border-radius:50%;background:#e2bf7e;box-shadow:0 0 0 4px #e2bf7e21}
.auth-form-side{display:flex;flex-direction:column;padding:49px clamp(30px,5.5vw,82px) 30px;min-width:0;background:#fff}
.auth-form-top{display:flex;justify-content:flex-end;align-items:center;gap:9px;color:#839ba4;font-weight:850;font-size:10px;letter-spacing:.14em}
.auth-lock{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#eaf6f2;color:#11846f;font-size:14px}
.auth-welcome{margin:auto 0 25px;padding-top:52px}
.auth-overline{font-size:10px;letter-spacing:.22em;color:#148773;font-weight:900}
#auth .auth-welcome h2{font-size:clamp(28px,3.1vw,40px);line-height:1.16;letter-spacing:-.045em;font-weight:860;color:#15384b;margin:16px 0 13px}
.auth-welcome p{font-size:13px;color:#8198a7;line-height:1.7;margin:0;max-width:325px}
#login-form{display:grid;gap:11px}
#login-form>label{color:#294a5c;font-size:12px;font-weight:800;margin-top:6px}
.auth-input-wrap{position:relative;display:flex;align-items:center;width:100%}
.auth-input-wrap input{background:#f7fafb!important;border:1px solid #d7e5e9!important;border-radius:12px!important;padding:14px 56px 14px 48px!important;height:54px;max-width:100%;width:100%;min-width:0;font-size:14px!important;color:#1c4457;transition:border-color .2s,box-shadow .2s}
.auth-input-wrap input:focus{outline:none;border-color:#18947d!important;box-shadow:0 0 0 4px #23a78a15}
.auth-input-wrap input::placeholder{color:#9cafb6}
.auth-input-icon{position:absolute;left:18px;pointer-events:none;color:#51958b;font-size:19px}
.auth-password-toggle{position:absolute;right:8px;background:transparent;color:#16816c;border:0;padding:10px;border-radius:8px;font-size:12px;font-weight:800;min-width:47px}
.auth-password-toggle:hover,.auth-password-toggle:focus-visible{background:#e8f6f2;outline:2px solid transparent}
.auth-error{border-radius:10px;background:#fff3f0;border:1px solid #ffd8cf;color:#a74433;padding:12px 14px;font-size:12px;line-height:1.55}
.auth-submit{margin-top:13px;display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;border:0;border-radius:12px;color:white;font-weight:850;background:linear-gradient(100deg,#127f72,#0c665b);box-shadow:0 12px 23px #14897629;transition:filter .15s,transform .15s}
.auth-submit:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.auth-submit:disabled{opacity:.72;cursor:progress}
.auth-spinner{width:17px;height:17px;display:inline-block;border:2px solid #ffffff7c;border-top-color:#fff;border-radius:50%;animation:auth-spin .6s linear infinite}
@keyframes auth-spin{to{transform:rotate(360deg)}}
.auth-signin-footer{display:flex;align-items:flex-start;gap:12px;margin:29px 0 25px;padding:15px 17px;background:#f1f7f6;border-radius:12px;border:1px solid #e1eeec}
.auth-signin-footer .auth-footer-icon{color:#1a8975;font-size:20px;font-weight:800}
.auth-signin-footer p{color:#607d85;font-size:11px;line-height:1.6;margin:0}
.auth-copyright{margin-top:auto;padding-top:20px;border-top:1px solid #edf1f2;color:#a3b3b9;font-size:10px}
/* Native dialog grants focus trap, ESC key and backdrop semantics without a JS dialog library. */
.savage-modal{border:1px solid #e7eef1;border-radius:23px;padding:0;width:min(640px,calc(100vw - 30px));max-width:calc(100vw - 30px);max-height:min(92dvh,980px);box-shadow:0 35px 110px #061f3380;color:#1c4355;background:#fff;overflow:auto;overscroll-behavior:contain}
.savage-modal.wide{width:min(1080px,calc(100vw - 30px))}
.savage-modal::backdrop{background:rgba(7,28,42,.69);backdrop-filter:blur(5px)}
body.savage-modal-open{overflow:hidden}
.savage-modal-head{position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:25px 30px 19px;background:#fff;border-bottom:1px solid #e5edf1;border-radius:22px 22px 0 0}
.savage-modal-eyebrow{color:#13846c;font-size:10px;font-weight:900;letter-spacing:.15em}
.savage-modal-head h2{margin:8px 0 4px;color:#15364a;font-size:clamp(23px,2.5vw,30px);letter-spacing:-.035em}
.savage-modal-head p{margin:0;font-size:12px;color:#8295a1;line-height:1.5}
.modal-close{width:36px;height:36px;display:grid;place-items:center;border:1px solid #dfebf0;background:#f4f8fa;color:#577387;border-radius:10px;font-size:15px;flex:none}
.modal-close:hover,.modal-close:focus-visible{background:#e4f2f0;color:#0c665b}
.savage-modal-content{padding:24px 30px 27px;min-width:0}
.savage-modal-content .btn{min-height:41px;display:inline-flex;align-items:center;justify-content:center}
.savage-modal-content .btn:disabled{opacity:.55;cursor:progress}
.savage-modal-content input,.savage-modal-content textarea{background:#fbfdfe;max-width:100%;font-size:14px}
.savage-modal-content label{font-size:12px}
.modal-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:21px 0 17px}
.modal-attendance-summary{border:1px solid #d8eae7;border-radius:13px;background:#f4faf8;padding:17px;color:#305b60}
.modal-attendance-summary>strong{font-size:13px;display:block;margin-bottom:10px}
.modal-attendance-summary>div{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.modal-attendance-summary span{border:1px solid #d5e9e3;border-radius:20px;background:#fff;color:#277469;font-size:11px;font-weight:800;padding:7px 10px}
.modal-attendance-summary small{display:block;color:#779293;line-height:1.5}
.modal-notes-label{display:grid;gap:9px}
.modal-notes-label textarea{resize:vertical;min-height:90px}
.modal-bottom-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;position:sticky;bottom:0;margin-top:24px;background:#fff;padding-top:16px;border-top:1px solid #edf1f4}
.modal-validation{padding:11px 14px;color:#a63d32;background:#fff0ed;border:1px solid #f5c7be;border-radius:10px;margin-top:14px;font-size:12px}
.modal-review-card{padding:4px 0;color:#31566c}
.modal-review-card>p:first-child{font-size:16px;color:#203d4e;line-height:1.6}
.modal-review-card>div{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-top:1px solid #e5eef2}
.modal-review-card>div span{color:#829ba7}
.modal-review-card>div strong{font-size:20px}
.modal-review-card>p:last-child{background:#fff9ee;border:1px solid #f3e4c7;padding:14px;border-radius:10px;font-size:12px;line-height:1.6;color:#795a2f}
.dtr-intro{margin-top:23px;text-align:center;border:1px dashed #cddfe4;border-radius:18px;padding:40px 25px;background:linear-gradient(150deg,#fcfefe,#f5faf9)}
.dtr-intro h3{margin:15px 0 7px;color:#214b5f}
.dtr-intro p{color:#7892a0;line-height:1.7;max-width:430px;margin:0 auto}
.dtr-intro-icon{display:grid;place-items:center;border-radius:16px;background:#e1f2eb;color:#16866f;font-size:30px;margin:auto;width:65px;height:65px}
.dtr-ready{display:inline-block;color:#1a816f;font-weight:800;font-size:12px;margin-right:11px}
.dtr-form-actions{display:flex;align-items:end}
.dtr-form-actions .btn{min-height:43px}
.savage-modal .dtr-summary.cards{margin:0 0 15px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.savage-modal .dtr-summary .metric:after{display:none}
.savage-modal .printable-dtr{border:1px solid #e4e9eb;padding:20px;border-radius:13px;overflow:visible}
.savage-modal .print-heading{border-bottom:2px solid #187c6c;padding-bottom:15px}
.savage-modal .print-ident{margin:7px 0}
.savage-modal .printable-dtr table{min-width:660px!important}
.savage-modal .printable-dtr .scroll{overflow-x:auto;max-width:100%}
.savage-modal .report-actions{justify-content:flex-end;margin:17px 0 0}
.modal-document-preview{background:#fff;border:1px solid #e0e8eb;padding:24px;border-radius:14px;max-height:55dvh;overflow:auto;box-shadow:inset 0 0 0 6px #fafcfc}
.modal-document-preview .print-heading{text-align:center;border-bottom:2px solid #1a7165;padding:10px 3px 20px}
.modal-document-preview .print-heading h2{font-size:21px;margin:10px 0}
.modal-document-preview .print-heading p{font-size:12px;color:#506776}
.modal-document-preview .print-ident{display:flex;gap:13px 26px;flex-wrap:wrap;padding:18px 3px;font-size:12px}
.modal-document-preview table{min-width:650px;border-collapse:collapse;width:100%;font-size:12px}
.modal-document-preview th,.modal-document-preview td{border:1px solid #d6e1e4;padding:9px;text-align:left}
.modal-document-preview th{background:#f0f5f4}
.modal-document-preview h3{margin:17px 0 8px}
.modal-document-preview p{line-height:1.7;font-size:12px}
.modal-document-preview .signature-row{margin-top:50px}
.modal-document-preview .print-disclaimer{background:#f7f9f9;border-radius:8px;padding:12px}
#login-submit:focus-visible,.savage-modal button:focus-visible,.dtr-form-actions button:focus-visible{outline:3px solid #f0c16c;outline-offset:3px}
@media(max-width:940px){#auth.auth-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:calc(100% - 36px)}.auth-visual{padding:36px 35px}.auth-form-side{padding:40px 35px 25px}.auth-hero h1{font-size:39px}}
@media(max-width:700px){body:not(.logged-in){background:#fff}#auth.auth-shell{display:flex;flex-direction:column;width:100%;margin:0;border-radius:0;min-height:100svh;box-shadow:none}.auth-visual{padding:23px 24px 24px}.auth-brand-symbol{width:42px;height:42px;font-size:25px}.auth-brand strong{font-size:20px}.auth-brand small{font-size:8px}.auth-hero{margin:24px 0 8px;padding:0}.auth-eyebrow{font-size:9px}.auth-hero h1{font-size:34px;margin:12px 0}.auth-hero p{font-size:12px;line-height:1.6}.auth-feature-list,.auth-visual-footer{display:none}.auth-form-side{padding:27px 24px 21px;flex:1}.auth-form-top{justify-content:flex-start}.auth-welcome{padding-top:26px;margin-bottom:22px}.auth-welcome h2{font-size:28px!important}.auth-signin-footer{margin:24px 0}.savage-modal-head{padding:20px 19px 15px}.savage-modal-content{padding:19px}.modal-form-grid{grid-template-columns:1fr;gap:12px}.modal-bottom-actions{flex-direction:column-reverse}.modal-bottom-actions .btn{width:100%;min-height:46px}.savage-modal .dtr-summary.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.savage-modal .dtr-summary .metric{padding:11px}.savage-modal .dtr-summary .metric strong{font-size:21px}.savage-modal .printable-dtr{padding:12px}.modal-document-preview{padding:12px;max-height:48dvh}}
@media(prefers-reduced-motion:reduce){.auth-submit,.auth-input-wrap input{transition:none}.auth-spinner{animation:none}}
/* Existing global SVG decorator remains byte-for-byte unchanged for other screens;
   branding and login controls deliberately use their own purposeful iconography. */
#auth .savage-ui-icon{display:none!important}