/* HR 201 components: shell additions, dashboard, directory, profile, documents, memos, trainings, settings.
   Colours come from theme variables, so both themes work. No inline styles (CSP): widths use classes. */

/* ---------- Shell ---------- */
.shell { transition: grid-template-columns .2s ease; }
.shell.collapsed { grid-template-columns: 76px minmax(0, 1fr); }
.shell.collapsed .sidebar { padding: 20px 10px; }
.shell.collapsed .nav-text, .shell.collapsed .nav-label, .shell.collapsed .brand span, .shell.collapsed .sidebar-bottom { display: none; }
.shell.collapsed .brand { margin: 0 0 18px; justify-content: center; }
.shell.collapsed .brand-logo { width: 52px !important; padding: 3px !important; }
.shell.collapsed .nav button { justify-content: center; padding: 11px 0; }
.sidebar { overflow-y: auto; }
.nav-label { margin: 18px 12px 8px; }
.nav button { padding: 10px 12px; }
.topbar { gap: 12px; }
.topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title strong { display: block; color: var(--ink); font-size: 14px; }
.topbar-title small { display: block; color: var(--ink-soft); font-size: 11.5px; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.user-meta { display: grid; line-height: 1.25; }
.user-meta strong { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.user-meta small { color: var(--ink-soft); font-size: 11px; }
.topbar .avatar { margin-left: 0; width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; font-weight: 700; }
.icon-button { min-width: 34px; height: 34px; padding: 0 8px; position: relative; }
.bell-wrap { position: relative; }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #c4283a; color: #fff; font-size: 10.5px; line-height: 18px; text-align: center; font-weight: 700; }
.bell-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .35); padding: 8px; display: grid; gap: 4px; }
.bell-menu button { text-align: left; border: 0; background: transparent; padding: 9px 10px; font-weight: 500; white-space: normal; }
.bell-menu button:hover { background: var(--line); }
.doc-idtype { display: grid; gap: 4px; margin: 8px 0; font-size: 13px; font-weight: 600; }
.doc-idtype select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; }
.bell-menu button[data-bell-item] { cursor: pointer; position: relative; padding-right: 26px; border-radius: 8px; }
.bell-menu .bell-go { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--brand, #a3171c); }
.bell-menu p { margin: 8px; font-size: 12.5px; }
@media (max-width: 720px) {
  .shell.collapsed .sidebar { padding: 17px; }
  .shell.collapsed .nav-text { display: inline; }
  .topbar { height: auto; padding: 10px 14px; flex-wrap: wrap; }
  .user-meta, .topbar-title small { display: none; }
  [data-toggle-sidebar] { display: none; }
  .bell-menu { position: fixed; left: 12px; right: 12px; width: auto; top: 64px; }
}

/* ---------- Generic helpers ---------- */
.link-button { border: 0; background: none; padding: 0; color: var(--brand); font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
.link-button:hover { background: none; }
.row-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.danger-text { color: #a3152a; }
.spaced { margin-top: 18px; }
.muted { color: var(--ink-soft); }
.req { color: #a3152a; }
.notice.compact { margin: 12px 24px; padding: 10px 14px; }
.inline-check { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 12px; margin-top: 4px; }
.narrow { width: 80px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .form-grid.three { grid-template-columns: 1fr; } }
[aria-invalid="true"] { border-color: #c4283a !important; box-shadow: 0 0 0 3px rgb(196 40 58 / .15) !important; }
.sort-head { border: 0; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; box-shadow: none; }
.sort-head:hover { background: none; text-decoration: underline; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; font-size: 12px; color: var(--ink-soft); }
.pager span { margin-right: auto; }
.hr-filters label { min-width: 150px; }
.hr-filters .search { min-width: 260px; flex: 1; margin-left: 0; }

/* Progress bar: width classes in 5% steps. */
.hr-progress { display: inline-block; width: 120px; height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.hr-progress-bar { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

/* ---------- Dashboard ---------- */
.hr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.hr-stat { display: grid; justify-items: start; gap: 4px; text-align: left; padding: 18px 18px 16px; border-radius: 14px; background: var(--glass-white, #fff); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--glass-shadow); font-weight: 400; }
.hr-stat:hover { transform: translateY(-1px); box-shadow: var(--glass-shadow-hover); }
.hr-stat-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--line); font-size: 17px; margin-bottom: 6px; }
.hr-stat strong { font-size: 26px; letter-spacing: -.02em; }
.hr-stat span { font-size: 12.5px; color: var(--ink-soft); }
.hr-stat small { font-size: 11px; color: var(--ink-soft); }
@media (max-width: 1100px) { .hr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dept-row { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr 36px; gap: 12px; align-items: center; padding: 6px 0; font-size: 13px; }
.dept-bar { height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; }
.dept-fill { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.dept-row strong { text-align: right; }
.summary-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.summary-pair.four { grid-template-columns: repeat(4, 1fr); padding: 18px 24px; align-items: center; }
.summary-pair div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--line); }
.summary-pair.four div:last-child { background: none; }
.summary-pair strong { font-size: 22px; }
.summary-pair span { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 720px) { .summary-pair.four { grid-template-columns: 1fr 1fr; } }
.summary-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; background: #fff; }
.attention { border-left: 4px solid #d99a1c; }
.attention-list { padding: 14px 24px 18px; }

/* ---------- Employee form and profile ---------- */
dialog.wide-dialog { width: min(980px, calc(100vw - 24px)); }
.form-section-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px 18px; margin: 0 0 16px; }
.form-section-box legend { font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); padding: 0 6px; }
.photo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.photo-row small { color: var(--ink-soft); }
.button-like, .small-file { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; background: #fff; }
.small-file { padding: 5px 9px; font-size: 11.5px; }
.hr-avatar { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--line); color: var(--brand); font-weight: 700; overflow: hidden; position: relative; flex-shrink: 0; }
.hr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-avatar.large { width: 84px; height: 84px; font-size: 26px; }
.hr-profile-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; flex-wrap: wrap; }
.hr-profile-id { display: flex; align-items: center; gap: 18px; }
.hr-profile-id h1 { font-size: 24px; margin: 0 0 4px; }
.hr-profile-id p { margin: 4px 0 0; }
.hr-tabs { overflow-x: auto; flex-wrap: nowrap; }
.hr-tabs button { white-space: nowrap; }
.hr-details { padding: 0; }
.hr-group-title { margin: 18px 24px 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

/* ---------- Memos and trainings ---------- */
.memo-body { white-space: pre-wrap; line-height: 1.65; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13.5px; }
.memo-version { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.memo-version summary { cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 4px 0; }
.assign-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 12px; align-items: start; }
.assign-row select[multiple] { min-height: 120px; }
@media (max-width: 720px) { .assign-row { grid-template-columns: 1fr; } }
.cal-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: 11px; font-weight: 700; text-align: center; color: var(--ink-soft); padding: 4px; }
.cal-day { min-height: 92px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 3px; background: #fff; font-size: 11px; }
.cal-day.empty { background: transparent; border-style: dashed; }
.cal-day.today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-event { font-size: 10.5px; padding: 3px 5px; border-radius: 6px; text-align: left; white-space: normal; line-height: 1.25; background: var(--line); color: var(--ink); border: 0; }
.cal-event.cancelled { text-decoration: line-through; opacity: .7; }
@media (max-width: 720px) { .cal-day { min-height: 64px; } .cal-event { font-size: 9.5px; } }

/* ---------- Reports and settings ---------- */
.report-list.wide { grid-template-columns: 1fr; }
.report-list.wide li { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 12px; align-items: center; }
.report-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.report-filters select, .report-filters input { font-size: 12px; padding: 6px 8px; }
@media (max-width: 900px) { .report-list.wide li { grid-template-columns: 1fr; } }
.settings-table input:not([type=checkbox]) { width: 100%; min-width: 110px; padding: 6px 8px; font-size: 12px; }
.settings-table td { padding: 6px 8px; }
.sticky-save { position: sticky; bottom: 0; padding: 14px 0; display: flex; justify-content: flex-end; background: linear-gradient(transparent, rgb(255 255 255 / .9) 40%); }

/* ---------- Employee portal: memos and data sheet ---------- */
.memo-cards { display: grid; gap: 14px; }
.memo-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; display: grid; gap: 8px; }
.memo-card.unread { border-left: 4px solid var(--brand); }
.memo-card header { display: grid; gap: 2px; }
.memo-card header small { color: var(--ink-soft); }
.memo-card footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.memo-card summary { cursor: pointer; font-weight: 600; font-size: 12.5px; margin-bottom: 8px; }
.plain-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
@media (max-width: 720px) { .sidebar .brand-logo { width: 120px !important; } .sidebar .brand { margin-bottom: 12px; } }
@media (max-width: 1100px) { .topbar-user .optional, .user-meta small { display: none; } .topbar-title strong { font-size: 13px; } .topbar { padding: 0 18px; } }
@media (max-width: 900px) { .user-meta { display: none; } }

/* ---------- Employee profile (info cards, tab grid, blocks) ---------- */
.info-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.info-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--glass-white, #fff); border: 1px solid var(--line); box-shadow: var(--glass-shadow); }
.info-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--line); font-size: 19px; flex-shrink: 0; }
.info-card small { display: block; font-size: 11.5px; color: var(--ink-soft); }
.info-card strong { display: block; font-size: 14.5px; color: var(--ink); }
@media (max-width: 1000px) { .info-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profile-tabs-panel { padding: 0; }
.profile-tab-grid { flex-wrap: wrap; gap: 6px; padding: 14px 18px; margin: 0; border-bottom: 1px solid var(--line); overflow: visible; }
.profile-tab-grid button { font-size: 12.5px; padding: 8px 12px; }
.hr-tab-body { padding: 18px 22px 22px; }
.hr-tab-body .panel { box-shadow: none; }
.overview-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.overview-stat { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass-white, #fff); }
.overview-stat > span:first-child { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.overview-stat strong { font-size: 22px; }
.overview-stat small { font-size: 11px; color: var(--ink-soft); }
.hr-progress.full { width: 100%; margin: 4px 0 0; }
@media (max-width: 1000px) { .overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profile-block { padding: 6px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.profile-block:last-child { border-bottom: 0; }
.profile-block-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin: 6px 0 14px; }
.profile-block-title .small { margin-left: auto; text-transform: none; letter-spacing: 0; }
.profile-block .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
@media (max-width: 720px) { .profile-block .details-grid { grid-template-columns: 1fr; } .hr-tab-body { padding: 14px; } }
.edit-rows input, .edit-rows select { width: 100%; min-width: 90px; padding: 7px 8px; font-size: 12.5px; }
.edit-rows td { padding: 6px; }

/* ---------- Payroll & Attendance parent menu ---------- */
.nav-group { display: grid; gap: 2px; margin-top: 14px; }
.nav-parent { position: relative; }
.nav .nav-parent { font-weight: 600; }
.nav-parent .nav-text { flex: 1; text-align: left; }
.nav-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; margin-right: 4px; flex-shrink: 0; }
.nav-group.open .nav-chevron { transform: rotate(45deg); }
.nav-parent.has-active { background: rgb(255 255 255 / .06); box-shadow: inset 3px 0 0 var(--gold-400, #d9b85c); }
.nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.nav-group.open .nav-sub { grid-template-rows: 1fr; }
.nav-sub-inner { overflow: hidden; display: grid; gap: 2px; padding-left: 14px; margin-left: 12px; border-left: 1px solid rgb(255 255 255 / .14); }
.nav-group:not(.open) .nav-sub-inner { visibility: hidden; }
.nav .nav-child { font-size: 12.5px; padding: 9px 10px; white-space: normal; line-height: 1.25; }
.nav button:focus-visible { outline: 2px solid var(--gold-300, #ebcf86); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-sub, .nav-chevron { transition: none; } }
.shell.collapsed .nav-chevron { display: none; }
.shell.collapsed .nav-sub-inner { padding-left: 0; margin-left: 0; border-left: 0; }
.shell.collapsed .nav-group { margin-top: 8px; }
.breadcrumb { display: inline; font: inherit; letter-spacing: inherit; }
.breadcrumb span { color: var(--ink, #1d1a14); }

/* ---------- Mobile: slide-out drawer ---------- */
.drawer-toggle, .drawer-backdrop { display: none; }
@media (max-width: 720px) {
  .shell, .shell.collapsed { display: block; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: min(300px, 86vw); height: 100vh; padding: 18px 14px; transform: translateX(-102%); transition: transform .22s ease; overflow-y: auto; }
  .shell.drawer-open .sidebar { transform: none; box-shadow: 0 0 40px rgb(0 0 0 / .45); }
  .shell.drawer-open .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / .45); }
  .nav { display: flex; flex-direction: column; overflow: visible; }
  .nav button { flex-shrink: 1; }
  .nav-label, .sidebar-bottom { display: block; }
  .shell.collapsed .nav-text, .shell.collapsed .nav-label, .shell.collapsed .brand span, .shell.collapsed .sidebar-bottom { display: revert; }
  .shell.collapsed .nav-chevron { display: block; }
  .drawer-toggle { display: inline-flex; }
  [data-toggle-sidebar] { display: none !important; }
  .topbar { position: sticky; top: 0; z-index: 30; }
}

/* ---------- Boxed personal information and emergency contact ---------- */
.profile-card { background: #fffdf8; border: 1px solid rgb(194 154 62 / .35); border-radius: 14px; padding: 18px 22px 22px; margin-bottom: 18px; box-shadow: 0 1px 2px rgb(60 40 5 / .05); }
.profile-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid rgb(194 154 62 / .25); }
.profile-card-head h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink, #1d1a14); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.profile-card-head .small { font-size: 13px; padding: 7px 14px; }
.field-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.field-box-item { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-box-item.wide { grid-column: 1 / -1; }
.field-box-label { font-size: 14.5px; font-weight: 700; color: #2b2418; line-height: 1.3; }
.field-box { min-height: 46px; padding: 12px 14px; background: #fff; border: 1px solid rgb(194 154 62 / .45); border-radius: 8px; font-size: 16px; line-height: 1.45; color: #1d1a14; overflow-wrap: anywhere; white-space: pre-wrap; display: flex; align-items: center; }
.field-box.empty { color: #7a6f5c; font-style: italic; font-size: 15px; }
@media (max-width: 720px) { .field-boxes { grid-template-columns: 1fr; } .profile-card { padding: 16px; } }
/* Tables inside profile cards (children, education, history, memos, trainings) */
.profile-card .scroll-table { border: 1px solid rgb(194 154 62 / .3); border-radius: 10px; }
.profile-card td { font-size: 14px; color: #1d1a14; }
.profile-card th { font-size: 11.5px; }
.profile-card + .legend, .hr-tab-body > .legend { font-size: 13px; }

/* 201 checklist: every category table shares the same column widths so the columns line up. */
.checklist-panel .scroll-table { overflow-x: auto; }
.checklist-panel table { table-layout: fixed; min-width: 980px; white-space: normal; }
.checklist-panel th, .checklist-panel td { padding: 12px 14px; vertical-align: middle; overflow-wrap: anywhere; }
.checklist-panel th:nth-child(1), .checklist-panel td:nth-child(1) { width: 25%; }
.checklist-panel th:nth-child(2), .checklist-panel td:nth-child(2) { width: 14%; }
.checklist-panel th:nth-child(3), .checklist-panel td:nth-child(3) { width: 13%; }
.checklist-panel th:nth-child(4), .checklist-panel td:nth-child(4) { width: 17%; }
.checklist-panel th:nth-child(5), .checklist-panel td:nth-child(5) { width: 11%; }
.checklist-panel th:nth-child(6), .checklist-panel td:nth-child(6) { width: 20%; }
.checklist-panel td:nth-child(2) .badge { margin-right: 4px; }
.checklist-panel .row-actions { flex-wrap: wrap; }
.checklist-panel .hr-group-title { margin: 22px 18px 8px; }

/* New-version notice (all accounts) */
.update-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; border-radius: 12px; background: #1d1a14; color: #fff; font-size: 13px; box-shadow: 0 12px 30px -10px rgb(0 0 0 / .5); max-width: calc(100vw - 24px); }
.update-bar .primary { white-space: nowrap; }

/* ---------- Employee 201 Files: one boxed card per employee ---------- */
.directory-wrap .scroll-table { max-height: none; overflow-x: auto; padding: 4px 18px 8px; }
.directory-wrap table { border-collapse: separate; border-spacing: 0 10px; min-width: 1080px; white-space: normal; }
.directory-wrap thead th { background: transparent; border: 0; color: var(--ink-soft, #5a4e34); font-size: 11px; letter-spacing: .08em; padding: 12px 16px 2px; position: static; }
.directory-wrap tbody tr { transition: transform .15s ease, box-shadow .15s ease; }
.directory-wrap tbody td { background: #fff; border-top: 1px solid rgb(194 154 62 / .32); border-bottom: 1px solid rgb(194 154 62 / .32); padding: 14px 16px; font-size: 13.5px; color: #2b2418; vertical-align: middle; }
.directory-wrap tbody td:first-child { border-left: 1px solid rgb(194 154 62 / .32); border-radius: 14px 0 0 14px; padding-left: 14px; }
.directory-wrap tbody td:last-child { border-right: 1px solid rgb(194 154 62 / .32); border-radius: 0 14px 14px 0; }
.directory-wrap tbody tr:hover { background: transparent; }
.directory-wrap tbody tr:hover td { background: #fffaf0; border-color: rgb(194 154 62 / .6); }
.directory-wrap tbody tr:hover { box-shadow: 0 10px 24px -16px rgb(90 62 12 / .45); transform: translateY(-1px); }
.directory-wrap tbody tr:has(.empty) td { border: 0; background: transparent; }
.emp-cell { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 0; text-align: left; box-shadow: none; color: inherit; cursor: pointer; }
.emp-cell:hover { background: none; }
.emp-cell:hover strong { color: var(--red-600, #a91e2d); }
.emp-text { display: grid; gap: 2px; min-width: 0; }
.emp-text strong { font-size: 14.5px; font-weight: 700; color: #1d1a14; line-height: 1.25; }
.emp-text small { font-size: 12px; color: var(--ink-soft, #5a4e34); letter-spacing: .02em; }
.hr-avatar.small { width: 40px; height: 40px; font-size: 14px; border: 1px solid rgb(194 154 62 / .4); background: linear-gradient(145deg, #fff8e4, #f3dfa8); color: #7c5d18; }
.cell-strong { font-weight: 600; color: #2b2418; }
.chip-soft { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid rgb(194 154 62 / .4); background: #fffaf0; font-size: 12px; font-weight: 600; color: #5d4510; }
.completion { display: grid; gap: 4px; }
.completion .hr-progress { width: 140px; }
.completion small { font-size: 11.5px; color: var(--ink-soft, #5a4e34); }
.completion .completion-missing { color: #a3152a; font-weight: 600; }
.dir-actions { flex-wrap: nowrap; justify-content: flex-end; }
.dir-actions .small { padding: 6px 11px; }
.ghost-danger { color: #a3152a; border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
.ghost-danger:hover { background: #fff1f1 !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.directory-wrap table { min-width: 1240px; }
.directory-wrap td:nth-child(1) { min-width: 260px; }
.directory-wrap td:nth-child(2), .directory-wrap td:nth-child(3) { min-width: 140px; }
.directory-wrap td:nth-child(5), .directory-wrap td:nth-child(6), .directory-wrap thead th { white-space: nowrap; }
.directory-wrap .emp-text strong { white-space: nowrap; }
.directory-wrap table { min-width: 1060px; }
.directory-wrap td:nth-child(1) { min-width: 230px; }
.directory-wrap td:nth-child(2), .directory-wrap td:nth-child(3) { min-width: 110px; }
.directory-wrap tbody td { padding: 12px 12px; }
.directory-wrap .completion .hr-progress { width: 100px; }
.dir-actions { gap: 5px; }
.dir-actions .small { padding: 5px 9px; font-size: 11.5px; }

/* ---------- Focused payroll breakdowns ---------- */
dialog.bd-dialog { width: min(920px, calc(100vw - 24px)); }
.bd { display: grid; gap: 14px; }
.bd-context { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; padding: 12px 14px; border: 1px solid rgb(194 154 62 / .35); border-radius: 12px; background: #fffdf8; }
.bd-context div { display: grid; gap: 2px; }
.bd-context span, .bd-context small { font-size: 11.5px; color: var(--ink-soft, #5a4e34); }
.bd-context strong { font-size: 14.5px; color: #1d1a14; }
.bd-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bd-fact { display: grid; gap: 4px; }
.bd-fact span { font-size: 12.5px; font-weight: 700; color: #2b2418; }
.bd-fact strong { padding: 9px 12px; border: 1px solid rgb(194 154 62 / .45); border-radius: 8px; background: #fff; font-size: 14.5px; font-weight: 600; }
.bd .scroll-table { max-height: 340px; border: 1px solid rgb(194 154 62 / .3); border-radius: 10px; }
.bd td { font-size: 13px; }
.bd-sub { margin: 6px 0 -4px; font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--red-600, #a91e2d); }
.bd-subtotal { display: flex; justify-content: flex-end; gap: 16px; font-size: 13.5px; padding: 0 6px; }
.bd-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 12px; background: linear-gradient(135deg, #fff4d2, #f1d993); border: 1px solid rgb(194 154 62 / .55); }
.bd-total span { font-weight: 700; font-size: 14px; }
.bd-total strong { font-size: 22px; letter-spacing: -.01em; }
.bd-missing { margin: 0; padding: 12px 14px; border-radius: 10px; background: #fff1f1; color: #8c1622; font-weight: 600; }
.bd-none { margin: 0; color: var(--ink-soft, #5a4e34); font-style: italic; }
.bd-sum { width: 100%; border-collapse: collapse; }
.bd-sum td { padding: 10px 6px; border-bottom: 1px solid rgb(194 154 62 / .2); font-size: 14px; }
.bd-sum .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .bd-context, .bd-facts { grid-template-columns: 1fr 1fr; } }

/* ---------- Contribution form: live amounts ---------- */
.share-input { display: flex; align-items: center; border: 1px solid rgb(194 154 62 / .45); border-radius: 10px; background: #fff; overflow: hidden; }
.share-input .peso { padding: 0 8px 0 12px; color: var(--ink-soft, #5a4e34); font-weight: 600; }
.share-input input { border: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.share-state { font-size: 11.5px; font-weight: 600; }
.share-state.auto { color: #2f6b3a; }
.share-state.manual { color: #7a5400; }
.share-state.flag { color: #a3152a; }
.inline-note { font-weight: 500; color: var(--ink-soft, #5a4e34); }
.calc-ref { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; border-radius: 10px; background: #fffaf0; border: 1px dashed rgb(194 154 62 / .5); font-size: 12.5px; color: #3b3220; }
.calc-ref .calc-source { color: var(--ink-soft, #5a4e34); }
.calc-error { color: #a3152a; font-weight: 600; }
.agency-actions { display: flex; justify-content: flex-end; }
.contribution-agency .full { grid-column: 1 / -1; }

/* ---------- Top bar: user area ---------- */
.topbar-user { gap: 14px; }
.topbar-user .optional { font-size: 12.5px; color: var(--ink-soft, #5a4e34); letter-spacing: .01em; }
.topbar-divider { width: 1px; height: 30px; background: rgb(194 154 62 / .45); }
.user-meta { text-align: right; }
.user-meta strong { font-size: 14px; font-weight: 700; color: #1d1a14; letter-spacing: -.005em; }
.user-meta small { font-size: 11.5px; color: #7c5d18; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.topbar [data-bell] { border-radius: 10px; background: #fff; border: 1px solid rgb(194 154 62 / .45); width: 38px; height: 38px; }
.signout-button { background: #141414 !important; color: #fff !important; border: 1px solid #141414 !important; border-radius: 9px; padding: 10px 18px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 16px -8px rgb(0 0 0 / .55); }
.signout-button:hover { background: #000 !important; transform: translateY(-1px); }
.signout-button:focus-visible { outline: 3px solid #d9b85c; outline-offset: 2px; }
@media (max-width: 720px) { .signout-button { padding: 8px 12px; font-size: 11.5px; } .topbar-divider { display: none; } }

/* ---------- Today's Celebrations ---------- */
.celebrations { border: 1px solid rgb(194 154 62 / .55); background: linear-gradient(135deg, #fffaf0 0%, #fff1cc 100%); }
.celebration-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.celebration { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgb(194 154 62 / .4); box-shadow: 0 8px 20px -14px rgb(90 62 12 / .45); }
.celebration.birthday { border-left: 4px solid #c4283a; }
.celebration.anniversary { border-left: 4px solid #c29a3e; }
.celebration h3 { margin: 0 0 6px; font-size: 15.5px; color: #1d1a14; }
.celebration p { margin: 0; font-size: 13px; line-height: 1.55; color: #3b3220; }
.hr-avatar.celebrant { width: 52px; height: 52px; font-size: 17px; border: 2px solid #f1d993; background: linear-gradient(145deg, #fff8e4, #f3dfa8); color: #7c5d18; }

/* ---------- Account access & recovery table ---------- */
.email-cell { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 300px; }
.email-cell > span { overflow-wrap: anywhere; }
.email-cell .small, .row-actions .small { white-space: nowrap; }
.reset-mfa { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-weight: 600; }

/* ---------- Employee 201 compliance signal ---------- */
.compliance-alert { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 16px 20px; border-radius: 14px; border: 1px solid #e3a1a8; border-left: 5px solid #c4283a; background: #fff3f4; color: #5a1018; }
.compliance-alert strong { display: block; font-size: 15px; margin-bottom: 4px; }
.compliance-alert p { margin: 2px 0; }
.compliance-alert .primary { white-space: nowrap; }
.nav-flag { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #c4283a; color: #fff; font-size: 11.5px; font-weight: 800; }
@media (max-width: 720px) { .compliance-alert { flex-direction: column; align-items: flex-start; } }

.account-table table { table-layout: auto; }
.account-table td, .account-table th { vertical-align: middle; }
.account-table td:first-child strong { display: block; }
.account-table td:first-child small { display: block; margin-top: 2px; }
.account-actions { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
.account-actions .small { white-space: nowrap; }

/* ---------- Employee portal header menu ---------- */
.employee-menu { position: relative; margin-left: auto; }
.employee-top .menu-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; border: 1px solid rgb(217 184 92 / .7); border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 14px; }
.employee-top .menu-toggle span { font-size: 18px; line-height: 1; }
.employee-menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 230px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #fff; border: 1px solid #e6d7ae; border-radius: 12px; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .45); }
.employee-menu-list.hidden { display: none; }
.employee-menu-list .menu-user { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid #f0e6cc; margin-bottom: 4px; color: #171717; font-weight: 700; font-size: 13px; }
.employee-menu-list .menu-user small { color: #777; font-weight: 500; margin-top: 2px; }
.employee-menu-list button { text-align: left; width: 100%; border: 0; background: transparent; color: #171717; padding: 11px 10px; border-radius: 8px; font-size: 14px; }
.employee-menu-list button:hover, .employee-menu-list button:focus-visible { background: #fff5dc; }
.employee-menu-list .menu-signout { background: #141414; color: #fff; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-align: center; margin-top: 4px; }
.employee-menu-list .menu-signout:hover { background: #000; }
@media (max-width: 760px) {
  .employee-top { gap: 12px; }
  .employee-top .portal-logo { height: 40px; width: 62px; }
  .employee-top > div:not(.employee-menu) strong { font-size: 13px; line-height: 1.25; }
  .employee-top .eyebrow { font-size: 10px; letter-spacing: .12em; }
  .employee-top .menu-toggle { padding: 9px 12px; font-size: 13px; }
}

.comply-list { margin: 8px 0 6px; padding-left: 22px; }
.comply-list li { margin: 3px 0; font-weight: 600; }
.comply-list small { font-weight: 500; }

/* Sign out sits under Account & access in the sidebar. */
.sidebar-bottom { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sidebar-bottom .sidebar-signout { width: 100%; background: #000 !important; color: #fff !important; border: 1px solid #d9b85c !important; }
.sidebar-bottom .sidebar-signout:hover { background: #1c1c1c !important; }
/* Collapsed sidebar: keep Sign out reachable. */
.shell.collapsed .sidebar-bottom { display: flex; padding-left: 6px; padding-right: 6px; }
.shell.collapsed .sidebar-bottom [data-account] { display: none; }
.shell.collapsed .sidebar-bottom .sidebar-signout { padding: 9px 4px; font-size: 10.5px; letter-spacing: .02em; }

/* ---------- First sign-in: choose your own password ---------- */
.forced-password { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: linear-gradient(135deg, #171717, #3a0d12); }
.forced-password .login-card { width: min(460px, 100%); margin: 0; }
.forced-password h1 { font-size: 24px; margin: 0 0 8px; }
.forced-password .form-grid.one { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
.forced-password input { width: 100%; }

/* Employee header: Account & security and Sign out at the top right. */
.employee-top .employee-top-actions { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-left: auto; flex-wrap: nowrap; }
.employee-top .account-button { background: transparent; color: #fff; border: 1px solid rgb(217 184 92 / .7); border-radius: 9px; padding: 10px 16px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.employee-top .account-button:hover { background: rgb(255 255 255 / .08); }
.employee-top .signout-button { border-color: #d9b85c !important; white-space: nowrap; }
@media (max-width: 760px) {
  .employee-top .employee-top-actions { gap: 6px; }
  .employee-top .account-button, .employee-top .signout-button { padding: 8px 10px; font-size: 11px; }
}

.ot-total strong { display: block; font-size: 22px; margin: 6px 0 2px; color: #a91d29; }
.ot-total small { color: #777; }

.ot-night { display: block; margin: 4px 0; color: #3b2a7a; font-weight: 600; font-size: 13px; }

/* ---------- Employee notification bell and confirmations ---------- */
.employee-bell { position: relative; }
.employee-top .portal-bell { position: relative; background: transparent; color: #fff; border: 1px solid rgb(217 184 92 / .7); border-radius: 9px; padding: 8px 11px; font-size: 16px; line-height: 1; }
.employee-bell .bell-count { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #c4283a; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.employee-bell .bell-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(340px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; background: #fff; color: #171717; border: 1px solid #e6d7ae; border-radius: 12px; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .45); padding: 10px 0; }
.employee-bell .bell-menu.hidden { display: none; }
.employee-bell .bell-title { display: block; padding: 4px 16px 8px; border-bottom: 1px solid #f0e6cc; }
.employee-bell .portal-notifications { padding: 0 16px; }
.employee-bell .portal-notifications li.unread { font-weight: 700; }
.employee-bell .portal-notifications li:has(.notice-item) { padding: 0; }
.notice-item { display: block; width: 100%; padding: 14px 24px 14px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; white-space: normal; }
.notice-item::after { content: '›'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: #b51f2b; font-size: 20px; }
.notice-item:hover, .notice-item:focus-visible { background: #fff7e4; }
.notice-message { font-size: 16px; line-height: 1.5; margin: 0 0 6px; }
.notice-when { color: #777; font-size: 12px; margin: 0 0 16px; }
.notice-rows { border: 1px solid #eadfc4; border-radius: 10px; overflow: hidden; }
.notice-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid #f1ead8; }
.notice-row:last-child { border-bottom: 0; }
.notice-row span { color: #666; flex-shrink: 0; }
.notice-row strong { text-align: right; overflow-wrap: anywhere; font-weight: 600; }
.confirm-box { text-align: center; padding-top: 8px; }
.confirm-box .confirm-icon { font-size: 44px; margin: 0 0 6px; }
.confirm-box p { font-size: 15px; line-height: 1.6; }
@media (max-width: 760px) { .employee-top .portal-bell { padding: 7px 9px; font-size: 14px; } }

/* Payroll computation: the employee column stays in place while the figures scroll sideways. */
.payroll-computation .scroll-table th:first-child, .payroll-computation .scroll-table td:first-child { position: sticky; left: 0; z-index: 2; background: #fffdf8; box-shadow: 6px 0 10px -8px rgb(90 62 12 / .35); min-width: 200px; }
.payroll-computation .scroll-table thead th:first-child { z-index: 3; background: #fbefc8; }
.payroll-computation .scroll-table tbody tr:hover td:first-child { background: #fff6e0; }
@media (max-width: 760px) { .payroll-computation .scroll-table th:first-child, .payroll-computation .scroll-table td:first-child { min-width: 140px; max-width: 160px; } }

/* Notification panel always opens above the page, and never widens it on phones. */
.employee-shell { overflow-x: clip; }
.employee-top { position: relative; z-index: 60; }
.employee-bell .bell-menu { z-index: 1000; }
@media (max-width: 760px) {
  .employee-bell { position: static; }
  .employee-bell .bell-menu { position: fixed; left: 12px; right: 12px; top: 100px; width: auto; max-height: 70vh; }
}

/* ---------- Employee portal sidebar menu ---------- */
.employee-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; max-width: 1400px; margin: 0 auto; }
.employee-sidebar { position: sticky; top: 0; align-self: start; min-height: calc(100vh - 90px); background: #171717; border-right: 1px solid rgb(217 184 92 / .35); padding: 18px 12px; }
.employee-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.employee-sidebar button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 10px; color: rgb(255 255 255 / .86); padding: 11px 12px; font-size: 14px; font-weight: 600; box-shadow: none; }
.employee-sidebar button:hover { background: rgb(255 255 255 / .07); color: #fff; }
.employee-sidebar button.active { background: linear-gradient(135deg, #f6e3a6, #d9b85c); color: #171717; }
.employee-sidebar .employee-nav-emoji { font-size: 18px; width: 24px; text-align: center; }
.employee-sidebar .nav-flag { margin-left: auto; }
.employee-body > .employee-main { max-width: none; margin: 0; min-width: 0; }
.employee-menu-button { display: none; background: transparent; color: #fff; border: 1px solid rgb(217 184 92 / .7); border-radius: 9px; padding: 7px 11px; font-size: 18px; line-height: 1; }
.employee-scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 70; }
.employee-scrim[hidden] { display: none; }
@media (max-width: 900px) {
  .employee-body { display: block; }
  .employee-menu-button { display: inline-block; }
  .employee-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 82vw); min-height: 0; z-index: 80; transform: translateX(-105%); transition: transform .2s ease; overflow-y: auto; padding-top: 24px; }
  .employee-sidebar.open { transform: translateX(0); }
}

/* Account & security and Sign out live at the bottom of the employee menu; the logo is larger. */
.employee-sidebar { display: flex; flex-direction: column; }
.employee-sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .12); display: flex; flex-direction: column; gap: 8px; }
.employee-sidebar .sidebar-signout { justify-content: center; background: #000; color: #fff; border: 1px solid #d9b85c; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.employee-sidebar .sidebar-signout:hover { background: #1c1c1c; }
.employee-top .portal-logo { height: 68px; width: auto; max-width: 200px; aspect-ratio: 661 / 245; padding: 6px 8px; }
@media (max-width: 900px) {
  .employee-sidebar { padding-bottom: 24px; }
  .employee-top .portal-logo { height: 52px; width: auto; max-width: 150px; padding: 4px 6px; }
}

.employee-top-spacer { flex: 1; }

/* Employee header: logo fills the bar; larger menu button and menu items. */
.employee-top { padding-top: 10px; padding-bottom: 10px; min-height: 84px; align-items: center; }
.employee-top .portal-logo { height: 64px; max-width: 220px; padding: 4px 8px; border-radius: 10px; }
.employee-menu-button { font-size: 26px; padding: 10px 16px; border-radius: 12px; }
.employee-sidebar button { font-size: 16px; padding: 14px 14px; gap: 14px; }
.employee-sidebar .employee-nav-emoji { font-size: 21px; width: 28px; }
@media (max-width: 900px) {
  .employee-top { padding: 8px 12px; min-height: 76px; gap: 10px; }
  .employee-top .portal-logo { height: 58px; max-width: 190px; }
  .employee-menu-button { font-size: 28px; padding: 9px 15px; }
  .employee-sidebar { width: min(310px, 86vw); }
  .employee-bell .bell-menu { top: 88px; }
}
.employee-top .employee-menu-button { font-size: 26px; padding: 10px 16px; line-height: 1; min-width: 56px; min-height: 52px; }
@media (max-width: 900px) { .employee-top .employee-menu-button { font-size: 28px; padding: 8px 14px; min-width: 56px; min-height: 54px; } }

/* Government agency badges (SSS blue, PhilHealth green, Pag-IBIG blue with red) */
.agency-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 10.5px; font-weight: 900; letter-spacing: .02em; color: #fff; vertical-align: middle; margin-right: 6px; box-shadow: 0 2px 6px -2px rgb(0 0 0 / .35); }
.agency-sss { background: #0b3d91; }
.agency-philhealth { background: #12823b; }
.agency-pagibig { background: #1c4fa1; border: 2px solid #d62828; }
.agency-name { display: inline-flex; align-items: center; font-weight: 700; }
.contribution-agency legend { display: inline-flex; align-items: center; }

/* ---------- Holiday calendar cards ---------- */
.holiday-calendar { padding: 6px 20px 20px; }
.holiday-month h3 { margin: 18px 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #8a6a1f; }
.holiday-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.holiday-card { display: grid; grid-template-columns: 58px 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #efe2bd; box-shadow: 0 10px 22px -18px rgb(90 62 12 / .5); border-left: 5px solid #c9b07a; }
.holiday-card.kind-regular { border-left-color: #c4283a; }
.holiday-card.kind-special, .holiday-card.kind-double { border-left-color: #d9a520; }
.holiday-card.kind-ordinary { border-left-color: #9aa0a6; }
.holiday-card.past { opacity: .62; }
.holiday-card.next { box-shadow: 0 0 0 2px #d9b85c, 0 14px 28px -16px rgb(150 100 10 / .6); background: linear-gradient(135deg, #fffaf0, #fff1cc); }
.holiday-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 58px; border-radius: 12px; background: #171717; color: #fff; }
.holiday-date strong { font-size: 22px; line-height: 1; }
.holiday-date span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #f2d58a; margin-top: 3px; }
.holiday-icon { font-size: 30px; text-align: center; }
.holiday-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.holiday-info h4 { margin: 0; font-size: 15px; color: #1d1d1d; }
.holiday-info small { color: #8a8170; font-size: 11.5px; overflow-wrap: anywhere; }
.holiday-kind { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #f4ecd8; color: #6b5420; }
.kind-regular .holiday-kind { background: #fde4e7; color: #a01b2b; }
.kind-special .holiday-kind, .kind-double .holiday-kind { background: #fff2c9; color: #8a6400; }
.kind-ordinary .holiday-kind { background: #eceff1; color: #4b5560; }
.holiday-next { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #c4283a; padding: 2px 8px; border-radius: 999px; }
@media (max-width: 600px) { .holiday-grid { grid-template-columns: 1fr; } .holiday-card { grid-template-columns: 50px 36px minmax(0, 1fr); } .holiday-actions { grid-column: 1 / -1; justify-self: end; } }

/* ---------- Net pay form ---------- */
.net-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.net-side { border: 1px solid #efe2bd; border-radius: 14px; padding: 12px 14px; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; }
.net-side legend { font-weight: 800; padding: 0 6px; }
.net-box { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: #fffdf7; border: 1px solid #f0e4c2; }
.net-box span { font-size: 12px; font-weight: 700; color: #5a4e34; }
.net-box input { font-size: 16px; font-weight: 700; padding: 8px 10px; }
.net-box small { font-size: 11px; color: #8a8170; }
.net-box.locked input { background: #f5f2ea; color: #555; }
.net-box.overridden, .net-box.changed { border-color: #c4283a; background: #fff6f6; }
.net-box.overridden small, .net-box.changed small { color: #a01b2b; }
.net-total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: #fbefc8; font-weight: 700; }
.net-pay { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, #171717, #3a0d12); color: #fff; }
.net-pay strong { font-size: 26px; color: #f6d77d; }
@media (max-width: 760px) { .net-columns { grid-template-columns: 1fr; } }

.net-total.net-focus { box-shadow: 0 0 0 2px #c4283a; }
.net-pay.net-focus { box-shadow: 0 0 0 3px #d9b85c; }

.fact-value { font-size: 17px; color: #1d1d1d; }
#basic-form .net-side + .net-side { margin-top: 14px; }

.employee-menu-heading { display: block; margin: 14px 12px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #d9b85c; }

/* Pay forms: the reason sits beside Save so it is always visible. */
.pay-foot { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pay-reason { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #5a4e34; margin-right: auto; }
.pay-reason input { padding: 10px 12px; font-size: 14px; }
.pay-reason.invalid input { border-color: #c4283a; box-shadow: 0 0 0 3px rgb(196 40 58 / .18); }
.pay-reason-error { color: #c4283a; font-weight: 700; }

.final-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: #171717; color: #fff; }
.final-banner strong { background: #d9b85c; color: #171717; padding: 3px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .1em; }

/* Employee portal: page title per section and sub-tabs inside Attendance. */
.portal-page-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.portal-page-head span { font-size: 28px; }
.portal-page-head h1 { margin: 0; font-size: 26px; }
.portal-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.portal-subtabs button { border-radius: 999px; padding: 9px 16px; font-weight: 700; background: #fff; border: 1px solid #e6d7ae; color: #5a4e34; }
.portal-subtabs button.active { background: linear-gradient(135deg, #f6e3a6, #d9b85c); color: #171717; border-color: #d9b85c; }

/* Payroll: working days column centred, month shown under the heading. */
.payroll-computation .scroll-table th:nth-child(2), .payroll-computation .scroll-table td:nth-child(2) { text-align: center; }
.payroll-computation th .th-sub { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: none; opacity: .8; }
.payroll-computation .scroll-table th:not(:first-child), .payroll-computation .scroll-table td:not(:first-child) { text-align: center; }

/* Employee menu: the items scroll; Account & security and Sign out stay pinned and visible at the bottom. */
.employee-sidebar { display: flex; flex-direction: column; overflow: hidden; height: calc(100vh - 84px); min-height: 0; }
.employee-sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.employee-sidebar-foot { flex: 0 0 auto; margin-top: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: #171717; }
.employee-sidebar .sidebar-signout { display: flex; padding: 13px 14px; font-size: 15px; }
@media (max-width: 900px) {
  .employee-sidebar { height: 100dvh; padding-bottom: 0; }
  .employee-sidebar button { padding: 11px 12px; font-size: 15px; }
  .employee-menu-heading { margin: 10px 12px 2px; }
}
.payroll-total { font-size: 14px; color: var(--ink); }
.payroll-total strong { color: var(--red-700, #8f1420); font-size: 15px; }
.employer-share-link { font-size: 13px; font-weight: 600; color: var(--red-700, #8f1420); text-decoration: underline; }
.contrib-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.contrib-summary { margin: 0; display: grid; gap: 6px; }
.contrib-summary div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.contrib-summary dt { margin: 0; }
.contrib-summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.contrib-summary .total { border-bottom: 0; border-top: 2px solid var(--gold-700, #a87b16); font-weight: 700; font-size: 15px; }
.employer-share-link { background: none; border: 0; padding: 0; cursor: pointer; }
/* Compact contribution editor: one row per agency, everything visible without scrolling. */
.cb-compact .share-input { width: 100%; }
.cb-compact .share-input .peso { padding: 0 4px 0 8px; }
.cb-compact .share-input input { width: 100%; padding: 8px 6px; font-size: 14px; }
.cb-compact th, .cb-compact td { padding-left: 8px; padding-right: 8px; }
.cb-compact td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.cb-compact .share-state { display: block; min-height: 14px; font-size: 11px; }
.cb-save { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0 4px; }
.cb-save .field { margin: 0; min-width: 220px; }
.cb-history { margin-top: 10px; }
.cb-history summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.cb-saved { margin: 0; padding: 8px 14px; border-radius: 10px; background: #e8f6ec; border: 1px solid #9fd3ae; color: #1f6b36; font-weight: 600; font-size: 13px; }
/* The agency table always fits the dialog: fixed columns, boxes fill their column, no sideways scroll. */
dialog .cb-compact .table-wrap, dialog .cb-compact .scroll-table { overflow: visible; }
dialog .cb-compact table { table-layout: fixed; width: 100%; min-width: 0; white-space: normal; }
dialog .cb-compact table th, dialog .cb-compact table td { padding: 8px 6px; }
dialog .cb-compact table th:first-child, dialog .cb-compact table td:first-child { width: 20%; padding-left: 4px; }
.cutoff-link { font-weight: 600; color: var(--red-700, #8f1420); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Payroll summary: all five cards on one line (two rows only on narrow screens). */
.cards.cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cards.cards-5 .card-value { font-size: clamp(20px, 1.9vw, 27px); }
@media (max-width: 1100px) { .cards.cards-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cards.cards-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 13th month salary records: year banner above the month columns; payroll amounts in read-only cells. */
.th-year-band { text-align: center; font-weight: 800; letter-spacing: .12em; font-size: 15px; padding: 10px 0; color: var(--red-700, #8f1420); background: linear-gradient(180deg, #fff8e6, #f8e9c4); border-top: 1px solid var(--line); }
.payroll-amount { display: block; font-weight: 700; font-variant-numeric: tabular-nums; padding: 8px 4px 0; }
.th-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.th-head .legend { margin: 0; }
/* Employee 201 documents: one card per requirement; the upload button is always visible, phones included. */
.doc-cards { display: grid; gap: 10px; padding: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.doc-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: #fffdf8; display: grid; gap: 8px; align-content: start; }
.doc-card.due { border-color: #e7a5ab; background: #fff7f6; }
.doc-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.doc-card-head strong { font-size: 14px; }
.doc-meta, .doc-note { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.doc-note { color: #a31927; }
.doc-upload { justify-content: center; width: 100%; padding: 12px 14px; font-size: 14px; cursor: pointer; }
.primary-like { background: var(--red-600, #b51f2b); color: #fff; border-color: var(--red-600, #b51f2b); }
.primary-like:hover { filter: brightness(1.06); }
/* Office Wi-Fi time in / out */
.net-status { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.net-status.ok { color: #1f6b36; }
.net-status.away { color: #a31927; }
.clock-outside { width: 100%; margin-top: 8px; padding: 12px; font-size: 15px; border-radius: 14px; border: 1.5px dashed var(--red-600, #b51f2b); background: #fff; color: var(--red-700, #8f1420); font-weight: 700; }
.oof-panel { border-color: #e7a5ab; }
.office-net-list { display: grid; gap: 8px; margin: 10px 0; }
.office-net-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.skip-list { display: grid; gap: 4px; margin-top: 10px; }
/* 13th month: year chooser */
.year-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.year-card { display: grid; gap: 4px; text-align: left; padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: #fffdf8; cursor: pointer; color: var(--ink, #202020); }
.year-card strong { font-size: 28px; color: var(--red-700, #8f1420); }
.year-card span { font-weight: 700; }
.year-card small { color: var(--muted); }
.year-card.current { border-color: #e9c46a; background: linear-gradient(135deg, #fff8e6, #f8e9c4); }
.year-card:hover { border-color: var(--red-600, #b51f2b); }
.year-card.add-year { border-style: dashed; align-content: center; text-align: center; }
.year-card.add-year strong { font-size: 30px; }
/* Employee 201 directory: name, position, date hired, 201 completion (clicking the name opens the 201 file). */
.directory-wrap table { min-width: 0 !important; }
.dept-list { display: grid; gap: 6px; margin: 12px 0; }
.dept-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf8; }
.dept-add { display: flex; gap: 8px; }
.dept-add input { flex: 1; }
/* Show / hide password eye button inside password boxes */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; padding: 0; color: var(--muted, #6b5a50); cursor: pointer; }
.pw-eye:focus-visible { outline: 2px solid var(--gold-700, #a87b16); }
.pw-eye svg { display: block; }
.pw-eye:hover { background: rgb(0 0 0 / .05); color: var(--red-700, #8f1420); }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 28px 0 14px; font-size: 20px; }
.signed-in { display: block; color: #1f6b36; font-size: 11px; margin-top: 4px; }
.accounts-fold { margin: 12px 0; }
.accounts-fold summary { cursor: pointer; font-weight: 700; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf8; }
.accounts-fold[open] summary { margin-bottom: 8px; }
.user-meta { background: none; border: 0; padding: 4px 8px; border-radius: 10px; cursor: pointer; text-align: right; display: grid; color: inherit; }
.user-meta:hover { background: rgb(0 0 0 / .05); }
.my-profile { display: flex; gap: 16px; align-items: flex-start; }
.my-profile h3 { margin: 4px 0 2px; font-size: 18px; }
/* Account & access / My account: one clickable box per task; details open inside the box. */
.acc-boxes { display: grid; gap: 10px; margin: 6px 0; }
.acc-box { border: 1px solid var(--line); border-radius: 14px; background: #fffdf8; }
.acc-box > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; }
.acc-box > summary::-webkit-details-marker { display: none; }
.acc-box > summary::after { content: '›'; margin-left: auto; font-size: 22px; color: var(--muted); transition: transform .15s; }
.acc-box[open] > summary::after { transform: rotate(90deg); }
.acc-box > summary:hover { background: rgb(0 0 0 / .03); border-radius: 14px; }
.acc-box > summary strong { display: block; font-size: 15px; }
.acc-box > summary small { color: var(--muted); font-size: 12px; }
.acc-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #f8e9c4; font-size: 18px; flex: none; }
.acc-box[open] { border-color: #e9c46a; }
.acc-box > :not(summary) { margin: 0 16px 14px; }
.portal-account-tools { margin-top: 10px; }
/* Employee time card: four solid red buttons, each with a white line icon. */
.clock-actions .clock-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 10px; padding: 14px 16px; font-size: 17px; font-weight: 700; border-radius: 14px; border: 0; background: linear-gradient(180deg, #c32a37, #96131f); color: #fff; box-shadow: 0 6px 16px -8px rgb(150 19 31 / .6); }
.clock-actions .clock-btn:hover { filter: brightness(1.06); }
.clock-actions .clock-btn:disabled { opacity: .45; }
.clock-actions .clock-btn .btn-icon { flex: none; }
.clock-actions .clock-outside { border-style: none; }
.blocker-list { max-height: 55vh; overflow: auto; padding-left: 20px; line-height: 1.7; font-size: 13px; }
/* Holiday calendar: the whole year on one screen. */
.hol-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 18px 0; font-size: 12px; color: var(--muted); }
.hol-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 16px; }
@media (max-width: 1100px) { .hol-year { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hol-year { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hol-year { grid-template-columns: 1fr; } }
.hol-month { border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; padding: 8px 10px; }
.hol-month h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700, #a87b16); }
.hol-month ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hol-month li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 4px; border-radius: 6px; line-height: 1.3; }
.hol-month li:hover { background: rgb(0 0 0 / .04); }
.hol-month li.past { opacity: .55; }
.hol-month li.next { background: #fff3d6; }
.hol-month li b { min-width: 18px; text-align: right; }
.hol-month li small { color: var(--muted); min-width: 26px; }
.hol-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hol-month li em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--red-700, #8f1420); }
.hol-edit { border: 0; background: none; padding: 0 4px; font-size: 13px; color: var(--muted); cursor: pointer; }
.hol-edit:hover { color: var(--red-700, #8f1420); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.kind-regular { background: #c32a37; }
.dot.kind-special { background: #e0a526; }
.dot.kind-ordinary { background: #9a9a9a; }
.hol-years { padding: 12px 16px 0; margin: 0; }
/* The eye button keeps its own size everywhere (the sign-in page styles every button full width). */
.pw-wrap .pw-eye, .login-form .pw-wrap .pw-eye { width: 34px; height: 34px; margin: 0; padding: 0; right: 6px; left: auto; box-shadow: none; background: transparent; }
.login-form .pw-wrap { margin: 0; }
.locked-field { background: #f3efe6 !important; color: #5a4e34; pointer-events: none; }
.locked-note { display: block; color: #8a6d1e; font-size: 11px; font-weight: 600; margin-top: 2px; }
.missing-details { border-color: #e9c46a; }
.sched-cell { font-size: 12.5px; color: var(--ink-soft, #5a4e34); white-space: nowrap; }
.rest-days { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.rest-days legend { font-weight: 600; font-size: 12px; padding: 0 4px; }
.add-hol-year { border-style: dashed !important; }
/* Holiday calendar: long names wrap inside their month box (no overlap). */
.hol-month { min-width: 0; overflow: hidden; }
.hol-month ul { grid-template-columns: minmax(0, 1fr); }
.hol-month li { min-width: 0; align-items: flex-start; }
.hol-month li .dot { margin-top: 5px; }
.hol-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.hol-edit { flex: none; margin-left: auto; }
/* Government Contributions: month buttons */
.month-picker { display: grid; gap: 8px; }
.month-year { display: flex; align-items: center; gap: 10px; }
.month-year strong { font-size: 18px; min-width: 48px; text-align: center; }
.month-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.month-buttons button { min-width: 52px; }
.month-buttons button.active { background: linear-gradient(180deg, #c32a37, #96131f); color: #fff; border-color: #96131f; }
.month-buttons button.now:not(.active) { border-color: #e9c46a; font-weight: 700; }
.hol-years { display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px 0; }
.hol-year-pick { margin: 0; min-width: 120px; }
.hol-years .add-hol-year { height: 38px; }
.th-year-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.th-year-pick .field { margin: 0; min-width: 120px; }
.th-total { display: block; font-size: 14px; white-space: nowrap; }
/* 13th month salary records: Employee to Total fits the page without sideways scrolling */
.th-grid .scroll-table { overflow: visible; max-height: none; }
.th-grid table { table-layout: fixed; width: 100%; }
.th-grid th, .th-grid td { padding: 8px 3px; white-space: normal; }
.th-grid th:first-child, .th-grid td:first-child { width: 12%; padding-left: 10px; font-size: 11.5px; }
.th-grid th:nth-last-child(-n+2), .th-grid td:nth-last-child(-n+2) { width: 8%; text-align: right; }
.th-grid th:last-child, .th-grid td:last-child { padding-right: 10px; }
.th-grid .th-13 { color: var(--red-700, #8f1420); }
.th-grid th { text-align: center; font-size: 9.5px; letter-spacing: .02em; }
.th-grid input.share-input { display: block; width: 100%; min-width: 0; padding: 6px 3px; font-size: 11px; text-align: right; border-radius: 6px; }
.th-grid .payroll-amount { font-size: 11px; text-align: right; padding: 6px 3px 0; }
.th-grid .th-total { font-size: 12px; }
.th-grid td:last-child .share-state { display: block; font-size: 9.5px; white-space: nowrap; }
/* Final pay: leave to convert, as a dropdown with tick boxes */
.leave-dropdown { position: relative; max-width: 420px; }
.leave-dropdown summary { list-style: none; cursor: pointer; border: 1px solid #d6d6d6; border-radius: 6px; background: #fff; padding: 10px 34px 10px 11px; font-weight: 500; position: relative; }
.leave-dropdown summary::-webkit-details-marker { display: none; }
.leave-dropdown summary::after { content: '\25BE'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.leave-dropdown[open] summary::after { content: '\25B4'; }
.leave-options { position: absolute; z-index: 5; left: 0; right: 0; margin-top: 4px; background: #fff; border: 1px solid #d6d6d6; border-radius: 8px; box-shadow: 0 10px 30px #0000001f; padding: 6px 10px; max-height: 260px; overflow: auto; }
.leave-options label.check { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 500; }
.th-grid button.th-month-total { display: block; width: 100%; padding: 6px 3px; font-size: 11px; text-align: right; color: inherit; font-weight: 600; cursor: pointer; border-radius: 6px; }
.th-grid button.th-month-total:hover { border-color: var(--brand, #b51f2b); background: #fffaf0; }
.th-grid input.th-ov { font-weight: 700; }
.th-grid input.th-13 { color: var(--red-700, #8f1420); }
.th-grid input.th-edited { border-color: var(--brand, #b51f2b); background: #fff6f6; }
/* 13th month grid: every amount box starts with a peso sign */
.th-grid .th-peso { position: relative; display: block; }
.th-grid .th-peso::before { content: '₱'; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--ink-soft, #5a4e34); pointer-events: none; }
.th-grid .th-peso input.share-input { padding-left: 14px; }
/* Messages: 💬 button beside the bell and the side panel */
.msg-wrap { position: relative; display: inline-flex; }
.msg-button { position: relative; font-size: 17px; }
.employee-top-actions .msg-button { width: 44px; height: 44px; border-radius: 999px; padding: 0; }
.msg-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(380px, 100vw); display: flex; flex-direction: column; background: #fffdf8; border-left: 1px solid #ead9b0; box-shadow: -18px 0 50px #00000024; }
.msg-panel[hidden] { display: none; }
.msg-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #f0e3c4; background: linear-gradient(180deg, #fff8e6, #fdf1d6); }
.msg-head > strong { font-size: 16px; margin-right: auto; }
.msg-title { display: grid; margin-right: auto; min-width: 0; }
.msg-title strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-title small { color: var(--muted); font-size: 11px; }
.msg-search { padding: 10px 14px; border-bottom: 1px solid #f3e8cf; }
.msg-search input { width: 100%; }
.msg-list { overflow-y: auto; flex: 1; }
.msg-person { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f3ead6; border-radius: 0; background: transparent; padding: 11px 14px; color: inherit; font-weight: 400; }
.msg-person:hover { background: #fff6e2; }
.msg-person[hidden] { display: none; }
.msg-avatar { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #f6e3b4; color: #8f1420; font-weight: 700; font-size: 13px; }
.msg-who { display: grid; min-width: 0; flex: 1; }
.msg-who strong { font-size: 13.5px; color: #262626; }
.msg-who small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-person.unread .msg-who small { color: #262626; font-weight: 600; }
.msg-meta { display: grid; justify-items: end; gap: 4px; }
.msg-meta small { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.msg-unread { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: #c4283a; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.msg-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: #fbf7ee; }
.msg-day { align-self: center; font-size: 10.5px; color: var(--muted); margin: 8px 0 2px; }
.msg-bubble { max-width: 80%; padding: 8px 11px; border-radius: 14px; box-shadow: 0 1px 2px #0000000f; }
.msg-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.45; }
.msg-bubble small { display: block; margin-top: 3px; font-size: 10px; opacity: .75; text-align: right; }
.msg-bubble.mine { align-self: flex-end; background: linear-gradient(180deg, #c32a37, #a31b28); color: #fff; border-bottom-right-radius: 4px; }
.msg-bubble.theirs { align-self: flex-start; background: #fff; border: 1px solid #efe2c4; border-bottom-left-radius: 4px; }
.msg-empty { text-align: center; padding: 30px 16px; }
.msg-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid #f0e3c4; background: #fff; }
.msg-compose textarea { flex: 1; min-height: 44px; max-height: 140px; resize: vertical; font-size: 13.5px; }
/* Attendance explanations with HR / employee comments */
.expl-list { display: grid; gap: 12px; }
.expl-card { border: 1px solid #efe2c4; border-radius: 12px; padding: 12px 14px; background: #fffdf8; }
.expl-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.expl-card header .badge { margin-left: auto; }
.expl-card > p { margin: 8px 0; white-space: pre-wrap; }
.expl-comment { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border-left: 3px solid #d9b85c; }
.expl-comment.hr { border-left-color: #b51f2b; background: #fff6f6; }
.expl-comment p { margin: 4px 0 0; white-space: pre-wrap; }
.expl-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.expl-reply textarea { flex: 1; min-height: 60px; }
/* Sign-in: the logo sits at the top of the sign-in card, sized to fit inside it */
.login-form .login-card-logo { display: block; width: 100%; max-width: 260px; height: auto; max-height: 96px; object-fit: contain; margin: 0 auto 18px; }
.welcome-login .login-form h2, .welcome-login .login-form h2 + p { text-align: center; }
.expl-reason { display: block; font-weight: 600; }
.expl-text { display: block; margin-top: 2px; white-space: normal; color: var(--muted); }
/* Attendance page: the live panel's own 'Open live attendance' link is not needed there */
[data-live-block] [data-nav="live"] { display: none; }
/* Attendance → Monthly sheet */
.am-sheet { padding: 16px; }
.am-top { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; margin-bottom: 14px; }
.am-months { display: grid; grid-template-columns: repeat(2, 54px); gap: 6px; }
.am-months button { padding: 7px 0; font-size: 12.5px; font-weight: 700; border-radius: 8px; background: #172036; color: #fff; border: 0; }
.am-months button.active { background: linear-gradient(180deg, #c32a37, #96131f); }
.am-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; align-content: start; }
.am-box { border-radius: 10px; overflow: hidden; border: 1px solid #c9d5ea; text-align: center; background: #fff; }
.am-box span { display: block; background: #3f6fb5; color: #fff; font-size: 12px; font-weight: 700; padding: 5px 4px; }
.am-box strong { display: block; padding: 6px 4px; font-size: 15px; }
.am-summary { margin: 0; display: grid; gap: 4px; min-width: 230px; font-size: 12.5px; }
.am-summary div { display: flex; justify-content: space-between; gap: 12px; background: #eef3fb; border-radius: 6px; padding: 5px 10px; }
.am-summary dt { font-weight: 700; color: #233a63; } .am-summary dd { margin: 0; font-weight: 700; }
.am-wrap { overflow-x: auto; border: 1px solid #e3d6b8; border-radius: 10px; }
.am-table { border-collapse: collapse; width: 100%; font-size: 11.5px; white-space: nowrap; table-layout: auto; }
.am-table th, .am-table td { padding: 4px 2px; text-align: center; border-bottom: 1px solid #f0e7d2; border-right: 1px solid #f6efe0; position: static; }
.am-table thead th { background: #fbf4e2; color: #3b3324; font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.am-table .am-rate-row th { background: #233a63; color: #fff; font-size: 9.5px; padding: 3px 1px; }
.am-table .am-rate-row th.am-label { background: #b51f2b; font-size: 11px; }
.am-table th.am-date button { border: 0; background: none; padding: 2px 4px; font-size: 11px; font-weight: 700; color: inherit; border-radius: 6px; }
.am-table th.am-date button:hover { background: #fff; color: #b51f2b; }
.am-table th.am-today { box-shadow: inset 0 -3px 0 #b51f2b; }
.am-table .am-id { text-align: left; padding-left: 8px; color: var(--muted); }
.am-table .am-name { text-align: left; padding: 4px 10px; font-weight: 600; min-width: 170px; position: sticky; left: 0; background: #fffdf8; z-index: 1; }
.am-table thead .am-name { background: #fbf4e2; z-index: 2; }
.am-table .am-weekend { background: #f6dccb; }
.am-table thead .am-weekend { background: #ecc9b1; }
.am-table .am-rate-row .am-weekend { background: #3a3a3a; }
.am-table .am-holiday { background: #e8e1f5; }
.am-mark { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; font-weight: 800; color: #fff; }
.am-present, .am-open { } .am-mark.am-present, .am-mark.am-open { background: #2e9a5a; }
.am-mark.am-late { background: #e39b1b; }
.am-mark.am-absent { background: #c8323e; }
.am-mark.am-leave { background: #e8c25a; color: #6a4b00; }
.am-table th.am-present { background: #2e9a5a; color: #fff; } .am-table th.am-absent { background: #e8a585; color: #4a1a10; } .am-table th.am-leave { background: #f3dc79; color: #4a3a00; } .am-table th.am-chart { background: #fff; }
.am-num { font-weight: 700; min-width: 48px; } td.am-present { color: #2e9a5a; } td.am-absent { color: #c8323e; } td.am-leave { color: #a07a00; }
.am-chart { min-width: 120px; text-align: left !important; padding-right: 8px !important; }
.am-bar { display: inline-block; width: 72px; height: 12px; background: #233a63; vertical-align: middle; border-radius: 2px; overflow: hidden; margin-right: 6px; }
.am-bar i { display: block; height: 100%; background: #9fd8b4; }
.am-chart b { font-size: 11px; }
.am-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 11.5px; color: var(--muted); margin: 10px 2px 0; }
.am-key { display: inline-block; width: 16px; height: 12px; border-radius: 3px; border: 1px solid #e3d6b8; }
.am-key.am-weekend { background: #f6dccb; } .am-key.am-holiday { background: #e8e1f5; }
@media (max-width: 900px) { .am-top { grid-template-columns: 1fr; } .am-months { grid-template-columns: repeat(6, 1fr); } }
.am-bar i.am-w0 { width: 0%; }
.am-bar i.am-w5 { width: 5%; }
.am-bar i.am-w10 { width: 10%; }
.am-bar i.am-w15 { width: 15%; }
.am-bar i.am-w20 { width: 20%; }
.am-bar i.am-w25 { width: 25%; }
.am-bar i.am-w30 { width: 30%; }
.am-bar i.am-w35 { width: 35%; }
.am-bar i.am-w40 { width: 40%; }
.am-bar i.am-w45 { width: 45%; }
.am-bar i.am-w50 { width: 50%; }
.am-bar i.am-w55 { width: 55%; }
.am-bar i.am-w60 { width: 60%; }
.am-bar i.am-w65 { width: 65%; }
.am-bar i.am-w70 { width: 70%; }
.am-bar i.am-w75 { width: 75%; }
.am-bar i.am-w80 { width: 80%; }
.am-bar i.am-w85 { width: 85%; }
.am-bar i.am-w90 { width: 90%; }
.am-bar i.am-w95 { width: 95%; }
.am-bar i.am-w100 { width: 100%; }
/* Live attendance (redesign) */
.lv { padding: 22px 24px 14px; }
.lv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.lv-head h2 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 0; }
.lv-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.lv-head-tools { display: flex; align-items: center; gap: 12px; }
.lv-live { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #3d3d3d; }
.lv-live i { width: 9px; height: 9px; border-radius: 50%; background: #2e9a5a; box-shadow: 0 0 0 3px #2e9a5a22; }
.lv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid #e6dcc6; border-radius: 10px; background: #fff; color: #262626; font-weight: 600; text-decoration: none; }
.lv-btn:hover { border-color: var(--brand, #b51f2b); }
.lv-ico { width: 18px; height: 18px; flex: none; }
.lv-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.lv-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; border: 1px solid #efe2c8; background: #fffaf0; text-align: left; color: inherit; font-weight: 400; }
.lv-card.active { border: 2px solid #b51f2b; background: #fff5f6; }
.lv-card strong { display: block; font-size: 26px; color: #8f1420; line-height: 1.1; }
.lv-card small { font-size: 13px; color: #3d3d3d; }
.lv-card-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.lv-card-ico .lv-ico { width: 22px; height: 22px; }
.lv-card-ico.lv-all { background: #fbe3e5; color: #b51f2b; } .lv-card-ico.lv-present { background: #def4e6; color: #2e9a5a; } .lv-card-ico.lv-late { background: #fdecd2; color: #d98b12; }
.lv-card-ico.lv-absent { background: #ececec; color: #555; } .lv-card-ico.lv-leave { background: #fdecd2; color: #c47a12; } .lv-card-ico.lv-missing { background: #fdecd2; color: #c4700f; }
.lv-filters { display: grid; grid-template-columns: minmax(220px, 1fr) 200px 240px; gap: 12px; margin-bottom: 14px; }
.lv-search { position: relative; display: block; }
.lv-search .lv-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #555; }
.lv-search input { width: 100%; padding: 12px 14px 12px 42px; border-radius: 10px; border: 1px solid #e6dcc6; }
.lv-filters select { padding: 12px 14px; border-radius: 10px; border: 1px solid #e6dcc6; background: #fff; }
.lv-table-wrap { border: 1px solid #efe2c8; border-radius: 12px; overflow: auto; }
.lv-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.lv-table thead th { background: #fbf1dd; color: #2b2b2b; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 14px 18px; position: static; }
.lv-table td { padding: 12px 18px; border-bottom: 1px solid #f3ead6; vertical-align: middle; }
.lv-table tr[hidden] { display: none; }
.lv-emp { display: flex; align-items: center; gap: 14px; }
.lv-emp strong { display: block; font-weight: 600; color: #262626; } .lv-emp small { color: var(--muted); font-size: 12px; }
.lv-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: #ececec; color: #555; }
.lv-avatar.lv-present { background: #def4e6; color: #22764a; } .lv-avatar.lv-late, .lv-avatar.lv-missing, .lv-avatar.lv-leave { background: #fdecd2; color: #a8640c; } .lv-avatar.lv-absent { background: #fbe3e5; color: #a31927; }
.lv-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; background: #ececec; color: #4a4a4a; }
.lv-pill.lv-present { background: #def4e6; color: #22764a; } .lv-pill.lv-late, .lv-pill.lv-missing { background: #fdecd2; color: #a8640c; } .lv-pill.lv-leave { background: #fff3c9; color: #8a6300; } .lv-pill.lv-absent { background: #fbe3e5; color: #a31927; }
.lv-time { font-variant-numeric: tabular-nums; }
.lv-loc { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; color: #b51f2b; font-weight: 500; }
.lv-loc span { text-decoration: underline; text-underline-offset: 3px; }
.lv-muted { color: var(--muted); }
.lv-actions { display: flex; align-items: center; gap: 10px; }
.lv-details { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid #e6dcc6; border-radius: 10px; background: #fff; color: #262626; font-weight: 600; }
.lv-menu { position: relative; }
.lv-menu summary { list-style: none; cursor: pointer; padding: 6px; border-radius: 8px; color: #333; }
.lv-menu summary::-webkit-details-marker { display: none; }
.lv-menu[open] summary { background: #f4ecd9; }
.lv-menu > div { position: absolute; right: 0; top: 34px; z-index: 5; min-width: 210px; background: #fff; border: 1px solid #e6dcc6; border-radius: 10px; box-shadow: 0 12px 30px #0000001f; padding: 6px; display: grid; }
.lv-menu > div button { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 7px; color: #262626; font-weight: 500; }
.lv-menu > div button:hover { background: #fff5e3; }
.lv-foot { margin: 12px 2px 0; color: var(--muted); font-size: 13px; }
@media (max-width: 1200px) { .lv-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lv-filters { grid-template-columns: 1fr 1fr; } .lv-search { grid-column: 1 / -1; } }
@media (max-width: 640px) { .lv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lv-head { flex-direction: column; } }
/* Live attendance: Request column */
.lv-emp { border: 0; background: none; padding: 0; text-align: left; color: inherit; font-weight: 400; }
.lv-emp:hover strong { color: #b51f2b; text-decoration: underline; }
.lv-requests { white-space: normal; min-width: 220px; }
.lv-req { display: inline-flex; align-items: center; margin: 2px 6px 2px 0; padding: 6px 12px; border: 1px solid #e6dcc6; border-radius: 9px; background: #fff; color: #8f1420; font-weight: 600; font-size: 13px; }
.lv-req.ok { background: linear-gradient(180deg, #c32a37, #96131f); border-color: #96131f; color: #fff; }
.lv-req-wait { color: var(--muted); font-weight: 500; border-style: dashed; }
.lv-req-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 8px 2px 0; }
.lv-req-label { font-size: 12.5px; color: #3d3d3d; margin-right: 2px; }
/* Employee Masterlist (201 files directory) */
.ml-ico { width: 18px; height: 18px; flex: none; }
.ml-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.ml-header h1 { font-size: 30px; font-weight: 800; letter-spacing: -.8px; margin: 0; }
.ml-header p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.ml-header-tools { display: flex; gap: 10px; }
.ml-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid #e6dcc6; border-radius: 10px; background: #fff; color: #262626; font-weight: 600; text-decoration: none; }
.ml-btn.primary { background: linear-gradient(180deg, #b51f2b, #8f1420); border-color: #8f1420; color: #fff; }
.ml-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 16px; align-items: start; }
.ml-main { min-width: 0; }
.ml-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ml-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; border: 1px solid #efe2c8; background: #fffaf0; text-align: left; color: inherit; font-weight: 400; }
.ml-card.active { border: 2px solid #b51f2b; background: #fff5f6; }
.ml-card strong { display: block; font-size: 28px; color: #8f1420; line-height: 1.1; } .ml-card small { font-size: 14px; color: #3d3d3d; }
.ml-card-ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ml-card-ico .ml-ico { width: 24px; height: 24px; }
.ml-card-ico.ml-all { background: #fbe3e5; color: #b51f2b; } .ml-card-ico.ml-active { background: #def4e6; color: #2e9a5a; } .ml-card-ico.ml-inactive { background: #ececec; color: #555; }
.ml-filters { display: grid; grid-template-columns: minmax(200px, 1fr) 200px 200px; gap: 12px; margin-bottom: 14px; }
.ml-search { position: relative; display: block; }
.ml-search .ml-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #555; }
.ml-search input { width: 100%; padding: 12px 14px 12px 42px; border-radius: 10px; border: 1px solid #e6dcc6; }
.ml-filters select { padding: 12px 14px; border-radius: 10px; border: 1px solid #e6dcc6; background: #fff; }
.ml-table-wrap { border: 1px solid #efe2c8; border-radius: 12px; overflow: auto; background: #fff; }
.ml-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.ml-table thead th { background: #fbf1dd; color: #2b2b2b; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 14px 16px; position: static; }
.ml-table td { padding: 11px 16px; border-bottom: 1px solid #f3ead6; vertical-align: middle; }
.ml-table tbody tr { cursor: pointer; }
.ml-table tbody tr.selected { background: #fdeef0; box-shadow: inset 4px 0 0 #b51f2b; }
.ml-emp { display: flex; align-items: center; gap: 12px; }
.ml-emp strong, .ml-two strong { display: block; font-weight: 600; color: #262626; } .ml-emp small, .ml-two small { color: var(--muted); font-size: 12.5px; }
.ml-avatar { position: relative; overflow: hidden; flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.ml-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-avatar.ml-active { background: #fdeee0; color: #a8640c; } .ml-avatar.ml-inactive { background: #ececec; color: #555; }
.ml-avatar-lg { width: 96px; height: 96px; font-size: 30px; background: #fbe3e5 !important; color: #b51f2b !important; }
.ml-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13.5px; }
.ml-pill.ml-active { background: #def4e6; color: #22764a; } .ml-pill.ml-inactive { background: #ececec; color: #4a4a4a; }
.ml-view { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #e6dcc6; border-radius: 9px; background: #fff; color: #8f1420; font-weight: 600; }
.ml-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: var(--muted); font-size: 14px; }
.ml-pages { display: flex; gap: 6px; }
.ml-pages button { min-width: 38px; height: 38px; border: 1px solid #e6dcc6; border-radius: 9px; background: #fff; color: #333; padding: 0 8px; display: grid; place-items: center; }
.ml-pages button.active { border: 2px solid #b51f2b; color: #b51f2b; font-weight: 700; }
.ml-preview { border: 1px solid #efe2c8; border-radius: 14px; background: #fff; padding: 18px; position: sticky; top: 16px; }
.ml-preview h2 { font-size: 22px; font-weight: 800; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #f3ead6; }
.ml-pv-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; }
.ml-pv-head > div { display: grid; gap: 2px; justify-items: start; }
.ml-pv-name { font-size: 20px; font-weight: 800; }
.ml-pv-head > div > span { color: var(--muted); }
.ml-pv-head .ml-pill { margin-top: 6px; }
.ml-tabs { display: flex; gap: 6px; border-bottom: 1px solid #f3ead6; margin: 16px 0 12px; }
.ml-tabs button { border: 0; background: none; padding: 10px 12px; color: #555; font-weight: 600; border-radius: 0; }
.ml-tabs button.active { color: #b51f2b; box-shadow: inset 0 -3px 0 #b51f2b; }
.ml-block { margin-bottom: 12px; }
.ml-block h3 { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: #fbf1dd; font-size: 15px; }
.ml-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 4px 6px; }
.ml-info { display: flex; gap: 10px; align-items: flex-start; }
.ml-info .ml-ico { width: 22px; height: 22px; color: #555; margin-top: 2px; }
.ml-info small { display: block; color: #333; font-size: 13.5px; } .ml-info strong { display: block; font-weight: 400; color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.ml-links { border: 1px solid #efe2c8; border-radius: 12px; overflow: hidden; }
.ml-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid #f3ead6; border-radius: 0; background: #fff; color: #262626; font-weight: 500; text-align: left; }
.ml-link:last-child { border-bottom: 0; } .ml-link .ml-ico:first-child { color: #b51f2b; } .ml-link span { flex: 1; } .ml-chev { color: #333; }
.ml-link:hover { background: #fff8ec; }
@media (max-width: 1200px) { .ml-layout { grid-template-columns: 1fr; } .ml-preview { position: static; } }
@media (max-width: 700px) { .ml-filters { grid-template-columns: 1fr; } .ml-cards { grid-template-columns: 1fr; } .ml-header { flex-direction: column; } }
/* Daily attendance records (redesign) */
.dr { padding: 22px 24px 14px; }
.dr-ico { width: 18px; height: 18px; flex: none; }
.dr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #f3ead6; margin-bottom: 16px; }
.dr-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -.8px; color: #8f1420; margin: 0; }
.dr-head p { margin: 4px 0 0; color: #3d3d3d; font-size: 15px; }
.dr-head-tools { display: flex; gap: 10px; }
.dr-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid #d99aa0; border-radius: 10px; background: #fff; color: #8f1420; font-weight: 600; text-decoration: none; }
.dr-tools { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dr-nav { display: flex; gap: 10px; align-items: center; }
.dr-sq { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #e6dcc6; border-radius: 10px; background: #fff; color: #333; padding: 0; }
.dr-date { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; height: 44px; border: 1px solid #e6dcc6; border-radius: 10px; background: #fff; }
.dr-date input { border: 0; padding: 0; background: transparent; }
.dr-today { height: 44px; padding: 0 18px; border: 1px solid #d99aa0; border-radius: 10px; background: #fff; color: #8f1420; font-weight: 700; }
.dr-filters { display: flex; gap: 12px; flex: 1; justify-content: flex-end; min-width: 300px; }
.dr-search { position: relative; flex: 1; max-width: 480px; }
.dr-search .dr-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #555; }
.dr-search input { width: 100%; height: 44px; padding: 0 14px 0 42px; border-radius: 10px; border: 1px solid #e6dcc6; }
.dr-filters select { height: 44px; min-width: 220px; padding: 0 14px; border-radius: 10px; border: 1px solid #e6dcc6; background: #fff; }
.dr-tabs { display: flex; gap: 6px; border-bottom: 1px solid #f3ead6; margin: 14px 0; }
.dr-tabs button { border: 0; background: none; padding: 10px 14px; color: #555; font-weight: 500; border-radius: 0; }
.dr-tabs button.active { color: #b51f2b; font-weight: 700; box-shadow: inset 0 -3px 0 #b51f2b; }
.dr-table-wrap { border: 1px solid #efe2c8; border-radius: 12px; overflow: auto; }
.dr-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.dr-table thead th { background: #fbf1dd; color: #2b2b2b; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 14px 16px; position: static; }
.dr-table td { padding: 11px 16px; border-bottom: 1px solid #f3ead6; vertical-align: middle; }
.dr-table tr[hidden] { display: none; }
.dr-emp { display: flex; align-items: center; gap: 12px; }
.dr-emp strong { display: block; font-weight: 600; color: #262626; } .dr-emp small { color: var(--muted); font-size: 12.5px; }
.dr-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: #ececec; color: #555; }
.dr-avatar.dr-ok { background: #def4e6; color: #22764a; } .dr-avatar.dr-late { background: #fdecd2; color: #a8640c; } .dr-avatar.dr-idle { background: #fbe3e5; color: #a31927; }
.dr-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; background: #ececec; color: #4a4a4a; }
.dr-pill.dr-ok { background: #def4e6; color: #22764a; } .dr-pill.dr-late, .dr-pill.dr-idle { background: #fdecd2; color: #a8640c; } .dr-pill.dr-leave { background: #fff3c9; color: #8a6300; }
.dr-sub { display: block; margin: 3px 0 0 48px; color: var(--muted); font-size: 12px; }
.dr-tag { font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 7px; } .dr-tag.ok { background: #def4e6; color: #22764a; } .dr-tag.wait { background: #fdecd2; color: #a8640c; }
.dr-view { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #d99aa0; border-radius: 9px; background: #fff; color: #8f1420; font-weight: 600; }
.dr-foot { margin: 12px 2px 0; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .dr-head { flex-direction: column; } .dr-filters { justify-content: stretch; } }
/* Masterlist profile panel: no overlap in the narrow column */
.ml-pv-head { grid-template-columns: auto 1fr; }
.ml-pv-head .ml-btn { grid-column: 1 / -1; justify-self: start; padding: 8px 14px; }
.ml-pv-name { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.ml-pv-head > div > span { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.ml-avatar-lg { width: 76px; height: 76px; font-size: 24px; }
.ml-tabs { gap: 0; overflow-x: auto; scrollbar-width: none; }
.ml-tabs button { flex: 1 1 auto; padding: 10px 8px; font-size: 13.5px; white-space: nowrap; }
.ml-grid { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.ml-info strong, .ml-info small { overflow-wrap: anywhere; }
/* Top bar: a calmer everyday header (ivory #FFFDF7, sand #EADCC8, amber #F6A623) */
.tb-ico { width: 22px; height: 22px; flex: none; }
.topbar-user { gap: 12px !important; }
.tb-pill { display: inline-flex; align-items: center; gap: 14px; padding: 8px 16px; background: #fffdf7; border: 1px solid #eadcc8; border-radius: 14px; color: #2b2116; font-size: 14px; font-weight: 500; box-shadow: 0 4px 14px -10px #6b4f2a55; }
.tb-when { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.tb-when .tb-ico { color: #7a6a58; width: 20px; height: 20px; }
.tb-div { width: 1px; height: 22px; background: #eadcc8; }
.tb-btn { position: relative; width: 44px; height: 44px; padding: 0 !important; display: grid !important; place-items: center; background: #fffdf7 !important; border: 1px solid #eadcc8 !important; border-radius: 14px !important; box-shadow: 0 4px 14px -10px #6b4f2a55; }
.tb-btn:hover { border-color: #d9c4a3 !important; background: #fff !important; }
.tb-chat { color: #8b7fc0 !important; }
.tb-bell { color: #f6a623 !important; }
.tb-btn .bell-count { top: -5px; right: -5px; min-width: 18px; height: 18px; font-size: 10px; background: #f6a623; color: #fff; border: 2px solid #fffdf7; }
/* Payroll & 13th Month (redesign) */
.pr-ico { width: 22px; height: 22px; flex: none; }
.pr-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid #d9c4a3; border-radius: 10px; background: #fffdf7; color: #2b2116; font-weight: 600; text-decoration: none; }
.pr-btn .pr-ico { width: 18px; height: 18px; }
.pr-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pr-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid #efe2c8; border-radius: 14px; background: #fffdf7; box-shadow: 0 6px 18px -14px #6b4f2a66; }
.pr-card .pr-card-ico { width: 30px; height: 30px; color: #b8862b; }
.pr-card span { display: block; font-size: 13.5px; color: #3d3d3d; }
.pr-card strong { display: block; font-size: 24px; font-weight: 700; margin: 8px 0 6px; color: #1f1a14; font-variant-numeric: tabular-nums; }
.pr-card small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.pr-card.featured { background: linear-gradient(160deg, #b51f2b, #7d1019); border-color: #7d1019; }
.pr-card.featured span, .pr-card.featured strong, .pr-card.featured small, .pr-card.featured .pr-card-ico { color: #fff; }
.pr-card.featured .pr-card-ico { color: #f6c64f; }
.pr-panel-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #f3ead6; }
.pr-panel-head h2 { font-size: 18px; margin: 0; } .pr-panel-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pr-head-ico { width: 30px; height: 30px; color: #8a6a3a; }
.pr-viewall { margin-left: auto; border: 0; background: none; color: #b51f2b; font-weight: 600; }
.pr-empty { text-align: center; padding: 34px 20px !important; white-space: normal; }
.pr-empty-ico { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: #fbeed3; color: #c99a3b; }
.pr-empty strong { display: block; font-size: 16px; color: #1f1a14; } .pr-empty small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.payroll-computation .panel-foot { align-items: center; }
.pr-history table td:first-child a { color: #b51f2b; font-weight: 600; }
.pr-status { display: inline-block; padding: 4px 10px; border-radius: 7px; background: #def4e6; color: #22764a; font-weight: 600; font-size: 12.5px; }
.pr-sent { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #d9c4a3; border-radius: 9px; background: #fffdf7; color: #2b2116; font-weight: 600; font-size: 12.5px; }
.pr-sent .pr-ico { width: 16px; height: 16px; color: #22764a; }
.pr-13 { display: flex; align-items: center; gap: 18px; padding: 18px 22px; flex-wrap: wrap; }
.pr-13-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fbeed3; color: #b8862b; flex: none; }
.pr-13-ico .pr-ico { width: 30px; height: 30px; }
.pr-13-text { flex: 1; min-width: 200px; } .pr-13-text h2 { margin: 0; font-size: 18px; } .pr-13-text p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.pr-13 .th-year-pick { display: flex; align-items: flex-end; gap: 12px; padding: 0; }
@media (max-width: 1300px) { .pr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .pr-cards { grid-template-columns: 1fr 1fr; } }
.dr-emp { border: 0; background: none; padding: 0; text-align: left; color: inherit; font-weight: 400; }
.dr-emp:hover strong { color: #b51f2b; text-decoration: underline; }
/* Employee timecard (redesign) */
.tc-ico { width: 20px; height: 20px; flex: none; }
.tc-title h2 { font-size: 30px; font-weight: 800; letter-spacing: -.8px; margin: 0; }
.tc-title p { margin: 4px 0 16px; color: var(--muted); font-size: 15px; }
.tc-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 16px 18px; border: 1px solid #efe2c8; border-radius: 14px; background: #fff; margin-bottom: 16px; }
.tc-controls label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.tc-controls select, .tc-controls input { height: 44px; min-width: 240px; padding: 0 12px; border-radius: 10px; border: 1px solid #e6dcc6; background: #fff; }
.tc-show { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 10px; }
.tc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.tc-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid #efe2c8; border-radius: 14px; background: #fff; }
.tc-card.alert { background: #fdeef0; border-color: #f2c4ca; }
.tc-card-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f4f1ec; color: #3d3d3d; flex: none; }
.tc-card.alert .tc-card-ico { background: #f9d9de; color: #b51f2b; }
.tc-card-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #3d3d3d; }
.tc-card-title em { font-style: normal; font-size: 11px; font-weight: 600; color: #b51f2b; background: #fff; border: 1px solid #f2c4ca; border-radius: 999px; padding: 2px 8px; }
.tc-card strong { display: block; font-size: 28px; font-weight: 800; margin: 6px 0; color: #1f1a14; font-variant-numeric: tabular-nums; }
.tc-card small { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
.tc-totals { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 16px 22px; border: 1px solid #efe2c8; border-radius: 14px; background: #fff; margin-bottom: 16px; font-size: 15px; color: #3d3d3d; }
.tc-totals b { color: #1f1a14; margin-left: 4px; }
.tc-sep { width: 1px; height: 30px; background: #efe2c8; }
.tc-net strong { color: #b51f2b; font-size: 24px; font-weight: 800; margin-left: 10px; }
.tc-open { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid #d99aa0; border-radius: 10px; background: #fff; color: #8f1420; font-weight: 600; }
.tc-days { border: 1px solid #efe2c8; border-radius: 14px; background: #fff; overflow: hidden; }
.tc-days-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 20px; }
.tc-days-head h3 { margin: 0; font-size: 18px; } .tc-days-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.tc-days-head > span { display: inline-flex; align-items: center; gap: 8px; color: #3d3d3d; font-size: 13.5px; }
.tc-days table th { background: #f7f5f1; text-transform: none; letter-spacing: 0; font-size: 13px; color: #3d3d3d; position: static; }
.tc-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tc-pill.tc-ok { background: #def4e6; color: #22764a; } .tc-pill.tc-rejected { background: #fbe3e5; color: #a31927; } .tc-pill.tc-neutral { background: #ececec; color: #4a4a4a; } .tc-pill.tc-pending { background: #fdecd2; color: #a8640c; }
.tc-add { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: #b51f2b; font-weight: 600; padding: 4px 0; }
@media (max-width: 1100px) { .tc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Leave management (redesign) */
.lm-ico { width: 20px; height: 20px; flex: none; }
.lm-tagline { display: block; font-size: 22px; font-weight: 700; color: #1f1a14; margin-bottom: 6px; }
.lm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.lm-card { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid #ece4d6; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px -14px #6b4f2a55; }
.lm-card-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fbe3e5; color: #b51f2b; flex: none; }
.lm-card:nth-child(2) .lm-card-ico { background: #def4e6; color: #22764a; }
.lm-card span { display: block; font-size: 14px; color: #3d3d3d; } .lm-card strong { display: block; font-size: 28px; font-weight: 800; margin: 6px 0 4px; color: #1f1a14; } .lm-card small { color: var(--muted); font-size: 13px; }
.lm-tabs { display: flex; gap: 8px; border-bottom: 1px solid #ece4d6; margin-bottom: 16px; }
.lm-tabs button { border: 0; background: none; border-radius: 0; padding: 10px 14px; color: #555; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.lm-tabs button.active { color: #b51f2b; font-weight: 700; box-shadow: inset 0 -3px 0 #b51f2b; }
.lm-count { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: #fbe3e5; color: #b51f2b; font-size: 12px; font-weight: 700; }
.lm-panel { border: 1px solid #ece4d6; border-radius: 14px; background: #fff; overflow: hidden; margin-bottom: 20px; }
.lm-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; }
.lm-panel-head h2 { margin: 0; font-size: 19px; } .lm-panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.lm-filters { display: flex; gap: 12px; }
.lm-search { position: relative; } .lm-search .lm-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #555; }
.lm-search input { width: 270px; height: 40px; padding: 0 12px 0 40px; border: 1px solid #e3dbcc; border-radius: 9px; }
.lm-filters select { height: 40px; padding: 0 12px; border: 1px solid #e3dbcc; border-radius: 9px; background: #fff; min-width: 150px; }
.lm-table-wrap { overflow-x: auto; }
.lm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lm-table thead th { background: #f7f5f1; color: #3d3d3d; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 12px 16px; position: static; text-align: left; }
.lm-table td { padding: 14px 16px; border-bottom: 1px solid #f1ece2; vertical-align: middle; }
.lm-table tr[hidden] { display: none; }
.lm-emp { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; white-space: nowrap; }
.lm-emp strong { display: block; color: #1f1a14; } .lm-emp small { color: var(--muted); font-size: 12px; } .lm-emp:hover strong { color: #b51f2b; text-decoration: underline; }
.lm-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fbe3e5; color: #a31927; font-weight: 700; font-size: 13px; flex: none; }
.lm-dates { white-space: nowrap; } .lm-dates small { display: block; color: var(--muted); font-size: 12px; }
.lm-reason { white-space: normal; min-width: 220px; max-width: 320px; line-height: 1.45; }
.lm-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.lm-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lm-status.lm-ok { background: #def4e6; color: #22764a; } .lm-status.lm-wait { background: #fdecd2; color: #a8640c; } .lm-status.lm-no { background: #fbe3e5; color: #a31927; } .lm-status.lm-off { background: #ececec; color: #555; }
.lm-btn { padding: 8px 14px; border: 1px solid #c97880; border-radius: 9px; background: #fff; color: #8f1420; font-weight: 600; white-space: nowrap; }
.lm-btn.primary { background: linear-gradient(180deg, #b51f2b, #8f1420); color: #fff; border-color: #8f1420; }
.lm-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; color: #3d3d3d; font-size: 13.5px; }
.lm-pager { display: inline-flex; align-items: center; gap: 12px; } .lm-pager button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid #ece4d6; border-radius: 8px; background: #fff; }
.lm-note { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #eef7ef; color: #2b4a33; font-size: 13.5px; }
.lm-note .lm-ico { color: #fff; background: #2e9a5a; border-radius: 50%; padding: 3px; width: 24px; height: 24px; }
@media (max-width: 1100px) { .lm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sidebar (redesign): dark, logo card, gold section labels, pill for the open item, guide line for sub-items */
.sidebar { background: linear-gradient(180deg, #1b1c20, #141518) !important; padding: 26px 18px 16px !important; }
.sb-brand { flex-direction: column !important; align-items: center !important; gap: 12px !important; margin: 0 0 18px !important; padding-bottom: 18px; border-bottom: 1px solid #2c2d33; text-align: center; }
.sb-logo { display: block; width: 100%; max-width: 230px; padding: 10px 14px; border-radius: 10px; background: linear-gradient(180deg, #fffdf7, #f4ecdb); box-shadow: 0 8px 22px -12px #000; }
.sb-logo .brand-logo { display: block; width: 100%; height: auto; }
.sb-name { display: grid; gap: 3px; color: #fff; font-weight: 800; letter-spacing: .03em; font-size: 15px; }
.sb-name small { font-weight: 400; letter-spacing: .02em; color: #9a9ba3; font-size: 13px; }
.sidebar .nav-label { color: #d4b15c !important; letter-spacing: .22em !important; font-size: 11px !important; margin: 20px 12px 8px !important; }
.sidebar .nav > button, .sidebar .nav-parent { border-radius: 10px !important; padding: 11px 14px !important; color: #e8e8ea !important; font-size: 14px !important; }
.sidebar .nav > button.active { background: #26272d !important; color: #fff !important; box-shadow: none !important; }
.sidebar .nav-parent { background: #232429 !important; }
.sidebar .nav-sub-inner { position: relative; margin-left: 22px; padding-left: 10px; border-left: 1px solid #34353b; }
.sidebar .nav-child { border-radius: 10px !important; color: #d9d9dc !important; padding: 10px 12px !important; }
.sidebar .nav-child.active { background: linear-gradient(90deg, #3a3220, #2a261d) !important; color: #e6c46a !important; border: 1px solid #5a4b26 !important; box-shadow: inset 3px 0 0 #d4b15c !important; font-weight: 600; }
.sidebar .nav button:hover:not(.active) { background: #24252a !important; }
.sb-foot { display: flex !important; align-items: center; gap: 8px; border-top: 1px solid #2c2d33 !important; padding: 14px 4px 0 !important; margin-top: auto; }
.sb-user { position: relative; flex: 1; min-width: 0; }
.sb-user summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 10px; padding: 4px; }
.sb-user summary::-webkit-details-marker { display: none; }
.sb-user summary:hover { background: #24252a; }
.sb-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f3d27a, #c8962f); color: #2b2116; font-weight: 800; font-size: 14px; flex: none; }
.sb-who { display: grid; min-width: 0; } .sb-who strong { color: #fff; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-who small { color: #9a9ba3; font-size: 12px; }
.sb-menu { position: absolute; bottom: 52px; left: 0; min-width: 190px; padding: 6px; border-radius: 10px; background: #26272d; border: 1px solid #36373e; box-shadow: 0 14px 30px -10px #000; display: grid; z-index: 20; }
.sb-menu button { border: 0; background: none; color: #e8e8ea; text-align: left; padding: 9px 10px; border-radius: 7px; font-weight: 500; }
.sb-menu button:hover { background: #33343b; }
.sb-icon { width: 38px; height: 38px; display: grid; place-items: center; padding: 0 !important; border: 0 !important; background: none !important; color: #c9c9ce !important; margin: 0 !important; }
.sb-icon svg { width: 21px; height: 21px; } .sb-icon:hover { color: #fff !important; }
.sb-sep { width: 1px; height: 26px; background: #34353b; }
.shell.collapsed .sb-name, .shell.collapsed .sb-who, .shell.collapsed .sb-sep, .shell.collapsed .sb-foot [data-nav="settings"] { display: none; }
.shell.collapsed .sb-foot { flex-direction: column; }
/* Wider sidebar so menu names fit on one line (desktop) */
@media (min-width: 1151px) { .shell:not(.collapsed) { grid-template-columns: 272px minmax(0, 1fr); } }
/* Employee loans (redesign) */
.ln-ico { width: 20px; height: 20px; flex: none; }
.ln-primary { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #b51f2b, #8f1420); color: #fff; font-weight: 700; font-size: 15px; }
.ln-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ln-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid #e7e4df; border-radius: 12px; background: #fff; }
.ln-card-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f1efec; color: #4a4a4a; flex: none; }
.ln-card span { display: block; font-size: 14px; color: #3d3d3d; } .ln-card strong { display: block; font-size: 28px; font-weight: 800; margin: 6px 0 4px; color: #1f1a14; font-variant-numeric: tabular-nums; } .ln-card small { color: var(--muted); font-size: 13px; }
.ln-panel { border: 1px solid #e7e4df; border-radius: 12px; background: #fff; margin-bottom: 18px; overflow: hidden; }
.ln-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid #efece7; }
.ln-panel-head h2 { margin: 0; font-size: 20px; display: inline-flex; align-items: center; gap: 10px; }
.ln-count { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: #f1efec; font-size: 13px; font-weight: 600; color: #3d3d3d; }
.ln-note { color: var(--muted); font-size: 13px; }
.ln-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ln-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid #e0dcd5; border-radius: 9px; background: #fff; color: #3d3d3d; font-weight: 600; font-size: 13px; text-decoration: none; }
.ln-table-wrap { overflow-x: auto; }
.ln-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ln-table thead th { background: #faf9f7; color: #555; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 12px 22px; text-align: left; position: static; border-bottom: 1px solid #efece7; }
.ln-table td { padding: 12px 22px; border-bottom: 1px solid #f2f0ec; vertical-align: middle; white-space: nowrap; }
.ln-table td small { display: block; color: var(--muted); font-size: 12px; }
.ln-wrap { white-space: normal !important; min-width: 200px; }
.ln-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 10px; text-align: center; white-space: normal; }
.ln-empty-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #f1efec; color: #4a4a4a; margin-bottom: 6px; }
.ln-empty strong { font-size: 15px; color: #1f1a14; } .ln-empty small { color: var(--muted); font-size: 13.5px; }
.ln-empty .ln-btn { margin-top: 10px; }
.ln-foot { padding: 12px 22px; font-size: 13px; color: #3d3d3d; }
.ln-info { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin: 0 2px; }
@media (max-width: 1100px) { .ln-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Dashboard (redesign) */
.db-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.db-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left; padding: 18px 20px; border: 1px solid #e7e4df; border-radius: 12px; background: #fff; color: inherit; font-weight: 400; box-shadow: 0 6px 18px -16px #3a2a1255; min-height: 128px; }
.db-card:hover { border-color: #d6cfc3; }
.db-card.alert { background: #fdf0f2; border-color: #f2c4ca; }
.db-head { display: flex; align-items: center; gap: 14px; }
.db-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #f3f1ee; color: #4a4a4a; flex: none; }
.db-ico svg { width: 22px; height: 22px; }
.db-ico.red { background: #fbe9eb; color: #a31927; } .db-ico.green { background: #e6f4ea; color: #22764a; }
.db-card.alert .db-ico { background: #fff; }
.db-title { font-size: 14px; color: #3d3d3d; flex: 1; }
.db-head em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #a31927; background: #fff; border: 1px solid #f2c4ca; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.db-value { display: flex; align-items: baseline; gap: 14px; }
.db-value strong { font-size: 32px; font-weight: 800; color: #1f1a14; line-height: 1; }
.db-value small, .db-sub { color: var(--muted); font-size: 12.5px; }
.db-link { color: #3d3d3d; font-size: 13px; margin-top: auto; }
.db-card.alert .db-link { color: #a31927; font-weight: 600; }
.db-section { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.db-live { padding: 18px 22px; }
.db-live-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #efece7; }
.db-live-head h2 { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 19px; }
.db-live-head h2 .lv-live { font-size: 13px; font-weight: 600; }
.db-live-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.db-open { padding: 8px 14px; border: 1px solid #c97880; border-radius: 9px; background: #fff; color: #8f1420; font-weight: 600; }
.db-live-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.db-live-stats button { display: grid; gap: 8px; justify-items: start; padding: 16px 20px; border: 0; border-right: 1px solid #efece7; border-radius: 0; background: none; color: inherit; font-weight: 400; text-align: left; }
.db-live-stats button:last-child { border-right: 0; }
.db-live-stats button:hover { background: #faf8f5; }
.db-live-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #3d3d3d; }
.db-live-label .lv-ico { width: 18px; height: 18px; color: #555; }
.db-live-stats strong { font-size: 28px; font-weight: 800; color: #1f1a14; }
.db-dot { width: 10px; height: 10px; border-radius: 50%; } .db-dot.dot-green { background: #2e9a5a; } .db-dot.dot-amber { background: #e39b1b; }
@media (max-width: 1100px) { .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-live-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Settings (redesign) */
.st-ico { width: 18px; height: 18px; flex: none; }
.st-admin { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: #fbe9eb; color: #a31927; font-size: 13px; font-weight: 600; }
.st-tabs { display: flex; gap: 6px; border-bottom: 1px solid #ece4d6; margin-bottom: 16px; }
.st-tabs a { padding: 10px 12px; color: #3d3d3d; text-decoration: none; font-size: 14px; }
.st-tabs a.active, .st-tabs a:hover { color: #1f1a14; box-shadow: inset 0 -2px 0 #b51f2b; }
.st-panel { border-radius: 14px !important; scroll-margin-top: 90px; }
.st-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #efe8dc; }
.st-head h2 { margin: 0; font-size: 19px; } .st-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.st-wifi-title { display: inline-flex; align-items: center; gap: 12px; } .st-wifi { width: 26px; height: 26px; color: #b51f2b; }
.st-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #fdf3dc; color: #8a6300; font-size: 12px; font-weight: 600; }
.st-chip i { width: 8px; height: 8px; border-radius: 50%; background: #e39b1b; } .st-chip.ok { background: #e6f4ea; color: #22764a; } .st-chip.ok i { background: #2e9a5a; }
.st-ip input { max-width: 480px; background: #f6f4f0; }
.st-warn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #f1dfae; border-radius: 10px; background: #fdf6e3; color: #6a4b00; font-size: 13px; }
.st-wifi-add { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; } .st-wifi-add small { color: var(--muted); }
.st-group { font-size: 15px; margin: 18px 0 8px; } .st-group:first-child { margin-top: 0; } .st-group-light { font-weight: 400; font-size: 13px; color: #3d3d3d; }
.st-peso { position: relative; display: block; } .st-peso::before { content: '₱'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #555; } .st-peso input { width: 100%; padding-left: 28px; }
.st-theme { display: flex; align-items: center; gap: 12px; } .st-theme select { flex: 1; max-width: 360px; }
.st-swatch { width: 22px; height: 22px; border-radius: 50%; } .st-swatch.red { background: #b51f2b; } .st-swatch.gold { background: #d9b85c; }
.st-logo { display: flex; align-items: center; gap: 16px; } .st-logo span { display: grid; place-items: center; width: 180px; height: 56px; border-radius: 10px; background: #f4f1ec; padding: 8px; } .st-logo img { max-width: 100%; max-height: 100%; } .st-logo small { color: var(--muted); }
.st-numbers { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: end; }
.st-numbers-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; }
.st-next { display: grid; gap: 6px; padding-left: 20px; border-left: 1px solid #efe8dc; } .st-next span { font-size: 13px; font-weight: 600; }
.st-next strong { display: block; padding: 12px; border: 1px solid #e6dcc6; border-radius: 10px; background: #faf8f4; text-align: center; font-size: 20px; letter-spacing: .02em; } .st-next small { color: var(--muted); font-size: 12px; }
.st-outline { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #c97880; border-radius: 9px; background: #fff; color: #8f1420; font-weight: 600; }
.st-req th { background: #f7f5f1; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; color: #555; position: static; }
.st-req input[type=checkbox] { accent-color: #b51f2b; width: 18px; height: 18px; }
.st-trash { border: 0; background: none; color: #6b6b6b; padding: 6px; } .st-trash:hover { color: #b51f2b; }
.st-footer { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; margin-top: 8px; border: 1px solid #efe8dc; border-radius: 14px; background: #fffdf7; box-shadow: 0 -8px 24px -18px #3a2a1255; z-index: 4; }
.st-footer > span:first-child { color: var(--muted); font-size: 13px; } .st-footer > span:last-child { display: flex; gap: 10px; }
@media (max-width: 900px) { .st-numbers, .st-numbers-fields { grid-template-columns: 1fr; } .st-next { border-left: 0; padding-left: 0; } }
.st-tabs button { border: 0; border-radius: 0; background: none; padding: 10px 12px; color: #3d3d3d; font-weight: 500; font-size: 14px; }
.st-tabs button.active, .st-tabs button:hover { color: #1f1a14; box-shadow: inset 0 -2px 0 #b51f2b; }
/* Dashboard: People analytics */
.an { margin-top: 26px; }
.an-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.an-head h2 { margin: 0; font-size: 22px; } .an-head p { margin: 4px 0 0; color: var(--muted); }
.an-head select { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #ddd6ca; background: #fff; min-width: 170px; }
.an-grid3 { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 16px; }
.an-card { border: 1px solid #e7e4df; border-radius: 12px; background: #fff; padding: 18px 20px; }
.an-card h3 { margin: 0; font-size: 17px; } .an-card > p { margin: 4px 0 10px; color: var(--muted); font-size: 13px; }
.an-chart { width: 100%; height: auto; display: block; }
.an-grid { stroke: #ece8e1; stroke-width: 1; } .an-axis { fill: #6b6b6b; font-size: 11px; }
.an-present { fill: #2f7d4f; } .an-late { fill: #f0a92a; }
.an-legend { display: flex; justify-content: center; gap: 24px; font-size: 13px; color: #3d3d3d; margin-top: 6px; }
.an-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.an-legend i.an-present { background: #2f7d4f; } .an-legend i.an-late { background: #f0a92a; }
.an-donut-wrap { display: grid; place-items: center; margin: 6px 0 10px; }
.an-donut { width: 170px; height: 170px; }
.an-ring-off { fill: none; stroke: #e1ddd7; stroke-width: 22; } .an-ring-on { fill: none; stroke: #8f1420; stroke-width: 22; }
.an-donut-num { font-size: 26px; font-weight: 800; fill: #1f1a14; } .an-donut-label { font-size: 12px; fill: #3d3d3d; }
.an-key { list-style: none; margin: 0; padding: 0 10px; display: grid; gap: 8px; font-size: 14px; }
.an-key li { display: flex; align-items: center; gap: 10px; } .an-key span { margin-left: auto; color: #3d3d3d; }
.an-key i { width: 14px; height: 14px; border-radius: 50%; } .an-key i.an-on { background: #8f1420; } .an-key i.an-off { background: #e1ddd7; }
.an-big { display: block; font-size: 52px; font-weight: 800; color: #8f1420; line-height: 1; margin-top: 14px; }
.an-big-label { display: block; margin-top: 6px; color: #3d3d3d; }
.an-row { display: flex; justify-content: space-between; margin: 22px 0 8px; font-size: 14px; color: #3d3d3d; }
.an-bar { height: 12px; border-radius: 999px; background: #efe9e1; overflow: hidden; } .an-bar i { display: block; height: 100%; background: #8f1420; border-radius: 999px; }
.an-note { color: var(--muted); font-size: 13px; margin: 14px 0; }
.an-link { border: 0; background: none; padding: 0; color: #8f1420; font-weight: 600; }
@media (max-width: 1200px) { .an-grid3 { grid-template-columns: 1fr 1fr; } .an-grid3 .an-card:first-child { grid-column: 1 / -1; } }
.an-bar i.db-w0 { width: 0%; }
.an-bar i.db-w5 { width: 5%; }
.an-bar i.db-w10 { width: 10%; }
.an-bar i.db-w15 { width: 15%; }
.an-bar i.db-w20 { width: 20%; }
.an-bar i.db-w25 { width: 25%; }
.an-bar i.db-w30 { width: 30%; }
.an-bar i.db-w35 { width: 35%; }
.an-bar i.db-w40 { width: 40%; }
.an-bar i.db-w45 { width: 45%; }
.an-bar i.db-w50 { width: 50%; }
.an-bar i.db-w55 { width: 55%; }
.an-bar i.db-w60 { width: 60%; }
.an-bar i.db-w65 { width: 65%; }
.an-bar i.db-w70 { width: 70%; }
.an-bar i.db-w75 { width: 75%; }
.an-bar i.db-w80 { width: 80%; }
.an-bar i.db-w85 { width: 85%; }
.an-bar i.db-w90 { width: 90%; }
.an-bar i.db-w95 { width: 95%; }
.an-bar i.db-w100 { width: 100%; }
/* Dashboard on one screen: compact sizes */
.content:has(.db-grid8) .page-heading { margin-bottom: 12px; }
.content:has(.db-grid8) .page-heading h1 { font-size: 26px; margin-bottom: 2px; }
.db-grid8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.db-grid8 .db-card { min-height: 0; padding: 12px; gap: 6px; border-radius: 10px; }
.db-grid8 .db-head { gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.db-grid8 .db-ico { width: 30px; height: 30px; border-radius: 8px; } .db-grid8 .db-ico svg { width: 17px; height: 17px; }
.db-grid8 .db-title { font-size: 12px; line-height: 1.25; flex: 1 1 60%; }
.db-grid8 .db-head em { font-size: 10px; padding: 1px 6px; order: 3; }
.db-grid8 .db-value { gap: 6px; flex-wrap: wrap; } .db-grid8 .db-value strong { font-size: 24px; }
.db-grid8 .db-value small, .db-grid8 .db-sub, .db-grid8 .db-link { font-size: 11px; }
.content:has(.db-grid8) .db-live { padding: 10px 16px; margin-bottom: 12px; }
.content:has(.db-grid8) .db-live-head { padding-bottom: 8px; }
.content:has(.db-grid8) .db-live-head h2 { font-size: 16px; } .content:has(.db-grid8) .db-live-head p { font-size: 12px; margin-top: 2px; }
.content:has(.db-grid8) .db-open { padding: 6px 12px; font-size: 13px; }
.content:has(.db-grid8) .db-live-stats button { padding: 8px 14px; gap: 2px; } .content:has(.db-grid8) .db-live-stats strong { font-size: 22px; }
.content:has(.db-grid8) .an { margin-top: 0; }
.content:has(.db-grid8) .an-head { margin-bottom: 8px; } .content:has(.db-grid8) .an-head h2 { font-size: 17px; } .content:has(.db-grid8) .an-head p { font-size: 12px; margin-top: 2px; }
.content:has(.db-grid8) .an-head select { height: 34px; }
.content:has(.db-grid8) .an-card { padding: 12px 16px; } .content:has(.db-grid8) .an-card h3 { font-size: 15px; } .content:has(.db-grid8) .an-card > p { margin: 2px 0 6px; font-size: 12px; }
.content:has(.db-grid8) .an-donut { width: 120px; height: 120px; } .content:has(.db-grid8) .an-donut-wrap { margin: 0 0 6px; }
.content:has(.db-grid8) .an-key { font-size: 13px; gap: 4px; }
.content:has(.db-grid8) .an-big { font-size: 38px; margin-top: 6px; } .content:has(.db-grid8) .an-row { margin: 12px 0 6px; font-size: 13px; }
.content:has(.db-grid8) .an-note { margin: 8px 0; font-size: 12px; } .content:has(.db-grid8) .an-legend { margin-top: 2px; font-size: 12px; }
.content:has(.db-grid8) { padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 1300px) { .db-grid8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sidebar .sb-foot { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; } .sidebar .sb-foot > * { margin: 0 !important; width: auto; }
/* Dashboard bento look (GDS red & gold) + employee spotlight */
.db-card, .content:has(.db-grid8) .db-live, .an-card { border-radius: 18px !important; border-color: #eee6d8 !important; box-shadow: 0 10px 28px -22px #6b3a1e66 !important; }
.an-grid3.with-spot { grid-template-columns: 0.85fr 1.6fr 1fr 1fr; }
.sp-card { position: relative; overflow: hidden; padding: 0 !important; min-height: 230px; border: 0 !important; color: #fff; text-align: left; font-weight: 400; background: linear-gradient(160deg, #b51f2b, #5e0d14); }
.sp-photo { position: absolute; inset: 0; display: grid; place-items: center; }
.sp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-ini { font-size: 64px; font-weight: 800; color: #f6d27c; opacity: .9; letter-spacing: .02em; }
.sp-card.has-photo .sp-ini { display: none; }
.sp-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #0000 40%, #000a); }
.sp-text { position: absolute; left: 16px; bottom: 16px; right: 16px; display: grid; gap: 2px; }
.sp-text strong { font-size: 19px; font-weight: 700; } .sp-text small { font-size: 12.5px; opacity: .85; }
.sp-chip { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; background: #ffffffe6; color: #8f1420; font-size: 11.5px; font-weight: 700; }
@media (max-width: 1300px) { .an-grid3.with-spot { grid-template-columns: 1fr 1fr; } }
/* Employee workspace (mobile-first redesign) */
.employee-top { justify-content: space-between; }
.employee-top .portal-logo { position: absolute; left: 50%; transform: translateX(-50%); }
.employee-top { position: relative; }
.pm-ico { width: 22px; height: 22px; flex: none; }
.pm-welcome { padding-bottom: 0 !important; }
.pm-welcome .eyebrow { letter-spacing: .18em; }
.pm-welcome h1 { margin: 4px 0 2px; }
.pm-fullname { margin: 0; color: #4a4a4a; font-size: 15px; }
.pm-clock { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid #ece5d8; border-radius: 16px; background: #fff; margin: 4px 0 14px; box-shadow: 0 8px 24px -20px #3a2a1255; }
.pm-clock .clock-zone b { font-weight: 700; }
.pm-clock time { font-size: 30px; font-weight: 800; color: #9b1622; font-variant-numeric: tabular-nums; }
.pm-card { border: 1px solid #ece5d8; border-radius: 18px; background: #fff; padding: 18px; margin-bottom: 14px; box-shadow: 0 8px 24px -20px #3a2a1255; }
.pm-card h2 { margin: 0; font-size: 19px; }
.pm-attend-head, .pm-details-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pm-attend-head p, .pm-details-head p { margin: 4px 0 0; color: #4a4a4a; font-size: 14px; }
.pm-chip { padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pm-chip.pm-late { background: #fbe3e5; color: #a31927; } .pm-chip.pm-ok { background: #def4e6; color: #22764a; } .pm-chip.pm-leave { background: #fff3c9; color: #8a6300; } .pm-chip.pm-idle { background: #efede9; color: #4a4a4a; }
.pm-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 14px; padding: 14px; border-radius: 12px; background: #fceef0; }
.pm-alert-ico { width: 34px; height: 34px; color: #a31927; }
.pm-alert strong { display: block; color: #a31927; font-size: 17px; } .pm-alert small { display: block; color: #4a4a4a; font-size: 13px; }
.pm-link { border: 0; background: none; padding: 0; color: #a31927; font-weight: 700; white-space: nowrap; }
.pm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.pm-tile { padding: 12px 14px; border: 1px solid #ece8e2; border-radius: 12px; background: #fbfaf8; }
.pm-tile span { display: block; font-size: 13px; color: #4a4a4a; } .pm-tile strong { display: block; font-size: 22px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pm-actions .clock-btn { width: 100%; }
.pm-outline { background: #fff !important; color: #2b2116 !important; border: 1px solid #cfc8bd !important; }
.pm-actions > small { display: block; text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.pm-row { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 14px 4px 0; border: 0; border-top: 1px solid #efe9df; border-radius: 0; background: none; color: #1f1a14; font-size: 16px; font-weight: 500; text-align: left; }
.pm-row .btn-icon, .pm-row svg:first-child { color: #a31927; } .pm-row span { flex: 1; } .pm-chev { width: 20px; height: 20px; color: #333; }
.pm-details { background: #fdf3f4; border-color: #f4d3d7; }
.pm-details-body { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.pm-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pm-todo li { display: flex; align-items: center; gap: 10px; font-size: 15px; } .pm-todo li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #a31927; flex: none; }
.pm-fill { padding: 10px 18px; border: 1.5px solid #a31927; border-radius: 10px; background: #fff; color: #a31927; font-weight: 700; white-space: nowrap; }
.pm-loc-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 12px; }
.pm-loc-row span { display: block; } .pm-loc-row small { color: #4a4a4a; }
.pm-loc-right { text-align: right; } .pm-loc-right strong { display: block; font-size: 18px; } .pm-loc-right code { font-size: 13px; color: #4a4a4a; }
.pm-foot { text-align: center; color: var(--muted); font-size: 12px; padding: 10px 0 20px; border-top: 1px solid #ece5d8; }
@media (max-width: 480px) { .pm-alert { grid-template-columns: auto 1fr; } .pm-alert .pm-link { grid-column: 2; justify-self: start; } .pm-details-body { flex-direction: column; align-items: stretch; } }
.ml-pv-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.ml-photo-btn { cursor: pointer; }
.ml-avatar-lg img { object-position: top; }
.sp-photo img { object-position: center top; } .sp-card.has-photo { background: #f3efe9; } .ml-avatar img, .dr-avatar img { object-position: center top; }
/* Employee menu (redesign): dark, outline icons, grouped */
.em-side { background: linear-gradient(180deg, #1b1c20, #141518) !important; color: #e8e8ea; display: flex; flex-direction: column; }
.em-user { display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; border-bottom: 1px solid #2c2d33; }
.em-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(160deg, #8f1420, #5e0d14); color: #f3d6da; font-weight: 700; font-size: 14px; flex: none; }
.em-who strong { display: block; color: #fff; font-size: 15px; font-weight: 600; } .em-who small { color: #9a9ba3; font-size: 12.5px; }
.em-side nav { padding: 10px 10px 0; display: grid; gap: 0; }
.em-group { padding: 6px 0 10px; border-bottom: 1px solid #2a2b30; } .em-group:last-child { border-bottom: 0; }
.em-side .employee-menu-heading { display: block; color: #9a9ba3 !important; font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; margin: 8px 8px 6px !important; }
.em-side nav button, .em-side .employee-sidebar-foot button { display: flex !important; align-items: center; gap: 14px; width: 100%; padding: 11px 14px !important; border: 0 !important; border-radius: 10px !important; background: none !important; color: #e8e8ea !important; font-size: 15px !important; font-weight: 500 !important; text-align: left; box-shadow: none !important; }
.em-side nav button:hover, .em-side .employee-sidebar-foot button:hover { background: #24252a !important; }
.em-side nav button.active { background: linear-gradient(90deg, #4a1820, #2c1a1d) !important; color: #fff !important; box-shadow: inset 3px 0 0 #c4283a !important; }
.em-ico { width: 22px; height: 22px; flex: none; color: currentColor; }
.em-side .employee-sidebar-foot { margin-top: auto; padding: 10px; border-top: 1px solid #2c2d33; display: grid; gap: 8px; }
.em-side .em-signout { border: 1px solid #8f1420 !important; color: #e8505e !important; }
.em-side .nav-flag { margin-left: auto; }
.em-side .employee-sidebar-foot .em-signout { text-transform: none !important; letter-spacing: 0 !important; justify-content: flex-start !important; border: 1px solid #8f1420 !important; color: #e8505e !important; }
/* Employee dashboard: congratulations for the month, with photos */
.cg { background: linear-gradient(160deg, #fffaf0, #fff); border-color: #efdcae; }
.cg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.cg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cg-item { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid #f0e3c4; border-radius: 14px; background: #fff; }
.cg-item.today { border-color: #d9b85c; box-shadow: 0 0 0 2px #f6e3a8; }
.cg-photo { position: relative; flex: none; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, #b51f2b, #5e0d14); color: #f6d27c; font-weight: 800; font-size: 22px; }
.cg-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; background: #f3efe9; }
.cg-item strong { display: block; font-size: 15px; } .cg-item small { display: block; color: var(--muted); font-size: 12px; }
.cg-item p { margin: 4px 0 2px; font-size: 13.5px; color: #8f1420; font-weight: 600; } .cg-item em { font-style: normal; font-size: 12px; color: #6a4b00; background: #fff3c9; border-radius: 999px; padding: 1px 8px; }
/* Employee's own photo: menu avatar and welcome */
.em-avatar { position: relative; overflow: hidden; }
.em-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; background: #f3efe9; opacity: 0; }
.em-avatar.has-photo img { opacity: 1; }
.pm-hello { display: flex; align-items: center; gap: 12px; }
.pm-me { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid #d9b85c; background: #f3efe9; }
.pm-me img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.pm-me.no-photo { display: none; }
/* Holiday calendar (redesign) */
.hl-ico { width: 20px; height: 20px; flex: none; }
.hl-add { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #b51f2b, #8f1420); color: #fff; font-weight: 700; font-size: 15px; }
.hl-tools { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.hl-year { width: 140px; height: 44px; padding: 0 14px; border: 1px solid #e3ddd3; border-radius: 10px; background: #fff; font-weight: 600; }
.hl-legend { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; color: #3d3d3d; }
.hl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.hl-search { position: relative; margin-left: auto; } .hl-search .hl-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #555; }
.hl-search input { width: 300px; height: 44px; padding: 0 14px 0 44px; border: 1px solid #e3ddd3; border-radius: 10px; }
.hl-next { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px 24px; margin-bottom: 16px; border: 1px solid #ebe5da; border-left: 5px solid #8f1420; border-radius: 12px; background: #fff; }
.hl-next-ico { width: 38px; height: 38px; color: #8f1420; }
.hl-next span { display: block; color: #8f1420; font-size: 13px; } .hl-next strong { display: block; font-size: 20px; color: #1f1a14; }
.hl-next-date { color: #555 !important; font-size: 14px !important; padding-left: 20px; border-left: 1px solid #ebe5da; }
.hl-pill { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #fdf0d2; color: #6a4b00 !important; }
.hl-pill.kind-regular { background: #fbe3e5; color: #8f1420 !important; } .hl-pill.kind-ordinary { background: #ececec; color: #4a4a4a !important; }
.hl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hl-month { border: 1px solid #ebe5da; border-radius: 12px; background: #fff; padding: 16px 18px; }
.hl-month[hidden], .hl-month li[hidden] { display: none; }
.hl-month h3 { margin: 0 0 10px; padding-bottom: 12px; border-bottom: 1px solid #efe9df; font-size: 15px; letter-spacing: .06em; }
.hl-month h3 small { margin-left: 8px; color: #6b6b6b; font-weight: 400; letter-spacing: 0; }
.hl-month ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hl-month li { display: grid; grid-template-columns: 12px 36px 36px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.hl-month li.next { background: #fceef0; }
.hl-month li.past { opacity: .7; }
.hl-month li b { display: grid; place-items: center; height: 32px; border-radius: 7px; background: #f4f1ec; font-size: 15px; }
.hl-month li small { color: #6b6b6b; font-size: 13px; }
.hl-name { font-size: 14px; color: #262626; line-height: 1.35; }
.hl-local { font-style: normal; font-size: 11.5px; padding: 1px 8px; margin-left: 6px; border-radius: 6px; background: #f1efec; color: #4a4a4a; }
.hl-month li em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #8f1420; padding: 3px 10px; border-radius: 6px; }
.hl-edit { border: 0; background: none; padding: 4px; color: #6b6b6b; } .hl-edit:hover { color: #8f1420; } .hl-month li.next .hl-edit { color: #8f1420; }
.dot.kind-regular { background: #8f1420; } .dot.kind-special { background: #e8a92a; } .dot.kind-ordinary { background: #8a8a8a; }
.hl-legend .dot, .hl-month .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.hl-note { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 20px; border: 1px solid #ebe5da; border-radius: 12px; background: #fff; }
.hl-note-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fbe9eb; color: #8f1420; flex: none; }
.hl-note strong { display: block; } .hl-note small { color: #555; font-size: 13.5px; }
.hl-link { margin-left: auto; border: 0; background: none; color: #8f1420; font-weight: 700; }
.hl-empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed #e3ddd3; border-radius: 12px; }
@media (max-width: 1200px) { .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .hl-grid { grid-template-columns: 1fr; } .hl-search { margin-left: 0; } .hl-search input { width: 100%; } }
.an-top { margin: 0 0 16px; }
.pm-grace { background: #fff8e6; border-color: #f0d68f; }
/* Employee "My profile": same design as the HR masterlist profile, full width */
.mp-profile { position: static; max-width: 1100px; }
.mp-profile .ml-pv-head { margin-bottom: 18px; }
.mp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.mp-profile .legend { margin: 8px 0 0; }
@media (max-width: 760px) { .mp-cols { grid-template-columns: 1fr; } }
.lm-time { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.pr-note { display: block; color: #b51f2b; font-size: 12.5px; white-space: nowrap; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
.ln-table .row-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; white-space: nowrap; }
.ln-table .row-actions > * { margin: 0; }
.ln-name { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ln-name:hover { color: #8f1420; text-decoration: underline; }
.ml-name { display: block; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: inherit; text-align: left; cursor: pointer; }
.ml-name:hover { color: #8f1420; text-decoration: underline; }
.att-tools { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.att-tools .field { max-width: 220px; }
.ml-pv-name.ml-name { font-size: 20px; font-weight: 800; line-height: 1.25; }
/* Masterlist panel: pencil on the photo to change it */
.ml-pv-photo { position: relative; display: inline-block; flex: none; }
.ml-photo-pen { position: absolute; right: 2px; bottom: 2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #8f1420; color: #fff; border: 2px solid #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.ml-photo-pen:hover { background: #b51f2b; }
.ml-photo-pen .ml-ico { width: 15px; height: 15px; color: #fff; }
.ml-photo-pen { width: 22px; height: 22px; right: 4px; bottom: 4px; border-width: 1.5px; }
.ml-photo-pen .ml-ico { width: 11px; height: 11px; }
/* Employee forms on phones: boxes fit the screen (date / time inputs never push past the card) */
.employee-main .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.employee-main .form-grid > *, .employee-main .field { min-width: 0; }
.employee-main .field input, .employee-main .field select, .employee-main .field textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
/* Employee attendance calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal-head h2 { margin: 0; font-size: 18px; }
.cal-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e8dcc4; background: #fff; font-size: 20px; line-height: 1; color: #8f1420; }
.cal-nav:disabled { opacity: .35; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-wd { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; padding: 2px 0; }
.cal-cell { position: relative; aspect-ratio: 1 / 1; min-height: 40px; border: 1px solid #efe6d6; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 0; font: inherit; }
.cal-cell.blank { border: 0; background: none; }
.cal-cell b { font-weight: 600; font-size: 14px; }
.cal-cell i { position: absolute; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; }
.cal-cell.today { box-shadow: inset 0 0 0 2px #d9b85c; }
.cal-cell.picked { box-shadow: inset 0 0 0 2px #8f1420; }
.cal-cell.k-rest { background: #f6f3ee; color: #9a948a; }
.cal-cell.k-holiday { background: #fff4d6; }
.cal-cell.k-leave { background: #eaf2ff; }
.cal-cell.k-absent { background: #fdecee; }
.k-present i, .cal-key .k-present, .cal-tag.k-present { background: #22764a; }
.k-late i, .cal-key .k-late, .cal-tag.k-late { background: #e0a020; }
.k-absent i, .cal-key .k-absent, .cal-tag.k-absent { background: #c0392b; }
.k-leave i, .cal-key .k-leave, .cal-tag.k-leave { background: #3b6fd8; }
.k-holiday i, .cal-key .k-holiday, .cal-tag.k-holiday { background: #b8860b; }
.k-none i, .cal-key .k-none, .cal-tag.k-none, .k-off i, .cal-tag.k-off, .cal-tag.k-rest { background: #9a9a9a; }
.cal-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 4px; font-size: 12.5px; color: #4a4a4a; }
.cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cal-detail { margin-top: 12px; padding: 12px 14px; border: 1px solid #efe6d6; border-radius: 12px; background: #fffdf8; display: grid; gap: 8px; }
.cal-tag { justify-self: start; color: #fff; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.cal-detail dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 0; }
.cal-detail dt { font-size: 12px; color: var(--muted); } .cal-detail dd { margin: 0; font-weight: 600; }
.cal-cell { aspect-ratio: auto; height: 52px; }
@media (max-width: 520px) { .cal-cell { height: 44px; } .cal-grid { gap: 4px; } }
.time-link { border: 0; background: none; padding: 0; font: inherit; color: #8f1420; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Messages: Everyone (announcements) */
.msg-from { display: block; font-size: 11.5px; color: #8f1420; margin-bottom: 2px; }
.msg-readonly { margin: 0; padding: 12px 14px; border-top: 1px solid #efe6d6; font-size: 13px; color: var(--muted); background: #fffdf8; }
.msg-person[data-msg-person="everyone"] .msg-avatar, .msg-person[data-msg-person="everyone"] span:first-child { background: #8f1420; color: #fff; }
/* Time in / out location window */
.loc-box { display: grid; gap: 10px; }
.loc-when { margin: 0; color: var(--muted); font-size: 13px; }
.loc-place { margin: 0; font-size: 16px; font-weight: 700; color: #1f1a14; line-height: 1.4; }
.loc-place small { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #def4e6; color: #22764a; font-size: 12px; font-weight: 600; vertical-align: middle; }
.loc-map .attendance-map { width: 100%; height: 260px; border: 1px solid #e8dcc4; border-radius: 12px; }
.loc-actions { margin: 0; }
.time-place { display: block; font-size: 11.5px; color: var(--muted); max-width: 220px; white-space: normal; }
.att-company { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 13.5px; font-weight: 600; }
.att-company select { min-width: 200px; height: 38px; border: 1px solid #e3ddd3; border-radius: 10px; padding: 0 10px; background: #fff; }
/* Live attendance filters: search + three dropdowns on one line */
.lv-filters { grid-template-columns: minmax(200px, 1fr) repeat(3, minmax(150px, 190px)); }
@media (max-width: 1200px) { .lv-filters { grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(120px, 160px)); } .lv-search { grid-column: auto; } }
@media (max-width: 720px) { .lv-filters { grid-template-columns: 1fr 1fr; } .lv-search { grid-column: 1 / -1; } }

/* Leave balances: clickable employee name and the per-type details window */
.link-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.link-cell .name { color: #a91d29; text-decoration: underline; text-underline-offset: 3px; }
.link-cell:hover .name, .link-cell:focus-visible .name { color: #7d1520; }
.lb-type { border: 1px solid #eadfc4; border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.lb-type-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lb-type-head h3 { margin: 0; font-size: 16px; }
.lb-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.lb-facts div { background: #fffaf0; border-radius: 8px; padding: 8px 10px; }
.lb-facts span { display: block; font-size: 11px; color: #777; }
.lb-facts strong { font-size: 18px; }
.lb-requests { list-style: none; margin: 0; padding: 0; }
.lb-requests li { padding: 10px 0; border-top: 1px solid #f1ead8; }
.lb-req-main { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.lb-req-dates { font-weight: 600; }
.lb-req-dates small { font-weight: 500; color: var(--muted, #6b6b6b); }
.lb-req-reason { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.lb-req-ref { display: block; margin-top: 3px; color: var(--muted, #6b6b6b); font-size: 11.5px; }
@media (max-width: 760px) { .lb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Overtime applications: HR list + review window, employee "My overtime" cards */
.ot-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 0; }
.ot-summary button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid #eadfc4; border-radius: 12px; background: #fffdf8; text-align: left; font-size: 12px; color: #555; }
.ot-summary button strong { font-size: 22px; color: #171717; }
.ot-summary button.active { border-color: #d9b85c; background: #fff0c9; color: #911a24; }
.ot-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; padding: 16px 20px; }
.ot-list { display: flex; flex-direction: column; padding: 0 20px 20px; }
.ot-item { display: grid; grid-template-columns: 1.4fr 1.4fr 1.2fr 1fr; gap: 14px; align-items: center; width: 100%; padding: 14px 12px; border: 0; border-top: 1px solid #f1ead8; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ot-item:hover, .ot-item:focus-visible { background: #fff7e4; }
.ot-item > span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ot-item small { color: #777; font-size: 12px; }
.ot-item .ot-flag { color: #a91d29; }
.ot-empty { padding: 20px 12px; }
.ot-review .ot-review-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ot-reason { margin: 14px 0; line-height: 1.5; }
.ot-reason span { display: block; font-size: 12px; color: #777; }
.ot-flags { border: 1px solid #f3c2c6; background: #fff1f2; color: #8f1823; border-radius: 10px; padding: 8px 12px; margin: 12px 0; }
.ot-flags p { margin: 4px 0; }
.ot-decide { border: 1px solid #eadfc4; border-radius: 12px; padding: 12px 14px; margin: 14px 0; display: grid; gap: 10px; }
.ot-decide legend { font-weight: 600; padding: 0 6px; }
.ot-history ul { margin: 8px 0 0; padding-left: 18px; }
.ot-history li { margin: 6px 0; }
.ot-history small { display: block; color: #666; }
.ot-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ot-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 16px 20px 20px; }
.ot-card { border: 1px solid #eadfc4; border-radius: 14px; padding: 14px 16px; background: #fffdf8; }
.ot-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ot-card p { margin: 8px 0; }
.ot-card-reason { color: #444; overflow-wrap: anywhere; }
.ot-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ot-card-actions details { flex-basis: 100%; font-size: 12px; color: #555; }
.ot-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ot-pending { background: #fff0c9; color: #8a6400; }
.ot-approved { background: #e3f4e8; color: #1d6b37; }
.ot-rejected { background: #fde4e6; color: #a91d29; }
.ot-cancelled { background: #eee; color: #666; }
@media (max-width: 760px) {
  .ot-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px 0; }
  .ot-filters { grid-template-columns: 1fr 1fr; padding: 12px 14px; }
  .ot-filters label:first-child { grid-column: 1 / -1; }
  .ot-list { padding: 0 8px 14px; }
  .ot-item { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .ot-mine { padding: 12px 14px 16px; }
}

/* Live attendance → Reason column and its details window */
.lv-reason { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; max-width: 220px; }
.lv-reason-chip { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lv-reason-out-of-office { background: #e8f0fe; color: #1f4f9a; }
.lv-reason-late { background: #fff0c9; color: #8a6400; }
.lv-reason-leave { background: #e3f4e8; color: #1d6b37; }
.lv-reason-overtime { background: #f3e8fd; color: #6a2c91; }
.lv-reason-more { font-size: 12px; color: #a91d29; font-weight: 600; }
.lv-reason-card { border: 1px solid #eadfc4; border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.lv-reason-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lv-reason-label { font-weight: 600; margin: 8px 0 2px; }
.lv-reason-text { margin: 6px 0 10px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Leave requests: clickable reason, proof note, and the leave details window */
.lm-reason-btn { display: block; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: #d9b85c; text-underline-offset: 3px; }
.lm-reason-btn:hover, .lm-reason-btn:focus-visible { color: #a91d29; }
.lm-proof-hint { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.lm-proof-hint.review { background: #fff0c9; color: #8a6400; }
.lm-proof-hint.wait { background: #fde4e6; color: #a91d29; }
.ld-block { margin-top: 16px; }
.ld-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #777; margin: 0 0 6px; }
.ld-reason { font-weight: 600; margin: 0 0 4px; }
.ld-text { margin: 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Leave management folders: decision column and date filters */
.lm-decided strong { display: block; font-weight: 600; }
.lm-decided small { display: block; color: #666; margin-top: 2px; }
.lm-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #555; }
.lm-date input { padding: 6px 8px; border: 1px solid #e3d6b5; border-radius: 8px; font: inherit; }
@media (max-width: 760px) { .lm-filters { flex-wrap: wrap; } .lm-filters > * { flex: 1 1 140px; } }

/* Monthly sheet: half day = worked half (green) + half-day leave (gold), or not yet approved (red) */
.am-mark.am-half { background: linear-gradient(90deg, #2e9a5a 50%, #e8c25a 50%); color: #fff; }
.am-mark.am-half.am-pending { background: linear-gradient(90deg, #2e9a5a 50%, #c8323e 50%); }

/* Work-from-home days counted present without time in / out */
.am-mark.am-wfh { background: #2e9a5a; box-shadow: inset 0 0 0 2px #b9e3c8; }
.lv-wfh { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #e3f4e8; color: #1d6b37; font-size: 12px; font-weight: 600; }

/* Offset day: not worked because the hours were worked on another day (paid, not absent) */
.am-mark.am-offset { background: #3d7fc4; color: #fff; }


/* Top-bar account menu: logo (initials), name and role, settings icon; My account, Account & access, Sign out */
.tb-account { position: relative; }
.tb-account summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 12px; }
.tb-account summary::-webkit-details-marker { display: none; }
.tb-account summary:hover, .tb-account[open] summary { background: rgba(217, 184, 92, .16); }
.tb-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f3d27a, #c8962f); color: #2b2116; font-weight: 800; font-size: 13px; flex: none; }
.tb-gear { width: 20px; height: 20px; color: var(--ink-soft, #5a4e34); flex: none; }
.tb-account[open] .tb-gear { color: #a91d29; }
.tb-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid #eadfc4; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .35); display: grid; z-index: 60; }
.tb-menu button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 8px; font-weight: 500; color: var(--ink, #1f1f1f); }
.tb-menu button:hover, .tb-menu button:focus-visible { background: #fff7e4; color: #a91d29; }
.tb-menu button[data-signout] { border-top: 1px solid #f1ead8; border-radius: 0 0 8px 8px; margin-top: 4px; }
@media (max-width: 900px) { .tb-account .user-meta { display: none; } .tb-menu { left: 0; right: auto; max-width: calc(100vw - 24px); } }

.pm-row:disabled { opacity: .45; cursor: not-allowed; }

/* Today's attendance: Office attendance and Off-site work as two separate sections. */
.att-mode { margin-top: 14px; padding: 14px; border: 1px solid #efe4d2; border-radius: 16px; background: #fffdf8; }
.att-mode h3 { margin: 0 0 6px; font-size: 16px; }
.att-mode .net-status { margin: 0 0 8px; }
.att-mode .clock-btn:disabled { opacity: .5; cursor: not-allowed; }
.att-offsite .legend { margin: 0 0 4px; }
.oof-loc { padding: 12px; border-radius: 12px; background: #faf6ee; }
.oof-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8f1420; }
.oof-address { margin: 4px 0 8px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.oof-loc textarea { width: 100%; margin: 6px 0; }
.oof-loc .loc-map { margin: 8px 0; }
.oof-warn { margin: 6px 0; color: #8f1420; font-size: 14px; }
.oof-confirm { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.oof-error { margin: 0; padding: 8px 10px; border-radius: 10px; background: #fdecee; color: #8f1420; }

.att-done { display: block; margin-top: 8px; color: #1f6b3a; font-weight: 600; }

/* Attendance requests */
.ar-list { display: grid; gap: 10px; }
.ar-item { padding: 12px 14px; border: 1px solid #efe4d2; border-radius: 14px; background: #fffdf8; }
.ar-item header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ar-item p { margin: 6px 0; }
.ar-history { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.ar-history li { margin-bottom: 4px; }
.ar-facts { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 6px 12px; margin: 0 0 10px; }
.ar-facts dt { font-weight: 700; color: #6b5d4a; }
.ar-facts dd { margin: 0; }
.ar-check { display: flex; gap: 8px; align-items: center; }
.ar-decide { margin-top: 12px; padding-top: 12px; border-top: 1px solid #efe4d2; }
.ar-tiles { flex-wrap: wrap; }
.bell-date { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--muted, #6b6b6b); }
.memo-who { font-weight: 600; }
.memo-who + small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; }
.bal-cell { font-weight: 700; font-variant-numeric: tabular-nums; }
.bal-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-right: auto; }
.bal-filters .field { min-width: 180px; }
/* Attendance correction policy (3-day rule) shown on the request screens */
.ar-policy { margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid #b8892b; background: #fbf5e6; color: #5a4310; font-size: .85rem; line-height: 1.4; border-radius: 4px; }
.th-grid .share-input.th-posted { cursor: default; }
.th-filters { padding: 10px 14px 4px; }
.contrib-filters { margin-left: auto; margin-right: 0; }
.contrib-excluded { margin: 0; padding: 10px 16px; font-size: .85rem; color: #6b4e12; background: #fbf5e6; border-top: 1px solid #eadcb5; }
/* Payroll history: company filter in the panel head */
.pr-history .pr-panel-head { flex-wrap: wrap; }
.pr-company-filter { margin: 0 0 0 auto; min-width: 200px; }
.pr-company-filter + .pr-viewall { margin-left: 0; }

/* Dropdown with a search box inside (searchable-select.js; Payroll → Employee). */
.ss { position: relative; min-width: 220px; }
.ss-button { width: 100%; text-align: left; font-size: 12px; font-weight: 400; color: #262626; padding: 9px 30px 9px 11px; border: 1px solid #d6d6d6; border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-button:hover { background-color: #fffaf0; }
.ss-panel { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); width: max(100%, 280px); max-height: 360px; overflow: auto; background: #fff; border: 1px solid #d6d6d6; border-radius: 8px; box-shadow: 0 10px 30px #0000002a; }
.ss-top { padding: 8px; border-bottom: 1px solid var(--line); }
.ss-list { list-style: none; margin: 0; padding: 4px 0; }
.ss-group { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 12px 4px; font-size: 12px; font-weight: 700; color: #262626; }
.ss-group .ss-search { min-width: 0; box-sizing: border-box; }
.ss-search { font-size: 12px; padding: 6px 9px; width: 100%; }
.ss-option { padding: 7px 12px 7px 24px; font-size: 12px; cursor: pointer; }
.ss-list > .ss-option:first-child { padding-left: 12px; }
.ss-option:hover, .ss-option:focus { background: #fff3d6; outline: none; }
.ss-option[aria-selected="true"] { background: var(--brand); color: #fff; }
.ss-none { margin: 0; padding: 10px 12px; font-size: 12px; color: var(--muted); }
.ss-group[hidden], .ss-option[hidden], .ss-none[hidden] { display: none; }

/* Sign-in without the culture panel: the form alone, centred. */
.welcome-login { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "form"; place-items: center; }
.welcome-login::before, .welcome-login::after { display: none; }
.welcome-login .login-form { width: min(460px, 100%); }

/* Dops monogram in the employee welcome card. */
.welcome-mascot { border-radius: 28px; box-shadow: 0 6px 18px rgb(166 32 46 / .25); }