/* ================================================================
   Portal Design System Variables
   Site-wide custom properties for consistent theming across all pages.
   ================================================================ */
:root {
    /* Brand colors — must match PCE seed data in CreatePortalSubsidiaryTable.sql.
       These are the defaults before dynamic theme injection overrides them. */
    --pc-primary: #1a365d;
    --pc-primary-light: #304a6d;       /* LightenColor(primary, 10%) — subtle gradient endpoint */
    --pc-accent: #2b6cb0;
    --pc-accent-glow: rgba(43, 108, 176, 0.08);
    --pc-success: #10b981;
    --pc-success-light: #d1fae5;
    --pc-warning: #f59e0b;
    --pc-warning-light: #fef3c7;
    --pc-surface: #f8fafc;
    --pc-surface-elevated: #ffffff;
    --pc-border: #e2e8f0;
    --pc-border-light: #f1f5f9;
    --pc-text: #1e293b;
    --pc-text-muted: #64748b;
    --pc-radius: 12px;
    --pc-radius-sm: 8px;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

/* Disable validation styling on specific fields */
.no-validation-style.valid,
.no-validation-style.modified,
.no-validation-style.valid.modified,
.no-validation-style.invalid {
    outline: none;
    border-color: #dee2e6;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==============================================
   Form Validation Styles - Customer Portal
   ============================================== */

/* Form Groups */
.form-group {
    margin-bottom: .5rem;
}

.form-group > label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #2d3748;
    font-size: 0.9rem;
}

.form-group-inline {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

/* Form Controls - Compact floating labels */
/* Reduce Bootstrap's default vertical padding for a more compact look */
/* Ensure input value, placeholder, and label all use same font size for consistency */

.form-floating > .form-control,
.form-floating > .form-select,
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    padding: 0.625rem 0.75rem !important;
    height: auto;
    min-height: calc(2.5rem + 2px);
    font-size: 0.9rem;
}

.form-floating > label {
    padding: 0.625rem 0.75rem;
    color: rgba(0, 0, 0, 0.65);
    font-size: 0.9rem;
}

.form-floating > .form-control::placeholder {
    font-size: 0.9rem;
}

/* Floated label state - adjust position for compact padding */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: scale(0.85) translateY(-0.6rem) translateX(0.15rem);
    background: #fff;
    padding: 0 0.15rem 0 0.25rem;
    height: auto;
}

.form-control:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-control.invalid,
.form-control.modified.invalid {
    border-color: #fc8181;
    outline: none;
}

.form-control.valid.modified {
    border-color: #48bb78;
    outline: none;
}

/* Checkboxes */
.form-checkbox {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

.checkbox-label {
    font-size: 0.875rem;
    color: #4a5568;
    cursor: pointer;
    user-select: none;
}

/* Validation Messages */
.validation-message {
    color: #c53030;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Field Validation Summary (for forms with multiple errors) */
.validation-errors {
    color: #c53030;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #fed7d7;
    border: 1px solid #fc8181;
    border-radius: 4px;
}

.validation-errors ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-icon {
    font-size: 1.1rem;
}

.alert-success {
    background-color: #c6f6d5;
    color: #276749;
    border: 1px solid #9ae6b4;
}

.alert-danger {
    background-color: #fed7d7;
    color: #c53030;
    border: 1px solid #fc8181;
}

.alert-warning {
    background-color: #fefcbf;
    color: #975a16;
    border: 1px solid #f6e05e;
}

.alert-info {
    background-color: #bee3f8;
    color: #2b6cb0;
    border: 1px solid #63b3ed;
}

/* ==============================================
   Card Component Styles (cp-card)
   Uses 'cp-card' prefix to avoid conflicts with Bootstrap's .card class
   ============================================== */

.cp-card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.375rem;
    padding: 1rem;
}

.cp-card:hover {
    /* No hover effect by default - matches Bootstrap */
}

.cp-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cp-card-icon {
    font-size: 1.25rem;
    color: inherit;
}

.cp-card-title {
    margin: 0;
    color: var(--pc-primary);
    font-size: 1rem;
    flex: 1;
}

.cp-card-body {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.5;
}

.cp-card-footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.cp-card-link {
    display: inline-block;
    color: #3182ce;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.cp-card-link:hover {
    text-decoration: underline;
}

/* Card variants */
.cp-card-flat {
    border-color: #e2e8f0;
}

.cp-card-flat:hover {
    border-color: #cbd5e0;
}

.cp-card-compact {
    padding: 0.75rem;
}

.cp-card-compact .cp-card-header {
    margin-bottom: 0.5rem;
}

.cp-card-compact .cp-card-title {
    font-size: 0.95rem;
}

/* Card icon rotations for pickup/delivery */
.pickup-card .cp-card-icon i {
    transform: rotate(-90deg);
}

.delivery-card .cp-card-icon i {
    transform: rotate(90deg);
}

/* ==============================================
   Editable Combobox Styles
   Select from list OR type custom value
   ============================================== */

.editable-combobox {
    position: relative;
    width: 100%;
}

.editable-combobox-wrapper {
    position: relative;
}

.editable-combobox-wrapper.form-floating {
    width: 100%;
}

.editable-combobox-wrapper input {
    padding-right: 2.5rem; /* Space for dropdown toggle */
}

/* Only adjust padding-right for toggle button - let Bootstrap handle label positioning */
.editable-combobox-wrapper.form-floating > label {
    padding-right: 2.5rem;
}

/* Reset padding when label is floated */
.editable-combobox-wrapper.form-floating > .form-control:focus ~ label,
.editable-combobox-wrapper.form-floating > .form-control:not(:placeholder-shown) ~ label {
    padding-right: 0.15rem;
}

.editable-combobox-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #718096;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.editable-combobox-toggle:hover {
    color: #4a5568;
}

.editable-combobox-toggle i {
    transition: transform 0.2s ease;
}

.editable-combobox-toggle i.rotated {
    transform: rotate(180deg);
}

.editable-combobox-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.editable-combobox.open .editable-combobox-wrapper input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: #3182ce;
}

.editable-combobox-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.editable-combobox-option:hover,
.editable-combobox-option.selected {
    background-color: #edf2f7;
}

.editable-combobox-option:last-child {
    border-radius: 0 0 0.375rem 0.375rem;
}

/* Style for the option matching the current input value (not keyboard-selected) */
.editable-combobox-option.current-value {
    background-color: #f8f9fa;
    font-weight: 500;
}

/* Checkmark icon indicating the current value */
.editable-combobox-option .current-check {
    float: right;
    color: #198754;
    font-size: 0.875rem;
}

/* Validation error for strict mode combobox */
.editable-combobox .validation-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Hide Bootstrap's validation icon (red circle/X) but keep the red border */
.editable-combobox .form-control.is-invalid {
    background-image: none;
    border-color: #dc3545;
}

/* ==============================================
   Field History Input Styles
   Autocomplete input with MRU/popularity-ranked suggestions
   Used for Contact Name, Phone, Instructions on Place Order
   ============================================== */

.field-history-input {
    position: relative;
    width: 100%;
}

.field-history-wrapper {
    position: relative;
}

.field-history-wrapper.form-floating {
    width: 100%;
}

/* Space for dropdown toggle - let Bootstrap handle label positioning */
.field-history-wrapper input,
.field-history-wrapper textarea {
    padding-right: 2.5rem !important;
}

.field-history-wrapper.form-floating > label {
    padding-right: 2.5rem;
}

/* Reset padding when label is floated */
.field-history-wrapper.form-floating > .form-control:focus ~ label,
.field-history-wrapper.form-floating > .form-control:not(:placeholder-shown) ~ label {
    padding-right: 0.15rem;
}

/* Auto-resize textarea - allow JS to control height, hide scrollbar */
.field-history-wrapper.form-floating > textarea {
    overflow: hidden;
    resize: none;
}

.field-history-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #718096;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.field-history-toggle:hover {
    color: #3182ce;
}

.field-history-toggle i {
    transition: transform 0.2s ease;
}

.field-history-toggle i.rotated {
    transform: rotate(180deg);
}

.field-history-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
}

.field-history-input.open .field-history-wrapper input,
.field-history-input.open .field-history-wrapper textarea {
    border-color: #3182ce;
    box-shadow: 0 0 0 0.2rem rgba(49, 130, 206, 0.25);
}

/* Invalid state - red border and remove Bootstrap's icon */
.field-history-input.is-invalid .form-control.is-invalid {
    border-color: #dc3545;
    background-image: none; /* Remove Bootstrap's red exclamation icon */
    animation: contact-pulse 2s ease-in-out infinite;
}

.field-history-input .validation-message {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.field-history-input .validation-message a {
    color: #0d6efd;
    text-decoration: underline;
    cursor: pointer;
}

.field-history-input .validation-message a:hover {
    color: #0a58ca;
}

.field-history-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.field-history-option:hover,
.field-history-option.selected {
    background-color: #edf2f7;
}

.field-history-option:last-child {
    border-radius: 0 0 0.375rem 0.375rem;
}

/* Star icon for saved default value */
.field-history-option .default-indicator {
    color: #f6ad55; /* Orange star */
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Value text */
.field-history-option .suggestion-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Use count indicator (subtle) */
.field-history-option .use-count {
    color: #a0aec0;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ==============================================
   ContactInput Styles
   Wrapper for paired name+phone with shared MRU dropdown (ADR-015).
   Individual inputs use .field-history-input styling unchanged.
   ============================================== */

/* Outer wrapper — position anchor for the shared dropdown */
.contact-input-pair {
    position: relative;
}

/* Shared dropdown sits below the form-row, spanning full width */
.contact-shared-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Em-dash separator between name and phone in dropdown suggestions */
.contact-separator {
    color: #a0aec0;
    margin: 0 0.35rem;
}

/* "Use current order remarks" hint shown below instructions when duplicating an order */
.from-order-remarks-hint {
    margin-top: 0.15rem;
    text-align: right;
}

.from-order-remarks-refresh {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    transition: color 0.15s;
}

.from-order-remarks-refresh:hover {
    color: #0d6efd;
}

.from-order-remarks-refresh i {
    margin-right: 0.25rem;
}

/* ==============================================
   Keyword Confirmation Banner (Task #2811)
   Appears below remarks when hazmat/medical/helper
   keywords are detected — prompts user to confirm.
   ============================================== */

.keyword-confirm-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding: 0.45rem 0.65rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #5d4037;
    animation: keyword-banner-in 0.2s ease;
}

@keyframes keyword-banner-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.keyword-confirm-banner > i {
    font-size: 1rem;
    color: #f57f17;
    flex-shrink: 0;
}

.keyword-confirm-banner > span {
    flex: 1;
    line-height: 1.3;
}

.keyword-confirm-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.keyword-confirm-actions .btn-sm {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
}

/* ==============================================
   Styled Dropdown Styles
   Select-only dropdown matching EditableCombobox look
   ============================================== */

.styled-dropdown {
    position: relative;
    width: 100%;
}

.styled-dropdown-wrapper {
    position: relative;
    cursor: pointer;
}

.styled-dropdown-wrapper.form-floating {
    width: 100%;
}

.styled-dropdown-display {
    padding-right: 2.5rem !important;
    cursor: pointer;
    user-select: none;
    min-height: calc(3.5rem + 2px);
    display: flex;
    align-items: center;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.styled-dropdown-display:focus {
    border-color: #3182ce;
    box-shadow: 0 0 0 0.2rem rgba(49, 130, 206, 0.25);
    outline: none;
}

.styled-dropdown-wrapper.form-floating > label {
    padding-right: 2.5rem;
    pointer-events: none;
}

/* Float label when there's a value */
.styled-dropdown-display:not(:empty) ~ label,
.styled-dropdown-display:focus ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    padding-right: 0.15rem;
}

.styled-dropdown-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #718096;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.styled-dropdown-toggle i {
    transition: transform 0.2s ease;
}

.styled-dropdown-toggle i.rotated {
    transform: rotate(180deg);
}

.styled-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
}

.styled-dropdown.open .styled-dropdown-display {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: #3182ce;
}

.styled-dropdown-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.styled-dropdown-option:hover {
    background-color: #edf2f7;
}

.styled-dropdown-option.selected {
    background-color: #e2e8f0;
    font-weight: 500;
}

.styled-dropdown-option:last-child {
    border-radius: 0 0 0.375rem 0.375rem;
}

/* ==============================================
   Address Combobox Styles
   Combined address book + Google Places search
   ============================================== */

.address-combobox {
    position: relative;
    width: 100%;
    max-width: 100%; /* Prevent expansion beyond parent */
    min-width: 0; /* Allow shrinking in flex context */
    overflow: visible; /* Must be visible to show dropdown */
}

.combobox-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%; /* Prevent expansion */
    min-width: 0; /* Allow shrinking in flex context */
    overflow: visible; /* Allow floating label to show above input */
}

/* Override Bootstrap's form-floating for combobox to accommodate action buttons */
.combobox-input-wrapper.form-floating {
    flex: 1;
    min-width: 0; /* Allow shrinking in flex context */
}

.combobox-input-wrapper.form-floating > label {
    /* Adjust label position to not overlap with action buttons when unfloated */
    padding-right: 5.5rem;
}

/* When label floats up, remove the extra padding and truncate with ellipsis */
.combobox-input-wrapper.form-floating > .form-control:focus ~ label,
.combobox-input-wrapper.form-floating > .form-control:not(:placeholder-shown) ~ label {
    padding-right: 0.25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combobox-input-wrapper input,
.combobox-input-wrapper.form-floating > .form-control {
    padding-right: 5.5rem !important; /* Space for clear X and address book icons */
    text-overflow: ellipsis; /* Truncate long addresses with ... */
    overflow: hidden;
    white-space: nowrap;
}

/* Container for action buttons inside the input */
.combobox-actions {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 5; /* Above floating label */
}

.combobox-action-btn {
    background: none;
    border: none;
    color: #718096;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.combobox-action-btn:hover {
    background-color: #e2e8f0;
    color: #4a5568;
}

.combobox-clear-btn:hover {
    color: #e53e3e;
}

/* Dropdown toggle chevron button */
.dropdown-toggle-btn {
    color: #64748b;
}

.dropdown-toggle-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.dropdown-toggle-btn.open i {
    transform: rotate(180deg);
}

.dropdown-toggle-btn:hover {
    color: #3182ce;
}

.combobox-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 350px;
    overflow-y: auto;
    margin-top: -1px;
}

.combobox-section {
    border-bottom: 1px solid #e2e8f0;
}

.combobox-section:last-child {
    border-bottom: none;
}

.combobox-section-header {
    padding: 0.5rem 0.75rem;
    background: #f7fafc;
    color: #718096;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.combobox-section-header i {
    font-size: 0.875rem;
}

.combobox-option {
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f4f8;
    transition: background-color 0.1s ease;
}

.combobox-option:last-child {
    border-bottom: none;
}

.combobox-option:hover,
.combobox-option.selected {
    background-color: #ebf8ff;
}

.combobox-option .option-name {
    font-weight: 500;
    color: #2d3748;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option-favorite {
    color: #f59e0b;
    font-size: 0.75rem;
    margin-right: 0.35rem;
}

.combobox-option .option-address {
    font-size: 0.8rem;
    color: #718096;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.125rem;
}

.combobox-option.search-all-link {
    color: #3182ce;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    border-top: 1px solid #e2e8f0;
    background: #f7fafc;
}

.combobox-option.search-all-link:hover {
    background-color: #ebf8ff;
}

.combobox-loading {
    padding: 0.75rem;
    color: #718096;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.combobox-no-results {
    padding: 0.75rem;
    color: #a0aec0;
    font-size: 0.875rem;
    font-style: italic;
    text-align: center;
}

/* Focus state for the combobox input */
.address-combobox.open .combobox-input-wrapper input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: #3182ce;
}

/* Address Book Dropdown - inline dropdown triggered by address book icon */
.address-book-dropdown {
    border-radius: 6px; /* Full radius since it's standalone, not attached to input focus */
    margin-top: 0.25rem;
}

.address-book-dropdown .combobox-section-header {
    position: sticky;
    top: 0;
    border-radius: 6px 6px 0 0;
}

.combobox-dropdown .view-all-link {
    margin-left: auto;
    background: none;
    border: none;
    color: #3182ce;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.combobox-dropdown .view-all-link:hover {
    background-color: #ebf8ff;
    text-decoration: underline;
}

.address-book-dropdown-list {
    max-height: 280px;
    overflow-y: auto;
}

.address-book-dropdown .combobox-option.view-more {
    color: #3182ce;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    border-top: 1px solid #e2e8f0;
    background: #f7fafc;
}

.address-book-dropdown .combobox-option.view-more:hover {
    background-color: #ebf8ff;
}

.address-book-dropdown .combobox-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
}

.address-book-dropdown .combobox-no-results i {
    font-size: 1.5rem;
    opacity: 0.5;
}

/* Address Combobox Container - flex layout for combobox + map button */
.address-combobox-container {
    display: flex;
    gap: 0.5rem;
    align-items: stretch; /* Make children full height */
    min-width: 0; /* Allow container to shrink below content size */
    max-width: 100%; /* Prevent expansion beyond parent */
    overflow: visible; /* Must be visible to show dropdown */
}

.address-combobox-container .address-combobox {
    flex: 1 1 0; /* Grow, shrink, start at 0 basis */
    min-width: 0; /* Allow shrinking */
    max-width: 100%; /* Prevent expansion */
    overflow: visible; /* Must be visible to show dropdown */
}

/* Map Picker Button */
.map-picker-btn {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: #ced4da;
    color: #495057;
}

.map-picker-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
}

.map-picker-btn i {
    font-size: 1.1rem;
}

/* Map Picker Modal */
.map-picker-container {
    width: 100%;
    height: 400px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.selected-location-info .alert {
    font-size: 0.9rem;
}

/* Modal backdrop styling (ensure it's above other content) */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

/* ==============================================
   Address Selected Display (Read-Only View)
   Shows compact address when selection is locked
   ============================================== */

.address-selected-display {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

/* Header row: address left, location type right */
.address-selected-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.address-selected-content {
    flex: 1;
    min-width: 0;
}

/* Footer row: edit left, address book status right */
.address-selected-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid #dee2e6;
}

.address-selected-footer .address-book-status {
    display: contents;
}

.status-separator {
    display: none;
}

.address-edit-link {
    font-size: 0.8rem;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.address-edit-link:hover {
    color: #495057;
}

.address-selected-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: #212529;
    margin-bottom: 0.0rem;
    word-wrap: break-word;
}

.address-selected-street {
    color: #495057;
    font-size: 0.95rem;
    margin-bottom: 0.05rem;
}

.address-selected-city {
    color: #6c757d;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Truncate address lines to keep consistent height */
.address-selected-name,
.address-selected-street {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty state placeholder - matches address-selected-display height +
   margin-bottom so the gap to the next sibling (contact pair) reads
   identically whether or not an address has been picked. */
.address-empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    min-height: 133px;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.address-empty-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #adb5bd;
    font-size: 0.9rem;
}

.address-empty-content i {
    font-size: 1.25rem;
}

.address-empty-placeholder .btn-link-subtle {
    color: #0d6efd;
    font-size: 0.875rem;
}

.address-empty-placeholder .btn-link-subtle:hover {
    color: #0a58ca;
}

/* ==============================================
   LocationAddressCard styles
   Used by LocationAddressCard on every page that
   hosts the component. These used to live in
   PlaceOrder.razor's inline <style>, which meant
   they only applied when PlaceOrder was rendered
   — DedicatedService and any future hosts didn't
   get them.
   ============================================== */

/* Inline company-name editor surfaced when Data is populated but
   Name is blank (e.g. Google-picked residential addresses). */
.address-name-edit {
    position: relative;
    margin-bottom: 0.25rem;
    padding-top: 0.75rem;
}

.address-name-edit .address-name-input {
    width: 100%;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pc-primary);
    padding: 0.25rem 0;
    border: none;
    border-bottom: 2px solid #f59e0b;
    background: transparent;
    outline: none;
    transition: border-color 0.2s;
}

.address-name-edit .address-name-input:focus {
    border-bottom-color: #d97706;
}

.address-name-edit label {
    position: absolute;
    left: 0;
    top: 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    color: #b45309;
    pointer-events: none;
    transition: all 0.2s ease;
}

.address-name-edit .address-name-input:focus + label,
.address-name-edit .address-name-input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 0.7rem;
    font-weight: 500;
    color: #92400e;
}

/* "In Address Book" / "Add to Address Book" badges */
.address-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.address-status i {
    font-size: 0.9rem;
}

.address-status-saved {
    color: #059669;
}

.address-status-saved i {
    color: #10b981;
}

.address-status-new {
    color: #6b7280;
}

.address-status-new i {
    color: #9ca3af;
}

/* Subtle-link button — Edit, Add to Address Book, Create New Address.
   Nested rule inside .address-empty-placeholder above overrides color
   for the empty-state "Create New Address" link. */
.btn-link-subtle {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    color: #3b82f6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
}

.btn-link-subtle:hover:not(:disabled) {
    background-color: #eff6ff;
    color: #2563eb;
}

.btn-link-subtle:disabled {
    color: #9ca3af;
    cursor: not-allowed;
}

.btn-link-subtle i {
    font-size: 0.85rem;
}

/* ==============================================
   Order submit footer — shared between PlaceOrder
   and DedicatedService so both pages use the same
   prominent gradient submit button.
   ============================================== */
.order-submit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    margin-top: 1.5rem;
    border-radius: 8px;
}

.order-submit-footer .footer-secondary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.order-submit-footer .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.order-submit-footer .btn-ghost:hover {
    background: white;
    border-color: #94a3b8;
    color: #1e293b;
}

.order-submit-footer .btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.5rem;
    background: linear-gradient(135deg, var(--pc-primary) 0%, var(--pc-primary-light) 100%);
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
}

.order-submit-footer .btn-submit:hover:not(:disabled) {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.order-submit-footer .btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.order-submit-footer .btn-submit i {
    font-size: 1rem;
}

@media (max-width: 576px) {
    .order-submit-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
}

/* ==============================================
   Contact picker modal (cp-modal-* / cp-contact-*)
   Used by the Notifications recipient picker on
   PlaceOrder and DedicatedService.
   ============================================== */
.cp-modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-modal-dialog {
    background: #fff;
    border-radius: 0.5rem;
    width: 600px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.cp-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.cp-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cp-modal-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.cp-modal-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}

.cp-contact-list {
    padding: 0.5rem 0;
}

.cp-contact-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.4rem 1.25rem;
}

.cp-contact-row + .cp-contact-row {
    border-top: 1px solid #f1f5f9;
}

.cp-contact-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #334155;
}

.cp-contact-values {
    display: flex;
    gap: 1rem;
}

.cp-contact-value {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    transition: background 0.1s;
}

.cp-contact-value:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.cp-contact-value.added {
    color: #16a34a;
}

.cp-contact-value.added:hover {
    background: #fef2f2;
    color: #dc2626;
}

.cp-picker-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 2rem;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* ==============================================
   Notifications section (c4-* classes)
   Two-column split used inside the "Order Information"
   panel on PlaceOrder and the "Complete Order" card on
   DedicatedService. Global so both pages render
   identically.
   ============================================== */
.c4-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.6rem;
    margin-bottom: 0.25rem;
}

/* Title half of the header — kept as its own span so the uppercase /
   letter-spacing styling stays scoped to the label and doesn't bleed
   into the inline toggle stack on the right. */
.c4-section-header-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.c4-section-header-title i {
    color: #64748b;
    font-size: 0.8rem;
}

.c4-container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    border-radius: 6px;
}

.c4-recipients {
    min-width: 0;
}

.c4-input-row {
    display: flex;
    gap: 0;
}

.c4-recipients-input {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px 0 0 6px;
    font-size: 0.78rem;
    background: white;
}

.c4-recipients-input.no-picker {
    border-radius: 6px;
}

.c4-recipients-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.c4-contacts-btn {
    padding: 0.3rem 0.45rem;
    border: 1px solid #cbd5e1;
    border-left: none;
    border-radius: 0 6px 6px 0;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    font-size: 0.78rem;
    transition: all 0.15s;
}

.c4-contacts-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

.c4-recipients-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.3rem;
}

.c4-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.35rem 0.1rem 0.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    font-size: 0.7rem;
    color: #475569;
}

.c4-recipient-chip button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 0.6rem;
}

.c4-recipient-chip button:hover {
    color: #dc2626;
}

.c4-notification-stack {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.55rem;
    /* Reset header's uppercase/letter-spacing inheritance so the
       toggle labels read like normal sentence-case form labels. */
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.c4-notification-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: color 0.15s;
}

.c4-notification-item:hover span {
    color: #0891b2;
}

.c4-notification-item input {
    width: 13px;
    height: 13px;
    accent-color: #0891b2;
}

.c4-notification-item span {
    font-size: 0.72rem;
    color: #64748b;
}

.c4-notification-item.active span {
    color: #0891b2;
    font-weight: 500;
}

/* ==============================================
   Compact Freight Selector (CFS)
   Three-mode segmented picker — Presets / Pallet / Custom — used by
   ContinuationShipmentEditor and intended for reuse anywhere we need
   a tight "rough shape, then refine" entry surface for parcel/freight
   numerics. See CompactFreightSelector.razor.
   ============================================== */

.cfs {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Toggle row — optional leading content on the left (flex:1, e.g. the
   label input on ContinuationShipmentEditor), segmented pill in the
   middle/right, optional accessory at the far right (e.g. the hazmat
   / medical icon toggles). When no leading content is present the
   pills sit at the left edge as before. */
.cfs-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Leading sizes naturally; the pills are pushed to the right via
   margin-left:auto so they sit flush with the accessory regardless of
   how wide the leading content is. */
.cfs-toggle-row-leading {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

.cfs-toggle-row-accessory {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Right-align the segmented pills inside the toggle row — works whether
   or not a leading slot is supplied. */
.cfs-toggle-row > .cfs-seg-toggle {
    margin-left: auto;
}

/* Segmented pill — three tabs (Presets / Freight / Custom). Active tab
   is brand-blue. */
.cfs-seg-toggle {
    display: inline-flex;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 2px;
}

.cfs-seg-toggle button {
    border: none;
    background: transparent;
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
    border-radius: 999px;
    color: #64748b;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s, color 0.15s;
}

.cfs-seg-toggle button:hover {
    color: #1e293b;
}

.cfs-seg-toggle button.active {
    background: #0046ad;
    color: white;
}

/* Preset pane — quick-select chip grid stacked above an editable refine
   row so the user can nudge Pieces/Weight without leaving Presets mode. */
.cfs-preset-pane {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Chip grid — 4 across at desktop, 2 across on narrow screens. Mirrors
   the small-preset cards on PlaceOrder but tighter. */
/* Compact L/W/H row beneath the small-freight Pieces/Weight sliders.
   Sliders feel heavy for three more inputs, so we use number-only fields
   in a tight inline row. Presets seed sensible defaults so most users
   never have to touch these; they're here for refinement. */
.small-dims-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.85rem;
}

.small-dims-label {
    color: #475569;
    font-weight: 500;
    flex-shrink: 0;
}

.small-dim-field {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.small-dim-axis {
    color: #64748b;
    font-weight: 500;
    width: 1.1em;
    text-align: center;
}

.small-dim-input {
    width: 4.5rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.85rem;
}

.cfs-preset-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.3rem;
}

@media (max-width: 768px) {
    .cfs-preset-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cfs-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.55rem 0.25rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 64px;
    color: #1e293b;
}

.cfs-chip i {
    font-size: 1rem;
    color: #64748b;
}

.cfs-chip-name {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
}

.cfs-chip-hint {
    font-size: 0.6rem;
    color: #64748b;
    line-height: 1.1;
}

.cfs-chip:hover {
    border-color: #0046ad;
}

.cfs-chip.selected {
    border-color: #0046ad;
    background: #e7eefa;
    color: #0046ad;
}

.cfs-chip.selected i {
    color: #0046ad;
}

/* Medical descriptor cards — multi-select grid shown inside the
   Labs/Pharma and Supplies panes when IsMedical is on. Same layout
   AND selected-state palette as cfs-preset-grid + cfs-chip so all
   "picked" states across the freight selector read consistently
   (brand blue). The medical context is signaled by the cards' content
   (Ambient / Refrigerated / etc.), not by a separate palette. */
.cfs-medical-descriptor {
    margin-bottom: 0.5rem;
}

.cfs-medical-descriptor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}

@media (max-width: 768px) {
    .cfs-medical-descriptor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cfs-medical-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.55rem 0.4rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 64px;
    color: #1e293b;
}

.cfs-medical-card i {
    font-size: 1rem;
    color: #64748b;
}

.cfs-medical-card-name {
    font-size: 0.75rem;
    font-weight: 500;
}

.cfs-medical-card-hint {
    font-size: 0.65rem;
    color: #64748b;
}

.cfs-medical-card:hover {
    border-color: #0046ad;
}

.cfs-medical-card.selected {
    border-color: #0046ad;
    background: #e7eefa;
    color: #0046ad;
}

.cfs-medical-card.selected i {
    color: #0046ad;
}

/* Refine row — Shape combobox + sentence-style Pieces / Weight inputs
   under the chip grid. The combobox and the chips both bind to the
   same activePreset state — picking either one updates the other. */
.cfs-preset-refine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    font-size: 0.78rem;
    color: #64748b;
}

/* Compact L × W × H group — single label, three small inputs separated
   by × glyphs, no per-field "in" suffix (the group label says "(in)").
   Sits inline with Pieces / Weight in the refine row. */
.cfs-refine-dims {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cfs-refine-dim {
    width: 5ch;
    padding: 0.2rem 0.3rem 0.15rem;
    border: none;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: transparent;
    color: #1e293b;
    -moz-appearance: textfield;
}

/* Hide native number spinners on dim inputs — they eat ~18px of usable
   width and otherwise clip the third digit at the configured 4ch width. */
.cfs-refine-dim::-webkit-outer-spin-button,
.cfs-refine-dim::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cfs-refine-dim:focus {
    outline: none;
    border-bottom: 2px solid #0046ad;
    padding-bottom: 0.1rem;
    box-shadow: none;
}

.cfs-refine-dim-x {
    color: #cbd5e1;
    font-size: 0.7rem;
}

/* Shape combobox wrapper — keeps the .editable-combobox / form-floating
   chrome (Reference / Billing Group style) but tightens padding and
   removes the floating-up animation so the control fits inline with
   the small Pieces / Weight inputs (~1.7rem total height). */
.cfs-shape-combo {
    width: 180px;
    flex-shrink: 0;
}

/* Match the .cfs-refine-input visual rhythm exactly: same underline-only
   chrome, transparent background, no rounded box. The combobox should
   read as "another input in the same row", not as a heavier control. */
.cfs-shape-combo .editable-combobox-wrapper.form-floating > .form-control {
    padding: 0.15rem 0.5rem 0.1rem !important;
    padding-right: 1.6rem !important;
    min-height: 0;
    height: auto;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.3;
    color: #1e293b;
    background: transparent;
    border: none;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0;
    box-shadow: none;
}

.cfs-shape-combo .editable-combobox-wrapper.form-floating > .form-control:focus {
    background: transparent;
    border-bottom: 2px solid #0046ad;
    padding-bottom: 0.05rem;
    box-shadow: none;
}

.cfs-shape-combo .editable-combobox-wrapper.form-floating > label {
    padding: 0.15rem 0.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
    transform: none;
    background: transparent;
    height: auto;
}

/* Placeholder-style behavior: when the input has a value, hide the
   label entirely (no floating up). Empty + focus keeps the label
   visible like a normal placeholder. */
.cfs-shape-combo .editable-combobox-wrapper.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 0;
    visibility: hidden;
}

.cfs-shape-combo .editable-combobox-toggle {
    padding: 0.05rem 0.3rem;
    font-size: 0.7rem;
    right: 0.3rem;
}

.cfs-refine-field {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cfs-refine-label {
    font-weight: 500;
}

.cfs-refine-input {
    width: 5ch;
    padding: 0.2rem 0.3rem 0.15rem;
    border: none;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: transparent;
    color: #1e293b;
    -moz-appearance: textfield;
}

/* Hide native number spinners — they otherwise eat ~18px of usable width
   and clip digits in these intentionally compact fields. */
.cfs-refine-input::-webkit-outer-spin-button,
.cfs-refine-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cfs-refine-input:focus {
    outline: none;
    border-bottom: 2px solid #0046ad;
    padding-bottom: 0.1rem;
    box-shadow: none;
}

/* Weight (and other 6-char fields) — wider variant of cfs-refine-input
   sized to fit 6 digits comfortably in tabular-nums. */
.cfs-refine-input-wide {
    width: 8ch;
}

.cfs-refine-unit {
    color: #94a3b8;
}

/* Freight pane — full commercial-freight layout ported from PlaceOrder.
   50/50 split: 2×13 trailer floor grid on the left, three sliders
   (Weight / Pieces / Height) stacked on the right. Stacks under md so
   neither side gets squeezed. */
.cfs-pallet-pane {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .cfs-pallet-pane {
        grid-template-columns: 1fr;
    }
}

/* Floor-grid section — header row (label + count input) and the grid
   itself. Mirrors PlaceOrder's .floor-grid-* but namespaced cfs- so the
   styles don't collide and the cab-icon stripe uses an amber accent
   instead of the brand-blue PO uses. */
.cfs-floor-grid-section {
    display: flex;
    flex-direction: column;
}

.cfs-floor-grid-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.cfs-floor-grid-count-input {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: #f3f4f6;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.cfs-floor-grid-count-input input {
    width: 2.5rem;
    padding: 0.1rem 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #374151;
    font-variant-numeric: tabular-nums;
}

.cfs-floor-grid-count-input input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.cfs-floor-grid-count-input input::-webkit-inner-spin-button,
.cfs-floor-grid-count-input input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cfs-floor-grid-count-input input[type=number] {
    -moz-appearance: textfield;
}

.cfs-floor-grid-count-label {
    font-size: 0.75rem;
    color: #6b7280;
}

.cfs-floor-grid-hint {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-bottom: 0.4rem;
}

.cfs-floor-grid-container {
    display: flex;
    align-items: stretch;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.cfs-floor-grid-cab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    background: var(--pc-primary);
    color: white;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.cfs-floor-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    gap: 1px;
    user-select: none;
    -webkit-user-select: none;
    min-width: 0;
}

.cfs-floor-grid-row {
    display: flex;
    gap: 1px;
}

.cfs-floor-spot {
    flex: 1;
    aspect-ratio: 1.2;
    min-width: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.cfs-floor-spot:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.cfs-floor-spot:active {
    background: #bae6fd;
    border-color: #38bdf8;
}

.cfs-floor-spot.selected {
    background: #3b82f6;
    border-color: #2563eb;
    color: white;
}

.cfs-floor-spot.selected i {
    font-size: 0.7rem;
}

/* Occupied — the position belongs to another shipment riding the same
   leg span. Greyed out, subtle lock icon, hover/active disabled, and
   the cursor is not-allowed so the user reads "I can't put my pallet
   here." Click and drag handlers in CompactFreightSelector also bail
   on these so a no-op interaction can't leak through. */
.cfs-floor-spot.occupied {
    background: #e2e8f0;
    border-color: #cbd5e0;
    color: #94a3b8;
    cursor: not-allowed;
}

.cfs-floor-spot.occupied:hover,
.cfs-floor-spot.occupied:active {
    background: #e2e8f0;
    border-color: #cbd5e0;
}

.cfs-floor-spot.occupied i {
    font-size: 0.65rem;
    color: #94a3b8;
}

/* Slider column — Weight / Pieces / Height stacked vertically next to
   the floor grid (50/50 layout). Each slider keeps the dual input +
   range pattern PlaceOrder uses; just packed tighter to fit alongside
   the trailer grid. */
.cfs-slider-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    justify-content: center;
}

.cfs-slider {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.cfs-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: #475569;
    font-weight: 500;
    min-width: 0;
}

.cfs-slider-value-with-unit {
    display: flex;
    align-items: center;
    gap: 3px;
}

.cfs-slider-value-input {
    width: 6ch;
    padding: 0.15rem 0.3rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    background: white;
    -moz-appearance: textfield;
}

/* Hide native number spinners — they otherwise eat ~18px of inner width
   and clip digits at the configured ch widths. */
.cfs-slider-value-input::-webkit-outer-spin-button,
.cfs-slider-value-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Weight slider input — wider variant sized for 6 digits (e.g., 45000+). */
.cfs-slider-value-input-wide {
    width: 9ch;
}

.cfs-slider-value-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.cfs-slider-unit {
    color: #94a3b8;
    font-size: 0.7rem;
    text-transform: lowercase;
    /* Fixed-width column so the input's right edge lines up vertically
       across sliders regardless of unit text length ("pcs" vs "lb" vs
       "in"). Without this the inputs nudge a few px each because the
       unit text width varies. */
    min-width: 1.6em;
    display: inline-block;
    text-align: left;
}

/* Read-only current-value chip on the slider label. Replaces the inline
   number input that used to live next to the slider title — those were
   lifted out into the unified refine row at the bottom of the selector,
   so the slider now just visualizes the value and this chip echoes it. */
.cfs-slider-readout {
    color: #475569;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.cfs-slider input[type="range"] {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
}

.cfs-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    transition: transform 0.15s, background-color 0.15s;
}

.cfs-slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.cfs-slider input[type="range"]:hover::-webkit-slider-thumb {
    background: #2563eb;
    transform: scale(1.1);
}

.cfs-slider input[type="range"]:hover::-moz-range-thumb {
    background: #2563eb;
}

/* Custom pane — 50/50 horizontal split. Left half stacks Pieces +
   Weight; right half groups L/W/H side-by-side. Stacks to a single
   column under md. */
.cfs-custom-pane {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    align-items: start;
}

.cfs-custom-half {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cfs-custom-dims {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Rotate-dims icon button — mirrors PlaceOrder's .rotate-dims-btn so
   the two surfaces share one rotation idiom. Sits inline at the right
   end of the unified refine row, after the L×W×H inputs; cycles
   L→W→H values when clicked. Custom mode only.                       */
.cfs-rotate-dims-btn {
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.cfs-rotate-dims-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

@media (max-width: 768px) {
    .cfs-custom-pane {
        grid-template-columns: 1fr;
    }
}

/* Numeric cell — shared between pallet & custom panes. */
.cfs-num {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cfs-num label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    font-weight: 600;
}

.cfs-num input {
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.cfs-num input:focus {
    outline: none;
    border-color: #0046ad;
    box-shadow: 0 0 0 2px rgba(0, 70, 173, 0.12);
}

/* Bottom-of-component summary line — "X pc · Y lb · L×W×H" so the user
   has a quick read of the spec without scanning the inputs themselves. */
.cfs-summary {
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cfs-summary i {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* ============================================
   Property Tag Selector Styles
   Task #2516: Property Tag Selection
   ============================================ */

/* Location Type Pills (Single-Select) */
.property-tag-selector .property-pill {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 50rem; /* Pill shape */
    transition: all 0.15s ease-in-out;
}

.property-tag-selector .property-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Selected Properties Container - dropdown-style appearance */
.property-tag-selector .selected-properties {
    position: relative;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #fff;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.property-tag-selector .selected-properties:hover {
    border-color: #94a3b8;
}

.property-tag-selector .selected-properties.expanded {
    border-color: #3182ce;
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.15);
}

/* Empty state - dropdown-style appearance (all properties consolidated here) */
.property-tag-selector .property-empty-state {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #fff;
    color: #64748b;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.property-tag-selector .property-empty-state:hover {
    border-color: #94a3b8;
}

.property-tag-selector .property-empty-state.expanded {
    border-color: #3182ce;
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.15);
}

/* Editable string property text - shows it's clickable */
.property-tag-selector .property-pill-editable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
}

.property-tag-selector .property-pill-editable:hover {
    border-bottom-color: rgba(0, 0, 0, 0.6);
}

/* Empty state container - positions dropdown relative to trigger */
.property-tag-selector .property-empty-state-container {
    position: relative;
}

/* Dropdown chevron indicator - lay flush inside the trigger row */
.property-tag-selector .property-empty-state .property-pill-unselected-dd,
.property-tag-selector .selected-properties .property-pill-unselected-dd {
    flex-shrink: 0;
}

/* Chevron rotation when dropdown is open */
.property-tag-selector .chevron-rotated {
    transform: rotate(180deg);
}

.property-tag-selector .fa-chevron-down {
    transition: transform 0.15s ease-in-out;
}

/* Add more link - shown below selected tags */
.property-tag-selector .property-add-more {
    color: #6c757d;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.property-tag-selector .property-add-more:hover {
    color: #0d6efd;
}

/* Property container - positioning context for dropdown */
.property-tag-selector .property-container {
    position: relative;
}

/* Available tags container - dropdown style with expand animation */
.property-tag-selector .available-tags-inline {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1001;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Expand animation */
    animation: dropdownExpand 0.2s ease-out forwards;
    transform-origin: top center;
}

@keyframes dropdownExpand {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

.property-tag-selector .available-tags-close {
    display: none; /* Hidden for now - collapse via chevron toggle or clicking selected tags */
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    color: #a0aec0;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.property-tag-selector .available-tags-close:hover {
    color: #718096;
}


/* Property tag pill sizing — shrink Bootstrap's btn primitive to tag-chip
   proportions via the button CSS variables. Targets the pill classes
   directly so the rule does NOT cascade onto the Cancel/Save/Remove
   buttons inside the string-input modal (which also lives under the
   .property-tag-selector wrapper). */
.property-tag-selector .btn.property-pill-selected,
.property-tag-selector .btn.property-pill-unselected,
.property-tag-selector .btn.property-pill-unselected-dd {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.65rem;
    --bs-btn-font-size: 0.78rem;
    --bs-btn-line-height: 1.35;
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Selected pill — matches .cfs-chip.selected (freight-category brand blue):
   blue border + text on a very light blue fill. */
.property-tag-selector .btn.property-pill-selected {
    --bs-btn-color: #0046ad;
    --bs-btn-bg: #e7eefa;
    --bs-btn-border-color: #0046ad;
    --bs-btn-hover-color: #0046ad;
    --bs-btn-hover-bg: #d6e2f5;
    --bs-btn-hover-border-color: #0046ad;
    --bs-btn-active-color: #0046ad;
    --bs-btn-active-bg: #d6e2f5;
    --bs-btn-active-border-color: #0046ad;
}

/* Unselected pill — white fill, light slate border, text color matched
   to the parent .inline-tags-container (#4a5568) so the pills read as
   "tags in this list" rather than slightly-darker chips. Brand-blue
   border on hover (no fill change). */
.property-tag-selector .btn.property-pill-unselected,
.property-tag-selector .btn.property-pill-unselected-dd {
    --bs-btn-color: #4a5568;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #e2e8f0;
    --bs-btn-hover-color: #4a5568;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #0046ad;
    --bs-btn-active-color: #4a5568;
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #0046ad;
}

/* Dropdown styling */
.property-tag-selector .dropdown-item {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.property-tag-selector .dropdown-item:hover {
    background-color: #e9ecef;
}

/* Modal styling for smaller modals */
.property-tag-selector .modal-sm {
    max-width: 380px;
}

/* Explicit colors on the string-input modal so the chrome doesn't inherit
   from a dark parent context (continuation stop card, address card header,
   etc.). Without this the title rendered dark-on-dark in some surfaces. */
.pts-string-modal .modal-content {
    background-color: #ffffff;
    color: #212529;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.pts-string-modal .modal-header {
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.pts-string-modal .modal-title {
    color: #1f2937;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.pts-string-modal .modal-title .fa-tag {
    color: #6b7280;
    font-size: 0.875rem;
}

.pts-string-modal .modal-body {
    padding: 1rem;
}

.pts-string-modal .modal-body .form-label {
    color: #6b7280;
    font-weight: 500;
}

.pts-string-modal .modal-footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid #e9ecef;
    background-color: #fafafa;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* ============================================
   INLINE MODE - All options always visible
   ============================================ */

.property-tag-selector.inline-mode .inline-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Location Type dropdown selector (top right of address card) */
.address-location-type {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.location-type-dropdown .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: #f9fafb;
    border-color: #d1d5db;
    color: #4b5563;
}

.location-type-dropdown .btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #374151;
}

.location-type-dropdown .btn i {
    font-size: 0.8rem;
}

.location-type-dropdown .dropdown-menu-sm {
    min-width: 140px;
    font-size: 0.8rem;
    padding: 0.25rem 0;
}

.location-type-dropdown .dropdown-item {
    padding: 0.35rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.location-type-dropdown .dropdown-item i {
    width: 1rem;
    text-align: center;
}

.location-type-dropdown .dropdown-item.active {
    background-color: #3b82f6;
    color: #fff;
}

/* Ensure dropdown menu displays when Blazor adds 'show' class */
.location-type-dropdown.show .dropdown-menu.show {
    display: block;
    position: absolute;
    z-index: 1000;
}

/* Legacy .address-edit-btn removed - now using .address-edit-link in footer */

/* Address Edit Modal */
.address-edit-modal {
    max-width: 500px;
    width: 90%;
}

.address-edit-modal .modal-body {
    padding: 1.5rem;
}

.address-edit-modal .form-group {
    margin-bottom: 1rem;
}

.address-edit-modal .form-group > label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

.address-edit-modal .form-row {
    display: flex;
    gap: 1rem;
}

.address-edit-modal .form-row .form-group {
    flex: 1;
}

.address-edit-modal .form-row .form-group-small {
    flex: 0 0 80px;
}

.address-edit-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.address-edit-modal .modal-footer .btn-outline-danger {
    margin-right: auto;
}

/* Address Book Modal List */
.address-book-list {
    max-height: 400px;
    overflow-y: auto;
}

.address-book-item {
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.address-book-item:hover {
    background-color: #f3f4f6;
    border-color: #3b82f6;
}

.address-book-item:last-child {
    margin-bottom: 0;
}

.address-book-item-name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.address-book-item-address {
    font-size: 0.9rem;
    color: #4b5563;
}

.address-book-item-city {
    font-size: 0.85rem;
    color: #6b7280;
}
  
/* ============================================
   Contact Fields Layout
   ============================================ */

.base-fields-section {
    margin-bottom: 0.0rem;
}

.base-fields-section .form-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); /* 60/40 split for Contact Person / Phone */
    gap: 1rem;
}

@media (max-width: 576px) {
    .base-fields-section .form-row {
        grid-template-columns: 1fr;
        /* Vertical gap between stacked Contact Person + Contact Phone fields
           when the 60/40 grid collapses to a single column on mobile. */
        gap: 0.75rem;
    }

    /* Breathing room between the contact pair and the Instructions
       textarea that follows the .base-fields-section wrapper. */
    .base-fields-section {
        margin-bottom: 0.75rem;
    }
}

/* Character counter for textareas */
.form-floating .char-counter {
    display: block;
    margin-top: 0.25rem;
}

/* ==============================================
   Error Display Component (Global)
   Shows API errors with stack traces in non-prod
   ============================================== */

.error-display {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
}

.error-details {
    text-align: left;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.8rem;
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #c53030;
}
/* ==============================================
   Share Link Button (Footer)
   ============================================== */

.share-link-btn {
    background: transparent;
    border: none;
    color: #718096;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
    transition: color 0.2s;
}

.share-link-btn:hover {
    color: #3182ce;
}

.share-link-btn i {
    margin-right: 0.25rem;
}

/* ==============================================
   Contact Required Field - Pulsing Red Outline
   Applied when location type requires contact info
   ============================================== */

.contact-required-field,
.contact-required-field .form-control {
    border-color: #ef4444 !important;
    animation: contact-pulse 2s ease-in-out infinite;
}

@keyframes contact-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
}

/* ==============================================
   Global Mobile Utility Styles
   Consistent mobile UX patterns across all pages
   ============================================== */

/* Touch target minimum size (44x44px per Apple HIG / Material Design).
   Applied to primary actions and form fields, but NOT inside compact UI areas
   like table toolbars, page headers, or data tables where density matters. */
@media (max-width: 768px) {
    /* Buttons — exclude compact header/toolbar controls */
    .btn,
    button:not(.btn-close):not(.btn-icon):not(.gh-btn) {
        min-height: 32px;
    }

    /* Form controls — touch-friendly sizing (exclude drum-input which must match its 36px container) */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"]:not(.drum-input),
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        min-height: 32px;
    }

    /* Reset min-height inside compact areas (table toolbars, table containers, page headers,
       Card.razor header rows). Specificity must match or beat the rules above, so we
       repeat the full selectors scoped to the compact container. */
    .pc-table-container .btn,
    .pc-table-container button:not(.btn-close):not(.btn-icon):not(.gh-btn),
    .pc-table-container .form-control,
    .pc-table-container input[type="text"],
    .pc-table-container select,
    .page-header .btn,
    .page-header button:not(.btn-close):not(.btn-icon):not(.gh-btn),
    .page-header .form-control,
    .page-header input[type="text"],
    .cp-card-header-row .btn,
    .cp-card-header-row button:not(.btn-close):not(.btn-icon):not(.gh-btn) {
        min-height: unset;
    }

    /* Checkboxes and radios */
    .form-check-input,
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }

    /* Links in touch context */
    a.nav-link,
    a.dropdown-item {
        min-height: 32px;
        display: flex;
        align-items: center;
    }

    /* Page titles smaller on mobile */
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    /* Cards reduced padding on mobile */
    .cp-card {
        padding: 0.75rem;
    }

    /* Hide decorative elements on mobile to save space */
    .desktop-only {
        display: none !important;
    }
}

/* Show elements only on mobile */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
}

/* Prevent horizontal overflow on mobile */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
}


/* ================================================================
   ORDER STATUS TIMELINE — reusable 6-step horizontal timeline.
   Used by OrderStatusTimeline.razor (OrderDetailModal, OrderConfirmation).
   ================================================================ */

.oc-status-timeline {
    padding: 0.5rem 0;
}

.oc-tl {
    display: flex;
    align-items: flex-start;
    position: relative;
}

/* Connecting line behind the markers */
.oc-tl::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}

.oc-tl-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    position: relative;
    z-index: 1;
}

.oc-tl-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e2e8f0;
    border: 2px solid white;
    box-shadow: 0 0 0 1px #e2e8f0;
}

.oc-tl-step.completed .oc-tl-marker {
    background: #22c55e;
    box-shadow: 0 0 0 1px #22c55e;
}

.oc-tl-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
}

.oc-tl-time {
    font-size: 0.72rem;
    color: #1e293b;
    font-weight: 600;
    text-align: center;
}

.oc-tl-step:not(.completed) .oc-tl-time {
    color: #cbd5e1;
}

@media (max-width: 768px) {
    .oc-tl-label, .oc-tl-time {
        font-size: 0.65rem;
    }

    .oc-tl-marker {
        width: 16px;
        height: 16px;
    }

    .oc-tl::before {
        top: 7px;
    }
}

/* ================================================================
   SHARED PAGE HEADER — consistent bar across all content pages.
   Structure: .page-header > .page-header-left + .page-header-right
   .page-header-left: title + breadcrumb (page-specific)
   .page-header-right: GlobalHeaderActions (chat, bell, account)
   Page-specific actions go in .page-action-bar below the header.
   ================================================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.3rem 1.25rem;
}

.page-body {
    padding: 0.75rem 1.25rem;
}

.page-header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.page-header h1 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pc-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
}


/* Sub-line below title — hidden; reserved for future use */
.page-header-sub {
    display: none;
}

/* Record count pill — inline with title */
.page-header .record-count {
    font-size: 0.7rem;
    font-weight: 400;
    color: #718096;
    background: #edf2f7;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    white-space: nowrap;
}

/* Inline action buttons inside page header (e.g., Place Order's Recent/Templates).
   On desktop these sit in the header row between title and GlobalHeaderActions. */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding-right: 0.5rem;
}


/* ================================================================
   PAGE ACTION BAR — page-specific tools below the header.
   Search, refresh, Add/New buttons, etc. Only shown when needed.
   ================================================================ */
.page-action-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.25rem;
    background: #fafbfc;
    border-bottom: 1px solid var(--pc-border-light, #f1f5f9);
}

/* Standard action bar buttons — compact, consistent sizing */
.page-action-bar .btn {
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    border: 1px solid var(--pc-border, #e2e8f0);
    background: white;
    color: var(--pc-text, #2d3748);
}

.page-action-bar .btn:hover {
    border-color: var(--pc-accent, #2b6cb0);
    color: var(--pc-accent, #2b6cb0);
}

.page-action-bar .btn-primary {
    background-color: var(--pc-primary);
    color: white;
    border-color: var(--pc-primary);
}

.page-action-bar .btn-primary:hover:not(:disabled) {
    background-color: var(--pc-primary-light);
    border-color: var(--pc-primary-light);
}

.page-action-bar .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Inline search box in action bar */
.page-action-bar .toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
}

.page-action-bar .toolbar-search .form-control {
    padding: 0.3rem 0.6rem 0.3rem 1.8rem;
    font-size: 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    width: 180px;
}

.page-action-bar .toolbar-search .search-icon {
    position: absolute;
    left: 0.6rem;
    color: #a0aec0;
    font-size: 0.75rem;
    pointer-events: none;
}

/* Refresh button in action bar */
.page-action-bar .btn-refresh {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    color: #718096;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.page-action-bar .btn-refresh:hover:not(:disabled) {
    background: #f7fafc;
    border-color: #3182ce;
    color: #3182ce;
}

.page-action-bar .btn-refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-action-bar .btn-refresh i {
    font-size: 1rem;
}

.page-action-bar .btn-refresh i.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   SHARED TABLE STYLES (pc-table)
   Consistent look for all data tables across the portal:
   AddressBook, OrderTemplates, OrderTracking, Billing, Dashboard.
   Use .pc-table-container > .pc-table for the standard pattern.
   ================================================================ */

/* Container: white card with border, rounded corners, horizontal scroll on overflow.
   overflow-y: visible allows context menu dropdowns to escape the container bounds. */
.pc-table-container {
    background: white;
    border-radius: 8px;
    border: 1px solid #ddd;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* Shared table toolbar — compact bar above the table for search, counts, actions.
   Matches any toolbar class pattern used across pages. */
.ab-table-toolbar,
.olc-toolbar,
.table-wrapper .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0.75rem;
    background: white;
    gap: 0.5rem;
    font-size: 0.78rem;
}

/* Shared compact search input inside table areas.
   Only set height and font — leave padding to component-scoped CSS
   since search inputs with icons need custom left/right padding. */
.pc-table-container input[type="text"],
.pc-table-container .form-control,
.olc-toolbar input[type="text"],
.olc-toolbar .form-control {
    height: 30px;
    font-size: 0.78rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

/* Other form-row companions inside a pc-table-container — input-group
   addons, side buttons, dropdowns, and the QuickGrid Paginator. They
   should all match the 30px / 0.78rem search-box scale instead of
   towering over it at Bootstrap default sizes. */
.pc-table-container .form-select {
    height: 30px;
    font-size: 0.78rem;
    padding: 0.15rem 1.75rem 0.15rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.pc-table-container .input-group-text {
    height: 30px;
    font-size: 0.78rem;
    padding: 0 0.5rem;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.pc-table-container .input-group .btn,
.pc-table-container .btn-sm {
    height: 30px;
    font-size: 0.78rem;
    padding: 0 0.5rem;
    line-height: 1;
}

/* Compact label inside checkbox addons (e.g. "Exact" toggle). */
.pc-table-container .input-group-text .form-check-label {
    font-size: 0.75rem;
}

/* QuickGrid Paginator nav — the prev/next/page buttons sit below the
   table and inherit Bootstrap btn padding by default which makes them
   noticeably bulky next to the compact table. */
.pc-table-container nav.paginator,
.pc-table-container .paginator,
.pc-table-container nav.paginator button,
.pc-table-container .paginator button,
.pc-table-container nav.paginator .col-form-label,
.pc-table-container .paginator .col-form-label {
    font-size: 0.78rem;
}

.pc-table-container nav.paginator button,
.pc-table-container .paginator button {
    padding: 0.15rem 0.5rem;
    min-height: 24px;
    line-height: 1;
}


/* Table base */
.pc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

/* Header cells — !important wins over Bootstrap .table / .table-light defaults */
.pc-table th {
    background-color: #edf2f7 !important;
    text-align: left;
    padding: 0.25rem 0.5rem !important;
    font-weight: 600;
    color: #0f172a !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    user-select: none;
    border-bottom: 1px solid #cbd5e0 !important;
}

/* Body cells — !important wins over Bootstrap .table defaults */
.pc-table td {
    padding: 0.35rem 0.5rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: middle;
    font-size: 0.82rem !important;
    color: #475569;
    white-space: nowrap;
}

/* Hover effect on body rows */
.pc-table tbody tr:hover {
    background-color: #f8fafc;
}

/* Selected row highlight */
.pc-table tbody tr.selected {
    background: #ebf8ff;
}

/* Clickable rows */
.pc-table tbody tr.clickable-row {
    cursor: pointer;
}

/* Primary identifier column (order #, name, etc.) */
.pc-table .pc-col-primary {
    font-weight: 600;
    color: var(--pc-primary, #1a365d);
}

/* Truncated text columns */
.pc-table .pc-col-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Right-aligned columns (prices, totals) */
.pc-table .text-end {
    text-align: right;
}

/* Responsive: tighter padding on small screens */
@media (max-width: 768px) {
    .pc-table th {
        padding: 0.5rem 0.35rem;
        font-size: 0.65rem;
    }

    .pc-table td {
        padding: 0.5rem 0.35rem;
        font-size: 0.8rem;
    }
}

/* QuickGrid adds .table class automatically — compound selector overrides
   Bootstrap's .table padding for tables that also carry our .pc-table class.
   This lets all admin QuickGrid pages share one style definition. */
.table.pc-table {
    margin-bottom: 0;
}

.table.pc-table > thead > tr > th {
    background-color: #edf2f7 !important;
    color: #0f172a !important;
    font-size: 0.7rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem !important;
    white-space: nowrap;
    border-bottom: 1px solid #cbd5e0 !important;
}

.table.pc-table > tbody > tr > td {
    padding: 0.35rem 0.5rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: middle;
    font-size: 0.82rem !important;
    color: #475569;
    white-space: nowrap;
}

.table.pc-table > tbody > tr:hover > * {
    background-color: #f8fafc !important;
    --bs-table-bg-state: #f8fafc;
}

/* ================================================================
   GLOBAL HEADER ACTIONS (gh-*) — right side of every page header.
   Chat button, notification bell, account pill.
   Rendered by Shared/GlobalHeaderActions.razor component.
   ================================================================ */
.gh-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.1rem;
    /* Anchor for the absolutely-positioned .gh-announce-panel popup. Without
       a positioned ancestor the panel falls back to the initial containing
       block and lands off-screen below page content. */
    position: relative;
}

/* Icon buttons (chat, bell) and base for gh-btn-text variant. */
.gh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--pc-border, #e2e8f0);
    border-radius: 6px;
    color: #718096;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.gh-btn:hover {
    background: #f7fafc;
    border-color: #3182ce;
    color: #3182ce;
}

/* Text variant of gh-btn — same style but auto-width with label text. */
.gh-btn.gh-btn-text {
    width: auto;
    padding: 0 0.6rem;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
}

/* Dashboard traffic dot indicator */
.db-traffic-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.db-traffic-light { background: #48bb78; }
.db-traffic-moderate { background: #f6ad55; }
.db-traffic-heavy { background: #fc8181; }

.gh-btn i {
    font-size: 1rem;
}

/* Bell notification badge */
.gh-bell-wrap {
    position: relative;
}

.gh-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e53e3e;
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid white;
}

/* Account pill — hidden while evaluating mobile card as primary control.
   Desktop context switching handled by sidebar CustomerContextSelector. */
.gh-acct-wrap {
    position: relative;
    display: none;
}

.gh-account-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--pc-surface-elevated, #fff);
    border: 1px solid var(--pc-border, #e2e8f0);
    padding: 0.4rem 0.75rem;
    border-radius: var(--pc-radius-sm, 8px);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--pc-text, #2d3748);
    cursor: pointer;
    transition: border-color 0.15s;
    font-family: inherit;
}

.gh-account-pill:hover {
    border-color: var(--pc-accent, #2b6cb0);
}

.gh-acct-wrap.gh-acct-open .gh-account-pill {
    border-color: var(--pc-border, #e2e8f0);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.gh-acct-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pc-success, #48bb78);
}

.gh-acct-chevron {
    font-size: 0.55rem;
    color: var(--pc-text-muted, #718096);
    margin-left: 0.15rem;
    transition: transform 0.15s ease;
}

.gh-acct-open .gh-acct-chevron {
    transform: rotate(180deg);
}

.gh-acct-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* On mobile the backdrop must sit above page content but below the fixed bar + sheet */
.gh-mobile-card-wrap .gh-acct-backdrop {
    z-index: 1008;
}

.gh-acct-menu {
    position: absolute;
    top: 100%;
    right: -1px;
    min-width: 280px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--pc-surface, #f8fafc);
    border: 1px solid var(--pc-border, #e2e8f0);
    border-radius: 0 0 var(--pc-radius-sm, 8px) var(--pc-radius-sm, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
}

/* ── Account pill: dot color when switched away from primary ── */
.gh-acct-dot-switched {
    background: #f59e0b;
}

/* ── Context Switcher Sections ── */
.gh-ctx-section {
    padding: 0.5rem 0;
}

.gh-ctx-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pc-text-muted, #64748b);
}

.gh-ctx-label i {
    font-size: 0.72rem;
}

/* Inset card grouping for context options (used by "Viewing Data For" toggles) */
.gh-ctx-group {
    margin: 0.15rem 0.55rem 0.35rem;
    background: var(--pc-surface-elevated, #fff);
    border: 1px solid var(--pc-border, #e2e8f0);
    border-radius: 6px;
    overflow: hidden;
}

/* ── Ordering As: select-trigger + dropdown (mirrors flyout pattern) ── */
.gh-ctx-select-wrap {
    position: relative;
    padding: 0 0.55rem 0.25rem;
}

.gh-ctx-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    background: var(--pc-surface-elevated, #fff);
    border: 1px solid var(--pc-border, #e2e8f0);
    border-radius: 6px;
    color: var(--pc-text, #1e293b);
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s;
}

.gh-ctx-select-trigger:hover:not(:disabled) {
    border-color: var(--pc-accent, #2b6cb0);
}

.gh-ctx-select-trigger:disabled {
    opacity: 0.6;
    cursor: default;
}

.gh-ctx-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-ctx-select-id {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: var(--pc-text-muted, #64748b);
}

.gh-ctx-select-chevron {
    flex-shrink: 0;
    font-size: 0.55rem;
    color: var(--pc-text-muted, #64748b);
    transition: transform 0.2s ease;
}

.gh-ctx-chevron-flip {
    transform: rotate(180deg);
}

/* Dropdown options list */
.gh-ctx-select-dropdown {
    position: absolute;
    top: calc(100% - 0.15rem);
    left: 0.55rem;
    right: 0.55rem;
    z-index: 10;
    background: var(--pc-surface-elevated, #fff);
    border: 1px solid var(--pc-border, #e2e8f0);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 180px;
    overflow-y: auto;
}

.gh-ctx-select-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--pc-border-light, #f1f5f9);
    color: var(--pc-text, #1e293b);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.gh-ctx-select-option:last-child {
    border-bottom: none;
}

.gh-ctx-select-option:hover:not(:disabled) {
    background: var(--pc-accent-glow, rgba(43, 108, 176, 0.06));
}

.gh-ctx-select-option:disabled {
    cursor: default;
}

.gh-ctx-select-option-active {
    background: var(--pc-accent-glow, rgba(43, 108, 176, 0.06));
    color: var(--pc-accent, #2b6cb0);
    font-weight: 600;
}

.gh-ctx-select-option-active:hover:not(:disabled) {
    background: var(--pc-accent-glow, rgba(43, 108, 176, 0.06));
}

.gh-ctx-check {
    flex-shrink: 0;
    color: var(--pc-accent, #2b6cb0);
    font-size: 0.85rem;
}

.gh-ctx-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-ctx-id {
    font-size: 0.68rem;
    color: var(--pc-text-muted, #64748b);
    flex-shrink: 0;
}

/* ── Viewing Data For: toggle switches ── */
.gh-ctx-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--pc-border-light, #f1f5f9);
    font-size: 0.8rem;
    color: var(--pc-text, #1e293b);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.1s;
}

.gh-ctx-toggle:last-child {
    border-bottom: none;
}

.gh-ctx-toggle:hover {
    background: rgba(0, 0, 0, 0.02);
}

.gh-ctx-track {
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: #cbd5e0;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
}

.gh-ctx-toggle-on .gh-ctx-track {
    background: #48bb78;
}

.gh-ctx-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.gh-ctx-toggle-on .gh-ctx-thumb {
    transform: translateX(14px);
}

/* ── Switching overlay ── */
.gh-ctx-switching {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    font-size: 0.8rem;
    color: var(--pc-text-muted, #64748b);
}

/* ── Navigation links ── */
.gh-acct-nav {
    padding: 0.35rem 0;
    border-top: 1px solid var(--pc-border, #e2e8f0);
}

.gh-acct-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
    color: var(--pc-text, #1e293b);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

.gh-acct-menu-item:hover {
    background: var(--pc-accent-glow, rgba(43, 108, 176, 0.06));
    color: var(--pc-accent, #2b6cb0);
    text-decoration: none;
}

/* Icon circle for nav items — gives visual weight without clutter */
.gh-acct-menu-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--pc-border-light, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.1s;
}

.gh-acct-menu-icon i {
    font-size: 0.78rem;
    color: var(--pc-text-muted, #64748b);
    transition: color 0.1s;
}

.gh-acct-menu-item:hover .gh-acct-menu-icon {
    background: rgba(43, 108, 176, 0.1);
}

.gh-acct-menu-item:hover .gh-acct-menu-icon i {
    color: var(--pc-accent, #2b6cb0);
}

/* ── Sign out — separated and distinct ── */
.gh-acct-signout {
    padding: 0.35rem 0.55rem 0.55rem;
    border-top: 1px solid var(--pc-border, #e2e8f0);
}

.gh-acct-signout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    color: #dc2626;
    background: none;
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.gh-acct-signout-btn:hover {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.35);
}

/* ── Announcement Popover Panel ── */
.gh-announce-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.gh-announce-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: var(--pc-surface-elevated, #fff);
    border: 1px solid var(--pc-border, #e2e8f0);
    border-radius: var(--pc-radius, 12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
}

.gh-announce-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--pc-border-light, #f1f5f9);
}

.gh-announce-panel-header h4 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pc-primary);
}

.gh-announce-close {
    background: none;
    border: none;
    color: var(--pc-text-muted, #718096);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.2rem;
    border-radius: 4px;
}

.gh-announce-close:hover {
    color: var(--pc-text, #2d3748);
    background: var(--pc-border-light, #f1f5f9);
}

.gh-announce-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    color: var(--pc-text-muted, #718096);
}

.gh-announce-empty i {
    font-size: 1.5rem;
    opacity: 0.3;
    margin-bottom: 0.5rem;
}

.gh-announce-empty p {
    font-size: 0.78rem;
    margin: 0;
    opacity: 0.6;
}

.gh-announce-list {
    max-height: 320px;
    overflow-y: auto;
}

.gh-announce-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--pc-border-light, #f1f5f9);
}

.gh-announce-item:last-child {
    border-bottom: none;
}

.gh-announce-row {
    display: flex;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    align-items: flex-start;
    cursor: pointer;
    transition: background-color 0.12s;
}

.gh-announce-row:hover {
    background: var(--pc-border-light, #f1f5f9);
}

.gh-announce-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
}

.gh-announce-info .gh-announce-icon { color: #3182ce; }
.gh-announce-warning .gh-announce-icon { color: #dd6b20; }
.gh-announce-danger .gh-announce-icon { color: #e53e3e; }

.gh-announce-body {
    flex: 1;
    min-width: 0;
}

.gh-announce-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pc-text, #2d3748);
    line-height: 1.3;
}

.gh-announce-slot {
    font-size: 0.7rem;
    color: var(--pc-text-muted, #718096);
    margin-top: 0.15rem;
}

.gh-announce-chevron {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--pc-text-muted, #718096);
    margin-top: 2px;
}

.gh-announce-detail {
    padding: 0 1rem 0.75rem 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--pc-text, #2d3748);
    border-top: 1px dashed var(--pc-border-light, #f1f5f9);
    margin: 0 0.5rem;
    padding-top: 0.6rem;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
}

.gh-announce-detail img { max-width: 100%; height: auto; }

.gh-announce-preview {
    font-size: 0.8rem;
    color: var(--pc-text-muted, #718096);
    margin: 0 0 0.5rem;
    line-height: 1.45;
}

.gh-announce-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pc-accent, #2b6cb0);
    background: none;
    border: 1px solid var(--pc-accent, #2b6cb0);
    border-radius: 0.3rem;
    padding: 0.3rem 0.65rem;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

.gh-announce-view-btn:hover {
    background: var(--pc-accent, #2b6cb0);
    color: white;
}

/* Announcement detail modal — markup + styles live in <AnnouncementModalView />.
   The bell popup invokes that shared component instead of duplicating the modal. */

/* Inline action row inside an expanded popup item — choices, "Got it",
   dismiss. Sits below the announcement body. Severity inheritance comes
   from the parent .gh-announce-@severity wrapper. */
.gh-announce-detail-body { margin-bottom: 0.5rem; }

.gh-announce-detail-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
}

.gh-announce-detail-choice-btn,
.gh-announce-detail-ack-btn,
.gh-announce-detail-dismiss-btn {
    padding: 0.3rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 0.25rem;
    background: transparent;
    color: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s, background-color 0.15s;
    white-space: nowrap;
}

.gh-announce-detail-choice-btn:hover,
.gh-announce-detail-ack-btn:hover,
.gh-announce-detail-dismiss-btn:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.08);
}

.gh-announce-detail-dismiss-link {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: inherit;
    opacity: 0.65;
    text-decoration: underline;
    padding: 0.15rem 0.25rem;
    transition: opacity 0.15s;
}
.gh-announce-detail-dismiss-link:hover { opacity: 1; }

/* ── Responsive visibility helpers for GlobalHeaderActions ── */
.gh-mobile-only { display: none; }

@media (min-width: 769px) {
    .gh-mobile-only { display: none !important; }
}

@media (max-width: 768px) {
    .gh-desktop-only { display: none !important; }
    .gh-mobile-only { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE: Dark card trigger (matches sidebar CustomerContextSelector)
   ═══════════════════════════════════════════════════════════════ */
.gh-mobile-card-wrap {
    width: 100%;
    position: relative;
}

.gh-mobile-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.55rem;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
    color: white;
    text-align: left;
}

.gh-mobile-card:hover {
    background: #253347;
    border-color: rgba(255, 255, 255, 0.14);
}

.gh-mobile-card-active {
    background: #253347;
    border-color: rgba(99, 179, 237, 0.3);
}

/* Avatar — gradient initials square */
.gh-mobile-avatar {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, #4299e1, #63b3ed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    color: #fff;
    flex-shrink: 0;
}

.gh-mobile-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gh-mobile-card-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.gh-mobile-card-context {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.gh-mobile-card-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}

.gh-mobile-card-chevron {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.gh-mobile-chevron-open {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.6);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SHEET — slides down from the card trigger, dark themed.
   Overrides the light-themed gh-ctx-* and gh-acct-* for dark bg.
   ═══════════════════════════════════════════════════════════════ */
.gh-mobile-sheet {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 1009;
    background: #1e293b;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    max-height: calc(100vh - 50px - 80px);
    overflow-y: auto;
    animation: gh-sheet-slide 0.2s ease-out;
}

@keyframes gh-sheet-slide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Dark overrides for context sections inside sheet ── */
.gh-mobile-sheet .gh-ctx-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gh-mobile-sheet .gh-ctx-label {
    color: rgba(255, 255, 255, 0.4);
}

.gh-mobile-sheet .gh-ctx-select-wrap {
    padding: 0 0.65rem 0.35rem;
}

.gh-mobile-sheet .gh-ctx-select-trigger {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: white;
}

.gh-mobile-sheet .gh-ctx-select-trigger:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.gh-mobile-sheet .gh-ctx-select-id {
    color: rgba(255, 255, 255, 0.4);
}

.gh-mobile-sheet .gh-ctx-select-chevron {
    color: rgba(255, 255, 255, 0.4);
}

.gh-mobile-sheet .gh-ctx-select-dropdown {
    background: #283244;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.gh-mobile-sheet .gh-ctx-select-option {
    color: rgba(255, 255, 255, 0.8);
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.gh-mobile-sheet .gh-ctx-select-option:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
}

.gh-mobile-sheet .gh-ctx-select-option-active {
    background: rgba(99, 179, 237, 0.12);
    color: #93c5fd;
}

.gh-mobile-sheet .gh-ctx-select-option-active:hover:not(:disabled) {
    background: rgba(99, 179, 237, 0.12);
}

.gh-mobile-sheet .gh-ctx-check {
    color: #63b3ed;
}

.gh-mobile-sheet .gh-ctx-name {
    color: inherit;
}

.gh-mobile-sheet .gh-ctx-id {
    color: rgba(255, 255, 255, 0.4);
}

/* Toggle overrides for dark theme */
.gh-mobile-sheet .gh-ctx-group {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.gh-mobile-sheet .gh-ctx-toggle {
    color: rgba(255, 255, 255, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.gh-mobile-sheet .gh-ctx-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}

.gh-mobile-sheet .gh-ctx-toggle-on {
    color: rgba(255, 255, 255, 0.9);
}

.gh-mobile-sheet .gh-ctx-track {
    background: rgba(255, 255, 255, 0.15);
}

/* Restore the green on-state inside the dark mobile sheet — without
   this rule the .gh-mobile-sheet .gh-ctx-track override above wins by
   cascade order and the toggles look identical whether selected or not.
   Higher specificity (0,3,0) beats the override (0,2,0). */
.gh-mobile-sheet .gh-ctx-toggle-on .gh-ctx-track {
    background: #22c55e;
}

.gh-mobile-sheet .gh-ctx-switching {
    color: rgba(255, 255, 255, 0.5);
}

/* ── Dark nav links ── */
.gh-mobile-sheet .gh-acct-nav {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.gh-mobile-sheet .gh-acct-menu-item {
    color: rgba(255, 255, 255, 0.75);
}

.gh-mobile-sheet .gh-acct-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #93c5fd;
}

.gh-mobile-sheet .gh-acct-menu-icon {
    background: rgba(255, 255, 255, 0.08);
}

.gh-mobile-sheet .gh-acct-menu-icon i {
    color: rgba(255, 255, 255, 0.5);
}

.gh-mobile-sheet .gh-acct-menu-item:hover .gh-acct-menu-icon {
    background: rgba(99, 179, 237, 0.15);
}

.gh-mobile-sheet .gh-acct-menu-item:hover .gh-acct-menu-icon i {
    color: #93c5fd;
}

/* ── Dark sign out ── */
.gh-mobile-sheet .gh-acct-signout {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.gh-mobile-sheet .gh-acct-signout-btn {
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.2);
}

.gh-mobile-sheet .gh-acct-signout-btn:hover {
    background: rgba(252, 165, 165, 0.1);
    border-color: rgba(252, 165, 165, 0.35);
}

/* ── Sheet extras: chat + announcements (mobile-only) ── */
.gh-sheet-extras {
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gh-sheet-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.85rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, color 0.1s;
}

.gh-sheet-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #93c5fd;
}

.gh-sheet-link-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gh-sheet-link-icon i {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.gh-sheet-link:hover .gh-sheet-link-icon {
    background: rgba(99, 179, 237, 0.15);
}

.gh-sheet-link:hover .gh-sheet-link-icon i {
    color: #93c5fd;
}

/* Inline badge for announcement count */
.gh-bell-badge-inline {
    background: #e53e3e;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    margin-left: auto;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Page header stays a row on mobile — just tighter padding */
    .page-header {
        padding: 0.5rem 0.75rem 0.3rem;
    }

    /* Modal headers: reduce padding on mobile since close buttons are 44px tall */
    .modal-header {
        padding: 0.25rem 0.75rem;
    }

    .page-action-bar {
        padding: 0.35rem 0.75rem;
        gap: 0.35rem;
        flex-wrap: wrap;
    }

    .page-body {
        padding: 0.5rem 0.75rem;
    }

    /* Fix context switcher to top of viewport on mobile —
       mirrors the bottom nav fixed to the bottom. Background extends
       edge-to-edge; padding keeps the card inset from edges. */
    .gh-actions {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1010;
        background: #1e293b;
        padding: 0.25rem 0.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    .gh-announce-panel {
        width: min(340px, calc(100vw - 2rem));
        right: -0.5rem;
    }
}