/*
 * Event dashboard - visual polish.
 *
 * Loaded AFTER dashboard-modern.css and after the inline <style> blocks in
 * includes/dashboard.php, so it can correct them without editing 4,369 lines
 * of mixed markup and CSS. The layout, the sidebar and the section structure
 * are deliberately untouched - staff keep the dashboard they already know.
 *
 * Palette is the site's own navy, #002B7F, already used on lpkpsabah.gov.my.
 *
 * The original stylesheet leans on !important throughout, so overriding it
 * needs the same. Where that is the reason for an !important here, it is not
 * decoration.
 */

#efp-dashboard {
    /* LPKP navy, from the live site */
    --efp-navy: #002B7F;
    --efp-navy-700: #00246b;
    --efp-navy-100: #e6ebf5;
    --efp-navy-50: #f4f7fc;

    --efp-ink: #1a1d23;
    --efp-ink-soft: #5b6472;
    --efp-line: #e3e7ee;
    --efp-surface: #ffffff;
    --efp-canvas: #f7f9fc;

    --efp-ok: #0f7b3f;
    --efp-warn: #9a6400;
    --efp-bad: #b3261e;

    --efp-r: 10px;
    --efp-r-sm: 6px;

    /* One visible focus treatment for the whole dashboard. This is a
       government site subject to accessibility review, and the original
       styles removed outlines in places without replacing them. */
    --efp-focus: 0 0 0 3px rgba(0, 43, 127, .28);

    color: var(--efp-ink);
    font-size: 15px;
    line-height: 1.55;
}

/* ---------- Sidebar ---------------------------------------------------- */

/* The sidebar stays white. The inline <style> in dashboard.php sets that with
   !important and loads after this file, and more to the point a white sidebar
   is the design that staff already use - this is a polish pass, not a repaint.
   Navy is applied as the accent instead.

   Note the doubled #efp-dashboard.efp-dashboard: the inline rules use
   #efp-dashboard .efp-sidebar and come later in the document, so matching
   their specificity would lose. Adding the class wins on specificity. */

#efp-dashboard.efp-dashboard .efp-sidebar {
    border-right: 1px solid var(--efp-line) !important;
    padding: 22px 14px !important;
}

#efp-dashboard.efp-dashboard .efp-sidebar h3 {
    color: var(--efp-ink-soft) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    margin: 20px 8px 6px !important;
    padding: 0 !important;
    border: 0 !important;
}

#efp-dashboard.efp-dashboard .efp-sidebar h3:first-child {
    margin-top: 0 !important;
}

#efp-dashboard.efp-dashboard .efp-sidebar button {
    display: block;
    width: 100%;
    text-align: left !important;
    background: transparent !important;
    color: var(--efp-ink) !important;
    border: 0 !important;
    border-left: 3px solid transparent !important;
    border-radius: var(--efp-r-sm) !important;
    padding: 9px 12px !important;
    margin: 1px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

#efp-dashboard.efp-dashboard .efp-sidebar button:hover {
    background: var(--efp-navy-50) !important;
    color: var(--efp-navy) !important;
}

/* The original removed the outline on :focus and replaced it with a colour
   change only, which is not visible enough to navigate by keyboard. */
#efp-dashboard.efp-dashboard .efp-sidebar button:focus-visible {
    outline: 2px solid var(--efp-navy) !important;
    outline-offset: -2px;
    background: var(--efp-navy-50) !important;
}

#efp-dashboard.efp-dashboard .efp-sidebar button.active {
    background: var(--efp-navy-100) !important;
    border-left-color: var(--efp-navy) !important;
    color: var(--efp-navy) !important;
    font-weight: 650 !important;
}

/* The colour classes previously tinted whole buttons, so the sidebar read as
   four unrelated palettes. They now tint only the left marker, which keeps
   the grouping legible while the sidebar stays one object. */
#efp-dashboard.efp-dashboard .efp-sidebar button.blue,
#efp-dashboard.efp-dashboard .efp-sidebar button.green,
#efp-dashboard.efp-dashboard .efp-sidebar button.orange,
#efp-dashboard.efp-dashboard .efp-sidebar button.purple {
    background: transparent !important;
    color: var(--efp-ink) !important;
}

#efp-dashboard.efp-dashboard .efp-sidebar button.blue:hover,
#efp-dashboard.efp-dashboard .efp-sidebar button.green:hover,
#efp-dashboard.efp-dashboard .efp-sidebar button.orange:hover,
#efp-dashboard.efp-dashboard .efp-sidebar button.purple:hover {
    background: var(--efp-navy-50) !important;
    color: var(--efp-navy) !important;
}

#efp-dashboard.efp-dashboard .efp-sidebar button.blue.active   { border-left-color: #1d4ed8 !important; }
#efp-dashboard.efp-dashboard .efp-sidebar button.green.active  { border-left-color: var(--efp-ok) !important; }
#efp-dashboard.efp-dashboard .efp-sidebar button.orange.active { border-left-color: var(--efp-warn) !important; }
#efp-dashboard.efp-dashboard .efp-sidebar button.purple.active { border-left-color: #5b3fb5 !important; }

/* ---------- Content ---------------------------------------------------- */

#efp-dashboard .efp-content {
    background: var(--efp-canvas) !important;
    padding: 28px 30px !important;
}

#efp-dashboard .efp-content h2 {
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    color: var(--efp-ink) !important;
    margin: 0 0 4px !important;
}

#efp-dashboard .efp-welcome-box {
    background: var(--efp-surface) !important;
    border: 1px solid var(--efp-line) !important;
    border-radius: var(--efp-r) !important;
    box-shadow: none !important;
    padding: 26px 28px !important;
}

#efp-dashboard .efp-welcome-box h2 {
    font-size: 22px !important;
    margin-bottom: 6px !important;
}

#efp-dashboard .efp-welcome-box > p {
    color: var(--efp-ink-soft) !important;
    margin: 0 0 22px !important;
    max-width: 62ch;
}

/* ---------- Feature cards ---------------------------------------------- */

#efp-dashboard .efp-feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
}

#efp-dashboard .efp-feature {
    background: var(--efp-surface) !important;
    border: 1px solid var(--efp-line) !important;
    border-left: 3px solid var(--efp-navy) !important;
    border-radius: var(--efp-r) !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    transition: box-shadow .14s ease;
}

#efp-dashboard .efp-feature:hover {
    box-shadow: 0 2px 10px rgba(16, 24, 40, .07);
}

#efp-dashboard .efp-feature h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px !important;
    font-weight: 650 !important;
    margin: 0 0 6px !important;
    color: var(--efp-ink) !important;
}

#efp-dashboard .efp-feature p {
    color: var(--efp-ink-soft) !important;
    font-size: 14px !important;
    margin: 0 0 14px !important;
}

#efp-dashboard .efp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: var(--efp-r-sm);
    background: var(--efp-navy-100);
    color: var(--efp-navy);
    font-size: 0;
}

#efp-dashboard .efp-icon .dashicons {
    font-size: 17px;
    width: 17px;
    height: 17px;
    line-height: 17px;
}

#efp-dashboard .efp-icon.green  { background: #e4f4ea; color: var(--efp-ok); }
#efp-dashboard .efp-icon.orange { background: #fcf0dc; color: var(--efp-warn); }
#efp-dashboard .efp-icon.purple { background: #ece6fa; color: #5b3fb5; }

/* ---------- Buttons ---------------------------------------------------- */

/* Previously each group of buttons picked its own grey or green. One primary,
   one secondary, used consistently. */
#efp-dashboard .efp-feature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#efp-dashboard.efp-dashboard .efp-feature-actions button,
#efp-dashboard.efp-dashboard .efp-feature .efp-feature-actions button,
#efp-dashboard input[type="submit"],
#efp-dashboard .efp-btn {
    background: var(--efp-navy) !important;
    color: #fff !important;
    border: 1px solid var(--efp-navy) !important;
    border-radius: var(--efp-r-sm) !important;
    padding: 8px 15px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    cursor: pointer;
    transition: background .14s ease, box-shadow .14s ease;
}

#efp-dashboard.efp-dashboard .efp-feature-actions button:hover,
#efp-dashboard.efp-dashboard .efp-feature .efp-feature-actions button:hover,
#efp-dashboard input[type="submit"]:hover,
#efp-dashboard .efp-btn:hover {
    background: var(--efp-navy-700) !important;
    border-color: var(--efp-navy-700) !important;
}

#efp-dashboard .efp-feature-actions button:focus-visible,
#efp-dashboard input[type="submit"]:focus-visible,
#efp-dashboard .efp-btn:focus-visible,
#efp-dashboard a:focus-visible {
    outline: 2px solid var(--efp-navy) !important;
    outline-offset: 2px;
    box-shadow: var(--efp-focus) !important;
}

/* Second and later buttons in a card are the quieter choice. */
#efp-dashboard.efp-dashboard .efp-feature .efp-feature-actions button + button {
    background: var(--efp-surface) !important;
    color: var(--efp-navy) !important;
    border-color: #c6d0e4 !important;
}

#efp-dashboard.efp-dashboard .efp-feature .efp-feature-actions button + button:hover {
    background: var(--efp-navy-50) !important;
    border-color: var(--efp-navy) !important;
}

/* ---------- Forms ------------------------------------------------------ */

#efp-dashboard label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--efp-ink) !important;
    margin-bottom: 5px !important;
}

#efp-dashboard input[type="text"],
#efp-dashboard input[type="email"],
#efp-dashboard input[type="date"],
#efp-dashboard input[type="datetime-local"],
#efp-dashboard input[type="number"],
#efp-dashboard select,
#efp-dashboard textarea {
    border: 1px solid #c9d2e0 !important;
    border-radius: var(--efp-r-sm) !important;
    padding: 9px 11px !important;
    font-size: 14px !important;
    background: var(--efp-surface) !important;
    transition: border-color .14s ease, box-shadow .14s ease;
}

#efp-dashboard input:focus,
#efp-dashboard select:focus,
#efp-dashboard textarea:focus {
    border-color: var(--efp-navy) !important;
    box-shadow: var(--efp-focus) !important;
    outline: none !important;
}

/* ---------- Stat cards -------------------------------------------------- */

#efp-dashboard .efp-stat-card {
    background: var(--efp-surface) !important;
    border: 1px solid var(--efp-line) !important;
    border-radius: var(--efp-r) !important;
    padding: 16px 18px !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 13px;
}

#efp-dashboard .efp-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--efp-r-sm);
    background: var(--efp-navy-100);
    color: var(--efp-navy);
}

#efp-dashboard .efp-stat-number {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    /* Numbers line up column to column instead of jittering. */
    font-variant-numeric: tabular-nums;
    color: var(--efp-ink) !important;
}

#efp-dashboard .efp-stat-content h4,
#efp-dashboard .efp-stat-content p:not(.efp-stat-number) {
    font-size: 12.5px !important;
    color: var(--efp-ink-soft) !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* ---------- Tables ------------------------------------------------------ */

#efp-dashboard table {
    border-collapse: collapse;
    width: 100%;
    background: var(--efp-surface);
    border: 1px solid var(--efp-line);
    border-radius: var(--efp-r);
    overflow: hidden;
}

#efp-dashboard th {
    background: var(--efp-navy-50) !important;
    color: var(--efp-ink) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--efp-line) !important;
}

#efp-dashboard td {
    padding: 10px 12px !important;
    border-bottom: 1px solid #eef1f6 !important;
    font-size: 14px;
}

#efp-dashboard tbody tr:last-child td { border-bottom: 0 !important; }
#efp-dashboard tbody tr:hover td { background: var(--efp-navy-50); }

/* ---------- Status indicator -------------------------------------------- */

#efp-dashboard .efp-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--efp-ok);
    display: inline-block;
    margin-right: 6px;
}

/* ---------- Phone and tablet -------------------------------------------- */

/* The grid was a hard 240px + 1fr at every width, so on a phone the content
   column was squeezed to roughly 135px and the dashboard was unusable. */
@media (max-width: 900px) {
    #efp-dashboard.efp-dashboard {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        border-radius: var(--efp-r);
    }

    #efp-dashboard .efp-sidebar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 14px !important;
    }

    #efp-dashboard .efp-sidebar h3 {
        flex: 0 0 100%;
        margin: 10px 2px 2px !important;
    }

    #efp-dashboard .efp-sidebar h3:first-child { margin-top: 0 !important; }

    #efp-dashboard .efp-sidebar button {
        width: auto !important;
        border-left: 0 !important;
        border-bottom: 2px solid transparent !important;
        padding: 7px 11px !important;
    }

    #efp-dashboard .efp-sidebar button.active {
        border-left: 0 !important;
        border-bottom-color: var(--efp-navy) !important;
    }

    #efp-dashboard .efp-content { padding: 18px 16px !important; }
    #efp-dashboard .efp-welcome-box { padding: 20px 18px !important; }
    #efp-dashboard .efp-feature-list { grid-template-columns: 1fr; }

    /* Tables keep their columns and scroll instead of collapsing. */
    #efp-dashboard table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    #efp-dashboard * { transition: none !important; }
}

/* ---------- Print -------------------------------------------------------- */

@media print {
    #efp-dashboard .efp-sidebar,
    #efp-dashboard .efp-feature-actions { display: none !important; }

    #efp-dashboard.efp-dashboard {
        grid-template-columns: 1fr !important;
        box-shadow: none !important;
    }
}

/* ---------- Per-colour card buttons ------------------------------------- */

/* The inline styles in dashboard.php paint these per card colour
   (.efp-feature.blue/.green/.orange/.purple .efp-feature-actions button) at
   the same specificity as the generic rule above, and load later, so they win.
   These selectors add .efp-dashboard to beat them. The point is that every
   card now offers the same affordance - one primary action, one secondary -
   rather than each card inventing its own button colour. */

#efp-dashboard.efp-dashboard .efp-feature.blue .efp-feature-actions button,
#efp-dashboard.efp-dashboard .efp-feature.green .efp-feature-actions button,
#efp-dashboard.efp-dashboard .efp-feature.orange .efp-feature-actions button,
#efp-dashboard.efp-dashboard .efp-feature.purple .efp-feature-actions button {
    background: var(--efp-navy) !important;
    color: #fff !important;
    border: 1px solid var(--efp-navy) !important;
}

#efp-dashboard.efp-dashboard .efp-feature.blue .efp-feature-actions button:hover,
#efp-dashboard.efp-dashboard .efp-feature.green .efp-feature-actions button:hover,
#efp-dashboard.efp-dashboard .efp-feature.orange .efp-feature-actions button:hover,
#efp-dashboard.efp-dashboard .efp-feature.purple .efp-feature-actions button:hover {
    background: var(--efp-navy-700) !important;
    border-color: var(--efp-navy-700) !important;
}

#efp-dashboard.efp-dashboard .efp-feature.blue .efp-feature-actions button + button,
#efp-dashboard.efp-dashboard .efp-feature.green .efp-feature-actions button + button,
#efp-dashboard.efp-dashboard .efp-feature.orange .efp-feature-actions button + button,
#efp-dashboard.efp-dashboard .efp-feature.purple .efp-feature-actions button + button {
    background: var(--efp-surface) !important;
    color: var(--efp-navy) !important;
    border-color: #c6d0e4 !important;
}

#efp-dashboard.efp-dashboard .efp-feature.blue .efp-feature-actions button + button:hover,
#efp-dashboard.efp-dashboard .efp-feature.green .efp-feature-actions button + button:hover,
#efp-dashboard.efp-dashboard .efp-feature.orange .efp-feature-actions button + button:hover,
#efp-dashboard.efp-dashboard .efp-feature.purple .efp-feature-actions button + button:hover {
    background: var(--efp-navy-50) !important;
    border-color: var(--efp-navy) !important;
}

/* Card accent follows its group, so the four sections stay distinguishable. */
#efp-dashboard.efp-dashboard .efp-feature.green  { border-left-color: var(--efp-ok) !important; }
#efp-dashboard.efp-dashboard .efp-feature.orange { border-left-color: var(--efp-warn) !important; }
#efp-dashboard.efp-dashboard .efp-feature.purple { border-left-color: #5b3fb5 !important; }