/* TimeCard V3: Bootstrap 5.3.6 extension layer, intentionally mobile-first. */
:root {
  --tc-ink:#172f48; --tc-muted:#647991; --tc-navy:#102c46; --tc-navy-dark:#0c2236;
  --tc-bg:#f4f7fa; --tc-line:#e0e8f0; --tc-teal:#087f6c; --tc-blue:#2469ca;
  --tc-shadow:0 18px 52px rgba(26,52,79,.075); --tc-radius:20px;
  --bs-body-font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bs-body-color:var(--tc-ink); --bs-body-bg:var(--tc-bg);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px;min-height:100dvh;margin:0;background:var(--tc-bg);color:var(--tc-ink)}
button,input,select,textarea{font-family:inherit}
button,a,[role="button"]{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #80bafa!important;outline-offset:3px}
button[disabled]{cursor:not-allowed}
.form-control,.form-select{min-height:46px;font-size:16px;border-color:#ccd9e6;border-radius:11px}
.form-control:focus,.form-select:focus{border-color:#7aaed9;box-shadow:0 0 0 .23rem rgba(36,105,202,.13)}
.btn{font-weight:700;letter-spacing:.005em;border-radius:11px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-brand{--bs-btn-color:#fff;--bs-btn-bg:#2169c8;--bs-btn-border-color:#2169c8;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#185bab;--bs-btn-hover-border-color:#185bab;--bs-btn-active-color:#fff;--bs-btn-active-bg:#134f9b;--bs-btn-active-border-color:#134f9b;--bs-btn-disabled-bg:#2169c8;--bs-btn-disabled-color:#fff;--bs-btn-disabled-border-color:#2169c8}
.btn-success-solid{--bs-btn-color:#fff;--bs-btn-bg:#078463;--bs-btn-border-color:#078463;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#046f52;--bs-btn-hover-border-color:#046f52;--bs-btn-active-color:#fff;--bs-btn-active-bg:#045d46;--bs-btn-active-border-color:#045d46;--bs-btn-disabled-bg:#078463;--bs-btn-disabled-color:#fff;--bs-btn-disabled-border-color:#078463}
.btn-danger-solid{--bs-btn-color:#fff;--bs-btn-bg:#c34858;--bs-btn-border-color:#c34858;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#ad3444;--bs-btn-hover-border-color:#ad3444;--bs-btn-active-color:#fff;--bs-btn-active-bg:#9a3040;--bs-btn-active-border-color:#9a3040}
.btn-subtle{background:#ecf3fa;border:1px solid #d5e3f0;color:#34536e}.btn-subtle:hover{background:#e2edf8;color:#173c5e}
.btn-lg{min-height:54px;border-radius:14px}
.btn-icon{width:45px;height:45px;padding:0}
.text-quiet{color:var(--tc-muted)!important}.text-teal{color:var(--tc-teal)!important}.text-blue{color:var(--tc-blue)!important}
.tc-icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tc-icon.icon-lg{width:28px;height:28px}.tc-icon.icon-xl{width:36px;height:36px}
.tc-card{background:#fff;border:1px solid var(--tc-line);border-radius:var(--tc-radius);box-shadow:var(--tc-shadow)}
.tc-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .7rem;border-radius:50rem;font-size:.72rem;font-weight:750;background:#e8f7f1;color:#096b52}
.tc-badge.badge-blue{background:#e8f1ff;color:#235bb3}.tc-badge.badge-amber{background:#fff2da;color:#885d0a}.tc-badge.badge-red{background:#fff0f2;color:#ad304b}.tc-badge.badge-neutral{background:#edf1f5;color:#5d7287}
.tc-kicker{font-size:.69rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:#167e76}
.tc-page-title{font-size:clamp(1.5rem,2.5vw,2.12rem);font-weight:820;letter-spacing:-.045em;line-height:1.15}
.tc-section-title{font-size:1.05rem;font-weight:790;letter-spacing:-.015em}
.tc-table{font-size:.86rem;min-width:650px;margin-bottom:0}.tc-table th{background:#f7f9fc;color:#6b7e91;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;border-bottom:1px solid #e4ecf3;padding:.9rem 1rem}.tc-table td{padding:.88rem 1rem;border-color:#eaf0f5;vertical-align:middle}.tc-table tbody tr:hover{background:#fbfdff}.tc-table td:first-child{font-weight:700}
.tc-table-wrap{border:1px solid var(--tc-line);overflow:auto;border-radius:13px;-webkit-overflow-scrolling:touch}
.tc-empty{padding:2rem 1rem;text-align:center;color:#65798d}
.tc-field-label{font-size:.8rem;font-weight:750;color:#38526c;margin-bottom:.45rem}
.tc-note{padding:.85rem 1rem;background:#eaf4ff;border:1px solid #d1e6ff;border-radius:12px;color:#345f83;font-size:.84rem}
.tc-warning{padding:.85rem 1rem;background:#fff8e9;border:1px solid #f4ddb0;border-radius:12px;color:#7d5b1d;font-size:.84rem}
.tc-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#12b88c;margin-right:.3rem}
.tc-username{display:inline-flex;align-items:center;gap:.65rem}
.tc-avatar{width:36px;height:36px;display:inline-grid;place-items:center;flex-shrink:0;background:#e3f0f7;color:#24617d;border-radius:12px;font-weight:820;font-size:.76rem}
.tc-avatar.lg{width:62px;height:62px;font-size:1.2rem;border-radius:22px}
.tc-loading{min-height:220px;display:grid;place-items:center;color:var(--tc-muted)}
.tc-empty-icon{width:50px;height:50px;border-radius:18px;display:grid;place-items:center;background:#e8f1f7;margin:0 auto 1rem;color:#456d8a}
.tc-toast-container{position:fixed;z-index:1080;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));max-width:calc(100vw - 28px);pointer-events:none}
.tc-toast-container .toast{pointer-events:auto;max-width:390px;border:1px solid #dce7ef;border-radius:14px;box-shadow:0 15px 35px #1e37502e}
.tc-loading-bar{position:fixed;inset:0 auto auto 0;width:100%;height:3px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#2683c8,#0abf96);z-index:1090;transition:transform .2s ease}.tc-loading-bar.busy{transform:scaleX(.8)}
.demo-banner{background:#fff1d5;color:#76510d;border-bottom:1px solid #efd49b;font-size:.75rem;font-weight:600;padding:.48rem 1rem;text-align:center}
.demo-banner strong{font-weight:800}
.demo-switch{display:flex;align-items:center;gap:.5rem;background:#eef3f8;border:1px solid #dfe8f0;border-radius:50rem;padding:.25rem}.demo-switch button{min-height:37px;min-width:85px;border:0;border-radius:50rem;background:transparent;color:#3e5b76;font-size:.8rem;font-weight:750;padding:.35rem .65rem}.demo-switch button.active{background:#fff;box-shadow:0 2px 10px #1d45681a;color:#205cb2}
/*
 * Employee clock / centered PIN: the touch keypad and passcode align to the
 * visual center. iOS-friendly >=16px controls avoid automatic focus zoom;
 * browser pinch zoom remains available for accessibility.
 */
.kiosk-app{min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(90% 40% at 50% 1%,#e6f8f4 0,transparent 90%),#f4f7fb}
.kiosk-head{background:linear-gradient(125deg,#102e49,#14516b);color:#fff;padding:calc(1rem + env(safe-area-inset-top)) 1rem 1.2rem}
.kiosk-top{max-width:980px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}.kiosk-brand{display:flex;align-items:center;gap:.75rem;font-size:1.06rem;font-weight:830;letter-spacing:-.03em}.kiosk-symbol{display:grid;place-items:center;background:#2ba892;border-radius:13px;width:41px;height:41px;color:#fff}
.kiosk-header-clock{font-variant-numeric:tabular-nums;font-weight:770;font-size:1.1rem}.kiosk-header-date{font-size:.73rem;color:#c4e0ee}
.kiosk-body{width:100%;max-width:760px;margin:0 auto;flex:1;display:grid;place-items:center;padding:1.25rem 1rem 1.5rem}
.kiosk-panel{width:100%;max-width:540px;margin:auto;padding:clamp(1.25rem,3vw,2rem);border-radius:26px;box-shadow:0 24px 70px #132e4921}
.kiosk-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
/* Long employee names remain inside the centered panel at mobile widths. Flex
   children need an explicit bound; wrapping alone cannot constrain their parent. */
.kiosk-content>*{max-width:100%;min-width:0}
.kiosk-title,.employee-option{overflow-wrap:anywhere}
.kiosk-title{font-size:clamp(1.45rem,3.5vw,1.85rem);font-weight:850;letter-spacing:-.045em;margin:0}
.kiosk-subtitle{max-width:440px;margin:0;font-size:.9rem;color:#65788d;line-height:1.5}
/* Center the directory as one bounded group: flex alignment on kiosk-content
 * reaches only direct children, so a narrower nested list otherwise drifts left.
 * Keep the field label left-aligned within the same edges as search and results. */
.employee-directory{width:100%;max-width:440px;margin-inline:auto;text-align:left}
.employee-search{max-width:440px;margin-inline:auto}
.employee-list{width:100%;max-width:440px;margin-inline:auto;max-height:min(47dvh,350px);overflow:auto;border:1px solid #dfe8f0;border-radius:14px;text-align:left;-webkit-overflow-scrolling:touch}
.employee-option{width:100%;border:0;border-bottom:1px solid #e9eef4;min-height:55px;background:white;color:#1c3a53;display:flex;align-items:center;gap:.7rem;text-align:left;padding:.65rem 1rem;font-weight:700}
.employee-option:last-child{border-bottom:0}.employee-option:hover,.employee-option:focus{background:#f1f7fc}.employee-option.selected{background:#eaf4ff}
.pin-stage{width:100%;max-width:370px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:1rem}
.pin-input{display:block;margin-inline:auto;width:min(100%,300px);height:62px;border:2px solid #c9d9e8;border-radius:14px;font-size:22px!important;letter-spacing:.38em;text-align:center;padding-left:1.2em;font-weight:850;font-variant-numeric:tabular-nums}
.pin-input::placeholder{color:#c3cfda;letter-spacing:.15em;font-weight:600}
.pin-keypad{width:min(100%,320px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:auto}.pin-keypad button{height:64px;min-width:0;border-radius:14px;border:1px solid #d9e5ef;background:#f8fbfd;color:#244058;font-size:1.2rem;font-weight:800;box-shadow:0 2px 2px #36516a0a}.pin-keypad button:hover,.pin-keypad button:active{background:#e8f2fb;border-color:#b7d2eb}
.pin-keypad button.key-secondary{color:#597289;background:#edf3f7;font-size:.95rem}
.kiosk-actions{width:100%;max-width:480px;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.punch-button{min-height:128px;border-radius:17px!important;display:flex!important;flex-direction:column;gap:.55rem;font-size:1.2rem;font-weight:850;line-height:1.2}.punch-button .caption{font-size:.77rem;font-weight:580;opacity:.88}.punch-button svg{width:27px;height:27px}
.kiosk-email-button{width:100%;max-width:480px;min-height:58px;border-radius:14px}
.kiosk-receipt-icon{width:74px;height:74px;border-radius:26px;background:#e3f8ed;color:#09835e;display:grid;place-items:center;margin:auto}.kiosk-receipt-icon.blue{background:#e8f3ff;color:#2469ca}.kiosk-receipt-icon svg{width:42px;height:42px}
.kiosk-footer{padding:.2rem 1.2rem calc(.8rem + env(safe-area-inset-bottom));text-align:center;color:#6e8296;font-size:.72rem}
.kiosk-return{margin-top:.4rem}
/*
 * Administrator shell: persistent desktop sidebar and responsive table/card
 * alternatives. At phone widths the bottom navigation remains touch-friendly.
 */
.admin-app{min-height:100dvh;display:flex;flex-direction:column;background:#f4f7fa}
.admin-topbar{position:sticky;top:0;z-index:1010;background:#fff;border-bottom:1px solid #e2eaf1;min-height:66px;display:flex;align-items:center;padding:0 max(15px,env(safe-area-inset-left)) 0 15px}
.admin-topbar-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.admin-topbar-brand{font-weight:830;letter-spacing:-.04em;color:#173d5f;display:flex;align-items:center;gap:.6rem}.admin-topbar-brand .logo-box,.admin-sidebar-logo .logo-box{width:36px;height:36px;display:grid;place-items:center;background:#129585;border-radius:11px;color:white}
.admin-layout{display:flex;align-items:stretch;flex:1;min-height:0}
.admin-sidebar{width:248px;flex:0 0 248px;background:linear-gradient(180deg,#102d47,#0b253b);color:white;min-height:calc(100dvh - 66px);display:none;flex-direction:column;padding:1.5rem .75rem}
.admin-sidebar-logo{display:flex;align-items:center;gap:.6rem;font-weight:820;font-size:1.12rem;letter-spacing:-.035em;padding:.15rem .8rem 1.45rem}.admin-sidebar-logo small{display:block;color:#8db1c7;font-size:.68rem;font-weight:600;letter-spacing:0}
.admin-nav-section{margin:.9rem .9rem .5rem;font-size:.64rem;letter-spacing:.15em;color:#779ab3;text-transform:uppercase;font-weight:850}
.admin-nav-item{width:100%;color:#c5d6e6;display:flex;align-items:center;gap:.7rem;text-align:left;background:transparent;border:0;border-radius:10px;min-height:43px;font-weight:720;font-size:.85rem;padding:.6rem .8rem}.admin-nav-item:hover{background:#1b435e;color:white}.admin-nav-item.active{background:#24649a;color:white;box-shadow:inset 3px 0 0 #62dbcc}.admin-nav-item svg{width:19px;height:19px;color:#8aaac4}.admin-nav-item.active svg{color:white}.admin-sidebar-footer{margin:auto .6rem 0;border:1px solid #2a4a61;border-radius:13px;background:#143751;padding:1rem;color:#bad0e1;font-size:.75rem}
.admin-workspace{flex:1;min-width:0;width:100%;padding:1.1rem 1rem 5.7rem;max-width:1600px;margin-inline:auto}
.admin-head{display:flex;align-items:start;justify-content:space-between;flex-wrap:wrap;gap:.7rem;margin-bottom:1.35rem}.admin-head p{font-size:.86rem;color:#6e8298;margin:.45rem 0 0}
.metric-card{padding:1.1rem 1.2rem;min-height:128px}.metric-card .label{font-size:.73rem;font-weight:770;color:#6e8396}.metric-card .number{display:block;font-size:clamp(1.55rem,3.3vw,2.3rem);font-weight:880;letter-spacing:-.06em;line-height:1.15;margin:.52rem 0}.metric-card .minor{font-size:.7rem;color:#7f91a3}.metric-card .corner{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#eaf3fb;color:#2e78ab}
.admin-panel{padding:1.1rem;border-radius:18px}.admin-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.65rem;flex-wrap:wrap;margin-bottom:1rem}
.admin-record-list{display:grid;gap:.7rem}.mobile-record{display:flex;flex-direction:column;gap:.65rem;background:white;border:1px solid #e2eaf1;border-radius:14px;padding:.85rem 1rem}.mobile-record .primary{font-weight:800}.mobile-record .secondary{font-size:.75rem;color:#72869c}.mobile-record .record-meta{display:flex;justify-content:space-between;gap:.7rem;align-items:center}.mobile-record .record-actions{display:flex;gap:.45rem;flex-wrap:wrap}
.tc-table-desktop{display:none}.tc-cards-mobile{display:block}
.admin-mobile-nav{position:fixed;z-index:1005;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-top:1px solid #e0e7ef;box-shadow:0 -5px 20px #12304712;padding:.4rem max(.45rem,env(safe-area-inset-right)) calc(.4rem + env(safe-area-inset-bottom)) max(.45rem,env(safe-area-inset-left))}
.admin-mobile-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;justify-content:center;border:0;background:transparent;color:#657d95;font-weight:760;font-size:.62rem;min-height:47px;line-height:1.15;border-radius:9px}.admin-mobile-nav button.active{color:#1260b2;background:#eaf3fb}
.offcanvas.tc-offcanvas{background:#102d47;color:#fff;max-width:290px}.tc-offcanvas .btn-close{filter:invert(1)}.tc-offcanvas .admin-nav-item{margin-bottom:.16rem}
.tc-filter-row{display:grid;grid-template-columns:1fr;gap:.7rem;margin-bottom:1rem}.tc-filter-row .tc-field-label{margin-bottom:.24rem}
.tc-chart{height:164px;display:flex;align-items:end;gap:.7rem;padding:.5rem 0}.tc-chart-item{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;justify-content:end;gap:.6rem;height:100%}.tc-chart-bar{background:linear-gradient(180deg,#10ab91,#78d8c3);border-radius:8px 8px 3px 3px;max-width:57px;width:76%;margin:0 auto}.tc-chart-item:nth-child(even) .tc-chart-bar{background:linear-gradient(180deg,#347dcc,#9ec3e8)}.tc-chart-item label{font-size:.66rem;color:#8b9aac;font-weight:750}
.tc-line-list{display:flex;flex-direction:column}.tc-line{padding:.85rem 0;border-bottom:1px solid #e8eef4;display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.82rem}.tc-line:last-child{border-bottom:0}
.tc-form-grid{display:grid;gap:.85rem;grid-template-columns:1fr}
.tc-block-label{font-size:.73rem;color:#71869a;font-weight:800;text-transform:uppercase;letter-spacing:.085em}
.tc-email-address{overflow-wrap:anywhere}
.modal-content{border:1px solid #e1e8f0;border-radius:19px;box-shadow:0 22px 70px rgba(8,37,60,.21)}.modal-header{border-bottom:1px solid #e9eff5}.modal-footer{border-top:1px solid #e9eff5}
/*
 * Bootstrap mobile-first breakpoint overrides. Start with the narrow-phone
 * layout above, then add space/navigation as the viewport becomes wider.
 */
@media (min-width:576px){.admin-workspace{padding:1.5rem 1.5rem 3rem}.admin-panel{padding:1.4rem}.tc-filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}.tc-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tc-form-grid .full{grid-column:1/-1}.kiosk-body{padding:1.75rem}.kiosk-panel{padding:2rem}.kiosk-head{padding-bottom:1.3rem}}
@media (min-width:768px){.admin-sidebar{display:flex}.admin-mobile-nav{display:none}.admin-workspace{padding:1.7rem 2rem 3rem}.tc-table-desktop{display:block}.tc-cards-mobile{display:none}.tc-filter-row{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-topbar{padding:0 2rem}.kiosk-body{padding:2.4rem 1.75rem}.kiosk-panel{max-width:570px}.admin-panel{padding:1.55rem}}
@media (min-width:1200px){.admin-workspace{padding:2rem 2.4rem 3rem}.metric-card{padding:1.25rem 1.45rem}.tc-page-title{font-size:2.13rem}}
@media (max-height:750px){.kiosk-body{display:block}.kiosk-panel{margin:1rem auto}.pin-keypad button{height:55px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Compact kiosk presentation on portrait phones. At 390×844, PIN + keypad fit without scrolling. */
@media (max-width:575.98px){
  .kiosk-head{padding:calc(.7rem + env(safe-area-inset-top)) .8rem .75rem}
  .kiosk-symbol{width:36px;height:36px;border-radius:11px}
  .kiosk-brand{font-size:1rem}.kiosk-header-clock{font-size:1.02rem}
  .kiosk-body{padding:.45rem .65rem}
  .kiosk-panel{padding:1.05rem 1rem;border-radius:22px}
  .kiosk-content{gap:.65rem}
  .kiosk-title{font-size:1.46rem}.kiosk-subtitle{font-size:.83rem}
  .tc-avatar.lg{width:51px;height:51px;border-radius:16px;font-size:1.03rem}
  .pin-stage{gap:.58rem}
  .pin-input{height:52px;font-size:21px!important}
  .pin-keypad{gap:.43rem}
  .pin-keypad button{height:52px;border-radius:12px}
  .pin-stage .btn-lg{min-height:49px}
  .kiosk-footer{padding:.2rem .5rem calc(.5rem + env(safe-area-inset-bottom));font-size:.68rem}
  .punch-button{min-height:112px}
}

/* Login and logout share the centered mobile boundary; labels align within it.
   min-width:0 and border-box prevent narrow-screen nested-container overflow. */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login-card{width:100%;max-width:440px;min-width:0;padding:32px;background:#fff;border:1px solid #dce5ee;border-radius:24px;box-sizing:border-box}
.login-card h1{font-size:clamp(1.6rem,5vw,2rem);color:#17314d}
.login-card .form-control{font-size:16px;min-height:48px}
.login-card button{min-height:48px}
.account-toolbar{width:100%;max-width:1440px;margin-inline:auto;display:flex;justify-content:flex-end;padding:8px 16px}
@media(max-width:375px){.login-card{padding:24px 20px}}

/* Admin account actions belong in the existing header, without a detached band.
   At the narrowest widths the wordmark retains identity while controls stay visible. */
body[data-screen="admin"] .admin-topbar .account-toolbar{width:auto;max-width:none;margin:0;padding:0}
@media(max-width:375px){.admin-topbar-brand .logo-box{display:none}}

/* Kiosk logout shares the existing clock header instead of a detached top strip.
   Preserve both the clock and touch target at narrow widths; retain the wordmark. */
.kiosk-header-actions{display:flex;align-items:center;gap:clamp(.5rem,2vw,1rem)}
.kiosk-head .account-toolbar{width:auto;max-width:none;margin:0;padding:0}
.kiosk-head .account-toolbar .btn{--bs-btn-color:#fff;--bs-btn-border-color:#ffffff80;--bs-btn-hover-color:#17314d;--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-active-color:#17314d;--bs-btn-active-bg:#fff;--bs-btn-active-border-color:#fff}
@media(max-width:375px){.kiosk-top .kiosk-symbol{display:none}}

/* The expanded workspace keeps bounded, centered forms and readable mobile tables. */
.workspace-frame{max-width:1480px;margin-inline:auto}
.workspace-frame main{min-width:0}
.workspace-frame form{max-width:900px;margin-inline:auto}
.workspace-frame .table-responsive{max-width:100%}
.workspace-frame .form-control,.workspace-frame .form-select{font-size:16px}
/* Payroll subcontainers share a centered bound; long exact artifacts wrap inside local scrolling. */
.payroll-view{width:100%;max-width:960px;margin-inline:auto;min-width:0}
.payroll-view .tc-card{width:100%;max-width:900px;margin-inline:auto;min-width:0}
.payroll-view .payroll-search{flex:1 1 220px;min-width:0}
.payroll-view .list-group-item,.payroll-view p{overflow-wrap:anywhere}
.payroll-view .payroll-artifact{white-space:pre-wrap;overflow-wrap:anywhere;max-height:60vh;overflow:auto}
.payroll-view .form-control,.payroll-view .form-select{min-width:0;max-width:100%}
.workspace-permissions{max-height:60vh;overflow:auto}
.workspace-permissions td:first-child{overflow-wrap:anywhere;max-width:350px}

/* Account role identifiers and user-entered words must wrap inside the Bootstrap column.
   This preserves real phone-width geometry without clipping text or hiding page overflow. */
#workspace-content { min-width: 0; overflow-wrap: anywhere; }
/* Keep employee contact/status columns readable beside the separate setup actions.
   Small screens scroll only this bounded table, never the surrounding page/editor. */
.employee-management-directory table { min-width: 760px; }
.employee-management-directory th:nth-child(1) { min-width: 190px; }
.employee-management-directory th:nth-child(2) { min-width: 120px; }
.employee-management-directory :is(th,td):nth-child(3) { white-space: nowrap; min-width: 75px; }
.employee-management-directory th:nth-child(4) { min-width: 330px; }

/* Audit filters remain readable without widening the centered workspace on phones. */
.audit-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1rem}
.audit-evidence{white-space:pre-wrap;overflow-wrap:anywhere;max-height:60vh;overflow:auto}

#workspace-editor>.tc-card{max-width:1000px;margin-inline:auto}

/* Search/select controls and paging wrap within narrow nested assignment editors. */
.workspace-frame .d-flex>.form-control{min-width:0}
.workspace-frame .form-select{min-width:0;max-width:100%}
.workspace-frame .btn{min-height:44px}

/* Workforce records become labeled cards below desktop widths, preserving readable fields and
   centered editors without forcing a phone user to pan a wide certification/catalog table. */
.workforce-table td{overflow-wrap:anywhere}
@media(max-width:991.98px){
  .workforce-table table,.workforce-table tbody,.workforce-table tr,.workforce-table td{display:block;width:100%;min-width:0}
  .workforce-table thead{display:none}
  .workforce-table tr{border:1px solid #dfe7ef;border-radius:12px;padding:.65rem;margin-bottom:.75rem}
  .workforce-table td{border:0;padding:.45rem}
  .workforce-table td[data-label]::before{content:attr(data-label);display:block;font-weight:750;color:#395670;margin-bottom:.25rem}
  .workforce-table td .btn{margin-bottom:.25rem}
}

/* Bootstrap floats legends; an intervening hidden label must not leave the following policy
   picker beside a full-width float with zero available width. Keep semantic legends in normal flow. */
.profile-field-policy legend{float:none;width:auto}

/* Canonical audit action names and record labels can be long unbroken identifiers. Keep the
   retained mobile record cards and activity rows inside their container at 320px as new events appear. */
.mobile-record,.mobile-record .primary,.mobile-record .secondary{min-width:0;overflow-wrap:anywhere}
.tc-line>div{min-width:0;overflow-wrap:anywhere}

/* Module Center subcontainers and credential/upload forms share a centered bounded column.
   Long release IDs/hashes and wrapping tabs must not widen mobile workspaces or detach header actions. */
.module-center,.module-center-panel,.module-record{min-width:0;max-width:100%}
.module-tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.module-identifier{overflow-wrap:anywhere;word-break:break-word}
.module-import-form,.module-deployment-form,#module-center-editor>.tc-card,#module-review-editor>.tc-card{width:100%;max-width:760px;margin-inline:auto}
.module-center .form-control{min-width:0;max-width:100%;font-size:16px}
/* Scheduling keeps every nested editor on one centered boundary. Narrow native date controls,
   long names/notes and paginated checkboxes must not push the workspace outside the viewport. */
.schedule-view { min-width: 0; }
.schedule-view .schedule-section { width: 100%; max-width: 960px; margin-inline: auto; }
.schedule-view .schedule-editor-dialog { width: 100%; max-width: 800px; margin-inline: auto; }
.schedule-view .schedule-form { width: 100%; max-width: 680px; margin-inline: auto; }
.schedule-view .schedule-unit-field { width: 100%; max-width: 480px; margin-inline: auto; }
.schedule-view input, .schedule-view select, .schedule-view textarea { min-width: 0; max-width: 100%; font-size: 1rem; }
.schedule-view button { min-height: 44px; overflow-wrap: anywhere; }
.schedule-view .schedule-picker, .schedule-view .schedule-record { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.schedule-view .schedule-option { min-height: 44px; padding-block: .55rem; margin-bottom: .2rem; }
.schedule-view .schedule-notes { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Published calendars remain centered and readable on phones. Wide layouts add seven columns;
   the roster uses bounded internal table scrolling and never expands the document viewport. */
.published-schedule .published-option-search { flex: 1 1 180px; width: auto; min-width: 0; }
.published-calendar { display: grid; gap: .6rem; min-width: 0; }
.published-calendar-grid { grid-template-columns: minmax(0, 1fr); }
.published-day, .published-person, .published-shift { min-width: 0; overflow-wrap: anywhere; }
.published-schedule .published-shift { display: block; white-space: normal; font-size: .9rem; }
.published-schedule [aria-pressed="true"] { background: #dceeed; outline: 2px solid #117d78; }
@media (min-width: 600px) { .published-calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
 .published-calendar-grid { grid-template-columns: repeat(var(--published-columns, 7), minmax(0, 1fr)); }
 .published-calendar-month .published-day:first-child { grid-column-start: var(--published-weekday); }
 /* Full manager rosters need readable day widths. Keep scrolling within the keyboard-focusable
    calendar region instead of squeezing text or widening the document. Phones stay stacked. */
 .draft-calendar .published-calendar-grid { grid-template-columns: repeat(var(--published-columns, 7), minmax(160px, 1fr)); overflow-x: auto; padding-bottom: .5rem; }
}
/* Keep shared visitor sub-containers centered at every viewport, with wrapping opaque receipts
   instead of horizontal document overflow. Inputs remain zoom-safe and touch targets generous. */
.visitor-frame { max-width: 820px; margin-inline: auto; }
.visitor-frame .tc-card { width: 100%; min-width: 0; margin-inline: auto; }
.visitor-frame form, .visitor-frame section { min-width: 0; }
.visitor-frame input:not([type=checkbox]), .visitor-frame select, .visitor-frame textarea { font-size: 1rem; min-height: 46px; }
.visitor-frame button { min-height: 44px; }
.visitor-frame .form-check { min-height: 44px; }
.visitor-frame textarea { overflow-wrap: anywhere; word-break: break-all; }
.visitor-frame .visitor-notice { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Bootstrap display utilities must not expose controls before their real policy/host request finishes. */
body[data-screen="visitors"] [hidden] { display: none !important; }
/* Authorized visitor details can contain long contact strings or literal HTML-looking text.
   Wrap those strings inside nested cards so a centered correction form never widens the page. */
.visitor-admin-panel { min-width: 0; }
.visitor-admin-panel :is(h1,h2,h3,h4,p,dt,dd,label) { overflow-wrap: anywhere; }
.visitor-admin-panel .workspace-form { max-width: 900px; min-width: 0; margin-inline: auto; }
.visitor-admin-panel :is(input,select,textarea) { min-width: 0; max-width: 100%; }

/* Patient forms stay centered inside every nested card; long private values wrap without
   forcing page overflow. Touch targets and normal text sizing preserve mobile accessibility. */
.patient-panel { min-width: 0; overflow-wrap: anywhere; }
.patient-panel .workspace-form { width: 100%; max-width: 800px; margin-inline: auto; min-width: 0; }
.patient-panel :is(input,select,textarea) { min-width: 0; max-width: 100%; font-size: 1rem; }
.patient-panel button { min-height: 44px; }
.patient-panel table { width: 100%; table-layout: fixed; }
.patient-panel :is(td,th) { overflow-wrap: anywhere; }
.patient-panel .patient-text { white-space: pre-wrap; }

/* A contact checkbox's whole visible label is a touch target. */
.patient-panel .form-check-label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
/* Physical source/count forms keep every editable touch control at least44px without stretching
   checkbox glyphs; their enclosing labels provide the full touch target. */
.inventory-panel :is(input:not([type="checkbox"]),select) { min-height: 44px; }

/* The unified menu has several feature groups. Keep it independently scrollable
 * below the existing sticky header so Settings stays reachable without making
 * a short content page as tall as every navigation item. Phone offcanvas is unchanged. */
@media (min-width:768px) {
  .admin-sidebar { position: sticky; top: 66px; align-self: flex-start; height: calc(100dvh - 66px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .admin-sidebar-logo, .admin-sidebar-footer { flex-shrink: 0; }
  .admin-sidebar-footer { margin-top: 1rem; }
}

/* Unit metadata uses natural column widths on desktop. On phones each semantic table row
   becomes a labelled card so status words/buttons stay readable without page overflow. */
.tc-unit-table { table-layout:auto; }
.tc-unit-table th, .tc-unit-table td { word-break:normal; overflow-wrap:break-word; }
.tc-unit-table thead th, .tc-unit-table td:nth-child(2) { white-space:nowrap; }
@media (max-width:575.98px) {
  .tc-unit-table, .tc-unit-table tbody { display:block; }
  .tc-unit-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .tc-unit-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:.75rem 0; border-top:1px solid var(--bs-border-color); }
  .tc-unit-table th[scope="row"], .tc-unit-table td:last-child { grid-column:1 / -1; }
  .tc-unit-table th, .tc-unit-table td { display:block; padding:.4rem .5rem; border:0; }
  .tc-unit-table td[data-unit-label]::before { content:attr(data-unit-label) ": "; font-weight:600; }
}