/* Platform UI refresh */
.btn-pcl-primary {
    background: var(--pcl-primary, #1e293b) !important;
    border-color: var(--pcl-primary, #1e293b) !important;
    color: #fff !important;
    border-radius: var(--pcl-radius-control, 8px);
}

.btn-pcl-outline {
    background: var(--pcl-surface, #fff) !important;
    border: 1px solid var(--pcl-secondary-border, #cbd5e1) !important;
    color: var(--pcl-text, #0f172a) !important;
    border-radius: var(--pcl-radius-control, 8px);
}

.btn-primary-light::before {
    background: rgb(var(--primary-rgb));
    position: absolute;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0%;
    width: 100%;
    transition: height 0.4s ease;
    border-radius: var(--border-radius);
    z-index: -1;
}
.btn-primary-light {
    position: relative;
    z-index: 1;
    transition: height 0.4s ease;
    border: none;
}
.btn-primary-light:hover::before {
    height: 100%;
    color: white;
}
.btn-primary-light:hover {
    background-color: transparent !important;
}
.btn-danger-light::before {
    background: rgb(var(--danger-rgb));
    position: absolute;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0%;
    width: 100%;
    transition: height 0.4s ease;
    border-radius: var(--border-radius);
    z-index: -1;
}
.btn-danger-light {
    position: relative;
    z-index: 1;
    transition: height 0.4s ease;
    border: none;
}
.btn-danger-light:hover::before {
    height: 100%;
    color: white;
}
.btn-danger-light:hover {
    background-color: transparent !important;
}
.btn-primary-light::before {
    background: rgb(var(--primary-rgb));
    position: absolute;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0%;
    width: 100%;
    transition: height 0.4s ease;
    border-radius: var(--border-radius);
    z-index: -1;
}

.btn-primary-light {
    position: relative;
    z-index: 1;
    transition: height 0.4s ease;
    border: none;
}
.btn-primary-light:hover::before {
    height: 100%;
    color: var(--custom-white);
}
.btn-primary-light:hover {
    background-color: transparent !important;
}
.btn-danger-light::before {
    background: rgb(var(--danger-rgb));
    position: absolute;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0%;
    width: 100%;
    transition: height 0.4s ease;
    border-radius: var(--border-radius);
    z-index: -1;
}
.btn-danger-light {
    position: relative;
    z-index: 1;
    transition: height 0.4s ease;
    border: none;
}
.btn-danger-light:hover::before {
    height: 100%;
    color: var(--custom-white);
}
.btn-danger-light:hover {
    background-color: transparent !important;
}
.label-btn-icon {
    align-items: center;
    display: flex;
}
.btn.btn-disabled:hover, .btn.btn-disabled {
    cursor: not-allowed;
    background: #bebebe !important;
    border-color: #bebebe !important;
}

/* Outline buttons — theme colors from colors.css (border @ 30% opacity, text @ full color) */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-orange,
.btn-outline-pink,
.btn-outline-teal,
.btn-outline-purple,
.btn-outline-persian-green,
.btn-outline-persian-red,
.btn-outline-amber-gold,
.btn-outline-persian-olive,
.btn-outline-meant-foam,
.btn-outline-mint-foam,
.btn-outline-bronze-amber,
.btn-outline-amber-cream,
.btn-outline-slate-steel,
.btn-outline-state-indigo,
.btn-outline-jungle-emerald,
.btn-outline-crimson-rose,
.btn-outline-ocean-blue,
.btn-outline-soft-violet,
.btn-outline-pacific-teal,
.btn-outline-amber-ember,
.btn-outline-marigold-sun,
.btn-outline-slate-storm,
.btn-outline-coral-flame,
.btn-outline-fern-green,
.btn-outline-rose-quartz,
.btn-outline-steel-sapphire,
.btn-outline-copper-rust,
.btn-outline-midnight-plum,
.btn-outline-sage-mist,
.btn-outline-dusk-magenta,
.btn-outline-cobalt-depth {
    background: var(--pcl-surface) !important;
    border-radius: var(--pcl-radius-control);
}

.btn-outline-primary {
    border: 1px solid var(--primary03) !important;
    color: var(--primary-color) !important;
}

.btn-outline-secondary {
    border: 1px solid rgba(var(--secondary-rgb), 0.3) !important;
    color: var(--secondary-color) !important;
}

.btn-outline-success {
    border: 1px solid rgba(var(--success-rgb), 0.3) !important;
    color: var(--success-color) !important;
}

.btn-outline-info {
    border: 1px solid rgba(var(--info-rgb), 0.3) !important;
    color: var(--info-color) !important;
}

.btn-outline-warning {
    border: 1px solid rgba(var(--warning-rgb), 0.3) !important;
    color: var(--warning-color) !important;
}

.btn-outline-danger {
    border: 1px solid rgba(var(--danger-rgb), 0.3) !important;
    color: var(--danger-color) !important;
}

.btn-outline-light {
    border: 1px solid rgba(var(--light-rgb), 0.3) !important;
    color: var(--gray-7) !important;
}

.btn-outline-dark {
    border: 1px solid rgba(var(--dark-rgb), 0.3) !important;
    color: var(--dark-color) !important;
}

.btn-outline-orange {
    border: 1px solid rgba(var(--orange-rgb), 0.3) !important;
    color: var(--orange-color) !important;
}

.btn-outline-pink {
    border: 1px solid rgba(var(--pink-rgb), 0.3) !important;
    color: var(--pink-color) !important;
}

.btn-outline-teal {
    border: 1px solid rgba(var(--teal-rgb), 0.3) !important;
    color: var(--teal-color) !important;
}

.btn-outline-purple {
    border: 1px solid rgba(var(--purple-rgb), 0.3) !important;
    color: var(--purple-color) !important;
}

.btn-outline-persian-green {
    border: 1px solid var(--persian-green03) !important;
    color: var(--persian-green-color) !important;
}

.btn-outline-persian-red {
    border: 1px solid var(--persian-red03) !important;
    color: var(--persian-red-color) !important;
}

.btn-outline-amber-gold {
    border: 1px solid var(--amber-gold03) !important;
    color: var(--amber-gold-color) !important;
}

.btn-outline-persian-olive {
    border: 1px solid var(--persian-olive03) !important;
    color: var(--persian-olive-color) !important;
}

.btn-outline-meant-foam {
    border: 1px solid var(--meant-foam03) !important;
    color: var(--meant-foam-color) !important;
}

.btn-outline-mint-foam {
    border: 1px solid rgba(var(--mint-foam-rgb), 0.3) !important;
    color: var(--meant-foam-color) !important;
}

.btn-outline-bronze-amber {
    border: 1px solid rgba(var(--bronze-amber-rgb), 0.3) !important;
    color: var(--bronze-amber-color) !important;
}

.btn-outline-amber-cream {
    border: 1px solid rgba(var(--amber-cream-rgb), 0.3) !important;
    color: var(--amber-gold-color) !important;
}

.btn-outline-slate-steel {
    border: 1px solid var(--slate-steel03) !important;
    color: var(--slate-steel-color) !important;
}

.btn-outline-state-indigo {
    border: 1px solid var(--state-indigo03) !important;
    color: var(--state-indigo) !important;
}

.btn-outline-jungle-emerald {
    border: 1px solid var(--jungle-emerald03) !important;
    color: var(--jungle-emerald) !important;
}

.btn-outline-crimson-rose {
    border: 1px solid var(--crimson-rose03) !important;
    color: var(--crimson-rose) !important;
}

.btn-outline-ocean-blue {
    border: 1px solid var(--ocean-blue03) !important;
    color: var(--ocean-blue) !important;
}

.btn-outline-soft-violet {
    border: 1px solid var(--soft-violet03) !important;
    color: var(--soft-violet) !important;
}

.btn-outline-pacific-teal {
    border: 1px solid var(--pacific-teal03) !important;
    color: var(--pacific-teal) !important;
}

.btn-outline-amber-ember {
    border: 1px solid var(--amber-ember03) !important;
    color: var(--amber-ember) !important;
}

.btn-outline-marigold-sun {
    border: 1px solid var(--marigold-sun03) !important;
    color: var(--marigold-sun) !important;
}

.btn-outline-slate-storm {
    border: 1px solid var(--slate-storm03) !important;
    color: var(--slate-storm) !important;
}

.btn-outline-coral-flame {
    border: 1px solid var(--coral-flame03) !important;
    color: var(--coral-flame) !important;
}

.btn-outline-fern-green {
    border: 1px solid var(--fern-green03) !important;
    color: var(--fern-green) !important;
}

.btn-outline-rose-quartz {
    border: 1px solid var(--rose-quartz03) !important;
    color: var(--rose-quartz) !important;
}

.btn-outline-steel-sapphire {
    border: 1px solid var(--steel-sapphire03) !important;
    color: var(--steel-sapphire) !important;
}

.btn-outline-copper-rust {
    border: 1px solid var(--copper-rust03) !important;
    color: var(--copper-rust) !important;
}

.btn-outline-midnight-plum {
    border: 1px solid var(--midnight-plum03) !important;
    color: var(--midnight-plum) !important;
}

.btn-outline-sage-mist {
    border: 1px solid var(--sage-mist03) !important;
    color: var(--sage-mist) !important;
}

.btn-outline-dusk-magenta {
    border: 1px solid var(--dusk-magenta03) !important;
    color: var(--dusk-magenta) !important;
}

.btn-outline-cobalt-depth {
    border: 1px solid var(--cobalt-depth03) !important;
    color: var(--cobalt-depth) !important;
}

/* Outline button hover — subtle tint, preserve border + text color */
.btn-outline-primary:hover { background: var(--primary005) !important; }
.btn-outline-secondary:hover { background: rgba(var(--secondary-rgb), 0.05) !important; }
.btn-outline-success:hover { background: var(--success005) !important; }
.btn-outline-info:hover { background: rgba(var(--info-rgb), 0.05) !important; }
.btn-outline-warning:hover { background: var(--warning005) !important; }
.btn-outline-danger:hover { background: var(--danger005) !important; }
.btn-outline-light:hover { background: rgba(var(--light-rgb), 0.05) !important; }
.btn-outline-dark:hover { background: rgba(var(--dark-rgb), 0.05) !important; }
.btn-outline-orange:hover { background: rgba(var(--orange-rgb), 0.05) !important; }
.btn-outline-pink:hover { background: rgba(var(--pink-rgb), 0.05) !important; }
.btn-outline-teal:hover { background: rgba(var(--teal-rgb), 0.05) !important; }
.btn-outline-purple:hover { background: var(--purple005) !important; }
.btn-outline-persian-green:hover { background: rgba(var(--persian-green-rgb), 0.05) !important; }
.btn-outline-persian-red:hover { background: var(--persian-red01) !important; }
.btn-outline-amber-gold:hover { background: var(--amber-gold01) !important; }
.btn-outline-persian-olive:hover { background: var(--persian-olive01) !important; }
.btn-outline-meant-foam:hover { background: var(--meant-foam01) !important; }
.btn-outline-mint-foam:hover { background: rgba(var(--mint-foam-rgb), 0.05) !important; }
.btn-outline-bronze-amber:hover { background: rgba(var(--bronze-amber-rgb), 0.05) !important; }
.btn-outline-amber-cream:hover { background: rgba(var(--amber-cream-rgb), 0.05) !important; }
.btn-outline-slate-steel:hover { background: var(--slate-steel01) !important; }
.btn-outline-state-indigo:hover { background: var(--state-indigo01) !important; }
.btn-outline-jungle-emerald:hover { background: var(--jungle-emerald005) !important; }
.btn-outline-crimson-rose:hover { background: var(--crimson-rose005) !important; }
.btn-outline-ocean-blue:hover { background: var(--ocean-blue005) !important; }
.btn-outline-soft-violet:hover { background: var(--soft-violet005) !important; }
.btn-outline-pacific-teal:hover { background: var(--pacific-teal005) !important; }
.btn-outline-amber-ember:hover { background: var(--amber-ember005) !important; }
.btn-outline-marigold-sun:hover { background: var(--marigold-sun005) !important; }
.btn-outline-slate-storm:hover { background: var(--slate-storm005) !important; }
.btn-outline-coral-flame:hover { background: var(--coral-flame005) !important; }
.btn-outline-fern-green:hover { background: var(--fern-green005) !important; }
.btn-outline-rose-quartz:hover { background: var(--rose-quartz005) !important; }
.btn-outline-steel-sapphire:hover { background: var(--steel-sapphire005) !important; }
.btn-outline-copper-rust:hover { background: var(--copper-rust005) !important; }
.btn-outline-midnight-plum:hover { background: var(--midnight-plum01) !important; }
.btn-outline-sage-mist:hover { background: var(--sage-mist005) !important; }
.btn-outline-dusk-magenta:hover { background: var(--dusk-magenta005) !important; }
.btn-outline-cobalt-depth:hover { background: var(--cobalt-depth005) !important; }