/* This file is used to override the base portal CSS it does not affect compact pages such as dynamic forms*/

/*
 * ASPPB brand palette — sourced from the live site theme
 * (asppb.net/wp-content/themes/blocksy-child/style.css).
 *
 * The core portal themes its components from the --brightlink-* vars
 * (blcore branding.css), so remapping those re-skins the whole portal in one
 * place. We also set --bs-primary so Bootstrap's .text-primary / .bg-primary
 * utilities line up with the brand instead of defaulting to #0d6efd.
 */
:root {
    --asppb-slate:      #2D617B;  /* primary — headings, links, primary buttons */
    --asppb-slate-dark: #244F64;  /* primary hover/active */
    --asppb-green:      #46791D;  /* success / accent */
    --asppb-orange:     #F68D2E;  /* warning / accent (decorative use) */
    --asppb-orange-ink: #B45309;  /* AA-contrast orange (5:1 on white) for text/icons */
    --asppb-ink:        #1A1818;  /* body text */
    --asppb-ink-soft:   #464C52;  /* muted text */
    --asppb-line:       #E0E3DF;  /* borders */
    --asppb-mist:       #EAEDEA;  /* light surface */

    /* Re-skin the core portal (branding.css keys all its components off these) */
    --brightlink-blue:   var(--asppb-slate);
    --brightlink-green:  var(--asppb-green);
    --brightlink-orange: var(--asppb-orange);
    --light-blue:        var(--asppb-mist);

    /* Bootstrap utility classes (.text-primary / .bg-primary) */
    --bs-primary:     var(--asppb-slate);
    --bs-primary-rgb: 45, 97, 123;  /* keep in sync with --asppb-slate */
}

/* branding.css hard-codes the primary-button hover colour; re-point to ASPPB slate */
.btn-primary:hover {
    background-color: var(--asppb-slate-dark);
}

/* ===========================================================================
 * Provider dashboard — public/dynamic_views/providers/dashboard.mustache
 *
 * Layout / spacing / typography is done with Bootstrap utilities in the markup.
 * What stays here is only what Bootstrap can't express for the brand: the exact
 * brand colours, the slate/green/orange section accent, and the repeated tile.
 * ======================================================================== */

/* Brand colour helpers (no Bootstrap utility matches these exact hues) */
.asppb-ink   { color: var(--asppb-ink); }
.asppb-muted { color: var(--asppb-ink-soft); }

.asppb-authority-brand {
    background: linear-gradient(135deg, var(--asppb-mist), var(--asppb-line));
    border: 1px solid var(--asppb-line);
    border-left: 5px solid var(--asppb-slate);
    border-radius: 15px;
}
.asppb-authority-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--asppb-slate);
    color: #fff;
    font-size: 1.5rem;
}

/* Section card + per-section brand accent. Each modifier sets --asppb-accent,
 * which the top stripe, heading, and tile icons/hover all read from. */
.asppb-action-section {
    --asppb-accent: var(--asppb-slate);

    background-color: #fff;
    border: 1px solid var(--asppb-line);
    border-top: 4px solid var(--asppb-accent);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.asppb-action-section-candidates { --asppb-accent: var(--asppb-slate); }
.asppb-action-section-reports    { --asppb-accent: var(--asppb-green); }
.asppb-action-section-users      { --asppb-accent: var(--asppb-orange-ink); }
.asppb-action-title {
    color: var(--asppb-accent);
    border-bottom: 2px solid var(--asppb-line);
}

.asppb-action-tile {
    flex: 0 1 190px;  /* uniform width; rows that aren't full stay centered */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    background-color: #fff;
    border: 1px solid var(--asppb-line);
    border-radius: 12px;
    color: var(--asppb-ink);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.asppb-action-tile i {
    font-size: 1.6rem;
    color: var(--asppb-accent);
}
.asppb-action-tile:hover,
.asppb-action-tile:focus {
    border-color: var(--asppb-accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    color: var(--asppb-ink);
    text-decoration: none;
}
.asppb-action-tile:focus-visible {  /* visible keyboard focus ring (WCAG 2.4.7) */
    outline: 3px solid var(--asppb-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {  /* WCAG 2.3.3 */
    .asppb-action-tile { transition: none; }
    .asppb-action-tile:hover,
    .asppb-action-tile:focus { transform: none; }
}

.asppb-action-empty {
    background-color: var(--asppb-mist);
    border: 1px solid var(--asppb-line);
    color: var(--asppb-ink-soft);
}