/* Clean SaaS look: its signature touches (plan 09). Values come from saas.tokens.css. */

/* A status dot inside every badge */
:root[data-look="saas"] .badge:not(.rounded-circle)::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 0.4em;
    vertical-align: 0.1em;
}

/* Quiet rows that light up on hover, under a header band */
:root[data-look="saas"] .table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--opdms-subtle);
}

:root[data-look="saas"] .btn-link {
    text-decoration: none;
}

:root[data-look="saas"] .form-label {
    font-size: var(--opdms-fs-sm);
    color: var(--opdms-muted-strong);
}

/* Top nav: the active module is an underline bar, not a filled pill */
:root[data-look="saas"] .topnav-link {
    border-color: transparent;
}
:root[data-look="saas"] .topnav-link.topnav-active {
    background-color: transparent;
    border-radius: 0;
    box-shadow: inset 0 -2px 0 var(--opdms-primary);
}
:root[data-look="saas"] :is(.topnav-link.topnav-active, .topnav-link.topnav-active span) {
    color: var(--opdms-primary) !important;
}

/* Section switchers (Comps/OPSegmentedButtons): a grey track with the chosen item raised
   on a white pill, instead of a row of outlined buttons. Classic keeps the buttons. */
:root[data-look="saas"] .op-seg.btn-group {
    gap: 2px;
    padding: 2px;
    background-color: var(--opdms-fill);
    border-radius: var(--opdms-radius-btn);
}
:root[data-look="saas"] .op-seg.btn-group > .btn {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--opdms-muted-strong);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--opdms-text);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--opdms-surface);
    --bs-btn-active-color: var(--opdms-text);
    --bs-btn-active-border-color: transparent;
    margin-left: 0;
    border-radius: calc(var(--opdms-radius-btn) - 2px);
}
:root[data-look="saas"] .op-seg.btn-group > .btn[aria-pressed="true"] {
    --bs-btn-bg: var(--opdms-surface);
    --bs-btn-color: var(--opdms-text);
    --bs-btn-hover-bg: var(--opdms-surface);
    /* !important to outlast the switcher's no-focus-ring rule (OPSegmentedButtons) once clicked. */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}