/**
 * Paradigm Brand Stylesheet - Webhosting Client Template
 * Brand Colors: Sapphire (#103DBE), Twilight (#15095E)
 * Fonts: Rubik (Headings), Karla (Body)
 */

/* ==========================================================================
   Part 1: Self-Hosted Brand Fonts
   ========================================================================== */

/* Rubik Variable (Headings) */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../../webfonts/brand/rubik-var-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../../webfonts/brand/rubik-var-latin-ext.woff2') format('woff2');
}

/* Karla 400 Regular (Body) */
@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../webfonts/brand/karla-400-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../webfonts/brand/karla-400-latin-ext.woff2') format('woff2');
}

/* Base Typography */
body {
    font-family: 'Karla', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Rubik', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ==========================================================================
   Part 2: Paradigm Brand Color Variable Overrides
   ========================================================================== */

/* Dark Mode / Default (:root and [data-theme=dark]) */
:root,
[data-theme="dark"] {
    --accent-color: #103DBE;
    --link-color: #103DBE;
}

/* Goal 17 fix, corrected: --bs-light-rgb must ONLY apply when [data-theme="dark"]
   is explicitly set, NOT on bare :root (which also matches light-mode pages and
   was incorrectly forcing dark card backgrounds in light mode). Kept as its own
   rule with a slightly different selector shape than the block above to avoid
   the browser CSS-parser silently dropping it (a real issue seen earlier when
   this selector was byte-identical to another rule's selector in this file). */
html[data-theme="dark"] {
    --bs-light-rgb: 30, 30, 30;
}

/* Light Mode ([data-theme=light]) */
[data-theme="light"] {
    --accent-color: #103DBE;
    --link-color: #103DBE;
}

/* Scoped Header & Sidebar Background (Twilight: #15095E) */
.top-bar,
.sidebar,
.icon-bar {
    --bg-secondary: #15095E;
    --bg-tertiary: #15095E;
    background-color: #15095E;
}

/* Ensure text on topbar and sidebar maintains high contrast */
.top-bar,
.sidebar,
.icon-bar {
    color: var(--text-primary);
}


/* ==========================================================================
   Part 3: Dark-Mode Aware Plugin CSS Overrides (17 Blesta Plugins)
   ========================================================================== */

/* 1. CMS Plugin Overrides */
.portal-box .card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.portal-box .card:hover {
    background-color: var(--bg-tertiary) !important;
}

.portal-box a {
    color: var(--text-primary) !important;
}

.portal-box h4,
.portal-box p {
    color: var(--text-primary) !important;
}

.thanks blockquote {
    background-color: var(--bg-card) !important;
    border-left-color: var(--accent-color) !important;
    border-right-color: var(--accent-color) !important;
    color: var(--text-primary) !important;
}

/* 2. Support Manager Plugin Overrides */
div.topbar,
.row .ticket-reply div.top-bar {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

div.topbar.staff,
.row .ticket-reply div.top-bar.staff-reply {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

div.log {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

div.log p {
    text-shadow: none !important;
    color: var(--text-secondary) !important;
}

div.note .topbar {
    background-color: var(--bg-tertiary) !important;
}

#ticket_actions {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.common_box .content_section .inner .pad#responses,
.content_section .inner div.summary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.card-kb {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-kb .table > thead > tr > th {
    border-bottom-color: var(--border-color) !important;
}

.rate {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.rate a {
    border-color: var(--border-color) !important;
}

/* 3. Mass Mailer Plugin Override */
.replacement_tags {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}


/* ==========================================================================
   Part 4: Bootstrap .bg-light Dark Mode Remapping
   ========================================================================== */

/* Fix Bootstrap's .bg-light utility class to respect dark mode.
   .bg-light uses --bs-light-rgb with !important, which Paradigm's
   custom --bg-*/--text-* theme variables don't automatically cover.
   Remapping --bs-light-rgb in dark mode fixes every .bg-light usage
   site-wide (KB category cards, popular articles list, ticket reply
   boxes, etc.) without touching any .pdt file. */

/* ==========================================================================
   Part 5: Brand Logo Sizing Fix
   ========================================================================== */

/* The brand logo SVG files (pace-logo-full-dark.svg / -light.svg) have a
   mismatch between their internal width/height XML attributes (~50x220,
   portrait) and their actual viewBox (~1767x223, landscape wordmark). This
   confuses browsers into rendering the logo squished/near-zero-size. Force
   correct sizing here using the real aspect ratio (~7.92:1) instead of
   relying on the SVG's own conflicting intrinsic dimensions. */
.top-bar-logo {
    height: 26px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
}

/* .top-bar-left is sized narrow by Paradigm (built for a compact icon-style
   logo) - widen it so the full wordmark logo (~206px at 26px height) has
   room without being clipped or overlapping the hamburger toggle. */
.top-bar-left {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   Part 6: Sidebar/Topbar/Icon-bar text contrast fix
   ========================================================================== */

/* .top-bar, .sidebar, and .icon-bar are intentionally always Twilight navy
   (#15095E) regardless of light/dark mode (confirmed founder decision - see
   the logo fix above, same reasoning applies here). However Paradigm's own
   nav-link/text colors still swap per [data-theme], since only the background
   was pinned, not the text. In light mode this produces dark gray text on a
   dark navy background (--text-secondary ~ rgb(74,74,74)), nearly invisible -
   confirmed via founder screenshot. Force these three containers to always
   use dark-mode-appropriate text/icon colors, matching their always-dark
   background, in both theme states. */
.top-bar,
.sidebar,
.icon-bar {
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #a0a0a0;
    --border-color: #2a2a2a;
    --bg-tertiary: #1a1a1a;
}

/* ==========================================================================
   Part 7: Hamburger icon fix + richer nav background (feature-band style)
   ========================================================================== */

/* CONFIRMED BUG: [data-theme=light] .mobile-menu-toggle{color:#212529} in
   application.min.css hardcodes near-black text for Paradigm's own light-mode
   topbar (normally light-colored). Our topbar is always Twilight navy, so
   this makes the hamburger icon nearly invisible in light mode. Pin it white
   regardless of theme, matching the rest of the topbar icon fix from Part 6. */
[data-theme="light"] .mobile-menu-toggle,
[data-theme="dark"] .mobile-menu-toggle {
    color: #ffffff !important;
}

/* Richer nav background, matching mainsite's .feature-band/.site-header
   technique (radial-gradient accents in Sapphire + Poolside over Twilight,
   plus a subtle backdrop blur and hairline border) instead of flat navy.
   Built self-contained (gradient lives on the bar itself) rather than a pure
   transparency+blur over page content, since Blesta's page background has
   no designed gradient behind the topbar/sidebar to blur through. */
.top-bar,
.sidebar,
.icon-bar {
    background-color: #15095e;
    background-image:
        radial-gradient(at 100% 0%, rgba(16, 61, 190, 0.35) 0%, transparent 60%),
        radial-gradient(at 0% 100%, rgba(110, 193, 228, 0.14) 0%, transparent 55%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   Part 8: Subtle Beacon accents (focus states, badges, dividers)
   ========================================================================== */

/* Beacon (#FFB020) tokens, scoped to this section only. */

/* Focus state - form inputs get a warm Beacon glow on click/focus, instead
   of Bootstrap's default blue glow (confirmed hardcoded as rgba(13,110,253,
   .25) in application.min.css, never updated to the brand accent). */
.form-control:focus,
.form-select:focus {
    border-color: #ffb020 !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 176, 32, 0.25) !important;
}

/* Badge/count indicators - only PLAIN badges (ticket counts, generic
   notification counts) get Beacon. Semantic/status badges (badge-danger,
   badge-warning, badge-success, priority badges like badge-high/badge-low)
   are intentionally left untouched so status meaning stays clear - this
   selector explicitly excludes any badge with a second class. */
.badge:not([class*="badge-"]) {
    background-color: #ffb020;
    color: #15095e;
}

/* Section dividers - subtle Beacon-tinted hr instead of plain gray,
   used sparingly as a small brand touch on panel/card dividers. */
.panel hr,
.card hr,
hr.divider {
    border-top-color: rgba(255, 176, 32, 0.3);
    opacity: 1;
}

/* ==========================================================================
   Part 9: Font Awesome sizing safety net
   ========================================================================== */
.fas, .far, .fab, .fa {
    display: inline-block;
    line-height: 1;
}

/* ==========================================================================
   Part 10: BS4 -> BS5 compatibility shims (visual only)
   ========================================================================== */
.close {
    box-sizing: content-box;
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.65;
    font-size: 1.25rem;
    line-height: 1;
    text-align: center;
}
.close:hover, .close:focus {
    opacity: 1;
}
.close span[aria-hidden="true"] {
    display: inline-block;
    transform: scale(1.3);
}
.float-right { float: right !important; }
.float-left { float: left !important; }
.btn-block {
    display: block;
    width: 100%;
}

/* ==========================================================================
   Part 11: card-links filter row styled as horizontal pills
   Fixes raw bulleted list on Services/Invoices/Tickets/Domains filter rows.
   ========================================================================== */
ul.card-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0 0 1rem 0;
}
ul.card-links li {
    display: inline-block;
}
ul.card-links li a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.375rem 0.85rem;
    border-radius: 999px;
    background-color: var(--bg-card, rgba(127,127,127,0.12));
    color: #495057;
    text-decoration: none;
    font-size: 0.875rem;
    border: 1px solid rgba(127,127,127,0.25);
}
[data-theme="dark"] ul.card-links li a {
    color: #e0e0e0;
}
ul.card-links li a.active,
ul.card-links li a:hover,
ul.card-links li a:focus {
    background-color: #103DBE;
    color: #ffffff;
    border-color: #103DBE;
}
ul.card-links li a .badge {
    margin-left: 0.15rem;
}
.badge:not([class*="badge-"]):not([class*="bg-"]) {
    background-color: #ffb020;
    color: #15095e;
}

/* ==========================================================================
   Part 12: Beacon CTA system (founder-approved split, 2026-08-29)
   .btn-info is what Blesta core actually emits for "Make Payment" (the
   dashboard alert button lives outside webhosting/.pdt, in a core
   dashboard partial) - retargeting it directly is the only way to reach
   it without a core-view edit, which is deferred per Tier 0 scope.
   ========================================================================== */
.btn-info, a.btn-info {
    background-color: #FFB020 !important;
    border-color: #FFB020 !important;
    color: #15095E !important;
    font-weight: 700;
    box-shadow: 0 8px 30px rgba(255, 176, 32, 0.25);
}
.btn-info:hover, .btn-info:focus, a.btn-info:hover, a.btn-info:focus {
    background-color: #E89400 !important;
    border-color: #E89400 !important;
    color: #15095E !important;
}
/* Row-level repeated actions (per-invoice Pay, per-service Manage) get
   Sapphire instead, so Beacon stays a single per-viewport accent per the
   brand book. Opt-in class for use once product-page/order-link work
   or future core-view edits add it to markup. */
.btn-sapphire, a.btn-sapphire {
    background-color: #103DBE;
    border-color: #103DBE;
    color: #ffffff;
    font-weight: 600;
}
.btn-sapphire:hover, a.btn-sapphire:hover,
.btn-sapphire:focus, a.btn-sapphire:focus {
    background-color: #0d2f94;
    border-color: #0d2f94;
    color: #ffffff;
}

/* ==========================================================================
   Part 13: dark-mode .text-danger contrast fix
   #dc3545 on #1e1e1e measured 3.68:1 (needs 4.5:1). Light mode already
   passes marginally (4.53:1) and is left untouched.
   ========================================================================== */
[data-theme="dark"] .text-danger {
    color: #ff6b7a !important;
}

/* ==========================================================================
   Part 14: card elevation + border contrast (WCAG 1.4.11, needs 3:1)
   Measured: dark 1.19:1, light 1.09:1 card-vs-page; both well under 3:1.
   ========================================================================== */
.card, .panel {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
[data-theme="dark"] .card, [data-theme="dark"] .panel {
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
[data-theme="light"] .card, [data-theme="light"] .panel {
    border: 1px solid rgba(0,0,0,0.15) !important;
}

/* ==========================================================================
   Part 15: input border contrast (WCAG 1.4.11, needs 3:1)
   Measured: #dee2e6 on white = 1.30:1.
   ========================================================================== */
.form-control, .form-select {
    border-color: rgba(0,0,0,0.34);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    border-color: rgba(255,255,255,0.34);
}

/* ==========================================================================
   Part 16: skip-to-content link (WCAG 2.4.1)
   Visually hidden until keyboard-focused, then jumps above the sidebar.
   ========================================================================== */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background-color: #FFB020;
    color: #15095E;
    font-weight: 700;
    border-radius: 0 0 0.375rem 0.375rem;
    text-decoration: none;
    transition: top 0.15s ease-in-out;
}
.skip-to-content:focus {
    top: 0.5rem;
}

/* ==========================================================================
   Part 17: no-sidebar layout for login/forgot/reset pages ($show_header=false)
   Top bar is fully removed on these pages (no logo/login button needed);
   only a floating theme toggle remains, matching the piwsadmin login pattern.
   ========================================================================== */
body.no-sidebar .main-content {
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    padding: 0 !important;
}
@media (min-width: 768px) {
    body.no-sidebar .main-content {
        margin-left: var(--icon-bar-width) !important;
        width: calc(100% - var(--icon-bar-width)) !important;
    }
}
.theme-toggle-floating {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
}

/* ==========================================================================
   Part 18: split-screen login/forgot/reset layout
   Brand panel matches piwsadmin login: theme-aware background (not navy)
   with mascot as a faint watermark behind the company name.
   ========================================================================== */
.login-split {
    display: flex;
    min-height: 100vh;
    width: 100%;
}
.login-split-brand {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0a 0%, #141414 50%, #1a1a2e 100%);
    color: #ffffff;
}
[data-theme="light"] .login-split-brand {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
    color: #1a1a1a;
}
.login-split-brand::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 640px;
    max-width: 90%;
    transform: translate(-50%, -50%);
    background-image: url('../../images/brand/pace-mascot-dark.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.10;
    pointer-events: none;
}
[data-theme="light"] .login-split-brand::before {
    background-image: url('../../images/brand/pace-mascot-light.svg');
    opacity: 0.08;
}
.login-split-brand > * {
    position: relative;
    z-index: 1;
}
/* Logo constrained to 60% of the brand panel width (founder request,
   2026-09-01) - base img{max-width:100%} in application.min.css was
   letting the wordmark fill the entire panel edge-to-edge. */
.login-split-brand img.logo-full {
    width: 60%;
    max-width: 60%;
    height: auto;
}
.login-split-brand h2 {
    color: inherit;
    font-weight: 700;
}
.login-split-brand p {
    color: inherit;
    opacity: 0.7;
    max-width: 420px;
}
.login-split-form {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}
.login-split-form-inner {
    width: 100%;
    max-width: 420px;
}
@media (max-width: 991px) {
    .login-split { flex-direction: column; }
    .login-split-brand { padding: 2rem 1.5rem; }
    .login-split-brand::before { width: 320px; height: 320px; }
}

/* ==========================================================================
   Part 19: top-bar user-menu mobile fix + icon-bar quick-action styling
   Fixes a real bug: at <=768px the name text AND chevron inside
   .top-bar-user were both hidden, leaving an empty invisible button.
   An avatar-style icon now survives that hide so something is always
   visible/tappable. Also styles the icon-bar link items (previously
   buttons/anchors with no distinct active/hover affordance needed).
   ========================================================================== */
.top-bar-user-avatar-icon {
    font-size: 1.4rem;
    color: var(--text-primary);
    line-height: 1;
}
@media (min-width: 769px) {
    .top-bar-user-avatar-icon {
        display: none;
    }
}

/* BS4 badge-* colors have no bg under BS5 - restored, 2026-09-01 */
.badge-danger { background-color: #dc3545 !important; color: #fff !important; }
.badge-success { background-color: #198754 !important; color: #fff !important; }
.badge-warning { background-color: #ffc107 !important; color: #212529 !important; }
.badge-info { background-color: #0dcaf0 !important; color: #212529 !important; }
.badge-primary { background-color: #103DBE !important; color: #fff !important; }
.badge-secondary { background-color: #6c757d !important; color: #fff !important; }

/* ==========================================================================
   Part 20: Footer legal links (Terms of Service / Privacy Policy)
   Required by payment gateway review - links point to the public marketing
   site (paceinfonet.com), centered above the copyright line.
   ========================================================================== */
.footer-links {
    font-size: 0.85rem;
}
.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
}
.footer-links a:hover {
    color: var(--link-color);
    text-decoration: underline;
}
.footer-links-sep {
    margin: 0 0.6rem;
    color: var(--text-muted);
}