proxmorph/themes/pdm/proxmorph-pdm-base.css

/*!ProxMorph PDM Base*/
/*
 * ProxMorph PDM Base Styles
 * Version: 1.0.0
 *
 * Shared component-level styling applied whenever ANY ProxMorph PDM theme
 * is active. Overrides the default PWt shape/corner/shadow tokens to
 * give rounded corners, better elevation shadows, and polished component
 * appearance.
 *
 * This file does NOT set colors — colors come from theme-specific CSS.
 */

/* ===== Shape & Corner Overrides ===== */
:root {
    /* Global shape tokens — increase roundness */
    --pwt-shape-corner-none: 0px !important;
    --pwt-shape-corner-extra-small: 4px !important;
    --pwt-shape-corner-small: 8px !important;
    --pwt-shape-corner-medium: 12px !important;
    --pwt-shape-corner-large: 16px !important;
    --pwt-shape-corner-extra-large: 24px !important;

    /* Component-specific corner shapes */
    --pwt-button-corner-shape: 8px !important;
    --pwt-card-corner-shape: 12px !important;
    --pwt-dialog-corner-shape: 12px !important;
    --pwt-input-corner-shape: 8px !important;
    --pwt-fab-corner-shape: 16px !important;
    --pwt-progress-corner-shape: 8px !important;
    --pwt-nav-link-corner-shape: 8px !important;
    --pwt-nav-pills-corner-shape: 8px !important;
    --pwt-tooltip-corner-shape: 8px !important;
}

/* ===== Panel Styling ===== */
.pwt-panel {
    border-radius: 12px !important;
    overflow: clip !important;  /* clip (not hidden) preserves min-width:auto for correct flex wrapping */
}

.pwt-panel-header {
    border-radius: 12px 12px 0 0 !important;
}

/* ===== Shadow Enhancements ===== */
.pwt-shadow2 {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* ===== Dialog Styling ===== */
dialog,
.pwt-dialog:not(.pwt-dropdown) {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
}

/* ===== Button Enhancements ===== */
.pwt-button {
    border-radius: 8px !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.pwt-button:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.pwt-button.rounded,
.pwt-button.circle {
    border-radius: 10rem !important;
}

/* Segmented buttons: rounded ends only */
.pwt-segmented-button {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.pwt-segmented-button > .pwt-button {
    border-radius: 0px !important;
}

.pwt-segmented-button > .pwt-button:first-child {
    border-radius: 8px 0 0 8px !important;
}

.pwt-segmented-button > .pwt-button:last-child {
    border-radius: 0 8px 8px 0 !important;
}

/* FAB */
.pwt-fab {
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ===== Input / Form Enhancements ===== */
.pwt-input {
    border-radius: 8px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.pwt-input:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--pwt-color-primary-80), 0.3) !important;
}

.pwt-textarea {
    border-radius: 8px !important;
}

.pwt-input-display {
    border-radius: 8px !important;
}

/* ===== Card Styling ===== */
.pwt-card {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ===== Navigation ===== */
.pwt-nav-link {
    border-radius: 8px !important;
    transition: background-color 0.15s ease !important;
}

.pwt-nav-menu {
    border-radius: 8px !important;
}

/* ===== Datatable Enhancements ===== */
.pwt-datatable {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.pwt-datatable-header {
    border-radius: 8px 8px 0 0 !important;
}

/* ===== Menu / Dropdown ===== */
.pwt-submenu {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
}

.pwt-dropdown {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
}

/* ===== List / List Tile ===== */
.pwt-list {
    border-radius: 8px !important;
}

.pwt-list-tile {
    border-radius: 8px !important;
}

/* ===== Meter / Progress ===== */
.pwt-meter {
    border-radius: 8px !important;
}

/* ===== Switch ===== */
.pwt-switch {
    border-radius: 14px !important;
}

/* ===== Tooltips ===== */
[class*="pwt-tooltip"] {
    border-radius: 8px !important;
}

/* ===== Scrollbar Styling ===== */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px !important;
    background: rgba(128, 128, 128, 0.4) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.6) !important;
}

/* ===== Logo tinting (dark themes) ===== */
.pwt-dark-mode img[src*="proxmox_logo"] {
    filter: brightness(0.9) !important;
}

/* ===== Smooth transitions for theme switching ===== */
*,
*::before,
*::after {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow !important;
    transition-duration: 0.15s !important;
    transition-timing-function: ease !important;
}

/* Restore tab indicator slide animation (needs left/width/inset transitions) */
.pwt-tab-active-indicator {
    transition: all 0.2s ease !important;
}