/* Palette reference: https://jknkl.moh.gov.my/hrc/ */
:root {
    --ink: #111111;
    --muted: #555555;
    --brand: #103b9c;
    --dark: #000080;
    --line: #dce1e8;
    --bg: #f5f6f8;
    --hrc-blue: #103b9c;
    --hrc-navy: #000080;
    --hrc-cyan: #00c3f3;
    --hrc-soft: #f0f4ff;
    --hrc-selected: #dce8ff;
}
body { color: #111111; background: var(--bg); }
a { color: #111111; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
input, select, textarea { color: #111111; border-color: #cdd3dc; accent-color: var(--hrc-blue); }
input::placeholder, textarea::placeholder { color: #666666; opacity: 1; }
:focus-visible { outline-color: var(--hrc-blue); }
input:focus, select:focus, textarea:focus { outline-color: var(--hrc-blue); }
input:disabled, select:disabled, textarea:disabled, button:disabled { color: #666666; }
.primary, .secondary {
    color: #111111;
    border: 1px solid #a9bfe9;
}
.primary { background: #dce8ff; border-color: #91ade3; }
.primary:hover { background: #c9dcff; border-color: var(--hrc-blue); text-decoration: none; }
.secondary { background: #ffffff; border-color: #cdd3dc; }
.secondary:hover { background: var(--hrc-soft); text-decoration: none; }
.sidebar, .app-page .sidebar {
    background: var(--hrc-soft);
    border-right: 1px solid #cfd9ed;
    border-top: 5px solid var(--hrc-blue);
}
.brand, .brand small, .sidebar .brand, .sidebar .brand small { color: #111111; }
.brand-icon {
    color: #111111;
    background: #c9f1fc;
    border: 1px solid #8cdcf2;
    box-shadow: inset 0 -3px 0 var(--hrc-cyan);
}
.workspace { background: #ffffff; border-color: #d1dced; color: #555555; }
.workspace strong { color: #111111; }
.sidebar nav a { color: #111111; border: 1px solid transparent; }
.sidebar nav a.active {
    color: #111111;
    background: var(--hrc-selected);
    border-color: #c1d2f3;
    box-shadow: inset 3px 0 0 var(--hrc-blue);
}
.sidebar nav a:hover:not(.active) { background: #e5edfc; text-decoration: none; }
.sidebar nav small { color: #555555; background: #e1e6ee; }
.sidebar-bottom, .sidebar-bottom small { color: #555555; }
.online { background: var(--hrc-blue); }
.topbar { border-top: 3px solid var(--hrc-cyan); }
.avatar { background: #e8edf5; color: #111111; }
.title-dot { color: #111111; }
.pill { color: #555555; background: #ffffff; border-color: #cdd3dc; }
.panel, .staff-card, .stat, .organization-totals a { border-color: var(--line); }
th { background: #f0f3f8; }
td { border-bottom-color: #e9edf2; }
.green, .blue, .amber, .purple, .red, .neutral { color: #111111; }
.green { background: #e7eefb; }
.blue { background: #e4f4fb; }
.amber { background: #f1f1f1; }
.purple { background: #eceefa; }
.red { background: #e7e7e7; }
.neutral { background: #f0f1f3; }
.kpi.green .kpi-symbol, .kpi.blue .kpi-symbol,
.kpi.amber .kpi-symbol, .kpi.purple .kpi-symbol,
.kpi.red .kpi-symbol, .kpi.neutral .kpi-symbol { color: #111111; background: #e8edf5; }
.kpi.green .kpi-symbol { background: #dce8ff; }
.kpi.blue .kpi-symbol { background: #dcf4fc; }
.kpi.amber .kpi-symbol, .kpi.red .kpi-symbol { background: #e9e9e9; }
.kpi { border-top: 3px solid #d8e3f7; }
.kpi.selected, .kpi:hover {
    border-color: var(--hrc-blue);
    box-shadow: 0 3px 12px #103b9c12;
    text-decoration: none;
}
.kpi-link { border-top-color: #e4e9f1; }
.coverage-track { background: #e7ebf2; }
.coverage-track > span { background: var(--hrc-blue); }
.coverage-breakdown { border-color: var(--line); }
.coverage-breakdown > a, .coverage-breakdown > div { border-color: var(--line); }
.action-item, .organization-summary a { border-bottom-color: #e7ebf2; border-top-color: #e7ebf2; }
.data-notice { background: #f0f2f6; color: #555555; border-left: 3px solid var(--hrc-blue); }
.status-tabs { border-color: var(--line); }
.status-tabs a span { background: #edf0f5; }
.status-tabs a.active { background: var(--hrc-selected); color: #111111; }
.status-tabs a.active span { background: #c3d5f6; color: #111111; }
.demo-label, .count { background: #edf0f5; color: #555555; }
.trend-bar-slot { background: #edf1f8; }
.trend-bar-slot span, .bar { background: #91b7ed; }
.attendance-trend > a:last-child .trend-bar-slot span, .bar-col:last-child .bar { background: var(--hrc-blue); }
.chart { background: repeating-linear-gradient(to top, transparent, transparent 44px, #edf0f5 45px); }
.date-tile { background: var(--hrc-soft); }
.organization-source, .note-panel, .welcome {
    background: var(--hrc-soft);
    border-color: #d2ddf1;
}
.organization-source { border-top: 3px solid var(--hrc-blue); }
.organization-source p, .note-panel p, .note-panel small { color: #555555; }
.staff-placement { border-left-color: #a4bdeb; }
.staff-card-footer { border-top-color: var(--line); }
.alert { background: #edf2fc; border-color: #c8d6f2; color: #111111; }
.alert.warning { background: #f4f4f4; border-color: #d1d1d1; color: #111111; border-left: 3px solid #666666; }
.alert.error { background: #eeeeee; border-color: #bcbcbc; color: #111111; border-left: 3px solid #111111; }
.approve { color: #111111; background: #e2ebfb; }
.reject { color: #111111; background: #e6e6e6; }
.camera-view { background: #f0f3f8; border: 1px solid #ccd7e9; }
.camera-placeholder { color: #111111; }
.camera-frame { border-color: var(--hrc-blue); }
.qr-panel { border-top: 3px solid var(--hrc-blue); }
.login-story {
    color: #111111;
    background: linear-gradient(145deg, #f0f4ff 0%, #e0edff 70%, #d7f4fc 100%);
    border-top: 6px solid var(--hrc-blue);
}
.login-story > .eyebrow, .login-story p, .login-story > small,
.story-grid, .story-grid b { color: #555555; }
.login-story:after { color: #111111; opacity: .04; }
.demo-box { border-color: #d1d9e8; }
.clock-face { background: #ffffff; border-color: #c6d5ef; box-shadow: 0 15px 30px #103b9c12; }
.orbit, .orbit:after { border-color: #c7d6ef; }
.art-tag { background: #ffffff; border-color: #c7d6ef; }
.welcome:after { color: #111111; opacity: .04; }
footer { border-color: var(--line); color: #555555; }
.skip-link { color: #111111; border-color: var(--hrc-blue); }
@media (max-width: 650px) {
    .dashboard-filter-disclosure { border-color: var(--line); }
    .dashboard-filter-disclosure .dashboard-toolbar { border-top-color: var(--line); }
    .dashboard-table tbody tr { border-top-color: var(--line); }
}

::selection { color: #111111; background: #cfe4ff; }

/* Professional care-team photography for the sign-in panel. */
.login { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-story { padding: 36px 48px 28px; display: flex; flex-direction: column; }
.login-story:after { display: none; }
.login-story > .eyebrow { margin-top: 32px; margin-bottom: 14px; }
.login-story h1 { font-size: 35px; line-height: 1.3; letter-spacing: -1px; margin-bottom: 12px; }
.login-story > p { max-width: 540px; font-size: 12px; line-height: 1.8; margin-bottom: 0; }
.login-team { margin: 24px 0 0; }
.login-team img {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
    max-height: 340px; object-fit: cover; object-position: 50% 15%;
    border: 1px solid #c8d7ec; border-radius: 12px;
    box-shadow: 0 12px 30px #103b9c0c;
}
.login-team figcaption { color: #666666; font-size: 9px; margin-top: 8px; line-height: 1.6; }
.login-story .story-grid { justify-content: space-between; gap: 15px; margin: 24px 0 22px; max-width: 540px; }
.login-story .story-grid b { margin-top: 8px; color: #111111; }
.login-story > small { margin-top: auto; font-size: 9px; }
.login-form { padding: 40px 48px; }
@media (min-width: 1500px) {
    .login-story { padding: 48px 64px 32px; }
    .login-story h1 { font-size: 42px; }
    .login-team img { max-height: 440px; }
}
@media (max-width: 1100px) {
    .login-story { padding: 32px; }
    .login-story h1 { font-size: 30px; }
    .login-form { padding: 36px; }
}
@media (max-width: 800px) {
    .login { grid-template-columns: 1fr; }
    .login-story { padding: 28px; }
    .login-story > .eyebrow { margin-top: 24px; }
    .login-story h1 { font-size: 29px; }
    .login-story > p { max-width: 100%; }
    .login-team { margin-top: 20px; }
    .login-team img { aspect-ratio: 16 / 9; max-height: 270px; object-position: 50% 12%; }
    .login-story .story-grid, .login-story > small { display: none; }
    .login-form { padding: 32px 28px 40px; max-width: 540px; }
}
@media (max-width: 450px) {
    .login-story { padding: 22px; }
    .login-story .brand { font-size: 25px; }
    .login-story .brand small { font-size: 7px; letter-spacing: .8px; }
    .login-story > .eyebrow { font-size: 8px; letter-spacing: 1.3px; margin-top: 22px; }
    .login-story h1 { font-size: 26px; }
    .login-team img { aspect-ratio: 4 / 3; max-height: none; object-position: center; }
    .login-form { padding: 30px 22px 40px; }
}

/* Audit refinement: neutral text, clear interactions and one shared status surface. */
:root { --control-border: #777777; }
input, select, textarea { border-color: var(--control-border); }
.primary {
    background: #dce8ff; border: 2px solid var(--hrc-blue);
    box-shadow: 0 2px 0 #103b9c; color: #111111;
}
.primary:hover { background: #c9dcff; border-color: var(--hrc-navy); }
.primary:active { box-shadow: none; transform: translateY(1px); }
.secondary { border-color: var(--control-border); color: #111111; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--hrc-blue); outline-offset: 3px; }
.app-page .page-heading .muted { font-size: 13px; }
.page-dashboard .page-heading { margin-bottom: 18px; }
.page-dashboard .dashboard-toolbar { padding: 14px 16px; margin-bottom: 12px; }
.page-dashboard .dashboard-filter-context {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 0 20px; font-size: 12px; line-height: 1.6;
}
.scope-label { font-weight: 600; color: #111111; }
.context-time { margin-left: auto; color: #555555; font-size: 11px; }
.demo-context {
    border: 1px dashed #777777; border-radius: 4px; padding: 3px 7px;
    color: #555555; font-size: 10px; white-space: nowrap;
}
.filter-chip {
    background: #ffffff; border: 1px solid #777777; border-radius: 6px;
    display: inline-flex; gap: 10px; align-items: center; padding: 6px 10px;
    color: #111111; max-width: 100%; overflow-wrap: anywhere;
    font-size: 12px; min-height: 36px;
}
.filter-chip:hover { background: var(--hrc-soft); }
.filter-chip > span { font-size: 18px; line-height: 1; flex-shrink: 0; }
.status-introduction {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    font-size: 12px; margin: 22px 0 12px;
}
.status-introduction > span { color: #555555; }
.page-dashboard .attendance-kpis { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin-bottom: 0; }
.page-dashboard .kpi {
    background: #ffffff; color: #111111; border: 1px solid #c7cfdb;
    border-top: 3px solid #103b9c; border-radius: 9px; padding: 16px;
}
.page-dashboard .kpi.red { border-top-color: #111111; }
.page-dashboard .kpi.blue { border-top-color: #00c3f3; }
.page-dashboard .kpi.purple { border-top-color: #7096cf; }
.page-dashboard .kpi.neutral { border-top-color: #777777; }
.page-dashboard .kpi.selected { border-color: #103b9c; background: #f0f4ff; box-shadow: 0 0 0 1px #103b9c; }
.page-dashboard .kpi:hover { background: #f0f4ff; border-color: #103b9c; }
.page-dashboard .kpi-label { min-height: 36px; }
.page-dashboard .kpi strong { margin: 8px 0; font-size: 32px; }
.page-dashboard .kpi small { font-size: 12px; min-height: 40px; }
.page-dashboard .kpi-link { font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.lateness-summary {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 20px; padding: 12px 15px;
    background: #eef2f8; border-radius: 6px; color: #555555; font-size: 12px; line-height: 1.7;
}
.lateness-summary strong { color: #111111; }
.lateness-summary a { text-decoration: underline; text-underline-offset: 3px; }
.page-dashboard .panel-head h3 { font-size: 16px; }
.page-dashboard .panel-head p, .page-dashboard .coverage-description,
.page-dashboard .metric-explainer p { font-size: 12px; }
.page-dashboard .action-item { min-height: 70px; }
.page-dashboard .action-item:hover, .page-dashboard .organization-summary a:hover {
    background: #f0f4ff; text-decoration: none;
}
.page-dashboard .action-item strong { font-size: 13px; }
.page-dashboard .action-item small { font-size: 12px; }
.page-dashboard .status-tabs a { min-height: 44px; font-size: 12px; border-bottom: 3px solid transparent; }
.page-dashboard .status-tabs a.active { border-bottom-color: #103b9c; }
.page-dashboard .status-tabs a span { font-size: 11px; }
.page-dashboard .detail-search .secondary, .page-dashboard .pagination .secondary { min-height: 44px; }
.page-dashboard .dashboard-table th { font-size: 12px; }
.page-dashboard .dashboard-table td strong { font-size: 13px; }
.page-dashboard .dashboard-table td small { font-size: 12px; }
.page-dashboard .panel-head a, .page-dashboard .metric-explainer summary,
.page-dashboard .organization-summary a { text-decoration: underline; text-underline-offset: 3px; }
.page-dashboard .attendance-trend strong, .page-dashboard .attendance-trend small { font-size: 12px; }
.page-dashboard .trend-bar-slot span { background: #4271b7; }
.page-dashboard .coverage-breakdown a { min-height: 50px; }
@media (max-width:1200px) and (min-width:801px) {
    .page-dashboard .attendance-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:800px) {
    .page-dashboard .attendance-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:650px) {
    .page-dashboard .attendance-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .page-dashboard .kpi { padding: 14px; }
    .page-dashboard .kpi-label { font-size: 12px; }
    .page-dashboard .kpi.neutral { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
    .page-dashboard .kpi.neutral strong { grid-row: 1 / 3; grid-column: 2; align-self: center; }
    .page-dashboard .kpi.neutral .kpi-label { min-height: 0; }
    .page-dashboard .kpi.neutral small { min-height: 0; }
    .page-dashboard .kpi.neutral .kpi-link { grid-column: 1 / -1; }
    .page-dashboard .kpi.neutral .kpi-symbol { display: none; }
    .page-dashboard .dashboard-filter-disclosure { margin-bottom: 12px; }
    .page-dashboard .dashboard-filter-context { margin-bottom: 16px; font-size: 11px; }
    .page-dashboard .context-time { font-size: 11px; }
    .filter-chip { min-height: 44px; }
    .page-dashboard .status-introduction { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 18px; }
    .lateness-summary { align-items: flex-start; flex-direction: column; }
    .page-dashboard .panel-head { flex-wrap: wrap; }
    .page-dashboard .panel-head a { min-height: 36px; display: inline-flex; align-items: center; font-size: 12px; }
    .page-dashboard .status-tabs { flex-wrap: wrap; overflow: visible; gap: 4px; }
    .page-dashboard .status-tabs a { padding: 7px 9px; }
    .page-dashboard .dashboard-table tbody td:before { font-size: 11px; }
    .page-dashboard .organization-summary { max-height: none; overflow: visible; }
}
@media (max-width:400px) {
    .app-page .breadcrumb { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .app-page .breadcrumb > strong { font-size: 10px; }
    .app-page .top-right { flex-shrink: 0; }
    .page-dashboard .page-heading h1 { font-size: 23px; }
    .page-dashboard .context-time { margin-left: 0; }
    .page-dashboard .demo-context { margin-left: auto; }
    .page-dashboard .detail-search { flex-wrap: wrap; }
    .page-dashboard .detail-search input { flex: 1 1 180px; width: 100%; }
    .page-dashboard .detail-search button { flex: 1 1 90px; }
}
.page-dashboard .page-heading .pill { display: none; }
.page-dashboard .dashboard-filter-context { margin-bottom: 12px; }
.page-dashboard .status-introduction { margin-top: 16px; }
.mobile-status-filter { display: none; }
@media (max-width:650px) {
    .page-dashboard .status-tabs { display: none; }
    .mobile-status-filter { display: flex; align-items: end; gap: 10px; margin-bottom: 16px; }
    .mobile-status-filter label { flex: 1; min-width: 0; }
    .mobile-status-filter select { font-size: 12px; min-height: 44px; }
    .mobile-status-filter .secondary { min-height: 44px; padding: 10px; font-size: 11px; }
    .page-dashboard .dashboard-intro p { display: flex; flex-wrap: wrap; gap: 3px 12px; }
    .page-dashboard .dashboard-intro p span { padding: 0; color: #555555; }
    .page-dashboard .dashboard-intro p .summary-date { flex-basis: 100%; }
    .page-dashboard .dashboard-intro p .summary-separator { display: none; }
}