/* TG-10 (TC-B-18): Change wizard action buttons from black to theme orange */
.wizard-btn,
.wizard-btn.text-white.bg-dark,
button.wizard-btn {
    background-color: #FF8E20 !important;
    border-color: #FF8E20 !important;
    color: #fff !important;
    border-radius: 0 !important;
    border: 0 !important;
}
.wizard-btn:hover {
    background-color: #d97500 !important;
    border-color: #d97500 !important;
}

/* File upload buttons with btn-dark inside TG forms */
button.btn-dark,
label.btn-dark,
.btn-dark.cursor-pointer {
    background-color: #FF8E20 !important;
    border-color: #FF8E20 !important;
    color: #fff !important;
}
button.btn-dark:hover,
label.btn-dark:hover {
    background-color: #d97500 !important;
}

/* TG-10 (TC-B-18): Also target bg-dark buttons used in Manage view and wizard */
.wizard-btn.bg-dark,
button.bg-dark,
a.bg-dark,
.bg-dark.cursor-pointer {
    background-color: #FF8E20 !important;
    border-color: #FF8E20 !important;
    color: #fff !important;
}
.wizard-btn.bg-dark:hover,
button.bg-dark:hover,
a.bg-dark:hover,
.bg-dark.cursor-pointer:hover {
    background-color: #d97500 !important;
}

/* === Quick Wins UI/UX (22 Sep 2026) === */

/* Item 3: Readonly / locked fields - gray background + muted text */
input[readonly],
input[readonly]:focus,
input[disabled],
textarea[readonly],
textarea[readonly]:focus {
    background-color: #f5f5f5 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    border-color: #dee2e6 !important;
}

/* Item 5: Completed wizard steps - filled orange circle with white checkmark */
.vue-form-wizard .wizard-icon-circle.checked {
    background-color: #FF8E20 !important;
    border-color: #FF8E20 !important;
}
.vue-form-wizard .wizard-icon-circle.checked .wizard-icon {
    color: #fff !important;
    font-style: normal !important;
}
.vue-form-wizard .wizard-icon-circle.checked .wizard-icon::before {
    content: '\2713' !important;
    font-style: normal !important;
}

/* Item 8: Section panel headers - white text preserved, subtle inner divider */
.panel-heading.bg-orange h4.panel-title.font-weight-bold {
    color: #fff !important;
}
.panel-heading.bg-orange {
    border-bottom: 2px solid rgba(255,255,255,0.25) !important;
}

/* === Quick Wins Items 1, 4, 6, 7 (22 Sep 2026) === */

/* Item 1: Form subtitle under the page title */
h3.font-bold.text-3xl.mb-1::after {
    content: 'Required fields are marked with \002A';
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: #9ca3af;
    margin-top: 4px;
    letter-spacing: 0;
}

/* Item 4: "Add another..." buttons - dashed outline, not solid */
.wizard-btn:has(.fa-plus) {
    background: transparent !important;
    color: #FF8E20 !important;
    border: 2px dashed #FF8E20 !important;
}
.wizard-btn:has(.fa-plus):hover {
    background: #fff7f3 !important;
}

/* Item 6: Sub-section address group dividers */
label[for="residential_address_1"]::before {
    content: 'RESIDENTIAL ADDRESS';
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    width: 100%;
}
label[for="business_address_2"]::before {
    content: 'BUSINESS ADDRESS';
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    width: 100%;
}

/* Item 7: "(auto - locked)" annotation on auto-populated readonly field labels */
label[for="badge_name"]::after {
    content: '  \2014  auto-locked';
    font-size: 0.78em;
    color: #9ca3af;
    font-weight: 400;
    font-style: italic;
}
label[for="valid_to"]::after {
    content: '  \2014  auto-locked';
    font-size: 0.78em;
    color: #9ca3af;
    font-weight: 400;
    font-style: italic;
}

/* Item 4 fix: higher specificity to override .wizard-btn.bg-dark for Add buttons */
button.wizard-btn.bg-dark:has(.fa-plus),
button.wizard-btn.text-white.bg-dark:has(.fa-plus) {
    background: transparent !important;
    background-color: transparent !important;
    color: #FF8E20 !important;
    border: 2px dashed #FF8E20 !important;
}
button.wizard-btn.bg-dark:has(.fa-plus):hover,
button.wizard-btn.text-white.bg-dark:has(.fa-plus):hover {
    background-color: #fff7f3 !important;
}

/* TG list row action badge links */
a.tg-action {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0 10px;
    border: 1.5px solid #FF8E20;
    color: #FF8E20 !important;
    text-decoration: none !important;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 30px;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s;
}
a.tg-action:hover {
    background-color: #FF8E20 !important;
    color: #fff !important;
}
a.tg-action-view { border-color: #FF8E20; color: #FF8E20 !important; }
a.tg-action-edit { border-color: #6c757d; color: #6c757d !important; }
a.tg-action-edit:hover { background-color: #6c757d !important; color: #fff !important; }
a.tg-action-verify { border-color: #6c757d; color: #6c757d !important; }
a.tg-action-verify:hover { background-color: #6c757d !important; color: #fff !important; }
a.tg-action-undelete { border-color: #6b7280; color: #6b7280 !important; }
a.tg-action-undelete:hover { background-color: #6b7280 !important; color: #fff !important; }
a.tg-action-renew { border-color: #6c757d; color: #6c757d !important; }
a.tg-action-renew:hover { background-color: #6c757d !important; color: #fff !important; }
a.tg-action-audit-trail { border-color: #6c757d; color: #6c757d !important; }
a.tg-action-audit-trail:hover { background-color: #6c757d !important; color: #fff !important; }

/* TG list: show Font Awesome icons (already in HTML), remove fixed width so text fits */
a.tg-action { width: auto; min-width: 70px; padding: 0 10px; }
a.tg-action i.fa { font-size: 13px; margin-left: 5px; }
/* TG-05/TG-07: Hide empty badge in Flag column (value is null for active guides) */
table td span[class*=badge-info]:empty { display: none \!important; }
table td span[class*=badge-info]:not(:empty) { display: inline-block; }


/* === CI Brand System: Navy #1F3964 + Orange #FF8E20 (07 Oct 2026) === */

/* Nova admin sidebar and header bar - override dark gray with CI navy */
.bg-90,
aside.bg-90,
nav.bg-90 {
    background-color: #FF8E20 !important;
    background-image: none !important;
}

/* TG custom view header bar (You are logged in as...) */
.bg-dark:not(.wizard-btn):not(button):not(label) {
    background-color: #545b62 !important;
}

/* Suspend button: CI navy to match other TG action buttons */
a[dusk='suspend-button'],
a[title='Manage Suspension'] {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}
a[dusk='suspend-button']:hover,
a[title='Manage Suspension']:hover {
    background-color: #545b62 !important;
    border-color: #545b62 !important;
}

/* TG list action buttons CI colours: View=navy, Verify=green, Audit Trail=orange */
a.tg-action-view { border-color: #6c757d !important; color: #6c757d !important; }
a.tg-action-view:hover { background-color: #6c757d !important; color: #fff !important; }
a.tg-action-verify { border-color: #6c757d !important; color: #6c757d !important; }
a.tg-action-verify:hover { background-color: #6c757d !important; color: #fff !important; }
a.tg-action-audit-trail { border-color: #FF8E20 !important; color: #FF8E20 !important; }
a.tg-action-audit-trail:hover { background-color: #FF8E20 !important; color: #fff !important; }

/* View Dashboard + Capture New Record header buttons: CI navy */
.btn-default.btn-primary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}
.btn-default.btn-primary:hover {
    background-color: #545b62 !important;
    border-color: #545b62 !important;
}

/* CI Navy: Admin navbar (dark-grey-background class) */
.dark-grey-background,
.navbar.dark-grey-background {
    background-color: #545b62 !important;
}

/* ============================================================
   TG GRID: Screen 1 UI updates (07 Oct 2026)
   Checklist items 1-27
   ============================================================ */

/* Item 3: "Capture a New Record" header button - solid orange */
a.btn[href*="/tourist-guides/create"] {
    background-color: #FF8E20 !important;
    border-color: #FF8E20 !important;
    color: #fff !important;
}
a.btn[href*="/tourist-guides/create"]:hover {
    background-color: #d97500 !important;
    border-color: #d97500 !important;
}

/* "View Dashboard" button - outline navy (differentiates from primary action) */
a.btn[href*="/tourist-guides/dashboard"] {
    background-color: transparent !important;
    border: 2px solid #6c757d !important;
    color: #6c757d !important;
}
a.btn[href*="/tourist-guides/dashboard"]:hover {
    background-color: #6c757d !important;
    color: #fff !important;
}

/* Items 15-22: Badge colours by specific class added by JS */
/* Valid - bright green solid */
.tg-badge-valid {
    background-color: #48BB78 !important;
    color: #fff !important;
}
/* Expired - red solid */
.tg-badge-expired {
    background-color: #FC8181 !important;
    color: #fff !important;
}
/* Suspended - orange solid */
.tg-badge-suspended {
    background-color: #FF8E20 !important;
    color: #fff !important;
}
/* Verified - green solid */
.tg-badge-verified {
    background-color: #48BB78 !important;
    color: #fff !important;
}
/* Not Verified - green (matches Verified per client requirement) */
.tg-badge-not-verified {
    background-color: #28a745 !important;
    color: #ffffff !important;
}
/* Capturing Incomplete - light salmon, orange text */
.tg-badge-capturing-incomplete {
    background-color: #FED7AA !important;
    color: #C05621 !important;
}
/* Published YES - teal/green */
.tg-badge-yes {
    background-color: #9AE6B4 !important;
    color: #276749 !important;
}
/* Published NO - light grey, subtle */
.tg-badge-no {
    background-color: #EDF2F7 !important;
    color: #718096 !important;
    border: 1px solid #CBD5E0 !important;
}
/* tg-badge-archived defined in canonical TG BADGE CI COLOURS block below */

/* Item 22: warning badge override (Not Verified / Suspended) */
.bg-warning-light { background-color: #FED7AA !important; }
.text-warning-dark { color: #C05621 !important; }

/* Item 23: Selected row - orange left border */
table tbody tr.selected,
table tbody tr[class*="selected"] {
    background-color: #FFF7ED !important;
}

/* Item 27: Pagination active page - orange */
.pagination .page-item.active .page-link,
[class*="pagination"] button.active,
[class*="pagination"] span[class*="active"] {
    background-color: #FF8E20 !important;
    border-color: #FF8E20 !important;
    color: #fff !important;
}

/* Column header colour: dark instead of teal */
table th span,
table thead th {
    color: #212529 !important;
}

/* Reg No column - bold text */
table tbody tr td:nth-child(2) {
    font-weight: 700;
    color: #212529;
}

/* ── Complaint view: Download buttons (08 Oct 2026) ── */
a.download-icon,
a.download-icon.btn,
a.download-icon.btn-primary,
a.download-icon.btn-sm {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
}
a.download-icon:hover,
a.download-icon:focus {
  background-color: #FF8E20 !important;
  border-color: #FF8E20 !important;
  color: #ffffff !important;
}
a.btn.btn-sm.btn-success[href*='signed_letter'] {
  background-color: #FF8E20 !important;
  border-color: #1F3964 !important;
  color: #ffffff !important;
}
a.btn.btn-sm.btn-success[href*='signed_letter']:hover {
  background-color: #FF8E20 !important;
  border-color: #FF8E20 !important;
}

/* ================================================================
   COMPLAINTS MODULE - Full CI Brand Fix (08 Oct 2026)
   Overrides Bootstrap light-colour badges, green/teal buttons,
   and old-orange (#f17c3a) modal headers in manage-complaints.
   ================================================================ */

/* 1. Status pill badges in complaints list (complaints-index.blade.php)
      Inline blade styles use !important-equivalent priority, so we
      must also use !important to win. */
.st-badge {
  display: inline-block !important;
  padding: 3px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
.st-submitted {
  background: #6c757d !important;
  color: #fff !important;
}
.st-inprogress {
  background: #FF8E20 !important;
  color: #fff !important;
}
.st-resolved {
  background: #6c757d !important;
  color: #fff !important;
}
.st-rejected {
  background: #dc3545 !important;
  color: #fff !important;
}
.st-referred {
  background: #6c757d !important;
  color: #fff !important;
}
.st-dispatched {
  background: #6c757d !important;
  color: #fff !important;
}
.st-awaiting,
.st-badge.st-default {
  background: #6c757d !important;
  color: #fff !important;
}

/* 2. Bootstrap badge overrides used in view-complaints.blade.php
      Admin status badges on the view/detail page */
.badge.badge-primary {
  background-color: #FF8E20 !important;
  color: #fff !important;
}
.badge.badge-info {
  background-color: #6c757d !important;
  color: #fff !important;
}
.badge.badge-secondary {
  background-color: #6c757d !important;
  color: #fff !important;
}
.badge.badge-dark {
  background-color: #FF8E20 !important;
  color: #fff !important;
}
.badge.badge-warning {
  background-color: #fd7e14 !important;
  color: #fff !important;
}
/* badge-success -> CI orange (deadline remaining, fulfilled notices) */
.badge.badge-success, span.badge.badge-success, .badge-success { background-color: #FF8E20 !important; color: #fff !important; border-color: #FF8E20 !important; }

/* 3. Manage form: Save Changes button (inline .save-button is green #28a745) */
button.save-button,
.save-button[type=submit],
#saveButton {
  background-color: #FF8E20 !important;
  border-color: #FF8E20 !important;
  color: #fff !important;
}
button.save-button:hover,
#saveButton:hover {
  background-color: #d97500 !important;
  border-color: #d97500 !important;
}

/* 4. Manage form: Save Letter Draft button (btn-info teal) */
button.btn.btn-info,
input.btn.btn-info,
a.btn.btn-info {
  background-color: #FF8E20 !important;
  border-color: #FF8E20 !important;
  color: #fff !important;
}
button.btn.btn-info:hover,
a.btn.btn-info:hover {
  background-color: #FF8E20 !important;
  border-color: #FF8E20 !important;
}

/* 5. Manage form: btn-primary inside modals and inline forms */
.modal-footer button.btn-primary,
.modal-body button.btn-primary,
form button.btn-primary:not(.wizard-btn) {
  background-color: #FF8E20 !important;
  border-color: #1F3964 !important;
  color: #fff !important;
}
.modal-footer button.btn-primary:hover,
form button.btn-primary:hover {
  background-color: #FF8E20 !important;
  border-color: #FF8E20 !important;
}

/* 6. Manage form: modal header (old orange #f17c3a inline style) */
.modal-header {
  background-color: #FF8E20 !important;
  color: #fff !important;
  border-bottom: none !important;
}
.modal-header .close,
.modal-header button.close {
  color: #fff !important;
  opacity: 0.8 !important;
}
.modal-header h2, .modal-header h3 {
  color: #fff !important;
}

/* assignment-form: border-left removed per design */

/* 8. btn-sm btn-primary used in various complaint forms */
a.btn.btn-sm.btn-primary:not(.download-icon),
button.btn.btn-sm.btn-primary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}
a.btn.btn-sm.btn-primary:hover,
button.btn.btn-sm.btn-primary:hover {
  background-color: #FF8E20 !important;
  border-color: #FF8E20 !important;
}

/* ── TG Module: btn-secondary old-orange fix (08 Oct 2026) ── */
/* main.css sets .btn-secondary to #f17c3a (old orange).
   Standardise to CI orange #FF8E20 across all admin pages.
   Covers: Back to Tourist Guides link on search screen,
           Choose photo button on all wizard steps. */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
  background-color: #FF8E20 !important;
  border-color: #FF8E20 !important;
  color: #ffffff !important;
}
.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
  background-color: #d97500 !important;
  border-color: #d97500 !important;
  color: #ffffff !important;
}
/* Back button on search screen uses btn-default too - keep navy to
   visually differentiate it as a secondary/back action */
a.btn-default.btn-secondary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
}
a.btn-default.btn-secondary:hover {
  background-color: #FF8E20 !important;
  border-color: #FF8E20 !important;
}

/* ================================================================
   Full system old-orange sweep (08 Oct 2026)
   All inline <style> blocks in blade files use #F17C3A.
   These !important rules override them from nova-custom.css.
   ================================================================ */

/* nova-admin layout: logged-in role label in top bar */
.nova-topbar-role {
  color: #FF8E20 !important;
}

/* Complaints list: active tab count pill */
.ci-tabs a.active .ci-tab-count {
  background: #FF8E20 !important;
}

/* Complaints list: Approval Queue button (ci-btn-orange) */
.ci-btn-orange,
a.ci-btn-orange {
  background: #FF8E20 !important;
  border-color: #FF8E20 !important;
  color: #fff !important;
}
.ci-btn-orange:hover,
a.ci-btn-orange:hover {
  background: #d97500 !important;
  border-color: #d97500 !important;
}

/* Complaints list: Manage action link (outline orange text) */
.act-btn.act-manage,
a.act-manage {
  border-color: #FF8E20 !important;
  color: #FF8E20 !important;
}
.act-btn.act-manage:hover,
a.act-manage:hover {
  background: #FF8E20 !important;
  color: #fff !important;
  border-color: #FF8E20 !important;
}

/* Complaint view/manage: header banner (complaint-header div) */
.complaint-header {
  background-color: #FF8E20;
  color: #fff !important;
}

/* Complaint view: action-btn-orange action buttons */
.action-btn-orange,
a.action-btn-orange,
button.action-btn-orange {
  background: #FF8E20 !important;
  color: #fff !important;
  border-color: #FF8E20 !important;
}
.action-btn-orange:hover,
a.action-btn-orange:hover {
  background: #d97500 !important;
  border-color: #d97500 !important;
}

/* Public layout: .orange-text helper class (login page browser notice) */
.orange-text {
  color: #FF8E20 !important;
}

/* ===== CI Fix: Complaint pages - bootstrap teal alert-info -> CI navy ===== */
.alert-info { background-color: #f8f9fa !important; border-color: #dee2e6 !important; color: #212529 !important; }
.alert-info a, .alert-info strong { color: #212529 !important; }
/* CI Fix: btn-success (View Signed Letter etc) -> CI orange */
a.btn-success, button.btn-success, .btn-success { background-color: #FF8E20 !important; border-color: #FF8E20 !important; color: #fff !important; }
/* CI Fix: teal border-left override removed */
/* CI Fix: complaint-section-title must be navy (belt-and-suspenders) */
.complaint-section-title { color: #212529 !important; }
/* CI Fix: complaint-data left border removed per design */

/* CI Fix: Bootstrap badge-info (teal) -> CI navy; badge-primary -> CI navy */
.badge-info { background-color: #6c757d !important; color: #fff !important; }
.badge-primary { background-color: #FF8E20 !important; color: #fff !important; }
/* CI Fix: btn-info (teal) -> CI orange */
a.btn-info, button.btn-info, .btn-info { background-color: #FF8E20 !important; border-color: #FF8E20 !important; color: #fff !important; }

/* CI Fix: complaints table header - white text on grey, overrides general table thead th rule */
.ci-table thead th { color: #ffffff !important; background: #6c757d !important; }

/* CI Fix: complaints table body text -> black */
.ci-table tbody td, .ci-table tbody td strong { color: #212529 !important; }
.ci-table tbody .age-warn { color: #FF8E20 !important; }
.ci-table tbody .age-over { color: #212529 !important; font-weight: 700; }
a.act-view { border-color: #212529 !important; color: #212529 !important; }
a.act-view:hover { background: #212529 !important; color: #fff !important; }
a.act-manage { border-color: #FF8E20 !important; color: #FF8E20 !important; }
a.act-manage:hover { background: #FF8E20 !important; color: #fff !important; }
button.ci-btn-search, .ci-btn-search { background: #FF8E20 !important; border-color: #FF8E20 !important; }

/* CI Fix: badge-info teal -> grey (higher specificity to beat Bootstrap) */
.badge.badge-info, span.badge.badge-info { background-color: #6c757d !important; color: #fff !important; border-color: #6c757d !important; }
/* CI Fix: pagination links Bootstrap blue -> CI navy */
.page-link { color: #212529 !important; }
.page-item.active .page-link { background-color: #6c757d !important; border-color: #6c757d !important; color: #fff !important; }

/* Archive button: CI grey (no red in CI palette) */
.action-btn-red, a.action-btn-red, button.action-btn-red { background: #6c757d !important; color: #fff !important; }

/* CI Fix: Nova framework orange (#FFAA2F) -> exact CI orange (#FF8E20) */
.ml-2.font-weight-bold, p.ml-2.font-weight-bold { color: #FF8E20 !important; }


/* ===== MOBILE NAV FIX ===== */
/* Force the collapsed Bootstrap navbar to always show */
#main-navbar.collapse.navbar-collapse {
    display: flex !important;
    flex-wrap: wrap;
}
/* Fix nav height (was 0px due to collapsed content) */
nav.navbar.navbar-expand-lg {
    height: auto !important;
    min-height: 48px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Ensure navbar items wrap gracefully on small screens */
#main-navbar ul.navbar-nav {
    flex-wrap: wrap;
    width: 100%;
}
/* On mobile, keep the sidebar overlay instead of pushing content */
@media (max-width: 991px) {
    #main {
        margin-left: 0 !important;
    }
    #sideBarMenu {
        z-index: 1050;
    }
}
/* ===== END MOBILE NAV FIX ===== */


/* ===== COMPLAINTS RESPONSIVE FIXES ===== */

/* 1. Fix flex child min-width so table-responsive can actually constrain the table */
.nova-content {
    min-width: 0 !important;
    overflow-x: hidden;
}
.nova-main {
    min-width: 0;
}

/* 2. Fix complaints list: search input responsive width */
.ci-search-input {
    width: 100% !important;
    max-width: 260px;
}

/* 3. Allow action button bar to wrap on mobile */
.action-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.action-btn, .btn.action-btn {
    white-space: normal !important;
    word-break: break-word !important;
}

/* 4. Complaint sections: prevent internal overflow from spilling */
.complaint-content, .complaint-section {
    overflow-x: hidden;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* 5. Bootstrap col-md-6 inside nova layout: ensure they stack on mobile */
@media (max-width: 767px) {
    .nova-main .col-md-6,
    .nova-main .col-md-4,
    .nova-main .col-md-3 {
        flex: 0 0 100%;
        max-width: 100% !important;
    }
    /* Complaints list table: make it horizontally scrollable */
    #complaints-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Complaint action buttons wrap */
    .d-flex.flex-wrap, [style*="display: flex"] {
        flex-wrap: wrap;
    }
}

/* ===== END COMPLAINTS RESPONSIVE FIXES ===== */

/* ===== ACTION BAR WRAP FIX ===== */
/* Complaints view/manage: wrap the top action buttons row on narrow screens */
@media (max-width: 575px) {
    /* Wrap the d-flex justify-content-between action bar */
    .nova-main .d-flex.align-items-center.justify-content-between.mb-4,
    .nova-main .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    /* Ensure buttons expand to full width when wrapped */
    .nova-main .d-flex.align-items-center.justify-content-between.mb-4 > .btn,
    .nova-main .d-flex.align-items-center.justify-content-between.mb-4 > a {
        flex: 1 1 auto;
        text-align: center;
    }
    /* Complaint header - allow text to wrap */
    .complaint-header h4,
    .complaint-header p {
        word-break: break-word !important;
    }
    /* Container padding reduction on very narrow screens */
    .nova-main .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* ===== END ACTION BAR WRAP FIX ===== */

/* ===== NOVA RESOURCE PAGES - MOBILE RESPONSIVE ===== */
/*
 * TG list page: Nova resource index has a horizontal flex row with
 * search input (w-search=288px) + toolbar buttons. At mobile widths
 * the inner empty div (.flex.w-full.justify-end) claims 100% width
 * squishing the buttons to 0. Fix below corrects the layout.
 */

@media (max-width: 767px) {
    /* 1. Wrap the search-box + toolbar row on mobile */
    [dusk$="-index-component"] > .flex {
        flex-wrap: wrap !important;
    }
    [dusk$="-index-component"] > .flex > .relative.flex-no-shrink,
    [dusk$="-index-component"] > .flex > .w-full.flex.items-center {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 2. Search input fills available width on mobile */
    .w-search {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. The inner empty actions div inside the toolbar must NOT claim
          100% width - it squeezes the Create/Dashboard buttons to 0px */
    [dusk$="-index-component"] .w-full.flex.items-center.mb-6 > .flex.w-full {
        width: auto !important;
        flex: 0 1 auto !important;
    }

    /* 4. Buttons: keep nowrap so text does NOT stack vertically */
    [dusk$="-index-component"] .btn {
        white-space: nowrap !important;
        word-break: normal !important;
    }

    /* 5. Nova resource data card: scroll horizontally inside the card */
    .card .relative.overflow-hidden {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}
/* ===== END NOVA RESOURCE PAGES - MOBILE RESPONSIVE ===== */

/* ===== NOVA TABLE MOBILE CARDS ===== */
/*
 * TG list mobile card layout.
 * Type scale (390px base):
 *   Reg No value   : 17px / 700 / navy     — primary identifier, prominent
 *   Full Name value: 15px / 600 / near-black — person name, secondary header
 *   Field labels   : 10px / 700 / uppercase / tracked — metadata labels
 *   Field values   : 14px / 400 / dark      — readable body text
 *   Action buttons : 14px / 500             — comfortable tap targets
 */
@media (max-width: 767px) {

    /* Table + wrappers go block */
    .card .overflow-hidden.overflow-x-auto.relative {
        overflow-x: visible !important;
    }
    .card table.table-default,
    .card table.table-default thead,
    .card table.table-default tbody,
    .card table.table-default tfoot {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .card table.table-default thead {
        display: none !important;
    }

    /* ── Card container ── */
    .card table.table-default tbody tr {
        display: block !important;
        background: #fff;
        border: 1px solid #e2e6ea !important;
        border-radius: 8px !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .card table.table-default tbody tr:hover {
        background: #f8fafc !important;
    }

    /* ── All cells: default row layout ── */
    .card table.table-default tbody td {
        display: flex !important;
        align-items: baseline !important;
        padding: 7px 14px !important;
        border: none !important;
        border-bottom: 1px solid #f1f3f5 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #212529 !important;
        line-height: 1.45 !important;
    }
    .card table.table-default tbody td:last-of-type {
        border-bottom: none !important;
    }

    /* ── Labels (::before) ── */
    .card table.table-default tbody td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #6c757d !important;
        text-transform: uppercase !important;
        letter-spacing: 0.07em !important;
        min-width: 116px !important;
        flex-shrink: 0 !important;
        padding-right: 8px !important;
        padding-top: 3px !important;
        line-height: 1.3 !important;
    }

    /* ── Reg No: prominent primary identifier ── */
    .card table.table-default tbody td:nth-child(2) {
        padding: 12px 14px 10px !important;
        border-bottom: 2px solid #e9ecef !important;
        background: #f8f9fa !important;
    }
    .card table.table-default tbody td:nth-child(2) [class],
    .card table.table-default tbody td:nth-child(2) {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #1F3964 !important;
    }
    .card table.table-default tbody td:nth-child(2)::before {
        font-size: 10px !important;
        color: #1F3964 !important;
        opacity: 0.65;
        padding-top: 4px !important;
    }

    /* ── Full Name: secondary header ── */
    .card table.table-default tbody td:nth-child(3) [class],
    .card table.table-default tbody td:nth-child(3) {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #212529 !important;
    }

    /* ── Hidden columns ── */
    .card table.table-default tbody td:nth-child(1)  { display: none !important; }
    .card table.table-default tbody td:nth-child(4)  { display: none !important; }
    .card table.table-default tbody td:nth-child(6)  { display: none !important; }
    .card table.table-default tbody td:nth-child(7)  { display: none !important; }
    .card table.table-default tbody td:nth-child(10) { display: none !important; }
    .card table.table-default tbody td:nth-child(11) { display: none !important; }
    .card table.table-default tbody td:nth-child(12) { display: none !important; }

    /* ── Action buttons row ── */
    .card table.table-default tbody td:nth-child(13),
    .card table.table-default tbody td:nth-child(14),
    .card table.table-default tbody td:nth-child(15),
    .card table.table-default tbody td:nth-child(16),
    .card table.table-default tbody td:nth-child(17),
    .card table.table-default tbody td:nth-child(18) {
        display: inline-flex !important;
        width: auto !important;
        padding: 8px 6px !important;
        border-bottom: none !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        align-items: center !important;
    }
    .card table.table-default tbody td:nth-child(13) {
        padding-left: 14px !important;
    }
    .card table.table-default tbody td:nth-child(13)::before,
    .card table.table-default tbody td:nth-child(14)::before,
    .card table.table-default tbody td:nth-child(15)::before,
    .card table.table-default tbody td:nth-child(16)::before,
    .card table.table-default tbody td:nth-child(17)::before,
    .card table.table-default tbody td:nth-child(18)::before {
        display: none !important;
    }
    /* Style action links */
    .card table.table-default tbody td:nth-child(n+13) a,
    .card table.table-default tbody td:nth-child(n+13) button {
        font-size: 13px !important;
        font-weight: 500 !important;
        padding: 5px 10px !important;
        border-radius: 4px !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}
/* ===== END NOVA TABLE MOBILE CARDS ===== */

/* ===== NOVA CREATE BTN LABELS ===== */
/* Restore full button text + harmonise sizes at <= 992px */
@media (max-width: 992px) {
    div[dusk$='index-component'] .btn[dusk='create-button'],
    div[dusk$='index-component'] .btn[dusk='attach-button'] {
        width: auto !important;
        overflow: visible !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        padding: 6px 14px !important;
        white-space: nowrap !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    div[dusk$='index-component'] .btn[dusk='create-button']::before,
    div[dusk$='index-component'] .btn[dusk='attach-button']::before {
        content: none !important;
    }
    div[dusk$='index-component'] .w-full.flex.items-center.mb-6 {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}
/* ===== END NOVA CREATE BTN LABELS ===== */

/* ===== TG BADGE CI COLOURS ===== */
/* Status badge colours for TG index table */
.tg-badge                      { color: #ffffff !important; }
/* Green: active/valid/positive */
.tg-badge-valid                { background-color: #28a745 !important; color: #ffffff !important; }
.tg-badge-verified             { background-color: #28a745 !important; color: #ffffff !important; }
.tg-badge-yes                  { background-color: #28a745 !important; color: #ffffff !important; }
/* Red: expired/suspended/negative */
.tg-badge-expired              { background-color: #dc3545 !important; color: #ffffff !important; }
.tg-badge-suspended            { background-color: #dc3545 !important; color: #ffffff !important; }
.tg-badge-capturing-incomplete { background-color: #dc3545 !important; color: #ffffff !important; }
.tg-badge-no                   { background-color: #dc3545 !important; color: #ffffff !important; }
/* Green: not verified (matches Verified per client requirement) */
.tg-badge-not-verified         { background-color: #28a745 !important; color: #ffffff !important; }
/* Grey: archived flag (inactive/historical) */
.tg-badge-archived             { background-color: #6c757d !important; color: #ffffff !important; }
/* ===== END TG BADGE CI COLOURS ===== */

/* ===== NOVA PAGINATION CI ===== */
/* Next/Previous pagination buttons: CI orange for active, grey for disabled */
button[dusk="next"]:not([disabled]),
button[dusk="previous"]:not([disabled]) { color: #FF8E20 !important; }
button[dusk="next"][disabled],
button[dusk="previous"][disabled]       { color: #6c757d !important; }
/* ===== END NOVA PAGINATION CI ===== */

/* ===== TG-07 FLAG COLUMN ===== */
/* Hide any badge pill that has no text (safety net for empty Nova Badge cells) */
.table-default td .whitespace-no-wrap:empty,
.table-default td .badge:empty {
    display: none !important;
}
/* ===== END TG-07 FLAG COLUMN ===== */

/* ===== GEN-01 MOBILE OVERFLOW FIX ===== */
/* Prevent buttons from overflowing viewport on small mobile screens */
@media (max-width: 420px) {
    .btn, button, a.btn {
        max-width: 100% !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
}
/* ===== END GEN-01 MOBILE OVERFLOW FIX ===== */

/* Filter button: override Nova blue to CI orange (active filter state) */
.filter-menu-dropdown .bg-primary {
    background-color: #FF8E20 !important;
    border-color: #FF8E20 !important;
    color: #fff !important;
}
.filter-menu-dropdown .border-primary {
    border-color: #FF8E20 !important;
}

/* TG create page: Proceed/Creating record button - CI orange */
.btn.tg-create-btn,
.btn.tg-create-btn:focus {
    background-color: #FF8E20 !important;
    border-color: #FF8E20 !important;
    color: #fff !important;
}
.btn.tg-create-btn:hover {
    background-color: #d97500 !important;
    border-color: #d97500 !important;
}
.btn.tg-create-btn[disabled],
.btn.tg-create-btn:disabled {
    background-color: #FF8E20 !important;
    border-color: #FF8E20 !important;
    color: #fff !important;
    opacity: 0.75;
}

/* TG-R1: Round all button corners by 6px */
.btn { border-radius: 6px !important; }
.wizard-btn { border-radius: 6px !important; }