/* ============================================================================
   Cards - .panel and .panel_s skin (Perfex panel system gets a card look)
   ============================================================================ */

body.theme-new .panel,
body.theme-new .panel_s,
body.theme-new .panel-default {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    color: var(--text-main);
    overflow: hidden;
    transition:
        transform var(--transition-speed) var(--ease-standard),
        box-shadow var(--transition-speed) var(--ease-standard),
        border-color var(--transition-speed) var(--ease-standard);
}

/* Hover lift on top-level panels — shadow only, no transform. The
   transform version caused a hover-loop flicker on touch-sensitive
   areas: lifting the panel moved it out from under the cursor,
   hover ended, panel snapped back, cursor re-hovered, etc. */
body.theme-new .content > .row > div > .panel_s:hover,
body.theme-new .content > .row > div > .panel.panel-default:hover,
body.theme-new .content > .panel_s:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--border-color);
}

body.theme-new .panel-heading,
body.theme-new .panel-default > .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-heading);
    font-weight: 600;
    padding: 14px 18px;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

body.theme-new .panel-body {
    padding: 18px;
    background: var(--bg-card);
    color: var(--text-main);
}
/* style.css:1109 forces `.client-reply { background: #f5f5f5 !important; color: #323a45 }`
   (and custom.css:842 also forces `color: #000` on the link). In dark
   mode the !important background wins our token, so the panel keeps a
   light-grey surface while the text inherits --text-main (light) from
   the body rule winning specificity over the legacy `#000` color —
   white text on light surface, unreadable.
   Use !important here to beat the legacy !important and force both
   surface AND text to track theme tokens. */
body.theme-new .panel-body.client-reply,
body.theme-new .client-reply {
    background: var(--bg-elevated) !important;
    color: var(--text-main) !important;
}
body.theme-new .client-reply a {
    color: var(--primary-color) !important;
}
body.theme-new .client-reply .text-muted,
body.theme-new .client-reply .tw-text-neutral-500,
body.theme-new .client-reply .tw-text-neutral-600,
body.theme-new .client-reply .tw-text-neutral-700 {
    color: var(--text-muted) !important;
}

body.theme-new .panel-footer {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

body.theme-new .panel-title {
    color: var(--text-heading);
    font-weight: 600;
}

/* Bordered-accent panel variants - colored left strip */
body.theme-new .panel.panel-success { border-left: 3px solid var(--success-color); }
body.theme-new .panel.panel-danger  { border-left: 3px solid var(--danger-color); }
body.theme-new .panel.panel-warning { border-left: 3px solid var(--warning-color); }
body.theme-new .panel.panel-info    { border-left: 3px solid var(--info-color); }
body.theme-new .panel.panel-primary { border-left: 3px solid var(--primary-color); }

/* Wells (Bootstrap 3 .well) - keep but reskin */
body.theme-new .well {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    color: var(--text-main);
    box-shadow: none;
}

/* Light theme: panels are pure white, soft shadow */
:root[data-theme="light"] body.theme-new .panel,
:root[data-theme="light"] body.theme-new .panel_s,
:root[data-theme="light"] body.theme-new .panel-default {
    background: var(--bg-card);
    border-color: var(--border-soft);
}

@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] body.theme-new .panel,
    :root[data-theme="auto"] body.theme-new .panel_s,
    :root[data-theme="auto"] body.theme-new .panel-default {
        background: var(--bg-card);
        border-color: var(--border-soft);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-new .panel,
    body.theme-new .panel_s {
        transition: none !important;
    }
    body.theme-new .content > .row > div > .panel_s:hover,
    body.theme-new .content > .row > div > .panel.panel-default:hover {
        transform: none !important;
    }
}