/* Material look: its signature touches (plan 09). Values come from material.tokens.css. */

/* Filled fields: a tonal background, a bottom line only, the top corners rounded */
:root[data-look="material"] :is(.form-control, .form-select) {
    border-width: 0 0 1px;
    border-color: var(--opdms-border-strong);
    border-radius: 4px 4px 0 0;
    min-height: var(--opdms-control-h);
}
:root[data-look="material"] :is(.form-control, .form-select):focus {
    box-shadow: inset 0 -2px 0 var(--opdms-primary);
}
:root[data-look="material"] .form-label {
    font-size: var(--opdms-fs-sm);
    color: var(--opdms-muted);
}

/* Taller buttons, except inside .op-dense */
:root[data-look="material"] .btn:not(.btn-sm):not(.btn-link) {
    min-height: var(--opdms-control-h);
}

/* Borderless, elevated cards */
:root[data-look="material"] .card {
    --bs-card-border-width: 0;
}

/* Dialogs: 28px corners come from the tokens; no title rule, roomier padding */
:root[data-look="material"] .op-window {
    border: 0;
}
:root[data-look="material"] .op-window-titlebar {
    padding: 18px 24px 6px;
    font-size: 1.15em;
}
:root[data-look="material"] .op-window-content {
    padding: 8px 24px 20px;
}

/* Top nav: the active module is a tonal pill */
:root[data-look="material"] .topnav-link {
    border-color: transparent;
}
:root[data-look="material"] .topnav-link.topnav-active {
    background-color: color-mix(in srgb, var(--opdms-primary) 12%, transparent);
}
:root[data-look="material"] :is(.topnav-link.topnav-active, .topnav-link.topnav-active span) {
    color: var(--opdms-primary) !important;
}

/* Section switchers (Comps/OPSegmentedButtons): Material tabs -- uppercase labels over a
   divider, with a full-width primary indicator under the chosen one. */
:root[data-look="material"] .op-seg.btn-group {
    border-bottom: 1px solid var(--opdms-border);
    border-radius: 0;
}
:root[data-look="material"] .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: var(--opdms-fill);
    --bs-btn-hover-color: var(--opdms-primary);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--opdms-fill);
    --bs-btn-active-color: var(--opdms-primary);
    --bs-btn-active-border-color: transparent;
    margin-left: 0;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
:root[data-look="material"] .op-seg.btn-group > .btn[aria-pressed="true"] {
    --bs-btn-color: var(--opdms-primary);
}
:root[data-look="material"] .op-seg.btn-group > .btn[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background-color: var(--opdms-primary);
}