/* =========================================================================
   GLASSMORPHISM 2.0 — DATAVICS RFQ Proposal Generator
   =========================================================================
   Design principles:
   - Animated gradient mesh background provides the colorful canvas
     against which frosted glass surfaces become visible
   - Three glass layers: dark (sidebar/toolbar), light (cards/tables),
     vivid (modals/dialogs)
   - Modern indigo/violet primary accent with gradient buttons
   - Inter font family for refined typography
   - 0.25s cubic-bezier transitions throughout
   - Multi-layer soft shadows with hint of color
   - Backdrop-filter requires modern browsers (Chrome 76+, Safari 9+, Firefox 103+)
   ========================================================================= */

/* ---- Design tokens ---- */
:root {
    /* Brand accent — modern indigo→violet */
    --g-primary:        #6366f1;          /* indigo-500 */
    --g-primary-hover:  #4f46e5;          /* indigo-600 */
    --g-primary-light:  #a5b4fc;          /* indigo-300 */
    --g-secondary:      #8b5cf6;          /* violet-500 */
    --g-success:        #10b981;          /* emerald-500 */
    --g-success-soft:   #34d399;
    --g-danger:         #ef4444;          /* red-500 */
    --g-danger-soft:    #f87171;
    --g-warning:        #f59e0b;          /* amber-500 */
    --g-warning-soft:   #fbbf24;
    --g-info:           #06b6d4;          /* cyan-500 */

    /* Text colors */
    --g-text:           #1e293b;          /* slate-800 */
    --g-text-muted:     #64748b;          /* slate-500 */
    --g-text-light:     #f1f5f9;          /* slate-100 */
    --g-text-on-glass:  #1e1b4b;          /* indigo-950 — best on light glass */

    /* Glass surfaces */
    --glass-light-bg:   rgba(255, 255, 255, 0.55);
    --glass-light-border: rgba(255, 255, 255, 0.50);
    --glass-light-blur: blur(24px) saturate(180%);

    --glass-dark-bg:    rgba(15, 23, 42, 0.72);     /* slate-900 alpha */
    --glass-dark-border: rgba(255, 255, 255, 0.10);
    --glass-dark-blur:  blur(20px) saturate(180%);

    --glass-tint:       rgba(99, 102, 241, 0.06);   /* faint primary tint */

    /* Shadows — multi-layer for depth */
    --g-shadow-sm:      0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --g-shadow:         0 4px 16px rgba(31, 38, 135, 0.08), 0 1px 3px rgba(0,0,0,0.04);
    --g-shadow-lg:      0 12px 40px rgba(31, 38, 135, 0.12), 0 4px 12px rgba(0,0,0,0.05);
    --g-shadow-glow:    0 0 0 4px rgba(99, 102, 241, 0.15);

    /* Borders & radii */
    --g-radius-sm:      8px;
    --g-radius:         14px;
    --g-radius-lg:      20px;
    --g-radius-pill:    999px;

    /* Transitions */
    --g-trans-fast:     0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --g-trans:          0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Legacy WP-admin variable mapping — keeps existing markup happy */
    --wp-sidebar-bg:        var(--glass-dark-bg);
    --wp-sidebar-bg-hover:  rgba(255, 255, 255, 0.06);
    --wp-sidebar-text:      rgba(255, 255, 255, 0.85);
    --wp-sidebar-text-hover:#fff;
    --wp-sidebar-divider:   rgba(255, 255, 255, 0.08);
    --wp-sidebar-section:   rgba(255, 255, 255, 0.45);
    --wp-active-accent:     var(--g-primary);
    --wp-content-bg:        transparent;
    --wp-card:              var(--glass-light-bg);
    --wp-border:            var(--glass-light-border);
    --wp-text:              var(--g-text);
    --wp-text-muted:        var(--g-text-muted);
    --wp-link:              var(--g-primary);
    --wp-link-hover:        var(--g-primary-hover);
}

/* ---- Reset & base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--g-text);
    background: #eef2ff;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Animated gradient mesh background — the colorful canvas behind all glass.
   Uses fixed-position pseudo-elements so it stays put when scrolling. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(at 15% 20%, hsla(252, 95%, 75%, 0.55) 0px, transparent 50%),
        radial-gradient(at 80% 10%, hsla(189, 95%, 70%, 0.40) 0px, transparent 50%),
        radial-gradient(at 80% 80%, hsla(289, 100%, 76%, 0.45) 0px, transparent 50%),
        radial-gradient(at 20% 90%, hsla(31, 100%, 70%, 0.35) 0px, transparent 50%),
        radial-gradient(at 50% 50%, hsla(212, 95%, 75%, 0.30) 0px, transparent 50%);
    background-color: #eef2ff;
    animation: g-mesh-shift 30s ease-in-out infinite alternate;
}

/* Gentle drift on the mesh — slow enough not to distract */
@keyframes g-mesh-shift {
    0%   { transform: translate(0, 0)       scale(1); }
    50%  { transform: translate(-2%, 1%)    scale(1.05); }
    100% { transform: translate(1%, -2%)    scale(1.02); }
}

/* Subtle noise texture on top — adds tactility without being visible */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- Top toolbar (dark glass) ---- */
.wp-toolbar {
    background: var(--glass-dark-bg);
    backdrop-filter: var(--glass-dark-blur);
    -webkit-backdrop-filter: var(--glass-dark-blur);
    border-bottom: 1px solid var(--glass-dark-border);
    color: #fff;
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    font-size: 13px;
    box-shadow: var(--g-shadow-sm);
    /* NOTE: do NOT use `overflow: hidden` here — it would clip dropdown menus
       (Create, user) that need to extend below the toolbar. The brand pill
       has its own overflow:hidden + max-width to contain oversized logos. */
}
.wp-toolbar a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 0 12px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--g-radius-sm);
    margin: 0 2px;
    transition: background var(--g-trans-fast), color var(--g-trans-fast);
    flex-shrink: 0;              /* Toolbar items keep their size, don't squish on narrow screens */
}
.wp-toolbar a:hover {
    background: rgba(255,255,255,0.10);
    color: #fff;
}
.wp-toolbar .toolbar-brand {
    background: linear-gradient(135deg, var(--g-primary), var(--g-secondary));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    height: 36px;                /* Match all other toolbar items */
    max-height: 36px;
    max-width: 220px;            /* Hard cap on horizontal space so logo can't overrun the toolbar */
    overflow: hidden;            /* Belt-and-braces: clip anything that tries to escape */
    box-sizing: border-box;
}
.wp-toolbar .toolbar-brand:hover { background: linear-gradient(135deg, var(--g-primary-hover), var(--g-secondary)); }
/* Logo inside the brand button — must fit cleanly within the 36px-tall toolbar pill
   regardless of the source image's native dimensions. Use !important on the size
   constraints so an oversized native image (e.g. 2000×600) can NEVER push past
   these limits even if the browser still has a stale cached copy of an earlier
   stylesheet, or if any specificity rules try to override. */
.wp-toolbar .toolbar-brand img.toolbar-logo,
.wp-toolbar img.toolbar-logo {
    height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    display: block !important;
}
/* When a logo is shown, swap the gradient pill for a light translucent background
   so the logo's own colors render cleanly. Most company logos are designed to sit
   on a white/light background — putting them on a vivid gradient mangles the
   colors (e.g. green text on indigo). The light surface here is the same frosted
   white we use for cards, just slightly more opaque so subtle logo details still
   pop against the dark toolbar around it. */
.wp-toolbar .toolbar-brand:has(.toolbar-logo) {
    padding: 4px 10px;
    gap: 0;
    height: 36px;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.wp-toolbar .toolbar-brand:has(.toolbar-logo):hover {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.wp-toolbar .toolbar-spacer { flex: 1; }
.wp-toolbar .dropdown-menu {
    font-size: 13px;
    min-width: 200px;
    /* Toolbar menus stay nearly opaque — the page content behind a menu
       must NOT bleed through. Cards can be 55% glassy because they're
       decorative; menus need to be readable at a glance. */
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--g-radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18), 0 4px 8px rgba(15, 23, 42, 0.08);
    padding: 6px;
    /* Toolbar is at z-index 1000 — dropdown must clear it */
    z-index: 1100;
}
.wp-toolbar .dropdown-menu .dropdown-item {
    border-radius: var(--g-radius-sm);
    padding: 6px 12px;
    color: var(--g-text);
    transition: background var(--g-trans-fast);
}
.wp-toolbar .dropdown-menu .dropdown-item:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--g-primary-hover);
}
.wp-toolbar .dropdown-toggle::after { display: none; }

/* ---- Sidebar (dark glass with subtle inner gradient) ---- */
.wp-sidebar {
    position: fixed;
    top: 48px; left: 12px; bottom: 12px;
    width: 220px;
    background: var(--glass-dark-bg);
    backdrop-filter: var(--glass-dark-blur);
    -webkit-backdrop-filter: var(--glass-dark-blur);
    border: 1px solid var(--glass-dark-border);
    color: var(--wp-sidebar-text);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 8px;
    z-index: 999;
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow);
}
/* Custom scrollbar for sidebar */
.wp-sidebar::-webkit-scrollbar { width: 6px; }
.wp-sidebar::-webkit-scrollbar-track { background: transparent; }
.wp-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.wp-sidebar a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: rgba(255,255,255,0.80);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.3;
    font-weight: 500;
    border-radius: var(--g-radius-sm);
    margin-bottom: 2px;
    transition: all var(--g-trans-fast);
    border-left: none;
    position: relative;
}
.wp-sidebar a:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
    transform: translateX(2px);
}
/* Active state — gradient pill with subtle glow */
.wp-sidebar a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--g-primary), var(--g-secondary));
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.40), inset 0 1px 0 rgba(255,255,255,0.20);
}
.wp-sidebar a i {
    font-size: 17px;
    width: 18px;
    text-align: center;
    opacity: 0.9;
}
.wp-sidebar a.active i { opacity: 1; }

.wp-sidebar .sidebar-section {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--wp-sidebar-section);
    padding: 16px 14px 6px;
    letter-spacing: 1px;
    border-top: 1px solid var(--wp-sidebar-divider);
    margin-top: 10px;
    font-weight: 600;
}

/* Submenu */
.wp-sidebar .wp-has-children { position: relative; }
.wp-sidebar .wp-has-children .wp-chevron {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.55;
    transition: transform var(--g-trans);
}
.wp-sidebar .wp-has-children[aria-expanded="true"] .wp-chevron,
.wp-sidebar .wp-has-children:not(.collapsed) .wp-chevron {
    transform: rotate(180deg);
}
.wp-sidebar .wp-submenu {
    background: rgba(0,0,0,0.20);
    border-radius: var(--g-radius-sm);
    margin: 2px 0 4px;
    padding: 4px;
}
.wp-sidebar .wp-sub-item {
    padding: 7px 12px 7px 36px !important;
    font-size: 12.5px;
    border-left: none !important;
}
.wp-sidebar .wp-sub-item i {
    font-size: 14px;
    opacity: 0.7;
}
.wp-sidebar .wp-sub-item.active {
    background: linear-gradient(135deg, var(--g-primary), var(--g-secondary)) !important;
    color: #fff !important;
}

/* ---- Main content area ---- */
.wp-main {
    margin-left: 244px;          /* sidebar 220 + 12 left + 12 gap */
    margin-right: 12px;
    margin-top: 60px;            /* toolbar 48 + 12 gap */
    padding: 24px 28px;
    min-height: calc(100vh - 60px - 12px);
}
@media (max-width: 782px) {
    .wp-sidebar { transform: translateX(-100%); }
    .wp-main    { margin-left: 12px; }
}

/* Page heading */
.wrap { max-width: 100%; }
.wp-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 6px;
    padding: 0;
}
.wp-heading h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    color: var(--g-text);
    letter-spacing: -0.02em;
}
.wp-heading .page-title-action {
    background: linear-gradient(135deg, var(--g-primary), var(--g-secondary));
    color: #fff;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--g-radius-sm);
    text-decoration: none;
    line-height: 1.4;
    transition: all var(--g-trans-fast);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.30);
}
.wp-heading .page-title-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.40);
    color: #fff;
}
.wp-subtitle {
    font-style: normal;
    font-size: 14px;
    color: var(--g-text-muted);
    margin: 4px 0 20px;
    max-width: 800px;
    line-height: 1.5;
}

/* ---- Filter tabs ---- */
.subsubsub {
    list-style: none;
    margin: 12px 0 16px;
    padding: 6px 12px;
    font-size: 13px;
    background: var(--glass-light-bg);
    backdrop-filter: var(--glass-light-blur);
    -webkit-backdrop-filter: var(--glass-light-blur);
    border: 1px solid var(--glass-light-border);
    border-radius: var(--g-radius-pill);
    display: inline-flex;
    gap: 4px;
    box-shadow: var(--g-shadow-sm);
}
.subsubsub li { display: inline-block; }
.subsubsub a {
    color: var(--g-text-muted);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: var(--g-radius-pill);
    transition: all var(--g-trans-fast);
    font-weight: 500;
}
.subsubsub a:hover {
    color: var(--g-primary);
    background: rgba(99, 102, 241, 0.10);
}
.subsubsub a.current {
    color: #fff;
    font-weight: 600;
    background: linear-gradient(135deg, var(--g-primary), var(--g-secondary));
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.30);
}
.subsubsub li:not(:last-child)::after { content: ''; }
.subsubsub .count { opacity: 0.7; font-weight: 400; }

/* ---- Search box on top of tables ---- */
.tablenav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin: 12px 0 8px;
}
.tablenav .search-box { display: flex; gap: 6px; }
.tablenav .search-box input[type=search] {
    padding: 8px 14px;
    height: 36px;
    font-size: 13px;
    background: var(--glass-light-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-light-border);
    border-radius: var(--g-radius-sm);
    min-width: 240px;
    transition: all var(--g-trans-fast);
}
.tablenav .search-box input[type=search]:focus {
    outline: none;
    border-color: var(--g-primary);
    box-shadow: var(--g-shadow-glow);
}

/* ---- Tables (frosted-glass surface) ---- */
.wp-list-table {
    width: 100%;
    background: var(--glass-light-bg);
    backdrop-filter: var(--glass-light-blur);
    -webkit-backdrop-filter: var(--glass-light-blur);
    border: 1px solid var(--glass-light-border);
    border-spacing: 0;
    border-collapse: separate;
    border-radius: var(--g-radius);
    overflow: hidden;
    box-shadow: var(--g-shadow);
    font-size: 13px;
    color: var(--g-text);
}
.wp-list-table thead th {
    background: rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(99, 102, 241, 0.12);
    color: var(--g-text-on-glass);
    text-align: left;
    font-weight: 600;
    padding: 12px 14px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wp-list-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.40);
    vertical-align: middle;
    color: var(--g-text);
}
.wp-list-table tbody tr {
    transition: background var(--g-trans-fast);
}
.wp-list-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.35);
}
.wp-list-table tbody tr:last-child td { border-bottom: none; }
.wp-list-table .row-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--g-primary);
    text-decoration: none;
}
.wp-list-table .row-title:hover { color: var(--g-primary-hover); }
.wp-list-table .row-actions {
    color: var(--g-text-muted);
    font-size: 12px;
    visibility: hidden;
    margin-top: 4px;
}
.wp-list-table tr:hover .row-actions { visibility: visible; }
.wp-list-table .row-actions a {
    color: var(--g-primary);
    text-decoration: none;
    transition: color var(--g-trans-fast);
}
.wp-list-table .row-actions a:hover { color: var(--g-primary-hover); }
.wp-list-table .row-actions a.delete { color: var(--g-danger); }
.wp-list-table .row-actions span:not(:last-child)::after {
    content: " · ";
    color: var(--g-text-muted);
}

/* ---- Postbox / cards (light glass) ---- */
.postbox, .card {
    background: var(--glass-light-bg);
    backdrop-filter: var(--glass-light-blur);
    -webkit-backdrop-filter: var(--glass-light-blur);
    border: 1px solid var(--glass-light-border);
    box-shadow: var(--g-shadow);
    border-radius: var(--g-radius);
    padding: 0;
    margin-bottom: 18px;
    transition: box-shadow var(--g-trans), transform var(--g-trans);
}
.postbox { padding: 18px; }
.postbox:hover, .card:hover {
    box-shadow: var(--g-shadow-lg);
}

.postbox h2.hndle, .card-header {
    font-size: 14px;
    font-weight: 600;
    margin: -18px -18px 14px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.10);
    background: rgba(255, 255, 255, 0.30);
    color: var(--g-text-on-glass);
    border-radius: var(--g-radius) var(--g-radius) 0 0;
}
.card-header {
    margin: 0;
    background: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(99, 102, 241, 0.10);
    padding: 14px 20px;
    border-radius: var(--g-radius) var(--g-radius) 0 0;
}
.card-body { padding: 20px; }

/* ---- Notice / alert ---- */
.notice, .alert {
    background: var(--glass-light-bg);
    backdrop-filter: var(--glass-light-blur);
    -webkit-backdrop-filter: var(--glass-light-blur);
    border: 1px solid var(--glass-light-border);
    border-left-width: 4px;
    padding: 12px 16px;
    margin: 10px 0 18px;
    font-size: 13px;
    border-radius: var(--g-radius-sm);
    color: var(--g-text-on-glass);
    box-shadow: var(--g-shadow-sm);
}
.alert-success, .notice-success { border-left-color: var(--g-success); background: rgba(16, 185, 129, 0.08); }
.alert-danger,  .notice-error   { border-left-color: var(--g-danger);  background: rgba(239, 68, 68, 0.08); }
.alert-warning, .notice-warning { border-left-color: var(--g-warning); background: rgba(245, 158, 11, 0.08); }
.alert-info,    .notice-info    { border-left-color: var(--g-info);    background: rgba(6, 182, 212, 0.08); }
.alert-light                    { background: rgba(255,255,255,0.55); border-left-color: rgba(99,102,241,0.4); }

/* ---- Forms ---- */
.form-control, .form-select,
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=datetime-local],
input[type=search], input[type=tel], input[type=url], textarea, select {
    font-size: 14px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: var(--g-radius-sm);
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) inset;
    min-height: 38px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--g-text);
    transition: all var(--g-trans-fast);
    width: 100%;
    font-family: inherit;
}
.form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--g-primary);
    box-shadow: var(--g-shadow-glow);
    outline: none;
    background: rgba(255, 255, 255, 0.88);
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
    color: rgba(100, 116, 139, 0.7);
}
.form-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--g-text);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
textarea { min-height: 80px; resize: vertical; }

.is-invalid { border-color: var(--g-danger) !important; }
.invalid-feedback { color: var(--g-danger); font-size: 12px; margin-top: 4px; }

/* ---- Buttons ---- */
.btn, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--g-radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.4;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.65);
    color: var(--g-text);
    transition: all var(--g-trans-fast);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(15, 23, 42, 0.08);
}
.btn:hover, .button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--g-shadow-sm);
}
.btn:active { transform: translateY(0); }

/* Brand / primary — gradient pill */
.btn-brand, .btn-primary, .button-primary {
    background: linear-gradient(135deg, var(--g-primary), var(--g-secondary));
    border: 1px solid transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.30);
}
.btn-brand:hover, .btn-primary:hover, .button-primary:hover {
    background: linear-gradient(135deg, var(--g-primary-hover), #7c3aed);
    color: #fff;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.40);
    transform: translateY(-1px);
}

.btn-success {
    background: linear-gradient(135deg, var(--g-success), var(--g-success-soft));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.30);
}
.btn-success:hover { background: linear-gradient(135deg, #059669, var(--g-success)); color: #fff; }

.btn-danger {
    background: linear-gradient(135deg, var(--g-danger), var(--g-danger-soft));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.30);
}
.btn-danger:hover { background: linear-gradient(135deg, #dc2626, var(--g-danger)); color: #fff; }

.btn-warning {
    background: linear-gradient(135deg, var(--g-warning), var(--g-warning-soft));
    border-color: transparent;
    color: #fff;
}
.btn-info {
    background: linear-gradient(135deg, var(--g-info), #22d3ee);
    border-color: transparent;
    color: #fff;
}

.btn-outline-secondary, .button-secondary {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(15, 23, 42, 0.12);
    color: var(--g-text);
}
.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.85);
    color: var(--g-text);
    border-color: rgba(99, 102, 241, 0.30);
}

.btn-outline-danger {
    color: var(--g-danger);
    border-color: rgba(239, 68, 68, 0.40);
    background: rgba(255, 255, 255, 0.55);
}
.btn-outline-danger:hover {
    background: var(--g-danger);
    color: #fff;
    border-color: var(--g-danger);
}

.btn-link {
    background: none;
    border: 0;
    color: var(--g-primary);
    padding: 4px 8px;
    box-shadow: none;
    backdrop-filter: none;
}
.btn-link:hover {
    color: var(--g-primary-hover);
    text-decoration: underline;
    background: rgba(99, 102, 241, 0.06);
    transform: none;
    box-shadow: none;
}

.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ---- Badges ---- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: var(--g-radius-pill);
    line-height: 1.4;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bg-success      { background: linear-gradient(135deg, var(--g-success), var(--g-success-soft)) !important; }
.bg-danger       { background: linear-gradient(135deg, var(--g-danger), var(--g-danger-soft)) !important; }
.bg-warning      { background: linear-gradient(135deg, var(--g-warning), var(--g-warning-soft)) !important; color: #fff !important; }
.bg-info         { background: linear-gradient(135deg, var(--g-info), #22d3ee) !important; color: #fff !important; }
.bg-primary      { background: linear-gradient(135deg, var(--g-primary), var(--g-secondary)) !important; }
.bg-secondary    { background: linear-gradient(135deg, #94a3b8, #64748b) !important; }
.bg-light        { background: rgba(255,255,255,0.70) !important; color: var(--g-text) !important; }

/* ---- Headings & links ---- */
h1, h2, h3, h4, h5, h6 {
    color: var(--g-text);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 13px; }
a { color: var(--g-primary); text-decoration: none; transition: color var(--g-trans-fast); }
a:hover { color: var(--g-primary-hover); }

/* ---- Util tweaks ---- */
.text-muted  { color: var(--g-text-muted) !important; }
.small       { font-size: 12px; }
hr           { border: none; border-top: 1px solid rgba(15, 23, 42, 0.08); margin: 16px 0; }

/* ---- Nav-tabs (Bootstrap) ---- */
.nav-tabs {
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
    padding: 0 8px;
}
.nav-tabs .nav-link {
    color: var(--g-text-muted);
    border: none !important;
    border-radius: var(--g-radius-sm) var(--g-radius-sm) 0 0;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
    margin-right: 2px;
    background: transparent;
    transition: all var(--g-trans-fast);
}
.nav-tabs .nav-link:hover {
    color: var(--g-primary);
    background: rgba(99, 102, 241, 0.06);
}
.nav-tabs .nav-link.active {
    color: var(--g-primary);
    background: var(--glass-light-bg);
    backdrop-filter: var(--glass-light-blur);
    -webkit-backdrop-filter: var(--glass-light-blur);
    border-bottom: 2px solid var(--g-primary) !important;
    font-weight: 600;
}

/* ---- Bootstrap tables (.table not .wp-list-table) ---- */
.table {
    background: transparent;
    border: none;
    font-size: 13px;
    color: var(--g-text);
    margin-bottom: 0;
}
.table thead th {
    background: rgba(255, 255, 255, 0.30) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.12) !important;
    border-top: none;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--g-text-on-glass);
    padding: 10px 12px;
}
.table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.30);
    border-top: none;
    color: var(--g-text);
}
.table tbody tr { transition: background var(--g-trans-fast); }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.25); }
.table tbody tr:last-child td { border-bottom: none; }
.table-sm td, .table-sm th { padding: 6px 10px; font-size: 12.5px; }

/* ---- Modals ----
   z-index ladder:
   - sidebar: 999
   - toolbar: 1000
   - dropdowns inside toolbar: 1100
   - Bootstrap default modal-backdrop: 1050  (TOO LOW — toolbar dropdown wins)
   - Bootstrap default modal: 1055           (TOO LOW)
   We bump modals to 9040/9050 so they unambiguously cover everything.
   Without this, on pages with backdrop-filter on parents (which create new
   stacking contexts), the modal can render BEHIND the toolbar/sidebar even
   though its numeric z-index is higher. */
.modal-backdrop { z-index: 9040 !important; }
.modal-backdrop.show { opacity: 0.4; backdrop-filter: blur(2px); }
.modal { z-index: 9050 !important; }
.modal-content {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid var(--glass-light-border);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg), 0 0 0 1px rgba(255,255,255,0.5) inset;
    color: var(--g-text);
}
.modal-header {
    border-bottom: 1px solid rgba(99, 102, 241, 0.10);
    padding: 18px 24px;
}
.modal-title { font-weight: 700; color: var(--g-text); }
.modal-body { padding: 20px 24px; }
.modal-footer {
    border-top: 1px solid rgba(99, 102, 241, 0.10);
    padding: 16px 24px;
    gap: 8px;
}

/* Inside a modal, form inputs must NOT use backdrop-filter — the modal-content
   already applies one, and stacking glass-on-glass makes the input render with
   the *page* behind the modal showing through, which visually looks like the
   input is floating outside the modal. Force a solid background instead. */
.modal-content .form-control,
.modal-content .form-select,
.modal-content input[type=text],
.modal-content input[type=email],
.modal-content input[type=password],
.modal-content input[type=number],
.modal-content input[type=date],
.modal-content input[type=datetime-local],
.modal-content input[type=search],
.modal-content input[type=tel],
.modal-content input[type=url],
.modal-content textarea,
.modal-content select {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(15, 23, 42, 0.15);
}
.modal-content .form-control:focus,
.modal-content .form-select:focus,
.modal-content input:focus,
.modal-content textarea:focus,
.modal-content select:focus {
    background: #ffffff;
    border-color: var(--g-primary);
}

/* ---- Login & auth pages (full-page glass card on mesh) ---- */
.wp-main--guest {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-main--guest .card {
    max-width: 420px;
    width: 100%;
    margin: 20px;
}

/* ---- Misc ---- */
::selection {
    background: rgba(99, 102, 241, 0.25);
    color: var(--g-text);
}

/* Page scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.30);
    border-radius: var(--g-radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.50); background-clip: padding-box; }

/* Star ratings — slightly more polished */
.star-rating .star {
    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all var(--g-trans-fast);
}
.star-rating .star:hover { transform: scale(1.15); }

/* Filter bar wrapper */
.filter-bar {
    background: var(--glass-light-bg);
    backdrop-filter: var(--glass-light-blur);
    -webkit-backdrop-filter: var(--glass-light-blur);
    border: 1px solid var(--glass-light-border);
    border-radius: var(--g-radius);
    padding: 16px 18px;
    margin-bottom: 18px;
    box-shadow: var(--g-shadow-sm);
}

/* ---- Multi-select pill group (replaces native <select multiple>) ----
   Used in filter bars for fields like Status/Outcome where the user picks
   one or more values. Aligns with single-input height (38px) so filter rows
   stay visually consistent. Wraps gracefully on narrow viewports. */
.multi-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    align-content: flex-start;
    min-height: 38px;
    padding: 3px 0;
    width: 100%;
}
.multi-pill {
    cursor: pointer;
    display: inline-flex;
    margin: 0;
    user-select: none;
    flex: 0 0 auto;            /* don't shrink — keep pill labels fully visible */
    max-width: 100%;
}
.multi-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.multi-pill span {
    display: inline-block;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: var(--g-radius-pill);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(15, 23, 42, 0.10);
    color: var(--g-text);
    transition: all var(--g-trans-fast);
    text-transform: capitalize;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.multi-pill:hover span {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(255, 255, 255, 0.78);
    color: var(--g-primary);
}
.multi-pill input[type="checkbox"]:checked + span {
    background: linear-gradient(135deg, var(--g-primary), var(--g-secondary));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.28);
}
.multi-pill input[type="checkbox"]:focus-visible + span {
    outline: 2px solid var(--g-primary);
    outline-offset: 2px;
}

/* Filter bar rows top-align so a wrapping pill group doesn't visually
   stretch the input next to it. Without this, Bootstrap's default
   align-items: stretch would make a single-row search field look tall. */
.filter-bar .row { align-items: flex-start; }

/* On narrow windows, make pills slightly tighter so 5-6 of them still
   fit in a typical col-md-4 column without needing many wraps. */
@media (max-width: 1199px) {
    .multi-pill span { padding: 4px 10px; font-size: 11px; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Bootstrap component compatibility tweaks */
.dropdown-menu {
    background: var(--glass-light-bg);
    backdrop-filter: var(--glass-light-blur);
    -webkit-backdrop-filter: var(--glass-light-blur);
    border: 1px solid var(--glass-light-border);
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow-lg);
    padding: 6px;
    color: var(--g-text);
}
.dropdown-item {
    border-radius: var(--g-radius-sm);
    padding: 6px 12px;
    color: var(--g-text);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(99, 102, 241, 0.10);
    color: var(--g-primary-hover);
}

/* Bootstrap input-group */
.input-group > .form-control,
.input-group > .form-select { border-radius: var(--g-radius-sm); }
.input-group-text {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: var(--g-radius-sm);
    color: var(--g-text-muted);
}

/* Bootstrap pagination */
.pagination .page-link {
    border: 1px solid var(--glass-light-border);
    background: var(--glass-light-bg);
    color: var(--g-text);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--g-primary), var(--g-secondary));
    border-color: transparent;
    color: #fff;
}

/* ============================================================
   Typeahead — auto-applied to long <select> elements via JS.
   Wraps the original (hidden) <select> with a text input that
   filters and a dropdown menu of options.
   ============================================================ */
.typeahead-wrap {
    position: relative;
    width: 100%;
}
.typeahead-hidden-select {
    /* Keep the select submittable but invisible. We can't use display:none
       because some browsers skip hidden form controls in validation. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Stack behind the visible input but stay in normal layout flow */
    left: 0; top: 0;
}
.typeahead-input {
    /* Inherit the form control look — already applied via class copy */
    width: 100%;
}
.typeahead-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1100;
    max-height: 280px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: var(--g-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: none;
}
.typeahead-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--g-text);
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    user-select: none;
}
.typeahead-item:last-child { border-bottom: none; }
.typeahead-item:hover,
.typeahead-item.typeahead-active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    color: var(--g-primary);
}
.typeahead-item.typeahead-current {
    font-weight: 600;
}
.typeahead-item.typeahead-current::after {
    content: ' ✓';
    color: var(--g-primary);
}
.typeahead-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--g-text-muted);
    font-style: italic;
}
.typeahead-empty-opt {
    /* For the placeholder "— select —" option, render less prominent */
    color: var(--g-text-muted);
    font-style: italic;
}

/* ============================================================
   Toolbar redesign — purposeful chrome instead of empty space.
   Components:
     .tb-create-btn      — Quick Create dropdown trigger
     .tb-create-menu     — multi-line action items with icon + sub-label
     .tb-search          — global search field, occupies the gap
     .tb-bell            — notification bell with overdue badge
     .tb-user            — avatar + name dropdown trigger
     .tb-avatar          — circular initials badge (also reused in user-card)
   ============================================================ */

/* --- Quick Create button --- */
.wp-toolbar .tb-create-btn {
    background: linear-gradient(135deg, var(--g-primary), var(--g-secondary));
    color: #fff !important;
    border: none;
    height: 36px;
    padding: 0 14px;
    margin: 0 6px 0 4px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    transition: transform var(--g-trans-fast), box-shadow var(--g-trans-fast);
    flex-shrink: 0;
}
.wp-toolbar .tb-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
}
.wp-toolbar .tb-create-btn::after { display: none; }   /* hide Bootstrap caret */

/* Menu styling — wider than default to accommodate sub-labels */
.tb-create-menu {
    min-width: 240px;
    padding: 6px;
}
.tb-create-menu .dropdown-item {
    padding: 8px 12px;
    border-radius: var(--g-radius-sm);
    line-height: 1.3;
}
.tb-create-menu .dropdown-item i {
    width: 22px;
    font-size: 16px;
    margin-right: 4px;
}
.tb-create-menu .dropdown-item small {
    font-size: 11px;
    margin-left: 26px;     /* align under the label, past the icon */
    line-height: 1.2;
}

/* --- Global search bar --- */
.wp-toolbar .tb-search {
    position: relative;
    margin-left: 8px;
    flex: 0 1 360px;          /* takes available space up to a sensible cap */
    min-width: 0;
    display: flex;
    align-items: center;
    height: 36px;
}
.wp-toolbar .tb-search-icon {
    position: absolute;
    left: 12px;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    pointer-events: none;
}
.wp-toolbar .tb-search-input {
    width: 100%;
    height: 36px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 18px;
    padding: 0 36px 0 32px;
    font-size: 13px;
    outline: none;
    transition: background var(--g-trans-fast), border-color var(--g-trans-fast);
}
.wp-toolbar .tb-search-input::placeholder { color: rgba(255,255,255,0.50); }
.wp-toolbar .tb-search-input:focus {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
}
.wp-toolbar .tb-search-input:focus + .tb-search-kbd { opacity: 0; }
.wp-toolbar .tb-search-kbd {
    position: absolute;
    right: 10px;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.70);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: inherit;
    pointer-events: none;
    transition: opacity var(--g-trans-fast);
}
/* Hide search on small screens — bell + user menu are higher priority there */
@media (max-width: 768px) {
    .wp-toolbar .tb-search { display: none; }
}

/* --- Notification bell --- */
.wp-toolbar .tb-bell {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
    border-radius: 50%;
    transition: background var(--g-trans-fast);
    flex-shrink: 0;
}
.wp-toolbar .tb-bell:hover { background: rgba(255,255,255,0.12); color: #fff; }
.wp-toolbar .tb-bell i { font-size: 16px; }
.wp-toolbar .tb-bell-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(135deg, #ef4444, #f59e0b);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.85);  /* "cut" through the toolbar so it pops */
    line-height: 1;
}

/* --- User menu trigger (avatar + name) --- */
.wp-toolbar .tb-user {
    height: 36px;
    padding: 0 8px 0 4px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 18px;
    color: rgba(255,255,255,0.90);
    text-decoration: none;
    transition: background var(--g-trans-fast);
    flex-shrink: 0;
}
.wp-toolbar .tb-user:hover { background: rgba(255,255,255,0.10); color: #fff; }
.wp-toolbar .tb-user::after { display: none; }
.wp-toolbar .tb-user-name { font-weight: 500; font-size: 13px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Avatar (initials) --- */
.tb-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--g-primary), var(--g-secondary));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    letter-spacing: 0.02em;
}
.tb-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

/* --- User dropdown card --- */
.tb-user-menu { min-width: 260px; padding: 0; overflow: hidden; }
.tb-user-card {
    display: flex;
    gap: 12px;
    align-items: center;
}
.tb-user-card > div { flex: 1; min-width: 0; }
.tb-user-card .text-muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-user-menu .dropdown-item {
    padding: 8px 14px;
}
.tb-user-menu .dropdown-item i {
    width: 18px;
    margin-right: 6px;
    color: var(--g-text-muted);
}
.tb-user-menu .dropdown-item.text-danger i { color: inherit; }
.tb-user-menu .dropdown-item:hover i { color: inherit; }
.tb-user-menu form { padding: 0; }
.tb-user-menu form .dropdown-item {
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}

/* ============================================================
   Info card — clean key/value display block.
   Used on the RFQ overview, lead/account detail pages, anywhere
   we have grouped record metadata. No underlines, no dense table
   chrome — just a subtle card with a colored header bar and rows
   that breathe. Replaces the bare `<table class="table">` pattern
   that was rendering as raw HTML with horizontal stripes.
   ============================================================ */
.info-card {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--g-radius);
    overflow: hidden;
    height: 100%;             /* Equal-height cards in the same Bootstrap row */
    display: flex;
    flex-direction: column;
}
.info-card-header {
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    border-bottom: 1px solid rgba(99, 102, 241, 0.12);
    color: var(--g-primary-hover);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.info-card-header i { font-size: 14px; }

/* The <dl> renders as a 2-column grid: label on the left (max-content,
   capped), value on the right. We avoid <table> entirely so there are no
   default cell borders/padding to fight against. */
.info-list {
    margin: 0;
    padding: 8px 14px;
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    gap: 6px 16px;
    font-size: 13px;
    line-height: 1.5;
}
.info-list dt {
    color: var(--g-text-muted);
    font-weight: 500;
    padding: 4px 0;
    /* Vertically align the label with the (potentially wrapping) value */
    align-self: start;
}
.info-list dd {
    margin: 0;
    padding: 4px 0;
    color: var(--g-text);
    word-break: break-word;
}
.info-list dd a { color: var(--g-primary-hover); text-decoration: none; }
.info-list dd a:hover { text-decoration: underline; }

/* Inline code chip — used for IDs like "RFQ-20260430-383EAC" */
.info-code {
    background: rgba(15, 23, 42, 0.05);
    color: var(--g-text);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}