/*
 * PROVISION CONNECT - Admin Component System v1.0
 * Modern, mobile-first CSS framework for admin pages
 * Replaces Metronic inline styles with reusable components
 */

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */
:root {
    --pc-link: #f7733e;
    --pc-primary: #ff7f4b;
    --pc-primary-dark: #e85d26;
    --pc-primary-light: #fff0eb;
    --pc-success: #48bb78;
    --pc-success-light: #f0fff4;
    --pc-danger: #e53e3e;
    --pc-danger-light: #fff5f5;
    --pc-warning: #ecc94b;
    --pc-warning-light: #fffff0;
    --pc-info: #4299e1;
    --pc-info-light: #ebf8ff;
    --pc-text: #1a202c;
    --pc-text-secondary: #718096;
    --pc-text-muted: #a0aec0;
    --pc-border: #cbd5e0;
    --pc-border-light: #e2e8f0;
    --pc-bg: #f0f2f7;
    --pc-bg-white: #ffffff;
    --pc-bg-hover: #f5f6fa;
    --pc-input-bg: #f5f6fa;
    --pc-input-border: #cbd5e0;
    --pc-input-focus-bg: #ffffff;
    --pc-radius: 8px;
    --pc-radius-lg: 12px;
    --pc-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --pc-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --pc-shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
    --pc-font: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pc-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --pc-transition: all 0.15s ease;
}

/* ==========================================================================
   GLOBAL TABLE OVERFLOW
   ========================================================================== */
table {
    overflow: hidden;
    border-radius: var(--pc-radius);
}

/* ==========================================================================
   SPINNER
   ========================================================================== */
@keyframes pcSpin { to { transform: rotate(360deg); } }
.pc-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pcSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}

/* ==========================================================================
   GLOBAL LINK COLOR
   ========================================================================== */
a {
    color: var(--pc-link);
}
a:hover {
    color: var(--pc-primary-dark);
}
/* Buttons as links should always have white text */
a.pc-btn-primary,
a.pc-btn.pc-btn-primary {
    color: #fff !important;
}
a.pc-btn-primary:hover,
a.pc-btn.pc-btn-primary:hover {
    color: #fff !important;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
[data-theme="dark"] {
    --pc-text: #e2e8f0;
    --pc-text-secondary: #a0aec0;
    --pc-text-muted: #9aa5b4;
    --pc-border: #2d3748;
    --pc-border-light: #1a202c;
    --pc-bg: #1a202c;
    --pc-bg-white: #2d3748;
    --pc-bg-hover: #1e2633;
    --pc-input-bg: #3a4556;
    --pc-input-border: #718096;
    --pc-input-focus-bg: #2d3748;
    --pc-primary-light: rgba(255,127,75,0.15);
    --pc-success-light: rgba(72,187,120,0.15);
    --pc-danger-light: rgba(229,62,62,0.15);
    --pc-warning-light: rgba(236,201,75,0.15);
    --pc-info-light: rgba(66,153,225,0.15);
    --pc-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --pc-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --pc-shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
}

/* Dark mode overrides for elements that use hardcoded colors */
[data-theme="dark"] .pc-card {
    background: var(--pc-bg-white);
    border-color: var(--pc-border);
}
.pc-card--transparent,
.pc-card--transparent > .pc-card-header,
.pc-card--transparent > .pc-card-body,
.pc-card--transparent > div {
    background: transparent !important;
}
[data-theme="dark"] .pc-card--transparent {
    background: transparent !important;
    border-color: #4a5568 !important;
}
[data-theme="dark"] .pc-card--transparent > .pc-card-header,
[data-theme="dark"] .pc-card--transparent > .pc-card-body,
[data-theme="dark"] .pc-card--transparent > div {
    background: transparent !important;
}

[data-theme="dark"] .pc-card-header {
    border-bottom-color: var(--pc-border);
}

[data-theme="dark"] .pc-table thead th {
    background: #1a202c;
    border-color: var(--pc-border);
    color: var(--pc-text);
}

[data-theme="dark"] .pc-table tbody td {
    border-color: var(--pc-border);
    color: var(--pc-text);
}

[data-theme="dark"] .pc-table tbody tr:hover {
    background: var(--pc-bg-hover);
}

[data-theme="dark"] .pc-form-section {
    border-color: var(--pc-border);
}

[data-theme="dark"] .pc-form-section-title {
    color: var(--pc-text);
}

[data-theme="dark"] .pc-form-group label,
[data-theme="dark"] .pc-form label,
[data-theme="dark"] .pc-card label,
[data-theme="dark"] label {
    color: #d0d5dd !important;
}

[data-theme="dark"] .pc-help {
    color: #a0aec0;
}

[data-theme="dark"] .pc-alert {
    border-color: var(--pc-border);
}

[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea {
    background-color: var(--pc-input-bg) !important;
    border-color: var(--pc-input-border) !important;
    color: var(--pc-text) !important;
}

[data-theme="dark"] select:focus,
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] textarea:focus {
    background-color: var(--pc-input-focus-bg) !important;
}

[data-theme="dark"] .pc-form-actions {
    border-color: var(--pc-border);
    background: var(--pc-bg-white);
}

[data-theme="dark"] .pc-page-header {
    border-bottom-color: var(--pc-border);
}

[data-theme="dark"] .pc-btn-secondary {
    background: #4a5568 !important;
    border-color: #5a6882 !important;
    color: var(--pc-text);
}

[data-theme="dark"] .pc-report-tab {
    background: var(--pc-bg-white);
    border-color: var(--pc-border);
    color: var(--pc-text) !important;
}

[data-theme="dark"] .pc-search input {
    background: var(--pc-input-bg);
    border-color: var(--pc-input-border);
    color: var(--pc-text);
}

/* Dark mode: Metronic wrapper overrides */
[data-theme="dark"] .m-wrapper {
    background: #1a202c !important;
}

[data-theme="dark"] .m-content {
    background: #1a202c !important;
}

[data-theme="dark"] .m-portlet {
    background: #2d3748 !important;
    border-color: #2d3748 !important;
}

[data-theme="dark"] .m-portlet__body {
    background: #2d3748 !important;
}

[data-theme="dark"] .m-footer {
    background: #1a202c !important;
    color: #718096 !important;
}

[data-theme="dark"] .m-footer .m-footer__copyright {
    color: #718096 !important;
}

/* Dark mode: stat boxes with hardcoded colors */
[data-theme="dark"] .pc-badge {
    opacity: 0.95;
}

/* Dark mode: time picker */
[data-theme="dark"] .pc-time-picker {
    background: var(--pc-input-bg);
    border-color: var(--pc-input-border);
}

[data-theme="dark"] .pc-time-sep {
    color: var(--pc-text);
}

/* Toolbar header + brand (hamburger) section - unified navy background */
.m-header,
.m-brand,
.m-brand.m-brand--skin-dark {
    background: #131a2e !important;
}

/* Dark mode: toolbar header */
[data-theme="dark"] .m-header {
    background: #0f1420 !important;
}

[data-theme="dark"] .m-brand,
[data-theme="dark"] .m-brand.m-brand--skin-dark {
    background: #0f1420 !important;
}

/* Navigation: override Metronic red (#db1430) with orange on active/expanded items */
/* Match Metronic's specificity: .m-aside-menu.m-aside-menu--skin-dark/light */
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__heading,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__heading {
    background-color: var(--pc-primary) !important;
}
/* White text/icon/arrow on orange background */
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__link-text {
    color: #fff !important;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__link-icon {
    color: #fff !important;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__ver-arrow,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__ver-arrow,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__ver-arrow,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__ver-arrow {
    color: #fff !important;
}
/* Hide the left arrow indicator */
.m-aside-left .m-menu__item-here {
    display: none !important;
}
/* Active sub-item text orange */
.m-aside-menu .m-menu__nav .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
    color: var(--pc-primary) !important;
}

/* Toolbar dropdown - z-index above AI panel, shadow on all sides */
.m-menu__submenu {
    border-radius: 0 0 10px 10px !important;
    overflow: visible !important;
    z-index: 101 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14), -3px 0 10px rgba(0,0,0,0.06), 3px 0 10px rgba(0,0,0,0.06), 0 -2px 8px rgba(0,0,0,0.05) !important;
}
/* Move overflow clip to inner nav so content still respects rounded corners */
.m-menu__subnav {
    border-radius: 0 0 10px 10px !important;
    overflow: hidden !important;
}
/* Toolbar header and nav above AI panel */
.m-header {
    z-index: 110 !important;
}
.m-aside-left {
    z-index: 105 !important;
}

/* Dark mode: toolbar dropdown menus */
[data-theme="dark"] .m-menu__submenu {
    background: #2d3748 !important;
}

[data-theme="dark"] .m-menu__subnav {
    background: #2d3748 !important;
}

[data-theme="dark"] .m-menu__submenu .m-menu__link-text {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .m-menu__submenu .m-menu__heading .m-menu__link-text {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .m-menu__submenu .m-menu__link:hover {
    background: #1a202c !important;
}

[data-theme="dark"] .m-menu__content {
    background: #2d3748 !important;
}

[data-theme="dark"] .m-menu__inner {
    background: #2d3748 !important;
}

[data-theme="dark"] .m-menu__submenu hr {
    border-color: #4a5568 !important;
}

/* Dark mode: Appearance panel labels */
[data-theme="dark"] .pcAppLabel {
    color: #e2e8f0 !important;
}

/* Dark mode: Metronic tables in old pages */
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
    border-color: #4a5568 !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background: #1a202c !important;
}

/* ==========================================================================
   TOOLBAR DROPDOWN - hover & link color overrides (replace Metronic purple)
   ========================================================================== */

/* Top-level nav: soft white text, OCC highlight on hover/active */
#m_header_menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text,
#m_header_menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon,
#m_header_menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__hor-arrow {
    color: #d0d7e4 !important;
    transition: color 0.2s;
}
#m_header_menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text,
#m_header_menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon,
#m_header_menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__hor-arrow,
#m_header_menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
#m_header_menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
    color: var(--pc-primary) !important;
}

/* Dropdown item hover - replace purple with OCC highlight light */
#m_header_menu .m-menu__submenu .m-menu__item:hover > .m-menu__link {
    background-color: var(--pc-primary-light) !important;
}
#m_header_menu .m-menu__submenu .m-menu__item:hover > .m-menu__link .m-menu__link-text {
    color: var(--pc-primary) !important;
}
/* Dropdown item default text */
#m_header_menu .m-menu__submenu .m-menu__item > .m-menu__link .m-menu__link-text {
    color: #374151 !important;
    padding-left: 10px !important;
}

/* Fix: bare FA icons replacing Metronic bullet cells must be table-cells to avoid overlapping text */
#m_header_menu .m-menu__submenu .m-menu__link > i[class*="fa-"] {
    display: table-cell !important;
    vertical-align: middle !important;
    width: 36px;
    min-width: 36px;
    text-align: center;
    padding: 0 10px 0 0 !important;
    font-size: 16px !important;
    line-height: 1;
}

/* Dropdown section headings - uppercase label style */
#m_header_menu .m-menu__submenu .m-menu__heading .m-menu__link-text {
    color: #6b7a90 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700 !important;
}

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */
.pc-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pc-border);
}

.pc-page-header h1,
.pc-page-header h2,
.pc-page-header h3 {
    font-family: var(--pc-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--pc-text);
    margin: 0;
}

.pc-page-header .pc-subtitle {
    font-size: 14px;
    color: var(--pc-text-secondary);
    margin-top: 4px;
}

/* Page-title icon badge - square rounded tile with the icon inside.
   Kept in sync with the marketing site's .pf-ic (platform-features-master.cfm):
   orange gradient, white glyph, soft shadow. Use as:
     <div class="pc-page-title">
       <span class="pc-title-ic"><i class="fa-solid fa-..."></i></span>
       <div><h2>Title</h2><div class="pc-subtitle">...</div></div>
     </div>  */
.pc-page-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pc-title-ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    font-size: 1.05rem;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--pc-primary), var(--pc-primary-dark));
    box-shadow: 0 10px 22px -12px var(--pc-primary);
}
.pc-title-ic i { color: #fff; }
/* card-header title with an icon tile */
.pc-card-header h4.pc-h4-ic { display: flex; align-items: center; gap: 10px; }

.pc-page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .pc-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .pc-page-actions {
        width: 100%;
    }
    .pc-page-actions .pc-btn {
        flex: 1;
        text-align: center;
    }
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.pc-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pc-text-muted);
    margin-bottom: 16px;
}

.pc-breadcrumbs a {
    color: var(--pc-primary) !important;
    text-decoration: none;
}

.pc-breadcrumbs a:hover {
    text-decoration: underline;
}

.pc-breadcrumbs .pc-sep::after {
    content: '/';
    margin: 0 2px;
    color: var(--pc-text-muted);
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.pc-card {
    background: var(--pc-bg-white);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow);
    overflow: hidden;
}
/* Clip the summary table header to match card corners */
.pc-card > .pc-table {
    border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0;
    overflow: hidden;
}
.pc-card > .pc-table thead th:first-child {
    border-top-left-radius: var(--pc-radius-lg);
}
.pc-card > .pc-table thead th:last-child {
    border-top-right-radius: var(--pc-radius-lg);
}

.pc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--pc-border-light);
    background: var(--pc-bg-hover);
}

/* =============================================
   COLLAPSIBLE CARDS: pc-dropdown-yes / pc-dropdown-no
   Add pc-dropdown-yes to .pc-card to make it collapsible.
   Default state is expanded. Clicking header toggles body.
   ============================================= */
.pc-card.pc-dropdown-yes > .pc-card-header {
    cursor: pointer;
    user-select: none;
}
/* Toggle icons injected via JS initCardToggleIcons() in body.cfm */
.pc-card.pc-dropdown-yes > .pc-card-header::after { content: none; }
.pc-card.pc-dropdown-yes.pc-collapsed > .pc-card-header::after { content: none; }
.pc-card.pc-dropdown-yes.pc-collapsed > .pc-card-body {
    display: none;
}
/* Collapsed: header IS the entire visible card.
   Remove the inner divider and explicitly round the bottom corners -
   don't rely on overflow:hidden clipping the child border at the card's final edge. */
.pc-card.pc-dropdown-yes.pc-collapsed {
    background: var(--pc-bg-hover);
}
.pc-card.pc-dropdown-yes.pc-collapsed > .pc-card-header {
    border-bottom: none;
    border-bottom-left-radius: var(--pc-radius-lg);
    border-bottom-right-radius: var(--pc-radius-lg);
}
/* Dark-background collapsible card header - toggle icon white */
.pc-card.pc-dropdown-yes.pc-card-dark > .pc-card-header::after {
    color: white;
}
/* The +/- toggle is injected by initCardToggleIcons() as <i class="pc-toggle-icon">
   with an inline color:var(--pc-text-secondary). Force white here so it matches the
   white header title on dark cards - a stylesheet !important overrides the inline style. */
.pc-card.pc-dropdown-yes.pc-card-dark > .pc-card-header .pc-toggle-icon {
    color: #fff !important;
}
/* No dropdown - default behavior, no toggle icon */
.pc-card.pc-dropdown-no > .pc-card-header::after {
    content: none;
}

.pc-card-header h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--pc-text);
    margin: 0;
}

.pc-card-body {
    padding: 24px;
}
/* When the body is the last visible child (no footer), round its bottom corners
   explicitly so they match the card border - no dependence on overflow:hidden. */
.pc-card-body:last-child {
    border-bottom-left-radius: var(--pc-radius-lg);
    border-bottom-right-radius: var(--pc-radius-lg);
}

.pc-card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--pc-border-light);
    background: var(--pc-bg-hover);
    /* Footer is always the last section - own the bottom rounding explicitly. */
    border-bottom-left-radius: var(--pc-radius-lg);
    border-bottom-right-radius: var(--pc-radius-lg);
}

@media (max-width: 768px) {
    .pc-card-header,
    .pc-card-body,
    .pc-card-footer {
        padding: 16px;
    }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 6px;
    font-family: var(--pc-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: var(--pc-transition);
    white-space: nowrap;
    line-height: 1.4;
}

.pc-btn:hover {
    transform: translateY(-1px);
    text-decoration: none !important;
}

.pc-btn:active {
    transform: translateY(0);
}

.pc-btn i {
    font-size: 14px;
}

.pc-btn-primary {
    background: var(--pc-primary);
    color: #fff !important;
}

.pc-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(255,127,75,0.35);
    color: #fff !important;
}

.pc-btn-secondary {
    background: var(--pc-bg-white);
    color: var(--pc-text-secondary) !important;
    border-color: var(--pc-border);
}

.pc-btn-secondary:hover {
    background: var(--pc-bg);
    color: var(--pc-text) !important;
    box-shadow: var(--pc-shadow);
}

.pc-btn-success {
    background: var(--pc-success);
    color: #fff !important;
}

.pc-btn-success:hover {
    box-shadow: 0 4px 12px rgba(72,187,120,0.35);
    color: #fff !important;
}

.pc-btn-danger {
    background: var(--pc-danger);
    color: #fff !important;
}

.pc-btn-danger:hover {
    box-shadow: 0 4px 12px rgba(229,62,62,0.35);
    color: #fff !important;
}

.pc-btn-ghost {
    background: transparent;
    color: var(--pc-text-secondary) !important;
    padding: 6px 10px;
}

.pc-btn-ghost:hover {
    background: var(--pc-bg);
    color: var(--pc-text) !important;
}

.pc-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.pc-btn-lg {
    padding: 12px 24px;
    font-size: 15px;
}

.pc-btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .pc-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* ==========================================================================
   DATA TABLE
   ========================================================================== */
.pc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-lg);
    overflow: hidden;
}
.pc-table-wrap .pc-table {
    margin-bottom: 0;
}
.pc-table-wrap .pc-table thead th:first-child {
    border-top-left-radius: var(--pc-radius-lg);
}
.pc-table-wrap .pc-table thead th:last-child {
    border-top-right-radius: var(--pc-radius-lg);
}

.pc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.pc-table thead th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pc-text-secondary);
    background: var(--pc-bg);
    border-bottom: 2px solid var(--pc-border);
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.pc-table thead th.pc-th-center {
    text-align: center;
}

.pc-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pc-border-light);
    color: var(--pc-text);
    vertical-align: middle;
}

.pc-table tbody tr {
    transition: var(--pc-transition);
}

.pc-table tbody tr:hover {
    background: var(--pc-bg-hover);
}

.pc-table tbody tr:last-child td {
    border-bottom: none;
}

.pc-table .pc-td-center {
    text-align: center;
}

.pc-table .pc-td-nowrap {
    white-space: nowrap;
}

.pc-table .pc-td-title {
    font-weight: 600;
    color: var(--pc-text);
}

.pc-table .pc-td-title a {
    color: var(--pc-link) !important;
    text-decoration: none;
}

.pc-table .pc-td-title a:hover {
    color: var(--pc-primary-dark) !important;
    text-decoration: underline;
}

.pc-table .pc-td-sub {
    font-size: 12px;
    color: var(--pc-text-secondary);
    margin-top: 2px;
}

.pc-table .pc-td-actions {
    display: table-cell !important;
    vertical-align: middle !important;
}

.pc-table .pc-td-id {
    font-family: var(--pc-font-mono);
    font-size: 13px;
    color: var(--pc-text-muted);
    font-weight: 500;
}

/* Responsive: stack table on mobile */
@media (max-width: 768px) {
    .pc-table thead {
        display: none;
    }
    .pc-table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--pc-border);
        border-radius: var(--pc-radius);
        padding: 12px;
        background: var(--pc-bg-white);
    }
    .pc-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--pc-border-light);
    }
    .pc-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        color: var(--pc-text-secondary);
        margin-right: 12px;
        flex-shrink: 0;
    }
    .pc-table tbody td:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   TABLE TOOLBAR (search, filters, actions above table)
   ========================================================================== */
.pc-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.pc-search {
    position: relative;
    display: block;
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}

.pc-search input {
    width: 100%;
    padding: 9px 12px 9px 40px !important;
    border: 1px solid var(--pc-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--pc-font);
    color: var(--pc-text);
    background: var(--pc-bg-white);
    transition: var(--pc-transition);
    box-sizing: border-box;
    display: block;
}

.pc-search input:focus {
    outline: none;
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px rgba(255,127,75,0.1);
}

.pc-search input::placeholder {
    color: var(--pc-text-muted);
}

/* Force the search icon to sit inside the input on the left, no matter what FA rewrites it into. */
.pc-search i,
.pc-search svg,
.pc-search [data-fa-i2svg] {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--pc-text-muted) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    width: 13px !important;
    height: 13px !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pc-record-count {
    font-size: 13px;
    color: var(--pc-text-secondary) !important;
}

@media (max-width: 768px) {
    .pc-table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .pc-search {
        max-width: none;
    }
}

/* ==========================================================================
   BADGES
   ========================================================================== */
.pc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.pc-badge-success {
    background: var(--pc-success);
    color: #fff;
}

.pc-badge-danger {
    background: var(--pc-danger);
    color: #fff;
}

.pc-badge-warning {
    background: var(--pc-warning);
    color: #744210;
}

.pc-badge-info {
    background: var(--pc-info-light);
    color: #2b6cb0;
}

.pc-badge-query {
    background: #6b46c1;
    color: #fff;
}

.pc-badge-muted {
    background: var(--pc-bg);
    color: var(--pc-text-muted);
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.pc-form {
    width: 100%;
}

.pc-form-section {
    margin-bottom: 28px;
}

/* Help / hint text under form inputs - used by .pc-form-group label hints
   and the "Current: #abc" colour-picker readouts. Theme-aware. */
.pc-form-help {
    display: block;
    font-size: 12px;
    color: var(--pc-text-secondary);
    margin-top: 4px;
}
.pc-form-help b {
    color: var(--pc-text);
}

.pc-form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pc-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--pc-primary);
    display: inline-block;
}

.pc-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.pc-form-row-full {
    grid-template-columns: 1fr;
}

.pc-form-group {
    display: flex;
    flex-direction: column;
}

.pc-form-group label {
    font-size: 15px;
    font-weight: 500;
    color: #9ca3af;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pc-form-group label .pc-required {
    color: var(--pc-danger);
    margin-left: 2px;
}

.pc-form-group input[type="text"],
.pc-form-group input[type="email"],
.pc-form-group input[type="password"],
.pc-form-group input[type="number"],
.pc-form-group input[type="url"],
.pc-form-group input[type="date"],
.pc-form-group input[type="time"],
.pc-form-group input[type="tel"],
.pc-form-group select,
.pc-form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--pc-input-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--pc-font);
    color: var(--pc-text);
    background-color: var(--pc-input-bg);
    transition: var(--pc-transition);
}

.pc-form-group input:hover,
.pc-form-group select:hover,
.pc-form-group textarea:hover {
    border-color: #556275;
    background-color: #d4dae6;
}

.pc-form-group input:focus,
.pc-form-group select:focus,
.pc-form-group textarea:focus {
    outline: none;
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px rgba(255,127,75,0.15);
    background-color: var(--pc-input-focus-bg);
}

.pc-form-group input::placeholder,
.pc-form-group textarea::placeholder {
    color: #8896a7;
}

.pc-form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.pc-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555e6e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.pc-form-group .pc-help {
    font-size: 12px;
    color: var(--pc-text-muted);
    margin-top: 4px;
}

.pc-form-group input[type="file"] {
    padding: 8px;
    font-size: 13px;
    border: 2px dashed var(--pc-border);
    border-radius: 6px;
    background: var(--pc-bg);
    cursor: pointer;
}

.pc-form-group input[type="file"]:hover {
    border-color: var(--pc-primary);
    background: var(--pc-primary-light);
}

.pc-form-group input[type="checkbox"],
.pc-form-group input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--pc-primary);
    cursor: pointer;
    margin: 0;
    transform: none;
    padding: 0;
}

.pc-form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--pc-text);
    cursor: pointer;
}

@media (max-width: 768px) {
    .pc-form-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   INFO BOX (collapsible instruction panels)
   ========================================================================== */
.pc-info-box {
    background: var(--pc-info-light);
    border: 1px solid #bee3f8;
    border-radius: var(--pc-radius);
    margin-bottom: 20px;
    overflow: hidden;
}

.pc-info-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #2b6cb0;
    user-select: none;
}

.pc-info-box-header:hover {
    background: rgba(66,153,225,0.08);
}

.pc-info-box-header i {
    transition: var(--pc-transition);
}

.pc-info-box-body {
    padding: 0 16px 16px;
    font-size: 13px;
    color: var(--pc-text-secondary);
    line-height: 1.6;
}

/* ==========================================================================
   FORM ACTIONS BAR (sticky save/cancel)
   ========================================================================== */
.pc-form-actions {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    background: var(--pc-bg-white);
    border-top: 1px solid var(--pc-border);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

@media (max-width: 768px) {
    .pc-form-actions {
        padding: 12px 16px;
    }
    .pc-form-actions .pc-btn {
        flex: 1;
    }
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.pc-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--pc-radius);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}

.pc-alert i {
    font-size: 16px;
    flex-shrink: 0;
}

.pc-alert-close {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.6;
    font-size: 16px;
}

.pc-alert-close:hover {
    opacity: 1;
}

.pc-alert-success {
    background: var(--pc-success-light);
    color: #276749;
    border: 1px solid #c6f6d5;
}

.pc-alert-danger {
    background: var(--pc-danger-light);
    color: #c53030;
    border: 1px solid #fed7d7;
}

.pc-alert-warning {
    background: var(--pc-warning-light);
    color: #975a16;
    border: 1px solid #fefcbf;
}

.pc-alert-info {
    background: var(--pc-info-light);
    color: #2b6cb0;
    border: 1px solid #bee3f8;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.pc-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--pc-text-muted);
}

.pc-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    color: var(--pc-border);
}

.pc-empty p {
    font-size: 15px;
    margin-bottom: 16px;
}

/* ==========================================================================
   TAGS
   ========================================================================== */
.pc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--pc-text-secondary);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.pc-text-muted { color: var(--pc-text-muted) !important; }
.pc-text-primary { color: var(--pc-primary) !important; }
.pc-text-success { color: var(--pc-success) !important; }
.pc-text-danger { color: var(--pc-danger) !important; }
.pc-text-sm { font-size: 12px !important; }
.pc-text-lg { font-size: 16px !important; }
.pc-text-bold { font-weight: 700 !important; }
.pc-text-center { text-align: center !important; }
.pc-text-right { text-align: right !important; }
.pc-mt-0 { margin-top: 0 !important; }
.pc-mb-0 { margin-bottom: 0 !important; }
.pc-mb-sm { margin-bottom: 8px !important; }
.pc-mb-md { margin-bottom: 16px !important; }
.pc-mb-lg { margin-bottom: 24px !important; }
.pc-hidden { display: none !important; }
.pc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   CLIENT-SIDE TABLE SEARCH
   ========================================================================== */
.pc-table tbody tr.pc-search-hide {
    display: none;
}

/* ==========================================================================
   LEGACY TABLE MODERNIZER
   Overrides inline styles on old-school <TABLE> report output
   to give a modern look without rewriting the CF templates.
   Applied via wrapper class .pc-legacy-table
   ========================================================================== */
.pc-legacy-table table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-family: var(--pc-font) !important;
    background: var(--pc-bg-white) !important;
    border: 1px solid var(--pc-border) !important;
    border-radius: var(--pc-radius) !important;
    overflow: hidden;
}

.pc-legacy-table table table {
    border: none !important;
    border-radius: 0 !important;
}

.pc-legacy-table td,
.pc-legacy-table th {
    font-family: var(--pc-font) !important;
    font-size: 13px !important;
    border-color: var(--pc-border-light) !important;
    border-style: solid !important;
    border-width: 0 0 1px 0 !important;
    padding: 10px 12px !important;
}

.pc-legacy-table tr:last-child td {
    border-bottom: none !important;
}

/* Header rows - detect by bgcolor or style */
.pc-legacy-table tr.acc02 td,
.pc-legacy-table tr[bgcolor] td,
.pc-legacy-table td[bgcolor="003163"],
.pc-legacy-table td[bgcolor="336699"] {
    background: var(--pc-bg) !important;
    color: var(--pc-text) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid var(--pc-border) !important;
    white-space: nowrap;
}

/* Override colored header cells */
.pc-legacy-table td[style*="background-color:#Order_BGCOLOR#"],
.pc-legacy-table td[style*="Order_BGCOLOR"] {
    background: var(--pc-bg) !important;
    color: var(--pc-text) !important;
}

/* Data rows */
.pc-legacy-table tr[bgcolor="ffffff"] td,
.pc-legacy-table tr[bgcolor="eeeeee"] td,
.pc-legacy-table td[style*="background-color:ffffff"],
.pc-legacy-table td[style*="background-color:eeeeee"] {
    background: var(--pc-bg-white) !important;
    color: var(--pc-text) !important;
}

/* Hover effect on data rows */
.pc-legacy-table > table > tbody > tr:hover td,
.pc-legacy-table table > tr:hover td {
    background: var(--pc-bg-hover) !important;
}

/* Status cells - acknowledged (green) */
.pc-legacy-table td[style*="background-color:a7d776"],
.pc-legacy-table td[style*="background-color:99ff99"] {
    background: var(--pc-success-light) !important;
    color: #276749 !important;
    font-weight: 600 !important;
}

/* Status cells - not acknowledged (red) */
.pc-legacy-table td[style*="background-color:cd919d"],
.pc-legacy-table td[style*="background-color:ffcccc"] {
    background: var(--pc-danger-light) !important;
    color: #c53030 !important;
    font-weight: 600 !important;
}

/* Status cells - pending (yellow) */
.pc-legacy-table td[style*="background-color:ffff99"] {
    background: var(--pc-warning-light) !important;
    color: #975a16 !important;
    font-weight: 600 !important;
}

/* Links inside legacy tables */
.pc-legacy-table a {
    color: var(--pc-primary) !important;
    font-weight: 600;
    text-decoration: none;
}

.pc-legacy-table a:hover {
    text-decoration: underline;
}

/* Font overrides - kill old font tags */
.pc-legacy-table font {
    font-family: var(--pc-font) !important;
}

.pc-legacy-table font[class*="opens_10"],
.pc-legacy-table font[class*="opens_11"],
.pc-legacy-table font[class*="opens_12"] {
    font-size: 13px !important;
}

.pc-legacy-table font[class*="opens_13"],
.pc-legacy-table font[class*="opens_14"],
.pc-legacy-table font[class*="opens_15"],
.pc-legacy-table font[class*="opens_16"] {
    font-size: 14px !important;
}

/* Pagination area */
.pc-legacy-table h5 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--pc-text) !important;
    margin-bottom: 12px;
}

/* Inner detail tables (line items) */
.pc-legacy-table table table td {
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-width: 0 0 1px 0 !important;
    border-color: var(--pc-border-light) !important;
}

/* Print/action buttons */
.pc-legacy-table input[type="submit"],
.pc-legacy-table input[type="button"],
.pc-legacy-table .btn {
    font-family: var(--pc-font) !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer;
}

/* Responsive wrapper */
@media (max-width: 768px) {
    .pc-legacy-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pc-legacy-table table {
        min-width: 900px;
    }
}

/* =============================================
   PC AI ASSISTANT - Ribbon & Chat Panel
   ============================================= */

/* --- Ribbon Bar (collapsed state) --- */
.pcai-ribbon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--pc-primary);
    padding: 0 20px;
    height: 42px;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 10;
    transition: box-shadow 0.2s ease;
}
.pcai-ribbon:hover {
    box-shadow: 0 2px 12px color-mix(in srgb, var(--pc-primary) 40%, transparent);
}
.pcai-ribbon-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pcai-ribbon-icon {
    font-size: 18px;
    color: #fff;
    animation: pcai-sparkle 2s ease-in-out infinite;
}
@keyframes pcai-sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.15); }
}
.pcai-ribbon-text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.pcai-ribbon-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}
.pcai-ribbon-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pcai-ribbon-arrow {
    color: #fff;
    font-size: 12px;
    transition: transform 0.3s ease;
}
.pcai-ribbon.pcai-open .pcai-ribbon-arrow {
    transform: rotate(180deg);
}

/* --- Chat Panel (expanded state) --- */
.pcai-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    border-top: none;
    border-bottom: 2px solid var(--pc-primary);
    position: relative;
    z-index: 10;
}
.pcai-panel.pcai-panel-open {
    max-height: 50vh;
}

.pcai-panel-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 50vh;
}

/* --- Prompt Input Area (always at top of panel) --- */
.pcai-input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f8f9fc;
    border-bottom: 1px solid #e8ecf1;
    flex-shrink: 0;
}
.pcai-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.pcai-input {
    width: 100%;
    border: 1px solid #dde1e8;
    border-radius: 24px;
    padding: 10px 48px 10px 18px;
    font-size: 15px;
    font-family: inherit;
    color: #2d3748;
    background: #fff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: none;
    line-height: 1.4;
    /* Lock to a single-row natural height as the floor; pcaiAutoResize grows it up to max-height as the user types. */
    min-height: 42px;
    max-height: 80px;
    box-sizing: border-box;
    overflow-y: auto;
}
.pcai-input:focus {
    border-color: var(--pc-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-primary) 15%, transparent);
}
.pcai-input::placeholder {
    color: #718096;
    font-style: italic;
}
/* Completely hide the scrollbar on the input field across all browsers.
   The textarea can still accept long input - it just won't show a visual scrollbar with its arrow caps. */
.pcai-input { scrollbar-width: none; -ms-overflow-style: none; }
.pcai-input::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Mic button inside input */
.pcai-mic-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #718096;
    font-size: 17px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}
.pcai-mic-btn:hover {
    color: var(--pc-primary);
    background: color-mix(in srgb, var(--pc-primary) 8%, transparent);
}
.pcai-mic-btn.pcai-mic-active {
    color: #e53e3e;
    animation: pcai-mic-pulse 1s ease-in-out infinite;
}
@keyframes pcai-mic-pulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.2); }
}

/* Send button */
.pcai-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--pc-primary);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.1s;
    flex-shrink: 0;
}
.pcai-send-btn:hover {
    background: var(--pc-primary-dark);
    transform: scale(1.05);
}
.pcai-send-btn:active {
    transform: scale(0.95);
}
.pcai-send-btn:disabled {
    background: #a0aec0;
    cursor: not-allowed;
    transform: none;
}

/* --- Conversation Area --- */
.pcai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
}
.pcai-messages::-webkit-scrollbar {
    width: 6px;
}
.pcai-messages::-webkit-scrollbar-thumb {
    background: #a0aec0;
    border-radius: 3px;
}
.pcai-messages::-webkit-scrollbar-track {
    background: transparent;
}

/* Empty state */
.pcai-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    color: #718096;
}
.pcai-empty-icon,
.pcai-empty-icon i,
.pcai-empty-icon .fa-robot {
    font-size: 64px !important;
    color: var(--pc-primary);
    margin-bottom: 16px;
    opacity: 0.85;
}
.pcai-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 6px;
}
.pcai-empty-hint {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.5;
}
.pcai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    justify-content: center;
}
.pcai-suggestion {
    background: #f7f8fc;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.pcai-suggestion:hover {
    background: var(--pc-primary-light);
    border-color: var(--pc-primary);
    color: var(--pc-primary);
}

/* Message bubbles */
.pcai-msg {
    display: flex;
    gap: 10px;
    max-width: 85%;
    animation: pcai-msg-in 0.25s ease-out;
}
@keyframes pcai-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.pcai-msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.pcai-msg-ai {
    align-self: flex-start;
}
.pcai-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.pcai-msg-user .pcai-msg-avatar {
    background: #edf2f7;
    color: #4a5568;
}
.pcai-msg-ai .pcai-msg-avatar {
    background: var(--pc-primary);
    color: #fff;
    width: 42px;
    height: 42px;
    font-size: 22px;
}
.pcai-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
}
.pcai-msg-user .pcai-msg-bubble {
    background: var(--pc-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.pcai-msg-ai .pcai-msg-bubble {
    background: #f7f8fc;
    color: #2d3748;
    border-bottom-left-radius: 4px;
}
/* Code blocks inside AI responses */
.pcai-msg-ai .pcai-msg-bubble pre {
    background: #1a202c;
    color: #e2e8f0;
    padding: 10px 12px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 13px;
    margin: 8px 0 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.pcai-msg-ai .pcai-msg-bubble code {
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.pcai-msg-ai .pcai-msg-bubble pre code {
    background: none;
    padding: 0;
}
/* Tables inside AI responses */
.pcai-tbl-wrap {
    overflow-x: auto;
    margin: 8px 0;
}
.pcai-msg-ai .pcai-msg-bubble table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pcai-msg-ai .pcai-msg-bubble th,
.pcai-msg-ai .pcai-msg-bubble td {
    border: 1px solid #e2e8f0;
    padding: 6px 10px;
    text-align: left;
    background: #fff;
    color: #2d3748;
}
.pcai-msg-ai .pcai-msg-bubble th {
    background: #edf2f7;
    font-weight: 600;
}
.pcai-msg-ai .pcai-msg-bubble tr:nth-child(even) td {
    background: #f7fafc;
}
/* Links inside AI response bubbles */
.pcai-msg-ai .pcai-msg-bubble a {
    color: var(--pc-primary);
    text-decoration: underline;
    word-break: break-all;
}
.pcai-msg-ai .pcai-msg-bubble a:hover {
    opacity: 0.75;
    text-decoration: underline;
}
/* Links inside table cells - no underline by default, underline on hover */
.pcai-msg-ai .pcai-msg-bubble td a,
.pcai-msg-ai .pcai-msg-bubble th a {
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
}
.pcai-msg-ai .pcai-msg-bubble td a:hover,
.pcai-msg-ai .pcai-msg-bubble th a:hover {
    text-decoration: underline;
}
.pcai-msg-time {
    font-size: 11px;
    color: #718096;
    margin-top: 4px;
    padding: 0 4px;
}
.pcai-msg-user .pcai-msg-time {
    text-align: right;
}

/* Typing indicator */
.pcai-typing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
.pcai-wave {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    padding: 8px 13px;
    height: 40px;
    background: #f7f8fc;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
}
.pcai-wave-bar {
    width: 4px;
    border-radius: 2px;
    background: var(--pc-primary);
    transform-origin: bottom;
    animation: pcai-wave 1.2s ease-in-out infinite;
}
.pcai-wave-bar:nth-child(1) { height: 8px;  animation-delay: 0s; }
.pcai-wave-bar:nth-child(2) { height: 16px; animation-delay: 0.15s; }
.pcai-wave-bar:nth-child(3) { height: 22px; animation-delay: 0.3s; }
.pcai-wave-bar:nth-child(4) { height: 16px; animation-delay: 0.45s; }
.pcai-wave-bar:nth-child(5) { height: 8px;  animation-delay: 0.6s; }
@keyframes pcai-wave {
    0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
    50%       { transform: scaleY(1);   opacity: 1; }
}
#pcaiTypingElapsed {
    font-size: 13px;
    color: #888;
    perspective: 400px;
}
#pcaiTypingLabel {
    display: inline-block;
    transform-origin: top center;
}
@keyframes pcai-label-flip {
    from { opacity: 0; transform: rotateX(90deg); }
    to   { opacity: 1; transform: rotateX(0deg); }
}
[data-theme="dark"] .pcai-wave {
    background: #2d3748;
}
[data-theme="dark"] .pcai-wave-bar {
    background: #667eea;
}

/* --- Status bar at bottom of panel --- */
.pcai-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
    background: #f8f9fc;
    border-top: 1px solid #e8ecf1;
    font-size: 11px;
    color: #718096;
    flex-shrink: 0;
}
.pcai-status-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pcai-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #48bb78;
}
.pcai-status-dot.pcai-status-offline {
    background: #e53e3e;
}
.pcai-clear-btn {
    background: none;
    border: none;
    color: #718096;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.pcai-clear-btn:hover {
    color: #e53e3e;
    background: rgba(229, 62, 62, 0.08);
}

/* CSV Download button */
.pcai-csv-download {
    margin-top: 10px;
}
.pcai-csv-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #48bb78;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.pcai-csv-btn:hover {
    background: #38a169;
    transform: scale(1.03);
}
.pcai-csv-btn:active {
    transform: scale(0.97);
}
.pcai-csv-btn i {
    font-size: 15px;
}

/* Rating bar */
.pcai-rating {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(128,128,128,0.25);
    font-size: 13px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pcai-rating-label {
    font-weight: 500;
}
.pcai-rate-btn {
    background: #fff;
    border: 1px solid #6b7280;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    transition: background 0.15s;
}
.pcai-rate-btn:hover { background: #f3f4f6; }
.pcai-rate-status { margin-left: 4px; font-size: 13px; }
.pcai-rate-stats {
    margin-left: auto;
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* =============================================
   PC AI ASSISTANT - Dark Mode Overrides
   ============================================= */
[data-theme="dark"] .pcai-panel {
    background: #2d3748;
    border-bottom-color: var(--pc-primary);
}
[data-theme="dark"] .pcai-input-area {
    background: #1a202c;
    border-bottom-color: #4a5568;
}
[data-theme="dark"] .pcai-input {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}
[data-theme="dark"] .pcai-input::placeholder {
    color: #718096;
}
[data-theme="dark"] .pcai-mic-btn {
    color: #718096;
}
[data-theme="dark"] .pcai-messages::-webkit-scrollbar-thumb {
    background: #4a5568;
}
[data-theme="dark"] .pcai-empty-title {
    color: #e2e8f0;
}
[data-theme="dark"] .pcai-empty-hint {
    color: #718096;
}
[data-theme="dark"] .pcai-suggestion {
    background: #1a202c;
    border-color: #4a5568;
    color: #e2e8f0;
}
[data-theme="dark"] .pcai-suggestion:hover {
    background: #3d2a1e;
    border-color: var(--pc-primary);
    color: var(--pc-primary);
}
[data-theme="dark"] .pcai-msg-ai .pcai-msg-bubble {
    background: #1a202c;
    color: #e2e8f0;
}
[data-theme="dark"] .pcai-msg-ai .pcai-msg-bubble a {
    color: #63b3ed;
}
[data-theme="dark"] .pcai-msg-ai .pcai-msg-bubble td a,
[data-theme="dark"] .pcai-msg-ai .pcai-msg-bubble th a {
    color: #63b3ed;
}
[data-theme="dark"] .pcai-msg-user .pcai-msg-avatar {
    background: #4a5568;
    color: #e2e8f0;
}
[data-theme="dark"] .pcai-msg-ai .pcai-msg-bubble th {
    background: #2d3748;
    color: #e2e8f0;
}
[data-theme="dark"] .pcai-msg-ai .pcai-msg-bubble td {
    background: #1a202c;
    color: #e2e8f0;
}
[data-theme="dark"] .pcai-msg-ai .pcai-msg-bubble tr:nth-child(even) td {
    background: #1e2633;
}
[data-theme="dark"] .pcai-msg-ai .pcai-msg-bubble th,
[data-theme="dark"] .pcai-msg-ai .pcai-msg-bubble td {
    border-color: #4a5568;
}
[data-theme="dark"] .pcai-rating {
    color: #718096;
}
[data-theme="dark"] .pcai-rate-btn {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}
[data-theme="dark"] .pcai-rate-btn:hover { background: #3d4a5f; }
[data-theme="dark"] .pcai-rate-stats {
    color: #718096;
}
[data-theme="dark"] .pcai-typing-dots {
    background: #1a202c;
}
[data-theme="dark"] .pcai-typing-dot {
    background: #718096;
}
[data-theme="dark"] .pcai-status {
    background: #1a202c;
    border-top-color: #4a5568;
}
[data-theme="dark"] .pcai-status,
[data-theme="dark"] .pcai-clear-btn {
    color: #718096;
}

/* =============================================
   ACCORDION COMPONENT
   ============================================= */
.pc-accordion {
    margin: 10px 0;
}
.pc-accordion-item {
    border: 1px solid var(--pc-border-light);
    border-radius: var(--pc-radius-lg);
    margin-bottom: 8px;
    overflow: hidden;
}
.pc-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    user-select: none;
    transition: var(--pc-transition);
    border: none;
    width: 100%;
    text-align: left;
}
.pc-accordion-header::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    transition: transform 0.25s ease;
}
.pc-accordion-header.collapsed::after {
    transform: rotate(-90deg);
}
.pc-accordion-header--success { background: #48bb78; }
.pc-accordion-header--danger { background: #e53e3e; }
.pc-accordion-header--warning { background: #d69e2e; }
.pc-accordion-header--primary { background: var(--pc-primary); }
.pc-accordion-header--info { background: #4299e1; }
.pc-accordion-body {
    background: var(--pc-bg-white);
    padding: 16px;
}
.pc-accordion-body .pc-table {
    margin: 0;
}

/* Accordion dark mode */
[data-theme="dark"] .pc-accordion-item {
    border-color: var(--pc-border);
}
[data-theme="dark"] .pc-accordion-body {
    background: var(--pc-bg-white);
}

/* =============================================
   ORDER INFO GRID
   ============================================= */
.pc-order-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 16px;
}
.pc-order-info-grid .pc-card {
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border-color: #d0d0d0;
    border-radius: var(--pc-radius-lg);
    overflow: hidden;
}
.pc-order-info-grid .pc-card-header {
    background: #e8e8e8;
    border-bottom-color: #d0d0d0;
    border-radius: 0;
}
.pc-order-info-grid .pc-card-header h4 {
    color: #333;
}
[data-theme="dark"] .pc-order-info-grid .pc-card {
    border-color: #4a5568;
}
[data-theme="dark"] .pc-order-info-grid .pc-card-header {
    background: #1a202c;
    border-bottom-color: #4a5568;
}
[data-theme="dark"] .pc-order-info-grid .pc-card-header h4 {
    color: #e2e8f0;
}
.pc-info-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--pc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}
.pc-info-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--pc-text);
    margin-bottom: 10px;
}
.pc-info-value a {
    color: var(--pc-primary);
    font-weight: 700;
}
[data-theme="dark"] .pc-info-label {
    color: #9aa5b4;
}
[data-theme="dark"] .pc-info-value {
    color: var(--pc-text);
}
/* Two-column label:value row layout */
.pc-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid var(--pc-border-light);
    font-size: 12px;
}
.pc-info-row:last-child {
    border-bottom: none;
}
.pc-info-row-label {
    font-weight: 700;
    color: var(--pc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 11px;
    white-space: nowrap;
    margin-right: 12px;
}
.pc-info-row-value {
    font-weight: 500;
    color: var(--pc-text);
    text-align: right;
}
.pc-info-row-value a {
    color: var(--pc-link);
    font-weight: 700;
}
[data-theme="dark"] .pc-info-row {
    border-bottom-color: var(--pc-border);
}
[data-theme="dark"] .pc-info-row-label {
    color: #9aa5b4;
}
[data-theme="dark"] .pc-info-row-value {
    color: var(--pc-text);
}

/* Slightly larger variant - used where info rows sit in their own dedicated card */
.pc-info-row--lg { font-size: 13px; }
.pc-info-row--lg .pc-info-row-label { font-size: 12px; }

/* =============================================
   ORDER PAGE: Restyle m-portlet as modern cards
   ============================================= */
.m-portlet.m-portlet--bordered.m-portlet--bordered-semi.m-portlet--rounded {
    background: var(--pc-bg-white);
    border: 1.5px solid var(--pc-border) !important;
    border-radius: var(--pc-radius-lg) !important;
    box-shadow: var(--pc-shadow);
    overflow: hidden;
    width: auto !important;
    max-width: 100%;
}
.m-portlet.m-portlet--bordered .m-portlet__body {
    padding: 16px !important;
    font-size: 12px;
    color: var(--pc-text);
    line-height: 1.6;
}
.m-portlet.m-portlet--bordered .m-portlet__body strong {
    color: var(--pc-text);
}
.m-portlet.m-portlet--bordered .m-portlet__body a {
    color: var(--pc-primary);
    font-weight: 600;
}
/* Links inside cards inherit global link color */
.m-portlet.m-portlet--bordered .m-portlet__body hr {
    border: none;
    border-top: 2px solid var(--pc-primary);
    margin: 8px 0 12px;
    opacity: 0.6;
}

/* Order page: remove table borders inside info cards */
.m-portlet.m-portlet--bordered .m-portlet__body table {
    border: none !important;
    border-collapse: collapse !important;
}
.m-portlet.m-portlet--bordered .m-portlet__body table td {
    border: none !important;
    padding: 3px 6px !important;
    vertical-align: top;
}
.m-portlet.m-portlet--bordered .m-portlet__body table tr {
    border: none !important;
}

/* Order page: responsive info card layout */
.m-portlet.m-portlet--bordered .m-portlet__body table[width="300"],
.m-portlet.m-portlet--bordered table[width="300"] {
    width: 100% !important;
}

/* Order line items section: darker border */
table.table-bordered,
table.table-bordered td,
table.table-bordered th {
    border-color: var(--pc-border) !important;
}

/* Order page: equal-width info cards */
td[style*="padding:4px"] {
    width: 25% !important;
    vertical-align: top !important;
}
td[style*="padding:4px"] .m-portlet.m-portlet--bordered {
    width: 100% !important;
    min-width: 0 !important;
}

/* Order page: responsive collapse for info cards */
@media (max-width: 1200px) {
    td[style*="padding:4px"] {
        display: block !important;
        width: 100% !important;
    }
    td[style*="padding:4px"] .m-portlet {
        width: 100% !important;
        margin-bottom: 12px;
    }
}

/* Order page: line items table rounded corners */
.pc-card table.table-bordered,
.pc-card table.table {
    border-radius: var(--pc-radius-lg);
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0;
}
.pc-card table.table-bordered > thead > tr > th:first-child,
.pc-card table.table > thead > tr > th:first-child {
    border-top-left-radius: var(--pc-radius-lg);
}
.pc-card table.table-bordered > thead > tr > th:last-child,
.pc-card table.table > thead > tr > th:last-child {
    border-top-right-radius: var(--pc-radius-lg);
}

/* Order page: UOM select wider */
.pc-card select[name="UOM"],
.pc-card select[name="uom"] {
    min-width: 100px !important;
}

/* Order page: restyle m-accordion as modern accordion */
.m-accordion {
    margin: 0 !important;
    padding: 0 !important;
}
.m-accordion .m-accordion__item {
    border-radius: var(--pc-radius-lg) !important;
    overflow: hidden;
    margin: 6px 0 !important;
    padding: 0 !important;
    border: 1px solid var(--pc-border) !important;
}
.m-accordion .m-accordion__item[style*="background-color:34bfa3"] { border-color: #34bfa3 !important; }
.m-accordion .m-accordion__item[style*="background-color:f4516c"] { border-color: #f4516c !important; }
.m-accordion .m-accordion__item[style*="background-color:ffb732"] { border-color: #ffb732 !important; }
/* Dynamic chbgcolor values */
.m-accordion .m-accordion__item.m-accordion__item--success { border-color: #34bfa3 !important; }
.m-accordion .m-accordion__item.m-accordion__item--danger { border-color: #f4516c !important; }
.m-accordion .m-accordion__item-head {
    padding: 0 14px !important;
    margin: 0 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 0 !important;
}
/* Accordion icons - make them larger */
.m-accordion .m-accordion__item-head i,
.m-accordion .m-accordion__item-head .la,
.m-accordion .m-accordion__item-head .fa {
    font-size: 18px !important;
}
.m-accordion .m-accordion__item-mode {
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 44px;
    width: 30px;
    line-height: 44px !important;
}

/* Accordion content: clean table styling */
.m-accordion .m-accordion__item-content table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1.5px solid #aaa !important;
    background: transparent !important;
    border-radius: var(--pc-radius-lg) !important;
    overflow: hidden !important;
    margin-bottom: 8px;
}
/* Nested tables inside accordions - no outer border, keep cell borders */
.m-accordion .m-accordion__item-content table table {
    border: none !important;
    margin: 4px 0 !important;
    border-radius: var(--pc-radius) !important;
}
[data-theme="dark"] .m-accordion .m-accordion__item-content table {
    border-color: #4a5568 !important;
}
[data-theme="dark"] .m-accordion .m-accordion__item-content table {
    border-color: #4a5568 !important;
}
/* Table rounding handled by overflow:hidden on the table element */
.m-accordion .m-accordion__item-content table td,
.m-accordion .m-accordion__item-content table th,
.m-accordion .m-accordion__item-content table td[style],
.m-accordion .m-accordion__item-content table th[style] {
    padding: 8px 12px !important;
    font-size: 12px;
    border: none !important;
    border-right: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    vertical-align: top;
    color: var(--pc-text);
    background: transparent !important;
}
/* Last cell in each row: no right border (table outer border handles it) */
.m-accordion .m-accordion__item-content table td:last-child,
.m-accordion .m-accordion__item-content table th:last-child {
    border-right: none !important;
}
/* Last row: no bottom border (table outer border handles it) */
.m-accordion .m-accordion__item-content table tr:last-child td {
    border-bottom: none !important;
}
.m-accordion .m-accordion__item-content > table > tr:first-child > td,
.m-accordion .m-accordion__item-content > table > tbody > tr:first-child > td,
.m-accordion .m-accordion__item-content table thead td,
.m-accordion .m-accordion__item-content table tr[bgcolor="eeeeee"] td,
.m-accordion .m-accordion__item-content table th {
    background: #e8e8e8 !important;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #333 !important;
}
[data-theme="dark"] .m-accordion .m-accordion__item-content > table > tr:first-child > td,
[data-theme="dark"] .m-accordion .m-accordion__item-content > table > tbody > tr:first-child > td,
[data-theme="dark"] .m-accordion .m-accordion__item-content table thead td,
[data-theme="dark"] .m-accordion .m-accordion__item-content table tr[bgcolor="eeeeee"] td,
[data-theme="dark"] .m-accordion .m-accordion__item-content table th {
    background: #1a202c !important;
    color: #d0d5dd !important;
}
/* Order Detail page: layout */
.pc-card table[cellpadding="4"][cellspacing="0"] {
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
}
.pc-card table[cellpadding="4"][cellspacing="0"] td {
    border: none !important;
    padding: 6px 10px !important;
}
/* Order Detail: section header labels */
.pc-card font.opens_14 {
    font-size: 13px !important;
    font-weight: 600;
    color: var(--pc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* Order Detail: font tags inherit text color */
.pc-card font.opens_12,
.pc-card font.opens_14,
.pc-card font.opens_16,
.pc-card font[class^="opens"] {
    color: var(--pc-text) !important;
}
[data-theme="dark"] .pc-card font.opens_12,
[data-theme="dark"] .pc-card font.opens_14,
[data-theme="dark"] .pc-card font.opens_16,
[data-theme="dark"] .pc-card font[class^="opens"] {
    color: #d0d5dd !important;
}
/* Ensure links inside font tags stay orange */
.pc-card font a,
.pc-card font[class^="opens"] a {
    color: var(--pc-link) !important;
}
[data-theme="dark"] .pc-card font a,
[data-theme="dark"] .pc-card font[class^="opens"] a {
    color: var(--pc-link) !important;
}
/* Order Detail: all form inputs inside cards get modern styling */
.pc-card input[type="text"],
.pc-card input[type="date"],
.pc-card input[type="number"],
.pc-card input[type="email"],
.pc-card input[type="tel"],
.pc-card input[type="password"],
.pc-card select,
.pc-card textarea {
    border-radius: 8px !important;
    border: 1.5px solid var(--pc-input-border) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    background-color: var(--pc-input-bg) !important;
    color: var(--pc-text) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.pc-card input[type="text"]:focus,
.pc-card input[type="date"]:focus,
.pc-card select:focus,
.pc-card textarea:focus {
    border-color: var(--pc-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,127,75,0.15) !important;
    outline: none !important;
}
/* Order Detail: checkbox should not be full width */
.pc-card input[type="checkbox"] {
    width: auto !important;
}
/* Order Detail: links inside card */
.pc-card a:not(.pc-btn) {
    color: var(--pc-link);
}
/* Order Detail: section dividers */
.pc-card table.standardForm2 {
    width: 100% !important;
}
/* Order Detail: full width layout */
.pc-card > .pc-card-body > table,
.pc-card > .pc-card-body > TR > td > table {
    width: 100% !important;
}
/* Responsive columns for order detail */
@media (max-width: 1024px) {
    .pc-card table[cellpadding="4"][cellspacing="0"] > tbody > tr > td[width="33%"] {
        display: block !important;
        width: 100% !important;
    }
}

/* =============================================
   ORDER DETAIL PAGE - Enterprise Layout
   ============================================= */
.pc-order-detail-page {
    font-size: 13px;
}
/* Override all old table layouts inside the detail page */
.pc-order-detail-page table {
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.pc-order-detail-page table td {
    border: none !important;
    vertical-align: top;
}
/* Section headers - the gray bgcolor rows become section titles */
.pc-order-detail-page td[style*="background:var(--pc-bg-hover)"] {
    background: transparent !important;
    padding: 12px 10px 4px !important;
    font-size: 14px !important;
    font-weight: 700;
    color: var(--pc-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--pc-primary) !important;
}
/* Form field labels */
.pc-order-detail-page font.opens_14,
.pc-order-detail-page font.opens_12 {
    font-size: 12px !important;
    font-weight: 600;
    color: var(--pc-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* Form field values - bold text */
.pc-order-detail-page font.opens_14 strong,
.pc-order-detail-page font.opens_12 strong {
    color: var(--pc-text) !important;
    font-size: 13px !important;
    text-transform: none;
}
/* All inputs, selects, textareas */
.pc-order-detail-page input[type="text"],
.pc-order-detail-page input[type="Text"],
.pc-order-detail-page input[type="date"],
.pc-order-detail-page input[type="email"],
.pc-order-detail-page input[type="password"],
.pc-order-detail-page select,
.pc-order-detail-page textarea {
    border-radius: 8px !important;
    border: 1.5px solid var(--pc-input-border) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    background-color: var(--pc-input-bg) !important;
    color: var(--pc-text) !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pc-order-detail-page input:focus,
.pc-order-detail-page select:focus,
.pc-order-detail-page textarea:focus {
    border-color: var(--pc-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,127,75,0.15) !important;
    outline: none !important;
}
/* Checkbox - don't full-width */
.pc-order-detail-page input[type="checkbox"] {
    width: auto !important;
    border-radius: 4px !important;
}
/* Links */
.pc-order-detail-page a {
    color: var(--pc-link) !important;
    font-weight: 600;
}
.pc-order-detail-page a:hover {
    color: var(--pc-primary-dark) !important;
}
/* Strong tags in detail */
.pc-order-detail-page strong,
.pc-order-detail-page b {
    color: var(--pc-text);
}
/* Center-aligned divs - remove old center alignment for buttons */
.pc-order-detail-page div[align="center"] {
    text-align: left;
}
/* But keep button containers centered */
.pc-order-detail-page div[align="center"] > .pc-btn,
.pc-order-detail-page div[align="center"] > button,
.pc-order-detail-page div[align="center"] > input[type="submit"] {
    display: inline-flex;
}
/* Invoice view links */
.pc-order-detail-page a[href*="invoice"],
.pc-order-detail-page a[href*="Invoice"] {
    color: var(--pc-link) !important;
}
/* Table cell padding normalization */
.pc-order-detail-page td[style*="border: none"] {
    padding: 6px 10px !important;
}
/* Dark mode */
[data-theme="dark"] .pc-order-detail-page font.opens_14,
[data-theme="dark"] .pc-order-detail-page font.opens_12 {
    color: #9aa5b4 !important;
}
[data-theme="dark"] .pc-order-detail-page font.opens_14 strong,
[data-theme="dark"] .pc-order-detail-page font.opens_12 strong,
[data-theme="dark"] .pc-order-detail-page strong,
[data-theme="dark"] .pc-order-detail-page b {
    color: #e2e8f0 !important;
}
[data-theme="dark"] .pc-order-detail-page td[style*="background:var(--pc-bg-hover)"] {
    background: transparent !important;
    border-bottom-color: var(--pc-primary) !important;
}

/* =============================================
   ORDER DETAIL PAGE
   ============================================= */
.pc-order-detail-page {
    font-size: 13px;
    color: var(--pc-text);
}
/* All links orange */
.pc-order-detail-page a {
    color: var(--pc-link) !important;
}
/* Label cells - the old gray a9a9a9 cells */
.pc-od-label {
    background: var(--pc-bg-hover) !important;
    padding: 10px 14px !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--pc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
    border: none !important;
    white-space: nowrap;
}
/* Fix: legacy white <font color> in form label cells */
.pc-od-label font[color="ffffff"],
.pc-od-label font[color="FFFFFF"] {
    color: var(--pc-text-secondary) !important;
}
/* Value cells */
.pc-od-value {
    background: transparent !important;
    padding: 8px 14px !important;
    font-size: 13px;
    color: var(--pc-text);
    border: none !important;
    vertical-align: middle;
}
/* Section headers - the eeeeee rows */
.pc-od-header {
    background: var(--pc-bg-hover) !important;
    padding: 12px 14px !important;
    border: none !important;
}
.pc-od-header font strong,
.pc-od-header strong {
    font-size: 14px;
    color: var(--pc-text);
}
/* Footer rows with buttons */
.pc-od-footer {
    background: var(--pc-bg-hover) !important;
    padding: 14px !important;
    text-align: center;
    border: none !important;
}
/* Form tables inside detail page */
.pc-order-detail-page table[cellpadding] {
    border: none !important;
    border-collapse: collapse !important;
    border-radius: var(--pc-radius-lg);
    overflow: hidden;
    width: 100%;
}
.pc-order-detail-page table[cellpadding] td {
    border: none !important;
}
/* Section separator tables (billing/shipping) */
.pc-order-detail-page table[cellpadding="4"][cellspacing="1"] {
    border: 1px solid var(--pc-border) !important;
    border-radius: var(--pc-radius-lg) !important;
    overflow: hidden !important;
    margin-bottom: 16px;
}
/* Order Header card full width */
.pc-order-detail-page .pc-card {
    width: 100% !important;
}
.pc-order-detail-page .m-section__content,
.pc-order-detail-page .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
}
.pc-order-detail-page > table,
.pc-order-detail-page table[width="100%"] {
    width: 100% !important;
    table-layout: auto;
}
/* SELECT/DELETE columns narrow */
.pc-order-detail-page td[width="30"][align="center"] {
    width: 20px !important;
    padding: 2px 4px !important;
    font-size: 10px;
}
/* Form fields - ALL inputs, selects, textareas */
.pc-order-detail-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.pc-order-detail-page select,
.pc-order-detail-page textarea {
    border-radius: 8px !important;
    border: 1.5px solid var(--pc-input-border) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    background-color: var(--pc-input-bg) !important;
    color: var(--pc-text) !important;
    box-sizing: border-box !important;
}
.pc-order-detail-page input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]):focus,
.pc-order-detail-page select:focus,
.pc-order-detail-page textarea:focus {
    border-color: var(--pc-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,127,75,0.15) !important;
    outline: none !important;
}
.pc-order-detail-page input[type="checkbox"] {
    width: auto !important;
}
/* Old form-control class override */
.pc-order-detail-page .form-control.m-input {
    border-radius: 8px !important;
    border: 1.5px solid var(--pc-input-border) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    background-color: var(--pc-input-bg) !important;
    color: var(--pc-text) !important;
}
/* Font tag labels - only opens_14 and opens_12 get uppercase treatment */
.pc-order-detail-page font.opens_14,
.pc-order-detail-page font.opens_12 {
    font-size: 12px !important;
    font-weight: 600;
    color: var(--pc-text-secondary) !important;
}
/* opens_16 keeps normal case and larger size */
.pc-order-detail-page font.opens_16 {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--pc-text) !important;
    text-transform: none !important;
}
.pc-order-detail-page font strong,
.pc-order-detail-page strong {
    color: var(--pc-text);
}
/* Keep center alignment for button containers */
/* Dark mode */
[data-theme="dark"] .pc-od-label {
    background: #1a202c !important;
    color: #9aa5b4;
}
[data-theme="dark"] .pc-od-value {
    color: var(--pc-text);
}
[data-theme="dark"] .pc-od-header {
    background: #1a202c !important;
}
[data-theme="dark"] .pc-od-header font strong,
[data-theme="dark"] .pc-od-header strong {
    color: #e2e8f0;
}
[data-theme="dark"] .pc-od-footer {
    background: #1a202c !important;
}
[data-theme="dark"] .pc-order-detail-page font.opens_14,
[data-theme="dark"] .pc-order-detail-page font.opens_12 {
    color: #9aa5b4 !important;
}
[data-theme="dark"] .pc-order-detail-page font strong,
[data-theme="dark"] .pc-order-detail-page strong {
    color: #e2e8f0;
}
[data-theme="dark"] .pc-order-detail-page table[cellpadding="4"][cellspacing="1"] {
    border-color: var(--pc-border) !important;
}

/* Account search results: accordion items styled as card-like dropdowns */
.pc-order-detail-page .m-accordion .m-accordion__item {
    margin: 10px 0 !important;
    padding: 0 !important;
    border-radius: var(--pc-radius-lg) !important;
    overflow: hidden;
    border: 1px solid var(--pc-border) !important;
    box-shadow: var(--pc-shadow);
}
.pc-order-detail-page .m-accordion .m-accordion__item-head {
    min-height: 44px;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.pc-order-detail-page .m-accordion .m-accordion__item-body {
    background: var(--pc-bg-white) !important;
    padding: 16px !important;
}
.pc-order-detail-page .m-accordion .m-accordion__item-content {
    background: transparent !important;
}
/* Start collapsed by default */
.pc-order-detail-page .m-accordion .m-accordion__item-body.collapse:not(.show) {
    display: none;
}
/* Normalize accordion alignment - remove extra nesting margins */
.pc-order-detail-page .m-accordion {
    margin: 0 !important;
    padding: 0 !important;
}
/* Users table header darker */
.pc-order-detail-page .table td[style*="background:var(--pc-bg-hover)"] {
    background: #c8c8c8 !important;
    font-weight: 700;
}
[data-theme="dark"] .pc-order-detail-page .table td[style*="background:var(--pc-bg-hover)"] {
    background: #1e2633 !important;
    color: #d0d5dd !important;
}
/* Center buttons at bottom of dropdowns */
.pc-order-detail-page .m-accordion .m-accordion__item-content div[align="center"] {
    padding: 12px 0 4px;
}
/* Accordion title always left aligned, white text */
.pc-order-detail-page .m-accordion .m-accordion__item-title {
    text-align: left !important;
    flex: 1;
}
.pc-order-detail-page .m-accordion .m-accordion__item-title font,
.pc-order-detail-page .m-accordion .m-accordion__item-title strong,
.pc-order-detail-page .m-accordion .m-accordion__item-title i {
    color: #fff !important;
}
.pc-order-detail-page .m-accordion .m-accordion__item-head {
    text-align: left !important;
}

/* Account search results: transparent backgrounds and clean borders */
.pc-order-detail-page .table-bordered td,
.pc-order-detail-page .m-table td {
    background: transparent !important;
}
[data-theme="dark"] .pc-order-detail-page .table-bordered td,
[data-theme="dark"] .pc-order-detail-page .m-table td {
    border-color: var(--pc-border) !important;
    color: var(--pc-text);
}
[data-theme="dark"] .pc-order-detail-page .table-bordered th,
[data-theme="dark"] .pc-order-detail-page .m-table th,
[data-theme="dark"] .pc-order-detail-page th[style],
[data-theme="dark"] .pc-order-detail-page th {
    background: #1e2633 !important;
    border-color: var(--pc-border) !important;
    color: #d0d5dd !important;
}
[data-theme="dark"] .pc-order-detail-page td[style*="color:000000"],
[data-theme="dark"] .pc-order-detail-page td[style*="background-color:eeeeee"],
[data-theme="dark"] .pc-order-detail-page th[style*="background-color:eeeeee"] {
    background: #1e2633 !important;
    color: #d0d5dd !important;
    border-color: var(--pc-border) !important;
}
/* Dark mode: BGCOLOR on TR */
[data-theme="dark"] .pc-order-detail-page tr[BGCOLOR],
[data-theme="dark"] .pc-order-detail-page tr[bgcolor] {
    background: transparent !important;
}
/* Dark mode: all table cells with hardcoded dark text */
[data-theme="dark"] .pc-order-detail-page .table td,
[data-theme="dark"] .pc-order-detail-page .m-table td {
    color: var(--pc-text) !important;
}
/* Bootstrap table background transparent in both modes */
.pc-order-detail-page .table,
.pc-order-detail-page .m-table {
    background: transparent !important;
}
[data-theme="dark"] .pc-order-detail-page .table,
[data-theme="dark"] .pc-order-detail-page .m-table {
    background: transparent !important;
}

/* Order Audit Trail accordion buttons only - orange primary */
#m_accordion_6 .m-accordion__item-content .btn {
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    background: var(--pc-primary) !important;
    border: none !important;
    color: #fff !important;
    height: auto !important;
}
#m_accordion_6 .m-accordion__item-content .btn:hover {
    background: var(--pc-primary-dark) !important;
}
/* Accordion content: font tags inherit proper color */
.m-accordion .m-accordion__item-content font {
    color: var(--pc-text) !important;
    font-size: 12px;
}
.m-accordion .m-accordion__item-content font strong,
.m-accordion .m-accordion__item-content font b {
    color: var(--pc-text) !important;
}
/* Accordion content: links */
.m-accordion .m-accordion__item-content a {
    color: var(--pc-link);
}
/* Accordion content: flaticon eye icon fix */
.m-accordion .m-accordion__item-content .flaticon-eye {
    color: var(--pc-link) !important;
    font-size: 16px;
}
/* Dark mode accordion content */
[data-theme="dark"] .m-accordion .m-accordion__item-content table td,
[data-theme="dark"] .m-accordion .m-accordion__item-content table th,
[data-theme="dark"] .m-accordion .m-accordion__item-content table td[style],
[data-theme="dark"] .m-accordion .m-accordion__item-content table th[style] {
    border-right-color: #4a5568 !important;
    border-bottom-color: #4a5568 !important;
    color: #d0d5dd;
}
[data-theme="dark"] .m-accordion .m-accordion__item-content table tr:first-child td,
[data-theme="dark"] .m-accordion .m-accordion__item-content table tr[bgcolor="eeeeee"] td {
    background: #1a202c !important;
}
[data-theme="dark"] .m-accordion .m-accordion__item-content font,
[data-theme="dark"] .m-accordion .m-accordion__item-content font strong,
[data-theme="dark"] .m-accordion .m-accordion__item-content font b {
    color: #d0d5dd !important;
}

/* Accordion content: invoice section layout improvements */
.m-accordion .m-accordion__item-content {
    padding: 14px !important;
    line-height: 1.6;
}
/* Remove old inline border styles from invoice table cells */
.m-accordion .m-accordion__item-content td[style*="border-color:white"] {
    border-color: var(--pc-border-light) !important;
}
/* Invoice content white bg cells -> transparent */
.m-accordion .m-accordion__item-content td[style*="background:##ffffff"],
.m-accordion .m-accordion__item-content td[style*="background-color:ffffff"] {
    background: transparent !important;
}
/* Nested tables inside invoice content */
.m-accordion .m-accordion__item-content table table {
    margin: 8px 0;
    border: none !important;
}
.m-accordion .m-accordion__item-content table table td {
    border: 1px solid var(--pc-border-light) !important;
}
/* Status labels */
.m-accordion .m-accordion__item-content strong {
    color: var(--pc-text);
}
[data-theme="dark"] .m-accordion .m-accordion__item-content strong {
    color: #e2e8f0;
}
[data-theme="dark"] .m-accordion .m-accordion__item-content td[style*="border-color:white"] {
    border-color: var(--pc-border) !important;
}
.m-accordion .m-accordion__item-body {
    background: var(--pc-bg-white);
    padding: 12px;
    margin: 0 !important;
}
.m-accordion .m-accordion__item-content {
    font-size: 12px;
    color: var(--pc-text);
}

/* Order page: status badge colors */
.m-badge--success { background: var(--pc-success) !important; color: #fff !important; border-radius: 12px !important; padding: 4px 12px !important; }
.m-badge--danger { background: var(--pc-danger) !important; color: #fff !important; border-radius: 12px !important; padding: 4px 12px !important; }

/* Order page: form fields inside old tables and order cards */
.m-portlet .form-control.m-input,
.m-portlet input[type="text"],
.m-portlet input[type="date"],
.m-portlet select,
.m-portlet textarea,
.pc-card input[type="text"],
.pc-card input[type="date"],
.pc-card input[type="number"],
.pc-card select,
.pc-card textarea,
.pc-card .form-control {
    border-radius: 8px !important;
    border: 1.5px solid var(--pc-input-border) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    background-color: var(--pc-input-bg) !important;
    color: var(--pc-text) !important;
}
.m-portlet .form-control.m-input:focus,
.m-portlet input[type="text"]:focus,
.m-portlet select:focus,
.m-portlet textarea:focus,
.pc-card input[type="text"]:focus,
.pc-card select:focus,
.pc-card textarea:focus,
.pc-card .form-control:focus {
    border-color: var(--pc-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,127,75,0.15) !important;
}

/* Order page: font tags inside portlets - inherit color */
.m-portlet__body font,
.m-portlet__body font[class^="opens"],
.m-portlet__body font[class^="arial"] {
    color: var(--pc-text) !important;
}

/* Order page: dark mode for m-portlet and m-accordion */
[data-theme="dark"] .m-portlet.m-portlet--bordered.m-portlet--bordered-semi.m-portlet--rounded {
    background: #1e2a3a;
    border-color: #4a5568 !important;
}
[data-theme="dark"] table.table-bordered,
[data-theme="dark"] table.table-bordered td,
[data-theme="dark"] table.table-bordered th {
    border-color: #4a5568 !important;
}
[data-theme="dark"] .m-portlet.m-portlet--bordered .m-portlet__body {
    color: #d0d5dd;
}
[data-theme="dark"] .m-portlet.m-portlet--bordered .m-portlet__body strong {
    color: #e2e8f0;
}
[data-theme="dark"] .m-portlet.m-portlet--bordered .m-portlet__body font,
[data-theme="dark"] .m-portlet.m-portlet--bordered .m-portlet__body font[class^="opens"],
[data-theme="dark"] .m-portlet.m-portlet--bordered .m-portlet__body font[class^="arial"] {
    color: #d0d5dd !important;
}
[data-theme="dark"] .m-portlet.m-portlet--bordered .m-portlet__body td {
    color: #d0d5dd;
}

/* Dark mode: order header bar text */
[data-theme="dark"] td[style*="background:var(--pc-primary)"] font,
[data-theme="dark"] td[style*="background:var(--pc-primary)"] {
    color: #fff !important;
}

/* Dark mode: tables inside order detail */
[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
    border-color: var(--pc-border) !important;
    color: var(--pc-text);
}
[data-theme="dark"] td[style*="background-color:eeeeee"],
[data-theme="dark"] td[style*="background-color: eeeeee"] {
    background-color: transparent !important;
    color: #d0d5dd !important;
}
[data-theme="dark"] tr[bgcolor="ffffff"] td,
[data-theme="dark"] td[style*="background:##ffffff"],
[data-theme="dark"] td[style*="background-color:ffffff"] {
    background: transparent !important;
    color: #d0d5dd !important;
}
/* Dark mode: buttons inside order cards */
[data-theme="dark"] .btn-info,
[data-theme="dark"] .btn-warning {
    color: #fff !important;
}
[data-theme="dark"] center {
    color: #d0d5dd;
}

/* Dark mode: remove ALL white backgrounds from old table structures */
[data-theme="dark"] tr[bgcolor="ffffff"],
[data-theme="dark"] tr[bgcolor="ffffff"] td,
[data-theme="dark"] td[bgcolor="ffffff"],
[data-theme="dark"] tr[bgcolor="FFFFFF"],
[data-theme="dark"] td[bgcolor="FFFFFF"] {
    background: transparent !important;
}
[data-theme="dark"] .m-section__content,
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .m-portlet__body,
[data-theme="dark"] .m-portlet--tab {
    background: transparent !important;
}
/* Dark mode: catch inline bgcolor/background on tds */
[data-theme="dark"] td[style*="background-color:ffffff"],
[data-theme="dark"] td[style*="background-color: ffffff"],
[data-theme="dark"] td[style*="background-color:FFFFFF"],
[data-theme="dark"] td[style*="bgcolor:ffffff"] {
    background-color: transparent !important;
}
/* Dark mode: force all table rows inside order cards to transparent */
[data-theme="dark"] .pc-card table tr,
[data-theme="dark"] .pc-card table td {
    background-color: transparent !important;
}
/* Status-colored rows - dark mode versions */
[data-theme="dark"] .pc-card tr[bgcolor="ccffcc"] td { background-color: rgba(72,187,120,0.2) !important; }
[data-theme="dark"] .pc-card tr[bgcolor="ffcc66"] td { background-color: rgba(236,201,75,0.2) !important; }
[data-theme="dark"] .pc-card tr[bgcolor="ff9966"] td { background-color: rgba(255,127,75,0.2) !important; }
[data-theme="dark"] .pc-card td[style*="background-color:EFFBF0"],
[data-theme="dark"] .pc-card td[style*="background-color:effbf0"],
[data-theme="dark"] td[style*="background-color:EFFBF0"],
[data-theme="dark"] td[style*="background-color:effbf0"] { background-color: rgba(72,187,120,0.2) !important; }
[data-theme="dark"] .pc-card td[style*="background-color:ffd9d9"],
[data-theme="dark"] .pc-card td[style*="background-color:FFD9D9"],
[data-theme="dark"] td[style*="background-color:ffd9d9"],
[data-theme="dark"] td[style*="background-color:FFD9D9"],
[data-theme="dark"] .pc-card td[style*="background-color:ffeaea"],
[data-theme="dark"] td[style*="background-color:ffeaea"] { background-color: rgba(229,62,62,0.2) !important; }
[data-theme="dark"] .pc-card td[style*="background-color:FDFD96"],
[data-theme="dark"] td[style*="background-color:FDFD96"] { background-color: rgba(236,201,75,0.2) !important; }
[data-theme="dark"] .pc-card td[style*="background-color:fffee0"],
[data-theme="dark"] td[style*="background-color:fffee0"] { background-color: rgba(236,201,75,0.15) !important; }
/* Dark mode: green row (#EFFBF0) -> dark green */
[data-theme="dark"] tr[bgcolor="EFFBF0"] td,
[data-theme="dark"] tr[style*="background-color:EFFBF0"] td { background-color: rgba(72,187,120,0.2) !important; }
/* Dark mode: yellow row (#fffee0) -> dark yellow */
[data-theme="dark"] tr[bgcolor="fffee0"] td,
[data-theme="dark"] tr[style*="background-color:fffee0"] td { background-color: rgba(236,201,75,0.15) !important; }
/* Dark mode: red row (#ffeaea) -> dark red */
[data-theme="dark"] tr[bgcolor="ffeaea"] td,
[data-theme="dark"] tr[style*="background-color:ffeaea"] td { background-color: rgba(229,62,62,0.2) !important; }
/* Order detail header bar */
.pc-order-detail-header {
    background: var(--pc-primary);
    border: 1px solid #d6d6d6;
    border-radius: var(--pc-radius) var(--pc-radius) 0 0;
    color: #fff;
}
.pc-order-detail-header font,
.pc-order-detail-header strong {
    color: #fff !important;
}
[data-theme="dark"] .pc-order-detail-header {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
}
[data-theme="dark"] .pc-order-detail-header font,
[data-theme="dark"] .pc-order-detail-header strong {
    color: #d0d5dd !important;
}
/* Dark mode: all orange-bg rows/cells inside order cards become dark */
[data-theme="dark"] tr[style*="background:var(--pc-primary)"],
[data-theme="dark"] td[style*="background:var(--pc-primary)"],
[data-theme="dark"] th[style*="background:var(--pc-primary)"] {
    background: #2d3748 !important;
}
[data-theme="dark"] tr[style*="background:var(--pc-primary)"] font,
[data-theme="dark"] td[style*="background:var(--pc-primary)"] font,
[data-theme="dark"] tr[style*="background:var(--pc-primary)"] strong,
[data-theme="dark"] td[style*="background:var(--pc-primary)"] strong {
    color: #d0d5dd !important;
}
/* Dark mode: order card inner white backgrounds */
[data-theme="dark"] td[style*="background:##ffffff"],
[data-theme="dark"] td[style*="background: ##ffffff"] {
    background: transparent !important;
}

[data-theme="dark"] .m-accordion .m-accordion__item {
    border-color: var(--pc-border);
}
[data-theme="dark"] .m-accordion .m-accordion__item-body,
[data-theme="dark"] .m-accordion .m-accordion__item-body .m-accordion__item-content,
[data-theme="dark"] .m-accordion .collapse,
[data-theme="dark"] .m-accordion .collapsing {
    background: transparent !important;
}
[data-theme="dark"] .m-accordion .m-accordion__item-content {
    color: #d0d5dd;
}
[data-theme="dark"] .m-accordion .m-accordion__item-content td,
[data-theme="dark"] .m-accordion .m-accordion__item-content font,
[data-theme="dark"] .m-accordion .m-accordion__item-content strong {
    color: #d0d5dd !important;
}
/* Accordion: consistent height for header */
.m-accordion .m-accordion__item-title {
    font-size: 14px !important;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
}
.m-accordion .m-accordion__item-title font {
    font-size: 14px !important;
    color: #fff !important;
}
/* Dark mode: force all accordion inner elements dark */
[data-theme="dark"] .m-accordion .m-accordion__item {
    background: transparent !important;
}
[data-theme="dark"] .m-accordion table,
[data-theme="dark"] .m-accordion table td,
[data-theme="dark"] .m-accordion table tr {
    background: transparent !important;
}

/* ==========================================================================
   FONT SIZE SCALING (Appearance > Font Size: small / medium / large)
   ----------------------------------------------------------------------------
   Strategy: re-declare key text sizes using calc(BASEpx * var(--pc-scale)).
   With --pc-scale = 1 the rendered size is identical to the base rule, so
   omitting the data-font-size attribute (or selecting "Medium") changes nothing.
   ========================================================================== */
:root { --pc-scale: 1; }
[data-font-size="sm"] { --pc-scale: 0.92; }
[data-font-size="md"] { --pc-scale: 1; }
[data-font-size="lg"] { --pc-scale: 1.10; }

/* Page headers */
[data-font-size] .pc-page-header h1,
[data-font-size] .pc-page-header h2,
[data-font-size] .pc-page-header h3 { font-size: calc(20px * var(--pc-scale)); }
[data-font-size] .pc-page-header .pc-subtitle { font-size: calc(14px * var(--pc-scale)); }
[data-font-size] .pc-subtitle { font-size: calc(14px * var(--pc-scale)); }

/* Cards */
[data-font-size] .pc-card-header h4 { font-size: calc(15px * var(--pc-scale)); }

/* Tables */
[data-font-size] .pc-table { font-size: calc(14px * var(--pc-scale)); }
[data-font-size] .pc-table thead th { font-size: calc(11px * var(--pc-scale)); }
[data-font-size] .pc-table tbody td { font-size: calc(14px * var(--pc-scale)); }

/* Info rows */
[data-font-size] .pc-info-row { font-size: calc(12px * var(--pc-scale)); }
[data-font-size] .pc-info-row-label { font-size: calc(11px * var(--pc-scale)); }
[data-font-size] .pc-info-row--lg { font-size: calc(13px * var(--pc-scale)); }
[data-font-size] .pc-info-row--lg .pc-info-row-label { font-size: calc(12px * var(--pc-scale)); }

/* Forms */
[data-font-size] .pc-form-group label { font-size: calc(15px * var(--pc-scale)); }
[data-font-size] .pc-form-group input[type="text"],
[data-font-size] .pc-form-group input[type="email"],
[data-font-size] .pc-form-group input[type="password"],
[data-font-size] .pc-form-group input[type="number"],
[data-font-size] .pc-form-group input[type="url"],
[data-font-size] .pc-form-group input[type="date"],
[data-font-size] .pc-form-group input[type="time"],
[data-font-size] .pc-form-group input[type="tel"],
[data-font-size] .pc-form-group select,
[data-font-size] .pc-form-group textarea { font-size: calc(14px * var(--pc-scale)); }
[data-font-size] .pc-form-section-title { font-size: calc(14px * var(--pc-scale)); }

/* Buttons */
[data-font-size] .pc-btn { font-size: calc(13px * var(--pc-scale)); }
[data-font-size] .pc-btn-sm { font-size: calc(12px * var(--pc-scale)); }
[data-font-size] .pc-btn-lg { font-size: calc(15px * var(--pc-scale)); }
[data-font-size] .pc-btn i { font-size: calc(14px * var(--pc-scale)); }

/* Badges + alerts */
[data-font-size] .pc-badge { font-size: calc(11px * var(--pc-scale)); }
[data-font-size] .pc-alert { font-size: calc(13px * var(--pc-scale)); }

/* Breadcrumbs + record count + table toolbar */
[data-font-size] .pc-breadcrumbs { font-size: calc(13px * var(--pc-scale)); }
[data-font-size] .pc-record-count { font-size: calc(13px * var(--pc-scale)); }

/* ==========================================================================
   TEXT-SIZE UTILITY CLASSES
   ----------------------------------------------------------------------------
   Use in place of inline `style="font-size:Xpx"` so text scales with the
   Appearance > Font Size preference. Base values match the most common
   inline overrides used across redesigned pages.
   ========================================================================== */
.pc-text-xxs  { font-size: 10px; }
.pc-text-xs   { font-size: 11px; }
.pc-text-sm   { font-size: 12px; }
.pc-text-md   { font-size: 13px; }
.pc-text-base { font-size: 14px; }
.pc-text-lg   { font-size: 16px; }
.pc-text-xl   { font-size: 18px; }
.pc-text-2xl  { font-size: 22px; }

/* Compact uppercase mini-label for inline form fields inside data tables
   (eQuotes items grid, etc). Scales with the Font Size preference. */
.pc-mini-label {
    color: var(--pc-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.pc-mini-label--bold { font-weight: 700; }
[data-font-size] .pc-mini-label { font-size: calc(12px * var(--pc-scale)); }

[data-font-size] .pc-text-xxs  { font-size: calc(10px * var(--pc-scale)); }
[data-font-size] .pc-text-xs   { font-size: calc(11px * var(--pc-scale)); }
[data-font-size] .pc-text-sm   { font-size: calc(12px * var(--pc-scale)); }
[data-font-size] .pc-text-md   { font-size: calc(13px * var(--pc-scale)); }
[data-font-size] .pc-text-base { font-size: calc(14px * var(--pc-scale)); }
[data-font-size] .pc-text-lg   { font-size: calc(16px * var(--pc-scale)); }
[data-font-size] .pc-text-xl   { font-size: calc(18px * var(--pc-scale)); }
[data-font-size] .pc-text-2xl  { font-size: calc(22px * var(--pc-scale)); }

/* Compact table modifier - applies to .pc-table--sm */
.pc-table--sm thead th { font-size: 11px; padding: 8px 12px; }
.pc-table--sm tbody td { font-size: 12px; padding: 8px 12px; }
[data-font-size] .pc-table--sm thead th { font-size: calc(11px * var(--pc-scale)); }
[data-font-size] .pc-table--sm tbody td { font-size: calc(12px * var(--pc-scale)); }

/* Toolbar dropdowns - give all .m-dropdown__wrapper a consistent shadow
   to match the user profile dropdown. */
.m-dropdown .m-dropdown__wrapper {
    box-shadow: var(--pc-shadow-lg) !important;
    border-radius: 10px !important;
}
.m-dropdown .m-dropdown__wrapper .m-dropdown__inner {
    border-radius: 10px !important;
    overflow: hidden;
}

/* Spinner used inside search/action buttons */
.pc-btn-spin {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pc-btn-spin 0.7s linear infinite;
    vertical-align: -2px;
    margin-right: 6px;
}
@keyframes pc-btn-spin {
    to { transform: rotate(360deg); }
}
.pc-btn[disabled], .pc-btn.is-loading {
    opacity: 0.85;
    pointer-events: none;
    cursor: wait;
}

/* Status card table scroll wrapper - scroll only; corner rounding comes from
   the pc-card's own overflow:hidden + border-radius-lg, which reliably clips
   all children including border-collapse table borders. */
.pc-status-table-wrap {
    overflow: auto;
    max-height: 350px;
    width: 100%;
}
.pc-status-table-wrap table {
    margin-bottom: 0 !important;
}

/* Search form labels - override Metronic col-form-label red tint */
.pc-card-body .col-form-label {
    color: var(--pc-text) !important;
    font-weight: 700 !important;
}

/* Invoice Complete pill - green badge with pulsing glow (mirrors welcome.cfm LIVE indicator).
   !important on typographic props locks out inherited Metronic table/font styles so the pill
   renders identically whether it's in a card header or an old HTML table cell. */
.pc-badge-complete {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #16a34a !important;
    color: #fff !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: var(--pc-font, 'Noto Sans', sans-serif) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    border: none !important;
    animation: pcCompletePulse 2.5s ease-in-out infinite;
}
@keyframes pcCompletePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
    60%       { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
}

/* Force white text on highlighted link-buttons (EMAIL ASN, SEND ASN UPSTREAM, header buttons).
   The `a { color: var(--pc-link) }` global rule resolves to the same highlight
   color as the button background, making text invisible. Covers both color:white
   and color:#fff variants since ColdFusion ##fff outputs #fff in the rendered HTML. */
a.pc-btn[style*="color:white"],
a.pc-btn[style*="color:#fff"],
a.pc-btn.pc-btn-primary {
    color: white !important;
}

/* ?? Field notes (helper text below form inputs) ????????????????????????????*/
.pc-field-note {
    font-size: 12px;
    color: var(--pc-text-muted);
    margin-top: 4px;
}
[data-theme="dark"] .pc-field-note {
    color: var(--pc-text-secondary);
}

/* ?? Icon action buttons ?????????????????????????????????????????????????????
   Borderless, backgroundless icon buttons for table row actions. */
.pc-icon-btn {
    background: transparent;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
    transition: opacity 0.15s ease;
    opacity: 0.75;
}
.pc-icon-btn:hover  { opacity: 1; }
.pc-icon-btn:disabled { opacity: 0.35; cursor: default; }
.pc-icon-btn-danger { color: var(--pc-danger); }

/* ?? Universal select chevron ????????????????????????????????????????????????
   Scoped rules use background-color (not the background shorthand) so they
   don't reset background-image. This rule injects the SVG chevron for all
   single-select elements. Skips multi-select listboxes ([multiple]). */
select:not([multiple]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555e6e' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 36px !important;
}
[data-theme="dark"] select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaaaaa' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
}
/* ??????????????????????????????????????????????????????????????????????????? */

/* ?? Accordion warning-state +/- icon: force white ?????????????????????????? */
.m-accordion .m-accordion__item--warning .m-accordion__item-head .m-accordion__item-mode,
.m-accordion .m-accordion__item--warning .m-accordion__item-head.collapsed .m-accordion__item-mode {
    color: #ffffff !important;
}

/* ?? Order Audit Trail: Enterprise Redesign ??????????????????????????????????
   Wraps both audit trail table instances on open_orders_results.cfm.
   Uses !important to override dense inline styles in the legacy CFM. */

/* ? Outer table shell ???????????????????????????????????????????????????????? */
.pc-audit-trail > table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 2px solid #3b4a6b !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    font-size: 14px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
}

/* ? Column header row ???????????????????????????????????????????????????????? */
.pc-audit-trail > table > TR:first-child > TD {
    background: #f2f3f8 !important;
    color: #1a2340 !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 16px 20px !important;
    border-right: 1px solid #dde3f0 !important;
    border-bottom: 2px solid #dde3f0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   OCC EMAIL BLASTER - dedicated light + dark mode
   ========================================================================== */

/* ?? Toggle icon (<i> element restored, uses fa-minus / fa-plus) ????????? */
.blaster-toggle-icon {
    font-size: 13px;
    color: var(--pc-text-secondary);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    transition: color .15s;
}
.blaster-card.blaster-collapsed > .blaster-card-body {
    display: none;
}
.blaster-card.blaster-collapsed > .blaster-card-header {
    border-bottom: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* ?? Light mode: explicit overrides for rgba hardcodes ??????????????????? */
.blaster-token-bar      { background: rgba(0,0,0,.03); }
.blaster-recip-table thead th { background: rgba(0,0,0,.04); }

/* ?? Dark mode: missing input types ?????????????????????????????????????? */
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"] {
    background-color: var(--pc-input-bg) !important;
    border-color: var(--pc-input-border) !important;
    color: var(--pc-text) !important;
}

/* ?? Dark mode: blaster card structure ???????????????????????????????????? */
[data-theme="dark"] .blaster-card {
    background: var(--pc-bg-white);
    border-color: var(--pc-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
[data-theme="dark"] .blaster-card-header {
    border-bottom-color: var(--pc-border);
}
[data-theme="dark"] .blaster-card-header h3 {
    color: var(--pc-text);
}
[data-theme="dark"] .blaster-toggle-icon {
    color: var(--pc-text-secondary);
}

/* ?? Dark mode: token bar ????????????????????????????????????????????????? */
[data-theme="dark"] .blaster-token-bar {
    background: rgba(255,255,255,.05);
}
[data-theme="dark"] .blaster-token {
    background: #3a4556;
    border-color: var(--pc-border);
    color: var(--pc-primary);
}
[data-theme="dark"] .blaster-token:hover {
    background: var(--pc-primary);
    color: #fff;
    border-color: var(--pc-primary);
}

/* ?? Dark mode: form fields ??????????????????????????????????????????????? */
[data-theme="dark"] .blaster-field label {
    color: var(--pc-text-secondary) !important;
}
[data-theme="dark"] .blaster-field input,
[data-theme="dark"] .blaster-field select,
[data-theme="dark"] .blaster-field textarea {
    background: var(--pc-input-bg) !important;
    border-color: var(--pc-input-border) !important;
    color: var(--pc-text) !important;
}
[data-theme="dark"] .blaster-search {
    background: var(--pc-input-bg) !important;
    border-color: var(--pc-input-border) !important;
    color: var(--pc-text) !important;
}
[data-theme="dark"] .blaster-search-wrap i {
    color: var(--pc-text-secondary);
}

/* ?? Dark mode: recipient table ??????????????????????????????????????????? */
[data-theme="dark"] .blaster-recip-table thead th {
    background: #1e2633;
    border-bottom-color: var(--pc-border);
    color: var(--pc-text-secondary);
}
[data-theme="dark"] .blaster-recip-table tbody tr {
    border-bottom-color: var(--pc-border);
}
[data-theme="dark"] .blaster-recip-table td {
    color: var(--pc-text);
}
[data-theme="dark"] .recip-email-row:not(:first-child) {
    border-top-color: var(--pc-border);
}
[data-theme="dark"] .blaster-recip-table td span[style*="rgba(0,0,0"] {
    background: rgba(255,255,255,.14) !important;
    color: var(--pc-text-secondary) !important;
}
[data-theme="dark"] .blaster-recip-table td div[style*="rgba(0,0,0"] {
    background: rgba(255,255,255,.14) !important;
}
[data-theme="dark"] .blaster-recip-table td,
[data-theme="dark"] .blaster-recip-table td div,
[data-theme="dark"] .blaster-recip-table td span:not([style*="color"]) {
    color: var(--pc-text);
}

/* ?? Dark mode: send card ????????????????????????????????????????????????? */
[data-theme="dark"] .send-divider {
    color: var(--pc-text-secondary);
}
[data-theme="dark"] .send-divider::before,
[data-theme="dark"] .send-divider::after {
    background: var(--pc-border);
}
[data-theme="dark"] #sendStatusMsg {
    border-color: var(--pc-border);
}

/* ?? Summernote editor - dark mode ???????????????????????????????????????? */
[data-theme="dark"] .note-editor.note-frame {
    border-color: var(--pc-border) !important;
}
[data-theme="dark"] .note-toolbar {
    background: #1e2633 !important;
    border-bottom-color: var(--pc-border) !important;
}
[data-theme="dark"] .note-editable {
    background: var(--pc-bg-white) !important;
    color: var(--pc-text) !important;
}
[data-theme="dark"] .note-statusbar {
    background: #1e2633 !important;
    border-top-color: var(--pc-border) !important;
    color: var(--pc-text-secondary) !important;
}
[data-theme="dark"] .note-btn,
[data-theme="dark"] .note-btn-group .btn {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--pc-text-secondary) !important;
}
[data-theme="dark"] .note-btn:hover,
[data-theme="dark"] .note-btn-group .btn:hover,
[data-theme="dark"] .note-btn.active {
    background: rgba(255,255,255,.1) !important;
    color: var(--pc-text) !important;
}
[data-theme="dark"] .note-toolbar .dropdown-menu,
[data-theme="dark"] .note-popover .dropdown-menu {
    background: var(--pc-bg-white) !important;
    border-color: var(--pc-border) !important;
}
[data-theme="dark"] .note-toolbar .dropdown-item,
[data-theme="dark"] .note-popover .dropdown-item {
    color: var(--pc-text) !important;
}
[data-theme="dark"] .note-toolbar .dropdown-item:hover,
[data-theme="dark"] .note-popover .dropdown-item:hover {
    background: var(--pc-bg-hover) !important;
}
[data-theme="dark"] .note-color .note-dropdown-item .note-color-reset,
[data-theme="dark"] .note-color-all .note-color-btn {
    border-color: var(--pc-border) !important;
}
[data-theme="dark"] .note-table.dropdown-menu {
    background: var(--pc-bg-white) !important;
    border-color: var(--pc-border) !important;
}
[data-theme="dark"] .note-table.dropdown-menu .note-insert-table td {
    border-color: var(--pc-border) !important;
    background: var(--pc-bg) !important;
}
[data-theme="dark"] .note-table.dropdown-menu .note-insert-table td:hover {
    background: var(--pc-primary) !important;
}
.pc-audit-trail > table > TR:first-child > TD:last-child {
    border-right: none !important;
}
.pc-audit-trail > table > TR:first-child font,
.pc-audit-trail > table > TR:first-child strong {
    color: #1a2340 !important;
    font-size: 12px !important;
    font-family: inherit !important;
}

/* ? Process / label column (col 1) ??????????????????????????????????????????? */
.pc-audit-trail > table > TR:not(:first-child) > TD:first-child {
    background: #f4f6fb !important;
    color: #1a2340 !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    padding: 20px 22px !important;
    border-left: 5px solid #3b4a8a !important;
    border-right: 2px solid #dde3f0 !important;
    border-bottom: 1px solid #e8ecf5 !important;
    vertical-align: middle !important;
    min-width: 200px !important;
}

/* ? Status / description column (col 2) ?????????????????????????????????????? */
/* Both selectors needed: browsers auto-insert <tbody> between <table> and <TR> */
.pc-audit-trail > table > TR:not(:first-child) > TD:nth-child(2),
.pc-audit-trail > table > tbody > TR:not(:first-child) > TD:nth-child(2),
.pc-audit-trail > table > tbody > TR > TD:nth-child(2) {
    background: transparent !important;
    padding: 20px 22px !important;
    border: 1px solid #dde3f0 !important;
    vertical-align: middle !important;
    text-align: center !important;
}
.pc-audit-trail > table > TR:not(:first-child) > TD:nth-child(2) > font,
.pc-audit-trail > table > tbody > TR > TD:nth-child(2) > font {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}
.pc-audit-trail > table > TR:not(:first-child) > TD:nth-child(2) .fa-thumbs-up,
.pc-audit-trail > table > tbody > TR > TD:nth-child(2) .fa-thumbs-up,
.pc-audit-trail > table > TR:not(:first-child) > TD:nth-child(2) .fa-thumbs-down,
.pc-audit-trail > table > tbody > TR > TD:nth-child(2) .fa-thumbs-down {
    display: inline-block !important;
}

/* ? Date / detail columns (col 3 + 4) ??????????????????????????????????????? */
.pc-audit-trail > table > TR:not(:first-child) > TD:nth-child(3),
.pc-audit-trail > table > TR:not(:first-child) > TD:nth-child(4) {
    background: #ffffff !important;
    color: #374060 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    padding: 20px 22px !important;
    border-right: 1px solid #e8ecf5 !important;
    border-bottom: 1px solid #e8ecf5 !important;
    vertical-align: top !important;
}
.pc-audit-trail > table > TR:not(:first-child) > TD:last-child {
    border-right: none !important;
}

/* ? Row hover ???????????????????????????????????????????????????????????????? */
.pc-audit-trail > table > TR:not(:first-child):hover > TD {
    background: #f0f3fc !important;
}
.pc-audit-trail > table > TR:not(:first-child):hover > TD:first-child {
    background: #e8ecf8 !important;
    border-left-color: #ff7f4b !important;
}

/* ? Neutralize legacy <font> tags ???????????????????????????????????????????? */
.pc-audit-trail font,
.pc-audit-trail font.opens_12 {
    font-size: 12px !important;
}

/* ? Sub-tables (QB PO, bills, shipments, payments.) ?????????????????????????? */
.pc-audit-trail table table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid #d0d8ee !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    margin-top: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.pc-audit-trail table table TR:first-child TD,
.pc-audit-trail table table TR:first-child td {
    background: #e8edf8 !important;
    color: #2c3e6b !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 2px solid #c4cce6 !important;
    border-right: 1px solid #d0d8ee !important;
    white-space: nowrap !important;
}
.pc-audit-trail table table TR:first-child TD:last-child,
.pc-audit-trail table table TR:first-child td:last-child {
    border-right: none !important;
}
.pc-audit-trail table table TR:not(:first-child) TD,
.pc-audit-trail table table TR:not(:first-child) td {
    background: #ffffff !important;
    color: #374060 !important;
    font-size: 12px !important;
    padding: 11px 14px !important;
    border: none !important;
    border-bottom: 1px solid #edf0f8 !important;
    border-right: 1px solid #edf0f8 !important;
    vertical-align: middle !important;
}
.pc-audit-trail table table TR:not(:first-child) TD:last-child,
.pc-audit-trail table table TR:not(:first-child) td:last-child {
    border-right: none !important;
}
.pc-audit-trail table table TR:not(:first-child):hover TD,
.pc-audit-trail table table TR:not(:first-child):hover td {
    background: #f5f7fd !important;
}

/* ? Status icons ?????????????????????????????????????????????????????????????? */
.pc-audit-trail .fa-thumbs-up {
    color: #16a34a !important;
    font-size: 28px !important;
}
.pc-audit-trail .fa-thumbs-down {
    color: #dc2626 !important;
    font-size: 28px !important;
}
.pc-audit-trail .fa-print {
    color: var(--pc-primary, #ff7f4b) !important;
    font-size: 22px !important;
}

/* ? Buttons inside sub-tables ???????????????????????????????????????????????? */
.pc-audit-trail .btn.btn-danger {
    font-size: 11px !important;
    padding: 6px 14px !important;
    border-radius: 5px !important;
}

/* ? Audit sub-tables rebuilt as CSS grids (div-based; replaces nested <table>) ?
   Cells MUST be plain <div> (no legacy <font> wrappers) or the HTML parser
   re-parents them out of the grid. Column template is set inline per table. */
.pc-audit-grid {
    display: grid !important;
    gap: 1px !important;
    background: var(--pc-border) !important;
    border: 1px solid var(--pc-border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 12px !important;
    color: var(--pc-text) !important;
    margin-top: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.pc-audit-grid .agh {
    padding: 8px !important;
    background: var(--pc-bg-hover) !important;
    color: var(--pc-text) !important;
    font-weight: bold !important;
    font-size: 12px !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
}
.pc-audit-grid .agc {
    padding: 8px !important;
    background: var(--pc-bg-white) !important;
    color: var(--pc-text) !important;
    font-size: 12px !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
}
.pc-audit-grid .agc-c, .pc-audit-grid .agh-c { text-align: center !important; }
.pc-audit-grid input { width: 100% !important; box-sizing: border-box !important; }
/* --vc: cells still stretch (white fill, no gray) but their content is vertically
   centered so mixed-height rows (text / icon / button) sit on one horizontal plane */
.pc-audit-grid--vc .agc { display: flex !important; align-items: center !important; }
.pc-audit-grid--vc .agc-c { justify-content: center !important; }
/* buttons fill their cell and wrap their full label so nothing clips under overflow:hidden */
.pc-audit-grid .btn {
    white-space: normal !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 34px !important;
    line-height: 1.2 !important;
}

/* ?? ORDER INVOICING & TRACKING table - transparent body rows ??????????????? */
/* Strategy: transparent the table + ALL outer TDs, then restore header only. */
/* Direct-child > td prevents bleed into nested sub-tables.                   */
.pc-inv-tracking-table {
    background: transparent !important;
}
.pc-inv-tracking-table > tbody > tr > td,
.pc-inv-tracking-table > tr > td {
    background: transparent !important;
    background-color: transparent !important;
}
/* Header row (first TR) keeps the gray and goes bold */
.pc-inv-tracking-table > tbody > tr:first-child > td,
.pc-inv-tracking-table > tr:first-child > td {
    background: #eeeeee !important;
    background-color: #eeeeee !important;
    font-weight: bold !important;
}

/* ???????????????????????????????????????????????????????????????????????
   INVOICE + FULFILLMENT - two-card redesign (Invoice Details | Workflow)
   Themed off --pc-primary; tints via color-mix with an amber fallback.
   ??????????????????????????????????????????????????????????????????????? */
.pc-inv2{
  --b:var(--pc-primary,#B67F22);
  --b-tint:color-mix(in srgb, var(--pc-primary,#B67F22) 12%, #fff);
  --b-line:color-mix(in srgb, var(--pc-primary,#B67F22) 34%, #fff);
  --b-dark:color-mix(in srgb, var(--pc-primary,#B67F22) 70%, #000);
  --ok:#2F7D57; --ok-tint:#E7F3EC; --ok-line:#BEDFCB;
  --info:#35608F; --info-tint:#E9F0F8; --info-line:#CFE0F1;
  --ln:#E7E3DB; --ln-soft:#F0EDE6; --muted:#6B7076; --faint:#9AA0A6; --ink:#20242B;
  display:flex; flex-wrap:nowrap; align-items:stretch; gap:0; margin-top:12px;
  background:#fff; border:1px solid var(--ln); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(24,27,33,.05),0 6px 20px rgba(24,27,33,.06);
}
@media(max-width:980px){ .pc-inv2{ flex-direction:column; } }
.pc-inv2 *{ box-sizing:border-box; }
.pc-inv-card{ background:#fff; border:1px solid var(--ln); border-radius:14px;
  box-shadow:0 1px 2px rgba(24,27,33,.05),0 6px 20px rgba(24,27,33,.06); overflow:hidden; }
.pc-inv-card .pc-accent{ height:3px; background:linear-gradient(90deg,var(--b),color-mix(in srgb,var(--b) 55%,#fff)); }

/* header: supplier | type | pdf */
.pc-inv-head{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding:16px 20px; border-bottom:1px solid var(--ln-soft); }
.pc-inv-lab{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:3px; }
.pc-inv-supname{ font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-inv-type{ justify-self:center; display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:999px;
  font-weight:700; font-size:12.5px; letter-spacing:.06em; background:var(--b-tint); color:var(--b-dark); border:1px solid var(--b-line); white-space:nowrap; }
.pc-inv-type .dot{ width:8px; height:8px; border-radius:50%; background:var(--b); }
.pc-inv-type.credit{ background:var(--info-tint); color:var(--info); border-color:var(--info-line); }
.pc-inv-type.credit .dot{ background:var(--info); }
.pc-inv-pdf{ justify-self:end; display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:8px 13px;
  border-radius:10px; border:1px solid var(--ln); color:var(--b-dark); font-weight:600; font-size:12.5px; background:#fff; transition:.15s; white-space:nowrap; }
.pc-inv-pdf:hover{ background:var(--b-tint); border-color:var(--b-line); transform:translateY(-1px); }
.pc-inv-pdf i{ font-size:16px; }

.pc-inv-foot{ margin-top:14px; padding:14px 20px; background:linear-gradient(90deg,#20242B,#31363F); color:#fff;
  display:flex; justify-content:space-between; align-items:center; }
.pc-inv-foot .fl{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
.pc-inv-foot .fv{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.pc-inv-body{ padding:6px 12px 4px; }

/* WORKFLOW card - vertical stepper */
.pcwf-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--ln-soft); }
.pcwf-title{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--ink); }
.pcwf-title i{ color:var(--b); }
.pcwf-prog{ font-size:11px; font-weight:700; color:var(--ok); background:var(--ok-tint); border:1px solid var(--ok-line); padding:4px 10px; border-radius:999px; }
.pcwf-body{ padding:4px 20px 14px; }
.pcwf-steps{ display:flex; flex-direction:column; }
.pcwf-step{ position:relative; padding:16px 0 16px 34px; border-bottom:1px solid var(--ln-soft); }
.pcwf-step:last-child{ border-bottom:0; }
.pcwf-step::before{ content:""; position:absolute; left:10px; top:34px; bottom:-1px; width:2px; background:var(--ln); }
.pcwf-step:last-child::before{ display:none; }
.pcwf-node{ position:absolute; left:2px; top:16px; width:18px; height:18px; border-radius:50%; background:var(--ok);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px var(--ok-tint); color:#fff; font-size:10px; }
.pcwf-step.pending .pcwf-node{ background:#C9CCD1; box-shadow:0 0 0 3px #EEF0F2; }
.pcwf-step-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.pcwf-step-name{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); }
.pcwf-step-when{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* placement of the swapped cells - single card, Supplier left / Workflow right */
.pc-inv2 > .pc-inv-card{ border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; }
.pcinv-col{ order:1 !important; flex:1.5 1 0 !important; min-width:0; padding:16px 18px; }
.pcwf-col{ order:2 !important; flex:1 1 0 !important; min-width:0; padding:16px 18px; border-left:1px solid var(--ln); }
/* if the tracking/total strips end up inside .pc-inv2, force them full-width below the two columns */
.pc-inv2 > .pc-inv-extra, .pc-inv2 > .pc-inv-total{ order:3; flex:1 0 100%; }
.pcinv-col > .pc-inv-head{ margin:-16px -18px 14px; }
.pcwf-col > .pc-inv-head{ margin:-16px -18px 14px; }
.pcinv-pdfcell{ display:none; }   /* PDF folded into the header */
.pc-inv-extra, .pc-inv-total{ margin:10px 0 0; padding:10px 16px; background:#F0EDE6; border-radius:10px; font-size:12px; }
.pc-inv-extra{ display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; }
.pc-inv-extra-k{ font-weight:700; color:#6B7076; white-space:nowrap; }
.pc-inv-total{ display:flex; justify-content:flex-end; gap:10px; align-items:center; font-weight:700; font-size:14px; }
@media(prefers-reduced-motion:reduce){ .pc-inv2 *{ transition:none!important; } }

/* ??? INVOICE + FULFILLMENT - single-card, table-based (robust vs legacy <font> bleed) ??? */
/* spacer table (transparent) - each invoice row becomes its own theme-aware card.
   Selectors carry BOTH classes so they out-specify the legacy .pc-inv-tracking-table rules. */
.pc-inv-tracking-table.pc-inv-card-2col{
  border:0 !important; box-shadow:none !important; background:var(--pc-bg) !important;
  border-collapse:separate !important; border-spacing:0 16px !important;
  margin-top:14px !important; width:100% !important;
}
.pc-inv-tracking-table.pc-inv-card-2col > tbody > tr > td,
.pc-inv-tracking-table.pc-inv-card-2col > tr > td,
.pc-inv-tracking-table.pc-inv-card-2col > tbody > tr:first-child > td,
.pc-inv-tracking-table.pc-inv-card-2col > tr:first-child > td,
.pc-inv-tracking-table.pc-inv-card-2col > tbody > tr[bgcolor] > td,
.pc-inv-tracking-table.pc-inv-card-2col > tr[bgcolor] > td{
  vertical-align:top !important;
  padding:18px 20px !important;
  background:var(--pc-bg-white) !important; background-color:var(--pc-bg-white) !important;
  color:var(--pc-text) !important;
  border-top:1px solid var(--pc-border) !important; border-bottom:1px solid var(--pc-border) !important;
  border-left:0 !important; border-right:0 !important;
  font-weight:normal !important;
}
/* left/right edges + rounded corners so the two cells read as one card per invoice */
.pc-inv-tracking-table.pc-inv-card-2col > tbody > tr > td:first-child,
.pc-inv-tracking-table.pc-inv-card-2col > tr > td:first-child{ border-left:1px solid var(--pc-border) !important; border-top-left-radius:14px !important; border-bottom-left-radius:14px !important; }
.pc-inv-tracking-table.pc-inv-card-2col > tbody > tr > td:last-child,
.pc-inv-tracking-table.pc-inv-card-2col > tr > td:last-child{ border-right:1px solid var(--pc-border) !important; border-top-right-radius:14px !important; border-bottom-right-radius:14px !important; }
/* divider between the two halves */
.pc-inv-tracking-table.pc-inv-card-2col > tbody > tr > td + td,
.pc-inv-tracking-table.pc-inv-card-2col > tr > td + td{ border-left:1px solid var(--pc-border-light) !important; }
/* detail-cell header: supplier (left) � type badge (center) � PDF (right) */
.pc-inv-dhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--pc-border-light); }
.pc-inv-dhead .pcdh-lab{ display:block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pc-text-muted); }
.pc-inv-dhead .pcdh-name{ font-size:16px; font-weight:700; color:var(--pc-text); }
.pc-inv-dhead .pcdh-type{ text-align:center; }
.pc-inv-dhead .pcinvtype{ display:inline-flex; align-items:center; padding:5px 14px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:.05em; background:var(--pc-primary,#B67F22); color:#fff; }
.pc-inv-dhead .pcinvtype.credit{ background:#35608F; }
.pc-inv-dhead .pcdh-pdf{ text-align:right; min-width:40px; }
.pc-inv-dhead .pcdh-pdf i{ font-size:26px; color:var(--pc-primary,#B67F22); }
/* invoice total - its own card: #e8e8e8/black in light, theme surface in dark */
.pc-inv-grandtotal{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; padding:16px 22px; background:#e8e8e8; color:#000; border:1px solid var(--pc-border); border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.pc-inv-grandtotal .l{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.9; }
.pc-inv-grandtotal .v{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
[data-theme="dark"] .pc-inv-grandtotal{ background:var(--pc-bg-white); color:var(--pc-text); border:1px solid var(--pc-border); }
/* line-items / totals plain tables inside the invoice card → follow the theme (override legacy inline colors) */
.pc-inv-tracking-table.pc-inv-card-2col td table{ background:transparent !important; }
.pc-inv-tracking-table.pc-inv-card-2col td table td,
.pc-inv-tracking-table.pc-inv-card-2col td table th{ color:var(--pc-text) !important; border-color:var(--pc-border-light) !important; }
[data-theme="dark"] .pc-inv-tracking-table.pc-inv-card-2col td table td,
[data-theme="dark"] .pc-inv-tracking-table.pc-inv-card-2col td table th{ background:var(--pc-bg-white) !important; background-color:var(--pc-bg-white) !important; }
/* line-item table = duplicate the .pc-audit-grid look exactly (12px, 8px pad, 1px var(--pc-border)
   lines, hover-gray bold header). 3-class prefix out-specifies the generic nested-table rule above. */
.pc-inv-tracking-table.pc-inv-card-2col td table.pc-inv-lineitems{
  border-collapse:collapse !important; width:100% !important; margin:0 !important;
  font-family:'Open Sans',sans-serif !important; font-size:12px !important;
}
.pc-inv-tracking-table.pc-inv-card-2col td table.pc-inv-lineitems td{
  padding:8px !important; font-size:12px !important; line-height:1.35 !important;
  border:1px solid var(--pc-border) !important;
  background:var(--pc-bg-white) !important; background-color:var(--pc-bg-white) !important;
  color:var(--pc-text) !important;
}
.pc-inv-tracking-table.pc-inv-card-2col td table.pc-inv-lineitems tr:first-child td{
  background:var(--pc-bg-hover) !important; background-color:var(--pc-bg-hover) !important;
  color:var(--pc-text) !important; font-weight:bold !important;
}
.pc-inv-tracking-table.pc-inv-card-2col td table.pc-inv-lineitems font{ font-size:12px !important; }
/* ORDER AUDIT TRAIL — kill the hardcoded light (#dde3f0/#e8ecf5/#3b4a8a) cell borders
   that render as white highlights in dark mode; use the theme border instead */
.pc-audit-trail > table td, .pc-audit-trail > table th,
.pc-audit-trail table td, .pc-audit-trail table th,
.pc-audit-trail table.table-bordered td, .pc-audit-trail table.table-bordered th{
  border-color:var(--pc-border) !important;
}

/* ?? CREDIT CARD CHARGES table - gray TH header row ??????????????????????? */
/* CREDIT CARD CHARGES.
   The outer table now carries the shared Metronic classes (table table-bordered m-table
   m-table--border-metal), so its header row + borders render identically to the SHIPMENT NOTICES
   table. We do NOT override the outer shell here (let those classes own it). We only give the nested
   PART breakdown its own distinct custom table styling, and set the link color. */
/* outer data cells (direct children only — the > combinator keeps this off the nested part table) */
.pc-cc-charges-table > tbody > tr > td,
.pc-cc-charges-table > tr > td {
    background: var(--pc-bg-white) !important; background-color: var(--pc-bg-white) !important;
    color: var(--pc-text) !important; padding: 10px 8px !important;
    border: 1px solid var(--pc-border) !important; vertical-align: top !important;
}
.pc-cc-part-table,
.pc-cc-charges-table table {
    border-collapse: collapse !important; width: 100% !important; margin: 0 !important;
    font-family: 'Open Sans', sans-serif !important; font-size: 12px !important;
    border: 1px solid var(--pc-border) !important; border-radius: 8px !important; overflow: hidden !important;
}
.pc-cc-part-table td,
.pc-cc-charges-table table td {
    padding: 7px 9px !important; font-size: 12px !important; line-height: 1.35 !important;
    border: 1px solid var(--pc-border) !important;
    background: var(--pc-bg-white) !important; background-color: var(--pc-bg-white) !important;
    color: var(--pc-text) !important;
}
.pc-cc-part-table tr:first-child td,
.pc-cc-charges-table table tr:first-child td {
    background: var(--pc-bg-hover) !important; background-color: var(--pc-bg-hover) !important;
    color: var(--pc-text) !important; font-weight: bold !important; text-transform: uppercase !important;
    letter-spacing: .03em !important; font-size: 11px !important;
}
.pc-cc-part-table font,
.pc-cc-charges-table table font { font-size: 12px !important; }
.pc-cc-charges-table a,
.pc-cc-charges-table a:link,
.pc-cc-charges-table a:visited,
.pc-cc-charges-table font a,
.pc-cc-charges-table font a:link,
.pc-cc-charges-table font a:visited,
.pc-cc-charges-table a b,
.pc-cc-charges-table font a b,
.pc-cc-charges-table a strong,
.pc-cc-charges-table font a strong {
    color: var(--pc-primary) !important;
}

/* ?? DataTables pagination - OCC highlight color replaces default purple ???? */
/* Legacy Metronic m-datatable selector */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--pc-primary) !important;
    background-color: var(--pc-primary) !important;
    border-color: var(--pc-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--pc-primary-light, #ffe5d9) !important;
    background-color: var(--pc-primary-light, #ffe5d9) !important;
    border-color: var(--pc-primary) !important;
    color: var(--pc-primary) !important;
}
/* Bootstrap DataTables pagination selector (used by datatables.bundle.js) */
.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--pc-primary) !important;
    border-color: var(--pc-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .page-link {
    color: var(--pc-primary) !important;
}
.dataTables_wrapper .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(26,43,74,0.2) !important;
}

/* Appearance dropdown labels + hints */
.pcAppLabel { color: var(--pc-text) !important; }
.pcAppHint  { color: var(--pc-text-secondary) !important; }

/* ASN + STATUS tracking links: always show OCC highlight color               */
/* High-specificity selector placed last to win source-order cascade          */
a.pc-tracking-link,
.pc-card a.pc-tracking-link,
.pc-card font a.pc-tracking-link,
.pc-card font.opens_12 a.pc-tracking-link {
    color: var(--occ-highlight) !important;
    font-weight: bold !important;
    text-decoration: none;
}
/* ??????????????????????????????????????????????????????????????????????????? */

/* ?? Sidebar expanded width: 305px (was 255px) ?? */
@media (min-width: 1025px) {
  .m-brand { width: 305px; }
  .m-aside-left { width: 305px; }
  .m-aside-left--fixed .m-body { padding-left: 305px; }
  .m-aside-left--fixed.m-aside-left--minimize-hover .m-aside-left { width: 305px; }
  .m-aside-left--fixed.m-page--boxed .m-aside-left { margin-left: -305px; }
  .m-footer--push.m-aside-left--enabled:not(.m-footer--fixed) .m-footer { margin-left: 305px; }
  .m-footer--fixed.m-footer--push.m-aside-left--enabled .m-footer { left: 305px; }
}

/* =============================================
   OCC NOTIFICATION BANNER  (added 2026-05-10)
   Appears directly below the AI Assistant ribbon.
   Add new notification types in occ_notifications.cfm.
   ============================================= */
/* ?? OCC Ticker-tape notification system (2026-05-10) ????????????????????????
   Bell animation: used by the LIVE label in the ticker.
   Ticker scroll: used by the scrolling track (JS sets duration dynamically).
   Ticker item styles live inline in occ_notifications.cfm (needed to beat
   Metronic's cascade; inline styles win without needing !important wars).
   ??????????????????????????????????????????????????????????????????????????? */
@keyframes occ-notif-bell {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%, 30%      { transform: rotate(-14deg); }
    20%, 40%      { transform: rotate(14deg); }
}
@keyframes occ-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ???????????????????????????????????????????????????????????????????????????
   DataTables ColReorder - platform drag-to-reorder columns   (added 2026-07-06)
   ---------------------------------------------------------------------------
   Turn it on per table:
       $('#myTable').DataTable({ colReorder: true, ... });
   and add class "pc-reorderable" to the <table> so headers get the grab cursor:
       <table id="myTable" class="... pc-reorderable"> ... </table>
   These rules style the two elements ColReorder injects mid-drag, using the
   platform tokens so every reorderable table looks identical:
     table.DTCR_clonedTable - the floating copy of the column being dragged
     div.DTCR_pointer       - the vertical bar marking where the column drops
   ??????????????????????????????????????????????????????????????????????????? */
table.DTCR_clonedTable {
    background-color: var(--pc-card-bg, #fff) !important;
    border: 1px solid var(--pc-primary) !important;
    border-radius: var(--pc-radius, 8px) !important;
    box-shadow: var(--pc-shadow-lg, 0 8px 24px rgba(0,0,0,0.18)) !important;
    opacity: 0.92 !important;
    z-index: 2001 !important;
    pointer-events: none;
}
div.DTCR_pointer {
    width: 3px !important;
    background: var(--pc-primary) !important;
    border: none !important;
    border-radius: 2px !important;
    box-shadow: 0 0 6px rgba(255,127,75,0.6);
    z-index: 2002 !important;
}
/* Draggable-header affordance - scoped to opted-in tables only so non-reorderable
   DataTables keep their normal pointer cursor. */
table.dataTable.pc-reorderable thead th        { cursor: grab; }
table.dataTable.pc-reorderable thead th:active  { cursor: grabbing; }