/* =========================================================
   RAZ CLOUD — SOURCE POLISH V2
   Visual components only.
   NO sidebar geometry rules.
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.source-page,
.ops-page,
.main {
    color: var(--raz-text);
}


.source-page-head,
.ops-header {
    border-color: var(--raz-border) !important;
}


.source-page-head h1,
.ops-header h1,
.source-card h2,
.ops-card h2 {
    color: var(--raz-text) !important;
}


.source-page-head p,
.source-card-head p,
.ops-header p,
.ops-card p {
    color: var(--raz-muted) !important;
}


/* =========================================================
   CARDS
   ========================================================= */

.source-card,
.ops-card,
.dashboard-stat,
.system-summary article,
.network-summary article,
.diag-item,
.quick-action,
.user-menu {

    border-color:
        var(--raz-border) !important;

    border-radius:
        var(--raz-radius) !important;

    background:
        rgba(
            18,
            30,
            45,
            var(--raz-card-opacity)
        );

    transition:
        background var(--raz-transition),
        border-color var(--raz-transition),
        box-shadow var(--raz-transition),
        transform var(--raz-transition);
}


html[data-raz-theme="light"]
.source-card,

html[data-raz-theme="light"]
.ops-card,

html[data-raz-theme="light"]
.dashboard-stat,

html[data-raz-theme="light"]
.system-summary article,

html[data-raz-theme="light"]
.network-summary article,

html[data-raz-theme="light"]
.diag-item,

html[data-raz-theme="light"]
.quick-action,

html[data-raz-theme="light"]
.user-menu {

    background:
        rgba(
            255,
            255,
            255,
            var(--raz-card-opacity)
        );
}


/* Soft */

html[data-raz-card="soft"]
.source-card,

html[data-raz-card="soft"]
.ops-card,

html[data-raz-card="soft"]
.dashboard-stat,

html[data-raz-card="soft"]
.system-summary article {

    box-shadow:
        0 7px 14px
        rgba(0,0,0,.12) !important;
}


/* Glass */

html[data-raz-card="glass"]
.source-card,

html[data-raz-card="glass"]
.ops-card,

html[data-raz-card="glass"]
.dashboard-stat,

html[data-raz-card="glass"]
.system-summary article {

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035),
        0 8px 30px
        rgba(0,0,0,.10) !important;
}


/* Minimal */

html[data-raz-card="minimal"]
.source-card,

html[data-raz-card="minimal"]
.ops-card,

html[data-raz-card="minimal"]
.dashboard-stat {

    border-color:
        transparent !important;

    box-shadow:
        none !important;
}


/* Cyber */

html[data-raz-card="cyber"]
.source-card,

html[data-raz-card="cyber"]
.ops-card,

html[data-raz-card="cyber"]
.dashboard-stat {

    box-shadow:
        inset 0 0 0 1px
        rgba(
            var(--raz-primary-rgb),
            .17
        ),
        0 0 24px
        rgba(
            var(--raz-primary-rgb),
            .06
        ) !important;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.source-card-head,
.ops-card-head {

    border-color:
        var(--raz-border) !important;

    background:
        transparent !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

input,
select,
textarea,
.source-search,
.ops-search {

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        var(--raz-radius) !important;

    background:
        var(--raz-surface-2) !important;

    color:
        var(--raz-text) !important;

    transition:
        border-color var(--raz-transition),
        box-shadow var(--raz-transition),
        background var(--raz-transition);
}


input::placeholder,
textarea::placeholder {

    color:
        var(--raz-muted-2) !important;
}


input:hover,
select:hover,
textarea:hover {

    border-color:
        rgba(
            var(--raz-primary-rgb),
            .38
        ) !important;
}


input:focus,
select:focus,
textarea:focus {

    outline:
        none !important;

    border-color:
        var(--raz-primary) !important;

    box-shadow:
        0 0 0 3px
        rgba(
            var(--raz-primary-rgb),
            .11
        ) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.source-btn,
.ops-button,
.logout-button {

    border-radius:
        var(--raz-radius) !important;

    transition:
        background var(--raz-transition),
        color var(--raz-transition),
        border-color var(--raz-transition),
        transform var(--raz-transition),
        box-shadow var(--raz-transition);
}


.source-btn:hover,
.ops-button:hover {

    transform:
        translateY(-1px);
}


.source-btn.primary,
.ops-button.primary,
button.primary {

    border-color:
        var(--raz-primary) !important;

    background:
        var(--raz-primary) !important;

    color:
        #fff !important;

    box-shadow:
        0 4px 12px
        rgba(
            var(--raz-primary-rgb),
            .16
        );
}


.source-btn.primary:hover,
.ops-button.primary:hover {

    box-shadow:
        0 6px 16px
        rgba(
            var(--raz-primary-rgb),
            .25
        );
}


/* =========================================================
   FILTER / TAB PILLS
   ========================================================= */

.filter-pill,
.ops-filter,
.source-filter,
.service-filter,
.session-filter {

    border-color:
        var(--raz-border) !important;

    border-radius:
        999px !important;

    background:
        transparent !important;

    color:
        var(--raz-muted) !important;

    transition:
        all var(--raz-transition);
}


.filter-pill:hover,
.ops-filter:hover,
.source-filter:hover,
.service-filter:hover,
.session-filter:hover {

    border-color:
        rgba(
            var(--raz-primary-rgb),
            .42
        ) !important;

    color:
        var(--raz-text) !important;
}


.filter-pill.active,
.ops-filter.active,
.source-filter.active,
.service-filter.active,
.session-filter.active {

    border-color:
        var(--raz-primary) !important;

    background:
        rgba(
            var(--raz-primary-rgb),
            .11
        ) !important;

    color:
        var(--raz-primary) !important;
}


/* =========================================================
   TABLES
   ========================================================= */

.source-table,
.ops-table {

    border-color:
        var(--raz-border) !important;
}


.source-table thead,
.ops-table thead {

    background:
        var(--raz-surface-2) !important;
}


.source-table th,
.ops-table th {

    color:
        var(--raz-muted) !important;

    border-color:
        var(--raz-border) !important;
}


.source-table td,
.ops-table td {

    color:
        var(--raz-text) !important;

    border-color:
        var(--raz-border) !important;
}


.source-table tbody tr,
.ops-table tbody tr {

    transition:
        background var(--raz-transition);
}


.source-table tbody tr:hover,
.ops-table tbody tr:hover {

    background:
        rgba(
            var(--raz-primary-rgb),
            .035
        ) !important;
}


/* =========================================================
   BADGES
   ========================================================= */

.source-badge,
.ops-badge {

    border-radius:
        999px !important;
}


.source-badge.success,
.ops-badge.good {

    background:
        rgba(
            var(--raz-accent-rgb),
            .11
        ) !important;

    color:
        var(--raz-accent) !important;
}


.source-badge.info {

    background:
        rgba(
            var(--raz-primary-rgb),
            .10
        ) !important;

    color:
        var(--raz-primary) !important;
}


.source-badge.warning {

    background:
        rgba(245,128,62,.11) !important;

    color:
        var(--raz-warning) !important;
}


.source-badge.danger {

    background:
        rgba(230,55,87,.11) !important;

    color:
        var(--raz-danger) !important;
}


/* =========================================================
   USER CARD
   ========================================================= */

.user-menu {

    border:
        1px solid
        var(--raz-border) !important;

    background:
        var(--raz-surface) !important;
}


.user-avatar {

    background:
        var(--raz-primary) !important;

    color:
        #fff !important;

    border-radius:
        var(--raz-radius) !important;
}


.user-info strong {

    color:
        var(--raz-text) !important;
}


.user-info span {

    color:
        var(--raz-muted) !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

.source-search,
.ops-search {

    background:
        var(--raz-surface) !important;
}


/* =========================================================
   RANGE / SLIDERS — SOURCE STYLE
   ========================================================= */

.raz-theme-range {

    appearance:
        none;

    -webkit-appearance:
        none;

    width:
        100%;

    height:
        18px;

    margin:
        2px 0 0;

    background:
        transparent;

    cursor:
        pointer;
}


/* Chrome / Edge */

.raz-theme-range::-webkit-slider-runnable-track {

    height:
        4px;

    border:
        none;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--raz-primary),
            var(--raz-primary)
        );
}


.raz-theme-range::-webkit-slider-thumb {

    appearance:
        none;

    -webkit-appearance:
        none;

    width:
        14px;

    height:
        14px;

    margin-top:
        -5px;

    border:
        2px solid
        var(--raz-surface);

    border-radius:
        50%;

    background:
        var(--raz-primary);

    box-shadow:
        0 0 0 2px
        rgba(
            var(--raz-primary-rgb),
            .25
        );

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.raz-theme-range:hover::-webkit-slider-thumb {

    transform:
        scale(1.12);

    box-shadow:
        0 0 0 4px
        rgba(
            var(--raz-primary-rgb),
            .14
        );
}


/* Firefox */

.raz-theme-range::-moz-range-track {

    height:
        4px;

    border:
        none;

    border-radius:
        999px;

    background:
        var(--raz-border);
}


.raz-theme-range::-moz-range-progress {

    height:
        4px;

    border-radius:
        999px;

    background:
        var(--raz-primary);
}


.raz-theme-range::-moz-range-thumb {

    width:
        13px;

    height:
        13px;

    border:
        2px solid
        var(--raz-surface);

    border-radius:
        50%;

    background:
        var(--raz-primary);
}


/* =========================================================
   THEME DRAWER
   ========================================================= */

.raz-theme-drawer {

    border-color:
        var(--raz-border) !important;

    background:
        var(--raz-surface) !important;
}


.raz-theme-head,
.raz-theme-footer {

    border-color:
        var(--raz-border) !important;

    background:
        var(--raz-surface) !important;
}


.raz-theme-preset,
.raz-theme-mode {

    border-color:
        var(--raz-border) !important;

    background:
        var(--raz-surface-2) !important;
}


.raz-theme-preset.active,
.raz-theme-mode.active {

    border-color:
        var(--raz-primary) !important;
}


/* =========================================================
   SETTINGS THEME PANEL
   ========================================================= */

.raz-theme-settings {

    border-color:
        var(--raz-border) !important;

    border-radius:
        var(--raz-radius) !important;

    background:
        var(--raz-surface) !important;
}


/* =========================================================
   LIGHT MODE REFINEMENT
   ========================================================= */

html[data-raz-theme="light"] body,
html[data-raz-theme="light"] .main {

    background:
        var(--raz-bg) !important;
}


html[data-raz-theme="light"] .source-card,
html[data-raz-theme="light"] .ops-card,
html[data-raz-theme="light"] .raz-theme-settings {

    background:
        #ffffff !important;
}


html[data-raz-theme="light"] .source-table tbody tr:hover,
html[data-raz-theme="light"] .ops-table tbody tr:hover {

    background:
        rgba(
            var(--raz-primary-rgb),
            .035
        ) !important;
}


/* =========================================================
   SIDEBAR VISUAL THEME ONLY
   Geometry intentionally untouched.
   ========================================================= */

html body
.raz-central-sidebar
.brand-mark {

    background:
        var(--raz-primary) !important;
}


html body
.raz-central-sidebar
.nav-item.active {

    background:
        rgba(
            var(--raz-primary-rgb),
            .12
        ) !important;

    box-shadow:
        inset 2px 0 0
        var(--raz-primary) !important;
}


html body
.raz-central-sidebar
.nav-item:hover {

    background:
        rgba(
            var(--raz-primary-rgb),
            .055
        ) !important;
}


/* =========================================================
   SIDEBAR ICONS
   ========================================================= */

.raz-nav-icon {

    width:
        17px;

    min-width:
        17px;

    height:
        17px;

    display:
        grid;

    place-items:
        center;

    margin-right:
        6px;

    border-radius:
        4px;

    background:
        transparent;

    color:
        currentColor;

    font-size:
        8px;

    font-weight:
        700;

    line-height:
        1;
}


.raz-central-sidebar
.nav-item.active
.raz-nav-icon {

    background:
        rgba(
            var(--raz-primary-rgb),
            .13
        );

    color:
        var(--raz-primary);
}


body.sidebar-collapsed
.raz-nav-icon {

    margin-right:
        0;
}


/* =========================================================
   RAZ SOURCE POLISH V3
   LIGHT THEME CONTRAST + LEGACY TOKEN NORMALIZATION
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL TEXT
   --------------------------------------------------------- */

html[data-raz-theme="light"] {

    --raz-text: #344050;
    --raz-muted: #5e6e82;
    --raz-muted-2: #748194;

    --raz-surface: #ffffff;
    --raz-surface-2: #f9fafd;
    --raz-surface-3: #edf2f9;

    --raz-border: #d8e2ef;
}


/* ---------------------------------------------------------
   FORCE LEGACY PAGE TEXT TO THEME TOKENS
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.main h1,

html[data-raz-theme="light"]
.main h2,

html[data-raz-theme="light"]
.main h3,

html[data-raz-theme="light"]
.main h4,

html[data-raz-theme="light"]
.main strong {

    color:
        var(--raz-text) !important;
}


html[data-raz-theme="light"]
.main p,

html[data-raz-theme="light"]
.main small,

html[data-raz-theme="light"]
.main label {

    color:
        var(--raz-muted) !important;
}


/* ---------------------------------------------------------
   DASHBOARD KPI VALUES
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.dashboard-stat strong,

html[data-raz-theme="light"]
.dashboard-stat .value,

html[data-raz-theme="light"]
.stat-value,

html[data-raz-theme="light"]
.metric-value,

html[data-raz-theme="light"]
.summary-value {

    color:
        #344050 !important;
}


/* ---------------------------------------------------------
   EDGE / ARM2 CARD
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.edge-card strong,

html[data-raz-theme="light"]
.edge-card h2,

html[data-raz-theme="light"]
.edge-card h3,

html[data-raz-theme="light"]
.selected-edge strong,

html[data-raz-theme="light"]
.selected-edge-name {

    color:
        #344050 !important;
}


html[data-raz-theme="light"]
.edge-card p,

html[data-raz-theme="light"]
.selected-edge p {

    color:
        #748194 !important;
}


/* ---------------------------------------------------------
   QUICK ACTIONS
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.quick-action {

    background:
        #ffffff !important;

    border-color:
        #d8e2ef !important;
}


html[data-raz-theme="light"]
.quick-action strong {

    color:
        #344050 !important;
}


html[data-raz-theme="light"]
.quick-action span,

html[data-raz-theme="light"]
.quick-action small {

    color:
        #748194 !important;
}


html[data-raz-theme="light"]
.quick-action-icon {

    background:
        rgba(
            var(--raz-primary-rgb),
            .08
        ) !important;

    color:
        var(--raz-primary) !important;
}


/* ---------------------------------------------------------
   TABLE CONTENT
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.source-table td,

html[data-raz-theme="light"]
.ops-table td,

html[data-raz-theme="light"]
.customer-table td,

html[data-raz-theme="light"]
table tbody td {

    color:
        #344050 !important;
}


html[data-raz-theme="light"]
.source-table td strong,

html[data-raz-theme="light"]
.ops-table td strong,

html[data-raz-theme="light"]
table tbody td strong {

    color:
        #344050 !important;
}


html[data-raz-theme="light"]
table tbody td small,

html[data-raz-theme="light"]
table tbody td span:not(.source-badge):not(.ops-badge) {

    color:
        #748194;
}


html[data-raz-theme="light"]
table thead th {

    color:
        #5e6e82 !important;

    background:
        #f9fafd !important;
}


/* ---------------------------------------------------------
   CUSTOMER TOTAL ROWS
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.page-total-row,

html[data-raz-theme="light"]
.grand-total-row,

html[data-raz-theme="light"]
.customer-total-row,

html[data-raz-theme="light"]
tfoot tr {

    background:
        rgba(
            var(--raz-primary-rgb),
            .035
        ) !important;
}


html[data-raz-theme="light"]
.page-total-row td,

html[data-raz-theme="light"]
.grand-total-row td,

html[data-raz-theme="light"]
tfoot td {

    color:
        #344050 !important;
}


/* ---------------------------------------------------------
   BILLING
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.billing-card strong,

html[data-raz-theme="light"]
.billing-value,

html[data-raz-theme="light"]
.billing-total {

    color:
        #344050 !important;
}


html[data-raz-theme="light"]
.billing-paid {

    color:
        var(--raz-accent) !important;
}


html[data-raz-theme="light"]
.billing-outstanding {

    color:
        var(--raz-warning) !important;
}


/* ---------------------------------------------------------
   SYSTEM STATUS
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.system-status-card span,

html[data-raz-theme="light"]
.system-status-card small {

    color:
        #748194 !important;
}


/* ---------------------------------------------------------
   CUSTOMER FILTER BAR
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.filter-pill,

html[data-raz-theme="light"]
.ops-filter,

html[data-raz-theme="light"]
.source-filter,

html[data-raz-theme="light"]
.service-filter,

html[data-raz-theme="light"]
.session-filter {

    background:
        #ffffff !important;

    color:
        #5e6e82 !important;
}


html[data-raz-theme="light"]
.filter-pill.active,

html[data-raz-theme="light"]
.ops-filter.active,

html[data-raz-theme="light"]
.source-filter.active,

html[data-raz-theme="light"]
.service-filter.active,

html[data-raz-theme="light"]
.session-filter.active {

    background:
        rgba(
            var(--raz-primary-rgb),
            .08
        ) !important;

    color:
        var(--raz-primary) !important;
}


/* ---------------------------------------------------------
   NORMAL BUTTONS
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.source-btn:not(.primary),

html[data-raz-theme="light"]
.ops-button:not(.primary),

html[data-raz-theme="light"]
.logout-button {

    background:
        #ffffff !important;

    border-color:
        #d8e2ef !important;

    color:
        #5e6e82 !important;
}


html[data-raz-theme="light"]
.source-btn:not(.primary):hover,

html[data-raz-theme="light"]
.ops-button:not(.primary):hover {

    border-color:
        var(--raz-primary) !important;

    color:
        var(--raz-primary) !important;
}


/* ---------------------------------------------------------
   PAGINATION
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.pagination button,

html[data-raz-theme="light"]
.page-button {

    background:
        #ffffff !important;

    border-color:
        #d8e2ef !important;

    color:
        #5e6e82 !important;
}


html[data-raz-theme="light"]
.pagination button.active,

html[data-raz-theme="light"]
.page-button.active {

    background:
        rgba(
            var(--raz-primary-rgb),
            .09
        ) !important;

    border-color:
        var(--raz-primary) !important;

    color:
        var(--raz-primary) !important;
}


/* ---------------------------------------------------------
   SETTINGS
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.raz-theme-settings,

html[data-raz-theme="light"]
.setting-section,

html[data-raz-theme="light"]
.system-body {

    color:
        #344050 !important;
}


html[data-raz-theme="light"]
.metric-row span {

    color:
        #748194 !important;
}


html[data-raz-theme="light"]
.metric-row strong {

    color:
        #344050 !important;
}


/* ---------------------------------------------------------
   THEME CUSTOMIZER LIGHT
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.raz-theme-drawer {

    background:
        #ffffff !important;
}


html[data-raz-theme="light"]
.raz-theme-head,

html[data-raz-theme="light"]
.raz-theme-footer {

    background:
        #ffffff !important;
}


html[data-raz-theme="light"]
.raz-theme-preset,

html[data-raz-theme="light"]
.raz-theme-mode {

    background:
        #f9fafd !important;

    color:
        #344050 !important;
}


/* ---------------------------------------------------------
   SELECTED / PRIMARY TEXT
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.source-eyebrow,

html[data-raz-theme="light"]
.ops-eyebrow {

    color:
        var(--raz-primary) !important;
}


/* ---------------------------------------------------------
   BADGES MUST KEEP SEMANTIC COLORS
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.source-badge.success,

html[data-raz-theme="light"]
.ops-badge.good {

    color:
        #00864e !important;

    background:
        rgba(0,210,122,.10) !important;
}


html[data-raz-theme="light"]
.source-badge.warning {

    color:
        #b75d17 !important;
}


html[data-raz-theme="light"]
.source-badge.danger {

    color:
        #c51f40 !important;
}


/* ---------------------------------------------------------
   TOP SEARCH / USER
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.user-menu,

html[data-raz-theme="light"]
.source-search,

html[data-raz-theme="light"]
.ops-search {

    background:
        #ffffff !important;

    border-color:
        #d8e2ef !important;
}


/* ---------------------------------------------------------
   KEEP SIDEBAR DARK IN LIGHT THEME
   This matches source admin layout.
   Geometry untouched.
   --------------------------------------------------------- */

html[data-raz-theme="light"]
.raz-central-sidebar {

    background:
        #0b1727 !important;
}


html[data-raz-theme="light"]
.raz-central-sidebar
.nav-item {

    color:
        #8fa1b5 !important;
}


html[data-raz-theme="light"]
.raz-central-sidebar
.nav-item.active {

    color:
        #ffffff !important;
}


/* =========================================================
   DARK MODE REFINEMENT
   ========================================================= */

html[data-raz-theme="dark"]
.source-card,

html[data-raz-theme="dark"]
.ops-card,

html[data-raz-theme="dark"]
.dashboard-stat {

    background:
        var(--raz-surface) !important;
}


html[data-raz-theme="dark"]
table tbody td {

    color:
        #cbd6e2;
}


/* =========================================================
   SOURCE-LIKE HOVER
   ========================================================= */

.quick-action:hover,
.dashboard-stat:hover {

    border-color:
        rgba(
            var(--raz-primary-rgb),
            .26
        ) !important;
}


.quick-action:hover {

    transform:
        translateY(-2px);
}


/* =========================================================
   TRANSPARENCY SUPPORT
   ========================================================= */

html[data-raz-card="glass"]
.source-card,

html[data-raz-card="glass"]
.ops-card,

html[data-raz-card="glass"]
.dashboard-stat,

html[data-raz-card="glass"]
.system-summary article,

html[data-raz-card="glass"]
.network-summary article {

    opacity:
        var(--raz-card-opacity);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}