:root { --ink: #303646; --muted: #747b8c; --brand: #f2a600; --brand-dark: #d88c00; --canvas: #e9ebf1; }
html { font-size: 16px; min-height: 100%; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 8% 10%, #e5e4ff 0, transparent 28rem), var(--canvas); }
.app-nav { background: rgba(21, 32, 54, .96); box-shadow: 0 8px 30px rgba(21, 32, 54, .12); }
.navbar-brand { letter-spacing: -.02em; }
.auth-shell { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; gap: 2rem; min-height: calc(100vh - 180px); padding: 2.5rem 0 5rem; }
.auth-copy { text-align: center; }
.auth-copy h1 { max-width: 700px; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.05em; margin: .7rem auto 1.25rem; }
.auth-copy > p:not(.eyebrow) { max-width: 600px; margin-inline: auto; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.eyebrow { color: var(--brand); font-weight: 800; text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; }
.privacy-note { display: inline-flex; gap: .65rem; align-items: center; background: #e4f7ee; color: #18764b; border-radius: 999px; padding: .75rem 1rem; margin-top: 1rem; font-size: .9rem; }
.privacy-note.warning { background: #fff2d8; color: #8a5a00; border-radius: 14px; }
.capture-card, .dashboard-card { background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.8); border-radius: 24px; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 24px 70px rgba(29, 37, 67, .13); }
.capture-card { position: relative; padding-top: 3.5rem; }
.capture-card-close { position: absolute; z-index: 3; top: .8rem; right: 1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: #697386; font-size: 0; line-height: 0; text-decoration: none; transition: color .15s ease, background-color .15s ease, transform .15s ease; }
.capture-card-close::before, .capture-card-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 2px; border-radius: 2px; background: currentColor; transform-origin: center; }
.capture-card-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.capture-card-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.capture-card-close:hover { color: var(--ink); background: #e9ecf4; transform: scale(1.05); }
.capture-card-close:focus-visible { outline: 3px solid rgba(91,92,226,.3); outline-offset: 2px; }
.capture-card-help { position: absolute; z-index: 3; top: .8rem; left: 1rem; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.84); border-radius: 50%; background: var(--surface, #eef0f5); color: #697386; font-size: 1.25rem; font-weight: 750; line-height: 1; text-decoration: none; box-shadow: -4px -4px 9px #fff, 5px 5px 11px rgba(165,171,187,.42); }
.capture-card-help:hover { color: var(--brand-dark); }
.attendance-connection { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .5rem 2.5rem .8rem; color: #667085; font-size: .8rem; font-weight: 650; }
.attendance-connection svg { width: 20px; height: 24px; flex-shrink: 0; }
.attendance-connection.is-online { color: #167343; }
.attendance-connection.is-offline { color: #b42318; }
.attendance-connection-icon { position: relative; isolation: isolate; display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; }
.attendance-connection.is-online .attendance-connection-icon::before { content: ""; position: absolute; z-index: -1; inset: -5px; border: 1px solid rgba(30, 166, 88, .65); border-radius: 50%; background: radial-gradient(circle, transparent 28%, rgba(94, 230, 145, .15) 48%, rgba(30, 166, 88, .3) 68%, transparent 76%); box-shadow: 0 0 10px rgba(30, 166, 88, .25); pointer-events: none; animation: attendance-connection-pulse 2.5s ease-out infinite; }
@keyframes attendance-connection-pulse { 0% { opacity: .85; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .attendance-connection.is-online .attendance-connection-icon::before { animation: none; opacity: .5; } }
.capture-card-help:focus-visible { outline: 3px solid #8a6500; outline-offset: 3px; }
.attendance-card-toolbar { position: absolute; top: .8rem; left: 1rem; right: 1rem; display: flex; align-items: center; gap: .75rem; }
.attendance-card-toolbar .capture-card-help, .attendance-card-toolbar .capture-card-close { position: static; flex: 0 0 44px; width: 44px; height: 44px; }
.attendance-card-toolbar .capture-card-help { margin-left: auto; }
.attendance-toolbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.attendance-toolbar-actions .capture-card-help { margin-left: 0; }
.attendance-card-toolbar .capture-card-close { position: relative; top: auto; right: auto; }
.attendance-brand { color: var(--ink); font-size: 1.1rem; font-weight: 750; white-space: nowrap; }
.login-app-title { padding: 1rem clamp(1rem, 3vw, 2rem); color: var(--ink); font-size: 1.2rem; font-weight: 750; text-align: left; }
.app-nav .nav-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: .6rem; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.app-nav .nav-icon svg { width: 22px; height: 22px; }
.app-nav .nav-icon:hover, .app-nav .nav-icon:focus-visible { background: rgba(255,255,255,.15); }
.app-nav .nav-icon:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.attendance-card-toolbar .attendance-connection { margin: 0 0 0 .25rem; white-space: nowrap; }
@media (max-width: 400px) {
    .attendance-choice-card:has(.attendance-admin-button) .attendance-card-toolbar { flex-wrap: wrap; }
    .attendance-choice-card:has(.attendance-admin-button) .attendance-toolbar-actions { flex-basis: 100%; justify-content: flex-end; }
    .attendance-layout .attendance-choice-card:has(.attendance-admin-button) { padding-top: 7.5rem; }
}
.auth-shell > .capture-card { width: 100%; margin-inline: auto; }
.camera-frame {
  position: relative;
  aspect-ratio: 4/3;
  border: 6px solid #e6e9f0;
  border-top-color: #adb5c5;
  border-left-color: #c0c7d3;
  border-right-color: #f8f9fc;
  border-bottom-color: #fff;
  border-radius: 22px;
  overflow: hidden;
  background: #101522;
  isolation: isolate;
  box-shadow:
    -3px -3px 8px rgba(151,159,177,.28),
    3px 3px 8px rgba(255,255,255,.9);
}
.camera-frame::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 15px; pointer-events: none; box-shadow: inset 7px 8px 14px rgba(12,17,29,.55), inset -2px -2px 5px rgba(255,255,255,.28); }
.camera-frame video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera-snapshot { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.face-guide { position: absolute; inset: 10% 25%; z-index: 2; border: 2px solid rgba(255,255,255,.85); border-radius: 48%; box-shadow: 0 0 0 999px rgba(10,14,25,.28); }
.camera-message { position: absolute; z-index: 3; left: 50%; bottom: 1rem; transform: translateX(-50%); width: max-content; max-width: calc(100% - 1.5rem); text-align: center; background: rgba(12,17,29,.86); color: white; border-radius: 999px; padding: .7rem 1.05rem; font-weight: 750; font-size: clamp(.75rem, 2.8vw, 1rem); letter-spacing: .015em; backdrop-filter: blur(8px); box-shadow: 0 5px 20px rgba(0,0,0,.25); }
.camera-frame.is-processing video { opacity: 0; }
.camera-frame.is-processing .face-guide { border-color: rgba(57,255,20,.85); }
.camera-frame.is-processing::after { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 25%; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(57,255,20,.06) 35%, rgba(57,255,20,.3)); border-bottom: 2px solid #39ff14; box-shadow: 0 5px 14px rgba(57,255,20,.65); animation: camera-scan 2.4s ease-in-out infinite alternate; }
@keyframes camera-scan { from { transform: translateY(-100%); } to { transform: translateY(400%); } }
@media (prefers-reduced-motion: reduce) { .camera-frame.is-processing::after { animation: none; transform: translateY(150%); } }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); border-radius: 12px; font-weight: 700; }
.form-control { border-radius: 11px; border-color: #dbe0ea; }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(91,92,226,.15); }
.status-message { min-height: 1.5rem; margin-top: .75rem; color: var(--muted); text-align: center; font-size: .9rem; }
.status-message.error { color: #b42318; }
.landing-shell { max-width: 980px; min-height: calc(100vh - 170px); margin: 0 auto; padding: clamp(4rem, 10vh, 8rem) 1rem 5rem; text-align: center; }
.landing-badge { display: inline-block; margin-bottom: 1.5rem; padding: .55rem .9rem; border: 1px solid rgba(91,92,226,.2); border-radius: 999px; background: rgba(255,255,255,.7); color: var(--brand-dark); font-size: .82rem; font-weight: 700; }
.landing-shell h1 { margin: .75rem auto 1.5rem; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .95; letter-spacing: -.065em; }
.landing-lead { max-width: 700px; margin: 0 auto; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.7; }
.landing-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin: 2.25rem 0 4rem; }
.landing-actions .btn { min-width: 220px; padding: .9rem 1.3rem; border-radius: 14px; font-weight: 700; }
.prototype-entry-card, .prototype-identity-card { max-width: 680px; margin: 2.25rem auto 4rem; padding: 1.5rem; border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 20px 55px rgba(29,37,67,.1); }
.prototype-identity-card { display: grid; gap: .35rem; }
.prototype-identity-card > strong { font-size: 1.35rem; }
.prototype-identity-card > span { color: var(--muted); }
.prototype-identity-card .landing-actions { margin-top: 1.25rem; }
.prototype-admin-entry { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: -2.5rem auto 4rem; color: var(--muted); }
.landing-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; text-align: left; }
.landing-trust > div { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; padding: 1.1rem; border-top: 1px solid #dce1ec; color: var(--muted); }
.landing-trust strong { color: var(--brand); font-size: .8rem; }
.dashboard-card { max-width: 720px; margin: 10vh auto; text-align: center; padding: 4rem; }
.success-mark { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1.5rem; border-radius: 50%; background: #dff8eb; color: #137c4b; font-size: 2rem; }
.users-card { position: relative; max-width: 1000px; margin: 4rem auto; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 24px; background: rgba(255,255,255,.95); box-shadow: 0 24px 70px rgba(29,37,67,.11); }
.users-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.users-table th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; border-bottom-width: 1px; }
.users-table td { padding-block: 1rem; }
.empty-users { padding: 4rem 1rem; text-align: center; border: 1px dashed #d4dae6; border-radius: 16px; }
.form-card { max-width: 560px; margin: 8vh auto; padding: 2rem; border-radius: 24px; background: white; box-shadow: 0 24px 70px rgba(29,37,67,.11); }
.work-location-form { max-width: 860px; }
#work-location-map { height: 380px; width: 100%; border: 1px solid #d8deeb; border-radius: 16px; background: #eef1f7; overflow: hidden; }
#work-location-map:focus-visible { outline: 3px solid rgba(242,166,0,.3); outline-offset: 2px; }
.field-help { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin: 0 0 .5rem .15rem; padding: 0; border: 1.5px solid #697386; border-radius: 50%; background: transparent; color: #526075; font-size: .75rem; font-weight: 800; line-height: 1; cursor: help; }
.field-help:hover, .field-help:focus-visible { border-color: var(--brand); color: var(--brand-dark); outline: none; box-shadow: 0 0 0 3px rgba(242,166,0,.16); }
.location-comparison { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid #dbe1ed; border-radius: 14px; background: #f7f8fc; text-align: left; }
.location-comparison[hidden] { display: none; }
.location-comparison-item { min-width: 0; }
.location-comparison-item span, .location-comparison-item strong, .location-comparison-item small { display: block; }
.location-comparison-item span { color: #697386; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.location-comparison-item strong { margin-top: .2rem; overflow-wrap: anywhere; }
.location-comparison-item small { margin-top: .15rem; color: #697386; }
.location-comparison-arrow { color: var(--brand-dark); font-size: 1.35rem; font-weight: 700; }
.location-comparison-distance { grid-column: 1 / -1; padding-top: .7rem; border-top: 1px solid #e0e5ef; color: #455169; font-size: .9rem; text-align: center; }
@media (max-width: 576px) { #work-location-map { height: 300px; } }
@media (max-width: 576px) { .location-comparison { grid-template-columns: 1fr; } .location-comparison-arrow { transform: rotate(90deg); text-align: center; } }
.member-search-card { padding: 1.25rem; border: 1px solid #e1e5ed; border-radius: 16px; background: #f9fafc; }
.employee-search-result { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #e1e5ed; }
.employee-search-result small { display: block; color: var(--muted); }
.credential-card { margin-top: 8vh; }
.attendance-layout { display: grid; grid-template-columns: minmax(0,900px); align-items: start; justify-content: center; gap: 2rem; padding: 2.5rem 0 5rem; }
.attendance-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.attendance-choice .btn { padding: .7rem; border-radius: 11px; font-weight: 700; }
.attendance-choice-card h1 { margin-bottom: .65rem; }
.attendance-choice-card > .eyebrow,
.attendance-choice-card > h1,
.attendance-choice-card > .text-secondary { text-align: center; }
.attendance-page-title.is-matched { color: #147a4b; }
.attendance-page-title.is-limited { color: #8a5a00; }
.attendance-page-title.is-unmatched { color: #b42318; }
.attendance-page-title.is-checking { color: var(--ink); }
.attendance-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "time-in location time-out"; justify-items: center; align-items: center; gap: 1.5rem; max-width: 680px; margin-inline: auto; }
.attendance-action.time-in { grid-area: time-in; }
.attendance-action.signal-check { grid-area: location; }
.attendance-action.time-out { grid-area: time-out; }
.attendance-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; width: 100%; max-width: 11.5rem; min-width: 0; aspect-ratio: 1; padding: 1.25rem; border: 3px solid transparent; border-radius: 50%; text-align: center; color: var(--ink); touch-action: manipulation; transition: transform .14s ease, box-shadow .14s ease, filter .14s ease; }
.attendance-action:hover { transform: translateY(-4px); color: var(--ink); filter: brightness(1.02); }
.attendance-action:active, .attendance-action.is-selected { transform: translateY(6px) scale(.98); }
.attendance-action:focus-visible { outline: 4px solid rgba(91,92,226,.28); outline-offset: 5px; }
.attendance-action.time-in { border-color: #79c99d; background: linear-gradient(145deg, #effcf5, #d7f6e5); box-shadow: 0 9px 0 #65ad83, 0 18px 30px rgba(33,163,102,.18); }
.attendance-action.time-in:hover { border-color: #42aa72; box-shadow: 0 11px 0 #579d74, 0 22px 34px rgba(33,163,102,.22); }
.attendance-action.time-in:active, .attendance-action.time-in.is-selected { box-shadow: 0 3px 0 #579d74, 0 9px 18px rgba(33,163,102,.18); }
.attendance-action.time-out { border-color: #ee9da4; background: linear-gradient(145deg, #fff5f6, #fde1e4); box-shadow: 0 9px 0 #cf737b, 0 18px 30px rgba(220,53,69,.16); }
.attendance-action.time-out:hover { border-color: #dc6974; box-shadow: 0 11px 0 #c6636c, 0 22px 34px rgba(220,53,69,.2); }
.attendance-action.time-out:active, .attendance-action.time-out.is-selected { box-shadow: 0 3px 0 #c6636c, 0 9px 18px rgba(220,53,69,.16); }
.attendance-action.signal-check { --action-accent: #536fc4; border-color: rgba(83,111,196,.2); background: var(--attendance-surface); box-shadow: -11px -11px 22px var(--attendance-highlight), 12px 12px 25px rgba(165,171,187,.5); }
.attendance-action.signal-check.is-selected::after { content: ""; position: absolute; z-index: -2; inset: -9px; border: 3px solid rgba(239,91,45,.88); border-radius: 50%; background: radial-gradient(circle, rgba(242,166,0,0) 28%, rgba(242,166,0,.13) 52%, rgba(220,53,69,.25) 70%, rgba(220,53,69,0) 76%); box-shadow: 0 0 18px rgba(242,112,34,.24); pointer-events: none; animation: signal-tracking-pulse 1.35s ease-out infinite; }
@keyframes signal-tracking-pulse {
    0% { opacity: .95; border-color: rgba(220,53,69,.92); transform: scale(.95); }
    45% { opacity: .72; border-color: rgba(255,149,0,.85); }
    72%, 100% { opacity: 0; border-color: rgba(255,149,0,0); transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .attendance-action.signal-check.is-selected::after { opacity: .8; animation: none; transform: none; }
}
.attendance-action:disabled { opacity: .56; filter: grayscale(.15); }
.attendance-action.is-selected:disabled { opacity: 1; filter: none; }
.attendance-action strong, .attendance-action small { display: block; }
.attendance-action strong { font-size: 1.18rem; }
.attendance-action small { max-width: 7.5rem; margin-top: .15rem; color: #526075; font-weight: 500; line-height: 1.25; }
.attendance-history { padding: 1.5rem; border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 18px 55px rgba(29,37,67,.09); }
.attendance-record { display: flex; align-items: center; gap: .75rem; padding: .9rem 0; border-bottom: 1px solid #e5e8ef; }
.attendance-record:last-child { border-bottom: 0; }
.attendance-dot { width: .7rem; height: .7rem; flex: 0 0 auto; border-radius: 50%; }
.attendance-dot.in { background: #21a366; }
.attendance-dot.out { background: #dc3545; }
.footer { position: static; padding: 1rem 0; font-size: .85rem; }
@media (max-width: 850px) { .auth-shell { grid-template-columns: minmax(0, 560px); gap: 2rem; padding-top: 2rem; } .auth-copy h1 { font-size: clamp(2.4rem, 12vw, 4rem); } .landing-trust { grid-template-columns: 1fr; } .users-header { align-items: flex-start; flex-direction: column; } }

/* Attendance uses a soft, molded control surface inspired by physical panels. */
.attendance-layout { --attendance-surface: #eef0f5; --attendance-shadow: #cfd3de; --attendance-highlight: #fff; }
.attendance-choice-card, .attendance-history { border: 1px solid rgba(255,255,255,.78); background: var(--attendance-surface); box-shadow: -13px -13px 28px rgba(255,255,255,.9), 15px 15px 32px rgba(165,171,187,.32); }
.attendance-choice-card { padding: 5rem clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }
.attendance-choice-card .capture-card-close { border: 1px solid rgba(255,255,255,.8); background: var(--attendance-surface); box-shadow: -4px -4px 9px #fff, 5px 5px 11px rgba(165,171,187,.4); }
.attendance-choice-card .capture-card-close:active { transform: translateY(2px); box-shadow: inset 3px 3px 6px rgba(165,171,187,.45), inset -3px -3px 6px #fff; }
.attendance-choice-card .eyebrow { color: #f0a000; }
.attendance-choice-card h1 { color: #303646; letter-spacing: -.025em; }
.attendance-action-grid { gap: clamp(1rem, 4vw, 2rem); padding-block: .8rem 1.1rem; }
.attendance-action { position: relative; isolation: isolate; border: 1px solid rgba(255,255,255,.9); background: var(--attendance-surface); box-shadow: -11px -11px 22px var(--attendance-highlight), 12px 12px 25px rgba(165,171,187,.5); }
.attendance-action::before { content: ""; position: absolute; z-index: -1; inset: 10px; border-radius: 50%; border: 5px solid color-mix(in srgb, var(--action-accent) 22%, transparent); box-shadow: inset 5px 5px 10px rgba(165,171,187,.22), inset -5px -5px 10px rgba(255,255,255,.9); }
.attendance-action.time-in { --action-accent: #24a568; border-color: rgba(36,165,104,.2); background: var(--attendance-surface); box-shadow: -11px -11px 22px var(--attendance-highlight), 12px 12px 25px rgba(165,171,187,.5); }
.attendance-action.time-out { --action-accent: #dc4d5a; border-color: rgba(220,77,90,.2); background: var(--attendance-surface); box-shadow: -11px -11px 22px var(--attendance-highlight), 12px 12px 25px rgba(165,171,187,.5); }
.attendance-action.time-in:hover, .attendance-action.time-out:hover, .attendance-action.signal-check:hover { border-color: color-mix(in srgb, var(--action-accent) 55%, white); box-shadow: -13px -13px 24px #fff, 15px 15px 28px rgba(165,171,187,.54); }
.attendance-action:active, .attendance-action.is-selected,
.attendance-action.time-in:active, .attendance-action.time-in.is-selected,
.attendance-action.time-out:active, .attendance-action.time-out.is-selected { transform: translateY(4px) scale(.985); box-shadow: inset 7px 7px 14px rgba(165,171,187,.52), inset -7px -7px 14px #fff; }
.attendance-action strong { color: var(--action-accent); font-size: 1.25rem; letter-spacing: -.015em; }
.attendance-action small { color: #747b8c; }
.attendance-history h2 { margin-bottom: 1rem; color: #303646; }
.attendance-history-table { --bs-table-bg: transparent; --bs-table-color: var(--ink); margin-bottom: 0; }
.attendance-history-table th { padding: .7rem 1rem; border: 0; color: var(--muted); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.attendance-history-table td { padding: 1rem; border-color: rgba(165,171,187,.25); vertical-align: middle; }
.attendance-history-table tbody tr.attendance-just-updated { background: #e4f5e9; }
.attendance-history-table tbody tr.attendance-just-updated > td { --bs-table-bg: #e4f5e9; }
.attendance-history-table td:first-child { min-width: 12rem; }
.attendance-history-table td:first-child .attendance-dot { display: inline-block; margin-right: .55rem; }
.attendance-history-table td:first-child small, .attendance-history-table td:last-child small { display: block; margin-top: .2rem; color: var(--muted); }
.attendance-record { margin-bottom: .8rem; padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.7); border-radius: 13px; background: var(--attendance-surface); box-shadow: inset 3px 3px 7px rgba(165,171,187,.25), inset -3px -3px 7px rgba(255,255,255,.85); }
.attendance-record:last-child { margin-bottom: 0; }
.attendance-layout .status-message:not(:empty) { padding: .75rem 1rem; border-radius: 12px; background: var(--attendance-surface); box-shadow: inset 3px 3px 7px rgba(165,171,187,.28), inset -3px -3px 7px rgba(255,255,255,.9); }
.signal-action-content { display: block; width: 100%; }
.signal-action-value { display: block; margin: .15rem auto 0; max-width: 8.5rem; color: var(--ink); font-size: .68rem; line-height: 1.1; }
.attendance-action.signal-check .location-signal-meter { display: block; width: 76%; height: .42rem; margin: .45rem auto; overflow: hidden; border-radius: 999px; background: #d7dbe4; box-shadow: inset 2px 2px 4px rgba(138,145,161,.38), inset -2px -2px 4px rgba(255,255,255,.7); }
.attendance-action.signal-check .location-signal-meter > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #dc4d5a, #f2a600); transition: width .5s ease, background .3s ease; }
.attendance-action.signal-check.is-ready .location-signal-meter > i { background: linear-gradient(90deg, #31a56d, #70ce96); }
.attendance-action.signal-check.is-limited .location-signal-meter > i { background: linear-gradient(90deg, #e58a00, #f2b632); }
.attendance-action.signal-check.is-outside .location-signal-meter > i { background: linear-gradient(90deg, #c93142, #e45b65); }
.attendance-action.signal-check.is-ready .signal-action-value { color: #147a4b; }
.attendance-action.signal-check.is-limited .signal-action-value { color: #8a5a00; }
.attendance-action.signal-check.is-outside .signal-action-value { color: #b42318; }
.attendance-action.signal-check .location-signal-trend { display: block; width: 100%; margin-inline: auto; color: var(--muted); font-size: .68rem; font-weight: 700; line-height: 1.1; text-align: center; }
.attendance-action.signal-check .location-signal-trend.is-improving,
.attendance-action.signal-check.is-ready .location-signal-trend { color: #168554; }
.location-signal-instruction { max-width: 680px; margin: .25rem auto 0; color: #202532; font-size: .82rem; font-weight: 400; line-height: 1.4; text-align: center; }
.signal-tracking-active-label { display: block; margin-bottom: .15rem; font-weight: 700; }
.signal-tracking-active-label[hidden] { display: none; }
.signal-tracking-help { display: block; }
.assigned-locations-card { overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 16px; background: var(--attendance-surface); box-shadow: inset 3px 3px 8px rgba(165,171,187,.22), inset -3px -3px 8px rgba(255,255,255,.9); text-align: left; }
.assigned-locations-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; min-height: 44px; padding: .85rem 1rem; cursor: pointer; list-style: none; }
.assigned-locations-header::-webkit-details-marker { display: none; }
.assigned-locations-header:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: -3px; border-radius: 15px; }
.assigned-locations-card[open] > summary { border-bottom: 1px solid #dce1eb; }
.assigned-locations-caption { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.assigned-locations-chevron { flex-shrink: 0; }
.assigned-locations-card[open] .assigned-locations-chevron { transform: rotate(180deg); }
.assigned-locations-header h2 { margin: 0; color: #303646; font-size: .95rem; font-weight: 700; }
.location-diagnostics-title { font-weight: 700; }
.attendance-info { text-align: left; }
.attendance-info-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-right: auto; border: 1px solid #d7dce6; border-radius: 50%; background: var(--attendance-surface); color: #526484; cursor: pointer; list-style: none; box-shadow: -3px -3px 7px rgba(255,255,255,.85), 3px 3px 7px rgba(165,171,187,.25); }
.attendance-info-toggle::-webkit-details-marker { display: none; }
.attendance-info-toggle:hover, .attendance-info[open] > .attendance-info-toggle { color: var(--brand-dark); background: #e5e9f1; }
.attendance-info-toggle:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 3px; }
.assigned-locations-header > span { color: #626c7e; font-size: .75rem; white-space: nowrap; }
.assigned-locations-list { margin: 0; padding: 0 1rem; list-style: none; }
.assigned-locations-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; gap: .5rem 1rem; padding: .85rem 0; }
.assigned-locations-list li + li { border-top: 1px solid #dce1eb; }
.assigned-location-name { color: #303646; font-size: .9rem; overflow-wrap: anywhere; }
.assigned-location-reference { display: grid; gap: .2rem; color: #626c7e; font-size: .8rem; overflow-wrap: anywhere; }
.assigned-location-reference b { font-weight: 600; }
.assigned-locations-empty { margin: 0; padding: 1rem; color: #626c7e; font-size: .85rem; }
@media (max-width: 575px) { .assigned-locations-list li { grid-template-columns: minmax(0, 1fr); } }
.location-diagnostics { overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 16px; background: var(--attendance-surface); box-shadow: inset 3px 3px 8px rgba(165,171,187,.22), inset -3px -3px 8px rgba(255,255,255,.9); text-align: left; }
.location-diagnostics > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: .8rem 1rem; color: #303646; cursor: pointer; font-size: .85rem; font-weight: 700; list-style: none; }
.location-diagnostics > summary::-webkit-details-marker { display: none; }
.location-diagnostics > summary:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: -3px; border-radius: 15px; }
.location-diagnostics-caption { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; color: #70798c; font-size: .72rem; font-weight: 500; text-align: right; }
.location-diagnostics-chevron { flex: 0 0 auto; color: #303646; }
.location-diagnostics[open] .location-diagnostics-chevron { transform: rotate(180deg); }
.location-diagnostics-accuracy { justify-self: center; padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 500; text-align: center; }
.location-diagnostics-accuracy.is-enabled { color: #147a4b; background: #dff5e9; }
.location-diagnostics-accuracy.is-disabled { color: #8a5a00; background: #fff2d8; }
@media (max-width: 767px) {
    .location-diagnostics > summary { grid-template-columns: minmax(0, 1fr); gap: .4rem; text-align: center; }
    .location-diagnostics-caption { justify-content: center; text-align: center; }
}
.location-diagnostics[open] > summary { border-bottom: 1px solid #dce1eb; }
.location-diagnostics-table { min-width: 760px; font-size: .73rem; }
.location-diagnostics-table th { padding: .55rem .65rem; color: #667085; font-size: .66rem; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.location-diagnostics-table td { padding: .55rem .65rem; color: #4e586c; vertical-align: middle; white-space: nowrap; }
.location-diagnostics-table tr.is-ready td:nth-child(3) { color: #14804f; font-weight: 700; }
.location-diagnostics-table tr.is-improve-accuracy td:nth-child(3) { color: #986400; font-weight: 700; }
.location-diagnostics-table tr.is-outside-work-location td:nth-child(3) { color: #c12820; font-weight: 700; }
.location-diagnostics-table tr.is-failed td:nth-child(3) { min-width: 13rem; max-width: 20rem; color: #c12820; font-weight: 700; white-space: normal; }
.location-diagnostics-empty td { color: #70798c; text-align: center; }
.attendance-settings-card { position: relative; max-width: 820px; margin-inline: auto; }
.attendance-setting-option { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(255,255,255,.82); border-radius: 16px; background: var(--surface); box-shadow: inset 3px 3px 8px rgba(165,171,187,.22), inset -3px -3px 8px rgba(255,255,255,.9); }
.attendance-setting-option .form-check-input { width: 3rem; height: 1.55rem; cursor: pointer; }
@media (max-width: 576px) { .attendance-setting-option { align-items: flex-start; gap: 1rem; } }
.location-match-status { max-width: 680px; margin: .8rem auto 0; padding: .65rem .9rem; border-radius: 11px; font-size: .9rem; font-weight: 700; text-align: center; }
.location-match-status.is-checking { color: #596274; background: rgba(255,255,255,.35); }
.location-match-status.is-matched { color: #147a4b; background: #dff5e9; }
.location-match-status.is-limited { color: #8a5a00; background: #fff2d8; }
.location-match-status.is-unmatched { color: #b42318; background: #fde8e8; }
.attendance-layout .location-comparison { border-color: rgba(255,255,255,.82); background: var(--attendance-surface); box-shadow: inset 4px 4px 9px rgba(165,171,187,.28), inset -4px -4px 9px rgba(255,255,255,.92); }

/* System-wide neumorphic theme */
:root { --ink: #303646; --muted: #747b8c; --brand: #f2a600; --brand-dark: #d88c00; --canvas: #e9ebf1; --surface: #eef0f5; --surface-highlight: #fff; --surface-shadow: #cdd1dc; }
body { color: var(--ink); background: radial-gradient(circle at 12% 8%, rgba(255,255,255,.92) 0, transparent 27rem), linear-gradient(145deg, #eef0f5, #e5e7ed); }
a { color: #b97600; }
a:hover { color: #895900; }

.app-nav { margin: .75rem .9rem 1.5rem !important; border: 1px solid rgba(255,255,255,.82); border-radius: 17px; background: var(--surface); box-shadow: -7px -7px 16px rgba(255,255,255,.88), 8px 8px 18px rgba(165,171,187,.34); }
.app-nav.navbar-dark .navbar-brand { color: #343a49; }
.app-nav .navbar-brand:hover { color: var(--brand-dark); }
.app-nav.navbar-dark .navbar-nav .nav-link { color: #656d7e; border-radius: 10px; padding-inline: .8rem !important; }
.app-nav .nav-link:hover, .app-nav .nav-link:focus { color: #343a49; background: rgba(255,255,255,.42); box-shadow: inset 2px 2px 5px rgba(165,171,187,.25), inset -2px -2px 5px rgba(255,255,255,.8); }
.app-nav .navbar-toggler { border: 1px solid rgba(255,255,255,.85); background: var(--surface); box-shadow: -3px -3px 7px #fff, 4px 4px 8px rgba(165,171,187,.4); }
.app-nav .navbar-toggler-icon { filter: invert(.72); }

.capture-card, .dashboard-card, .users-card, .form-card,
.prototype-entry-card, .prototype-identity-card, .attendance-history {
    border: 1px solid rgba(255,255,255,.82);
    background: var(--surface);
    box-shadow: -13px -13px 28px rgba(255,255,255,.9), 15px 15px 32px rgba(165,171,187,.34);
}
.capture-card-close { border: 1px solid rgba(255,255,255,.84); background: var(--surface); box-shadow: -4px -4px 9px #fff, 5px 5px 11px rgba(165,171,187,.42); }
.capture-card-close:hover { color: var(--brand-dark); background: var(--surface); }
.capture-card-close:active { transform: translateY(2px); box-shadow: inset 3px 3px 6px rgba(165,171,187,.46), inset -3px -3px 6px #fff; }
.eyebrow { color: var(--brand-dark); }

.btn:not(.attendance-action) { border-radius: 11px; font-weight: 700; transition: transform .14s ease, box-shadow .14s ease, color .14s ease, background-color .14s ease; }
.btn:not(.attendance-action):not(.btn-link) { border-color: rgba(255,255,255,.76); box-shadow: -4px -4px 9px rgba(255,255,255,.9), 5px 5px 11px rgba(165,171,187,.4); }
.btn:not(.attendance-action):hover { transform: translateY(-1px); }
.btn:not(.attendance-action):active, .btn:not(.attendance-action).active { transform: translateY(2px); box-shadow: inset 3px 3px 7px rgba(120,126,143,.42), inset -3px -3px 7px rgba(255,255,255,.72); }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: #e49a00; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: #c98200; --bs-btn-active-color: #fff; --bs-btn-active-bg: #c98200; --bs-btn-active-border-color: #bd7900; }
.btn-outline-primary { --bs-btn-color: #a86d00; --bs-btn-border-color: rgba(226,151,0,.42); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); }
.btn-outline-secondary, .btn-outline-light { --bs-btn-color: #626a7b; --bs-btn-border-color: rgba(152,158,174,.4); --bs-btn-hover-color: #303646; --bs-btn-hover-bg: #e4e6ec; --bs-btn-hover-border-color: rgba(152,158,174,.5); background: var(--surface); }
.btn-outline-danger { background: var(--surface); }
.btn:disabled, .btn.disabled { box-shadow: inset 2px 2px 5px rgba(165,171,187,.3), inset -2px -2px 5px rgba(255,255,255,.72); }

.form-label { color: #4d5567; font-weight: 650; }
.form-control, .form-select { border: 1px solid rgba(255,255,255,.84); border-radius: 11px; color: #343a49; background-color: var(--surface); box-shadow: inset 4px 4px 9px rgba(165,171,187,.32), inset -4px -4px 9px rgba(255,255,255,.9); }
.form-control:focus, .form-select:focus { border-color: rgba(242,166,0,.6); background-color: var(--surface); box-shadow: inset 3px 3px 7px rgba(165,171,187,.3), inset -3px -3px 7px rgba(255,255,255,.9), 0 0 0 .2rem rgba(242,166,0,.16); }
.form-control:disabled, .form-select:disabled { color: #858b98; background-color: #e3e5ea; }
.form-check-input { border-color: rgba(145,151,167,.45); background-color: var(--surface); box-shadow: inset 2px 2px 5px rgba(165,171,187,.38), inset -2px -2px 5px #fff; }
.form-check-input:checked { border-color: var(--brand); background-color: var(--brand); }
.field-help { border-color: rgba(145,151,167,.5); background: var(--surface); box-shadow: -2px -2px 5px #fff, 3px 3px 6px rgba(165,171,187,.4); }
.field-help:hover, .field-help:focus-visible { border-color: var(--brand); color: var(--brand-dark); box-shadow: 0 0 0 3px rgba(242,166,0,.14); }

.alert { border: 1px solid rgba(255,255,255,.75); border-radius: 13px; box-shadow: inset 3px 3px 7px rgba(165,171,187,.2), inset -3px -3px 7px rgba(255,255,255,.65); }
.alert-success { color: #17663f; background: #dff3e8; }
.alert-warning { color: #7d5700; background: #f8edcf; }
.alert-info { color: #315d72; background: #dfedf3; }
.badge { border: 1px solid rgba(255,255,255,.55); border-radius: 999px; box-shadow: -2px -2px 4px rgba(255,255,255,.65), 2px 2px 5px rgba(165,171,187,.3); }

.landing-badge, .privacy-note { border-color: rgba(255,255,255,.82); background: var(--surface); box-shadow: -4px -4px 9px #fff, 5px 5px 11px rgba(165,171,187,.35); }
.landing-badge { color: var(--brand-dark); }
.landing-trust > div { border: 1px solid rgba(255,255,255,.74); border-radius: 14px; background: var(--surface); box-shadow: -5px -5px 11px rgba(255,255,255,.82), 6px 6px 13px rgba(165,171,187,.3); }
.landing-trust strong { color: var(--brand-dark); }
.success-mark { border: 1px solid rgba(255,255,255,.8); background: var(--surface); box-shadow: -7px -7px 14px #fff, 8px 8px 16px rgba(165,171,187,.4), inset 0 0 0 8px rgba(33,163,102,.12); }

.users-table, .users-card .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); border-collapse: separate; border-spacing: 0 .55rem; }
.users-table thead th, .users-card .table thead th { border: 0; }
.users-table tbody tr, .users-card .table tbody tr { filter: drop-shadow(4px 5px 5px rgba(165,171,187,.18)); }
.users-table tbody td, .users-card .table tbody td { border-top: 1px solid rgba(255,255,255,.74); border-bottom: 1px solid rgba(255,255,255,.74); background: var(--surface); }
.users-table tbody td:first-child, .users-card .table tbody td:first-child { border-left: 1px solid rgba(255,255,255,.74); border-radius: 12px 0 0 12px; }
.users-table tbody td:last-child, .users-card .table tbody td:last-child { border-right: 1px solid rgba(255,255,255,.74); border-radius: 0 12px 12px 0; }
.empty-users, .member-search-card { border: 1px solid rgba(255,255,255,.76); background: var(--surface); box-shadow: inset 4px 4px 9px rgba(165,171,187,.28), inset -4px -4px 9px rgba(255,255,255,.9); }
.employee-search-result { border-color: rgba(165,171,187,.28); }

#work-location-map { border: 5px solid var(--surface); box-shadow: inset 4px 4px 9px rgba(165,171,187,.35), -5px -5px 11px #fff, 6px 6px 13px rgba(165,171,187,.3); }
.footer { color: #777e8e !important; }
.footer a { color: var(--brand-dark); }

@media (max-width: 575px) {
    .app-nav { margin: .5rem .5rem 1rem !important; }
    .app-nav .navbar-collapse { margin-top: .8rem; padding: .75rem; border-radius: 12px; box-shadow: inset 3px 3px 7px rgba(165,171,187,.25), inset -3px -3px 7px #fff; }
    .dashboard-card { padding: 2.25rem 1.25rem; }
    .users-card, .form-card { margin-top: 2rem; }
}

/* Phone attendance: a centered location control and two generous punch targets. */
@media (max-width: 767px) {
    .attendance-layout { gap: 1.25rem; padding: .5rem 0 2rem; }
    .attendance-choice-card { min-width: 0; padding: 4.5rem clamp(.75rem, 3vw, 1.25rem) 1.25rem; border-radius: 20px; }
    .attendance-card-toolbar { top: .65rem; left: .75rem; right: .75rem; gap: .35rem; }
    .attendance-brand { font-size: clamp(.8rem, 3.5vw, 1.1rem); }
    .attendance-card-toolbar .attendance-connection { gap: .15rem; margin-left: .15rem; font-size: .7rem; }
    .attendance-choice-card .capture-card-close { top: .65rem; right: .75rem; width: 2.75rem; height: 2.75rem; }
    .attendance-choice-card .capture-card-help { top: .65rem; left: .75rem; }
    .attendance-choice-card .attendance-card-toolbar .capture-card-close { top: auto; right: auto; }
    .attendance-choice-card > .eyebrow { margin-bottom: .5rem; }
    .attendance-choice-card h1 { font-size: clamp(1.35rem, 5.5vw, 1.85rem); line-height: 1.2; overflow-wrap: anywhere; }
    .attendance-choice-card > .text-secondary { margin-bottom: .9rem !important; font-size: .9rem; line-height: 1.45; }
    .attendance-action-grid { width: 100%; max-width: 26rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "location location" "time-in time-out"; gap: 1.25rem 1rem; padding: 1rem 0 1.25rem; }
    .attendance-action { container-type: inline-size; width: 100%; max-width: 11.5rem; padding: .9rem; }
    .attendance-action.signal-check { width: min(70%, 13rem); max-width: 13rem; }
    .attendance-action::before { inset: 7px; border-width: 4px; }
    .attendance-action strong { font-size: clamp(1.125rem, 15cqi, 1.65rem); line-height: 1.2; }
    .attendance-action small { max-width: 100%; font-size: clamp(.75rem, 8.5cqi, .9rem); line-height: 1.25; }
    .attendance-action.signal-check strong { font-size: clamp(1.25rem, 13cqi, 1.75rem); }
    .attendance-action.signal-check .signal-action-value,
    .attendance-action.signal-check .location-signal-trend { max-width: 100%; font-size: clamp(.75rem, 7.5cqi, .875rem); line-height: 1.2; }
    .attendance-action.signal-check .location-signal-meter { margin-block: .45rem; }
    .location-signal-instruction { font-size: .8rem; line-height: 1.5; }
    .attendance-layout .status-message:empty { display: none; }
    .attendance-history { min-width: 0; padding: 1rem; }
    .attendance-history h2 { font-size: 1.1rem; }
    .location-comparison { gap: .6rem; padding: .9rem; font-size: .85rem; }

    .location-diagnostics > summary { position: relative; min-height: 44px; padding: .8rem 2.4rem .8rem .75rem; gap: .5rem; }
    .location-diagnostics-chevron { position: absolute; top: 1rem; right: .75rem; }
    .location-diagnostics-title { font-size: .9rem; }
    .location-diagnostics-accuracy { font-size: .8rem; }
    .location-diagnostics-table,
    .attendance-history-table { display: block; width: 100%; min-width: 0; }
    .location-diagnostics-table { --bs-table-bg: transparent; }
    .location-diagnostics-table thead,
    .attendance-history-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .location-diagnostics-table tbody,
    .attendance-history-table tbody { display: grid; gap: .75rem; }
    .location-diagnostics-table tbody { padding: .75rem; }
    .location-diagnostics-table tbody tr,
    .attendance-history-table tbody tr { display: block; min-width: 0; padding: .65rem; border: 1px solid #d7dce6; border-radius: 12px; background: rgba(255,255,255,.3); }
    .location-diagnostics-table tbody td { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; padding: .3rem 0; border: 0; font-size: .8rem; white-space: normal; }
    .location-diagnostics-table tbody td::before,
    .attendance-history-table tbody td::before { content: attr(data-label); color: #616b7d; font-size: .73rem; font-weight: 600; }
    .location-diagnostics-table tbody td > span { min-width: 0; overflow-wrap: anywhere; }
    .location-diagnostics-table tr.is-failed td:nth-child(3) { min-width: 0; max-width: none; }
    .location-diagnostics-table .location-diagnostics-empty td { display: block; }
    .location-diagnostics-empty td::before { content: none !important; }
    .attendance-history-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .75rem; align-items: start; }
    .attendance-history-table tbody td:first-child { grid-column: 1 / -1; }
    .attendance-history-table tbody td,
    .attendance-history-table tbody td:first-child { display: block; min-width: 0; padding: .4rem 0; border: 0; overflow-wrap: anywhere; font-size: .9rem; }
    .attendance-history-table tbody td::before { display: block; margin-bottom: .2rem; }
    .attendance-record-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
    .attendance-record-label { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
    .attendance-history-table td:first-child .attendance-record-label .attendance-dot { margin-right: 0; }
    .attendance-history-table td:first-child .attendance-record-time { display: inline; margin-top: 0; color: var(--ink); font-size: clamp(.75rem, 3.3vw, .875rem); font-weight: 700; white-space: nowrap; }
    .attendance-history-table tbody td:last-child small { font-size: .8rem; }
}