.blgcomment-list>li:nth-child(n+2) {
    margin-block-start: 15px !important;
}
.custom-card {
    border: 1px solid #ced4da;
}
.customizer-action svg{
    width: 23px !important;
    color: #ffffff !important;
}
.active-mode{
    border: solid 2px #000000 !important;
}
.property-img{
    max-width: 507px;
    max-height: 286px;
}
.text-justify{
    text-align: justify;
}
.custom .media{
    padding: 10px !important;
}
.user-avatar{
    width: 30px;
    height: 30px;
}
@media only screen and (max-width: 410px) {
    .header_li {
        display: none !important;
    }
}
.blgcomment-list li .media img{
    width: auto;
    height: 40px !important;
}

#card-element {
    border: 1px solid #e5e5e5 !important;
    border-radius: 5px !important;
    padding: 13px !important;
}
 

.setting-logo{
    width:300px !important;;
}

.landing-logo{
    width: 180px !important;
}
.lan-footer .codex-brand{
    margin-block-end: 0px !important;
}
.email-sidebar ul.custom-sidebarmenu-list {
    margin-block-start: 0px;
}
.invoice-logo{
    width: 250px;
}

.codex-calendar .events-list li{
    font-size: 13px;
    font-weight: 500;
    padding: 10px 10px;
    border-radius: 5px;
    color: #fff;
    line-height: 1;
}
.codex-calendar .events-list{
    overflow: auto;
    height: 863px;
}
.landing_logo{
    filter: drop-shadow(2px 3px 7px #011C4B);
}
.head-invoice img{
    width: 250px;
}
.cdx-invoice .body-invoice .table tr td{
    padding: 10px 10px !important;
}
.small-group > div {
    width: unset;
}


.codex-brand img{
    width: 300px;
}
.codex-authbox .auth-header .codex-brand {
    margin-block-end: 0px;
}


.intro {
    background-repeat: no-repeat;
    background-size: cover;
}

.landing_dash {
    position: absolute;
    right: 0px;
    top: 50%;
    left: auto;
    bottom: 0;
    transform: translateY(-50%);
    overflow: hidden;
    height: 585px;
    display: flex;
    align-items: center;
    width: 60%;
}

.landing_dash img {
    object-fit: cover;
    position: relative;
    right: -220px;
    border-radius: 10px;
    left: auto;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 1440px) {
    .landing_dash {
        display: none;
    }
}

.lan-footer {
    text-align: center;
    background-color: unset;
}
.lan-footer .support-contain p {
    color: #051722;
    font-size: calc(16px + 4*(100vw - 420px) / 1500);
}
.codex-brand img{
	width:100px!important;
}
.codexbrand-logo img{
	width:90px!important;
	border-radius: 20px;
}

.landing-logo{
	width:50px !important;
}

/* CallPlay SaaS UI */
:root {
    --cp-primary: #635bff;
    --cp-primary-dark: #4f46e5;
    --cp-primary-soft: #eef2ff;
    --cp-success: #10b981;
    --cp-warning: #f59e0b;
    --cp-danger: #ef4444;
    --cp-info: #0ea5e9;
    --cp-ink: #172033;
    --cp-muted: #697386;
    --cp-line: #e6eaf0;
    --cp-canvas: #f5f7fb;
    --cp-card: #ffffff;
    --cp-sidebar: #111827;
    --cp-sidebar-muted: #94a3b8;
    --cp-radius-sm: 10px;
    --cp-radius: 16px;
    --cp-radius-lg: 24px;
    --cp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .04);
    --cp-shadow: 0 16px 40px rgba(31, 41, 55, .08);
}

* { box-sizing: border-box; }

body,
body.customizer-modal {
    background: var(--cp-canvas) !important;
    color: var(--cp-ink);
    font-family: "Inter", "Rubik", sans-serif !important;
    letter-spacing: -.01em;
}

a { text-decoration: none; }

.codex-loader { background: rgba(255, 255, 255, .92) !important; backdrop-filter: blur(8px); }

.codex-sidebar {
    width: 268px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(124,58,237,.22) 0%, rgba(124,58,237,0) 55%),
        linear-gradient(180deg, #111827 0%, #172033 100%) !important;
    border: 0 !important;
    box-shadow: 14px 0 40px rgba(17, 24, 39, .1);
}
/* Thin gradient seam on the sidebar's outer edge - a small premium detail
   separating it from the flat single-color rail it was before. */
.codex-sidebar::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
    background: linear-gradient(180deg, rgba(139,92,246,.55), rgba(79,70,229,0) 45%, rgba(79,70,229,0) 60%, rgba(45,212,191,.4));
    pointer-events: none;
}

.codex-sidebar .logo-gridwrap {
    height: 88px !important;
    padding: 20px 22px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
}

.cp-brand { display: flex; align-items: center; gap: 12px; color: #fff !important; max-width: 100%; }
/* Sidebar brand logo (wide asset): fit inside the existing 88px-tall
   .logo-gridwrap without changing its size - height-constrained with
   width:auto so the image's own aspect ratio is preserved exactly. */
.cp-brand-logo-wide { display: block; max-width: 100%; height: auto; width: auto; }
/* Sized per context so the sidebar's compact slot and the login page's
   more spacious brand areas each get an appropriately-scaled logo, without
   changing the size of the surrounding container itself. */
.codex-sidebar .cp-brand-logo-wide { max-height: 40px; }
.cp-auth-story .cp-brand-logo-wide { max-height: 52px; }
.cp-auth-mobile-brand .cp-brand-logo-wide { max-height: 44px; }
.cp-brand-mark {
    width: 42px; height: 42px; border-radius: 14px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    box-shadow: 0 10px 22px rgba(99, 91, 255, .32);
    color: #fff; font-weight: 800; font-size: 17px;
}
.cp-brand-copy strong { display: block; font-size: 17px; line-height: 1.1; color: #fff; }
.cp-brand-copy small { color: var(--cp-sidebar-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }

.codex-sidebar .sidebar-action { color: #fff !important; margin-left: auto; }
/* .icon-logo is the vendor theme's own slot for the collapsed (icon-only,
   72px-wide) sidebar state - shown/hidden natively via body.daactive-sidebar
   rules in style.css (~L13791). Only override padding/sizing here so the
   square logo fits the narrow rail; do not force display:none, that would
   block the existing collapse toggle from ever showing it. */
.codex-sidebar .icon-logo {
    height: 88px !important;
    padding: 12px 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    justify-content: center;
}
.cp-brand-logo-square { display: block; width: 40px; height: 40px; max-width: 100%; object-fit: contain; border-radius: 10px; }
.codex-menuwrapper { padding: 18px 14px 24px !important; height: calc(100vh - 88px) !important; }
.codex-menu { padding: 0 !important; }
.codex-menu .cdxmenu-title { margin: 20px 12px 8px !important; }
.codex-menu .cdxmenu-title:first-child { margin-top: 2px !important; }
.codex-menu .cdxmenu-title h5 {
    color: #64748b !important; font-size: 12px !important; font-weight: 800 !important;
    letter-spacing: .1em; text-transform: uppercase;
}
.codex-menu .menu-item { margin: 4px 0 !important; }
.codex-menu .menu-item > a {
    min-height: 46px; padding: 11px 13px !important; border-radius: 12px !important;
    color: #cbd5e1 !important; gap: 12px; transition: .2s ease;
}
.codex-menu .menu-item > a:hover { color: #fff !important; background: rgba(255, 255, 255, .07) !important; transform: translateX(2px); }
.codex-menu .menu-item.active > a {
    color: #fff !important; background: linear-gradient(135deg, rgba(139, 92, 246, .95), rgba(79, 70, 229, .95)) !important;
    box-shadow: 0 12px 26px rgba(79, 70, 229, .32), inset 0 1px 0 rgba(255,255,255,.16);
}
.codex-menu .menu-item .icon-item { min-width: 22px !important; }
.codex-menu .menu-item .icon-item svg { width: 19px !important; height: 19px !important; }
.cp-submenu-caret { width: 14px !important; height: 14px !important; flex-shrink: 0; }
.codex-menu .menu-item > a span { font-size: 13px !important; font-weight: 600 !important; }
.codex-menu .submenu-list { margin: 6px 0 10px 44px !important; padding-left: 12px !important; border-left: 1px solid rgba(255,255,255,.12); }
.codex-menu .submenu-list li a { color: #94a3b8 !important; font-size: 12px !important; padding: 8px 0 !important; }
.codex-menu .submenu-list li.active a, .codex-menu .submenu-list li a:hover { color: #fff !important; }
.cp-sidebar-profile {
    margin: 18px 4px 4px; padding: 14px; border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04);
    display: flex; align-items: center; gap: 10px;
}
.cp-sidebar-profile img { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; }
.cp-sidebar-profile strong { color: #fff; font-size: 12px; display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Scoped to the role-label span only (nested in the name/role <div>) - a
   plain ".cp-sidebar-profile span" also matched the avatar's initial-letter
   span, since it's a more specific selector than .cp-profile-avatar and
   silently shrank the initial back down to 10px. */
.cp-sidebar-profile > div span { color: #94a3b8; font-size: 10px; text-transform: capitalize; }

.codex-header {
    left: 268px !important; width: calc(100% - 268px) !important; height: 76px !important;
    background: rgba(255,255,255,.88) !important; backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(226,232,240,.85) !important; box-shadow: none !important;
}
.codex-header .header-contian { height: 76px !important; padding: 0 30px !important; }
.cp-page-context h1 { margin: 0; color: var(--cp-ink); font-size: 20px; font-weight: 750; }
.cp-page-context p { margin: 3px 0 0; color: var(--cp-muted); font-size: 12px; }
.cp-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--cp-line); border-radius: 999px; color: var(--cp-muted); font-size: 12px; font-weight: 600; background: #fff; }
.cp-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cp-success); box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
.codex-header .nav-profile .media { padding: 7px 10px !important; border-radius: 12px; transition: .2s; }
.codex-header .nav-profile .media:hover { background: #f3f4f6; }
.codex-header .nav-profile .user-icon img { width: 38px !important; height: 38px !important; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--cp-line); }
.codex-header .nav-profile .media-body .cp-profile-name { display: block; color: var(--cp-ink) !important; font-size: 12px !important; font-weight: 400; }
.codex-header .nav-profile .media-body span { color: var(--cp-muted) !important; font-size: 10px !important; text-transform: capitalize; }
.codex-header .hover-dropdown { border: 1px solid var(--cp-line) !important; border-radius: 14px !important; box-shadow: var(--cp-shadow) !important; overflow: hidden; }
.codex-header .hover-dropdown li a { padding: 11px 14px !important; font-size: 12px !important; }

.themebody-wrap { margin-left: 268px !important; padding-top: 76px !important; }
.theme-body { min-height: calc(100vh - 76px) !important; padding: 28px 30px 44px !important; }
.custom-container { max-width: 1540px !important; margin: 0 auto; padding: 0 !important; }
.codex-breadcrumb { margin: 0 !important; padding: 18px 30px 0 !important; background: transparent !important; }
.codex-breadcrumb:empty { display: none; }
.codex-breadcrumb .breadcrumb { background: transparent !important; }
.codex-breadcrumb h1 { font-size: 13px !important; font-weight: 600; margin: 0; }
.codex-breadcrumb .breadcrumb-item a { color: var(--cp-muted); }

.cp-page-hero {
    position: relative; overflow: hidden; margin-bottom: 22px; padding: 24px 26px;
    border-radius: var(--cp-radius-lg); color: #fff;
    /* Richer than a flat two-stop gradient: two soft glow layers (top-right
       white, bottom-left cyan) sit over a deeper 4-stop purple base, giving
       the banner more depth without adding any markup. */
    background:
        radial-gradient(circle at 82% -15%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 45%),
        radial-gradient(circle at 28% 130%, rgba(56,189,248,.24) 0%, rgba(56,189,248,0) 55%),
        linear-gradient(125deg, #2e1065 0%, #4338ca 42%, #7c3aed 82%, #a855f7 100%);
    box-shadow: 0 22px 46px rgba(79,70,229,.28), 0 2px 6px rgba(46,16,101,.18);
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.cp-page-hero::after { content: ""; position: absolute; width: 260px; height: 260px; right: -70px; top: -150px; border-radius: 50%; border: 48px solid rgba(255,255,255,.08); }
.cp-page-hero > * { position: relative; z-index: 1; }
.cp-page-hero h2 { margin: 0 0 6px; color: #fff; font-size: 24px; font-weight: 750; }
.cp-page-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; }
.cp-page-hero .btn { background: #fff !important; color: #4338ca !important; border-color: #fff !important; box-shadow: 0 10px 24px rgba(17,24,39,.16); }

.cp-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.cp-stat-card { padding: 18px; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); background: var(--cp-card); box-shadow: var(--cp-shadow-sm); display: flex; align-items: center; gap: 14px; }
/* Solid gradient + white icon + colored glow instead of a flat pastel tint -
   reads as a deliberate accent chip rather than a muted badge. */
.cp-stat-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 10px 20px rgba(99,91,255,.32); }
.cp-stat-icon.success { background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 10px 20px rgba(16,185,129,.3); }
.cp-stat-icon.warning { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 10px 20px rgba(245,158,11,.3); }
.cp-stat-icon.info { background: linear-gradient(135deg, #38bdf8, #0ea5e9); box-shadow: 0 10px 20px rgba(14,165,233,.3); }
.cp-stat-icon svg, .cp-stat-icon i { width: 20px; height: 20px; }
.cp-stat-copy strong { display: block; font-size: 22px; color: var(--cp-ink); line-height: 1; }
.cp-stat-copy span { display: block; margin-top: 5px; color: var(--cp-muted); font-size: 11px; font-weight: 600; }

.card {
    background: var(--cp-card) !important; border: 1px solid var(--cp-line) !important;
    border-radius: var(--cp-radius) !important; box-shadow: var(--cp-shadow-sm) !important;
}
.card .card-header { padding: 20px 22px !important; border-bottom: 1px solid var(--cp-line) !important; background: transparent !important; }
.card .card-body { padding: 22px !important; }
.card h4, .card h5 { color: var(--cp-ink); font-weight: 700; }
.cp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.cp-card-head h3 { margin: 0; color: var(--cp-ink); font-size: 16px; font-weight: 750; }
.cp-card-head p { margin: 4px 0 0; color: var(--cp-muted); font-size: 11px; }

.btn { border-radius: 10px !important; min-height: 40px; padding: 9px 14px !important; font-size: 12px !important; font-weight: 650 !important; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-shadow: none !important; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--cp-primary), var(--cp-primary-dark)) !important; border-color: var(--cp-primary-dark) !important; }
.btn-secondary { background: #fff !important; border-color: var(--cp-line) !important; color: var(--cp-ink) !important; }
.btn-danger { background: #fff1f2 !important; border-color: #ffe4e6 !important; color: #e11d48 !important; }
.btn-success { background: #ecfdf5 !important; border-color: #d1fae5 !important; color: #047857 !important; }
.btn-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.btn-icon { width: 44px; height: 44px; min-height: 44px; padding: 0 !important; border: 1px solid var(--cp-line); background: #fff; color: var(--cp-muted); border-radius: var(--cp-radius-sm); display: inline-grid; place-items: center; }
.btn-icon:hover { color: var(--cp-primary); border-color: #c7d2fe; background: var(--cp-primary-soft); }
.btn-icon.danger { color: var(--cp-danger); }
.btn-icon.danger:hover { color: var(--cp-danger); border-color: #fecaca; background: #fef2f2; }
/* Semantic color modifiers, matching .btn-icon.danger's existing pattern
   (tinted icon at rest, tinted background on hover) - used for
   activate/deactivate (success/warning) and the WhatsApp share action
   (its own recognized brand green, distinct from the app's --cp-success). */
.btn-icon.success { color: var(--cp-success); }
.btn-icon.success:hover { color: var(--cp-success); border-color: #a7f3d0; background: #ecfdf5; }
.btn-icon.warning { color: var(--cp-warning); }
.btn-icon.warning:hover { color: var(--cp-warning); border-color: #fde68a; background: #fffbeb; }
.btn-icon.whatsapp { color: #25d366; }
.btn-icon.whatsapp:hover { color: #25d366; border-color: #b8f0cf; background: #f0fdf6; }
.btn-icon:focus-visible { outline: 2px solid var(--cp-primary); outline-offset: 2px; }
.cp-page-hero .btn-icon:focus-visible { outline-color: #fff; }
.btn-icon svg { width: 16px; height: 16px; }
/* fa-whatsapp is a brand glyph with no Feather equivalent, kept as Font
   Awesome (already loaded) rather than swapped to a generic icon - sized
   to match the 16px Feather icons it sits next to in the same button row. */
.btn-icon .fa-whatsapp { font-size: 16px; line-height: 1; }

.form-group { margin-bottom: 18px !important; }
.form-label { margin-bottom: 7px !important; color: #344054 !important; font-size: 11px !important; font-weight: 700 !important; }
.form-control, .form-select, .select2-container--default .select2-selection--single {
    min-height: 44px !important; border: 1px solid #d8dee8 !important; border-radius: 10px !important;
    background-color: #fff !important; color: var(--cp-ink) !important; font-size: 12px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.02) !important; transition: .18s ease;
}
.form-control { padding: 10px 12px !important; }
.form-control:focus, .form-select:focus { border-color: #818cf8 !important; box-shadow: 0 0 0 4px rgba(99,102,241,.1) !important; }
textarea.form-control { min-height: 110px !important; }
.form-check-input:checked { background-color: var(--cp-primary) !important; border-color: var(--cp-primary) !important; }
/* Several forms use a plain native <select class="form-control"> instead of
   Bootstrap's .form-select, which is the only class that gets Bootstrap's
   custom chevron - without this they fall back to the browser's own native
   arrow, which looks inconsistent next to every other flat, borderless
   control. Reuses Bootstrap's own .form-select chevron asset (bootstrap.css
   ~L2112) so the two render identically. */
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23697386' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px 10px !important;
    padding-right: 38px !important; appearance: none !important; -webkit-appearance: none !important;
}
.select2-dropdown { border: 1px solid var(--cp-line) !important; border-radius: 12px !important; box-shadow: var(--cp-shadow) !important; overflow: hidden; }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--cp-line) !important; border-radius: 8px !important; padding: 7px 10px !important; }
.select2-results__option { font-size: 12px !important; padding: 9px 12px !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--cp-primary-soft) !important; color: var(--cp-primary-dark) !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background-color: #f2f4f7 !important; }

/* Bootstrap's default alert palette (bright yellow/blue boxes) reads as an
   old template artifact next to the rest of this soft, bordered, muted-text
   language - restyled with the same tokens as .cp-badge/.cp-stat-icon so
   in-page notices and bootstrap-notify's toasts (built from the same .alert
   markup, see toastrs() in public/js/custom.js) both match. */
.alert { border-radius: var(--cp-radius-sm) !important; border: 1px solid transparent !important; padding: 13px 16px !important; font-size: 12px !important; box-shadow: var(--cp-shadow-sm); }
.alert svg, .alert i[data-feather] { flex-shrink: 0; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.alert-info, .alert-primary { background: #f0f9ff !important; border-color: #bae6fd !important; color: #075985 !important; }
.alert-danger { background: #fff1f2 !important; border-color: #fecdd3 !important; color: #9f1239 !important; }
.alert-success { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #065f46 !important; }
.info-group h4 { margin: 20px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--cp-line); font-size: 14px; }
.cp-settings-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; padding: 7px; border: 1px solid var(--cp-line); border-radius: 14px; background: #fff; box-shadow: var(--cp-shadow-sm); }
.cp-settings-nav a { min-width: max-content; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 10px 13px; border-radius: 10px; color: var(--cp-muted); font-size: 11px; font-weight: 650; }
.cp-settings-nav a svg { width: 15px; height: 15px; }
.cp-settings-nav a:hover { background: #f8fafc; color: var(--cp-ink); }
.cp-settings-nav a.active { color: var(--cp-primary); background: var(--cp-primary-soft); }
.cp-settings-preview { width: 88px; height: 88px; margin-top: 12px; border-radius: 16px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--cp-line), var(--cp-shadow-sm); }
.cp-settings-nav + .row .card { max-width: 1120px; margin-inline: auto; }
.cp-settings-nav + .row .card-body { padding: 28px !important; }
.cp-settings-nav + .row form > .row > h4, .cp-settings-nav + .row .info-group h4 { width: 100%; margin: 14px 0 18px; padding: 12px 0; border-bottom: 1px solid var(--cp-line); color: var(--cp-ink); font-size: 14px; font-weight: 750; }
.cp-settings-nav + .row .custom-control { min-height: 42px; display: flex; align-items: center; gap: 9px; margin-bottom: 7px; padding: 9px 11px; border: 1px solid var(--cp-line); border-radius: 10px; background: #fbfcfe; }
.cp-settings-nav + .row .custom-control label { margin: 0; color: #475467; font-size: 11px; }
.cp-settings-nav + .row form > .text-right, .cp-settings-nav + .row form .col-md-12.mt-10 { position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: flex-end; margin-top: 18px; padding: 12px; border: 1px solid rgba(230,234,240,.9); border-radius: 13px; background: rgba(255,255,255,.92); box-shadow: 0 12px 30px rgba(31,41,55,.1); backdrop-filter: blur(12px); }

.dataTables_wrapper { color: var(--cp-muted); }
.dataTables_wrapper .dataTables_filter { margin-bottom: 16px; }
.dataTables_wrapper .dataTables_filter input { min-width: 240px; min-height: 38px; border: 1px solid var(--cp-line) !important; border-radius: 999px; padding: 8px 16px; background: #f8f9fc; transition: background .15s, border-color .15s; }
.dataTables_wrapper .dataTables_filter input:focus { background: #fff; border-color: #c7d2fe !important; }
.dataTables_wrapper .dt-buttons { margin-bottom: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.dataTables_wrapper .dt-button { border: 1px solid var(--cp-line) !important; border-radius: 8px !important; background: #fff !important; color: var(--cp-muted) !important; font-size: 10px !important; font-weight: 650; padding: 7px 10px !important; }
.dataTables_wrapper .dataTables_scroll { border: 1px solid var(--cp-line); border-radius: 12px; overflow: hidden; }
table.dataTable { margin: 0 !important; border-collapse: collapse !important; width: 100% !important; }
table.dataTable thead th { background: #f8fafc !important; color: var(--cp-muted) !important; border: 0 !important; border-bottom: 1px solid var(--cp-line) !important; padding: 13px 16px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
table.dataTable tbody td { color: #344054; border: 0 !important; border-bottom: 1px solid #eef1f5 !important; padding: 14px 15px !important; font-size: 12px !important; vertical-align: middle; }
table.dataTable tbody tr:hover td { background: #fafbff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border: 0 !important; border-radius: 8px !important; font-size: 11px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--cp-primary) !important; color: #fff !important; }
.cp-table-shell { width: 100%; overflow: hidden; border: 1px solid var(--cp-line); border-radius: 14px; }
.cp-table-shell table.dataTable thead th:first-child, .cp-table-shell table.dataTable tbody td:first-child { padding-left: 18px !important; }
.cp-table-shell table.dataTable thead th:last-child, .cp-table-shell table.dataTable tbody td:last-child { padding-right: 18px !important; }

.cp-user-cell { display: flex; align-items: center; gap: 11px; min-width: 180px; }
/* flex: 0 0 auto is required: the no-photo fallback span (.cp-avatar
   directly, not wrapped in .cp-avatar-wrap) is a flex child of
   .cp-user-cell. Flex items default to flex-shrink:1, so whenever the
   name/email text next to it needed more room than the row had, the
   browser shrank this box - not the text inside it - down to just a
   few px wide, which is what actually made the initials unreadable no
   matter how large font-size was set. This was the real bug behind the
   "still not fixed, make text larger" report: the letter itself was
   the right size, its box was being crushed to a sliver around it. */
.cp-avatar { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--cp-primary-soft); border: 1px solid #e0e7ff; }
/* The fallback initial (shown when a user has no profile photo) had no
   explicit font-size, so it inherited the ambient ~12px table/UI text size
   inside a 38px circle - reading as a tiny character lost in empty space.
   Sized and weighted so the letter is the dominant, legible element - 20px/
   800 weight, large enough to read clearly even at a glance or scaled down
   in a screenshot, not just technically higher-contrast than before.
   !important is required here: this element sits inside .cp-user-cell,
   and ".cp-user-cell span" below (0,1,1) is MORE specific than a single
   class like ".cp-avatar-fallback" (0,1,0) and was silently winning,
   shrinking the initial back to 10px muted grey despite this rule -
   exactly the bug this comment is here to prevent recurring.
   display ran into the SAME override and was missed the first time
   around: ".cp-user-cell span" also sets display:block, which beat this
   rule's plain "display: grid" on specificity alone. With grid losing,
   "place-items: center" had nothing to act on, so the letter rendered
   as ordinary block text instead of being centered in the circle - the
   fix is the same one used for the other properties above: !important. */
.cp-avatar-fallback { display: grid !important; place-items: center; color: var(--cp-primary) !important; font-weight: 800 !important; font-size: 20px !important; line-height: 1 !important; }
.cp-avatar-wrap, .cp-profile-avatar { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; background: var(--cp-primary-soft); color: var(--cp-primary); font-weight: 800; font-size: 20px; line-height: 1; border-radius: 50%; }
.cp-avatar-wrap { width: 42px; height: 42px; border: 1px solid #e0e7ff; }
.cp-avatar-wrap .cp-avatar { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Same override as .cp-avatar-fallback above: the initial-letter span
   nested inside .cp-avatar-wrap is also a descendant of .cp-user-cell. */
.cp-avatar-wrap > span:first-child { color: var(--cp-primary) !important; font-weight: 800 !important; font-size: 20px !important; line-height: 1 !important; }
.cp-profile-avatar { width: 42px; height: 42px; }
.cp-profile-avatar img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
/* Deterministic per-user avatar color (picked server-side from the row's
   id, see user/index.blade.php) instead of every avatar being identical
   pale purple - makes rows easier to visually scan/tell apart at a
   glance. Solid background + white text, matching .cp-badge/.cp-stat-icon
   semantic colors already used elsewhere. !important for the same reason
   as .cp-avatar-fallback above (wins over .cp-user-cell span). */
/* Soft matching-color glow ring around each avatar - a small premium
   detail that gives the colored circles a bit of lift off the white
   table row instead of sitting perfectly flat. */
.cp-avatar-fallback.cp-avatar-violet, .cp-avatar-wrap.cp-avatar-violet { background: #7c3aed !important; border-color: transparent; box-shadow: 0 0 0 4px rgba(124,58,237,.14), 0 8px 16px rgba(124,58,237,.22); }
.cp-avatar-fallback.cp-avatar-blue, .cp-avatar-wrap.cp-avatar-blue { background: #0ea5e9 !important; border-color: transparent; box-shadow: 0 0 0 4px rgba(14,165,233,.14), 0 8px 16px rgba(14,165,233,.22); }
.cp-avatar-fallback.cp-avatar-green, .cp-avatar-wrap.cp-avatar-green { background: #10b981 !important; border-color: transparent; box-shadow: 0 0 0 4px rgba(16,185,129,.14), 0 8px 16px rgba(16,185,129,.22); }
.cp-avatar-fallback.cp-avatar-amber, .cp-avatar-wrap.cp-avatar-amber { background: #f59e0b !important; border-color: transparent; box-shadow: 0 0 0 4px rgba(245,158,11,.14), 0 8px 16px rgba(245,158,11,.22); }
.cp-avatar-fallback.cp-avatar-rose, .cp-avatar-wrap.cp-avatar-rose { background: #f43f5e !important; border-color: transparent; box-shadow: 0 0 0 4px rgba(244,63,94,.14), 0 8px 16px rgba(244,63,94,.22); }
.cp-avatar-fallback.cp-avatar-teal, .cp-avatar-wrap.cp-avatar-teal { background: #14b8a6 !important; border-color: transparent; box-shadow: 0 0 0 4px rgba(20,184,166,.14), 0 8px 16px rgba(20,184,166,.22); }
.cp-avatar-fallback.cp-avatar-violet, .cp-avatar-fallback.cp-avatar-blue, .cp-avatar-fallback.cp-avatar-green,
.cp-avatar-fallback.cp-avatar-amber, .cp-avatar-fallback.cp-avatar-rose, .cp-avatar-fallback.cp-avatar-teal { color: #fff !important; }
.cp-avatar-wrap.cp-avatar-violet > span:first-child, .cp-avatar-wrap.cp-avatar-blue > span:first-child, .cp-avatar-wrap.cp-avatar-green > span:first-child,
.cp-avatar-wrap.cp-avatar-amber > span:first-child, .cp-avatar-wrap.cp-avatar-rose > span:first-child, .cp-avatar-wrap.cp-avatar-teal > span:first-child { color: #fff !important; }
.cp-user-cell strong { display: block; color: var(--cp-ink); font-size: 12.5px; font-weight: 700; }
.cp-user-cell span { display: block; color: var(--cp-muted); font-size: 10.5px; margin-top: 2px; }
.cp-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 750; background: #f2f4f7; color: var(--cp-muted); white-space: nowrap; }
.cp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #98a2b3; }
.cp-badge.success { background: #ecfdf3; color: #027a48; }
.cp-badge.success::before { background: #12b76a; }
.cp-badge.danger { background: #fff1f3; color: #c01048; }
.cp-badge.danger::before { background: #f04438; }
.cp-badge.info { background: #eef4ff; color: #3538cd; }
.cp-badge.info::before { background: #6172f3; }
.cp-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-empty { padding: 54px 20px; text-align: center; color: var(--cp-muted); }
.cp-empty-icon { width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 14px; display: grid; place-items: center; color: var(--cp-primary); background: var(--cp-primary-soft); }
.cp-empty h4 { font-size: 15px; margin-bottom: 6px; }
.cp-empty p { font-size: 11px; margin: 0; }
.cp-quick-list { display: grid; gap: 10px; }
.cp-quick-list > a { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--cp-line); border-radius: 13px; color: var(--cp-ink); transition: .18s ease; }
.cp-quick-list > a:hover { border-color: #c7d2fe; background: #fafbff; transform: translateX(2px); }
.cp-quick-list > a .cp-stat-icon { width: 38px; height: 38px; flex: 0 0 38px; }
.cp-quick-list > a div { flex: 1; min-width: 0; }
.cp-quick-list > a strong { display: block; font-size: 11px; }
.cp-quick-list > a small { display: block; margin-top: 3px; color: var(--cp-muted); font-size: 9px; }
.cp-quick-list > a > svg { width: 15px; color: var(--cp-muted); }
.table > :not(caption) > * > * { padding: 13px 12px !important; border-color: var(--cp-line) !important; }
.table thead th { color: var(--cp-muted); background: #f8fafc; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }

.cp-meeting-grid, .cp-recording-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.cp-meeting-card, .cp-recording-card { border: 1px solid var(--cp-line); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: var(--cp-shadow-sm); transition: .2s ease; }
.cp-meeting-card:hover, .cp-recording-card:hover { transform: translateY(-3px); box-shadow: var(--cp-shadow); border-color: #d7dbff; }
.cp-meeting-card-body { padding: 19px; }
.cp-meeting-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cp-meeting-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#635bff,#8b5cf6); }
.cp-meeting-icon svg { width: 20px; }
.cp-meeting-card h3, .cp-recording-card h3 { color: var(--cp-ink); font-size: 15px; margin: 0 0 4px; }
.cp-meeting-meta { display: grid; gap: 10px; margin: 16px 0; }
.cp-meta-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.cp-meta-row span { color: var(--cp-muted); }
.cp-meta-row strong { color: var(--cp-ink); font-weight: 650; text-align: right; word-break: break-all; }
.cp-meeting-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 19px; border-top: 1px solid var(--cp-line); background: #fafbfc; }
.cp-recording-preview { height: 150px; padding: 18px; color: #fff; background: radial-gradient(circle at 80% 15%, rgba(255,255,255,.18), transparent 25%), linear-gradient(135deg,#111827,#312e81); display: flex; flex-direction: column; justify-content: space-between; }
.cp-recording-preview .play { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(8px); }
.cp-recording-content { padding: 18px; }

.modal-content { border: 0 !important; border-radius: 18px !important; box-shadow: 0 28px 80px rgba(17,24,39,.22) !important; overflow: hidden; }
.modal-header { padding: 18px 22px !important; border-bottom: 1px solid var(--cp-line) !important; background: #fbfcfe; }
.modal-title { font-size: 15px !important; font-weight: 750 !important; }
.modal-body { padding: 22px !important; }
.modal-footer { padding: 16px 22px !important; border-top: 1px solid var(--cp-line) !important; background: #fbfcfe; }
/* Was a hardcoded inline background:grey banner duplicated in both the
   Meeting Rooms and Zoom SDK modals - one shared class instead. */
.cp-modal-banner { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--cp-radius-sm); background: linear-gradient(135deg, var(--cp-primary), var(--cp-primary-dark)); color: #fff; font-size: 14px; font-weight: 700; text-align: center; }
.cp-modal-banner strong { font-size: 12px; font-weight: 600; opacity: .85; }

.codex-footer { margin-left: 268px !important; background: transparent !important; border-top: 1px solid var(--cp-line) !important; color: var(--cp-muted) !important; }
.codex-footer p { font-size: 12px !important; }
.scroll-top svg { width: 18px; height: 18px; }
.cp-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.48); backdrop-filter: blur(2px); z-index: 1090; }

/* Authentication */
.auth-main { min-height: 100vh; padding: 32px; display: grid !important; place-items: center; background: radial-gradient(circle at 10% 5%, rgba(99,91,255,.34), transparent 28%), radial-gradient(circle at 92% 88%, rgba(14,165,233,.2), transparent 30%), #0b1120 !important; }
.auth-main::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; }
.cp-auth-shell { position: relative; z-index: 1; width: min(100%, 980px); min-height: 610px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; background: #fff; box-shadow: 0 36px 110px rgba(0,0,0,.38); }
.cp-auth-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 42px; overflow: hidden; color: #fff; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.18), transparent 24%), linear-gradient(145deg,#312e81 0%,#4f46e5 50%,#7c3aed 100%); }
.cp-auth-story::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; bottom: -140px; border: 60px solid rgba(255,255,255,.08); border-radius: 50%; }
.cp-auth-story > * { position: relative; z-index: 1; }
.cp-auth-story .cp-brand-copy strong { color: #fff; }
.cp-auth-story-content { max-width: 430px; }
.cp-auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); font-size: 11px; font-weight: 700; }
.cp-auth-story h1 { margin: 0; color: #fff; font-size: clamp(30px, 3.5vw, 46px); line-height: 1.08; letter-spacing: -.035em; }
.cp-auth-story p { max-width: 390px; margin: 18px 0 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.7; }
.cp-auth-feature-list { display: grid; gap: 12px; margin-top: 30px; }
.cp-auth-feature-list div { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.92); font-size: 12px; font-weight: 600; }
.cp-auth-feature-list i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.14); font-size: 10px; }
.cp-auth-story-footer { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.72); font-size: 11px; }
.cp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 5px rgba(52,211,153,.14); }
.cp-auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 48px 52px; background: #fff; }
.cp-auth-mobile-brand { display: none; }
.cp-auth-heading { margin-bottom: 30px; }
.cp-auth-heading > span { display: block; margin-bottom: 9px; color: var(--cp-primary); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cp-auth-heading h2 { margin: 0; color: var(--cp-ink); font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.cp-auth-heading p { margin: 8px 0 0; color: var(--cp-muted); font-size: 12px; }
.cp-auth-form .form-group { margin-bottom: 20px !important; }
.cp-auth-form label, #loginForm.cp-auth-form label { color: #344054 !important; opacity: 1 !important; }
.cp-auth-form .form-label { font-size: 12px !important; }
.cp-auth-form .form-control { min-height: 50px !important; padding: 12px 14px !important; border-color: #d0d5dd !important; background: #fff !important; color: var(--cp-ink) !important; font-size: 13px !important; }
.cp-password-field { position: relative; }
.cp-password-field .form-control { padding-right: 50px !important; }
.cp-password-field .toggle-show { position: absolute; top: 50%; right: 7px; width: 38px; height: 38px; transform: translateY(-50%); border: 0; border-radius: 9px; background: transparent; color: var(--cp-muted); }
.cp-password-field .toggle-show:hover { color: var(--cp-primary); background: var(--cp-primary-soft); }
.cp-field-error { display: block; margin-top: 7px; color: #d92d20; font-size: 11px; font-weight: 600; }
.cp-auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 24px; }
.cp-check { display: inline-flex; align-items: center; gap: 9px; color: #475467; font-size: 11px; font-weight: 600; cursor: pointer; }
.cp-check input { width: 17px; height: 17px; accent-color: var(--cp-primary); }
.cp-auth-security { display: inline-flex; align-items: center; gap: 6px; color: #98a2b3; font-size: 10px; }
.cp-auth-submit { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg,var(--cp-primary),var(--cp-primary-dark)); box-shadow: 0 12px 24px rgba(79,70,229,.22); font-size: 12px; font-weight: 750; transition: .18s ease; }
.cp-auth-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(79,70,229,.28); }
.cp-auth-submit:focus-visible, .cp-password-field .toggle-show:focus-visible { outline: 3px solid rgba(99,102,241,.25); outline-offset: 2px; }
.cp-auth-support { margin-top: 24px; color: #98a2b3; font-size: 10px; text-align: center; }
.authbox-img { display: none !important; }

.darkmode { --cp-card: #172033; --cp-canvas: #0f172a; --cp-ink: #f8fafc; --cp-muted: #94a3b8; --cp-line: #263244; }
.darkmode .codex-header { background: rgba(17,24,39,.9) !important; }
.darkmode .card, .darkmode .cp-stat-card, .darkmode .cp-meeting-card, .darkmode .cp-recording-card { background: var(--cp-card) !important; }
.darkmode table.dataTable thead th, .darkmode .cp-meeting-footer { background: #111827 !important; }
.darkmode table.dataTable tbody td { color: #cbd5e1; }
.darkmode table.dataTable tbody tr:hover td { background: #1e293b !important; }
.darkmode .form-control, .darkmode .form-select { background: #111827 !important; color: #f8fafc !important; border-color: #334155 !important; }

@media (max-width: 1199px) {
    .codex-sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 1100 !important; }
    body.sidebar-show .codex-sidebar, .codex-sidebar.sidebar-show { transform: translateX(0); }
    body.sidebar-show .cp-mobile-overlay { display: block; }
    .codex-header { left: 0 !important; width: 100% !important; }
    .themebody-wrap, .codex-footer { margin-left: 0 !important; }
    .cp-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .cp-meeting-grid, .cp-recording-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767px) {
    .codex-header .header-contian { padding: 0 16px !important; }
    .cp-page-context p, .cp-status-pill, .codex-header .media-body { display: none !important; }
    .theme-body { padding: 20px 15px 34px !important; }
    .codex-breadcrumb { padding: 14px 15px 0 !important; }
    .cp-page-hero { padding: 21px; align-items: flex-start; flex-direction: column; border-radius: 18px; }
    .cp-page-hero h2 { font-size: 20px; }
    .cp-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cp-stat-card { padding: 14px; gap: 10px; }
    .cp-stat-icon { width: 38px; height: 38px; }
    .cp-stat-copy strong { font-size: 18px; }
    .cp-meeting-grid, .cp-recording-grid { grid-template-columns: 1fr; }
    .card .card-body { padding: 16px !important; }
    .dataTables_wrapper .dataTables_filter { float: none !important; text-align: left !important; }
    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: calc(100% - 55px); }
    .cp-settings-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
    .cp-settings-nav a { min-width: 0; justify-content: flex-start; min-height: 44px; }
    .cp-settings-nav + .row .card-body { padding: 20px !important; }
    .cp-table-shell { overflow: visible; border: 0; }
    .cp-responsive-table, .cp-responsive-table tbody { display: block; width: 100% !important; }
    .cp-responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cp-responsive-table tbody { display: grid; gap: 12px; }
    .cp-responsive-table tbody tr { display: block; overflow: hidden; border: 1px solid var(--cp-line); border-radius: 14px; background: #fff; box-shadow: var(--cp-shadow-sm); }
    .cp-responsive-table tbody td { min-height: 48px; display: flex !important; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px !important; text-align: right; }
    .cp-responsive-table tbody td::before { content: attr(data-label); flex: 0 0 92px; color: var(--cp-muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
    .cp-responsive-table .cp-user-cell { min-width: 0; text-align: left; }
    .cp-responsive-table .cp-actions { justify-content: flex-end; }
    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: center !important; }
    .auth-main { padding: 16px; }
    .cp-auth-shell { min-height: 0; display: block; border-radius: 24px; }
    .cp-auth-story { display: none; }
    .cp-auth-panel { min-height: calc(100vh - 32px); padding: 30px 24px; }
    .cp-auth-mobile-brand { display: block; margin-bottom: 44px; }
    .cp-auth-mobile-brand .cp-brand { color: var(--cp-ink) !important; }
    .cp-auth-mobile-brand .cp-brand-copy strong { color: var(--cp-ink); }
    .cp-auth-heading h2 { font-size: 26px; }
    .cp-auth-options { align-items: flex-start; flex-direction: column; }
}

/* Client-facing pages (landing/account/guide/downloads/privacy/meeting/start) */

/* Cap prose width so plain-text pages stay readable on large/4K monitors
   instead of stretching edge-to-edge; harmless on narrower screens since
   max-width simply has no effect until the viewport exceeds it. */
.entry-content.single-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Was a fixed 200px in inline <style> blocks on multiple pages; consolidated
   here with max-width:100% so it can never force horizontal overflow, plus
   a smaller size on narrow phones. */
.custom-pill-buttons img {
    width: 200px;
    max-width: 100%;
    height: auto;
}

/* Zoom "join meeting" embed (layouts/start.blade.php) — was a hardcoded
   width="900" height="400" iframe that overflowed any viewport under 900px. */
.cp-iframe-responsive {
    width: 100%;
    max-width: 900px;
    height: 400px;
    border: 0;
}

/* "Join now" call-to-action image (layouts/meeting.blade.php) — was a fixed
   width:290px inline style with no shrink behavior on narrow screens. */
.cp-join-now-img {
    width: 290px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 575px) {
    .custom-pill-buttons img { width: 120px; }
    .cp-iframe-responsive { height: 220px; }
}

/* Public header/footer/page shell - shared by every customer-facing page
   (admin/headerfront.blade.php, admin/footerfront.blade.php) so the whole
   product uses one consistent chrome instead of the old WordPress/Kadence
   export markup these pages used to carry. */
.cp-public-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.92); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--cp-line);
}
.cp-public-header-inner {
    max-width: 1180px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.cp-public-brand { display: flex; align-items: center; }
.cp-public-brand img { display: block; height: 34px; width: auto; max-width: 100%; }
.cp-public-toggle { display: none; }
.cp-public-nav { display: flex; align-items: center; gap: 4px; }
.cp-public-nav a {
    padding: 9px 14px; border-radius: 10px; color: var(--cp-muted); font-size: 13px; font-weight: 650;
    transition: .18s ease;
}
.cp-public-nav a:hover { color: var(--cp-ink); background: #f8fafc; }
.cp-public-nav a.active { color: var(--cp-primary); background: var(--cp-primary-soft); }
.cp-public-cta { margin-left: 8px; white-space: nowrap; }
.cp-public-cta svg { width: 15px; height: 15px; }

.cp-public-main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 48px; }
.cp-public-section-title { margin: 0 0 4px; color: var(--cp-ink); font-size: 15px; font-weight: 750; }
.cp-public-section-sub { margin: 0 0 18px; color: var(--cp-muted); font-size: 12px; }

.cp-public-footer { margin-top: 24px; border-top: 1px solid var(--cp-line); background: #fff; }
.cp-public-footer-inner {
    max-width: 1180px; margin: 0 auto; padding: 34px 24px 20px;
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.cp-public-footer-brand img { height: 26px; width: auto; margin-bottom: 10px; }
.cp-public-footer-brand p { max-width: 340px; margin: 0; color: var(--cp-muted); font-size: 12px; line-height: 1.6; }
.cp-public-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.cp-public-footer-links a { color: var(--cp-muted); font-size: 12px; font-weight: 650; }
.cp-public-footer-links a:hover { color: var(--cp-primary); }
.cp-public-footer-bottom { max-width: 1180px; margin: 0 auto; padding: 14px 24px 24px; border-top: 1px solid var(--cp-line); }
.cp-public-footer-bottom p { margin: 0; color: var(--cp-muted); font-size: 11px; }

/* Download/app-link buttons (Downloads + Join a Meeting pages). Each item
   keeps its original --custom-contextual-color accent, now used as a small
   left-edge tint instead of an entirely unstyled vendor "pill" class. */
.cp-download-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.cp-download-btn {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border: 1px solid var(--cp-line); border-left: 3px solid var(--custom-contextual-color, var(--cp-primary));
    border-radius: var(--cp-radius-sm); background: #fff; color: var(--cp-ink);
    font-size: 12px; font-weight: 650; box-shadow: var(--cp-shadow-sm); transition: .18s ease;
}
.cp-download-btn:hover { transform: translateY(-2px); box-shadow: var(--cp-shadow); color: var(--cp-ink); }
.cp-download-btn img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

@media (max-width: 767px) {
    .cp-public-toggle { display: inline-grid; }
    .cp-public-nav {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
        flex-direction: column; align-items: stretch; gap: 2px;
        padding: 10px 16px 16px; background: #fff; border-bottom: 1px solid var(--cp-line);
        box-shadow: var(--cp-shadow); display: none;
    }
    .cp-public-nav.cp-public-nav-open { display: flex; }
    .cp-public-cta { margin-left: 0; justify-content: center; }
    .cp-public-main { padding: 20px 16px 36px; }
    .cp-public-footer-inner { flex-direction: column; }
}

/* Theme customizer panel: vendor theme forces uppercase on these labels via
   .custom-color / .customizer-title; both hold full phrases (not short
   labels), so uppercase hurts readability here - switch to sentence case. */
#theme-customizer .custom-color,
#theme-customizer .customizer-title {
    text-transform: none;
}

/* Every page whose content has its own .cp-page-hero banner (Users,
   Overview, Zoom Meetings, Recordings, Login Activity, Notifications,
   Roles, Permissions) opts into this via @section('page-class',
   'cp-merged-header'): merge the thin codex-header top bar into the hero
   instead of showing both stacked (the hero carries the page's real
   action button, but the thin bar was the one that stayed fixed on
   scroll - merging means the *useful* bar is the one that stays put).
   Pages with no hero of their own (Settings, etc.) don't set this class,
   so they keep the plain codex-header as their only header. */
body.cp-merged-header .codex-header { display: none; }
/* style.css sets margin-block-start: 79px on .themebody-wrap
   UNCONDITIONALLY (not just below some breakpoint - it's the base,
   un-media-queried rule at style.css:131) to clear the normally-visible
   codex-header. With that header hidden on merged-header pages, this
   margin becomes a blank ~79px gap above the hero at every width. A
   zeroing override existed already, but was only ever added inside the
   max-width:991px media query below (assuming, incorrectly, that the
   margin was mobile-only) - so it never fired on desktop, which is
   exactly the gap being reported. Fixed here, unconditionally. */
body.cp-merged-header .themebody-wrap { padding-top: 0 !important; margin-block-start: 0 !important; margin-top: 0 !important; }
body.cp-merged-header .cp-page-hero {
    position: fixed; top: 0; left: 268px; right: 0; z-index: 20;
    margin: 0; border-radius: 0; padding: 16px 30px;
    box-shadow: 0 2px 12px rgba(17,24,39,.12);
    /* .cp-page-hero normally has overflow:hidden (it just crops the
       decorative circle below) - but that also clips the profile dropdown,
       which must extend past the hero's own bottom edge. Moving the
       decoration into its own clipped layer (.cp-hero-bg) lets the hero
       itself stay overflow:visible so the dropdown isn't cut off. */
    overflow: visible;
}
body.cp-merged-header .cp-page-hero::after { display: none; }
/* padding-top used to be a flat 100px, which only matched the shortest
   hero (a one-line title, one action). Taller heroes - e.g. Dashboard's,
   which carries two buttons plus the status pill and wraps onto more
   lines - are taller than that, so the fixed hero above ends up
   overlapping the stat cards below it. --cp-hero-offset is measured live
   from the actual hero and kept in sync by syncMergedHeroOffset() in
   custom.js; 100px is only the fallback for the instant before that JS
   runs (or if it can't run at all), matching the old always-100px value. */
body.cp-merged-header .theme-body { padding-top: var(--cp-hero-offset, 100px) !important; }
body.cp-merged-header .codex-breadcrumb { margin-top: 0; }

.cp-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
/* Faint dot-grid, faded out toward the bottom via mask so it reads as
   texture near the top of the banner rather than noise over the button/
   avatar row. Fully decorative, matches the richer .cp-page-hero gradient. */
.cp-hero-bg::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 75%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 75%);
    opacity: .5;
}
.cp-hero-bg::after { content: ""; position: absolute; width: 260px; height: 260px; right: -70px; top: -150px; border-radius: 50%; border: 48px solid rgba(255,255,255,.08); }

.cp-hero-hamburger { flex: 0 0 auto; background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.18) !important; color: #fff !important; }
.cp-hero-hamburger:hover { background: rgba(255,255,255,.2) !important; }
.cp-hero-title { flex: 1 1 auto; min-width: 0; }
.cp-hero-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.cp-hero-status-pill { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); }
.cp-hero-status-pill::before { background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.2); }
.cp-hero-add-btn { white-space: nowrap; }
/* The profile dropdown's entire position/appearance is normally supplied by
   vendor rules scoped to ".codex-header .nav-iconlist .hover-dropdown" (see
   style.css ~9370-9550). Moving the same markup into the hero via
   .cp-hero-iconlist means NONE of those rules match, so the dropdown fell
   back to unstyled inline content - that's what caused the overlap/contrast
   bug. Re-implementing the same behavior here, scoped to .cp-hero-iconlist,
   is the actual fix (not a positioning hack). */
.cp-hero-iconlist { display: flex; align-items: center; }
.cp-hero-iconlist > li { position: relative; list-style: none; cursor: pointer; }

/* Compact pill-style trigger button, readable on the purple gradient */
.cp-hero-iconlist .nav-profile .media {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px 7px 7px !important; border-radius: 999px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
    transition: .18s ease;
}
.cp-hero-iconlist .nav-profile .media:hover { background: rgba(255,255,255,.22); }
.cp-hero-iconlist .nav-profile .user-icon img,
.cp-hero-iconlist .nav-profile .cp-profile-avatar { width: 32px !important; height: 32px !important; font-size: 14px !important; }
.cp-hero-iconlist .nav-profile .media-body { line-height: 1.25; }
.cp-hero-iconlist .nav-profile .media-body .cp-profile-name { color: #fff !important; font-weight: 700; }
.cp-hero-iconlist .nav-profile .media-body span { color: rgba(255,255,255,.7) !important; font-size: 10px; }
.cp-hero-iconlist .nav-profile > .media > i[data-feather="chevron-down"] { color: rgba(255,255,255,.85); }

/* Dropdown panel: floats below the trigger, solid background, readable text,
   proper elevation - shown on hover, matching the site's existing pattern. */
.cp-hero-iconlist .hover-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    min-width: 190px; background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 20px 45px rgba(17,24,39,.28), 0 0 0 1px rgba(17,24,39,.04);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cp-hero-iconlist > li:hover .hover-dropdown,
.cp-hero-iconlist > li:focus-within .hover-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.cp-hero-iconlist .hover-dropdown ul { margin: 0; padding: 0; list-style: none; }
.cp-hero-iconlist .hover-dropdown ul li a {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    color: var(--cp-ink); font-size: 13px; font-weight: 600;
}
.cp-hero-iconlist .hover-dropdown ul li a svg { width: 15px; height: 15px; color: var(--cp-muted); }
.cp-hero-iconlist .hover-dropdown ul li a:hover { background: #f8fafc; }
.cp-hero-iconlist .hover-dropdown ul li:nth-child(n+2) a { border-top: 1px solid var(--cp-line); }

@media (max-width: 1199px) {
    body.cp-merged-header .cp-page-hero { left: 0; }
}
@media (max-width: 767px) {
    body.cp-merged-header .cp-page-hero { position: static; padding: 21px; }
    body.cp-merged-header .theme-body { padding-top: 20px !important; }
    .cp-hero-status-pill, .cp-hero-iconlist .media-body { display: none !important; }
}

/* Hierarchical Users module: breadcrumb, search box, pagination, open button */

.cp-breadcrumb-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cp-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-muted); font-size: 12px; font-weight: 650; }
.cp-back-link:hover { color: var(--cp-primary); }
.cp-back-link svg { width: 15px; height: 15px; }
.cp-breadcrumb-trail { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.cp-breadcrumb-trail li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cp-breadcrumb-trail li:not(:last-child)::after { content: "/"; color: var(--cp-line); margin-left: 8px; }
.cp-breadcrumb-trail a { color: var(--cp-muted); font-weight: 600; }
.cp-breadcrumb-trail a:hover { color: var(--cp-primary); }
.cp-breadcrumb-trail span[aria-current] { color: var(--cp-ink); font-weight: 750; }

.cp-search-form { min-width: 240px; }
.cp-search-form .form-control { min-height: 40px; }

/* Users hierarchy toolbar: pulls the search field closer to its label and
   visually attaches the whole bar to the table beneath it, instead of
   leaving the input stranded at the far edge with no connection to either
   the heading or the table it filters. */
.cp-users-toolbar {
    justify-content: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--cp-line);
    border-bottom: 0;
    border-radius: var(--cp-radius) var(--cp-radius) 0 0;
    background: #fbfcfe;
    margin-bottom: 0;
}
.cp-users-toolbar .cp-card-head-note { margin: 0 18px 0 0; color: var(--cp-muted); font-size: 12px; }
.cp-users-toolbar .cp-search-form { margin-left: auto; min-width: 260px; }
.cp-users-toolbar + .cp-table-shell { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Matches the .btn-icon group visually (same height, border, ghost style)
   so it reads as part of the same row of actions instead of a separate,
   differently-styled control tacked on at the end. */
.cp-open-btn {
    min-height: 36px; height: 36px; padding: 0 14px !important;
    border-radius: var(--cp-radius-sm) !important; border: 1px solid var(--cp-line) !important;
    background: #fff !important; color: var(--cp-primary) !important;
    font-size: 11px !important; font-weight: 700 !important; box-shadow: none !important;
}
.cp-open-btn:hover { background: var(--cp-primary-soft) !important; border-color: #c7d2fe !important; }

.cp-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.cp-pagination-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-pagination-links .btn-icon { width: 36px; height: 36px; min-height: 36px; font-size: 11px; font-weight: 700; }
.cp-pagination-links .cp-page-active { color: #fff; background: var(--cp-primary); border-color: var(--cp-primary); }
.cp-pagination-links .cp-page-disabled { opacity: .4; pointer-events: none; }

@media (max-width: 767px) {
    .cp-search-form { min-width: 0; width: 100%; }
    .cp-card-head { flex-direction: column; align-items: stretch; }
    .cp-pagination { justify-content: center; text-align: center; }
}