/* Panel modernization — softer elevated cards instead of Bootstrap 3's flat
   bordered boxes with hard divider lines between heading/body/footer.
   Depends on the --wl-* custom properties declared in wl-theme.css, so this
   file must be linked AFTER wl-theme.css. It overrides wl-theme.css's own
   .panel* rules on purpose (same selectors, later in source order; a couple
   carry !important to beat wl-theme.css's own !important on border-radius).
   Also includes .panel-default > .panel-heading/.panel-footer explicitly,
   since Bootstrap's own two-class selector otherwise out-specifies a plain
   .panel-heading rule and silently wins. */

.panel {
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 18px !important;
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .04);
    overflow: hidden;
}

.panel-heading,
.panel-default > .panel-heading {
    background-color: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    border-radius: 17px 17px 0 0 !important;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 14px;
    color: var(--wl-mohp-800);
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-heading::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wl-mohp-600);
    flex: none;
}

.panel-body {
    padding: 22px;
}

.panel-footer,
.panel-default > .panel-footer {
    background-color: #fff;
    border-top: 1px solid rgba(15, 23, 42, .06);
    border-radius: 0 0 17px 17px !important;
    padding: 14px 20px;
}

/* Colored context panels: gradient/solid heading instead of a flat block,
   dot marker swapped to white so it still reads against the color fill */
.panel-primary { border-color: rgba(3, 105, 161, .2); }
.panel-primary > .panel-heading {
    background: linear-gradient(90deg, var(--wl-mohp-700), var(--wl-mohp-600));
    color: #fff;
    border-bottom: 0;
}

.panel-success { border-color: rgba(5, 150, 105, .2); }
.panel-success > .panel-heading {
    background-color: var(--wl-emerald, #059669);
    color: #fff;
    border-bottom: 0;
}

.panel-warning { border-color: rgba(217, 119, 6, .2); }
.panel-warning > .panel-heading {
    background-color: var(--wl-amber, #d97706);
    color: #fff;
    border-bottom: 0;
}

.panel-danger { border-color: rgba(220, 38, 38, .2); }
.panel-danger > .panel-heading {
    background-color: var(--wl-red, #dc2626);
    color: #fff;
    border-bottom: 0;
}

.panel-info { border-color: rgba(2, 132, 199, .2); }
.panel-info > .panel-heading {
    background-color: var(--wl-mohp-500);
    color: #fff;
    border-bottom: 0;
}

.panel-primary > .panel-heading::before,
.panel-success > .panel-heading::before,
.panel-warning > .panel-heading::before,
.panel-danger > .panel-heading::before,
.panel-info > .panel-heading::before {
    background: #fff;
}

/* Opt-in: add class="panel-hover" to any panel a view uses as a clickable
   summary/link card, to get the same lift used by .wl-card on the home page.
   Not applied to every panel by default — most panels are static containers. */
.panel-hover {
    transition: transform .15s ease, box-shadow .15s ease;
}
.panel-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -6px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
}