/* ============================================================================
   Uni B Agency — 2026 Brand Override Layer
   ----------------------------------------------------------------------------
   Sits on top of the Ruby theme's main.css for the backend, customer and
   frontend apps. Registered AFTER main.css (see RubyBase::_view) so every rule
   here wins on source-order; brand-critical rules additionally use !important
   to defeat the theme's dynamic inline :root variables.

   Palette (60 / 30 / 10):
     60% base   -> Deep Navy   #191D33  (sidebars, header bars, strong shells)
     30% balance-> White / Cream #FFEFD7 / Light Grey #D9D9D9
     10% accent -> Uni B Orange #F56000 (CTAs, active states, focus, highlights)
   ============================================================================ */

:root {
    --navy:           #191D33;
    --orange:         #F56000;
    --orange-hover:   #d94f00;
    --grey:           #D9D9D9;
    --cream:          #FFEFD7;
    --black:          #000000;
    --white:          #FFFFFF;
    --font-primary:   'Poppins', sans-serif;
    --font-secondary: Arial, Helvetica, sans-serif;
}

/* ===========================================================================
   1. TYPOGRAPHY  —  Poppins everywhere, explicit weights on structural text
   =========================================================================== */
body,
html,
p,
a,
button,
input,
select,
textarea,
.box,
.panel,
.form-control {
    font-family: var(--font-primary);
}

h1, h2, h3,
.content-header > h1,
.box-title,
.sidebar .sidebar-menu > li > a {
    font-family: var(--font-primary) !important;
}

h1, h2, h3 { font-weight: 700; }
.content-header > h1 { font-weight: 600; }

/* Dashboard summary numbers / KPI counters */
.small-box h3,
.info-box-number,
.box-dashboard .number,
.box-dashboard .info .number a,
.box-dashboard .progress-box .info .number a {
    font-family: var(--font-primary) !important;
    font-weight: 800 !important;
}

/* Primary navigation / menu links */
.sidebar .sidebar-menu > li > a,
.navbar-nav > li > a {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
}

/* Secondary-font utility, per brand guide */
.font-secondary { font-family: var(--font-secondary) !important; }

/* ===========================================================================
   2. LAYOUT SHELL  —  Navy sidebar + header, orange active accents
   =========================================================================== */

/* Sidebar + top header bars => Deep Navy (60% base) */
.main-sidebar,
aside.main-sidebar,
.left-side {
    background-color: var(--navy) !important;
}
.main-header .navbar,
.wrapper nav.navbar,
.navbar.navbar-static-top {
    background-color: var(--navy) !important;
    box-shadow: none !important;
}
.sidebar,
.sidebar .user-panel {
    background-color: transparent !important;
}

/* Top navbar icons / links readable on navy */
.main-header .navbar .nav > li > a {
    color: var(--white) !important;
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus {
    color: var(--orange) !important;
    background-color: rgba(245, 96, 0, 0.10) !important;
}

/* Sidebar links: kill the theme's gradient text-clip, force solid white */
.sidebar .sidebar-menu > li > a,
.sidebar .user-panel > .info > p {
    color: var(--white) !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--white) !important;
    border-radius: 4px !important;
    transition: all 0.25s ease;
    position: relative;
}
.sidebar .sidebar-menu li a i,
.sidebar .sidebar-menu li a i:first-child {
    color: var(--cream) !important;
}

/* Hover / active state: orange indicator line + soft orange wash */
.sidebar .sidebar-menu > li:hover > a,
.sidebar .sidebar-menu > li.active > a {
    color: var(--white) !important;
    background-color: rgba(245, 96, 0, 0.14) !important;
}
.sidebar .sidebar-menu > li:hover > a::before,
.sidebar .sidebar-menu > li.active > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 4px;
    background: var(--orange);
}
.sidebar .sidebar-menu > li:hover > a i,
.sidebar .sidebar-menu > li.active > a i {
    color: var(--orange) !important;
}

/* ===========================================================================
   3. BUTTONS  —  Flat, modern, orange primary CTA (10% accent)
   =========================================================================== */
.btn {
    border-radius: 4px !important;
    transition: all 0.25s ease-in-out !important;
}
.btn.btn-primary,
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    background: var(--orange) !important;
    background-image: none !important;   /* strip legacy gradients */
    border-color: var(--orange) !important;
    color: var(--white) !important;
    box-shadow: none !important;          /* strip heavy legacy shadows */
    text-shadow: none !important;
}
.btn.btn-primary:hover,
.btn-primary:hover {
    background: var(--orange-hover) !important;
    border-color: var(--orange-hover) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(245, 96, 0, 0.35) !important;
    transform: translateY(-1px);
}

/* ===========================================================================
   4. FORM INPUTS  —  Grey border, crisp orange focus
   =========================================================================== */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
    border: 1px solid var(--grey) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-family: var(--font-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 2px rgba(245, 96, 0, 0.15) !important;
    outline: none !important;
}

/* ===========================================================================
   5. CONTAINERS  —  Sharp, modern radii (2–4px)
   =========================================================================== */
.box,
.panel,
.info-box,
.small-box,
.modal-content,
.nav-tabs-custom,
.dropdown-menu,
.alert,
.well,
.table-responsive {
    border-radius: 4px !important;
}
.box {
    border-top-width: 2px;
}

/* ===========================================================================
   6. LOGO  —  "uni-b mailer" text-and-mark composite
   =========================================================================== */
.unib-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 18px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.unib-brand:hover,
.unib-brand:focus {
    text-decoration: none;
}
.unib-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    background: var(--orange);
    color: var(--white);
    font-size: 18px;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(245, 96, 0, 0.30);
}
.unib-brand-text {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.unib-brand-name { color: var(--white); }
.unib-brand-sub {
    color: var(--orange);
    margin-left: 5px;
    font-weight: 600;
}

/* Collapsed (mini) sidebar: keep the mark, hide the wordmark gracefully */
.sidebar-collapse .unib-brand-text { display: none; }
.sidebar-collapse .unib-brand {
    justify-content: center;
    padding: 18px 0;
}

/* ===========================================================================
   7. RESPONSIVE  —  keep tables, graphs & editors uncluttered on mobile
   =========================================================================== */
@media (max-width: 991px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: none;
    }
    /* Stop wide composers / automation canvases from blowing out the viewport */
    .gjs-editor,
    .automation-canvas,
    .cke,
    .cke_editor,
    .CodeMirror,
    .grapesjs-container {
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .content-header > h1 { font-size: 20px; }
    .box,
    .panel { border-radius: 4px !important; }
    .unib-brand { padding: 16px 14px; }
    .unib-brand-text { font-size: 18px; }
    .btn { width: auto; }
}

/* ============================================================================
   Uni B Agency — Shared public landing component library (.unib-landing scoped)
   Reused by the marketing sub-pages (features / pricing / legal). The scope
   keeps every rule isolated from the backend & customer dashboards.
   ============================================================================ */
.unib-landing {
    --navy:   #191D33;
    --orange: #F56000;
    --orange-d: #d94f00;
    --grey:   #D9D9D9;
    --cream:  #FFEFD7;
    --white:  #FFFFFF;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    color: var(--navy);
    line-height: 1.6;
    overflow-x: hidden;
}
.unib-landing * { box-sizing: border-box; }
.unib-landing img { max-width: 100%; }
.unib-landing h1, .unib-landing h2, .unib-landing h3, .unib-landing h4 { font-family: 'Poppins', sans-serif; margin: 0; line-height: 1.15; }
.unib-landing p { margin: 0; }
.unib-landing a { text-decoration: none; }
.unib-landing .u-container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* Sections / background anchors */
.unib-landing .u-section { padding: 100px 0; }
.unib-landing .u-bg-white { background: var(--white); }
.unib-landing .u-bg-cream { background: var(--cream); }
.unib-landing .u-bg-navy  { background: var(--navy); color: var(--white); }

/* Buttons */
.unib-landing .u-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px;
    padding: 15px 30px; border-radius: 4px; cursor: pointer; border: 2px solid transparent;
    transition: all .25s ease-in-out;
}
.unib-landing .u-btn-primary { background: var(--orange); color: var(--white); }
.unib-landing .u-btn-primary:hover { background: var(--orange-d); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245,96,0,.35); }
.unib-landing .u-btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.unib-landing .u-btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.unib-landing .u-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Generic hero (navy anchor) */
.unib-landing .u-hero {
    background: var(--navy);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(245,96,0,.18), transparent 38%),
        radial-gradient(circle at 85% 0%, rgba(245,96,0,.10), transparent 40%);
    color: var(--white); padding: 170px 0 100px; text-align: center;
}
.unib-landing .u-hero .u-eyebrow {
    display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: var(--orange); background: rgba(245,96,0,.12); padding: 7px 16px; border-radius: 40px; margin-bottom: 24px;
}
.unib-landing .u-hero h1 { font-size: 52px; font-weight: 800; letter-spacing: -1px; max-width: 860px; margin: 0 auto; }
.unib-landing .u-hero h1 .u-accent { color: var(--orange); }
.unib-landing .u-hero p.u-sub { font-size: 20px; font-weight: 400; color: rgba(255,255,255,.78); max-width: 700px; margin: 26px auto 0; }

/* Section heading */
.unib-landing .u-section-head { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.unib-landing .u-section-head h2 { font-size: 38px; font-weight: 700; letter-spacing: -.5px; }
.unib-landing .u-section-head p { font-size: 18px; color: #5a5f70; margin-top: 16px; }

/* Prominent CTA band — used at the foot of every sub-page */
.unib-landing .unib-cta-band {
    background: var(--navy);
    background-image: linear-gradient(120deg, rgba(245,96,0,.18), transparent 60%);
    color: var(--white); text-align: center; padding: 80px 0;
}
.unib-landing .unib-cta-band h2 { font-size: 38px; font-weight: 800; letter-spacing: -.5px; }
.unib-landing .unib-cta-band p { font-size: 18px; color: rgba(255,255,255,.74); max-width: 600px; margin: 16px auto 32px; }

/* Reusable cards / split grids */
.unib-landing .u-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.unib-landing .u-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.unib-landing .u-card {
    background: var(--white); border: 1px solid #ececf1; border-radius: 6px; padding: 38px 32px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.unib-landing .u-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(25,29,51,.10); }
.unib-landing .u-card .u-ico {
    width: 54px; height: 54px; border-radius: 4px; background: var(--navy); color: var(--orange);
    display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 22px;
}
.unib-landing .u-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.unib-landing .u-card p { font-size: 16px; color: #5a5f70; }

/* Responsive */
@media (max-width: 991px) {
    .unib-landing .u-grid-2,
    .unib-landing .u-grid-3 { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
    .unib-landing .u-hero h1 { font-size: 40px; }
    .unib-landing .u-section { padding: 70px 0; }
}
@media (max-width: 575px) {
    .unib-landing .u-hero { padding: 130px 0 70px; }
    .unib-landing .u-hero h1 { font-size: 32px; }
    .unib-landing .u-hero p.u-sub { font-size: 17px; }
    .unib-landing .u-section-head h2,
    .unib-landing .unib-cta-band h2 { font-size: 28px; }
    .unib-landing .u-btn { width: 100%; }
}

/* ----------------------------------------------------------------------------
   Full-width fix. The theme's app.js adds Bootstrap's `.container`
   (max-width:1140px) to #main on load, boxing in our full-width marketing
   pages. Neutralize it ONLY on our hardcoded landing pages (matched by the
   body controller/action classes) so other frontend pages — articles, lists,
   CMS — keep their normal container.
   ---------------------------------------------------------------------------- */
.ctrl-site.act-index #main.container,
.ctrl-features #main.container,
.ctrl-pricing #main.container,
.ctrl-legal #main.container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.unib-landing { width: 100%; max-width: 100%; }

/* Footer brand logo — scale down (theme ships it oversized) */
.footer .mb-4 img,
.footer a img.mw-100 {
    max-height: 40px;
    width: auto;
}

/* ============================================================================
   DASHBOARD REBRAND (backend + customer)
   The Ruby theme ships a purple/blue accent (#bd59d4 / #4b2354 / #00a8ff).
   Those live in CSS custom properties the theme sets on :root via a dynamic
   <style>. Redefining them on <body> (a closer ancestor) overrides EVERY
   accent at once — dashboard numbers, links, active nav, icons, gradients —
   without hunting element by element.
   ============================================================================ */
body {
    --primary-light:          #F56000 !important;   /* was #bd59d4 (purple)  */
    --primary-light-faint:    rgba(245, 96, 0, 0.14) !important;
    --primary-light-gradient: rgba(245, 96, 0, 0.85) !important;
    --primary-dark:           #191D33 !important;    /* was #4b2354 (purple) */
    --primary-dark-gradient:  rgba(25, 29, 51, 0.55) !important;
    --mz-primary:             #F56000 !important;
    --mz-light-primary:       rgba(245, 96, 0, 0.14) !important;
    --secondary-light:        rgba(245, 96, 0, 0.55) !important; /* was blue */

    /* Dark-mode accents, kept on-brand too */
    --dark-mode-primary-light:       #F56000 !important;
    --dark-mode-primary-dark:        #ff9a5c !important;
    --dark-mode-primary-light-faint: rgba(245, 96, 0, 0.18) !important;
}

/* Links: solid orange, navy on hover (kill the purple gradient link colour) */
.content-wrapper a:not(.btn):not(.nav-link):not(.label):not(.badge) {
    color: var(--orange) !important;
}
.content-wrapper a:not(.btn):not(.nav-link):hover {
    color: var(--navy) !important;
}

/* Grid table headers were purple — make them navy for readability */
.content-wrapper table thead th,
.content-wrapper table thead th a,
.table > thead > tr > th { color: var(--navy) !important; }

/* Primary CTAs that ship green (e.g. the price-plan "Purchase" button) -> orange */
.btn-success,
.btn.btn-success,
.btn-success:focus,
.btn-success:active {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-success:hover,
.btn.btn-success:hover {
    background: var(--orange-hover) !important;
    border-color: var(--orange-hover) !important;
}

/* Sharpen grid filter inputs / selects / pagination to the 4px brand radius */
.content-wrapper .form-control,
.content-wrapper select,
.content-wrapper .pagination > li > a,
.content-wrapper .pagination > li > span {
    border-radius: 4px !important;
}

/* Price-plan cards (customer subscribe page): airy spacing + orange price tag */
.content-wrapper .box .label,
.price-plan-box .label { background: var(--orange) !important; color: #fff !important; }

/* On-brand login / register background — replace the theme's stock photo with a
   Deep Navy field + subtle orange glow (overrides the inline background-image). */
.login-billboard,
.login-page .login-billboard,
.register-page .login-billboard {
    background-image:
        radial-gradient(circle at 18% 22%, rgba(245, 96, 0, 0.28), transparent 42%),
        radial-gradient(circle at 82% 82%, rgba(245, 96, 0, 0.14), transparent 45%),
        linear-gradient(140deg, #191D33, #0f1120) !important;
    background-color: #191D33 !important;
    background-size: cover !important;
}
.login-page .login-box-body,
.register-page .login-box-body { border-radius: 6px !important; }
.login-page .login-box-msg { font-family: 'Poppins', sans-serif; font-weight: 700; }

/* "Sign in with Google" button — official-style white button with the Google
   mark. Recognizable and neutral, sits well against the navy/white login card. */
.btn-google-signin {
    background: #ffffff !important;
    color: #3c4043 !important;
    border: 1px solid #dadce0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15) !important;
    margin-right: 6px;
}
.btn-google-signin:hover,
.btn-google-signin:focus {
    background: #f7f8f8 !important;
    color: #202124 !important;
    border-color: #d2d3d4 !important;
}
.btn-google-signin .fa-google { color: #4285F4 !important; margin-right: 4px; }