/* ============================================================
   ACS Water Billing — Client Portal theme overlay
   ------------------------------------------------------------
   Brings the member self-service portal (site.master + Portal/*)
   in line with the Admin portal's KEPRO-aligned look, WITHOUT
   changing markup, control IDs or page structure.

   This is the Portal counterpart to assets/css/acs-kepro-theme.css
   (Admin). The two portals run different front-end stacks — Admin is
   Bootstrap 3 + Telerik, the Portal is the "HK" template on
   Bootstrap 4 — so they need different selectors to reach the same
   design language. Tokens come from assets/css/acs-ui-kit.css, which
   must load before this file.

   Rules this file follows:
   1. Purely additive. Loaded LAST in site.master and Portal/Login.aspx
      so it restyles existing classes by selector alone. Every rule is
      scoped to body.page-portal so it cannot leak into Admin,
      SuperAdmin or the public document pages (Inv/Rct/stmt).
   2. Tenant brand colours are NOT overridden. --sideNavcolor and
      --topNavcolor are set per company at runtime and drive the
      branded chrome in custom_theme.css. Only brand-neutral tokens
      and standard state colours are set here, per AGENTS.md.
   3. No select2 / bootstrap-select / .selectpicker widget internals
      are touched. Those replace the native <select> with their own
      DOM; restyling them globally is how dropdowns break. Only the
      native .form-control is styled, which those widgets ignore.
   4. Layout primitives the HK template depends on (.hk-wrapper
      offsets, .hk-nav positioning, grid/flex utilities) are left
      alone. This file changes surface, shape, type and colour only.
   ============================================================ */

/* ============================================================
   Base
   ============================================================ */

body.page-portal {
    background: var(--acs-page);
    color: var(--acs-text);
    font-family: var(--acs-font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-portal h1,
body.page-portal h2,
body.page-portal h3,
body.page-portal h4,
body.page-portal h5,
body.page-portal h6 {
    color: var(--acs-ink);
    letter-spacing: -.01em;
}

body.page-portal a {
    transition: color .16s ease;
}

/* ============================================================
   Top navbar
   ============================================================ */

body.page-portal .hk-navbar {
    background: var(--acs-surface);
    border-bottom: 1px solid var(--acs-line-soft);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

body.page-portal .hk-navbar .navbar-brand h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--acs-ink);
}

body.page-portal .hk-navbar .nav-link {
    color: var(--acs-muted);
    border-radius: var(--acs-r-btn);
    transition: background .16s ease, color .16s ease;
}

body.page-portal .hk-navbar .nav-link:hover,
body.page-portal .hk-navbar .nav-link:focus {
    color: var(--acs-ink);
    background: var(--acs-line-soft);
}

body.page-portal .dropdown-menu {
    border: 1px solid var(--acs-line-soft);
    border-radius: var(--acs-r-card);
    box-shadow: var(--acs-shadow-raised);
    padding: 6px;
}

body.page-portal .dropdown-item {
    border-radius: var(--acs-r-btn);
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--acs-text);
}

body.page-portal .dropdown-item:hover,
body.page-portal .dropdown-item:focus {
    background: var(--acs-line-soft);
    color: var(--acs-ink);
}

body.page-portal .dropdown-header {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--acs-muted);
}

/* ============================================================
   Page header — .hk-pg-header / .hk-pg-title appear on every
   Portal page, so this single rule modernises all of them.
   ============================================================ */

body.page-portal .hk-pg-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--acs-line-soft);
}

/* Portal page titles currently carry per-page utility classes — .text-dark on
   Home/Invoices/Payments, .text-info on Events/Membership/News, .text-primary on
   Subscription — so the same heading renders in four different colours and
   weights across the portal. The HK template declares those utilities
   !important, so unifying the page title means matching that weight. This is
   the one place in this file that uses !important, and it is scoped to
   .hk-pg-title alone: .text-dark / .text-info keep working everywhere else. */
body.page-portal .hk-pg-header .hk-pg-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800 !important;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--acs-ink) !important;
}

/* The header icon chip. .pg-title-icon is an inline span in the template;
   giving it a tinted square matches the Admin/KEPRO icon-box language. */
body.page-portal .hk-pg-title .pg-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: var(--acs-r-icon);
    background: var(--acs-info-bg);
    color: var(--acs-info);
    font-size: 15px;
}

body.page-portal .hk-pg-title .pg-title-icon svg {
    width: 17px;
    height: 17px;
}

/* ============================================================
   Cards
   ============================================================ */

body.page-portal .card {
    background: var(--acs-surface);
    border: 1px solid var(--acs-line-soft);
    border-radius: var(--acs-r-card);
    box-shadow: var(--acs-shadow-card);
}

body.page-portal .card-header {
    background: transparent;
    border-bottom: 1px solid var(--acs-line-soft);
    border-top-left-radius: var(--acs-r-card);
    border-top-right-radius: var(--acs-r-card);
    padding: 15px 18px;
}

body.page-portal .card-header h6,
body.page-portal .card-header .card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--acs-ink);
}

body.page-portal .card-body {
    padding: 18px;
}

body.page-portal .card-footer {
    background: transparent;
    border-top: 1px solid var(--acs-line-soft);
    border-bottom-left-radius: var(--acs-r-card);
    border-bottom-right-radius: var(--acs-r-card);
}

/* ============================================================
   Tables
   ============================================================ */

body.page-portal .table {
    color: var(--acs-text);
}

body.page-portal .table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--acs-line);
    background: #f8fafc;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--acs-muted);
    padding: 11px 13px;
    white-space: nowrap;
}

body.page-portal .table tbody td {
    border-top: 1px solid var(--acs-line-soft);
    padding: 11px 13px;
    font-size: 13.5px;
    vertical-align: middle;
}

body.page-portal .table-hover tbody tr:hover {
    background: #fafcff;
}

/* Wide portal tables get their own scroller rather than pushing the page
   sideways. Mirrors the RadGrid overflow fix already made on Admin. */
body.page-portal .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Forms
   Native controls only. select2 / bootstrap-select render their own
   markup and are deliberately untouched (see header rule 3).
   ============================================================ */

body.page-portal .form-control,
body.page-portal input[type="text"].form-control,
body.page-portal input[type="email"].form-control,
body.page-portal input[type="number"].form-control,
body.page-portal input[type="date"].form-control,
body.page-portal input[type="password"].form-control,
body.page-portal select.form-control,
body.page-portal textarea.form-control {
    border: 1px solid var(--acs-line);
    border-radius: var(--acs-r-control);
    background: var(--acs-surface);
    color: var(--acs-text);
    font-size: 13.5px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.page-portal .form-control:focus {
    border-color: var(--acs-info);
    box-shadow: 0 0 0 3px rgba(20, 120, 190, .14);
    outline: none;
}

body.page-portal .form-control::placeholder {
    color: var(--acs-faint);
}

body.page-portal label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--acs-text);
    margin-bottom: 5px;
}

body.page-portal .input-group-text {
    border: 1px solid var(--acs-line);
    border-radius: var(--acs-r-control);
    background: var(--acs-line-soft);
    color: var(--acs-muted);
}

/* ============================================================
   Buttons
   ============================================================ */

body.page-portal .btn {
    border-radius: var(--acs-r-btn);
    font-weight: 700;
    font-size: 13px;
    padding: 9px 15px;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

body.page-portal .btn:hover {
    transform: translateY(-1px);
}

body.page-portal .btn:active {
    transform: none;
}

body.page-portal .btn-sm {
    padding: 6px 11px;
    font-size: 12px;
}

body.page-portal .btn-primary {
    background: var(--acs-info);
    border-color: var(--acs-info);
    box-shadow: 0 6px 16px rgba(20, 120, 190, .24);
}

body.page-portal .btn-primary:hover,
body.page-portal .btn-primary:focus {
    background: #0f5e97;
    border-color: #0f5e97;
}

body.page-portal .btn-success {
    background: var(--acs-success);
    border-color: var(--acs-success);
    box-shadow: 0 6px 16px rgba(60, 170, 50, .24);
}

body.page-portal .btn-success:hover,
body.page-portal .btn-success:focus {
    background: #2f8c27;
    border-color: #2f8c27;
}

body.page-portal .btn-danger {
    background: var(--acs-danger);
    border-color: var(--acs-danger);
}

body.page-portal .btn-outline-secondary {
    background: var(--acs-surface);
    border-color: var(--acs-line);
    color: var(--acs-text);
}

body.page-portal .btn-outline-secondary:hover,
body.page-portal .btn-outline-secondary:focus {
    background: var(--acs-surface);
    border-color: var(--acs-info);
    color: var(--acs-info);
}

/* ============================================================
   Badges / alerts
   ============================================================ */

body.page-portal .badge {
    border-radius: var(--acs-r-pill);
    font-weight: 700;
    font-size: 11.5px;
    padding: 4px 10px;
}

body.page-portal .badge-success { background: var(--acs-success-bg); color: #1e6b1a; }
body.page-portal .badge-danger { background: var(--acs-danger-bg); color: #9f1239; }
body.page-portal .badge-warning { background: var(--acs-warning-bg); color: #92400e; }
body.page-portal .badge-info,
body.page-portal .badge-primary { background: var(--acs-info-bg); color: #1e40af; }

body.page-portal .alert {
    border-radius: var(--acs-r-card);
    border-width: 1px;
    font-size: 13.5px;
}

/* ============================================================
   Modals
   ============================================================ */

body.page-portal .modal-content {
    border: 0;
    border-radius: var(--acs-r-card);
    box-shadow: var(--acs-shadow-raised);
}

body.page-portal .modal-header,
body.page-portal .modal-footer {
    border-color: var(--acs-line-soft);
    padding: 15px 18px;
}

body.page-portal .modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--acs-ink);
}

/* ============================================================
   Auth / login  (Portal/Login.aspx — body.page-portal-auth)
   ============================================================ */

body.page-portal-auth {
    background: var(--acs-page);
    /* Africa Cloud Space brand, sampled from the logo: deep blue behind the login
       vector, orange as the single action colour. */
    --acs-auth-panel: #1D1C9D;
    --acs-auth-accent: #F17429;
    --acs-auth-accent-dark: #d8641d;
}

body.page-portal-auth .hk-auth-wrapper {
    background: var(--acs-page);
}

/* ---------- Column order ----------
   The brief is form-left / panel-right, but the markup has the panel first because the
   form column carries a dozen runat="server" controls inside form1 and a two-step
   progressive-disclosure flow. Reordering that markup risks the postback; reordering a
   flex row does not. Bootstrap's .row is already flex, so this is purely visual and no
   control moves.

   Below the xl breakpoint the panel is hidden anyway (see the display:none rule in
   Portal/Login.aspx), so the order only matters where both columns are on screen. */
body.page-portal-auth .hk-auth-wrapper .row > .area_a {
    order: 2;
}

body.page-portal-auth .hk-auth-wrapper .row > .auth-form-wrap_ {
    order: 1;
}

/* ---------- The panel ----------
   The default is now the ACS vector (assets/img/acs-auth-vector.svg) rather than a
   photograph. background-image stays cascade-driven: getThemeSettings() rewrites
   .auth-cover-img on load, so a tenant on its own domain, or a platform image set in
   SuperAdmin, replaces the vector with no JavaScript change.

   background-color is what makes that work with a transparent vector - it is the tint
   the artwork reads against, and a tenant that sets only a colour still gets a branded
   panel with the ACS artwork on top. */
body.page-portal-auth .auth-cover-img {
    background-color: var(--acs-auth-panel, #1D1C9D);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}

/* The scrim div is gone from the markup now that the default is a flat vector rather
   than a photo. The rule is kept because a tenant background_image still needs it -
   getThemeSettings() does not add the element, but the markup keeps it for tenants
   whose slide is a photograph. */
body.page-portal-auth .auth-cover-img .bg-overlay {
    background: linear-gradient(135deg, rgba(10, 60, 90, .80) 0%, rgba(20, 120, 190, .70) 55%, rgba(40, 170, 220, .62) 100%);
}

/* A headline and a description, bottom-left, the way Cloudflare sets its sign-in
   copy. Both are cascade-driven the same way the panel image is: a default lives
   here in markup, and getThemeSettings() overwrites the description with .text()
   when a tenant or platform has set one. The headline is not customizable - only
   the description is, per the brief. */
body.page-portal-auth .auth-cover-img .acs-panel-copy {
    width: 100%;
    padding: 0 48px 8px;
    text-align: left;
}

body.page-portal-auth .auth-cover-img .acs-panel-title {
    margin: 0 0 10px;
    max-width: 22ch;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-shadow: 0 1px 18px rgba(4, 40, 55, .35);
}

body.page-portal-auth .auth-cover-img .acs-panel-desc {
    margin: 0;
    max-width: 34ch;
    color: rgba(255, 255, 255, .86);
    font-size: 14.5px;
    line-height: 1.55;
    font-weight: 400;
    text-shadow: 0 1px 12px rgba(4, 40, 55, .30);
}

/* Short "what this system does" points under the headline. */
body.page-portal-auth .acs-auth-points {
    list-style: none;
    margin: 22px auto 0;
    padding: 0;
    max-width: 380px;
    text-align: left;
    display: grid;
    gap: 10px;
}

body.page-portal-auth .acs-auth-points li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

/* Droplet-ish bullet: a circle pinched to a point at the top. */
body.page-portal-auth .acs-auth-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 11px;
    height: 11px;
    background: #7fd4f5;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

body.page-portal-auth .auth-cover-content h1 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff;
}

body.page-portal-auth .auth-cover-content p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

/* The sign-in card. The template ships this as bare content on the page
   background; giving it a real surface is what makes it read as modern. */
body.page-portal-auth .auth-form {
    background: var(--acs-surface);
    border: 1px solid var(--acs-line-soft);
    border-radius: 18px;
    box-shadow: var(--acs-shadow-raised);
    padding: 32px 30px;
}

body.page-portal-auth .auth-form h1 {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--acs-ink);
    margin-bottom: 8px;
}

body.page-portal-auth .auth-form > p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--acs-muted);
}

body.page-portal-auth .auth-form img {
    max-width: 100%;
    height: auto;
    margin-bottom: 4px;
}

/* The HK template pins the right-hand corners of auth inputs with a longhand,
   higher-specificity rule
   (.hk-pg-wrapper.hk-auth-wrapper .auth-form-wrap .auth-form .form-group .form-control),
   which beats the shorthand radius set above and leaves the field with two
   square corners. Restate all four corners at matching specificity. */
body.page-portal-auth .hk-pg-wrapper.hk-auth-wrapper .auth-form-wrap .auth-form .form-group .form-control,
body.page-portal-auth .auth-form .form-control {
    height: auto;
    padding: 11px 13px;
    font-size: 14px;
    border-top-left-radius: var(--acs-r-control);
    border-top-right-radius: var(--acs-r-control);
    border-bottom-right-radius: var(--acs-r-control);
    border-bottom-left-radius: var(--acs-r-control);
}

/* …except where a visible input-group addon is actually attached, where the
   inner edge must stay flat so the field and the addon read as one control. */
body.page-portal-auth .auth-form .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* The markup carries .btn-success, which is Bootstrap green. Restyled here rather
   than changed in the markup, so no control ID or class list moves.

   Orange is the ACCENT, not the button. White on #F17429 measures 2.9:1, which
   fails WCAG AA for normal text (4.5:1) and even the 3:1 large-text floor; white
   on the ACS blue measures 12.4:1. So the blue takes the button and the orange
   does the work it can do safely - the vector's needle, focus rings, and hover
   detail, where contrast is not carrying meaning. */
body.page-portal-auth .auth-form .btn-block,
body.page-portal-auth .auth-form .btn-success {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: var(--acs-auth-panel);
    border-color: var(--acs-auth-panel);
    box-shadow: 0 8px 20px rgba(29, 28, 157, .28);
}

body.page-portal-auth .auth-form .btn-block:hover,
body.page-portal-auth .auth-form .btn-block:focus,
body.page-portal-auth .auth-form .btn-success:hover,
body.page-portal-auth .auth-form .btn-success:focus {
    color: #ffffff;
    background: #15147a;
    border-color: #15147a;
}

body.page-portal-auth .footer {
    font-size: 12.5px;
    color: var(--acs-muted);
}

body.page-portal-auth .footer a {
    color: var(--acs-info);
    font-weight: 600;
}

/* Server-rendered status labels on the login page carry inline colours set in
   the .aspx. Only shape and rhythm are adjusted so those inline colours — and
   the code-behind that toggles Visible — keep working exactly as before. */
body.page-portal-auth #lblnames,
body.page-portal-auth #lblError {
    border-radius: var(--acs-r-control);
    padding: 9px 12px !important;
    border-bottom: 0 !important;
    background: var(--acs-line-soft);
    font-size: 13px;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
    body.page-portal .hk-pg-header .hk-pg-title { font-size: 19px; }
    body.page-portal .card-body { padding: 14px; }
    body.page-portal-auth .auth-form { padding: 24px 20px; }
    body.page-portal-auth .auth-form h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    body.page-portal .btn { transition: none; }
    body.page-portal .btn:hover { transform: none; }
}