/* ═══════════════════════════════════════════════════════════════
   Car and General — CRM Brand Theme  (CSS-only layer)
   Brand: www.cargen.com  |  Primary: #CC0000
   Strategy: override Tailwind tokens + component classes.
   Zero PHP/Blade/logic changes — purely visual.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --color-primary:    204 0 0;       /* Tailwind RGB token for bg-primary */
  --cg-red:           #C01020;
  --cg-red-dark:      #8B0010;
  --cg-red-tint:      #C01020;
  --cg-red-border:    rgba(192,16,32,.2);
  --cg-bg:            #F4F6FA;
  --cg-white:         #FFFFFF;
  --cg-surface:       #FFFFFF;
  --cg-surface2:      #F8F9FC;
  --cg-border:        #E2E8F0;
  --cg-border-md:     #CBD5E1;
  --cg-text:          #1E293B;
  --cg-text2:         #64748B;
  --cg-text3:         #94A3B8;
  --cg-green:         #16A34A;
  --cg-amber:         #D97706;
  --cg-blue:          #2563EB;
  --cg-font:          'Source Sans 3', 'Salesforce Sans', 'Helvetica Neue', Arial, sans-serif;
  --cg-radius:        6px;
  --cg-shadow:        0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --cg-shadow-md:     0 4px 16px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.05);
}

/* ── 2. BASE ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{font-family:var(--cg-font)!important;font-size:14px;color:var(--cg-text)!important;background:var(--cg-bg)!important;-webkit-font-smoothing:antialiased}
body.login{background:#fff!important}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--cg-surface2);border-radius:3px}
::-webkit-scrollbar-thumb{background:var(--cg-border-md);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--cg-text3)}

/* ── 3. SIDEBAR ───────────────────────────────────────────────── */
.side-nav{
  width:220px!important;min-width:220px!important;max-width:220px!important;
  background:linear-gradient(to bottom,#C01020 0%,#7A0010 60%,#3D0008 100%)!important;
  border-right:1px solid rgba(0,0,0,.25)!important;
  box-shadow:2px 0 10px rgba(0,0,0,.2)!important;
  display:flex!important;flex-direction:column!important;
  min-height:100vh!important;padding:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;
}
/* Brand header */
.side-nav>a.intro-x{
  display:flex!important;align-items:center!important;
  padding:16px 14px 14px!important;
  border-bottom:1px solid var(--cg-border)!important;
  text-decoration:none!important;background:var(--cg-white)!important;
}
.side-nav>a.intro-x span{
  font-size:13px!important;font-weight:700!important;
  color:#fff!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
}
.side-nav__devider{height:1px!important;background:rgba(255,255,255,.18)!important;margin:3px 12px!important;border:none!important}
/* Menu item */
.side-nav a.side-menu,.side-nav .side-menu{
  display:flex!important;align-items:center!important;
  padding:8px 12px!important;margin:1px 6px!important;
  border-radius:var(--cg-radius)!important;
  font-size:14px!important;font-weight:600!important;
  color:#fff!important;text-decoration:none!important;
  transition:background .15s,color .15s!important;
  border-left:3px solid transparent!important;
  cursor:pointer!important;line-height:1.4!important;
}
.side-nav a.side-menu:hover,.side-nav .side-menu:hover{
  background:rgba(255,255,255,.92)!important;color:#000!important;
}
.side-nav a.side-menu.side-menu--active,
.side-nav .side-menu.side-menu--active,
.side-menu--active{
  background:rgba(255,255,255,.92)!important;color:#000!important;
  font-weight:700!important;border-left-color:#fff!important;
}
/* Icon */
.side-nav .side-menu__icon{
  width:16px!important;height:16px!important;min-width:16px!important;
  margin-right:9px!important;margin-top:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.side-nav .side-menu__icon i,.side-nav .side-menu__icon svg{
  width:15px!important;height:15px!important;stroke-width:2!important;
  position:static!important;top:auto!important;
}
/* Title */
.side-nav .side-menu__title{
  display:flex!important;align-items:center!important;flex:1!important;
  font-weight:inherit!important;font-size:inherit!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
/* Chevron */
.side-nav .side-menu__sub-icon{margin-left:auto!important;margin-right:0!important;width:14px!important;height:14px!important;flex-shrink:0!important}
/* Sub-menu */
.side-nav ul ul{
  padding-left:0!important;
  overflow:hidden!important;
  margin:0!important;
}
.side-nav ul ul a.side-menu,.side-nav ul ul .side-menu{
  font-size:13.5px!important;
  padding:7px 14px 7px 14px!important;
  color:#fff!important;
  margin:1px 6px!important;
  border-left:3px solid rgba(255,255,255,.15)!important;
  /* Push sub-items to the right end of the sidebar */
  margin-left:auto!important;
  width:calc(100% - 12px)!important;
  justify-content:flex-end!important;
  text-align:right!important;
  flex-direction:row-reverse!important;
}
.side-nav ul ul a.side-menu .side-menu__title,
.side-nav ul ul .side-menu .side-menu__title{
  text-align:right!important;
  justify-content:flex-end!important;
}
.side-nav ul ul a.side-menu:hover,.side-nav ul ul .side-menu:hover{
  background:rgba(255,255,255,.92)!important;
  color:#000!important;
  border-left-color:rgba(255,255,255,.92)!important;
}
.side-nav ul ul .side-menu--active{
  background:rgba(255,255,255,.92)!important;
  color:#000!important;
  font-weight:700!important;
  border-left-color:rgba(255,255,255,.92)!important;
}

/* ── 4. TOP BAR ───────────────────────────────────────────────── */
.top-bar{
  background:var(--cg-white)!important;
  border-bottom:1px solid var(--cg-border)!important;
  height:54px!important;padding:0 18px!important;
  display:flex!important;align-items:center!important;
  box-shadow:0 1px 0 var(--cg-border)!important;
}
.top-bar .breadcrumb{background:transparent!important;padding:0!important;margin:0!important;font-size:12px!important}
.top-bar .breadcrumb-item{color:var(--cg-text2)!important}
.top-bar .breadcrumb-item a{color:var(--cg-text2)!important;text-decoration:none!important}
.top-bar .breadcrumb-item a:hover{color:var(--cg-red)!important}
.top-bar .breadcrumb-item.active{color:var(--cg-text)!important;font-weight:500!important}
.top-bar .breadcrumb-item+.breadcrumb-item::before{color:var(--cg-text3)!important}
#sidebar-toggle{
  color:var(--cg-text2)!important;background:transparent!important;border:none!important;
  padding:6px!important;border-radius:4px!important;cursor:pointer!important;
}
#sidebar-toggle:hover{background:var(--cg-bg)!important;color:var(--cg-red)!important}
/* User avatar */
.top-bar .dropdown-toggle{
  width:34px!important;height:34px!important;background:var(--cg-red)!important;
  border-radius:50%!important;display:flex!important;align-items:center!important;
  justify-content:center!important;font-size:12px!important;font-weight:700!important;
  color:#fff!important;cursor:pointer!important;border:2px solid rgba(204,0,0,.2)!important;
}
.top-bar .dropdown-toggle h1{margin:0!important;padding:0!important;font-size:12px!important;font-weight:700!important;color:#fff!important;line-height:1!important}
/* Dropdown */
.dropdown-menu,.top-bar .dropdown-menu{
  background:var(--cg-white)!important;border:1px solid var(--cg-border)!important;
  border-radius:8px!important;box-shadow:var(--cg-shadow-md)!important;
  min-width:200px!important;padding:4px!important;overflow:hidden!important;
}
.dropdown-content{background:transparent!important;padding:0!important}
.dropdown-content li{list-style:none!important}
.dropdown-item,.dropdown-content .dropdown-item{
  display:flex!important;align-items:center!important;padding:8px 12px!important;
  font-size:12.5px!important;color:var(--cg-text2)!important;border-radius:5px!important;
  transition:background .1s,color .1s!important;cursor:pointer!important;text-decoration:none!important;
}
.dropdown-item:hover,.dropdown-content .dropdown-item:hover{background:var(--cg-red-tint)!important;color:var(--cg-red)!important}
.dropdown-divider{border-color:var(--cg-border)!important;margin:3px 0!important}
.dropdown-content li.p-2{padding:10px 12px!important;border-bottom:1px solid var(--cg-border)!important;margin-bottom:3px!important}
.dropdown-content li.p-2 .font-medium{font-size:13px!important;font-weight:600!important;color:var(--cg-text)!important}
/* bg-primary — only affect sidebar/page areas, not dropdown panels */
.content .bg-primary,
.side-nav .bg-primary {
  background:var(--cg-red)!important;
}
/* Dropdown items — handled via inline onmouseenter in top-bar.blade.php */
.dropdown-menu,
.dropdown-content {
  background:#fff!important;
  border:1px solid #E2E8F0!important;
  border-radius:10px!important;
  box-shadow:0 8px 32px rgba(0,0,0,.12)!important;
}
/* Ensure dropdown items have clean defaults — hover handled inline */
.dropdown-item {
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  padding:8px 13px!important;
  font-size:14px!important;
  font-weight:500!important;
  color:#1E293B!important;
  border-radius:6px!important;
  text-decoration:none!important;
  background:transparent!important;
  transition:background .12s,color .12s!important;
}
.dropdown-item:hover {
  background:linear-gradient(to right,#C01020 0%,#1a1a1a 100%)!important;
  color:#fff!important;
}

/* ── 5. CONTENT AREA ──────────────────────────────────────────── */
.content{background:var(--cg-bg)!important;flex:1 1 auto!important;min-width:0!important}

/* ── 6. CARDS / BOXES ─────────────────────────────────────────── */
.box,.intro-y.box{
  background:var(--cg-white)!important;border:1px solid var(--cg-border)!important;
  border-radius:8px!important;box-shadow:var(--cg-shadow)!important;color:var(--cg-text)!important;
}
.box .border-b,.box .border-slate-200\/60{border-color:var(--cg-border)!important}

/* ── 7. TYPOGRAPHY ────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{font-family:var(--cg-font)!important;color:var(--cg-text)!important;font-weight:600!important;letter-spacing:-.01em!important}
.text-slate-500,.text-slate-600{color:var(--cg-text2)!important}
.text-slate-400{color:var(--cg-text3)!important}
.text-primary{color:var(--cg-red)!important}
.font-medium{color:var(--cg-text)!important}

/* ── 8. BUTTONS ───────────────────────────────────────────────── */
.btn{
  font-family:var(--cg-font)!important;font-size:13.5px!important;font-weight:600!important;
  border-radius:var(--cg-radius)!important;padding:7px 16px!important;
  transition:all .2s ease!important;cursor:pointer!important;letter-spacing:.02em!important;
  display:inline-flex!important;align-items:center!important;gap:5px!important;
}
.btn-primary{
  background:linear-gradient(to right,#C01020 0%,#1a1a1a 100%)!important;
  border:1px solid #C01020!important;
  color:#fff!important;
  box-shadow:0 2px 6px rgba(192,16,32,.3)!important;
}
.btn-primary:hover{
  background:#fff!important;
  border:1px solid #C01020!important;
  color:#000!important;
  box-shadow:0 2px 8px rgba(192,16,32,.2)!important;
}
.btn-secondary,.btn-outline-secondary{
  background:linear-gradient(to right,#C01020 0%,#1a1a1a 100%)!important;
  border:1px solid #C01020!important;
  color:#fff!important;
}
.btn-secondary:hover,.btn-outline-secondary:hover{
  background:#fff!important;
  border:1px solid #C01020!important;
  color:#000!important;
}
.btn-success{
  background:linear-gradient(to right,#16A34A 0%,#1a1a1a 100%)!important;
  border:1px solid #16A34A!important;color:#fff!important;
}
.btn-success:hover{background:#fff!important;border-color:#16A34A!important;color:#000!important;}
.btn-danger{
  background:linear-gradient(to right,#DC2626 0%,#1a1a1a 100%)!important;
  border:1px solid #DC2626!important;color:#fff!important;
}
.btn-danger:hover{background:#fff!important;border-color:#DC2626!important;color:#000!important;}
.btn-warning{
  background:linear-gradient(to right,#D97706 0%,#1a1a1a 100%)!important;
  border:1px solid #D97706!important;color:#fff!important;
}
.btn-warning:hover{background:#fff!important;border-color:#D97706!important;color:#000!important;}
.btn-sm{padding:4px 10px!important;font-size:11.5px!important}
.btn-lg{padding:10px 22px!important;font-size:14px!important}

/* ── 9. FORMS ─────────────────────────────────────────────────── */
.form-control,.form-select,
input[type=text]:not(.datepicker),input[type=password],
input[type=email],input[type=number],input[type=date],
input[type=search],input[type=tel],select,textarea{
  background:var(--cg-white)!important;border:1px solid var(--cg-border-md)!important;
  color:var(--cg-text)!important;border-radius:var(--cg-radius)!important;
  font-size:14px!important;font-family:var(--cg-font)!important;
  padding:7px 11px!important;transition:border-color .15s,box-shadow .15s!important;outline:none!important;
}
.form-control:hover,.form-select:hover,input[type=text]:hover,input[type=password]:hover,
input[type=email]:hover,input[type=number]:hover,input[type=date]:hover,select:hover,textarea:hover{
  border-color:var(--cg-red)!important;background:var(--cg-white)!important;
}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--cg-red)!important;box-shadow:0 0 0 3px rgba(192,16,32,.12)!important;outline:none!important;
}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:var(--cg-text3)!important}
label,.form-label{font-size:13px!important;font-weight:500!important;color:var(--cg-text2)!important;margin-bottom:4px!important;display:block!important}
input[readonly],select[disabled],input[disabled],textarea[disabled]{background:var(--cg-surface2)!important;color:var(--cg-text3)!important;cursor:not-allowed!important}

/* ── 10. TABLES ───────────────────────────────────────────────── */
table.table{width:100%!important;font-size:13px!important;color:var(--cg-text)!important;border-collapse:collapse!important}
table.table thead tr{background:var(--cg-surface2)!important;border-bottom:2px solid var(--cg-border)!important}
table.table thead th{
  padding:10px 14px!important;font-size:12px!important;font-weight:600!important;
  text-transform:uppercase!important;letter-spacing:.06em!important;
  color:var(--cg-text2)!important;white-space:nowrap!important;border:none!important;
}
table.table tbody tr{border-bottom:1px solid var(--cg-border)!important;transition:background .1s!important}
table.table tbody tr:hover{background:transparent!important;outline:1px solid var(--cg-red)!important;}
table.table tbody td{padding:10px 14px!important;color:var(--cg-text)!important;vertical-align:middle!important;font-size:14px!important;border:none!important}
table.table tbody tr:last-child{border-bottom:none!important}
table.table tbody tr:hover td{border-top:1px solid var(--cg-red)!important;border-bottom:1px solid var(--cg-red)!important;background:transparent!important;}
table.table tbody tr:hover td:first-child{border-left:3px solid var(--cg-red)!important;}

/* ── 11. BADGES ───────────────────────────────────────────────── */
.badge,[class*=badge-]{font-size:11.5px!important;font-weight:600!important;padding:3px 9px!important;border-radius:20px!important;display:inline-block!important}
.badge-primary,.bg-primary.badge{background:rgba(204,0,0,.1)!important;color:var(--cg-red)!important}
.badge-success,.bg-success.badge{background:rgba(22,163,74,.1)!important;color:#16A34A!important}
.badge-warning,.bg-warning.badge{background:rgba(217,119,6,.1)!important;color:#D97706!important}
.badge-danger,.bg-danger.badge{background:rgba(220,38,38,.1)!important;color:#DC2626!important}
.badge-info,.bg-info.badge{background:rgba(37,99,235,.1)!important;color:#2563EB!important}

/* ── 12. TABS ─────────────────────────────────────────────────── */
.nav-tabs{border-bottom:2px solid var(--cg-border)!important;gap:2px!important}
.nav-tabs .nav-link{font-size:14px!important;font-weight:500!important;color:var(--cg-text2)!important;padding:8px 16px!important;border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;margin-bottom:-2px!important;transition:color .15s!important;background:transparent!important}
.nav-tabs .nav-link:hover{color:var(--cg-red)!important}
.nav-tabs .nav-link.active{color:var(--cg-red)!important;border-bottom-color:var(--cg-red)!important;font-weight:600!important;background:transparent!important}

/* ── 13. MODALS ───────────────────────────────────────────────── */
.modal-content{background:var(--cg-white)!important;border:none!important;border-radius:10px!important;box-shadow:0 20px 60px rgba(0,0,0,.15)!important;color:var(--cg-text)!important}
.modal-header{border-bottom:1px solid var(--cg-border)!important;padding:16px 20px!important}
.modal-title{font-size:15px!important;font-weight:600!important;color:var(--cg-text)!important}
.modal-footer{border-top:1px solid var(--cg-border)!important;padding:12px 20px!important}

/* ── 14. ALERTS ───────────────────────────────────────────────── */
.alert{border-radius:var(--cg-radius)!important;font-size:13px!important;padding:10px 14px!important}
.alert-danger{background:#FEF2F2!important;border-color:#FECACA!important;color:#991B1B!important}
.alert-success{background:#F0FDF4!important;border-color:#BBF7D0!important;color:#166534!important}
.alert-warning{background:#FFFBEB!important;border-color:#FDE68A!important;color:#92400E!important}
.alert-info{background:#EFF6FF!important;border-color:#BFDBFE!important;color:#1E40AF!important}

/* ── 15. PAGINATION ───────────────────────────────────────────── */
.pagination{gap:3px!important}
.pagination .page-item .page-link{background:var(--cg-white)!important;border:1px solid var(--cg-border)!important;color:var(--cg-text2)!important;border-radius:6px!important;padding:5px 10px!important;font-size:13px!important;min-width:32px!important;text-align:center!important;transition:all .15s!important}
.pagination .page-item .page-link:hover{background:var(--cg-red-tint)!important;border-color:var(--cg-red)!important;color:var(--cg-red)!important}
.pagination .page-item.active .page-link{background:var(--cg-red)!important;border-color:var(--cg-red)!important;color:#fff!important;font-weight:600!important}

/* ── 16. SELECT2 ──────────────────────────────────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{background:var(--cg-white)!important;border:1px solid var(--cg-border-md)!important;border-radius:var(--cg-radius)!important;min-height:36px!important}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple{border-color:var(--cg-red)!important;box-shadow:0 0 0 3px rgba(204,0,0,.1)!important}
.select2-dropdown{border-color:var(--cg-border)!important;border-radius:6px!important;box-shadow:var(--cg-shadow-md)!important}
.select2-results__option{font-size:13px!important;padding:7px 12px!important}
.select2-results__option--highlighted{background:var(--cg-red)!important;color:#fff!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--cg-text)!important;font-size:13px!important;line-height:34px!important}
.select2-search--dropdown .select2-search__field{border:1px solid var(--cg-border)!important;border-radius:4px!important;font-size:13px!important}

/* ── 17. PROGRESS / MISC ──────────────────────────────────────── */
.progress{background:var(--cg-border)!important;border-radius:999px!important;height:6px!important}
.progress-bar{background:var(--cg-red)!important;border-radius:999px!important}
.progress-bar.bg-success{background:#16A34A!important}
.progress-bar.bg-warning{background:#D97706!important}
.flatpickr-calendar{border-radius:8px!important;box-shadow:var(--cg-shadow-md)!important;border:1px solid var(--cg-border)!important}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--cg-red)!important;border-color:var(--cg-red)!important}
.flatpickr-day:hover{background:var(--cg-red-tint)!important;color:var(--cg-red)!important}
.bg-white,.bg-slate-50,.bg-gray-50,.bg-slate-100,.bg-gray-100{background:var(--cg-surface2)!important}
.text-primary{color:var(--cg-red)!important}
.border-primary{border-color:var(--cg-red)!important}
a.text-primary{color:var(--cg-red)!important}
a.text-primary:hover{color:var(--cg-red-dark)!important}


/* ══════════════════════════════════════════════════════════════
   C&G CONTEXTUAL ACTION BUTTONS
   Strategy: border + icon shading per semantic intent.
   Base gradient (red→black) kept for primary actions.
   Each context overrides colour only — size/radius/font same.
   ══════════════════════════════════════════════════════════════ */

/* ─── SHARED ACTION BASE ─────────────────────────────────────── */
.btn {
  position: relative !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Subtle shine sweep on hover (all btns) */
.btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%) !important;
  transform: translateX(-100%) !important;
  transition: transform .4s ease !important;
  pointer-events: none !important;
}
.btn:hover::after { transform: translateX(100%) !important; }

/* ─── 1. CANCEL / DELETE / REJECT ── deep red + left red bar ─── */
.btn-danger,
a.btn-danger, button.btn-danger,
.btn[wire\:click*="cancel"],
.btn[wire\:click*="Cancel"],
.btn[wire\:click*="delete"],
.btn[wire\:click*="Delete"],
.btn[wire\:click*="reject"],
.btn[wire\:click*="Reject"] {
  background: linear-gradient(to right, #B91C1C 0%, #1a1a1a 100%) !important;
  border: 1px solid #B91C1C !important;
  border-left: 4px solid #FF1A1A !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(185,28,28,.25) !important;
}
.btn-danger:hover,
a.btn-danger:hover, button.btn-danger:hover {
  background: #fff !important;
  border-color: #B91C1C !important;
  border-left-color: #FF1A1A !important;
  color: #B91C1C !important;
  box-shadow: inset 0 0 0 1px #B91C1C !important;
}

/* ─── 2. FOLLOW-UP / SCHEDULE / PLAN ── amber/yellow ──────────── */
.btn-warning,
a.btn-warning, button.btn-warning,
.btn[wire\:click*="followUp"],
.btn[wire\:click*="follow_up"],
.btn[wire\:click*="schedule"],
.btn[wire\:click*="reschedule"],
.btn[wire\:click*="Reschedule"],
.btn[wire\:click*="plan"],
.btn[wire\:click*="Plan"] {
  background: linear-gradient(to right, #B45309 0%, #1a1a1a 100%) !important;
  border: 1px solid #B45309 !important;
  border-left: 4px solid #FBBF24 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(180,83,9,.25) !important;
}
.btn-warning:hover,
a.btn-warning:hover, button.btn-warning:hover {
  background: #fff !important;
  border-color: #B45309 !important;
  border-left-color: #FBBF24 !important;
  color: #B45309 !important;
  box-shadow: inset 0 0 0 1px #B45309 !important;
}

/* ─── 3. SAVE / SUBMIT / APPROVE / CLOSE DEAL ── green ──────── */
.btn-success,
a.btn-success, button.btn-success,
.btn[wire\:click*="save"],
.btn[wire\:click*="Save"],
.btn[wire\:click*="submit"],
.btn[wire\:click*="Submit"],
.btn[wire\:click*="approve"],
.btn[wire\:click*="Approve"],
.btn[wire\:click*="close"],
.btn[wire\:click*="Close"] {
  background: linear-gradient(to right, #15803D 0%, #1a1a1a 100%) !important;
  border: 1px solid #15803D !important;
  border-left: 4px solid #22C55E !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(21,128,61,.25) !important;
}
.btn-success:hover,
a.btn-success:hover, button.btn-success:hover {
  background: #fff !important;
  border-color: #15803D !important;
  border-left-color: #22C55E !important;
  color: #15803D !important;
  box-shadow: inset 0 0 0 1px #15803D !important;
}

/* ─── 4. VIEW / OPEN / DETAILS ── blue ──────────────────────── */
.btn-info,
a.btn-info, button.btn-info {
  background: linear-gradient(to right, #1D4ED8 0%, #1a1a1a 100%) !important;
  border: 1px solid #1D4ED8 !important;
  border-left: 4px solid #60A5FA !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(29,78,216,.2) !important;
}
.btn-info:hover,
a.btn-info:hover, button.btn-info:hover {
  background: #fff !important;
  border-color: #1D4ED8 !important;
  border-left-color: #60A5FA !important;
  color: #1D4ED8 !important;
  box-shadow: inset 0 0 0 1px #1D4ED8 !important;
}

/* ─── 5. EXPORT / DOWNLOAD / PRINT ── teal/slate ─────────────── */
.btn-secondary,
.btn-outline-secondary,
a.btn-secondary, button.btn-secondary,
a.btn-outline-secondary, button.btn-outline-secondary {
  background: linear-gradient(to right, #0F766E 0%, #1a1a1a 100%) !important;
  border: 1px solid #0F766E !important;
  border-left: 4px solid #2DD4BF !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(15,118,110,.2) !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: #fff !important;
  border-color: #0F766E !important;
  border-left-color: #2DD4BF !important;
  color: #0F766E !important;
  box-shadow: inset 0 0 0 1px #0F766E !important;
}

/* ─── 6. NEW / ADD / CREATE ── primary red→black (default) ────── */
.btn-primary,
a.btn-primary, button.btn-primary {
  background: linear-gradient(to right, #C01020 0%, #1a1a1a 100%) !important;
  border: 1px solid #C01020 !important;
  border-left: 4px solid #FF4D5E !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(192,16,32,.25) !important;
}
.btn-primary:hover,
a.btn-primary:hover, button.btn-primary:hover {
  background: #fff !important;
  border-color: #C01020 !important;
  border-left-color: #FF4D5E !important;
  color: #C01020 !important;
  box-shadow: inset 0 0 0 1px #C01020 !important;
}

/* ─── 7. BACK / NEUTRAL ── slate ─────────────────────────────── */
.btn-light, .btn-default, .btn-outline-light,
a.btn-light, button.btn-light {
  background: linear-gradient(to right, #475569 0%, #1a1a1a 100%) !important;
  border: 1px solid #475569 !important;
  border-left: 4px solid #94A3B8 !important;
  color: #fff !important;
}
.btn-light:hover, .btn-default:hover {
  background: #fff !important;
  border-color: #475569 !important;
  color: #475569 !important;
}

/* ─── 8. ACTIVE / STATUS ─────────────────────────────────────── */
.badge-success, span.badge-success, .badge.bg-success {
  background: rgba(21,128,61,.1) !important;
  color: #15803D !important;
  border: 1px solid rgba(21,128,61,.25) !important;
  border-left: 3px solid #22C55E !important;
}
.badge-danger, span.badge-danger, .badge.bg-danger {
  background: rgba(185,28,28,.1) !important;
  color: #B91C1C !important;
  border: 1px solid rgba(185,28,28,.25) !important;
  border-left: 3px solid #FF1A1A !important;
}
.badge-warning, span.badge-warning, .badge.bg-warning {
  background: rgba(180,83,9,.1) !important;
  color: #B45309 !important;
  border: 1px solid rgba(180,83,9,.25) !important;
  border-left: 3px solid #FBBF24 !important;
}
.badge-primary, span.badge-primary, .badge.bg-primary {
  background: rgba(192,16,32,.1) !important;
  color: #C01020 !important;
  border: 1px solid rgba(192,16,32,.25) !important;
  border-left: 3px solid #FF4D5E !important;
}
.badge-info, span.badge-info, .badge.bg-info {
  background: rgba(29,78,216,.1) !important;
  color: #1D4ED8 !important;
  border: 1px solid rgba(29,78,216,.25) !important;
  border-left: 3px solid #60A5FA !important;
}

/* ─── 9. ICON COLOURING INSIDE BUTTONS ──────────────────────── */
.btn-danger   i, .btn-danger   svg { color: #FCA5A5 !important; stroke: #FCA5A5 !important; }
.btn-warning  i, .btn-warning  svg { color: #FDE68A !important; stroke: #FDE68A !important; }
.btn-success  i, .btn-success  svg { color: #86EFAC !important; stroke: #86EFAC !important; }
.btn-info     i, .btn-info     svg { color: #BAE6FD !important; stroke: #BAE6FD !important; }
.btn-secondary i,.btn-secondary svg { color: #99F6E4 !important; stroke: #99F6E4 !important; }
.btn-primary  i, .btn-primary  svg { color: #FCA5A5 !important; stroke: #FCA5A5 !important; }

/* On hover icons turn to the btn colour */
.btn-danger:hover   i, .btn-danger:hover   svg { color: #B91C1C !important; stroke: #B91C1C !important; }
.btn-warning:hover  i, .btn-warning:hover  svg { color: #B45309 !important; stroke: #B45309 !important; }
.btn-success:hover  i, .btn-success:hover  svg { color: #15803D !important; stroke: #15803D !important; }
.btn-info:hover     i, .btn-info:hover     svg { color: #1D4ED8 !important; stroke: #1D4ED8 !important; }
.btn-secondary:hover i,.btn-secondary:hover svg { color: #0F766E !important; stroke: #0F766E !important; }
.btn-primary:hover  i, .btn-primary:hover  svg { color: #C01020 !important; stroke: #C01020 !important; }

/* ─── 10. SMALL ACTION BUTTONS in tables (btn-sm) ─────────────── */
.btn-sm {
  padding: 4px 10px 4px 8px !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
}


/* ══════════════════════════════════════════════════════════════
   C&G PAGE HEADER BAR
   Red-to-black gradient strip on every card header / page title.
   The body grey strip (bg-black/0.15) is removed in main.blade.php.
   ══════════════════════════════════════════════════════════════ */

/* Remove residual body padding gap */
body { padding-top: 0 !important; }
.content > div { padding-top: 0 !important; }
.quotation-page,
.content > .p-5,
.content > div > .p-5 { padding-top: 0 !important; }

/* ── Universal .cg-page-bar helper class ── */
.cg-page-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 20px !important;
  background: linear-gradient(to right, #C01020 0%, #1a1a1a 100%) !important;
  border-left: 4px solid #FF4D5E !important;
  color: #fff !important;
  min-height: 46px !important;
  font-family: 'Source Sans 3', Arial, sans-serif !important;
}
.cg-page-bar * { color: #fff !important; }
.cg-page-bar h1,.cg-page-bar h2,.cg-page-bar h3,.cg-page-bar h4 {
  font-size: 15px !important; font-weight: 700 !important; margin: 0 !important;
}

/* ── Box / card header rows — gradient ── */
/* Pattern: .box > first-child that is a flex row with border-b */
.box > .flex.items-center.border-b,
.box > .p-5.flex.items-center.border-b,
.box > .p-5.border-b.flex,
.intro-y.box > .flex.items-center.border-b,
.intro-y.box > .p-5.flex.items-center.border-b {
  background: linear-gradient(to right, #C01020 0%, #2d2d2d 100%) !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
  border-radius: 7px 7px 0 0 !important;
  padding: 10px 18px !important;
  margin: -1px -1px 0 -1px !important;
}

/* All text inside box headers → white */
.box > .flex.items-center.border-b *,
.box > .p-5.flex.items-center.border-b *,
.box > .p-5.border-b.flex * {
  color: #fff !important;
}

/* h2/h3/h4 inside box headers */
.box > .flex.items-center.border-b h2,
.box > .flex.items-center.border-b h3,
.box > .p-5.flex.items-center.border-b h2,
.box > .p-5.flex.items-center.border-b h3,
.box > .p-5.border-b.flex h2 {
  font-size: 14px !important; font-weight: 700 !important; color: #fff !important;
}

/* Icons inside box headers */
.box > .flex.items-center.border-b i,
.box > .flex.items-center.border-b svg,
.box > .p-5.flex.items-center.border-b i,
.box > .p-5.flex.items-center.border-b svg {
  color: rgba(255,255,255,.7) !important; stroke: rgba(255,255,255,.7) !important;
}

/* Buttons sitting inside a gradient header — white ghost style */
.box > .flex.items-center.border-b .btn,
.box > .p-5.flex.items-center.border-b .btn,
.box > .p-5.border-b.flex .btn {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-left-width: 1px !important;
  color: #fff !important;
  box-shadow: none !important;
}
.box > .flex.items-center.border-b .btn:hover,
.box > .p-5.flex.items-center.border-b .btn:hover,
.box > .p-5.border-b.flex .btn:hover {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
}

/* ── The specific grey bar between topbar and page ── */
/* body.py-5 creates a top padding gap — kill it */
body.py-5 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ── HOVER VISIBILITY FIX — must come last ───────────────────────
   Ensures text is always visible on hover (white bg → coloured text).
   Each btn class gets its matching colour explicitly on hover.
   ──────────────────────────────────────────────────────────────── */
.btn-primary:hover,   a.btn-primary:hover,   button.btn-primary:hover   { color: #C01020 !important; background: #fff !important; }
.btn-danger:hover,    a.btn-danger:hover,    button.btn-danger:hover    { color: #B91C1C !important; background: #fff !important; }
.btn-warning:hover,   a.btn-warning:hover,   button.btn-warning:hover   { color: #B45309 !important; background: #fff !important; }
.btn-success:hover,   a.btn-success:hover,   button.btn-success:hover   { color: #15803D !important; background: #fff !important; }
.btn-info:hover,      a.btn-info:hover,      button.btn-info:hover      { color: #1D4ED8 !important; background: #fff !important; }
.btn-secondary:hover, a.btn-secondary:hover, button.btn-secondary:hover { color: #0F766E !important; background: #fff !important; }
.btn-outline-secondary:hover                                             { color: #0F766E !important; background: #fff !important; }
.btn-light:hover,     a.btn-light:hover,     button.btn-light:hover     { color: #475569 !important; background: #fff !important; }

/* ── SEARCH / INPUT TEXT VISIBILITY ─────────────────────────────
   Ensure typed text in ALL inputs is always dark/visible.
   The box header gradient was making inputs inside headers show
   white text on white background.
   ──────────────────────────────────────────────────────────────── */
input[type=text],
input[type=search],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=tel],
input,
select,
textarea,
.form-control,
.form-select {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: #94A3B8 !important;
  -webkit-text-fill-color: #94A3B8 !important;
  opacity: 1 !important;
}

/* Inputs inside gradient box headers need explicit dark text */
.box > .flex.items-center.border-b input,
.box > .flex.items-center.border-b select,
.box > .p-5.flex.items-center.border-b input,
.box > .p-5.flex.items-center.border-b select,
.box > .p-5.border-b.flex input,
.box > .p-5.border-b.flex select {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  background: #fff !important;
  border-color: rgba(255,255,255,.4) !important;
}
.box > .flex.items-center.border-b input::placeholder,
.box > .p-5.flex.items-center.border-b input::placeholder,
.box > .p-5.border-b.flex input::placeholder {
  color: #64748B !important;
  -webkit-text-fill-color: #64748B !important;
}

/* ══════════════════════════════════════════════════════════════
   C&G UNIFORM TABLE BADGE-BUTTONS (Name column pills)
   All buttons inside table cells get a consistent fixed width
   so they line up neatly regardless of text length.
   ══════════════════════════════════════════════════════════════ */

/* Any .btn inside a table cell — fixed min-width for uniformity */
table.table tbody td .btn,
table.table tbody td a.btn,
table.table tbody td button.btn {
  min-width: 140px !important;
  max-width: 140px !important;
  width: 140px !important;
  text-align: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Action column buttons (View Sub Modules, Edit) — separate smaller width */
table.table tbody td:last-child .btn,
table.table tbody td:last-child a.btn,
table.table tbody td:last-child button.btn,
table.table tbody td.action-col .btn,
table.table tbody td.action-col a.btn {
  min-width: auto !important;
  max-width: none !important;
  width: auto !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
}

/* Specifically for the system modules / admin tables where
   the name column uses btn as a styled label badge */
table.table tbody td:nth-child(2) .btn,
table.table tbody td:nth-child(2) a.btn,
table.table tbody td:nth-child(2) button.btn {
  min-width: 160px !important;
  max-width: 160px !important;
  width: 160px !important;
  text-align: center !important;
  justify-content: center !important;
}

/* ══════════════════════════════════════════════════════════════
   C&G DROPDOWN / SELECT OPTION VISIBILITY FIX
   Native <select> and <option> must always have dark text.
   Browser-rendered option lists ignore most CSS but color/bg work.
   ══════════════════════════════════════════════════════════════ */

select option:checked,
select option[selected] {
  color: #ffffff !important;
  background-color: #C01020 !important;
  background: linear-gradient(#C01020, #C01020) !important;
  font-weight: 600 !important;
}

select option[disabled],
select option[value=""] {
  color: #94A3B8 !important;
  background-color: #ffffff !important;
}

/* ── Select2 dropdown panel ── */
.select2-dropdown {
  background: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}

.select2-results__options {
  background: #ffffff !important;
  padding: 4px !important;
}

.select2-results__option {
  color: #1E293B !important;
  background: transparent !important;
  font-size: 14px !important;
  font-family: 'Source Sans 3', Arial, sans-serif !important;
  padding: 7px 12px !important;
  border-radius: 4px !important;
  transition: background .12s, color .12s !important;
}

/* Select2 hover → red, NOT blue */
.select2-results__option--highlighted,
.select2-results__option--highlighted.select2-results__option--selectable {
  background: linear-gradient(to right, #C01020 0%, #1a1a1a 100%) !important;
  color: #fff !important;
}

/* Select2 already-selected option */
.select2-results__option[aria-selected=true],
.select2-results__option--selected {
  background: #FFF5F5 !important;
  color: #C01020 !important;
  font-weight: 600 !important;
}

/* Select2 search box inside dropdown */
.select2-search--dropdown {
  padding: 6px 8px !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.select2-search--dropdown .select2-search__field {
  background: #F8F9FC !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 4px !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: #C01020 !important;
  box-shadow: 0 0 0 2px rgba(192,16,32,.1) !important;
  outline: none !important;
}

/* Select2 rendered value in the trigger box */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  font-size: 14px !important;
  line-height: 34px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94A3B8 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: linear-gradient(to right, #C01020 0%, #1a1a1a 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255,255,255,.75) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff !important;
  background: transparent !important;
}

/* ── All other Bootstrap/Tailwind dropdowns ── */
.dropdown-menu .dropdown-item {
  color: #1E293B !important;
  background: transparent !important;
}

/* Status badge dropdowns used inline in tables */
.dropdown-menu .dropdown-item:hover {
  background: linear-gradient(to right, #C01020 0%, #1a1a1a 100%) !important;
  color: #fff !important;
}


/* ══════════════════════════════════════════════════════════════
   C&G: SEARCH/FILTER CONTROLS INSIDE GRADIENT HEADER BAR
   Moves the export form controls (select, dates, button) to the
   right side of the gradient bar — matching Sales Quotations style.
   ══════════════════════════════════════════════════════════════ */

/* The header bar row — ensure it's a single flex row, no wrap */
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b,
.intro-y.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b,
.intro-y.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  padding: 0 0 0 18px !important;
  min-height: 52px !important;
  gap: 0 !important;
}

/* Title h2 — stays left, flex-grow pushes form right */
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b h2,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b h2,
.intro-y.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b h2 {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-right: auto !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Export form / controls container — sits on right of bar */
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b form,
.intro-y.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form,
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b .flex.flex-wrap,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b .flex.flex-wrap,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b > div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Form inputs inside the bar — compact white style */
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form input,
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form select,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b form input,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b form select,
.intro-y.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form input,
.intro-y.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form select {
  height: 34px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.92) !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  width: auto !important;
  /* Override the resize:horizontal inline style */
  resize: none !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form input[type=date],
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b form input[type=date] {
  width: 140px !important;
}

.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form select,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b form select {
  width: 160px !important;
}

.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form input:focus,
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form select:focus,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b form input:focus,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b form select:focus {
  border-color: rgba(255,255,255,.8) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.3) !important;
  background: #fff !important;
  outline: none !important;
}

/* Export / action buttons inside the bar */
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form .btn,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b form .btn,
.intro-y.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form .btn,
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b > div .btn,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b > div .btn {
  height: 34px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-left-width: 1px !important;
  color: #fff !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b form .btn:hover,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b form .btn:hover,
.box > .flex.flex-col.sm\:flex-row.items-center.p-5.border-b > div .btn:hover,
.box > .flex.flex-col.sm\:flex-row.sm\:items-center.p-5.border-b > div .btn:hover {
  background: rgba(255,255,255,.28) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   C&G STATUS BADGES — Quoted (green) & Prospect (amber)
   The "Quoted" badge uses btn-primary + inline-flex + rounded-md.
   Override specifically for that combination to green gradient,
   matching the Save button style.
   ══════════════════════════════════════════════════════════════ */

/* ── "Quoted" badge — green gradient matching Save button ── */
a.inline-flex.items-center.btn-primary.rounded-md,
span.inline-flex.items-center.btn-primary.rounded-md,
.inline-flex.items-center.btn-primary.rounded-md {
  background: linear-gradient(to right, #15803D 0%, #1a1a1a 100%) !important;
  border: 1px solid #15803D !important;
  border-left: 4px solid #22C55E !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(21,128,61,.3) !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

a.inline-flex.items-center.btn-primary.rounded-md:hover,
span.inline-flex.items-center.btn-primary.rounded-md:hover,
.inline-flex.items-center.btn-primary.rounded-md:hover {
  background: #fff !important;
  color: #15803D !important;
  border-color: #15803D !important;
  border-left-color: #22C55E !important;
}

/* SVG/icon inside Quoted badge */
a.inline-flex.items-center.btn-primary.rounded-md svg,
span.inline-flex.items-center.btn-primary.rounded-md svg,
.inline-flex.items-center.btn-primary.rounded-md svg {
  color: #86EFAC !important;
  stroke: #86EFAC !important;
  width: 14px !important;
  height: 14px !important;
}

a.inline-flex.items-center.btn-primary.rounded-md:hover svg,
.inline-flex.items-center.btn-primary.rounded-md:hover svg {
  color: #15803D !important;
  stroke: #15803D !important;
}

/* ── "Prospect" badge — amber gradient ── */
span.inline-flex.items-center.btn-warning.rounded-md,
a.inline-flex.items-center.btn-warning.rounded-md,
.inline-flex.items-center.btn-warning.rounded-md {
  background: linear-gradient(to right, #B45309 0%, #1a1a1a 100%) !important;
  border: 1px solid #B45309 !important;
  border-left: 4px solid #FBBF24 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(180,83,9,.25) !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

span.inline-flex.items-center.btn-warning.rounded-md:hover,
a.inline-flex.items-center.btn-warning.rounded-md:hover,
.inline-flex.items-center.btn-warning.rounded-md:hover {
  background: #fff !important;
  color: #B45309 !important;
  border-color: #B45309 !important;
  border-left-color: #FBBF24 !important;
}

/* ── "Cancelled / Danger" inline badge ── */
span.inline-flex.items-center.btn-danger.rounded-md,
a.inline-flex.items-center.btn-danger.rounded-md,
.inline-flex.items-center.btn-danger.rounded-md {
  background: linear-gradient(to right, #B91C1C 0%, #1a1a1a 100%) !important;
  border: 1px solid #B91C1C !important;
  border-left: 4px solid #FF1A1A !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* ── Save / Submit buttons — ensure green matches screenshot ── */
/* The Save button screenshot shows a deep green gradient.
   btn-success already has this from our contextual rules,
   but ensure it's applied on standalone Save buttons too. */
button.btn-success,
a.btn-success,
input[type=submit].btn-success {
  background: linear-gradient(to right, #15803D 0%, #1a1a1a 100%) !important;
  border: 1px solid #15803D !important;
  border-left: 4px solid #22C55E !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(21,128,61,.3) !important;
}
button.btn-success:hover,
a.btn-success:hover {
  background: #fff !important;
  color: #15803D !important;
  border-color: #15803D !important;
  border-left-color: #22C55E !important;
}

/* ══════════════════════════════════════════════════════════════
   C&G SELECT / OPTION — DEFINITIVE FIX
   Native browser dropdowns are OS-rendered. The gradient hack
   is the only cross-browser way to style option backgrounds.
   ══════════════════════════════════════════════════════════════ */

/* Trigger box — black text */
select,
select.form-control,
select.form-select,
.form-control[multiple],
.form-select[multiple] {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  background-color: #ffffff !important;
}

/* All options — black text on white */
select > option,
select.form-control > option,
select.form-select > option {
  color: #1E293B !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  font-size: 14px !important;
  padding: 6px 10px !important;
}

/* Placeholder / empty option */
select > option[value=""],
select > option:disabled {
  color: #94A3B8 !important;
  background-color: #ffffff !important;
}

/* Hover — red bg, white text  (Chrome gradient hack) */
select > option:hover,
select > option:focus {
  color: #ffffff !important;
  background: linear-gradient(#C01020, #C01020) !important;
  background-color: #C01020 !important;
}

/* Checked / selected — only non-empty options get red */
select > option:checked:not([value=""]):not(:disabled) {
  color: #ffffff !important;
  background: linear-gradient(#C01020, #C01020) !important;
  background-color: #C01020 !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════
   OPTION TEXT — FORCE BLACK regardless of parent color cascade
   The box gradient header sets color:#fff on * which cascades
   into <option> elements. Use color-scheme and forced values.
   ══════════════════════════════════════════════════════════════ */

/* Force all selects and options to use dark text always */
select {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  color-scheme: light !important;
}

select option,
select > option {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  color-scheme: light !important;
}

/* Placeholder option — grey */
select option[value=""],
select option:first-child:not([value]):disabled {
  color: #64748B !important;
  -webkit-text-fill-color: #64748B !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Hover — Chrome gradient hack for red bg */
select option:not([value=""]):not(:disabled):hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(#C01020, #C01020) !important;
  background-color: #C01020 !important;
}

/* Override any parent * { color:#fff } cascade specifically for selects */
.box select,
.box > * select,
.intro-y.box select,
div[class*="flex"] select,
form select {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
}

.box select option,
.box > * select option,
div[class*="flex"] select option,
form select option {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}



/* ══════════════════════════════════════════════════════════════
   C&G SORT ORDER MODAL — compact inline ↑↓ buttons
   Targets the specific table structure inside the sort modal:
   btn-sm btn-outline-secondary with ↑ or ↓ text content.
   Layout: [↑][↓] FieldName  — all on one tight row.
   ══════════════════════════════════════════════════════════════ */

/* ── The sort modal table rows ── */
.modal-body table tr,
.overflow-auto table tr {
  height: auto !important;
}

/* ── The ↑↓ button pair container ── */
.modal-body .flex.items-center.justify-center.space-x-1,
.overflow-auto .flex.items-center.justify-center.space-x-1 {
  gap: 3px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

/* ── Each individual sort button ── */
.modal-body .flex.items-center.justify-center.space-x-1 .btn,
.overflow-auto .flex.items-center.justify-center.space-x-1 .btn {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  border-left-width: 1px !important;
  flex-shrink: 0 !important;
  /* Gradient: red top → dark bottom for ↑, dark top → red bottom for ↓ */
  background: linear-gradient(to bottom, #C01020 0%, #1a1a1a 100%) !important;
  border-color: #C01020 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Disabled state */
.modal-body .flex.items-center.justify-center.space-x-1 .btn:disabled,
.overflow-auto .flex.items-center.justify-center.space-x-1 .btn:disabled,
.modal-body .flex.items-center.justify-center.space-x-1 .btn[disabled],
.overflow-auto .flex.items-center.justify-center.space-x-1 .btn[disabled] {
  background: #CBD5E1 !important;
  border-color: #CBD5E1 !important;
  color: #94A3B8 !important;
  cursor: not-allowed !important;
  opacity: .6 !important;
}

/* Hover */
.modal-body .flex.items-center.justify-center.space-x-1 .btn:not(:disabled):hover,
.overflow-auto .flex.items-center.justify-center.space-x-1 .btn:not(:disabled):hover {
  background: #fff !important;
  color: #C01020 !important;
  border-color: #C01020 !important;
}

/* ── The td containing the buttons — tight width ── */
.modal-body table td:first-child,
.overflow-auto table td:first-child {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  padding: 4px 4px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* ── The td containing the field name — readable ── */
.modal-body table td:last-child,
.modal-body table td:nth-child(2),
.overflow-auto table td:last-child,
.overflow-auto table td:nth-child(2) {
  padding: 4px 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1E293B !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* ── Table headers in sort modal ── */
.modal-body table thead th,
.overflow-auto table thead th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #64748B !important;
  padding: 6px 8px !important;
  background: #F8F9FC !important;
  border-bottom: 2px solid #C01020 !important;
  white-space: nowrap !important;
}

/* ── Modal table rows — alternating + hover ── */
.modal-body table tbody tr:nth-child(even),
.overflow-auto table tbody tr:nth-child(even) {
  background: #F8F9FC !important;
}

.modal-body table tbody tr:hover,
.overflow-auto table tbody tr:hover {
  background: #FFF5F5 !important;
  outline: 1px solid rgba(192,16,32,.15) !important;
}

/* ── Sort modal title bar ── */
.modal-body .flex.flex-col.sm\:flex-row.items-center.border-b h6,
.modal-body h6.font-medium {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
}

/* ── Sort modal section labels (Customer Fields, Product Inquiry Fields etc) ── */
.overflow-auto .flex.space-x-6 > div > p,
.overflow-auto .flex.space-x-6 > div > h6,
.overflow-auto .flex.space-x-6 > div > div:first-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #C01020 !important;
  margin-bottom: 6px !important;
}

/* ══════════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════
   C&G QUOTATION CANCEL BUTTON
   The Cancel button uses Tailwind bg-red-500 inline-flex class.
   Override to match the C&G gradient button style.
   ══════════════════════════════════════════════════════════════ */

/* Cancel button: inline-flex + bg-red-500 (Tailwind) in table cells */
td a.inline-flex.items-center.bg-red-500,
td a.inline-flex.bg-red-500,
a.inline-flex.items-center.bg-red-500,
.inline-flex.bg-red-500 {
  background: linear-gradient(to right, #B91C1C 0%, #1a1a1a 100%) !important;
  border: 1px solid #B91C1C !important;
  border-left: 4px solid #FF1A1A !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(185,28,28,.25) !important;
  text-decoration: none !important;
  transition: all .15s !important;
}

a.inline-flex.items-center.bg-red-500:hover,
a.inline-flex.bg-red-500:hover,
.inline-flex.bg-red-500:hover {
  background: #fff !important;
  color: #B91C1C !important;
  border-color: #B91C1C !important;
  border-left-color: #FF1A1A !important;
}

/* Also fix bg-red-600 used elsewhere (Sync Error button) */
td a.inline-flex.items-center.bg-red-600,
a.inline-flex.items-center.bg-red-600 {
  background: linear-gradient(to right, #B91C1C 0%, #1a1a1a 100%) !important;
  border: 1px solid #B91C1C !important;
  border-left: 4px solid #FF1A1A !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(185,28,28,.25) !important;
  text-decoration: none !important;
}

a.inline-flex.items-center.bg-red-600:hover {
  background: #fff !important;
  color: #B91C1C !important;
  border-color: #B91C1C !important;
}

/* Fix bg-green-600 buttons (Sales Orders, Invoices, View) — green gradient */
td a.inline-flex.items-center.bg-green-600,
td a.inline-flex.bg-green-600,
a.inline-flex.items-center.bg-green-600 {
  background: linear-gradient(to right, #15803D 0%, #1a1a1a 100%) !important;
  border: 1px solid #15803D !important;
  border-left: 4px solid #22C55E !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(21,128,61,.25) !important;
  text-decoration: none !important;
}

a.inline-flex.items-center.bg-green-600:hover {
  background: #fff !important;
  color: #15803D !important;
  border-color: #15803D !important;
  border-left-color: #22C55E !important;
}

/* bg-gray-500 (Pending Approval) — slate gradient */
td a.inline-flex.items-center.bg-gray-500,
a.inline-flex.items-center.bg-gray-500 {
  background: linear-gradient(to right, #475569 0%, #1a1a1a 100%) !important;
  border: 1px solid #475569 !important;
  border-left: 4px solid #94A3B8 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
}

/* ══════════════════════════════════════════════════════════════
   C&G QUOTATION ACTION DROPDOWN (Print / Versions / etc.)
   These use Tailwind group-hover pattern with bg-white panels.
   The items inherit white text from parent — override to black.
   ══════════════════════════════════════════════════════════════ */

/* The dropdown panel */
.group:hover > div.absolute,
div.absolute.bg-white.shadow-lg.rounded-md,
div[class*="absolute"][class*="bg-white"][class*="shadow"] {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  padding: 4px !important;
  z-index: 9999 !important;
}

/* All anchor items inside the dropdown panel */
div.absolute.bg-white a,
div[class*="absolute"][class*="bg-white"] a,
.group > div.absolute a {
  display: block !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  text-decoration: none !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  transition: background .12s, color .12s !important;
  background: transparent !important;
}

/* Hover: red gradient, white text */
div.absolute.bg-white a:hover,
div[class*="absolute"][class*="bg-white"] a:hover,
.group > div.absolute a:hover,
div.absolute.bg-white a.hover\:bg-gray-100:hover,
a.hover\:bg-gray-100:hover {
  background: linear-gradient(to right, #C01020 0%, #1a1a1a 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Ensure visibility when group-hover shows the panel */
.group:hover .opacity-0,
.group:hover .invisible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ══════════════════════════════════════════════════════════════
   C&G CENTRED TEXT — Placeholders, select values, totals
   ══════════════════════════════════════════════════════════════ */

/* ── Placeholder text centred in all inputs ── */
.space-y-5 input.form-control,
div.mt-3[style*="flex-wrap"] input.form-control {
  text-align: left !important;
  vertical-align: middle !important;
}

/* ── Select: text left-aligned, vertically centred ── */
.space-y-5 select.form-control,
div.mt-3[style*="flex-wrap"] select.form-control {
  text-align: left !important;
  text-align-last: left !important;
  padding-left: 10px !important;
  vertical-align: middle !important;
}

/* ── Select options — left aligned ── */
.space-y-5 select.form-control option,
div.mt-3[style*="flex-wrap"] select.form-control option {
  text-align: left !important;
}

/* ── Placeholders left-aligned ── */
.space-y-5 input.form-control::placeholder,
div.mt-3[style*="flex-wrap"] input.form-control::placeholder {
  text-align: left !important;
  color: #94A3B8 !important;
}

/* ── Phone number input — left aligned ── */
select[wire\:model\.live="countryCode"] + input,
select[wire\:model="countryCode"] + input {
  text-align: left !important;
}
select[wire\:model\.live="countryCode"] + input::placeholder,
select[wire\:model="countryCode"] + input::placeholder {
  text-align: left !important;
}

/* ── Totals: Total Before VAT, VAT, Gross Total ── */
#total-before-tax,
#total-tax,
#total-after-tax {
  text-align: center !important;
  font-weight: 700 !important;
  background: #F8FAFC !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 5px !important;
  height: 32px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  width: 160px !important;
  min-width: 160px !important;
  cursor: default !important;
  box-shadow: none !important;
  display: inline-block !important;
}

/* Gross Total — same style as the other totals, bold border only */
#total-after-tax {
  background: #F8FAFC !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  border: 1px solid #CBD5E1 !important;
  border-left: 3px solid #C01020 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  height: 32px !important;
}

/* ── Quotation Send button hover — white bg, dark text ── */
a.inline-flex.items-center.btn-primary:hover,
a.inline-flex.btn-primary:hover,
span.inline-flex.items-center.btn-primary:hover,
.inline-flex.btn-primary:hover {
  background: #fff !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  border-color: #C01020 !important;
}

/* All svg/icons inside on hover — turn dark */
a.inline-flex.items-center.btn-primary:hover svg,
a.inline-flex.btn-primary:hover svg,
a.inline-flex.items-center.btn-primary:hover i {
  color: #1E293B !important;
  stroke: #1E293B !important;
}


/* ══════════════════════════════════════════════════════════════
   C&G INQUIRY FORM — COMPACT + RESPONSIVE
   Height reduced. Optimised for desktop, tablet & mobile.
   Single source of truth — overrides all earlier field rules.
   ══════════════════════════════════════════════════════════════ */

/* ── Section headings ── */
.space-y-5 h2.font-bold,
.space-y-5 h2.font-medium {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: #C01020 !important;
  padding: 3px 10px !important;
  background: linear-gradient(to right,rgba(192,16,32,.07),transparent) !important;
  border-left: 3px solid #C01020 !important;
  border-radius: 0 3px 3px 0 !important;
  margin: 5px 0 3px !important;
  display: block !important;
}

/* ── Field grid wrapper ── */
div.mt-3[style*="flex-wrap"],
.mt-7.mb-7[style*="flex-wrap"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px 10px !important;
  align-items: flex-start !important;
  margin-top: 4px !important;
}

/* ── Each field cell ── */
div.mt-3[style*="flex-wrap"] > div,
.mt-7.mb-7[style*="flex-wrap"] > div {
  flex: 1 1 160px !important;
  min-width: 140px !important;
  max-width: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  box-sizing: border-box !important;
}

/* ── Labels ── */
.space-y-5 label.form-label,
.mt-7.mb-7 label.form-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.space-y-5 label.form-label strong { font-weight:700!important; font-size:inherit!important; }
.space-y-5 label.form-label span[style*="color:red"] { color:#C01020!important; font-size:11px!important; margin-left:1px!important; }

/* ── All inputs & selects: 30px height (compact) ── */
.space-y-5 input.form-control,
.space-y-5 select.form-control,
.mt-7.mb-7 input.form-control,
.mt-7.mb-7 select.form-control,
div.mt-3[style*="flex-wrap"] input.form-control,
div.mt-3[style*="flex-wrap"] select.form-control {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 9px !important;
  font-size: 12.5px !important;
  font-family: 'Source Sans 3', Arial, sans-serif !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 4px !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  line-height: 30px !important;
  width: 100% !important;
  display: block !important;
  text-align: left !important;
  text-align-last: left !important;
  vertical-align: middle !important;
}
.space-y-5 input.form-control:focus,
.space-y-5 select.form-control:focus,
div.mt-3[style*="flex-wrap"] input.form-control:focus,
div.mt-3[style*="flex-wrap"] select.form-control:focus {
  border-color: #C01020 !important;
  box-shadow: 0 0 0 2px rgba(192,16,32,.1) !important;
  outline: none !important;
}
.space-y-5 input.form-control::placeholder,
div.mt-3[style*="flex-wrap"] input.form-control::placeholder {
  color: #94A3B8 !important;
  font-size: 12px !important;
}
.space-y-5 textarea.form-control,
div.mt-3[style*="flex-wrap"] textarea.form-control {
  height: auto !important;
  min-height: 56px !important;
  max-height: none !important;
  padding: 5px 9px !important;
  line-height: 1.4 !important;
  resize: vertical !important;
}

/* ── PHONE wrapper: both elements 30px ── */
div[style*="display:flex"][style*="align-items:center"][style*="gap:0"],
div[style*="display: flex"][style*="align-items: center"][style*="gap: 0"] {
  display: flex !important;
  align-items: stretch !important;
  height: 30px !important;
  min-height: 30px !important;
  gap: 0 !important;
  width: 100% !important;
}

/* Country code select */
select[wire\:model\.live="countryCode"],
select[wire\:model="countryCode"],
select[wire\:model\.defer="countryCode"] {
  flex-shrink: 0 !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 0 0 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-align: left !important;
  text-align-last: left !important;
  line-height: 30px !important;
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  border-right: none !important;
  border-radius: 4px 0 0 4px !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  overflow: hidden !important;
  display: block !important;
}
select[wire\:model\.live="countryCode"] option,
select[wire\:model="countryCode"] option {
  font-size: 11px !important; color: #1E293B !important; background:#fff !important;
}

/* Phone input */
select[wire\:model\.live="countryCode"] + input,
select[wire\:model="countryCode"] + input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 9px !important;
  font-size: 12.5px !important;
  line-height: 30px !important;
  border: 1px solid #CBD5E1 !important;
  border-left: none !important;
  border-radius: 0 4px 4px 0 !important;
  background: #ffffff !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  box-sizing: border-box !important;
  display: block !important;
  text-align: left !important;
}
select[wire\:model\.live="countryCode"] + input:focus,
select[wire\:model="countryCode"] + input:focus {
  border-color: #C01020 !important;
  box-shadow: 0 0 0 2px rgba(192,16,32,.1) !important;
  outline: none !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ── Section cards ── */
.space-y-5 > .mt-3 {
  background: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 7px !important;
  padding: 8px 12px 12px !important;
  margin-top: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.space-y-5 > .mt-3 > div.mt-3 { margin-top: 3px !important; }
.space-y-5 > * + * { margin-top: 5px !important; }

/* ── Error messages ── */
.space-y-5 small span[style*="color:red"] {
  font-size: 10px !important; color:#C01020!important; display:block!important; margin-top:1px!important;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 900px) & Mobile (≤ 600px)
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet: 2 columns ── */
@media (max-width: 900px) {

  /* Sidebar collapses */
  .side-nav {
    position: fixed !important;
    left: -240px !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 999 !important;
    transition: left .25s ease !important;
  }
  .side-nav.open { left: 0 !important; }

  /* Content full width */
  .content { margin-left: 0 !important; width: 100% !important; }

  /* Top bar */
  .top-bar { padding: 0 12px !important; height: 50px !important; }

  /* Field grid: 2 columns on tablet */
  div.mt-3[style*="flex-wrap"] > div,
  .mt-7.mb-7[style*="flex-wrap"] > div {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  /* Tables: allow horizontal scroll */
  .overflow-x-auto, div[style*="overflow-x:auto"], div[style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Quotation buttons: allow wrap */
  .w-full.flex.justify-end { flex-wrap: wrap !important; gap: 6px !important; }
}

/* ── Mobile: 1 column ── */
@media (max-width: 600px) {

  /* Field grid: full width */
  div.mt-3[style*="flex-wrap"] > div,
  .mt-7.mb-7[style*="flex-wrap"] > div {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Inputs slightly taller on touch */
  .space-y-5 input.form-control,
  .space-y-5 select.form-control,
  div.mt-3[style*="flex-wrap"] input.form-control,
  div.mt-3[style*="flex-wrap"] select.form-control,
  select[wire\:model\.live="countryCode"],
  select[wire\:model="countryCode"] {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 14px !important;
    line-height: 38px !important;
  }

  select[wire\:model\.live="countryCode"] + input,
  select[wire\:model="countryCode"] + input {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 14px !important;
    line-height: 38px !important;
  }

  div[style*="display:flex"][style*="align-items:center"][style*="gap:0"],
  div[style*="display: flex"][style*="align-items: center"][style*="gap: 0"] {
    height: 38px !important;
    min-height: 38px !important;
  }

  /* Stack topbar: hide brand text */
  .top-bar > a > div { display: none !important; }

  /* Sidebar overlay */
  body.sidebar-open::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.5) !important;
    z-index: 998 !important;
  }

  /* Tables horizontal scroll with momentum */
  div[style*="overflow-x"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Dashboard cards: 2 per row */
  div[style*="grid-template-columns:repeat(auto-fit,minmax(170px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Pagination: smaller */
  .pagination .page-item .page-link {
    padding: 4px 7px !important;
    font-size: 11px !important;
    min-width: 28px !important;
  }
}

/* ── Viewport meta safety ── */
@media (max-width: 480px) {
  html { font-size: 13px !important; }

  .btn { font-size: 12px !important; padding: 6px 12px !important; }
  .btn-sm { padding: 3px 8px !important; font-size: 11px !important; }

  table.table thead th { font-size: 9px !important; padding: 6px 8px !important; }
  table.table tbody td { font-size: 12px !important; padding: 7px 8px !important; }
}

/* ══════════════════════════════════════════════════════════════
   C&G DASHBOARD KPI CARDS — Single row, uniform size
   ══════════════════════════════════════════════════════════════ */

/* Force all 7 cards same height */
.cg-stat-card {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow .2s !important;
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Accent bar — thinner */
.cg-stat-card .cg-card-accent {
  height: 3px !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Icon box — smaller */
.cg-stat-card .cg-card-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}
.cg-stat-card .cg-card-icon i,
.cg-stat-card .cg-card-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* Label — smaller */
.cg-stat-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #94A3B8 !important;
  margin-bottom: 3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Value — compact */
.cg-stat-value {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  color: #1E293B !important;
}

/* Sub label */
.cg-stat-sub {
  font-size: 10.5px !important;
  color: #94A3B8 !important;
  margin-top: 3px !important;
  white-space: nowrap !important;
}

/* Responsive — 2 rows on tablet, wrap on mobile */
@media (max-width: 1200px) {
  div[style*="repeat(7,1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 800px) {
  div[style*="repeat(7,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  div[style*="repeat(7,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   C&G LINE-ITEM TABLE — Clean spreadsheet style
   1. White background throughout (no grey stripes)
   2. Minimal cell padding — content fills the cell
   3. First 3 columns sticky: #, Item Code, Description, Qty
   4. Sticky cols always white — no text overlap on scroll
   5. Dotted column dividers instead of red separator line
   ══════════════════════════════════════════════════════════════ */

/* ── Table base ── */
table:has(tr.column-row),
#columns-body {
  border-collapse: collapse !important;
  background: #fff !important;
}

/* ── ALL rows: white bg, no stripes ── */
tr.column-row,
tr.column-row:nth-child(even),
tr.column-row:nth-child(odd) {
  background: #fff !important;
  height: 36px !important;
}

tr.column-row:hover {
  background: #FFF8F8 !important;
}

/* ── All cells: minimal padding, dotted dividers ── */
tr.column-row td {
  padding: 0 !important;
  margin: 0 !important;
  border-top: 1px solid #F1F5F9 !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: 1px dotted #CBD5E1 !important;
  height: 36px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

tr.column-row td:last-child {
  border-right: none !important;
}

/* ── Inputs inside cells: fill entire cell ── */
tr.column-row td input.erp-input,
tr.column-row td input.form-control,
tr.column-row td select.erp-input,
tr.column-row td select.form-control,
tr.column-row td textarea.erp-input,
tr.column-row td .erp-input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100% !important;
  height: 36px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  background: transparent !important;
  resize: none !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Focus — subtle red inset */
tr.column-row td input.erp-input:focus,
tr.column-row td select.erp-input:focus,
tr.column-row td textarea.erp-input:focus,
tr.column-row td input.form-control:focus,
tr.column-row td select.form-control:focus {
  background: #FFF0F0 !important;
  box-shadow: inset 0 0 0 2px #C01020 !important;
  z-index: 2 !important;
  position: relative !important;
}

/* Readonly cells */
tr.column-row td input[readonly].erp-input,
tr.column-row td input[readonly].form-control {
  background: #F8FAFC !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 600 !important;
  cursor: default !important;
}

/* ── STICKY COLUMNS: white bg always ── */

/* # (left:0) */
tr.column-row td[style*="left:0px"],
tr.column-row td[style*="left: 0px"] {
  position: sticky !important;
  left: 0 !important;
  z-index: 12 !important;
  background: #fff !important;
  border-right: 1px dotted #CBD5E1 !important;
}

/* Item Code (left:40px) */
tr.column-row td[style*="left:40px"],
tr.column-row td[style*="left: 40px"] {
  position: sticky !important;
  left: 40px !important;
  z-index: 12 !important;
  background: #fff !important;
  border-right: 1px dotted #CBD5E1 !important;
}

/* Description (left:160px) */
tr.column-row td[style*="left:160px"],
tr.column-row td[style*="left: 160px"] {
  position: sticky !important;
  left: 160px !important;
  z-index: 12 !important;
  background: #fff !important;
  border-right: 1px dotted #CBD5E1 !important;
}

/* Quantity (left:360px) — NOW ALSO STICKY */
tr.column-row td[style*="left:360px"],
tr.column-row td[style*="left: 360px"] {
  position: sticky !important;
  left: 360px !important;
  z-index: 12 !important;
  background: #fff !important;
  border-right: 1px dotted #CBD5E1 !important;
  /* Subtle shadow to mark freeze boundary after qty */
  box-shadow: 3px 0 6px rgba(0,0,0,.06) !important;
}

/* Hover: keep white bg on sticky cells */
tr.column-row:hover td[style*="left:0px"],
tr.column-row:hover td[style*="left: 0px"],
tr.column-row:hover td[style*="left:40px"],
tr.column-row:hover td[style*="left: 40px"],
tr.column-row:hover td[style*="left:160px"],
tr.column-row:hover td[style*="left: 160px"],
tr.column-row:hover td[style*="left:360px"],
tr.column-row:hover td[style*="left: 360px"] {
  background: #FFF8F8 !important;
}

/* ── THEAD sticky ── */
table:has(tr.column-row) thead th {
  background: #1E293B !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 8px 6px !important;
  border-right: 1px dotted rgba(255,255,255,.2) !important;
  border-bottom: none !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

table:has(tr.column-row) thead th:last-child {
  border-right: none !important;
}

/* Sticky header cells */
table:has(tr.column-row) thead th[style*="left:0px"],
table:has(tr.column-row) thead th[style*="left: 0px"] {
  position: sticky !important; left: 0 !important; z-index: 22 !important;
}
table:has(tr.column-row) thead th[style*="left:40px"],
table:has(tr.column-row) thead th[style*="left: 40px"] {
  position: sticky !important; left: 40px !important; z-index: 22 !important;
}
table:has(tr.column-row) thead th[style*="left:160px"],
table:has(tr.column-row) thead th[style*="left: 160px"] {
  position: sticky !important; left: 160px !important; z-index: 22 !important;
}
table:has(tr.column-row) thead th[style*="left:360px"],
table:has(tr.column-row) thead th[style*="left: 360px"] {
  position: sticky !important;
  left: 360px !important;
  z-index: 22 !important;
  /* Freeze boundary shadow on qty header */
  box-shadow: 3px 0 6px rgba(0,0,0,.1) !important;
}

/* ── ACTION column: sticky right ── */
tr.column-row td:last-child {
  position: sticky !important;
  right: 0 !important;
  background: #fff !important;
  z-index: 12 !important;
  border-left: 1px dotted #CBD5E1 !important;
  border-right: none !important;
  white-space: nowrap !important;
  width: 106px !important;
  min-width: 106px !important;
  padding: 3px 4px !important;
  text-align: center !important;
}

tr.column-row:hover td:last-child {
  background: #FFF8F8 !important;
}

/* Action buttons: side by side */
tr.column-row td:last-child button,
tr.column-row td:last-child .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 26px !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  border-left-width: 1px !important;
  margin: 0 1px !important;
}

/* Stock */
tr.column-row td:last-child button:first-child,
tr.column-row td:last-child .btn:first-child {
  background: linear-gradient(to right,#1D4ED8,#1a1a1a) !important;
  border-color: #1D4ED8 !important; color: #fff !important;
}
tr.column-row td:last-child button:first-child:hover,
tr.column-row td:last-child .btn:first-child:hover {
  background: #fff !important; color: #1D4ED8 !important; border-color: #1D4ED8 !important;
}

/* Delete */
tr.column-row td:last-child button:last-child,
tr.column-row td:last-child .btn:last-child {
  background: linear-gradient(to right,#B91C1C,#1a1a1a) !important;
  border-color: #B91C1C !important; color: #fff !important;
}
tr.column-row td:last-child button:last-child:hover,
tr.column-row td:last-child .btn:last-child:hover {
  background: #fff !important; color: #B91C1C !important; border-color: #B91C1C !important;
}

/* Action header */
table:has(tr.column-row) thead th:last-child {
  position: sticky !important;
  right: 0 !important;
  z-index: 23 !important;
  text-align: center !important;
  border-left: 1px dotted rgba(255,255,255,.2) !important;
  border-right: none !important;
}

/* ── Quotation view: different left positions ── */
/* left:30px = Item Code, left:150px = Description, left:330px = Qty */
tr.column-row td[style*="left:30px"],
tr.column-row td[style*="left: 30px"] {
  position: sticky !important; left: 30px !important;
  z-index: 12 !important; background: #fff !important;
  border-right: 1px dotted #CBD5E1 !important;
}
tr.column-row td[style*="left:150px"],
tr.column-row td[style*="left: 150px"] {
  position: sticky !important; left: 150px !important;
  z-index: 12 !important; background: #fff !important;
  border-right: 1px dotted #CBD5E1 !important;
}
tr.column-row td[style*="left:330px"],
tr.column-row td[style*="left: 330px"] {
  position: sticky !important; left: 330px !important;
  z-index: 12 !important; background: #fff !important;
  border-right: 1px dotted #CBD5E1 !important;
  box-shadow: 3px 0 6px rgba(0,0,0,.06) !important;
}
tr.column-row:hover td[style*="left:30px"],
tr.column-row:hover td[style*="left: 30px"],
tr.column-row:hover td[style*="left:150px"],
tr.column-row:hover td[style*="left: 150px"],
tr.column-row:hover td[style*="left:330px"],
tr.column-row:hover td[style*="left: 330px"] {
  background: #FFF8F8 !important;
}

/* Quotation thead sticky */
table:has(tr.column-row) thead th[style*="left:30px"],
table:has(tr.column-row) thead th[style*="left: 30px"] {
  position: sticky !important; left: 30px !important; z-index: 22 !important;
}
table:has(tr.column-row) thead th[style*="left:150px"],
table:has(tr.column-row) thead th[style*="left: 150px"] {
  position: sticky !important; left: 150px !important; z-index: 22 !important;
}
table:has(tr.column-row) thead th[style*="left:330px"],
table:has(tr.column-row) thead th[style*="left: 330px"] {
  position: sticky !important; left: 330px !important; z-index: 22 !important;
  box-shadow: 3px 0 6px rgba(0,0,0,.1) !important;
}

/* ══════════════════════════════════════════════════════════════
   C&G LINE-ITEM TABLE — Header grey bg + dotted all columns
   ══════════════════════════════════════════════════════════════ */

/* ── Table header: dark grey background ── */
table:has(tr.column-row) thead th {
  background: #374151 !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 8px 6px !important;
  border-right: 1px dotted rgba(255,255,255,.25) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-top: none !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

table:has(tr.column-row) thead th:last-child {
  border-right: none !important;
}

/* ── First column (#) cells: light grey background ── */
tr.column-row td:first-child,
tr.column-row td.row-number,
tr.column-row td[style*="left:0px"],
tr.column-row td[style*="left: 0px"] {
  background: #F1F5F9 !important;
  color: #64748B !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-right: 1px dotted #94A3B8 !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 12 !important;
}

/* First col on hover */
tr.column-row:hover td:first-child,
tr.column-row:hover td.row-number,
tr.column-row:hover td[style*="left:0px"],
tr.column-row:hover td[style*="left: 0px"] {
  background: #E2E8F0 !important;
}

/* First thead th: grey matching row number column */
table:has(tr.column-row) thead th:first-child,
table:has(tr.column-row) thead th[style*="left:0px"],
table:has(tr.column-row) thead th[style*="left: 0px"] {
  background: #374151 !important;
  border-right: 1px dotted rgba(255,255,255,.25) !important;
}

/* ── Dotted borders on ALL body cells ── */
tr.column-row td {
  border-right: 1px dotted #CBD5E1 !important;
  border-top: 1px solid #F1F5F9 !important;
  border-bottom: none !important;
  border-left: none !important;
}

tr.column-row td:last-child {
  border-right: none !important;
}

/* ── Sticky header cells — override background ── */
table:has(tr.column-row) thead th[style*="left:40px"],
table:has(tr.column-row) thead th[style*="left: 40px"],
table:has(tr.column-row) thead th[style*="left:160px"],
table:has(tr.column-row) thead th[style*="left: 160px"],
table:has(tr.column-row) thead th[style*="left:360px"],
table:has(tr.column-row) thead th[style*="left: 360px"],
table:has(tr.column-row) thead th[style*="left:30px"],
table:has(tr.column-row) thead th[style*="left: 30px"],
table:has(tr.column-row) thead th[style*="left:150px"],
table:has(tr.column-row) thead th[style*="left: 150px"],
table:has(tr.column-row) thead th[style*="left:330px"],
table:has(tr.column-row) thead th[style*="left: 330px"] {
  background: #374151 !important;
}

/* ── Textarea inside line-item cells: remove border, fill cell ── */
tr.column-row td textarea,
tr.column-row td textarea.erp-input,
tr.column-row td textarea.form-control {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 4px 4px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  resize: none !important;
  box-sizing: border-box !important;
  font-size: 12.5px !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  overflow: hidden !important;
  font-family: 'Source Sans 3', Arial, sans-serif !important;
  line-height: 1.4 !important;
}

tr.column-row td textarea:focus,
tr.column-row td textarea.erp-input:focus,
tr.column-row td textarea.form-control:focus {
  background: #FFF0F0 !important;
  box-shadow: inset 0 0 0 2px #C01020 !important;
  outline: none !important;
  z-index: 3 !important;
}

/* Also hide the resize handle completely */
tr.column-row td textarea::-webkit-resizer { display: none !important; }
tr.column-row td textarea { resize: none !important; }


/* ══════════════════════════════════════════════════════════════
   C&G LINE-ITEM: Delivery Status editable + wider price cols
   ══════════════════════════════════════════════════════════════ */

/* ── Delivery Status textarea: explicitly editable, white bg ── */
tr.column-row td textarea.delivery-status,
.delivery-status {
  background: #fff !important;
  background-color: #fff !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  cursor: text !important;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  opacity: 1 !important;
  -webkit-opacity: 1 !important;
  border: none !important;
  resize: none !important;
  width: 100% !important;
  height: 36px !important;
  padding: 4px 6px !important;
  font-size: 12.5px !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* ── Wider price/total columns — match price-after-discount (120px) ── */
/* Override inline width:110px on unit price, gross price, line total, gross total */
tr.column-row td input.erp-input[style*="width:110px"],
tr.column-row td input[style*="width:110px"],
tr.column-row td input.erp-input[style*="width: 110px"],
tr.column-row td input[style*="width: 110px"] {
  width: 130px !important;
  min-width: 130px !important;
}

/* Target by class names from the markup */
tr.column-row td input.unit-price,
tr.column-row td input.gross-price,
tr.column-row td input.line-total,
tr.column-row td input.gross-total,
tr.column-row td input[class*="unit-price"],
tr.column-row td input[class*="gross-price"],
tr.column-row td input[class*="line-total"],
tr.column-row td input[class*="gross-total"] {
  width: 130px !important;
  min-width: 130px !important;
}

/* ── Non-sticky cells: ensure they're above sticky column overlays ── */
/* Delivery Status and other non-sticky cells must be clickable */
tr.column-row td:not([style*="sticky"]) {
  position: relative !important;
  z-index: 5 !important;
}

/* Delivery Status textarea: fully interactive */
tr.column-row td textarea.delivery-status,
td textarea.delivery-status,
.delivery-status {
  position: relative !important;
  z-index: 6 !important;
  pointer-events: all !important;
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  background: #fff !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  opacity: 1 !important;
}

/* ══ Delivery Status: force fully interactive ══ */
td textarea.delivery-status,
tr.column-row td textarea.delivery-status {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 36px !important;
  padding: 4px 6px !important;
  font-size: 12.5px !important;
  font-family: 'Source Sans 3', Arial, sans-serif !important;
  color: #1E293B !important;
  background: transparent !important;
  cursor: text !important;
  pointer-events: auto !important;
  resize: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 17 !important;
  line-height: 1.4 !important;
  outline: none !important;
}
td textarea.delivery-status:focus,
tr.column-row td textarea.delivery-status:focus {
  background: #FFF0F0 !important;
  outline: 2px solid #C01020 !important;
  outline-offset: -2px !important;
}

/* ── KPI card overflow fix ── */
.cg-stat-card {
  min-width: 0 !important;
  overflow: hidden !important;
}
.cg-stat-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
.cg-stat-value {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.cg-stat-sub {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Prevent icon from shrinking card */
.cg-stat-card .cg-card-icon {
  flex-shrink: 0 !important;
}
/* The flex row inside each card */
.cg-stat-card > div[style*="display:flex"] {
  min-width: 0 !important;
  gap: 6px !important;
}
.cg-stat-card > div[style*="display:flex"] > div:first-child {
  min-width: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════
   C&G GLOBAL TYPOGRAPHY + KA PLANNER NORMALISATION
   Salesforce sizing: 13px body, 12px labels, 11px meta
   ══════════════════════════════════════════════════════════════ */

/* ── Global font size reset — Salesforce-style ── */
body, html {
  font-size: 13px !important;
  font-family: 'Source Sans 3', 'Salesforce Sans', Arial, sans-serif !important;
}

/* All text elements default to 13px */
p, span, div, li, td, th, label, input, select, textarea, button, a {
  font-family: 'Source Sans 3', 'Salesforce Sans', Arial, sans-serif !important;
  font-size: inherit !important;
}

/* Headings scale */
h1 { font-size: 20px !important; }
h2 { font-size: 17px !important; }
h3 { font-size: 15px !important; }
h4 { font-size: 14px !important; }
h5, h6 { font-size: 13px !important; }

/* ── Table cells — uniform 13px ── */
table.table tbody td,
table tbody td,
.table td {
  font-size: 13px !important;
  padding: 8px 12px !important;
  vertical-align: middle !important;
  color: #1E293B !important;
}

table.table thead th,
table thead th,
.table th {
  font-size: 11px !important;
  padding: 8px 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #64748B !important;
}

/* ── KA PLANNER: Customer type badges ── */
/* The "Customer" blue badge buttons — make them compact pills */
table tbody td .btn:not(.btn-sm):not(.btn-danger):not(.btn-primary):not(.btn-success),
table tbody td a.btn:not(.btn-sm):not(.btn-danger):not(.btn-primary):not(.btn-success) {
  font-size: 11px !important;
  padding: 3px 10px !important;
  height: auto !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  border-left-width: 1px !important;
}

/* The blue "Customer" / "Lead" type badges specifically */
table tbody td .btn.bg-blue-600,
table tbody td .btn[style*="background:#1d4ed8"],
table tbody td .btn[style*="background: #1d4ed8"],
table tbody td .btn[class*="btn-info"] {
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  height: auto !important;
  line-height: 1.4 !important;
  border-left-width: 1px !important;
}

/* ── Column search inputs ── */
table thead tr:nth-child(2) input,
table thead tr + tr input,
.table-search input,
thead input.form-control {
  height: 28px !important;
  font-size: 12px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  border: 1px solid #CBD5E1 !important;
  background: #fff !important;
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  width: 100% !important;
}
thead input.form-control:focus {
  border-color: #C01020 !important;
  box-shadow: 0 0 0 2px rgba(192,16,32,.1) !important;
  outline: none !important;
}

/* ── Page/box header action buttons ── */
.box > .flex.items-center.border-b .btn,
.box > .p-5.flex.items-center.border-b .btn {
  font-size: 12px !important;
  padding: 0 14px !important;
  min-height: 34px !important;
  height: 34px !important;
  letter-spacing: .03em !important;
  font-weight: 700 !important;
}

/* ── Uniform table row height ── */
table.table tbody tr,
table tbody tr {
  height: auto !important;
  min-height: 0 !important;
}

/* ── Table cells: allow natural width, no aggressive truncation ── */
table.table tbody td {
  white-space: nowrap !important;
  overflow: visible !important;
}

/* ── KA PLANNER: Customer / Lead / SAP type badges ── */

/* The customer name cell: allow name + badge on same line */
table.table tbody td a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: #1E293B !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* Customer badge (bg-blue-900) */
span.btn.btn-sm.bg-blue-900,
.btn.btn-sm.bg-blue-900 {
  background: linear-gradient(to right, #1E3A5F 0%, #1a1a1a 100%) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  border-left: 3px solid #60A5FA !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  line-height: 1.4 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: auto !important;
  box-shadow: none !important;
}

/* Add SAP icon before Customer badge */
span.btn.btn-sm.bg-blue-900::before {
  content: '⬡' !important;
  font-size: 9px !important;
  opacity: .8 !important;
  margin-right: 2px !important;
}

/* Lead badge — amber style */
span.btn.btn-sm.bg-blue-900:has-text('Lead'),
span.btn.btn-sm.bg-blue-900[data-type="lead"] {
  background: linear-gradient(to right, #B45309 0%, #1a1a1a 100%) !important;
  border-left-color: #FBBF24 !important;
}

/* Hover on customer name links */
table.table tbody td a:hover {
  color: #C01020 !important;
}
table.table tbody td a:hover span.btn.btn-sm {
  opacity: .85 !important;
}

/* ══════════════════════════════════════════════════════════════
   C&G KPI CARD — Hover tooltip + label fix
   ══════════════════════════════════════════════════════════════ */

/* ── Stop label truncation — use smaller font to fit ── */
.cg-kpi-card .cg-stat-label {
  font-size: 9px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.2 !important;
  word-break: break-word !important;
  max-width: 100% !important;
  min-height: 22px !important;
}

.cg-kpi-card .cg-stat-value {
  font-size: 22px !important;
  white-space: nowrap !important;
}

.cg-kpi-card .cg-stat-sub {
  font-size: 10px !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Inner flex container — allow text to reflow */
.cg-kpi-card > div[style*="display:flex"] > div {
  min-width: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
}

/* ── Hover tooltip ── */
.cg-kpi-card {
  position: relative !important;
  cursor: pointer !important;
}

/* Hover overlay panel */
.cg-kpi-card .cg-kpi-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1E293B;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  z-index: 999;
  pointer-events: none;
  text-align: left;
  min-width: 160px;
  border-left: 3px solid #C01020;
}

/* Arrow */
.cg-kpi-card .cg-kpi-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1E293B;
}

.cg-kpi-card:hover .cg-kpi-tooltip {
  display: block;
}

.cg-kpi-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
  transform: translateY(-2px) !important;
  transition: transform .15s, box-shadow .15s !important;
}

/* ── Line chart container — hover hint ── */
#cg-bar-chart {
  cursor: crosshair !important;
}

/* ── Action buttons in table cells — force white text ── */
table.table tbody td .btn,
table.table tbody td a.btn,
table.table tbody td button.btn,
table tbody td .btn,
table tbody td a.btn,
table tbody td button.btn {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* On hover — revert to contextual colour (already set per btn class) */
table.table tbody td .btn-primary:hover,
table tbody td .btn-primary:hover { color: #C01020 !important; -webkit-text-fill-color: #C01020 !important; }
table.table tbody td .btn-danger:hover,
table tbody td .btn-danger:hover  { color: #B91C1C !important; -webkit-text-fill-color: #B91C1C !important; }
table.table tbody td .btn-success:hover,
table tbody td .btn-success:hover { color: #15803D !important; -webkit-text-fill-color: #15803D !important; }
table.table tbody td .btn-warning:hover,
table tbody td .btn-warning:hover { color: #B45309 !important; -webkit-text-fill-color: #B45309 !important; }
table.table tbody td .btn-info:hover,
table tbody td .btn-info:hover    { color: #1D4ED8 !important; -webkit-text-fill-color: #1D4ED8 !important; }
table.table tbody td .btn-secondary:hover,
table tbody td .btn-secondary:hover { color: #0F766E !important; -webkit-text-fill-color: #0F766E !important; }

/* ── All Leads: Edit / New Inquiry — anchor inside btn-primary span ── */
span.btn-primary a,
span.btn-primary a:visited,
span.btn-primary a:link,
td span.btn-primary a,
td span[class*="btn-"] a,
td span[class*="bg-"] a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
}
span.btn-primary a:hover,
td span.btn-primary a:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: .85 !important;
}

/* ── Quotation version: "Edited by" badge on gradient bar ── */
/* The span uses bg-gray-100 border-gray-200 text-gray-500 on a dark red bg */
.flex.flex-col.sm\:flex-row.items-center.p-5.border-b span.bg-gray-100,
h2 span.bg-gray-100,
h2 span[class*="bg-gray-"] {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.25) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

h2 span.bg-gray-100 strong,
h2 span[class*="bg-gray-"] strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

h2 span.bg-gray-100 svg,
h2 span[class*="bg-gray-"] svg {
  color: rgba(255,255,255,.7) !important;
  stroke: rgba(255,255,255,.7) !important;
}