/* ===========================================================================
   ADYAN portal overrides — loaded AFTER the template css so it always wins.
   Keep every site-specific style here instead of editing the template files,
   so template upgrades stay painless.
   =========================================================================== */

/* ---- Default link colour --------------------------------------------
   Bootstrap's own default is blue (a{color:#007bff}); every plain,
   unstyled <a> site-wide (admin action links like Edit/Approve/Delete,
   "Sign out", "← Admin home" back-links, blog links, etc.) inherits it
   unless something more specific overrides it. Brand colour instead. */
a {
    color: #16a34a;
}
a:hover {
    color: #0e7a3b;
}

/* Native checkboxes/radios (e.g. Branches "awaiting approval" filter) still
   render in the browser's default blue unless told otherwise. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #16a34a;
}

/* ---- Navbar on pages WITHOUT a hero banner ------------------------------
   The template's navbar is transparent and absolutely-positioned (designed
   to float over a hero image), which made it vanish at the top of pages
   like /Register. With .no-hero the navbar joins normal page flow and its
   gradient background stays permanently visible. */
/* Pinned to the top at all times (matches the home page's behaviour once
   scrolling starts), with the gradient always visible. Page content clears
   it thanks to the template's pt-115 top padding on first sections. */
.header-area.no-hero .navbar-area {
    position: fixed;
    top: 0;
}
.header-area.no-hero .navbar-area::before {
    opacity: 1;
}

/* ---- Uniform, grid-like forms -------------------------------------------
   Every label owns its column; every control fills that column at the same
   height, so rows line up like a grid on all screen sizes. */
.adyan-form label {
    display: block;
    width: 100%;
    margin-bottom: 18px;
    font-weight: 600;
    color: #333;
}
.adyan-form .form-control {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 6px;
    padding: 0 14px;
    font-weight: 400;
    border: 1px solid #d8dbe4;
    border-radius: 6px;
    background: #fff;
}
.adyan-form textarea.form-control {
    height: auto;
    padding: 10px 14px;
}
.adyan-form select[multiple].form-control {
    height: auto;
    min-height: 46px;
    padding: 6px 14px;
}
.adyan-form .form-control:focus {
    border-color: #16a34a;
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

/* ---- Password show/hide toggle (rf-link item 1, 2026-08-01) -------------
   Wired up automatically for every password input by adyan-format.js. The
   wrapper is a plain <span> so it inherits the input's own block/width
   behaviour (including inside .adyan-form's grid columns) without needing
   per-page markup changes. */
.adyan-password-wrap {
    position: relative;
    display: block;
}
.adyan-password-wrap input.form-control {
    padding-right: 46px;
}
.adyan-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #8a8f98;
    cursor: pointer;
}
.adyan-password-toggle:hover {
    color: #16a34a;
}
/* The icon glyph's own em-box isn't perfectly centred within its line-height
   (common with icon fonts), which is what made the button look "sitting a
   bit above centre" even though the BUTTON itself was correctly centred —
   flex centring on the button (above) centres the glyph's actual rendered
   box instead of relying on font metrics. */
.adyan-password-toggle i {
    display: block;
}
/* Single eye glyph does double duty: a diagonal strike appears only while
   the password is currently shown (click again to hide), same convention
   as most password fields elsewhere. */
.adyan-password-toggle::after {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%) rotate(-45deg);
    opacity: 0;
}
.adyan-password-toggle.is-visible::after {
    opacity: 1;
}

/* ---- Centralized narrow content (registration, status, ...) ------------- */
.adyan-narrow {
    max-width: 860px;
    margin: 0 auto;
}

/* ---- Fee / notice card --------------------------------------------------
   The "Registration fee: ₦10,000 ... late fee ..." message. */
.adyan-fee-note {
    margin: 25px 0;
    padding: 16px 20px;
    background: #eef9f1;
    border-left: 4px solid #16a34a;
    border-right: 4px solid #16a34a;  /* both sides, for symmetry */
    border-radius: 6px;
    color: #1b3a2b;
    font-weight: 500;
    text-align: center;
}

/* ---- Important notice (event instructions on the register page) --------- */
.adyan-important {
    margin: 20px auto 0;
    padding: 14px 20px;
    max-width: 640px;
    background: #fff7e6;
    border-left: 4px solid #f0a500;
    border-right: 4px solid #f0a500;
    border-radius: 6px;
    color: #6b4e00;
    font-weight: 600;
    font-size: 17px;
}

/* ---- Footer on mobile ----------------------------------------------------
   When the two footer columns stack on top of each other (below Bootstrap's
   lg breakpoint), centre their content — and ONLY then; side-by-side desktop
   layout keeps the template's left alignment. */
@media (max-width: 991.98px) {
    .footer-area .footer-address,
    .footer-area .footer-contact {
        text-align: center;
    }
    .footer-area .footer-contact .social li {
        float: none;
        display: inline-block;
    }
    /* "About ADYAN Events" title on the home page (rf-link 2026-07-29,
       item 28) — everything else in this section already reads as centred
       once it stacks on mobile; the title was the one piece left behind. */
    .about-content .section-title {
        text-align: center;
    }
    /* Status page's "My Event Registrations" heading (item 18, rf-link
       2026-07-31) — matches the app-wide standard of centring section
       headings once the layout stacks on mobile (desktop keeps it
       left-aligned above the registration cards below it). */
    #p-reg-title {
        text-align: center;
    }
}

/* ---- Buttons ------------------------------------------------------------
   The template's plain .main-btn is brand-colour text on a white pill —
   invisible on white page backgrounds (fine only over the hero image). A
   thin border in the brand colour makes it visible everywhere; the
   gradient .main-btn-2 needs no help. */
.main-btn:not(.main-btn-2) {
    border: 1px solid #16a34a;
}

/* ---- Admin hub tile buttons (rf-link 2026-07-29 item 3, revised
   2026-07-31 per rf-link item 2 "put the p inside the a tag") -----------
   The description now lives INSIDE the <a class="main-btn">, directly
   below the title, so it visually reads as part of the button (same
   border, same click target) rather than a separate paragraph underneath.
   This means the button can no longer use the template's fixed
   line-height:48px pill — .adyan-tile-btn overrides to a flex column with
   auto height, so taller (two-line) descriptions simply grow the button
   instead of overflowing it. */
.adyan-tile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 88px;
    margin-bottom: 8px;
    padding: 14px 20px;
    line-height: 1.3;
    white-space: normal;
}

.adyan-tile-title {
    font-size: 16px;
    font-weight: 500;
}

.adyan-tile-desc {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
}

/* ---- Analytics stat tiles, equal height regardless of label length
   (rf-link 2026-07-29, item 17) — a robust fix instead of shortening text
   or guessing line counts (both were tried and didn't hold up on mobile).
   Each tile's column is a flex container (.d-flex, added in the markup);
   flex's own cross-axis stretch makes every card match the row's tallest
   one automatically, on any screen width, with any label length. */
#stat-tiles .adyan-fee-note {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- Long button labels on small mobile (rf-link 2026-07-29, items 29/30)
   The template's .main-btn is white-space:nowrap with fixed 40px side
   padding — great for short labels, but a long one ("Download Registration
   Slip (PDF)") forces the button (and its container) wider than a small
   phone's viewport instead of wrapping. Letting it wrap only below the
   smallest breakpoint keeps every other button's normal look untouched. */
@media (max-width: 575.98px) {
    .main-btn {
        white-space: normal;
        max-width: 100%;
        padding: 10px 20px;
        line-height: 1.3;
    }
}

/* ---- Table action-link casing (rf-link 2026-07-29, item 21b) -----------
   "Reset password" -> "Reset Password", "Mark paid" -> "Mark Paid", etc. —
   Title Case for every table action link site-wide, !important so it wins
   over anything more specific, applied once here rather than editing every
   label string individually (and covers any future one automatically). */
.actions a {
    text-transform: capitalize !important;
}

/* ---- DataTables "Show _ Entries" spacing (rf-link 2026-07-29, item 11) --
   The label text and the count <select> sit flush against each other by
   default. */
.dataTables_length select {
    margin: 0 6px;
}

/* ---- Blog tag chips ------------------------------------------------------ */
.adyan-tag {
    display: inline-block;
    padding: 2px 10px;
    margin: 2px 4px 2px 0;
    background: #e8f7ec;
    color: #16a34a;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* ---- Success panel ------------------------------------------------------ */
.adyan-success {
    border: 2px solid #4caf50;
    border-radius: 8px;
    padding: 24px;
    background: #f6fff6;
}

/* ---- "ButtonAlignmentt" (rf-link 2026-07-29, item 0) --------------------
   Wrap any group of action buttons in this instead of hand-rolled
   `style="margin-left:8px"` on the 2nd/3rd button: inline with breathing
   room on desktop, and on mobile — where they stack vertically because the
   screen is too narrow — centred with a gap between them instead of
   touching (gap works in both directions, unlike a one-sided margin). */
.adyan-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
@media (max-width: 767.98px) {
    .adyan-btn-row {
        flex-direction: column;
        align-items: center;
    }
    .adyan-btn-row > .main-btn,
    .adyan-btn-row > .main-btn-2,
    .adyan-btn-row > input,
    .adyan-btn-row > select {
        width: 100%;
        max-width: 320px;
    }
}

/* ---- "FormAlignmentt" small-mobile overflow guard (rf-link 2026-07-29,
   item 0) — a handful of pages have one wide element (a long ID, a slip
   button, a test-recipient input) that can shoot past the form's edge on
   very small screens even though .adyan-form's own inputs behave. Apply to
   that specific element to force it back inside the form's width. */
.adyan-contain {
    max-width: 100%;
    box-sizing: border-box;
}