/*
 * 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: var(--pc-bg-white);
    border-color: var(--pc-border);
    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;
}

.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;
}
.pc-card.pc-dropdown-yes > .pc-card-header::after {
    content: '\f068';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
    color: var(--pc-text-secondary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.pc-card.pc-dropdown-yes.pc-collapsed > .pc-card-header::after {
    content: '\f067';
}
.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 > .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;
}
/* 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: linear-gradient(135deg, var(--pc-primary), var(--pc-primary-dark));
    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-light);
    color: #276749;
}

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

.pc-badge-warning {
    background: var(--pc-warning-light);
    color: #975a16;
}

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

.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: 13px;
    color: #718096;
    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;
}
.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-typing-dots {
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    background: #f7f8fc;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
}
.pcai-typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #718096;
    animation: pcai-typing-bounce 1.4s ease-in-out infinite;
}
.pcai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.pcai-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pcai-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* --- 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;
}

/* ── 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: linear-gradient(135deg, #2c3e6b 0%, #3b4a8a 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 16px 20px !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,.15) !important;
    white-space: nowrap !important;
    vertical-align: middle !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: #ffffff !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-right: 1px solid #e8ecf5 !important;
    border-bottom: 1px solid #e8ecf5 !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: inherit !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: 13px !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: 13px !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;
}

/* ── 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;
}

/* ── CREDIT CARD CHARGES table — gray TH header row ─────────────────────── */
.pc-cc-charges-table > tbody > tr:first-child > th,
.pc-cc-charges-table > tr:first-child > th,
.pc-cc-charges-table > tbody > tr > th,
.pc-cc-charges-table > tr > th {
    background: #eeeeee !important;
    background-color: #eeeeee !important;
    padding: 8px !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: #ff7f4b !important;
}

/* ── DataTables pagination — OCC highlight color replaces default purple ──── */
.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;
}

/* 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; }
}