/* =============================================================================
   pgModeler Site — Dark UI Theme
   Paleta inspirada na interface nativa do pgModeler.
   Loaded by root.blade.php only (public site). Admin layout unaffected.
   Bootstrap 3.3.6 stays intact — all rules use !important to override it.
   Tema permanente dark (sem alternância light/dark).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Custom Properties — Paleta pgModeler
   ----------------------------------------------------------------------------- */
:root {
    /* Tipografia */
    --pgm-font:             'Exo 2', 'Noto Sans', sans-serif;

    /* Fundos */
    --pgm-body-bg:          #232d3a;
    --pgm-card-bg:          #2b3a4d;
    --pgm-alt-bg:           #1e2b3a;
    --pgm-navbar-bg:        #161f2c;
    --pgm-footer-bg:        #161f2c;
    --pgm-input-bg:         #1a2535;

    /* Texto */
    --pgm-text:             #d8e6f3;
    --pgm-muted:            #94adc4;

    /* Bordas & divisores */
    --pgm-border:           #3a4d62;

    /* Acentos */
    --pgm-primary:          #4a8dd0;
    --pgm-green:            #3d9858;

    /* Links */
    --pgm-link:             #7ec8ff;
    --pgm-link-hover:       #b0dcff;

    /* Raios */
    --pgm-radius:           8px;
    --pgm-radius-sm:        4px;

    /* ── Cores semânticas (mapeadas dos diálogos pgModeler) ── */

    /* Success → pgm-success (verde escuro) */
    --pgm-success-bg:       #2e6b47;
    --pgm-success-border:   #3d9b60;
    --pgm-success-text:     #c8eed8;
    --pgm-success-heading:  #a6deb8;

    /* Danger → pgm-error (vinho) */
    --pgm-danger-bg:        #5c2030;
    --pgm-danger-border:    #c0304a;
    --pgm-danger-text:      #f0c0c8;
    --pgm-danger-heading:   #e89095;

    /* Warning → pgm-alert (oliva) */
    --pgm-warning-bg:       #4a4520;
    --pgm-warning-border:   #c8a020;
    --pgm-warning-text:     #f0e0a0;
    --pgm-warning-heading:  #dcc870;

    /* Info → pgm-info (azul aço) */
    --pgm-info-bg:          #3a5f78;
    --pgm-info-border:      #5a8aaa;
    --pgm-info-text:        #c0dced;
    --pgm-info-heading:     #90c0d8;
}

/* -----------------------------------------------------------------------------
   2. Body & Tipografia
   ----------------------------------------------------------------------------- */
body {
    font-family:      var(--pgm-font) !important;
    background:       var(--pgm-body-bg) !important;
    background-color: var(--pgm-body-bg) !important;
    color:            var(--pgm-text) !important;
    line-height:      1.6 !important;
    /* Firefox */
    scrollbar-color:  var(--pgm-border) var(--pgm-alt-bg) !important;
    scrollbar-width:  thin !important;
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width:  8px !important;
    height: 8px !important;
}
::-webkit-scrollbar-track {
    background: var(--pgm-alt-bg) !important;
}
::-webkit-scrollbar-thumb {
    background:    var(--pgm-border) !important;
    border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--pgm-muted) !important;
}

body p {
    line-height: 1.6 !important;
    color:       var(--pgm-text) !important;
}

h1, h2, h3, h4, h5, h6 {
    color:       var(--pgm-text) !important;
    font-family: var(--pgm-font) !important;
}

h1, h2 {
    font-weight:    700 !important;
    letter-spacing: -0.02em !important;
}

h3, h4 {
    font-weight: 600 !important;
}

h1 small, h2 small, h3 small,
h4 small, h5 small, h6 small {
    color: var(--pgm-muted) !important;
}

a {
    color: var(--pgm-link) !important;
}

a:hover, a:focus {
    color: var(--pgm-link-hover) !important;
}

.text-muted {
    color: var(--pgm-muted) !important;
}

hr {
    border-color: var(--pgm-border) !important;
}

label {
    color: var(--pgm-text) !important;
}

/* -----------------------------------------------------------------------------
   3. Section Spacing & Backgrounds
   ----------------------------------------------------------------------------- */
.section-wrapper {
    padding-top:      50px !important;
    padding-bottom:   50px !important;
    background:       var(--pgm-body-bg) !important;
    background-color: var(--pgm-body-bg) !important;
}

.section-wrapper.alt-bg {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-top:       1px solid var(--pgm-border) !important;
    border-bottom:    1px solid var(--pgm-border) !important;
}

@media (max-width: 767px) {
    .section-wrapper {
        padding-top:    25px !important;
        padding-bottom: 25px !important;
    }
}

/* -----------------------------------------------------------------------------
   4. Navbar — Flat & Dark
   ----------------------------------------------------------------------------- */
.navbar-inverse {
    background:       var(--pgm-navbar-bg) !important;
    background-color: var(--pgm-navbar-bg) !important;
    background-image: none !important;
    border:           none !important;
    box-shadow:       0 2px 8px rgba(0,0,0,0.45) !important;
}

.navbar-inverse .navbar-nav > li > a {
    color:      var(--pgm-text) !important;
    transition: color 0.2s ease !important;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color:            #ffffff !important;
    background-color: rgba(74,141,208,0.15) !important;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: rgba(74,141,208,0.25) !important;
    color:            #ffffff !important;
}

.navbar-inverse .navbar-toggle {
    border-color: var(--pgm-border) !important;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: var(--pgm-text) !important;
}

/* -----------------------------------------------------------------------------
   5. Botões — Flat, estilo componentes pgModeler
   ----------------------------------------------------------------------------- */
.btn {
    background-image: none !important;
    border-radius:    var(--pgm-radius-sm) !important;
    font-weight:      500 !important;
    transition:       all 0.2s ease !important;
    letter-spacing:   0.01em !important;
}

/* Primary */
.btn-primary {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    border-color:     #7ab8f0 !important;
    color:            #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background:       #3d7dc0 !important;
    background-color: #3d7dc0 !important;
    border-color:     #3d7dc0 !important;
    color:            #ffffff !important;
}

/* Success / Apply (verde pgModeler) */
.btn-success {
    background:       var(--pgm-green) !important;
    background-color: var(--pgm-green) !important;
    border-color:     #5ecb7a !important;
    color:            #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
    background:       #328048 !important;
    background-color: #328048 !important;
    border-color:     #328048 !important;
    color:            #ffffff !important;
    transform:        scale(1.02) !important;
}

.btn-success:active {
    transform: scale(0.99) !important;
}

/* Danger / Discard (vinho pgModeler) */
.btn-danger {
    background:       var(--pgm-danger-bg) !important;
    background-color: var(--pgm-danger-bg) !important;
    border-color:     var(--pgm-danger-border) !important;
    color:            var(--pgm-danger-text) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background:       #6e2538 !important;
    background-color: #6e2538 !important;
    border-color:     var(--pgm-danger-border) !important;
    color:            #ffffff !important;
}

/* Warning */
.btn-warning {
    background:       var(--pgm-warning-bg) !important;
    background-color: var(--pgm-warning-bg) !important;
    border-color:     var(--pgm-warning-border) !important;
    color:            var(--pgm-warning-text) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background:       #5a5228 !important;
    background-color: #5a5228 !important;
    border-color:     var(--pgm-warning-border) !important;
    color:            #ffffff !important;
}

/* Info (azul aço pgModeler) */
.btn-info {
    background:       var(--pgm-info-bg) !important;
    background-color: var(--pgm-info-bg) !important;
    border-color:     var(--pgm-info-border) !important;
    color:            var(--pgm-info-text) !important;
}

.btn-info:hover,
.btn-info:focus {
    background:       #4a7090 !important;
    background-color: #4a7090 !important;
    border-color:     var(--pgm-info-border) !important;
    color:            #ffffff !important;
}

/* Default */
.btn-default {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border-color:     var(--pgm-border) !important;
    color:            var(--pgm-text) !important;
    background-image: none !important;
}

.btn-default:hover,
.btn-default:focus {
    background:       #35485e !important;
    background-color: #35485e !important;
    border-color:     var(--pgm-primary) !important;
    color:            #ffffff !important;
}

.btn-checked,
.btn-checked:hover,
.btn-checked:focus,
.btn-pkg-checked,
.btn-pkg-checked:hover,
.btn-pkg-checked:focus {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    border-color:     #7ab8f0 !important;
    color:            #ffffff !important;
}

/* -----------------------------------------------------------------------------
   6. Cards (.content-card) — usa shorthand E longhand para vencer custom.css
   ----------------------------------------------------------------------------- */
.content-card {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border-color:     var(--pgm-border) !important;
    box-shadow:       0 4px 12px rgba(0,0,0,0.45) !important;
}

.content-card p,
.content-card li,
.content-card strong {
    color: var(--pgm-text) !important;
}

.content-card .text-muted {
    color: var(--pgm-muted) !important;
}

@media (max-width: 767px) {
    .content-card {
        margin-left:  15px !important;
        margin-right: 15px !important;
    }
}

/* -----------------------------------------------------------------------------
   7. Panels & Wells
   ----------------------------------------------------------------------------- */
.panel {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    background-image: none !important;
    border:           1px solid var(--pgm-border) !important;
    border-radius:    var(--pgm-radius) !important;
    box-shadow:       0 4px 12px rgba(0,0,0,0.45) !important;
}

.panel-heading {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    background-image: none !important;
    border-bottom:    1px solid var(--pgm-border) !important;
    border-radius:    var(--pgm-radius) var(--pgm-radius) 0 0 !important;
    color:            var(--pgm-text) !important;
}

.panel-title {
    color: var(--pgm-text) !important;
}

.panel-body {
    color: var(--pgm-text) !important;
}

.well {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    background-image: none !important;
    border:           1px solid var(--pgm-border) !important;
    border-radius:    var(--pgm-radius) !important;
    box-shadow:       0 4px 12px rgba(0,0,0,0.45) !important;
    color:            var(--pgm-text) !important;
}

#amountDiv.well {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border:           1px solid var(--pgm-border) !important;
    box-shadow:       none !important;
    color:            var(--pgm-text) !important;
}

.card {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border-color:     var(--pgm-border) !important;
}

/* -----------------------------------------------------------------------------
   8. Tables
   ----------------------------------------------------------------------------- */
.table {
    color:            var(--pgm-text) !important;
    background-color: transparent !important;
}

.table > thead > tr > th {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-color:     var(--pgm-border) !important;
    color:            var(--pgm-text) !important;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-color: var(--pgm-border) !important;
    color:        var(--pgm-text) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background:       rgba(30,43,58,0.5) !important;
    background-color: rgba(30,43,58,0.5) !important;
}

.table > tbody > tr:hover > td {
    background:       rgba(74,141,208,0.08) !important;
    background-color: rgba(74,141,208,0.08) !important;
}

/* -----------------------------------------------------------------------------
   9. Formulários & Inputs
   ----------------------------------------------------------------------------- */
.form-control {
    background:       var(--pgm-input-bg) !important;
    background-color: var(--pgm-input-bg) !important;
    border:           1px solid var(--pgm-border) !important;
    border-radius:    var(--pgm-radius-sm) !important;
    color:            var(--pgm-text) !important;
}

.form-control:focus {
    background:       var(--pgm-input-bg) !important;
    background-color: var(--pgm-input-bg) !important;
    border-color:     var(--pgm-primary) !important;
    box-shadow:       0 0 0 2px rgba(74,141,208,0.3) !important;
    color:            var(--pgm-text) !important;
    outline:          none !important;
}

.form-control::placeholder {
    color:   var(--pgm-muted) !important;
    opacity: 0.8;
}

/* Autofill override — browsers ignore background-color on autofilled inputs,
   so we use a large inset box-shadow to paint the background instead. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow:    0 0 0 1000px var(--pgm-input-bg) inset !important;
    box-shadow:            0 0 0 1000px var(--pgm-input-bg) inset !important;
    -webkit-text-fill-color: var(--pgm-text) !important;
    caret-color:           var(--pgm-text) !important;
    border-color:          var(--pgm-border) !important;
    transition:            background-color 5000s ease-in-out 0s;
}

select.form-control option {
    background-color: var(--pgm-input-bg) !important;
    color:            var(--pgm-text) !important;
}

/* -----------------------------------------------------------------------------
   10. Alerts — Mapeamento diálogos pgModeler
   ----------------------------------------------------------------------------- */
.alert {
    border-radius:     var(--pgm-radius) !important;
    border-left-width: 4px !important;
}

/* Success → pgm-success */
.alert-success {
    background:       var(--pgm-success-bg) !important;
    background-color: var(--pgm-success-bg) !important;
    border-color:     var(--pgm-success-border) !important;
    color:            var(--pgm-success-text) !important;
}

.alert-success h4,
.alert-success .alert-heading {
    color: var(--pgm-success-heading) !important;
}

.alert-success a {
    color:           var(--pgm-success-heading) !important;
    font-weight:     600 !important;
    text-decoration: underline !important;
    transition:      color 0.2s, text-shadow 0.2s !important;
}
.alert-success a:hover {
    color: #ffffff !important;
}

/* Danger → pgm-error */
.alert-danger,
.alert-error {
    background:       var(--pgm-danger-bg) !important;
    background-color: var(--pgm-danger-bg) !important;
    border-color:     var(--pgm-danger-border) !important;
    color:            var(--pgm-danger-text) !important;
}

.alert-danger h4,
.alert-danger .alert-heading {
    color: var(--pgm-danger-heading) !important;
}

.alert-danger a {
    color:           var(--pgm-danger-heading) !important;
    font-weight:     600 !important;
    text-decoration: underline !important;
    transition:      color 0.2s, text-shadow 0.2s !important;
}
.alert-danger a:hover {
    color: #ffffff !important;
}

/* Warning → pgm-alert */
.alert-warning {
    background:       var(--pgm-warning-bg) !important;
    background-color: var(--pgm-warning-bg) !important;
    border-color:     var(--pgm-warning-border) !important;
    color:            var(--pgm-warning-text) !important;
}

.alert-warning h4,
.alert-warning .alert-heading {
    color: var(--pgm-warning-heading) !important;
}

.alert-warning a {
    color:           var(--pgm-warning-heading) !important;
    font-weight:     600 !important;
    text-decoration: underline !important;
    transition:      color 0.2s, text-shadow 0.2s !important;
}
.alert-warning a:hover {
    color: #ffffff !important;
}

/* Info → pgm-info */
.alert-info {
    background:       var(--pgm-info-bg) !important;
    background-color: var(--pgm-info-bg) !important;
    border-color:     var(--pgm-info-border) !important;
    color:            var(--pgm-info-text) !important;
}

.alert-info h4,
.alert-info .alert-heading {
    color: var(--pgm-info-heading) !important;
}

.alert-info a {
    color:           #b8e4f8 !important;
    font-weight:     600 !important;
    text-decoration: underline !important;
    transition:      color 0.2s, text-shadow 0.2s !important;
}
.alert-info a:hover {
    color: #ffffff !important;
}

.alert .close {
    color:   var(--pgm-text) !important;
    opacity: 0.6 !important;
}

.alert .close:hover {
    opacity: 1 !important;
}

/* -----------------------------------------------------------------------------
   11. Panels Semânticos — Mapeamento diálogos pgModeler
   ----------------------------------------------------------------------------- */
.panel-success {
    border-color: var(--pgm-success-border) !important;
}

.panel-success > .panel-heading {
    background:       var(--pgm-success-bg) !important;
    background-color: var(--pgm-success-bg) !important;
    border-color:     var(--pgm-success-border) !important;
    color:            var(--pgm-success-text) !important;
}

.panel-danger {
    border-color: var(--pgm-danger-border) !important;
}

.panel-danger > .panel-heading {
    background:       var(--pgm-danger-bg) !important;
    background-color: var(--pgm-danger-bg) !important;
    border-color:     var(--pgm-danger-border) !important;
    color:            var(--pgm-danger-text) !important;
}

.panel-warning {
    border-color: var(--pgm-warning-border) !important;
}

.panel-warning > .panel-heading {
    background:       var(--pgm-warning-bg) !important;
    background-color: var(--pgm-warning-bg) !important;
    border-color:     var(--pgm-warning-border) !important;
    color:            var(--pgm-warning-text) !important;
}

.panel-info {
    border-color: var(--pgm-info-border) !important;
}

.panel-info > .panel-heading {
    background:       var(--pgm-info-bg) !important;
    background-color: var(--pgm-info-bg) !important;
    border-color:     var(--pgm-info-border) !important;
    color:            var(--pgm-info-text) !important;
}

.panel-primary {
    border-color: var(--pgm-primary) !important;
}

.panel-primary > .panel-heading {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    border-color:     var(--pgm-primary) !important;
    color:            #ffffff !important;
}

/* -----------------------------------------------------------------------------
   12. Modais
   ----------------------------------------------------------------------------- */
.modal-content {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border:           1px solid var(--pgm-border) !important;
    border-radius:    var(--pgm-radius) !important;
    box-shadow:       0 8px 24px rgba(0,0,0,0.5) !important;
    color:            var(--pgm-text) !important;
}

.modal-header {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-bottom:    1px solid var(--pgm-border) !important;
    border-radius:    var(--pgm-radius) var(--pgm-radius) 0 0 !important;
}

.modal-title {
    color: var(--pgm-text) !important;
}

.modal-footer {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-top:       1px solid var(--pgm-border) !important;
    border-radius:    0 0 var(--pgm-radius) var(--pgm-radius) !important;
}

.modal-body {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    color:            var(--pgm-text) !important;
}

.close {
    color:       var(--pgm-text) !important;
    opacity:     0.6 !important;
    text-shadow: none !important;
}

.close:hover {
    opacity: 1 !important;
    color:   #ffffff !important;
}

/* -----------------------------------------------------------------------------
   13. Dropdowns
   ----------------------------------------------------------------------------- */
.dropdown-menu {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border:           1px solid var(--pgm-border) !important;
    border-radius:    var(--pgm-radius) !important;
    box-shadow:       0 4px 12px rgba(0,0,0,0.45) !important;
}

.dropdown-menu > li > a {
    color: var(--pgm-text) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background:       rgba(74,141,208,0.15) !important;
    background-color: rgba(74,141,208,0.15) !important;
    color:            #ffffff !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    color:            #ffffff !important;
}

.dropdown-menu .divider {
    background:       var(--pgm-border) !important;
    background-color: var(--pgm-border) !important;
}

/* -----------------------------------------------------------------------------
   14. List Groups
   ----------------------------------------------------------------------------- */
.list-group-item {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border-color:     var(--pgm-border) !important;
    color:            var(--pgm-text) !important;
}

.list-group-item:hover,
.list-group-item:focus {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    color:            #ffffff !important;
}

.list-group-item.active,
.list-group-item.active:hover {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    border-color:     var(--pgm-primary) !important;
}

/* -----------------------------------------------------------------------------
   15. Paginação & Nav-tabs
   ----------------------------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border-color:     var(--pgm-border) !important;
    color:            var(--pgm-primary) !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    color:            #ffffff !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    border-color:     var(--pgm-primary) !important;
    color:            #ffffff !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-color:     var(--pgm-border) !important;
    color:            var(--pgm-muted) !important;
}

.nav-tabs {
    border-color: var(--pgm-border) !important;
}

.nav-tabs > li > a {
    color:         var(--pgm-muted) !important;
    border-radius: var(--pgm-radius-sm) var(--pgm-radius-sm) 0 0 !important;
}

.nav-tabs > li > a:hover {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-color:     var(--pgm-border) !important;
    color:            var(--pgm-text) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background:              var(--pgm-card-bg) !important;
    background-color:        var(--pgm-card-bg) !important;
    border-color:            var(--pgm-border) !important;
    border-bottom-color:     var(--pgm-card-bg) !important;
    color:                   var(--pgm-text) !important;
}

/* -----------------------------------------------------------------------------
   16. Progress Bars
   ----------------------------------------------------------------------------- */
.progress {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-radius:    var(--pgm-radius-sm) !important;
    box-shadow:       none !important;
}

.progress-bar {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    background-image: none !important;
    box-shadow:       none !important;
}

.progress-bar-success {
    background:       var(--pgm-green) !important;
    background-color: var(--pgm-green) !important;
}

.progress-bar-danger {
    background:       var(--pgm-danger-border) !important;
    background-color: var(--pgm-danger-border) !important;
}

.progress-bar-warning {
    background:       var(--pgm-warning-border) !important;
    background-color: var(--pgm-warning-border) !important;
}

/* -----------------------------------------------------------------------------
   17. Código & Pré-formatado
   ----------------------------------------------------------------------------- */
code, pre {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    color:            #a8d8a0 !important;
    border-color:     var(--pgm-border) !important;
}

kbd {
    background:       var(--pgm-navbar-bg) !important;
    background-color: var(--pgm-navbar-bg) !important;
    color:            var(--pgm-text) !important;
}

/* -----------------------------------------------------------------------------
   18. Footer
   ----------------------------------------------------------------------------- */
footer,
footer.section-wrapper {
    background:       var(--pgm-footer-bg) !important;
    background-color: var(--pgm-footer-bg) !important;
    border-top:       1px solid var(--pgm-border) !important;
    color:            var(--pgm-muted) !important;
    padding-top:      16px !important;
    padding-bottom:   16px !important;
    position:         static !important;
    bottom:           auto !important;
}

footer p,
footer span,
footer small {
    color: var(--pgm-muted) !important;
}

footer a {
    color: var(--pgm-primary) !important;
}

footer a:hover {
    color: var(--pgm-text) !important;
}

.footer-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.footer-row > [class*="col-"] {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .footer-row {
        display: block !important;
    }
    .footer-row > [class*="col-"] {
        margin-bottom: 24px;
        text-align: center !important;
    }
    .footer-row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }
}

/* -----------------------------------------------------------------------------
   19. Badge & Label
   ----------------------------------------------------------------------------- */
.badge {
    background-color: var(--pgm-primary) !important;
}

.label-default {
    background-color: var(--pgm-muted) !important;
}

.label-primary {
    background-color: var(--pgm-primary) !important;
}

.label-success {
    background-color: var(--pgm-green) !important;
}

.label-danger {
    background-color: var(--pgm-danger-border) !important;
}

.label-warning {
    background-color: var(--pgm-warning-border) !important;
    color:            #1a1a00 !important;
}

.label-info {
    background-color: var(--pgm-info-border) !important;
}

/* -----------------------------------------------------------------------------
   20. Transições globais
   ----------------------------------------------------------------------------- */
a,
.panel,
.content-card,
.form-control,
.btn,
.navbar-nav > li > a {
    transition: all 0.2s ease !important;
}

/* -----------------------------------------------------------------------------
   21. Hero — Título principal (#intro-pricing)
   ----------------------------------------------------------------------------- */
#intro-pricing {
    padding-bottom: 40px !important;
}

#intro-pricing .section-header h3 {
    font-size:   42px !important;
    font-weight: 700 !important;
    text-align:  center !important;
    line-height: 1.2 !important;
    color:       var(--pgm-text) !important;
}

@media (max-width: 767px) {
    #intro-pricing .section-header h3 {
        font-size: 28px !important;
    }
}

.hero-product-img {
    box-shadow: 0 4px 12px rgba(0,0,0,0.45) !important;
    transition: box-shadow .3s ease !important;
}
.hero-product-img:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

/* -----------------------------------------------------------------------------
   22. Tinted Card Utilities — padrão: borda viva + fundo escuro da mesma cor
   Inspirado nos botões pgModeler (borda = cor viva, fundo = tom escuro do hue)
   ----------------------------------------------------------------------------- */

/* ── Navy / CTA (binaries) ─────────────────────────────────────────────────── */
.pgm-card-navy,
.content-card-top.content-card-primary.content-card-pricing {
    background:       #1c3558 !important;
    background-color: #1c3558 !important;
    border:           1px solid #4a8dd0 !important;
    border-top:       4px solid #5aacff !important;
    box-shadow:       0 4px 12px rgba(0,0,0,0.45) !important;
    color:            var(--pgm-text) !important;
}
.pgm-card-navy h2,
.content-card-top.content-card-primary.content-card-pricing h2 {
    color: #c8dff8 !important;
}
.pgm-card-navy hr,
.content-card-top.content-card-primary.content-card-pricing hr {
    border-color: rgba(90,172,255,0.3) !important;
}

/* ── Green / Stable release ────────────────────────────────────────────────── */
.pgm-card-green,
.pgm-card-blue,
.content-card-top.content-card-info.content-card-pricing {
    background:       #1f4230 !important;
    background-color: #1f4230 !important;
    border:           1px solid #3d9858 !important;
    border-top:       4px solid #3d9858 !important;
    box-shadow:       0 4px 12px rgba(0,0,0,0.45) !important;
    color:            var(--pgm-text) !important;
}
.pgm-card-green h2,
.pgm-card-blue h2,
.content-card-top.content-card-info.content-card-pricing h2 {
    color: #88d8a0 !important;
}
.pgm-card-green hr,
.pgm-card-blue hr,
.content-card-top.content-card-info.content-card-pricing hr {
    border-color: rgba(61,152,88,0.3) !important;
}

/* ── Orange / Alpha-Beta release ───────────────────────────────────────────── */
.pgm-card-orange,
.content-card-top.content-card-success.content-card-pricing {
    background:       #472814 !important;
    background-color: #472814 !important;
    border:           1px solid #c8681e !important;
    border-top:       4px solid #e07828 !important;
    box-shadow:       0 4px 12px rgba(0,0,0,0.45) !important;
    color:            var(--pgm-text) !important;
    opacity:          1 !important;
}
.pgm-card-orange h2,
.content-card-top.content-card-success.content-card-pricing h2 {
    color: #f0b47a !important;
}
.pgm-card-orange hr,
.content-card-top.content-card-success.content-card-pricing hr {
    border-color: rgba(200,104,30,0.3) !important;
}

/* ── Hover lift para todos os pricing cards ─────────────────────────────────── */
.content-card-top.content-card-pricing:hover {
    transform: translateY(-5px) !important;
}
.content-card-top.content-card-pricing:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.55) !important;
}

/* ── Price tag — versão number badge ───────────────────────────────────────── */
.content-card-pricing .price-tag {
    font-size:    2.1rem !important;
    font-weight:  700 !important;
    line-height:  1.1 !important;
    margin:       8px 0 12px !important;
    padding:      6px 18px !important;
    border-radius: 6px !important;
    display:      inline-block !important;
}
.content-card-top.content-card-info.content-card-pricing .price-tag {
    color:            #5ed08a !important;
    background:       rgba(61,152,88,0.15) !important;
    background-color: rgba(61,152,88,0.15) !important;
}
.content-card-top.content-card-success.content-card-pricing .price-tag {
    color:            #f0a060 !important;
    background:       rgba(200,104,30,0.15) !important;
    background-color: rgba(200,104,30,0.15) !important;
}

/* ── Botão laranja (card alpha/orange) ─────────────────────────────────────── */
.btn-orange {
    background:       #b85e1e !important;
    background-color: #b85e1e !important;
    border-color:     #d87838 !important;
    color:            #ffffff !important;
}
.btn-orange:hover,
.btn-orange:focus {
    background:       #9e5018 !important;
    background-color: #9e5018 !important;
    border-color:     #7e3e12 !important;
    color:            #ffffff !important;
}

/* ── btn-hero: restaura borda removida pelo custom.css ─────────────────────── */
.btn-hero {
    border: 1px solid transparent !important;
}
.btn-hero.btn-primary  { border-color: #7ab8f0 !important; }
.btn-hero.btn-success  { border-color: #5ecb7a !important; }
.btn-hero.btn-info     { border-color: #5aa8c8 !important; }
.btn-hero.btn-warning  { border-color: #c8a840 !important; }
.btn-hero.btn-danger   { border-color: #b84060 !important; }
.btn-hero.btn-default  { border-color: var(--pgm-border) !important; }

/* ── Botões secondary dentro de pricing cards ──────────────────────────────── */
.content-card-pricing .btn-default {
    background:       rgba(255,255,255,0.07) !important;
    background-color: rgba(255,255,255,0.07) !important;
    border-color:     rgba(255,255,255,0.2) !important;
    color:            var(--pgm-text) !important;
}
.content-card-pricing .btn-default:hover {
    background:       rgba(255,255,255,0.14) !important;
    background-color: rgba(255,255,255,0.14) !important;
    border-color:     rgba(255,255,255,0.4) !important;
    color:            #ffffff !important;
}

/* -----------------------------------------------------------------------------
   23. Social proof bar — container arredondado estilo btn-default
   ----------------------------------------------------------------------------- */
.social-proof-bar {
    display:          flex !important;
    flex-wrap:        wrap !important;
    justify-content:  center !important;
    align-items:      center !important;
    gap:              8px 28px !important;
    margin:           24px 0 32px !important;
    padding:          12px 20px !important;
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border:           1px solid var(--pgm-border) !important;
    border-radius:    var(--pgm-radius) !important;
}
.sp-item {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         7px !important;
    color:       var(--pgm-muted) !important;
    font-size:   .95rem !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
a.sp-item:hover {
    color:           var(--pgm-text) !important;
    text-decoration: none !important;
}
a.sp-item:hover i {
    color: #7ec8ff !important;
}
.sp-item i {
    color: var(--pgm-primary) !important;
}

/* -----------------------------------------------------------------------------
   24. Misc — Section headers, features, breadcrumb, jumbotron
   ----------------------------------------------------------------------------- */
.section-header h2,
.section-header h3 {
    color: var(--pgm-text) !important;
}

/* h3 used directly as .section-header (installation pages pattern) */
h3.section-header {
    font-size:      1.9rem !important;
    font-weight:    700 !important;
    letter-spacing: -0.3px !important;
    line-height:    1.25 !important;
    color:          var(--pgm-text) !important;
    margin-top:     0 !important;
    margin-bottom:  24px !important;
}

h3.section-header small {
    font-size:   1rem !important;
    font-weight: 400 !important;
    color:       var(--pgm-muted) !important;
}

.section-header small {
    color: var(--pgm-muted) !important;
}

.feature-title {
    color: var(--pgm-text) !important;
}

.feature-desc {
    color: var(--pgm-muted) !important;
}

.breadcrumb {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
}

.breadcrumb > li,
.breadcrumb > .active {
    color: var(--pgm-muted) !important;
}

.page-header {
    border-color: var(--pgm-border) !important;
}

.jumbotron {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    color:            var(--pgm-text) !important;
    border-radius:    var(--pgm-radius) !important;
}

.testimonial-meta .img-thumbnail,
.testimonial-meta .thumbnail {
    border:           1px solid var(--pgm-border) !important;
    padding:          0 !important;
    background:       transparent !important;
    background-color: transparent !important;
    box-shadow:       none !important;
}

.thumbnail {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border-color:     var(--pgm-border) !important;
}

/* -----------------------------------------------------------------------------
   24. Comparison Table — dark overrides
   ----------------------------------------------------------------------------- */
.comparison-table-wrapper {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border-color:     var(--pgm-border) !important;
    box-shadow:       0 4px 15px rgba(0,0,0,0.35) !important;
}

.comparison-table > thead > tr > th {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-bottom:    2px solid var(--pgm-border) !important;
    border-top:       none !important;
    color:            var(--pgm-text) !important;
}

.comparison-table > thead > tr > th.plus-header {
    background:       rgba(74,141,208,0.12) !important;
    background-color: rgba(74,141,208,0.12) !important;
    border-bottom:    2px solid var(--pgm-primary) !important;
    color:            var(--pgm-primary) !important;
}

.comparison-table > thead > tr > th:last-child {
    background:       rgba(255,255,255,0.03) !important;
    background-color: rgba(255,255,255,0.03) !important;
    border-left:      1px solid var(--pgm-border) !important;
}

.comparison-table > tbody > tr > td {
    border-top:       1px solid var(--pgm-border) !important;
    color:            var(--pgm-text) !important;
}

/* Plus column highlight — coluna 2 */
.comparison-table .plus-column,
.comparison-table > tbody > tr > td:nth-child(2) {
    background:       rgba(74,141,208,0.08) !important;
    background-color: rgba(74,141,208,0.08) !important;
    border-left:      1px solid rgba(74,141,208,0.25) !important;
    border-right:     1px solid rgba(74,141,208,0.25) !important;
}

/* Open-source column — coluna 3 */
.comparison-table > tbody > tr > td:nth-child(3) {
    background:       rgba(255,255,255,0.03) !important;
    background-color: rgba(255,255,255,0.03) !important;
    border-left:      1px solid var(--pgm-border) !important;
}

.comparison-table > tbody > tr:hover > td {
    background:       rgba(74,141,208,0.1) !important;
    background-color: rgba(74,141,208,0.1) !important;
}

.comparison-table .feature-desc-cell {
    color: var(--pgm-text) !important;
}

.comparison-table .feature-desc-cell i.fa {
    color: var(--pgm-muted) !important;
}

.comparison-table a[data-toggle="collapse"] {
    color: #7ec8ff !important;
}

.comparison-table a[data-toggle="collapse"]:hover {
    color: #a8d8ff !important;
}

.comparison-table .status-icon.fa-check {
    color: var(--pgm-green) !important;
}

.comparison-table .status-icon.fa-close {
    color: var(--pgm-danger-border) !important;
}

.feature-description-text {
    background:       rgba(30,43,58,0.6) !important;
    background-color: rgba(30,43,58,0.6) !important;
    border-left:      3px solid var(--pgm-primary) !important;
    color:            var(--pgm-muted) !important;
}

.feature-toggle-link {
    color: var(--pgm-text) !important;
}

.feature-toggle-link:hover,
.feature-toggle-link:focus {
    color: var(--pgm-primary) !important;
}

/* Comparison section header border */
#comparison-table-section {
    border-top-color: var(--pgm-border) !important;
}

/* -----------------------------------------------------------------------------
   25. Modal header — remove green border-top from custom.css
   ----------------------------------------------------------------------------- */
.modal-header {
    border-top: 3px solid var(--pgm-primary) !important;
}

/* -----------------------------------------------------------------------------
   26. Hero section text
   ----------------------------------------------------------------------------- */
.hero-title,
.hero-section h2 {
    color: var(--pgm-text) !important;
}

.hero-section p {
    color: var(--pgm-muted) !important;
}

/* Override hardcoded dark colors on hero h2/p inline styles */
#intro-pricing .col-md-6 h2 {
    color: var(--pgm-text) !important;
}
#intro-pricing .col-md-6 > p {
    color: var(--pgm-muted) !important;
}

/* -----------------------------------------------------------------------------
   27. Testimonials cards
   ----------------------------------------------------------------------------- */
.testimonial-card,
#testimonials-wrapper .card {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border-color:     var(--pgm-border) !important;
}

#testimonials-wrapper .card p {
    color: var(--pgm-text) !important;
}

#testimonials-wrapper .card strong {
    color: var(--pgm-text) !important;
}

#testimonials-wrapper .card span {
    color: var(--pgm-muted) !important;
}

#testimonials-wrapper [style*="border-top: 1px solid"] {
    border-top-color: var(--pgm-border) !important;
}

/* ── Testimonials carousel ───────────────────────────────────────────────────── */
.testimonials-carousel-wrapper {
    position:   relative;
    display:    flex;
    align-items: center;
    gap:        8px;
}

.tcarousel-viewport {
    overflow:   hidden;
    flex:       1 1 0;
    min-width:  0;
}

.tcarousel-track {
    display:    flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.tcarousel-slide {
    flex:        0 0 100%;
    min-width:   100%;
}

.tcarousel-btn {
    flex-shrink:      0;
    width:            40px;
    height:           40px;
    border-radius:    50%;
    border:           1px solid var(--pgm-border) !important;
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    color:            var(--pgm-text) !important;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    transition:       background 0.2s, border-color 0.2s, color 0.2s;
    padding:          0;
}

.tcarousel-btn:hover:not(:disabled) {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    border-color:     var(--pgm-primary) !important;
    color:            #ffffff !important;
}

.tcarousel-btn:disabled {
    opacity:  0.3;
    cursor:   default;
}

.tcarousel-dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    margin-top:      20px;
}

.tcarousel-dot {
    width:            10px;
    height:           10px;
    border-radius:    50%;
    border:           none;
    background:       var(--pgm-border) !important;
    background-color: var(--pgm-border) !important;
    padding:          0;
    cursor:           pointer;
    transition:       background 0.2s, transform 0.2s;
}

.tcarousel-dot.active,
.tcarousel-dot:hover {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    transform:        scale(1.3);
}

@media (max-width: 767px) {
    .tcarousel-btn { display: none; }
}

/* -----------------------------------------------------------------------------
   28. Social proof bar & feature icons
   ----------------------------------------------------------------------------- */
.social-proof-bar {
    border-top:    1px solid var(--pgm-border) !important;
    border-bottom: 1px solid var(--pgm-border) !important;
}

.sp-item {
    color: var(--pgm-muted) !important;
}

.sp-item i.fa {
    color: var(--pgm-primary) !important;
}

.feature-icon-wrapper {
    background:       rgba(74,141,208,0.1) !important;
    background-color: rgba(74,141,208,0.1) !important;
}

.feature-icon-wrapper i.fa {
    color: var(--pgm-primary) !important;
}

/* -----------------------------------------------------------------------------
   29. Screenshots page
   ----------------------------------------------------------------------------- */
#screenshots-wrapper .screenshot-thumb {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
}

/* Screenshots modal body (was hardcoded #2c3e50 — close to palette) */
#screenshotsModal .modal-body,
#ssModal .modal-body {
    background:       var(--pgm-navbar-bg) !important;
    background-color: var(--pgm-navbar-bg) !important;
    padding:          0 !important;
}

#modalDesc {
    color: var(--pgm-text) !important;
}

/* Sticky CTA bar */
#sticky-cta-bar {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-top:       1px solid var(--pgm-border) !important;
    color:            var(--pgm-text) !important;
}

/* Testimonial meta divider */
.testimonial-meta {
    border-top: 1px solid var(--pgm-border) !important;
}

/* -----------------------------------------------------------------------------
   28. Generic media card (.pgm-media-card)
   Reusable dark card for blog posts, news, any content with thumbnail + text.
   Apply alongside the structural class (e.g. .blog-post-modern).
   ----------------------------------------------------------------------------- */
.pgm-media-card {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border:           1px solid var(--pgm-border) !important;
    border-left:      4px solid var(--pgm-primary) !important;
    box-shadow:       0 4px 12px rgba(0,0,0,0.45) !important;
    color:            var(--pgm-text) !important;
}

.pgm-media-card:hover {
    box-shadow:       0 8px 24px rgba(0,0,0,0.5) !important;
}

/* Title */
.pgm-media-card .blog-post-title-modern a {
    color: var(--pgm-text) !important;
}
.pgm-media-card .blog-post-title-modern a:hover {
    color: var(--pgm-primary) !important;
}

/* Subtitle */
.pgm-media-card .blog-post-subtitle {
    color: var(--pgm-muted) !important;
}

/* Summary */
.pgm-media-card .blog-post-summary-modern {
    color: var(--pgm-text) !important;
}

/* Meta bar */
.pgm-media-card .blog-post-meta {
    border-top-color: var(--pgm-border) !important;
    color:            var(--pgm-muted) !important;
}
.pgm-media-card .blog-meta-item {
    color: var(--pgm-muted) !important;
}
.pgm-media-card .blog-meta-item i {
    color: var(--pgm-primary) !important;
}
.pgm-media-card .blog-meta-item a {
    color: var(--pgm-muted) !important;
}
.pgm-media-card .blog-meta-item a:hover {
    color: var(--pgm-primary) !important;
}

/* Tags */
.pgm-media-card .blog-tag {
    background:       rgba(255,255,255,0.07) !important;
    color:            var(--pgm-muted) !important;
    border:           1px solid var(--pgm-border) !important;
}
.pgm-media-card .blog-tag:hover {
    background:       var(--pgm-primary) !important;
    border-color:     var(--pgm-primary) !important;
    color:            #ffffff !important;
}

/* Date badge */
.pgm-media-card .blog-post-date-badge {
    background:    rgba(74,141,208,0.15) !important;
    border:        1px solid var(--pgm-primary) !important;
    box-shadow:    none !important;
    color:         var(--pgm-text) !important;
}

/* Thumbnail shadow */
.pgm-media-card .blog-post-thumbnail-float {
    box-shadow:   none !important;
    border:       none !important;
    margin-right: 16px !important;
    margin-bottom: 8px !important;
}

/* Testimonial meta divider */
.testimonial-meta {
    border-top: 1px solid var(--pgm-border) !important;
}

/* -----------------------------------------------------------------------------
   29. Screenshot overlay — dark theme palette, no glow
   Applies to homepage #screenshots-wrapper and screenshots page .featured-*
   ----------------------------------------------------------------------------- */

/* Homepage grid thumbnails */
#screenshots-wrapper .screenshot-thumb {
    background:   var(--pgm-card-bg) !important;
    box-shadow:   0 4px 12px rgba(0,0,0,0.45) !important;
}

#screenshots-wrapper .screenshot-thumb:hover {
    transform:    translateY(-4px) !important;
    box-shadow:   0 8px 24px rgba(0,0,0,0.5) !important;
}

#screenshots-wrapper .screenshot-overlay {
    background: rgba(74, 141, 208, 0.88) !important;
}

/* Screenshots page grid */
.screenshot-grid-item {
    background:   var(--pgm-card-bg) !important;
    box-shadow:   0 4px 12px rgba(0,0,0,0.45) !important;
}

.screenshot-grid-item:hover {
    transform:    translateY(-4px) !important;
    box-shadow:   0 8px 24px rgba(0,0,0,0.5) !important;
}

.screenshot-grid-overlay {
    background: rgba(74, 141, 208, 0.88) !important;
}

/* Screenshots page featured item */
.featured-screenshot-overlay {
    background: rgba(74, 141, 208, 0.88) !important;
}

.featured-screenshot-wrapper {
    background: var(--pgm-card-bg) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45) !important;
}

.featured-screenshot-wrapper:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

.featured-screenshot-info {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border-top-color: var(--pgm-primary) !important;
}

.featured-screenshot-desc {
    color: var(--pgm-text) !important;
}

/* -----------------------------------------------------------------------------
   30. Utility Classes — espaçamento, tipografia, layout
   ----------------------------------------------------------------------------- */

/* ── Form section label (usado em modais e forms do site) ────────────────────── */
.payment-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #7a90a8;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}

/* ── Margens ─────────────────────────────────────────────────────────────────── */
.mt-10  { margin-top:    10px !important; }
.mb-5   { margin-bottom:  5px !important; }
.mb-8   { margin-bottom:  8px !important; }
.mb-0   { margin-bottom:  0   !important; }
.mb-20  { margin-bottom: 20px !important; }
.mb-1em { margin-bottom: 1em  !important; }

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.h-full     { height: 100% !important; }
.label-full { width:  100% !important; }

/* ── Botões — border-radius variantes ───────────────────────────────────────── */
.btn-pill    { border-radius: 50px !important; }
.btn-rounded { border-radius:  6px !important; }

/* ── HR variantes ────────────────────────────────────────────────────────────── */
.hr-tight     { margin: 12px 0 8px !important; }
.hr-invisible { border: none !important; margin: 0 !important; }

/* ── Section header flush ────────────────────────────────────────────────────── */
.section-header-flush { margin-top: 0 !important; }

/* ── Imagens utilitárias ─────────────────────────────────────────────────────── */
.img-logo-sm { max-height: 80px !important; }

/* ── Colunas com margem inferior ─────────────────────────────────────────────── */
.col-mb         { margin-bottom: 20px !important; }
.col-screenshot { margin-bottom: 30px !important; }

/* ── Labels Bootstrap ────────────────────────────────────────────────────────── */
.label-tiny { font-size: 60% !important; vertical-align: middle !important; }

/* -----------------------------------------------------------------------------
   31. Reading typography — tamanho de fonte para páginas de leitura
   ----------------------------------------------------------------------------- */

.blog-post-summary-modern,
.blog-post-subtitle,
.blog-post-text,
.blog-post-text p,
.blog-post-text li,
.docs-text p,
.docs-text li,
.install-page p,
.install-page li {
    font-size: 17px !important;
    line-height: 1.8 !important;
}

/* -----------------------------------------------------------------------------
   32. Hero section — tipografia
   ----------------------------------------------------------------------------- */
.hero-title {
    font-size:     2rem !important;
    font-weight:   700 !important;
    line-height:   1.3 !important;
    margin-bottom: 16px !important;
}

.hero-lead {
    font-size:     1.08rem !important;
    line-height:   1.75 !important;
    margin-bottom: 20px !important;
}

/* -----------------------------------------------------------------------------
   32. Pricing cards — textos internos
   ----------------------------------------------------------------------------- */
.pricing-card-price {
    margin:      12px 0 6px !important;
    line-height: 1.55 !important;
    font-size:   large !important;
}

.pricing-card-desc {
    font-size:     1rem !important;
    margin-bottom: 14px !important;
}

.pricing-card-label {
    font-size:      0.78rem !important;
    margin-bottom:  8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* -----------------------------------------------------------------------------
   33. Testimonials — estrutura interna dos cards
   ----------------------------------------------------------------------------- */
.testimonial-card {
    height:        100% !important;
    padding:       24px !important;
    border-radius: var(--pgm-radius) !important;
}

.testimonial-text {
    font-size:     15px !important;
    line-height:   1.6 !important;
    margin-bottom: 20px !important;
}

.testimonial-meta {
    margin-top:  auto !important;
    padding-top: 14px !important;
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
}

.testimonial-photo {
    width:         120px !important;
    height:        120px !important;
    object-fit:    cover !important;
    object-position: center !important;
    border-radius: 6px !important;
    flex-shrink:   0 !important;
}

.testimonial-name     { display: block !important; }
.testimonial-role     { font-size: 13px !important; }
.testimonial-location { font-size: 12px !important; display: block !important; margin-top: 4px !important; }

/* -----------------------------------------------------------------------------
   34. Donate form — card interno
   ----------------------------------------------------------------------------- */
.card-title-flush {
    margin-top:  0 !important;
    font-weight: 700 !important;
}

.card-lead-flush {
    font-size:     1.1em !important;
    margin-bottom: 20px !important;
}

/* -----------------------------------------------------------------------------
   35. Footer — classes semânticas
   ----------------------------------------------------------------------------- */
.footer-project-info  { line-height: 1.5 !important; }

.footer-project-title {
    font-size: 1.15em !important;
    color:     var(--pgm-primary) !important;
}

.footer-text { font-size: 1.1em !important; }

.footer-company-info {
    font-size:   1.05em !important;
    line-height: 1.6 !important;
}

.footer-social-icons { margin-top: 14px !important; }

.footer-social-link {
    display:    inline-block !important;
    margin:     0 8px !important;
    transition: all 0.3s ease !important;
}

.social-icon-img {
    height: 32px !important;
    width:  32px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
}

.footer-social-link:hover .social-icon-img {
    opacity: 1 !important;
}
.footer-logo-img { height: 110px !important; }

/* Screenshot placeholder (fallback when no screenshots uploaded) */
.col-screenshot-placeholder { margin-bottom: 10px !important; }
.screenshot-placeholder-card { display: block !important; padding: 10px !important; }
.screenshot-placeholder-img  { border-radius: 4px !important; width: 100% !important; opacity: 0.5 !important; }

/* Terms / Data Privacy modal body */
.modal-scroll-body {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    color:            var(--pgm-text) !important;
    padding:          16px 20px !important;
}

.terms-area {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    color:            var(--pgm-text) !important;
    margin:           0 !important;
    padding:          0 !important;
    line-height:      1.7 !important;
}

.terms-area h1, .terms-area h2, .terms-area h3,
.terms-area h4, .terms-area h5, .terms-area h6 {
    color:         var(--pgm-text) !important;
    margin-top:    24px !important;
    margin-bottom: 8px !important;
}

.terms-area p, .terms-area li {
    color:         var(--pgm-text) !important;
    margin-bottom: 10px !important;
}

.terms-area ul {
    margin-bottom: 12px !important;
}

.terms-area strong {
    color: var(--pgm-text) !important;
}

.terms-area a {
    color: var(--pgm-primary) !important;
}

/* Table inside terms */
.terms-area table {
    width:            100% !important;
    border-collapse:  collapse !important;
    margin:           10px 0 !important;
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    color:            var(--pgm-text) !important;
    border:           1px solid var(--pgm-border) !important;
}

.terms-area table th {
    background:       var(--pgm-input-bg) !important;
    background-color: var(--pgm-input-bg) !important;
    color:            var(--pgm-text) !important;
    border:           1px solid var(--pgm-border) !important;
    padding:          6px 10px !important;
    font-weight:      700 !important;
}

.terms-area table td {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    color:            var(--pgm-text) !important;
    border:           1px solid var(--pgm-border) !important;
    padding:          6px 10px !important;
}

.terms-area table tr:nth-child(even) td {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
}

/* Language toggle pills (English / Portuguese) */
#termsModal .nav-pills > li > a,
#dataPrivacyModal .nav-pills > li > a {
    background:    var(--pgm-input-bg) !important;
    border:        1px solid var(--pgm-border) !important;
    color:         var(--pgm-muted) !important;
    border-radius: var(--pgm-radius-sm) !important;
    margin-right:  4px !important;
    transition:    background 0.2s, color 0.2s !important;
}

#termsModal .nav-pills > li.active > a,
#termsModal .nav-pills > li > a:hover,
#dataPrivacyModal .nav-pills > li.active > a,
#dataPrivacyModal .nav-pills > li > a:hover {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    border-color:     var(--pgm-primary) !important;
    color:            #fff !important;
}


/* =============================================================================
   Input group addon — dark theme variant
   Fundo mais escuro que o input para sinalizar elemento acessório/não editável
   ============================================================================= */
.input-group-addon-dark {
    background:       var(--pgm-navbar-bg) !important;
    background-color: var(--pgm-navbar-bg) !important;
    border-color:     var(--pgm-border) !important;
    color:            var(--pgm-muted) !important;
}

/* =============================================================================
   Input group & btn-group — corrige border-radius nas junções
   O !important em .btn e .form-control bloqueia as regras do Bootstrap.
   Replicamos aqui com !important para garantir cantos retos onde elementos
   se encostam.
   ============================================================================= */

/* input-group: addon à esquerda */
.input-group .input-group-addon:first-child,
.input-group .input-group-btn:first-child > .btn {
    border-top-right-radius:    0 !important;
    border-bottom-right-radius: 0 !important;
}
/* input-group: addon à direita */
.input-group .input-group-addon:last-child,
.input-group .input-group-btn:last-child > .btn {
    border-top-left-radius:    0 !important;
    border-bottom-left-radius: 0 !important;
}
/* input-group: form-control com addon à esquerda */
.input-group .form-control:not(:first-child) {
    border-top-left-radius:    0 !important;
    border-bottom-left-radius: 0 !important;
}
/* input-group: form-control com addon à direita */
.input-group .form-control:not(:last-child) {
    border-top-right-radius:    0 !important;
    border-bottom-right-radius: 0 !important;
}

/* btn-group: botão do meio */
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0 !important;
}
/* btn-group: primeiro botão */
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius:    0 !important;
    border-bottom-right-radius: 0 !important;
}
/* btn-group: último botão */
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius:    0 !important;
    border-bottom-left-radius: 0 !important;
}

/* =============================================================================
   btn-pkg — platform toggle buttons (global, outside purchase modal scope)
   ============================================================================= */
.btn-pkg {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border:           2px solid var(--pgm-border) !important;
    border-radius:    var(--pgm-radius-sm) !important;
    padding:          8px 10px !important;
    line-height:      1 !important;
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
}
.btn-pkg:hover,
.btn-pkg:focus {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-color:     var(--pgm-primary) !important;
}
.btn-pkg.btn-pkg-checked {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    border-color:     #7ab8f0 !important;
}

/* =============================================================================
   content-card dark theme overrides
   custom.css defines light #fff backgrounds — override for dark theme
   ============================================================================= */
.content-card {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    box-shadow:       0 0 4px rgba(0,0,0,0.5) !important;
    color:            var(--pgm-text) !important;
}
.content-card p,
.content-card-body p {
    color: var(--pgm-text) !important;
}
.content-card-footer {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-top-color: var(--pgm-border) !important;
    color:            var(--pgm-muted) !important;
}
.content-card-footer .text-muted {
    color: var(--pgm-muted) !important;
}
/* Footer color variants — dark */
.content-card-footer-info {
    background:       rgba(58, 95, 120, 0.4) !important;
    background-color: rgba(58, 95, 120, 0.4) !important;
    border-top-color: var(--pgm-info-border) !important;
}
.content-card-footer-success {
    background:       rgba(46, 107, 71, 0.4) !important;
    background-color: rgba(46, 107, 71, 0.4) !important;
    border-top-color: var(--pgm-success-border) !important;
}
.content-card-footer-warning {
    background:       rgba(74, 69, 32, 0.4) !important;
    background-color: rgba(74, 69, 32, 0.4) !important;
    border-top-color: var(--pgm-warning-border) !important;
}
.content-card-footer-danger {
    background:       rgba(92, 32, 48, 0.4) !important;
    background-color: rgba(92, 32, 48, 0.4) !important;
    border-top-color: var(--pgm-danger-border) !important;
}

/* =============================================================================
   table-users-management — dark theme overrides
   custom.css usa #f5f5f5 / #f9f9f9 que escapam dos overrides genéricos de .table
   ============================================================================= */
.table-users-management thead {
    background:       var(--pgm-navbar-bg) !important;
    background-color: var(--pgm-navbar-bg) !important;
}
.table-users-management thead th {
    border-bottom-color: var(--pgm-border) !important;
    color:               var(--pgm-muted) !important;
}
.table-users-management tbody > tr {
    background:       var(--pgm-input-bg) !important;
    background-color: var(--pgm-input-bg) !important;
}
.table-users-management tbody > tr:nth-child(even) {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
}
.table-users-management tbody > tr:hover,
.table-users-management tbody > tr:hover > td {
    background:       rgba(74, 141, 208, 0.12) !important;
    background-color: rgba(74, 141, 208, 0.12) !important;
}
.table-users-management tbody td {
    border-top-color: var(--pgm-border) !important;
}

/* =============================================================================
   39. alert-modern — dark theme (used by ViewUtils::messageBox())
   custom.css defines light backgrounds; override here to match the pgm palette.
   Same semantic mapping as section 10 (.alert-*) above.
   ============================================================================= */
.alert-modern {
    border-radius:     var(--pgm-radius) !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
    padding:           15px 20px !important;
    margin-bottom:     20px !important;
}

.alert-modern-info {
    background:       var(--pgm-info-bg) !important;
    background-color: var(--pgm-info-bg) !important;
    border-color:     var(--pgm-info-border) !important;
    color:            var(--pgm-info-text) !important;
}

.alert-modern-success {
    background:       var(--pgm-success-bg) !important;
    background-color: var(--pgm-success-bg) !important;
    border-color:     var(--pgm-success-border) !important;
    color:            var(--pgm-success-text) !important;
}

.alert-modern-warning {
    background:       var(--pgm-warning-bg) !important;
    background-color: var(--pgm-warning-bg) !important;
    border-color:     var(--pgm-warning-border) !important;
    color:            var(--pgm-warning-text) !important;
}

.alert-modern-danger {
    background:       var(--pgm-danger-bg) !important;
    background-color: var(--pgm-danger-bg) !important;
    border-color:     var(--pgm-danger-border) !important;
    color:            var(--pgm-danger-text) !important;
}

/* Headings & links inside alert-modern inherit the alert's text color */
.alert-modern h1, .alert-modern h2, .alert-modern h3,
.alert-modern h4, .alert-modern h5, .alert-modern h6 {
    color: inherit !important;
}

.alert-modern a {
    color:           inherit !important;
    font-weight:     600 !important;
    text-decoration: underline !important;
    opacity:         0.9;
}

.alert-modern a:hover {
    opacity: 1 !important;
    color:   #ffffff !important;
}

.alert-modern .close {
    color:   inherit !important;
    opacity: 0.6 !important;
}

/* =============================================================================
   40. Documentation pages (docs.css overrides for dark theme)
   docs.css loads AFTER modern-ui.css (via @yield('header')), so any rule in
   docs.css without !important would otherwise override our theme here. We add
   !important to enforce the dark palette.
   ============================================================================= */

/* Page title */
.docs-title {
    color: var(--pgm-text) !important;
}

/* Prose text & headings in the doc body */
.docs-text p,
.doc-text p {
    color: var(--pgm-text) !important;
}

.docs-text h3,
.doc-text h3 {
    color: var(--pgm-text) !important;
}

/* Tables inside rendered doc markdown */
.doc-text table {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border-color:     var(--pgm-border) !important;
    box-shadow:       0 2px 8px rgba(0,0,0,0.4) !important;
}

.doc-text td {
    border-color: var(--pgm-border) !important;
    color:        var(--pgm-text) !important;
}

.doc-text th {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-color:     var(--pgm-border) !important;
    color:            var(--pgm-text) !important;
}

/* Breadcrumbs */
.docs-breadcrumbs {
    color: var(--pgm-muted) !important;
}

.docs-breadcrumbs [aria-current="page"] {
    color:       var(--pgm-text) !important;
    font-weight: 500 !important;
}

.docs-breadcrumbs .fa-chevron-right {
    color: var(--pgm-muted) !important;
}

/* Footnotes */
.footnotes {
    color:            var(--pgm-muted) !important;
    border-top-color: var(--pgm-border) !important;
}

.footnotes p {
    color: var(--pgm-muted) !important;
}

/* Last updated meta */
.docs-last-upd {
    color: var(--pgm-muted) !important;
}

/* Navigation bar between pages */
.docs-navigation {
    border-top-color: var(--pgm-border) !important;
}

.search-result-item {
    border-bottom-color: var(--pgm-border) !important;
}

.search-result-item p,
.search-result-item small {
    color: var(--pgm-muted) !important;
}

/* FTS ts_headline highlight marks */
.search-result-item mark,
.doc-text mark {
    background-color: rgba(74, 141, 208, 0.30) !important;
    color:            var(--pgm-link) !important;
    border-radius:    2px !important;
    padding:          0 2px !important;
    font-weight:      600 !important;
}

/* doc-text image preview */
.doc-text .img-preview {
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

/* docs page-header separator */
.page-body .page-header {
    border-bottom-color: var(--pgm-border) !important;
}

/* =============================================================================
   36. Blog detail page — legacy classes (show.blade.php + custom.css originals)
   ============================================================================= */

/* Section titles & blog post title */
.blog-post-title,
.blog-post-section {
    color:              var(--pgm-text) !important;
    border-bottom-color: var(--pgm-border) !important;
}

.blog-post-title a {
    color: var(--pgm-text) !important;
}

.blog-post-title a:hover,
.blog-post-title a:focus {
    color: var(--pgm-primary) !important;
}

.blog-post-title small {
    color: var(--pgm-muted) !important;
}

/* Author meta — remove italic inherited from custom.css, use a readable mid-tone */
.blog-post-author {
    color:       var(--pgm-muted) !important;
    font-style:  normal !important;
    font-size:   inherit !important;
}

.blog-post-author small {
    color:      var(--pgm-muted) !important;
    font-style: normal !important;
}

.blog-post-author .fa {
    color: var(--pgm-primary) !important;
    margin-right: 4px !important;
}

/* Footer & blog footer separator */
.blog-footer,
.blog-post-footer {
    border-top-color: var(--pgm-border) !important;
}

/* Blog rendered markdown body */
.blog-post-text,
.blog-post-text p {
    color: var(--pgm-text) !important;
}

.blog-post-text table {
    border-color:     var(--pgm-border) !important;
    background-color: var(--pgm-card-bg) !important;
    color:            var(--pgm-text) !important;
}

.blog-post-text td {
    border-color: var(--pgm-border) !important;
    color:        var(--pgm-text) !important;
}

.blog-post-text th {
    border-color:     var(--pgm-border) !important;
    background-color: var(--pgm-alt-bg) !important;
    color:            var(--pgm-text) !important;
}

/* .blog-tag — global dark pill style (also used inside .pgm-media-card via separate rule) */
.blog-tag {
    background:       rgba(74,141,208,0.12) !important;
    background-color: rgba(74,141,208,0.12) !important;
    border:           1px solid var(--pgm-border) !important;
    color:            var(--pgm-muted) !important;
    border-radius:    12px !important;
    font-size:        12px !important;
    padding:          3px 10px !important;
    margin-right:     5px !important;
    margin-bottom:    3px !important;
    text-decoration:  none !important;
    transition:       all 0.2s ease !important;
    display:          inline-block !important;
}

.blog-tag:hover,
.blog-tag:focus {
    background:       var(--pgm-primary) !important;
    background-color: var(--pgm-primary) !important;
    border-color:     var(--pgm-primary) !important;
    color:            #ffffff !important;
}

/* Legacy card variants from custom.css */
.blogpost-well {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border:           1px solid var(--pgm-border) !important;
    box-shadow:       0 2px 8px rgba(0,0,0,0.4) !important;
    color:            var(--pgm-text) !important;
}

.blogpost-well:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
    transform:  translateY(-2px) !important;
}

.blog-post-card {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    border:           1px solid var(--pgm-border) !important;
    box-shadow:       0 2px 4px rgba(0,0,0,0.4) !important;
    color:            var(--pgm-text) !important;
}

.blog-post-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* panel-footer-info → mapped to pgm-info */
.panel-footer-info {
    background:       var(--pgm-info-bg) !important;
    background-color: var(--pgm-info-bg) !important;
    border-color:     var(--pgm-info-border) !important;
    color:            var(--pgm-info-text) !important;
}

/* .blue-text — used for commenter names in blog comments */
.blue-text {
    color: var(--pgm-primary) !important;
}

/* =============================================================================
   37. Section top-anchor — subtle back-to-top links in section headers
   ============================================================================= */
.section-top-anchor {
    color:   var(--pgm-muted) !important;
    opacity: 0.75 !important;
}

.section-top-anchor:hover,
.section-top-anchor:focus {
    color:   var(--pgm-primary) !important;
    opacity: 1 !important;
}

/* =============================================================================
   38. Bootstrap Carousel — dark palette indicator dots
   Controls remain as-is (dark gradient overlays work on both dark and light images)
   ============================================================================= */
.carousel-indicators li {
    border-color:     var(--pgm-border) !important;
    background-color: transparent !important;
}

.carousel-indicators .active {
    background-color: var(--pgm-primary) !important;
    border-color:     var(--pgm-primary) !important;
}

/* Caption background on screenshots carousel */
.carousel-caption-bg {
    background:       rgba(22, 31, 44, 0.82) !important;
    background-color: rgba(22, 31, 44, 0.82) !important;
    border-radius:    var(--pgm-radius-sm) !important;
    padding:          6px 10px !important;
    color:            var(--pgm-text) !important;
}

/* =============================================================================
   41. Installation page — accordion panels & code blocks
   custom.css sets .panel-group .panel-body { background-color: #ffffff } and
   various hard-coded dark text colors that must be overridden here.
   ============================================================================= */

/* Panel body: force dark background (custom.css sets white without !important) */
.panel-group .panel-body {
    background:       var(--pgm-card-bg) !important;
    background-color: var(--pgm-card-bg) !important;
    color:            var(--pgm-text) !important;
}

/* Bold text inside panel body */
.panel-group .panel-body strong {
    color: var(--pgm-text) !important;
}

/* Panel heading hover */
.panel-group .panel-heading:hover {
    background-color: var(--pgm-border) !important;
}

/* Panel title text */
.panel-group .panel-title {
    color: var(--pgm-text) !important;
}

/* Accordion toggle link — use body text color, not link blue */
.panel-group .panel-title a {
    color:           var(--pgm-text) !important;
    text-decoration: none !important;
}

.panel-group .panel-title a:hover,
.panel-group .panel-title a:focus {
    color: var(--pgm-link) !important;
}

/* Platform/section icon in panel title */
.panel-group .panel-title i.fa,
.panel-group .panel-title li.fa {
    color:      var(--pgm-primary) !important;
    list-style: none !important;
}

/* pre inside panel-body */
.panel-body > pre {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-top-color: var(--pgm-border) !important;
    color:            var(--pgm-text) !important;
}

/* Inline <code> inside installation accordions */
#platformsReqAccordion .panel-body code,
#buildingAccordion .panel-body code,
#dependencisAccordion .panel-body code {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border:           1px solid var(--pgm-border) !important;
    color:            #a8d8a0 !important;
    padding:          2px 6px !important;
    border-radius:    3px !important;
}

/* .code class — used for command example blocks (p.code / pre.code) */
.code {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-color:     var(--pgm-border) !important;
    color:            var(--pgm-text) !important;
    box-shadow:       0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Standalone pre inside install-page (outside panel-body) */
.install-page pre {
    background:       var(--pgm-alt-bg) !important;
    background-color: var(--pgm-alt-bg) !important;
    border-color:     var(--pgm-border) !important;
    color:            var(--pgm-text) !important;
}