/* ============================================================
   Design tokens
   ============================================================
   The palette was 177 colour literals in this file and 155 more spread
   through the templates - the same blue written thirty-four times, so no
   single edit could change it and nothing was reliably "the brand colour".
   These are the names; the values below are the ones already in use, so
   nothing changes appearance today. Reach for a token, not a hex code.
   ------------------------------------------------------------ */
:root {
    /* brand */
    --brand: #2563ab;
    --brand-dark: #1a3c6e;
    --brand-soft: #dbeafe;
    --nav-from: #667eea;
    --nav-to: #764ba2;

    /* intent */
    --success: #28a745;
    --success-dark: #218838;
    --danger: #e74c3c;
    --danger-dark: #c0392b;
    --warning: #ffc107;
    --info: #17a2b8;
    --accent: #3498db;

    /* ink */
    --ink: #333;
    --ink-strong: #2c3e50;
    --ink-muted: #64748b;
    --ink-faint: #7a8a9a;

    /* surfaces */
    --page: #f4f7fa;
    --surface: #ffffff;
    --surface-alt: #f1f5f9;
    --border: #e0e7f0;
    --border-strong: #cbd5e1;

    /* shape */
    --radius: 6px;
    --radius-lg: 10px;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--page);
    color: #333;
}

/* ============================
   NAVBAR STYLES
   ============================ */

.navbar {
    background: linear-gradient(135deg, var(--nav-from) 0%, var(--nav-to) 100%);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-brand h1 {
    color: white;
    margin: 0;
    font-size: 24px;
}

.company-badge {
    background: var(--success);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
}

.nav-menu>li {
    position: relative;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    border-radius: 5px;
    transition: background 0.3s;
    font-size: 14px;
    white-space: nowrap;
}

.nav-menu>li>a:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Dropdown Menu in Navbar */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-toggle::after {
    content: '';
    /* content: ' ▼'; */
}

/* Invisible padding area for stable hover */
.dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 1999;
    display: none;
}

.dropdown:hover::before {
    display: block;
}

.dropdown-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 240px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 8px 0;
    z-index: 2000;
    list-style: none;
    margin: 2px 0 0 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.dropdown.active>.dropdown-menu {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    color: #333;
    padding: 12px 20px;
    border-radius: 0;
    white-space: nowrap;
    font-size: 14px;
    display: block;
    transition: all 0.2s;
}

.dropdown-menu a:hover {
    background: #f1f3f5;
    color: var(--nav-from);
    padding-left: 25px;
}

/* Submenu Styles */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: -1px;
    border-radius: 5px;
    display: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.dropdown-submenu.active>.dropdown-menu {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-submenu>a::after {
    content: "";
    /* content: " ▶"; */
}

/* Logout Button */
.logout-btn {
    background: rgba(220, 53, 69, 0.8) !important;
}

.logout-btn:hover {
    background: rgba(220, 53, 69, 1) !important;
}

/* Get Number button styling */
button[onclick*="getNextVoucherNumber"],
.get-number-btn {
    background-color: var(--success) !important;
    color: white !important;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.3s;
    margin-left: 10px;
}

button[onclick*="getNextVoucherNumber"]:hover,
.get-number-btn:hover {
    background-color: var(--success-dark) !important;
}

/* Main Content Area */
.main-content {
    min-height: calc(100vh - 160px);
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Flash Messages */
.flash-messages {
    margin-bottom: 20px;
}

.alert {
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: 500;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Footer */
.footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}

.footer p {
    margin: 0;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ============================
   SIDEBAR STYLES (ORIGINAL - PRESERVED)
   ============================ */

.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    background-color: #1a252f;
    color: var(--surface);
    padding: 20px;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar h2 {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 30px;
    color: #ecf0f1;
    border-bottom: 1px solid #34495e;
    padding-bottom: 10px;
}

.sidebar ul {
    list-style-type: none;
}

.sidebar ul li {
    margin: 15px 0;
    position: relative;
}

.sidebar ul li a {
    text-decoration: none;
    color: #ecf0f1;
    display: block;
    padding: 12px 15px;
    border-radius: 5px;
    font-size: 1em;
    transition: all 0.3s ease;
}

.sidebar ul li:hover>a {
    background-color: #34495e;
    padding-left: 20px;
}

/* Nested sub-menu styling */
.sidebar ul ul {
    position: relative;
    left: 0;
    top: 100%;
    background-color: var(--ink-strong);
    padding: 5px 0;
    margin: 5px 0 0 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: none;
}

.sidebar ul li:hover>ul {
    opacity: 1;
    visibility: visible;
    display: block;
}

.sidebar ul ul li a {
    padding: 10px 15px;
    font-size: 0.9em;
    border-left: 3px solid transparent;
    background-color: var(--ink-strong);
    white-space: nowrap;
    display: block;
}

.sidebar ul ul li:hover>a {
    background-color: #465c71;
    border-left: 3px solid var(--accent);
    padding-left: 20px;
}

/* Active state for top-level links */
.sidebar ul li.active>a {
    background-color: #34495e;
}

.sidebar ul li.active:hover>a {
    background-color: #465c71;
}

/* Focus-within for keyboard navigation */
.sidebar ul li:focus-within>ul {
    opacity: 1;
    visibility: visible;
}

/* Content styling */
.content {
    margin-left: 250px;
    padding: 30px;
    min-height: 100vh;
    background-color: var(--page);
}

.content h1 {
    font-size: 2em;
    margin-bottom: 20px;
    color: var(--ink-strong);
}

.content h2 {
    font-size: 1.5em;
    margin: 30px 0 15px;
    color: #34495e;
}

/* Dashboard sections */
.dashboard-section {
    background-color: var(--surface);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.3s;
}

.dashboard-section:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Form styling - Standardized */
.content form {
    background-color: var(--surface);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.content form>div {
    margin-bottom: 15px;
}

.content form label {
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
    vertical-align: middle;
    color: #333;
}

/* Standard Input Styles */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    padding: 8px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Focus state */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

/* Disabled state */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* Standard Width Utility */
.input-standard-width {
    width: 250px;
}

.input-full-width {
    width: 100%;
}

/* Form Layout Helpers */
.entry {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.entry label {
    width: 150px;
    margin-right: 10px;
    font-weight: 600;
}

.content form textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
}

/* Button Styles - Standardized */
.btn,
button {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    margin: 5px 0;
}

/* Primary Button */
.btn-primary,
button[type="submit"],
.btn {
    background-color: var(--accent);
    color: white;
}

.btn-primary:hover,
button[type="submit"]:hover,
.btn:hover {
    background-color: #2980b9;
    text-decoration: none;
}

/* Success Button */
.btn-success {
    background-color: var(--success);
    color: white;
}

.btn-success:hover {
    background-color: var(--success-dark);
}

/* Danger Button */
.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
}

/* Secondary Button */
.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Warning Button */
.btn-warning {
    background-color: var(--warning);
    color: #212529;
}

.btn-warning:hover {
    background-color: #e0a800;
}

/* Info Button (Download/Export) */
.btn-info,
.download-btn {
    background-color: var(--info);
    color: white;
}

.btn-info:hover,
.download-btn:hover {
    background-color: #138496;
}

/* Select2 Standardization */
.select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: 12px !important;
    color: #333 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

/* Fix for Select2 width matching inputs */
.select2-container {
    vertical-align: middle;
}

/* Table styling - ORIGINAL PRESERVED */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

table th,
table td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #e0e0e0;
}

table th {
    background-color: #34495e;
    color: var(--surface);
    font-weight: 600;
}

table td {
    background-color: var(--surface);
}

table tr:hover td {
    background-color: var(--surface-alt);
}

table td button {
    padding: 5px 10px;
    margin: 0 2px;
    font-size: 12px;
}

/* Choices.js dropdown styling - ORIGINAL PRESERVED */
.choices {
    width: 150px;
    margin: 5px 5px 5px 0;
}

/* ============================
   IMPORT SECTION STYLES
   ============================ */

.import-section-container {
    background-color: #f9fafb;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.import-section-container h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--ink-strong);
    font-size: 1.2em;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.import-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.import-file-input {
    flex: 1;
    min-width: 200px;
    padding: 5px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Progress Bar */
.progress-container {
    width: 100%;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 15px;
    height: 20px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    height: 100%;
    background-color: var(--success);
    /* Success green */
    width: 0%;
    color: white;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-weight: 600;
    transition: width 0.3s ease;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.status-message {
    margin-top: 15px;
    font-weight: 500;
    font-size: 14px;
    padding: 10px;
    border-radius: 4px;
}

.status-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-message.info {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

.global-chat-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 0;
    background: var(--nav-from);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 3000;
}

.global-chat-fab:hover {
    background: #5a71e6;
}

.global-chat-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 20, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 18px;
    z-index: 3001;
}

.global-chat-overlay[hidden] {
    display: none !important;
}

.global-chat-window {
    width: min(640px, 100%);
    height: min(760px, 94vh);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.global-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--nav-from) 0%, var(--nav-to) 100%);
    color: white;
}

/* Title on its own line, then the voucher-type select and the AI switches
   side by side. Laid out as a column this stacked all four, and the switch
   labels broke mid-phrase ("Enable" / "AI") once the window was narrow. */
.global-chat-header-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.global-chat-header-left .global-chat-title {
    flex: 1 0 100%;
}

/* The switches wrap as a pair rather than letting a label split in two. */
.global-chat-ai-toggle {
    white-space: nowrap;
    margin-left: 0 !important;
}

/* Ledger, Groups, Cost Centres, Sub Groups and Inventory Groups each force
   `input, select { width: 100% !important }` for their own form, unscoped.
   The assistant is on every page, so its controls have to hold their own
   size or the widget changes shape from one screen to the next - the message
   input above already does the same. */
.global-chat-window .global-chat-select {
    width: auto !important;
    flex: 0 1 auto;
    max-width: 100%;
}

.global-chat-window .global-chat-ai-toggle input[type="checkbox"] {
    width: auto !important;
    flex: 0 0 auto;
    margin: 0;
}

.global-chat-title {
    font-weight: 700;
    color: white;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.global-chat-select {
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0 10px;
    outline: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.global-chat-select:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.global-chat-select option {
    background: #fff;
    color: #333;
}

.global-chat-close {
    width: 32px;
    height: 32px;
    /* Never squeezed by the switches next to it, and never sat under them. */
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: white;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-chat-close:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

.global-chat-window .rv-chat {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto auto;
    gap: 10px;
    padding: 0 20px 20px 20px;
    height: 100%;
    min-height: 0;
}

.global-chat-window .rv-chat-messages {
    border: none;
    border-radius: 0;
    background: #fff;
    padding: 10px 0;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Custom Scrollbar for messages */
.global-chat-window .rv-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.global-chat-window .rv-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.global-chat-window .rv-chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.global-chat-window .rv-msg {
    margin: 12px 0;
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.global-chat-window .rv-msg.user {
    justify-content: flex-end;
}

.global-chat-window .rv-bubble {
    max-width: 85%;
    border-radius: 12px;
    padding: 10px 14px;
    line-height: 1.5;
    border: none;
    background: var(--surface-alt);
    color: #1a202c;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.global-chat-window .rv-msg.user .rv-bubble {
    background: var(--nav-from);
    color: #fff;
    border-bottom-right-radius: 2px;
}

.global-chat-window .rv-msg:not(.user) .rv-bubble {
    border-bottom-left-radius: 2px;
}

.global-chat-window .rv-time {
    display: block;
    text-align: right;
    font-size: 0.7em;
    opacity: 0.7;
    margin-top: 4px;
}

.global-chat-window .rv-chat-input-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #eee;
    margin-top: 10px;
}

.global-chat-window .rv-chat-input-bar input {
    flex: 1;
    width: auto !important;
    padding: 12px 16px;
    border-radius: 24px;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    transition: all 0.2s;
    outline: none;
}

.global-chat-window .rv-chat-input-bar input:focus {
    border-color: var(--nav-from);
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.global-chat-window .rv-chat-input-bar .btn {
    border-radius: 24px;
    padding: 8px 16px;
}

.global-chat-window .rv-chat-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.global-chat-window .rv-chat-picker {
    display: flex;
    gap: 10px;
    align-items: center;
}


.global-chat-window .rv-chat-picker[hidden] {
    display: none !important;
}

.global-chat-window .rv-chat-picker-select {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
}



.global-chat-window .rv-quick-btn:hover {
    background: #eeb0f2;
    border-color: #b794f4;
    color: #553c9a;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.global-chat-window .rv-quick-btn {
    padding: 8px 16px;
    border: 1px solid #e9d8fd;
    border-radius: 20px;
    background: #faf5ff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #6b46c1;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.global-chat-window .rv-chat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

#vaChatNewBtn {
    background-color: var(--info);
    border-color: var(--info);
    color: white;
}

#vaChatNewBtn:hover {
    background-color: #138496;
    border-color: #117a8b;
}

#vaChatSubmitBtn {
    background-color: var(--success);
    border-color: var(--success);
    color: white;
}

#vaChatSubmitBtn:hover {
    background-color: var(--success-dark);
    border-color: #1e7e34;
}

#vaChatShowDraftsBtn {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #212529;
}

#vaChatShowDraftsBtn:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

#vaChatSendBtn {
    background-color: var(--nav-from);
    border-color: var(--nav-from);
    color: white;
}

#vaChatSendBtn:hover {
    background-color: #5a67d8;
    border-color: #5a67d8;
}

#vaChatMicBtn {
    background-color: white;
    border-color: #ddd;
    color: #555;
    font-size: 1.2rem;
    padding: 4px 12px;
}

#vaChatMicBtn:hover {
    background-color: #f1f1f1;
}

.global-chat-window .rv-drafts-meta {
    display: none;
    font-size: 13px;
    color: #444;
    padding: 10px 14px 0 14px;
}

.global-chat-window.va-enabled .rv-drafts-meta {
    display: block;
}
/* ==========================================================
   Chat assistant: data tables, source badges and choice chips
   The assistant now answers with real result sets, so a bubble
   has to be able to hold a table, its totals and a download.
   ========================================================== */

.global-chat-window .rv-bubble:has(.rv-table-wrap) {
    max-width: 100%;
}

.global-chat-window .rv-table-wrap {
    white-space: normal;
    overflow-x: auto;
    margin: 8px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.global-chat-window .rv-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85em;
    /* The global `table` rule adds a 20px margin and a drop shadow, which look
       wrong inside a chat bubble that already has its own border. */
    margin: 0;
    box-shadow: none;
}

.global-chat-window .rv-table th,
.global-chat-window .rv-table td {
    padding: 6px 10px;
    text-align: left;
    border: none;
    border-bottom: 1px solid #edf2f7;
    white-space: nowrap;
}

/* Figures read far better right-aligned and lined up on the decimal point. */
.global-chat-window .rv-table td.rv-num,
.global-chat-window .rv-table th.rv-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.global-chat-window .rv-table td.rv-neg {
    color: #b91c1c;
}

.global-chat-window .rv-table th {
    /* The global `table th` rule paints headers white on dark slate. In a chat
       bubble the table is light, so the colour has to be set back explicitly
       or the headings vanish against their own background. */
    background-color: #eef2f7;
    color: #1a202c;
    font-weight: 600;
    border-bottom: 1px solid var(--border-strong);
    position: sticky;
    top: 0;
    z-index: 1;
}

.global-chat-window .rv-table tbody tr:last-child td {
    border-bottom: none;
}

/* `table td` sets a hard white background, so the zebra and hover shading has
   to be applied to the cells rather than the row. */
.global-chat-window .rv-table tbody td {
    background-color: transparent;
}

.global-chat-window .rv-table tbody tr:nth-child(even) td {
    background-color: #fafbfc;
}

.global-chat-window .rv-table tbody tr:hover td {
    background-color: #eef2ff;
}

.global-chat-window .rv-table-more {
    padding: 6px 10px;
    font-size: 0.78em;
    color: var(--ink-muted);
    background: #f8fafc;
    border-top: 1px solid #edf2f7;
}

.global-chat-window .rv-totals {
    font-size: 0.85em;
    color: #334155;
    background: var(--surface-alt);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 4px 0;
    white-space: normal;
}

.global-chat-window .rv-note {
    display: block;
    color: var(--ink-muted);
    margin-top: 4px;
    white-space: normal;
}

.global-chat-window .rv-src {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.72em;
    color: var(--ink-muted);
    background: var(--surface-alt);
    border-radius: 10px;
    padding: 2px 8px;
}

.global-chat-window .rv-src-ai {
    color: #92400e;
    background: #fef3c7;
}

.global-chat-window .rv-dl {
    display: inline-block;
    margin-top: 6px;
}

.global-chat-window .rv-pick {
    display: inline-block;
    margin: 4px 6px 0 0;
    padding: 5px 12px;
    font-size: 0.85em;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: #fff;
    color: #1a202c;
    cursor: pointer;
    transition: all 0.15s;
}

.global-chat-window .rv-pick:hover {
    border-color: var(--nav-from);
    background: #eef2ff;
    color: #4c51bf;
}

.global-chat-window .rv-alt {
    color: var(--ink-muted);
    margin-left: 6px;
}

.global-chat-window .rv-alt-dl {
    color: var(--nav-from);
    text-decoration: none;
    border-bottom: 1px dotted var(--nav-from);
}

.global-chat-window .rv-alt-dl:hover {
    color: #4c51bf;
}

/* ==========================================================
   Chat voucher review card
   Everything the parser understood, shown at once and editable,
   instead of a chain of one-question-at-a-time prompts.
   ========================================================== */

.global-chat-window .vrc-card { max-width: 100%; white-space: normal; }

.global-chat-window .vrc-title {
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 2px;
}

.global-chat-window .vrc-sub {
    font-size: 0.8em;
    color: var(--ink-muted);
    margin-bottom: 10px;
}

.global-chat-window .vrc-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.global-chat-window .vrc-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 8px;
}

.global-chat-window .vrc-row label {
    font-size: 0.8em;
    color: #475569;
    font-weight: 600;
    margin: 0;
}

.global-chat-window .vrc-req { color: #b91c1c; }

.global-chat-window .vrc-input {
    width: 100%;
    padding: 6px 9px;
    font-size: 0.86em;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: #fff;
    color: #1a202c;
}

.global-chat-window .vrc-input:focus {
    outline: none;
    border-color: var(--nav-from);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}

/* A required field the parser could not fill */
.global-chat-window .vrc-input.vrc-missing {
    border-color: #f59e0b;
    background: #fffbeb;
}

.global-chat-window .vrc-error {
    margin-top: 9px;
    padding: 7px 10px;
    border-radius: 4px;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    font-size: 0.82em;
}

.global-chat-window .vrc-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.global-chat-window .vrc-actions .btn {
    padding: 6px 14px;
    font-size: 0.84em;
}

@media (max-width: 520px) {
    .global-chat-window .vrc-row { grid-template-columns: 1fr; gap: 3px; }
}

/* ============================================================
   Global search - one box in the navbar for vouchers, parties
   and items. The panel hangs below it, right-aligned so it does
   not run off the edge next to the Logout button.
   ============================================================ */
.global-search { position: relative; display: flex; align-items: center; }

.global-search input {
    /* The navbar sets `input, select { width: 100% }` on some screens. */
    width: 190px !important;
    height: 30px;
    padding: 0 10px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.8rem;
    outline: none;
    transition: width 0.15s, background 0.15s;
}

.global-search input::placeholder { color: rgba(255, 255, 255, 0.75); }

.global-search input:focus {
    width: 260px !important;
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.7);
}

.global-search-results {
    position: absolute;
    top: 36px;
    right: 0;
    width: 400px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
    z-index: 3002;
    padding: 6px 0;
}

.global-search-results[hidden] { display: none; }

.global-search-results .gs-group {
    padding: 8px 14px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

.global-search-results .gs-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 10px;
    padding: 7px 14px;
    margin: 0;
    border-radius: 0;
    text-decoration: none;
    color: var(--brand-dark);
    font-size: inherit;
    white-space: normal;
}

.global-search-results .gs-item:hover,
.global-search-results .gs-item.active {
    background: #eef4fb;
    text-decoration: none;
    padding-left: 14px;          /* the nav hover shifts links; this must not */
}

.global-search-results .gs-title { font-size: 0.84rem; font-weight: 600; }

.global-search-results .gs-meta {
    font-size: 0.78rem;
    color: #16a085;
    text-align: right;
    white-space: nowrap;
}

.global-search-results .gs-sub {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    color: var(--ink-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-results .gs-empty { padding: 14px; font-size: 0.8rem; color: var(--ink-faint); }

/* Figures line up on the decimal; tabular-nums stops the digits changing
   width between rows, which is what makes a column scannable. */
.num-col {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Accent Button - a distinct action that is neither primary nor destructive
   (Preview Journal, for instance). It had been an inline purple. */
.btn-accent {
    background-color: #8e44ad;
    color: white;
}

.btn-accent:hover {
    background-color: #76338f;
}