/* ================================================================
   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: 1rem;
}

.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.7rem) 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;
}

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

.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;
}

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

/* Selected Property Badges - font matches unselected pills */
.property-tag-selector .property-pill-selected {
    background-color: #ddd;
    border: 1px solid #ccc;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 400;
}

.property-tag-selector .property-pill-selected .fa-circle-xmark {
    color: #d48a8a; /* Muted/washed out red */
    opacity: 0.8;
}

.property-tag-selector .property-pill-selected:hover .fa-circle-xmark {
    opacity: 1;
}

.property-tag-selector .property-pill-selected .btn-close {
    padding: 0;
    margin: 0;
    opacity: 0.8;
}

.property-tag-selector .property-pill-selected .btn-close:hover {
    opacity: 1;
}

/* 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 - styled like a select arrow */
.property-tag-selector .property-empty-state .property-pill-unselected-dd,
.property-tag-selector .selected-properties .property-pill-unselected-dd {
    background-color: transparent;
    border: none;
    padding: 0;
    color: #64748b;
    flex-shrink: 0;
}

.property-tag-selector .property-empty-state:hover .property-pill-unselected-dd,
.property-tag-selector .selected-properties:hover .property-pill-unselected-dd {
    color: #3182ce;
}

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


/* Unselected Property Pills - outlined style matching selected pills */
.property-tag-selector .property-pill-unselected-dd {
    background-color: transparent;
    border: 1px solid #cccccc;
    color: #495057;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.property-tag-selector .property-pill-unselected-dd:hover {
    background-color: #e9ecef;
    border-color: #0d6efd;
    color: #0d6efd;
    transform: translateY(-1px);
}

.property-tag-selector .property-pill-unselected {
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.3rem 0.5rem;
    background-color: transparent;
    border: 1px solid #cccccc;
    color: #495057;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.property-tag-selector .property-pill-unselected:hover {
    background-color: #e9ecef;
    border-color: #0d6efd;
    color: #0d6efd;
    transform: translateY(-1px);
}

.property-tag-selector .property-pill-unselected.property-pill-custom {
    border-color: #0d6efd;
    color: #0d6efd;
}

.property-tag-selector .property-pill-unselected.property-pill-custom:hover {
    background-color: #0d6efd;
    color: white;
}

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

.property-tag-selector .modal-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

.property-tag-selector .modal-body {
    padding: 1rem;
}

.property-tag-selector .modal-footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid #dee2e6;
}

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

/* 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 */
.gh-ann-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.gh-ann-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 90vw);
    max-height: 80vh;
    background: white;
    border-radius: var(--pc-radius, 12px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gh-ann-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pc-border, #e2e8f0);
}

.gh-ann-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pc-primary);
}

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

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

.gh-ann-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.6;
}

.gh-ann-modal-body img { max-width: 100%; height: auto; }

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