/* DC Healthcare Holdings Berhad HRMS - brand layer on top of Bootstrap 5.
   Brand colour #00A89C is used for accents, borders, focus and highlights.
   White text on #00A89C is only 2.97:1 (fails WCAG AA), so filled buttons / badges
   with white text use the darker brand variant #007A71 (5.22:1, passes AA). */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins/poppins-latin-700-normal.woff2') format('woff2'); }

:root {
    --dc-brand: #00A89C;
    --dc-brand-strong: #007A71;   /* text / filled components (AA on white) */
    --dc-brand-deep: #005F58;
    --dc-brand-soft: #E6F6F5;
    --dc-ink: #1F2A30;
    --dc-muted: #5F6B73;
    --dc-border: #E2E8EB;
    --dc-surface: #F6F8F9;
    --bs-body-font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --bs-body-color: var(--dc-ink);
    --bs-body-bg: #FFFFFF;
    --bs-link-color: var(--dc-brand-strong);
    --bs-link-color-rgb: 0, 122, 113;
    --bs-link-hover-color: var(--dc-brand-deep);
    --bs-link-hover-color-rgb: 0, 95, 88;
    --bs-border-color: var(--dc-border);
    --bs-focus-ring-color: rgba(0, 168, 156, .35);
}

body { font-size: .925rem; background: var(--dc-surface); }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-weight: 600; color: var(--dc-ink); }
.text-muted, .form-text { color: var(--dc-muted) !important; }
.text-brand { color: var(--dc-brand-strong) !important; }
.bg-brand-soft { background: var(--dc-brand-soft) !important; }
.border-brand { border-color: var(--dc-brand) !important; }

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--dc-brand-strong); --bs-btn-border-color: var(--dc-brand-strong);
    --bs-btn-hover-bg: var(--dc-brand-deep); --bs-btn-hover-border-color: var(--dc-brand-deep);
    --bs-btn-active-bg: var(--dc-brand-deep); --bs-btn-active-border-color: var(--dc-brand-deep);
    --bs-btn-disabled-bg: var(--dc-brand-strong); --bs-btn-disabled-border-color: var(--dc-brand-strong);
    --bs-btn-focus-shadow-rgb: 0, 168, 156;
}
.btn-outline-primary {
    --bs-btn-color: var(--dc-brand-strong); --bs-btn-border-color: var(--dc-brand);
    --bs-btn-hover-bg: var(--dc-brand-strong); --bs-btn-hover-border-color: var(--dc-brand-strong);
    --bs-btn-active-bg: var(--dc-brand-deep); --bs-btn-active-border-color: var(--dc-brand-deep);
    --bs-btn-focus-shadow-rgb: 0, 168, 156;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--dc-brand); box-shadow: 0 0 0 .2rem rgba(0, 168, 156, .25);
}
.form-check-input:checked { background-color: var(--dc-brand-strong); border-color: var(--dc-brand-strong); }
:focus-visible { outline: 3px solid var(--dc-brand); outline-offset: 2px; }
.badge-brand { background: var(--dc-brand-strong); color: #fff; }
.badge-brand-soft { background: var(--dc-brand-soft); color: var(--dc-brand-deep); }
.page-link { color: var(--dc-brand-strong); }
.active > .page-link, .page-link.active { background-color: var(--dc-brand-strong); border-color: var(--dc-brand-strong); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: .5rem 1rem; background: #fff; }
.skip-link:focus { left: 1rem; top: .5rem; }

/* ------------------------------------------------------------------ HRMS shell */
.hrms-shell { display: flex; min-height: 100vh; }
.hrms-sidebar {
    width: 260px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--dc-border);
    position: sticky; top: 0; height: 100vh; overflow-y: auto; padding-bottom: 2rem;
}
.hrms-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--dc-border); text-decoration: none; }
.hrms-brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--dc-brand); color: var(--dc-ink); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.hrms-brand-text { line-height: 1.15; color: var(--dc-ink); font-weight: 600; font-size: .85rem; }
.hrms-brand-text small { display: block; color: var(--dc-muted); font-weight: 400; font-size: .72rem; }
.nav-section { padding: 1rem 1.25rem .35rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-muted); font-weight: 600; }
.hrms-nav a {
    display: flex; align-items: center; gap: .65rem; padding: .5rem 1.25rem; margin: 1px .6rem; border-radius: 8px;
    color: #37444C; text-decoration: none; font-size: .875rem;
}
.hrms-nav a:hover { background: var(--dc-surface); color: var(--dc-ink); }
.hrms-nav a.active { background: var(--dc-brand-soft); color: var(--dc-brand-deep); font-weight: 600; box-shadow: inset 3px 0 0 var(--dc-brand); }
.hrms-nav a i { font-size: 1rem; width: 1.1rem; }
.hrms-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hrms-topbar { background: #fff; border-bottom: 1px solid var(--dc-border); padding: .7rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 10; }
.hrms-content { padding: 1.5rem; max-width: 1400px; width: 100%; }
.test-mode-banner { background: #FFF3CD; color: #664D03; border-bottom: 1px solid #FFE69C; font-size: .82rem; padding: .35rem 1.5rem; }

@media (max-width: 991.98px) {
    .hrms-sidebar { position: fixed; left: -280px; z-index: 1050; transition: left .2s ease; box-shadow: 0 0 30px rgba(0,0,0,.15); }
    .hrms-sidebar.open { left: 0; }
    .hrms-content { padding: 1rem; }
}

/* Cards / metrics */
.card { border-color: var(--dc-border); border-radius: 12px; }
.card-header { background: #fff; border-bottom-color: var(--dc-border); font-weight: 600; }
.metric-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--dc-border); border-radius: 12px; background: #fff; padding: 1rem 1.1rem; height: 100%; transition: border-color .15s, box-shadow .15s; }
.metric-card:hover { border-color: var(--dc-brand); box-shadow: 0 2px 10px rgba(0, 122, 113, .08); color: inherit; }
.metric-card .metric-value { font-size: 1.65rem; font-weight: 600; line-height: 1.2; }
.metric-card .metric-label { color: var(--dc-muted); font-size: .8rem; }
.attention-item { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--dc-border); text-decoration: none; color: inherit; }
.attention-item:last-child { border-bottom: 0; }
.attention-count { min-width: 2rem; text-align: center; }

.bar-row { display: grid; grid-template-columns: 140px 1fr 48px; gap: .6rem; align-items: center; margin-bottom: .45rem; font-size: .82rem; }
.bar-track { background: var(--dc-surface); border-radius: 6px; height: 12px; overflow: hidden; }
.bar-fill { background: var(--dc-brand); height: 100%; width: 0; border-radius: 6px; }

.table { --bs-table-hover-bg: #F3FAF9; }
.table > thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dc-muted); font-weight: 600; background: #fff; }
.table-card { background: #fff; border: 1px solid var(--dc-border); border-radius: 12px; overflow: hidden; }
.table-card .table { margin-bottom: 0; }

.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 .9rem 1.25rem; border-left: 2px solid var(--dc-border); margin-left: .35rem; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--dc-brand); }
.timeline li:last-child { border-left-color: transparent; }
.pre-wrap { white-space: pre-wrap; word-break: break-word; }
.dl-compact dt { color: var(--dc-muted); font-weight: 500; font-size: .8rem; }
.dl-compact dd { margin-bottom: .6rem; }
.recovery-codes { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; }
.qr-box { width: 220px; height: 220px; }
.qr-box img, .qr-box canvas, .qr-box svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------ Auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(180deg, #fff 0%, var(--dc-surface) 100%); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--dc-border); border-radius: 16px; padding: 2rem; box-shadow: 0 8px 30px rgba(31, 42, 48, .06); }
.auth-card .brand-line { border-top: 4px solid var(--dc-brand); border-radius: 16px 16px 0 0; margin: -2rem -2rem 1.5rem; }

/* ------------------------------------------------------------------ Careers */
.careers body, body.careers { background: #fff; }
.careers-header { border-bottom: 1px solid var(--dc-border); background: #fff; }
.careers-hero { background: var(--dc-brand-soft); border-bottom: 3px solid var(--dc-brand); padding: 3rem 0 2.5rem; }
.careers-hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.job-card { border: 1px solid var(--dc-border); border-radius: 12px; padding: 1.25rem; background: #fff; height: 100%; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.job-card:hover { border-color: var(--dc-brand); box-shadow: 0 4px 16px rgba(0, 122, 113, .1); }
.job-meta { color: var(--dc-muted); font-size: .85rem; }
.job-meta i { color: var(--dc-brand-strong); }
.careers-footer { border-top: 1px solid var(--dc-border); color: var(--dc-muted); font-size: .85rem; padding: 2rem 0; margin-top: 3rem; }
.apply-section { border: 1px solid var(--dc-border); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; background: #fff; }
.apply-section h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.required::after { content: ' *'; color: #B02A37; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.richtext { white-space: pre-line; }
.mw-form { max-width: 760px; }