/* Peoplo — custom styles, mobile-first + PWA */
:root { --brand:#1a57ad; --brand-d:#113d7e; --ink:#0f172a; --ink-2:#475569; --surface:#f1f5f9;
  /* Bootstrap's default muted grey is ~4.3:1 on this page background; this is 7:1 */
  --bs-secondary-color:#475569; --bs-secondary-color-rgb:71,85,105; }
* { -webkit-tap-highlight-color: transparent; }
body { background:#f1f5f9; }

/* keep content clear of iOS notch + fixed bottom nav on phones */
@supports(padding:max(0px)) {
  body { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
}

.navbar-brand .dot { width:10px;height:10px;border-radius:50%;background:#10b981;display:inline-block;box-shadow:0 0 0 4px rgba(16,185,129,.25); }
.text-brand { color:var(--brand); }
.btn-brand { background:var(--brand); color:#fff; }
.btn-brand:hover { background:var(--brand-d); color:#fff; }

.avatar { border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8rem;flex:none; }

.sidebar .list-group-item.active { background:var(--brand);border-color:var(--brand); }
.sidebar .list-group-item i { width:1.4rem; }

.clock-time { font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em; }
.selfie-preview, #cam { width:100%;max-width:280px;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:#000;transform:scaleX(-1); }

main { padding-bottom:1.5rem; }

/* larger touch targets on mobile */
@media (max-width:767.98px) {
  .list-group-item { padding-top:.85rem;padding-bottom:.85rem; }
  .btn { min-height:42px; }
  main { padding-bottom:5.5rem; }       /* room for the fixed bottom nav */
}

/* ---- mobile bottom navigation (app-like) ---- */
.bottomnav {
  background:#fff;border-top:1px solid #e2e8f0;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 12px rgba(15,23,42,.06);
  z-index:1030;
}
.bottomnav .nav-link {
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.45rem 0 .35rem;color:#64748b;font-size:.68rem;font-weight:600;line-height:1;
}
.bottomnav .nav-link i { font-size:1.25rem;line-height:1; }
.bottomnav .nav-link.active { color:var(--brand); }

/* install button pill */
#installBtn { display:none; }

/* make cards feel a touch more app-like */
.card { border:1px solid #e7ebf0; }

/* ---- payslip print ---- */
@media print {
  body * { visibility: hidden; }
  .payslip-print, .payslip-print * { visibility: visible; }
  .payslip-print { position: absolute; inset: 0; width: 100%; margin: 0; }
  .no-print { display: none !important; }
}

/* ---- mobile UI/UX polish ---- */
@media (max-width: 767.98px) {
  /* 16px inputs prevent iOS auto-zoom */
  .form-control, .form-select { font-size: 16px; }
  h5 { font-size: 1.1rem; }
  .display-5 { font-size: 2.4rem; }
  .card { border-radius: 14px; }
  .modal-fullscreen-sm-down .modal-header { position: sticky; top: 0; z-index: 5; }
  .modal-fullscreen-sm-down .modal-footer { position: sticky; bottom: 0; background: #fff; }
  .table-responsive { font-size: .9rem; }
  .list-group-item .btn-sm { padding: .35rem .5rem; }
}
/* tap feedback on nav + buttons */
.bottomnav .nav-link:active, .list-group-item-action:active, .btn:active { transform: scale(.98); }
.list-group-item-action { transition: background .12s ease; }
/* stat tiles tighten on small screens */
@media (max-width: 575.98px) { .h3 { font-size: 1.4rem; } .h4 { font-size: 1.2rem; } }

/* ---- org hierarchy tree ---- */
.org-tree, .org-tree ul { list-style: none; margin: 0; padding-left: 0; }
.org-tree ul { padding-left: 1.1rem; margin-left: .55rem; border-left: 2px solid var(--bs-border-color, #dee2e6); }
.org-tree li { position: relative; padding: .25rem 0; }
.org-tree ul > li::before { content: ""; position: absolute; left: -1.1rem; top: 1.35rem; width: .9rem; height: 2px; background: var(--bs-border-color, #dee2e6); }
.org-card { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 12px; padding: .5rem .65rem; background: #fff; }
.org-card.org-me { border-color: #1a57ad; box-shadow: 0 0 0 2px rgba(67,56,202,.12); }
.min-w-0 { min-width: 0; }

/* ---- tabbed member form ---- */
.member-tabs { gap: .3rem; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.member-tabs::-webkit-scrollbar { height: 0; }
.member-tabs .nav-link { padding: .4rem .8rem; font-size: .85rem; white-space: nowrap; border-radius: 9px; color: var(--bs-secondary-color, #6c757d); }
.member-tabs .nav-link.active { background: #1a57ad; color: #fff; }
.modal-lg .modal-body { padding-top: 1rem; }
.tab-pane .row > [class^="col"] { margin-bottom: .15rem; }

/* ---- professional login ---- */
.login-wrap { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.login-brand { position: relative; color: #fff; padding: 3rem; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(135deg, #071d44 0%, #0e326d 50%, #054eb1 100%); }
.login-brand::after { content: ""; position: absolute; inset: 0; opacity: .12;
  background-image: radial-gradient(circle at 20% 20%, #fff 1.5px, transparent 1.6px); background-size: 26px 26px; }
.login-brand-inner { position: relative; z-index: 1; max-width: 460px; }
.login-logo { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem; letter-spacing: -1px; margin-bottom: 1.5rem; }
.login-logo span { color: #fb9a4a; }
.login-logo img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.login-logo.sm { width: 38px; height: 38px; font-size: 1rem; border-radius: 11px; background: linear-gradient(135deg,#1a57ad,#054eb1); margin: 0; }
.login-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; margin-bottom: .5rem; }
.login-tag { color: rgba(255,255,255,.82); font-size: 1.02rem; line-height: 1.6; margin-bottom: 2rem; }
.login-feats { list-style: none; padding: 0; margin: 0 0 2rem; }
.login-feats li { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; color: rgba(255,255,255,.92); font-size: .95rem; }
.login-feats i { color: #fb9a4a; font-size: 1.1rem; line-height: 1.4; }
.login-foot { color: rgba(255,255,255,.6); font-size: .8rem; }
.login-form-col { display: flex; align-items: center; justify-content: center; padding: 2rem; background: #f8fafc; }
.login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 18px; padding: 2.5rem; box-shadow: 0 12px 40px rgba(2,6,23,.10); }
.login-mobilebrand { display: none; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.login-card .input-group-text { background: #f1f5f9; border-right: 0; color: #64748b; }
.login-card .form-control { border-left: 0; }
.login-card .input-group .form-control:focus { box-shadow: none; border-color: #cbd5e1; }
@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-mobilebrand { display: flex; }
  .login-card { box-shadow: 0 6px 24px rgba(2,6,23,.08); padding: 1.75rem; }
}

/* ---- public onboarding page ---- */
.onboard-page { min-height: 100vh; background: #f8fafc; padding: 2rem 1rem; }
.onboard-card { max-width: 760px; margin: 0 auto; border-radius: 18px; }
@media (max-width: 575.98px) { .onboard-page { padding: 0; } .onboard-card { border-radius: 0; min-height: 100vh; } }

/* ============================================================
   UX + accessibility layer
   ============================================================ */

/* keyboard focus: a visible, high-contrast ring on every control (dark and light surfaces) */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.navbar :focus-visible, .btn-brand:focus-visible, .list-group-item.active:focus-visible, .login-brand :focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px var(--brand); }
.form-control:focus-visible, .form-select:focus-visible { outline-offset: 0; }
main:focus { outline: none; }                       /* the skip link lands here; it is not a control */

/* skip link: first tab stop, visible only when focused */
.skip-link { position: absolute; left: .75rem; top: -12rem; z-index: 2000; background: #fff; color: var(--brand); font-weight: 700;
  padding: .65rem 1rem; border-radius: .6rem; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: .75rem; box-shadow: 0 6px 24px rgba(2,6,23,.25); }

/* sidebar sections */
.nav-group-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); padding: .85rem .75rem .3rem; }
.nav-group-label:first-child { padding-top: .25rem; }
.sidebar .list-group-item { font-size: .95rem; }
.sidebar .list-group-item:not(.active):hover { background: #e8edf5; }

/* numbers line up in tables and stat tiles */
.table td, .table th, .h3, .h4, .clock-time, .progress-bar { font-variant-numeric: tabular-nums; }

/* the bottom bar's "More" is a real button now */
.bottomnav button.nav-link { background: none; border: 0; cursor: pointer; }
.bottomnav .nav-link { font-size: .75rem; min-height: 56px; justify-content: center; }
.bottomnav .nav-link.active { position: relative; }
.bottomnav .nav-link.active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }

/* roomier tap targets on phones (44px), no tiny text */
@media (max-width: 767.98px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .form-control, .form-select { min-height: 44px; }
  .att-cell-h { font-size: .7rem; }
}
.att-cell-h { font-size: .72rem; }

/* buttons that are busy (set by app.js while a form is submitting) */
button[aria-busy="true"] { cursor: progress; opacity: .85; }
.btn:disabled, .btn.disabled { cursor: not-allowed; }

/* cards: a little depth, and lift on interactive ones */
.card { box-shadow: 0 1px 2px rgba(15,23,42,.04); }
a.card:hover, a.card:focus-visible { box-shadow: 0 6px 18px rgba(15,23,42,.10); transform: translateY(-1px); }
a.card { transition: box-shadow .15s ease, transform .15s ease; }

/* one place for page headings */
main h1.h4, main .h4.mb-3:first-child { letter-spacing: -.01em; }

/* respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .bottomnav .nav-link:active, .list-group-item-action:active, .btn:active, a.card:hover { transform: none !important; }
}

/* high-contrast / forced-colours: keep the active nav state visible */
@media (forced-colors: active) {
  .sidebar .list-group-item.active, .bottomnav .nav-link.active { outline: 2px solid Highlight; }
}

/* ============================================================
   Dark theme — Bootstrap's data-bs-theme="dark" plus the few colours this stylesheet hard-codes.
   Palette (contrast on the card colour): text #e5e7eb 14:1, muted #a8b3c7 8:1, brand text #99c0f8 8:1.
   ============================================================ */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: #0b1220; --bs-body-color: #e5e7eb; --bs-emphasis-color: #fff;
  --bs-secondary-color: #a8b3c7; --bs-secondary-color-rgb: 168,179,199;
  --bs-border-color: #22304a; --bs-tertiary-bg: #111a2e; --bs-secondary-bg: #16213a;
  --ink: #e5e7eb; --ink-2: #a8b3c7; --surface: #0b1220;
  --bs-link-color: #99c0f8; --bs-link-hover-color: #c6dbfb; --bs-link-color-rgb: 165,180,252; --bs-link-hover-color-rgb: 199,210,254;
}
[data-bs-theme="dark"] body { background: var(--bs-body-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .card { --bs-card-bg: #111a2e; --bs-card-cap-bg: #16213a; border-color: #22304a; box-shadow: none; }
[data-bs-theme="dark"] .list-group { --bs-list-group-bg: #111a2e; --bs-list-group-border-color: #22304a; --bs-list-group-action-hover-bg: #1a2540; --bs-list-group-color: #e5e7eb; }
[data-bs-theme="dark"] .modal { --bs-modal-bg: #111a2e; --bs-modal-border-color: #22304a; }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: #111a2e; --bs-dropdown-border-color: #22304a; --bs-dropdown-link-hover-bg: #1a2540; }
[data-bs-theme="dark"] .offcanvas { --bs-offcanvas-bg: #0b1220; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #0f1a30; border-color: #2a3a58; color: #e5e7eb; }
[data-bs-theme="dark"] .form-control::placeholder { color: #8391ab; }
[data-bs-theme="dark"] .input-group-text { background: #16213a; border-color: #2a3a58; color: #a8b3c7; }
[data-bs-theme="dark"] .sidebar .list-group-item:not(.active):hover { background: #1a2540; }
[data-bs-theme="dark"] .sidebar .list-group-item.active { background: var(--brand); color: #fff; }
[data-bs-theme="dark"] .text-brand { color: #99c0f8; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c6cfdf; --bs-btn-border-color: #3a4b6c; --bs-btn-hover-bg: #1f2d49; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .bg-white { background-color: #111a2e !important; }
[data-bs-theme="dark"] .bg-light:not(.badge) { background-color: #16213a !important; color: var(--bs-body-color); }
[data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] thead.table-light > * > * { --bs-table-bg: #16213a; --bs-table-color: #e5e7eb; --bs-table-border-color: #22304a; }
[data-bs-theme="dark"] .bottomnav { background: #0d1628; border-top-color: #22304a; box-shadow: 0 -2px 12px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .bottomnav .nav-link { color: #a8b3c7; }
[data-bs-theme="dark"] .bottomnav .nav-link.active { color: #99c0f8; }
[data-bs-theme="dark"] .bottomnav .nav-link.active::before { background: #99c0f8; }
[data-bs-theme="dark"] .modal-fullscreen-sm-down .modal-footer { background: #111a2e; }
[data-bs-theme="dark"] .org-card { background: #111a2e; }
[data-bs-theme="dark"] .org-card.org-me { border-color: #99c0f8; box-shadow: 0 0 0 2px rgba(165,180,252,.18); }
[data-bs-theme="dark"] .login-form-col, [data-bs-theme="dark"] .onboard-page { background: #0b1220; }
[data-bs-theme="dark"] .login-card { background: #111a2e; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
[data-bs-theme="dark"] .login-card .input-group-text { background: #16213a; }
[data-bs-theme="dark"] .login-card .input-group .form-control:focus { border-color: #5b6c91; }
[data-bs-theme="dark"] .att-views .nav-link.active, [data-bs-theme="dark"] .member-tabs .nav-link.active { background: var(--brand); color: #fff; }
[data-bs-theme="dark"] .att-today { outline-color: #99c0f8; }
[data-bs-theme="dark"] a.card:hover, [data-bs-theme="dark"] a.card:focus-visible { box-shadow: 0 6px 18px rgba(0,0,0,.5); }
[data-bs-theme="dark"] :focus-visible { outline-color: #99c0f8; box-shadow: 0 0 0 2px #0b1220; }
[data-bs-theme="dark"] .skip-link { background: #111a2e; color: #c6dbfb; }
[data-bs-theme="dark"] .nav-group-label { color: #a8b3c7; }
[data-bs-theme="dark"] .alert-info { --bs-alert-bg: #11283f; --bs-alert-color: #cfe8ff; --bs-alert-border-color: #1d4466; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-bs-theme="dark"] .selfie-preview, [data-bs-theme="dark"] #cam { background: #000; }
/* the monthly calendar uses pastel status colours set inline: keep their text dark so it stays readable in either theme */
.att-cell, .att-cell .att-cell-day { color: #0f172a; }
.att-cell .att-cell-h { color: #334155; }

/* printing (payslips) is always light */
@media print {
  [data-bs-theme="dark"] { --bs-body-bg: #fff; --bs-body-color: #212529; --bs-border-color: #dee2e6; --bs-secondary-color: #495057; color-scheme: light; }
  [data-bs-theme="dark"] body, [data-bs-theme="dark"] .card { background: #fff; color: #212529; --bs-card-bg: #fff; }
}

/* theme switch in the account menu */
#themeToggle i { width: 1.4rem; }

/* ---- attendance daily/weekly/monthly views ---- */
.att-views .nav-link { padding: .3rem .9rem; font-size: .85rem; border-radius: 8px; color: var(--bs-secondary-color, #6c757d); }
.att-views .nav-link.active { background: #1a57ad; color: #fff; }
.att-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.att-cell { min-height: 56px; border-radius: 8px; padding: 5px 6px; border: 1px solid rgba(2,6,23,.05); }
.att-cell-day { font-weight: 600; font-size: .82rem; }
.att-cell-h { font-size: .68rem; color: #475569; }
.att-today { outline: 2px solid #1a57ad; outline-offset: -2px; }
.att-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: middle; border: 1px solid rgba(2,6,23,.06); }
@media (max-width: 575.98px) { .att-cell { min-height: 46px; padding: 3px; } .att-cell-day { font-size: .72rem; } .att-cell-h { font-size: .6rem; } }

/* ---- Brand + motion polish (logo palette; transform/opacity only; off under reduced motion) ---- */
.navbar.bg-dark { background-color: #071d44 !important; }
.btn-brand, .btn { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.card { border-color: rgba(7,29,68,.10); }
a.card { transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease; }
.sidebar .list-group-item { transition: background-color .15s ease, color .15s ease; }
.table-hover > tbody > tr { transition: background-color .15s ease; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  main#main > * { animation: pg-in .4s cubic-bezier(.22,1,.36,1) both; }
  main#main > :nth-child(2) { animation-delay: .05s; } main#main > :nth-child(3) { animation-delay: .1s; }
  main#main > :nth-child(4) { animation-delay: .15s; } main#main > :nth-child(n+5) { animation-delay: .2s; }
  .alert { animation: pg-in .3s cubic-bezier(.22,1,.36,1) both; }
  a.card:hover { transform: translateY(-3px); box-shadow: 0 .6rem 1.2rem rgba(7,29,68,.12) !important; }
  .btn:active { transform: scale(.98); }
}
@media (prefers-reduced-motion: reduce) { main#main > *, .alert, a.card, .btn { animation: none !important; transition: none !important; } }