/* ============================================================================
 * Modern override layer
 *
 * Loaded AFTER the user's theme CSS in layout/header.blade.php so it always
 * wins by cascade. Endgame: merge these rules into a fresh style.css and
 * promote leventures as the default theme, removing this override file.
 *
 * Organized into:
 *   1. Foundation tokens (colors, radius, shadows, type scale)
 *   2. Typography
 *   3. Surfaces (cards, modals, panels)
 *   4. Inputs & buttons
 *   5. Status & badges
 *   6. Tables & lists
 *   7. Navigation
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Neutrals - warm grays */
  --modern-bg:           #fafaf9;
  --modern-surface:      #ffffff;
  --modern-surface-2:    #f5f5f4;
  --modern-border:       #e7e5e4;
  --modern-divider:      #f0efed;

  --modern-text:         #1c1917;
  --modern-text-muted:   #57534e;
  --modern-text-faint:   #a8a29e;

  /* Brand accent - restrained indigo */
  --modern-accent:       #4f46e5;
  --modern-accent-hover: #4338ca;
  --modern-accent-soft:  #eef2ff;
  --modern-accent-2:     #0891b2;
  --modern-focus:        rgba(79, 70, 229, .16);
  --modern-sidebar-active: #f4f6ff;

  /* Status — use GC's exact stock hex values so they stay consistent across
     pills, badges, progress bars, kanban borders, and the dashboard charts.
     Soft variants are light tints of the same hue for badge backgrounds. */
  --modern-success:      #24d2b5;
  --modern-success-soft: #d3f5ed;
  --modern-warning:      #ff9041;
  --modern-warning-soft: #ffe2cd;
  --modern-danger:       #ff5c6c;
  --modern-danger-soft:  #ffd6da;
  --modern-info:         #20aee3;
  --modern-info-soft:    #d2eefa;
  --modern-lime:         #cddc39;
  --modern-lime-soft:    #eef3c5;
  --modern-default:      #cccccc;
  --modern-default-soft: #ebebeb;

  /* Radius */
  --modern-radius-sm: 6px;
  --modern-radius:    10px;
  --modern-radius-lg: 14px;

  /* Shadows */
  --modern-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --modern-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 6px rgba(15, 23, 42, .04);
  --modern-shadow:    0 1px 3px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .06);
  --modern-shadow-lg: 0 4px 8px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .08);
}

/* --------------------------------------------------------------------------
 * Typography
 * --------------------------------------------------------------------------*/
body, .x-wrapper, .x-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  color: var(--modern-text);
  background: var(--modern-bg);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body,
#main-wrapper,
.page-wrapper {
  background: var(--modern-bg) !important;
}

body {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400 !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--modern-text);
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }

.text-muted { color: var(--modern-text-muted) !important; }

/* --------------------------------------------------------------------------
 * Surfaces — cards / modals / panels
 * --------------------------------------------------------------------------*/
.card,
.card-no-border .card,
.modal-content,
.panel,
.tile,
.x-pageheader-tabs-content {
  background: var(--modern-surface);
  border: 1px solid var(--modern-border) !important;
  border-radius: var(--modern-radius) !important;
  box-shadow: var(--modern-shadow-xs) !important;
}

.card-header,
.modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--modern-divider) !important;
  padding: 1rem 1.25rem;
  font-weight: 600;
}

.card-body { padding: 1.25rem; }
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--modern-divider) !important;
}

.modal-content { border-radius: var(--modern-radius-lg) !important; box-shadow: var(--modern-shadow-lg) !important; }
.modal-footer  { border-top: 1px solid var(--modern-divider) !important; }

hr { border-color: var(--modern-divider) !important; }

.container-fluid {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.page-titles {
  background: transparent !important;
  margin: 0 !important;
  padding: 22px 24px 16px !important;
}

.page-titles h3,
.page-titles h4 {
  color: var(--modern-text) !important;
  font-size: 1.35rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.page-titles .breadcrumb {
  font-size: .82rem !important;
  margin: .35rem 0 0 !important;
}

/* --------------------------------------------------------------------------
 * Inputs
 * --------------------------------------------------------------------------*/
.form-control,
.custom-select,
.select2-selection,
.bootstrap-tagsinput {
  border: 1px solid var(--modern-border) !important;
  border-radius: var(--modern-radius-sm) !important;
  background: var(--modern-surface) !important;
  color: var(--modern-text) !important;
  padding: 0.5rem 0.75rem !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.custom-select:focus,
.select2-selection:focus,
.select2-container--focus .select2-selection {
  border-color: var(--modern-accent) !important;
  box-shadow: 0 0 0 3px var(--modern-focus) !important;
  outline: none !important;
}

.form-control::placeholder { color: var(--modern-text-faint); }

label { color: var(--modern-text-muted); font-weight: 500; font-size: .875rem; }

/* --------------------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------------------*/
.btn {
  font-family: inherit;
  font-weight: 500;
  border-radius: var(--modern-radius-sm) !important;
  padding: 0.5rem 1rem !important;
  transition: all .15s ease;
  border-width: 1px !important;
  letter-spacing: 0;
  box-shadow: none !important;
}
.btn-sm { padding: 0.35rem 0.75rem !important; font-size: 0.85rem; }
.btn-lg { padding: 0.75rem 1.5rem !important; font-size: 1rem; }

.btn-primary, .btn-info {
  background: var(--modern-accent) !important;
  border-color: var(--modern-accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-info:hover {
  background: var(--modern-accent-hover) !important;
  border-color: var(--modern-accent-hover) !important;
}

.btn-success {
  background: var(--modern-success) !important;
  border-color: var(--modern-success) !important;
}
.btn-warning {
  background: var(--modern-warning) !important;
  border-color: var(--modern-warning) !important;
  color: #fff !important;
}
.btn-danger {
  background: var(--modern-danger) !important;
  border-color: var(--modern-danger) !important;
}

.btn-secondary, .btn-default {
  background: var(--modern-surface) !important;
  border-color: var(--modern-border) !important;
  color: var(--modern-text) !important;
}
.btn-secondary:hover, .btn-default:hover {
  background: var(--modern-surface-2) !important;
}

.btn-link { color: var(--modern-accent) !important; }
.btn-link:hover { color: var(--modern-accent-hover) !important; text-decoration: none; }

/* outline variants */
.btn-outline-primary { color: var(--modern-accent) !important; border-color: var(--modern-accent) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--modern-accent-soft) !important; }

/* --------------------------------------------------------------------------
 * Status pills / labels / badges
 * --------------------------------------------------------------------------*/
.badge, .label {
  font-weight: 500;
  border-radius: 999px !important;
  padding: 0.25em 0.65em !important;
  font-size: 0.75rem !important;
  letter-spacing: 0;
}

.badge-success, .label-success, .bg-success { background: var(--modern-success-soft) !important; color: var(--modern-success) !important; }
.badge-warning, .label-warning, .bg-warning { background: var(--modern-warning-soft) !important; color: var(--modern-warning) !important; }
.badge-danger,  .label-danger,  .bg-danger  { background: var(--modern-danger-soft)  !important; color: var(--modern-danger)  !important; }
.badge-info,    .label-info,    .bg-info    { background: var(--modern-info-soft)    !important; color: var(--modern-info)    !important; }
.badge-default, .label-default              { background: var(--modern-surface-2)    !important; color: var(--modern-text-muted) !important; }

/* --------------------------------------------------------------------------
 * Tables
 * --------------------------------------------------------------------------*/
.table {
  background: var(--modern-surface);
  color: var(--modern-text);
  margin-bottom: 0 !important;
}
.table th {
  background: #fbfbfa !important;
  border-top: none !important;
  border-bottom: 1px solid var(--modern-divider) !important;
  font-size: .8rem;
  font-weight: 600;
  color: var(--modern-text-muted);
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 0.75rem 1rem !important;
}
.table td {
  border-top: 1px solid var(--modern-divider) !important;
  padding: 0.85rem 1rem !important;
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--modern-surface-2); }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table-responsive,
.list-table-wrapper {
  border-radius: var(--modern-radius) !important;
}
.table .list-table-action .btn,
.table .list-table-action a {
  border-radius: var(--modern-radius-sm) !important;
}

/* --------------------------------------------------------------------------
 * Avatars
 * --------------------------------------------------------------------------*/
.img-circle, .avatar-xsmall, .avatar-small, .avatar-medium, .avatar-large {
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid var(--modern-surface);
  box-shadow: var(--modern-shadow-xs);
}
.avatar-xsmall { width: 26px; height: 26px; }
.avatar-small  { width: 36px; height: 36px; }
.avatar-medium { width: 48px; height: 48px; }
.avatar-large  { width: 72px; height: 72px; }

/* avatar group: overlap when in a row */
.avatar-group .img-circle + .img-circle,
.avatar-group [data-toggle="tooltip"] + [data-toggle="tooltip"] { margin-left: -8px; }

/* --------------------------------------------------------------------------
 * Navigation
 * --------------------------------------------------------------------------*/
.nav-tabs {
  border-bottom: 1px solid var(--modern-divider) !important;
}
.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--modern-text-muted) !important;
  font-weight: 500;
  padding: .75rem 1rem !important;
  background: transparent !important;
}
.nav-tabs .nav-link.active {
  color: var(--modern-text) !important;
  border-bottom-color: var(--modern-accent) !important;
  background: transparent !important;
}
.nav-tabs .nav-link:hover {
  color: var(--modern-text);
  border-bottom-color: var(--modern-border) !important;
}

/* --------------------------------------------------------------------------
 * Misc tweaks
 * --------------------------------------------------------------------------*/
a { color: var(--modern-accent); transition: color .12s ease; }
a:hover { color: var(--modern-accent-hover); text-decoration: none; }

.dropdown-menu {
  border: 1px solid var(--modern-border) !important;
  border-radius: var(--modern-radius) !important;
  box-shadow: var(--modern-shadow) !important;
  padding: 0.4rem !important;
  color: var(--modern-text) !important;
}
.dropdown-item {
  border-radius: var(--modern-radius-sm);
  padding: 0.5rem 0.75rem !important;
  color: var(--modern-text);
  font-weight: 500;
}
.dropdown-item:hover { background: var(--modern-surface-2) !important; }
.dropdown-divider { border-top-color: var(--modern-divider) !important; }

.right-sidebar {
  background: var(--modern-surface) !important;
  border-left: 1px solid var(--modern-border) !important;
  box-shadow: -12px 0 34px rgba(15, 23, 42, .08) !important;
}

.right-sidebar .r-panel-body {
  background: var(--modern-surface) !important;
}

.right-sidebar .x-top-header,
.right-sidebar .right-sidebar-header,
.right-sidebar .card-header {
  background: var(--modern-surface) !important;
  border-bottom: 1px solid var(--modern-divider) !important;
}

.right-sidepanel-menu,
.right-sidepanel-menu.active,
.right-sidepanel-menu:hover {
  border-radius: var(--modern-radius-sm) !important;
}

.right-sidepanel-menu.active {
  background: var(--modern-accent-soft) !important;
  color: var(--modern-accent) !important;
}

/* breadcrumbs */
.breadcrumb { background: transparent !important; padding-left: 0 !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--modern-text-faint); }
.breadcrumb-item.active { color: var(--modern-text-muted); }

/* tooltips — light card style so they match the sidebar flyout aesthetic */
.tooltip-inner {
  background: var(--modern-surface) !important;
  color: var(--modern-text) !important;
  border: 1px solid var(--modern-border) !important;
  border-radius: var(--modern-radius-sm) !important;
  box-shadow: var(--modern-shadow) !important;
  font-size: .85rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
}
.tooltip .arrow::before { display: none !important; }

/* Mini-sidebar hover flyout — flyout sits at left:80px; the parent label is
   force-hidden in the sidebar; the flyout's ::before renders the title from
   data-flyout-title (set by ~/themes/local/modern/js/init.js on page load). */
.mini-sidebar .sidebar-nav #sidebarnav > li > a > .hide-menu {
  display: none !important;
}

.mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul,
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul.collapse {
  background: var(--modern-surface) !important;
  border: 1px solid var(--modern-border) !important;
  border-radius: var(--modern-radius-sm) !important;
  box-shadow: 4px 4px 16px rgba(15, 23, 42, .08) !important;
  padding: 32px 0.35rem 0.35rem !important;
  width: 220px !important;
  left: 80px !important;
  top: 4px !important;
}

/* Header text from data-flyout-title (set by JS) */
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul::before {
  content: attr(data-flyout-title);
  position: absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--modern-text-muted);
  white-space: nowrap;
}
/* Divider under the header */
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 28px;
  height: 1px;
  background: var(--modern-divider);
}
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul a {
  border-radius: var(--modern-radius-sm) !important;
  padding: 0.5rem 0.75rem !important;
  color: var(--modern-text) !important;
  font-weight: 500;
}
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul a:hover {
  background: var(--modern-surface-2) !important;
}
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul li.active > a {
  background: var(--modern-accent-soft) !important;
  color: var(--modern-accent) !important;
}

/* progress bars — keep status colours (bg-success / bg-info / etc.) intact;
   only fall back to accent when no bg-* class is set */
.progress {
  background: var(--modern-surface-2) !important;
  border-radius: var(--modern-radius-sm) !important;
  height: 8px;
  box-shadow: none;
}
.progress-bar { border-radius: var(--modern-radius-sm) !important; }
.progress-bar:not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-lime):not(.bg-default) {
  background: var(--modern-accent) !important;
}
.progress-bar.bg-default { background: var(--modern-default) !important; }
.progress-bar.bg-info    { background: var(--modern-info) !important; }
.progress-bar.bg-success { background: var(--modern-success) !important; }
.progress-bar.bg-warning { background: var(--modern-warning) !important; }
.progress-bar.bg-danger  { background: var(--modern-danger) !important; }
.progress-bar.bg-lime    { background: var(--modern-lime) !important; }

/* --------------------------------------------------------------------------
 * Icons (Phosphor)
 * --------------------------------------------------------------------------*/
i[class^="ph"], i[class*=" ph-"] {
  font-size: 1.1rem;
  vertical-align: -2px;
  line-height: 1;
}
.btn i[class^="ph"], .btn i[class*=" ph-"] {
  font-size: 1rem;
  vertical-align: -2px;
  margin-right: 0.35rem;
}

/* --------------------------------------------------------------------------
 * List-page action bar
 * .btn-page-actions = filter / print / export / view-toggle pills
 * .btn-add-circle   = primary "add" button (was red — switch to accent)
 * .header-search    = inline search input
 * --------------------------------------------------------------------------*/
.btn-page-actions,
#list-page-actions .list-actions-button.btn,
#list-page-actions .btn-group > .list-actions-button.btn {
  background: var(--modern-surface) !important;
  border: 1px solid var(--modern-border) !important;
  color: var(--modern-text-muted) !important;
  border-radius: var(--modern-radius-sm) !important;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  transition: all .15s ease;
}
.btn-page-actions:hover,
#list-page-actions .list-actions-button.btn:hover {
  background: var(--modern-surface-2) !important;
  border-color: var(--modern-text-faint) !important;
  color: var(--modern-text) !important;
}
.btn-page-actions i[class^="ph"],
#list-page-actions .list-actions-button.btn i[class^="ph"] {
  font-size: 1.1rem;
  margin: 0 !important;
  vertical-align: 0;
}

/* Sort By is a btn-group with .dropdown-toggle — kill the BS caret + tighten */
#list-page-actions .btn-group { margin-left: 4px; }
#list-page-actions .list-actions-button.dropdown-toggle::after {
  display: none !important;
}

/* --------------------------------------------------------------------------
 * Task / card modal — gives the tab menu a real header look + repositions close
 * Stock CSS uses very specific selectors (.card-modal .modal-dialog .modal-content ...)
 * so we mirror that depth to win the cascade.
 * --------------------------------------------------------------------------*/
.card-modal .modal-dialog .modal-content {
  padding: 0 !important;
  background: var(--modern-surface) !important;
  border-radius: var(--modern-radius-lg) !important;
  overflow: hidden;
  position: relative !important;
}

/* Tab bar: white background + bottom divider + room for the close button */
.card-modal .modal-dialog .modal-content #cardModalTabMenu {
  background: var(--modern-surface) !important;
  position: relative;
}
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul,
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul.nav-tabs {
  background: var(--modern-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--modern-divider) !important;
  padding: 0 64px 0 1.25rem !important;
  margin: 0 !important;
}
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul li a,
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul li a.nav-link {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--modern-text-muted) !important;
  font-weight: 500 !important;
  padding: 1rem 1rem !important;
  font-size: 0.95rem !important;
}
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul li a.active,
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul li a.nav-link.active {
  color: var(--modern-text) !important;
  background: transparent !important;
  border-bottom-color: var(--modern-accent) !important;
  font-weight: 600 !important;
}
.card-modal .modal-dialog .modal-content #cardModalTabMenu ul li a i[class^="ph"] {
  font-size: 1.05rem;
  margin-right: 0.4rem;
  vertical-align: -2px;
}

/* Make sure modal-body is not the close button's positioning parent */
.card-modal .modal-dialog .modal-content .modal-body { position: static !important; }

/* Close button — top-right of the tab bar */
.card-modal #card-modal-close,
.card-modal .modal-dialog .modal-content #card-modal-close,
.card-modal .modal-dialog .modal-content .modal-body button#card-modal-close,
.card-modal .modal-dialog .modal-content .modal-body .close#card-modal-close {
  position: absolute !important;
  top: 11px !important;
  right: 14px !important;
  z-index: 100;
  background: var(--modern-surface-2) !important;
  border: none !important;
  border-radius: var(--modern-radius-sm) !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  text-shadow: none !important;
  color: var(--modern-text-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
}
.card-modal #card-modal-close:hover {
  background: var(--modern-border) !important;
  color: var(--modern-text) !important;
}
.card-modal #card-modal-close i {
  font-size: 1.1rem !important;
  margin: 0 !important;
}

/* Right panel sits inside modal-body — give it a clean separator + breathing room */
.card-modal .card-right-panel {
  padding: 1.25rem !important;
  background: var(--modern-bg) !important;
  border-left: 1px solid var(--modern-divider);
}
.card-modal .card-left-panel {
  padding: 1.5rem !important;
  background: var(--modern-surface) !important;
}

/* Right panel "Information" meta table — kill the bordered look */
.card-modal .card-right-panel .x-section .x-title h6 {
  font-size: .75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--modern-text-muted) !important;
  margin: .5rem 0 .5rem !important;
}
/* The info table sits inside .x-element.x-action — strip the pill background,
   border, padding, and the misleading pointer cursor (the table isn't clickable). */
.card-modal .card-right-panel .x-section > .x-element:has(table.table-bordered),
.card-modal .card-right-panel .x-section > .x-element.x-action:has(table.table-bordered) {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  cursor: default !important;
  min-height: 0 !important;
}
.card-modal .card-right-panel table.table.table-bordered {
  background: var(--modern-surface) !important;
  border: 1px solid var(--modern-border) !important;
  border-radius: var(--modern-radius-sm) !important;
  overflow: hidden;
  margin: 0 !important;
  table-layout: fixed;
  width: 100%;
}
.card-modal .card-right-panel table.table.table-bordered td {
  border: none !important;
  border-top: 1px solid var(--modern-divider) !important;
  padding: .55rem .75rem !important;
  font-size: .85rem !important;
  vertical-align: middle !important;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35 !important;
}
.card-modal .card-right-panel table.table.table-bordered tr:first-child td {
  border-top: none !important;
}
.card-modal .card-right-panel table.table.table-bordered td:first-child {
  color: var(--modern-text-muted) !important;
  width: 40%;
  background: var(--modern-surface-2) !important;
}
.card-modal .card-right-panel table.table.table-bordered td:last-child {
  color: var(--modern-text) !important;
}
.card-modal .card-right-panel table.table.table-bordered td strong {
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
 * Empty-state illustrations — hide every decorative no-results / 404 PNG.
 * Stock GC drops a cartoon image in each empty placeholder; modern look
 * keeps just the heading + CTA / search-tip text.
 * --------------------------------------------------------------------------*/
.x-no-result > img,
.x-no-result img:first-child,
.page-notification > img,
.page-notification img:first-child,
[class*="empty-state"] > img,
img[src*="no-results-found"],
img[src*="no-download-avialble"],
img[src*="search-404"],
img[src$="/404.png"] {
  display: none !important;
}
.x-no-result,
.page-notification {
  padding: 2rem 1rem !important;
  text-align: center;
}
.x-no-result h4,
.page-notification .title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--modern-text);
  margin: 0 0 .25rem;
}
.page-notification .sub-title {
  font-size: .9rem;
  color: var(--modern-text-muted);
}

/* --------------------------------------------------------------------------
 * Kanban column headers
 * .board / .board-body / .board-heading wrap each column
 * .x-action-icons is the + add-card button at the right of the header
 * --------------------------------------------------------------------------*/
.kanban .board .board-body {
  padding: 0 !important;
  border-radius: var(--modern-radius) !important;
  border-top-width: 3px !important;
}
.kanban .board .board-body .board-heading {
  padding: 8px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--modern-text);
  border-bottom: 1px solid rgba(15, 23, 42, .07);
  background: rgba(255, 255, 255, .35);
  border-top-left-radius: var(--modern-radius);
  border-top-right-radius: var(--modern-radius);
  margin-bottom: 0 !important;
  line-height: 1.4;
}
.kanban .board .board-body .content,
.kanban .board .board-body .kanban-content {
  padding: 12px 14px 16px !important;
}

/* the + button in each column header */
.kanban .board .board-body .board-heading .x-action-icons {
  margin-top: 0 !important;
  font-size: 1rem;
}
.kanban .board .board-body .board-heading .x-action-icons > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .08);
  color: var(--modern-text);
  transition: all .15s ease;
}
.kanban .board .board-body .board-heading .x-action-icons > span:hover {
  background: var(--modern-accent) !important;
  color: #fff !important;
  transform: scale(1.05);
}
.kanban .board .board-body .board-heading .x-action-icons i[class^="ph"] {
  font-size: 1.05rem !important;
  margin: 0 !important;
  vertical-align: 0 !important;
  line-height: 1 !important;
}

/* the "+" add button — was btn-danger (red, 45px round); promote to accent square */
.btn.btn-add-circle,
a.btn-add-circle,
button.btn-add-circle {
  background: var(--modern-accent) !important;
  border: 1px solid var(--modern-accent) !important;
  color: #fff !important;
  border-radius: var(--modern-radius-sm) !important;
  border-top-left-radius: var(--modern-radius-sm) !important;
  border-top-right-radius: var(--modern-radius-sm) !important;
  border-bottom-left-radius: var(--modern-radius-sm) !important;
  border-bottom-right-radius: var(--modern-radius-sm) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  padding-top: 0 !important;
  margin-left: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  box-shadow: 0 1px 2px rgba(79, 70, 229, .25) !important;
  transition: all .15s ease;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  visibility: visible;
}
.btn.btn-add-circle:hover,
a.btn-add-circle:hover,
button.btn-add-circle:hover {
  background: var(--modern-accent-hover) !important;
  border-color: var(--modern-accent-hover) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, .35) !important;
}
.btn-add-circle i[class^="ph"] {
  font-size: 1.15rem !important;
  margin: 0 !important;
  vertical-align: 0 !important;
  line-height: 1 !important;
}

/* inline search box */
#header-search,
.header-search {
  max-width: 240px !important;
  position: relative !important;
  display: inline-block;
  vertical-align: middle;
}
#header-search input,
.header-search input,
.header-search input.form-control {
  background: var(--modern-surface) !important;
  border: 1px solid var(--modern-border) !important;
  border-radius: var(--modern-radius-sm) !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px 0 38px !important;
  padding-left: 38px !important;
  font-size: 0.875rem !important;
  color: var(--modern-text) !important;
  vertical-align: middle !important;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#header-search input:focus,
.header-search input:focus {
  border-color: var(--modern-accent) !important;
  box-shadow: 0 0 0 3px var(--modern-focus) !important;
  outline: none !important;
}
#header-search > i,
.header-search > i {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1rem !important;
  color: var(--modern-text-faint) !important;
  margin: 0 !important;
  pointer-events: none;
  z-index: 2;
}

/* global search modal — keep stock width (large), just style its chrome */
.search-modal .modal-dialog {
  max-width: calc(100vw - 80px) !important;
  margin: 5vh auto !important;
}
.search-modal .modal-content {
  border-radius: var(--modern-radius-lg) !important;
  box-shadow: var(--modern-shadow-lg) !important;
  overflow: hidden;
}
.search-modal .modal-header {
  padding: 1rem 1.25rem !important;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--modern-divider) !important;
}
.search-modal .x-search-field {
  flex: 1;
  margin-right: 0;
}
.search-modal .x-search-field .form-group { margin-bottom: 0 !important; }
.search-modal .x-search-field .form-group .col-12,
.search-modal .x-search-field .row { padding: 0 !important; margin: 0 !important; }
.search-modal .modal-body { padding: 1.5rem 1.25rem !important; }

#global-search-form,
.x-search-field-container {
  position: relative !important;
}
#global-search-form input,
.x-search-field-container input,
.x-search-field-container input.form-control {
  background: var(--modern-surface) !important;
  border: 1px solid var(--modern-border) !important;
  border-radius: var(--modern-radius-sm) !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px 0 42px !important;
  padding-left: 42px !important;
  font-size: 1rem !important;
  color: var(--modern-text) !important;
  width: 100% !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#global-search-form input:focus,
.x-search-field-container input:focus {
  border-color: var(--modern-accent) !important;
  box-shadow: 0 0 0 3px var(--modern-focus) !important;
  outline: none !important;
}
#global-search-form > i,
.x-search-field-container > i {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1.15rem !important;
  color: var(--modern-text-faint) !important;
  margin: 0 !important;
  pointer-events: none;
  z-index: 2;
}

.search-modal .modal-header .close {
  background: var(--modern-surface-2) !important;
  border: none;
  border-radius: var(--modern-radius-sm) !important;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  text-shadow: none;
  color: var(--modern-text-muted) !important;
}
.search-modal .modal-header .close:hover { background: var(--modern-border) !important; color: var(--modern-text) !important; }
.search-modal .modal-header .close i { font-size: 1.1rem; margin: 0; }

/* topnav global search box (same pattern, different markup) */
#top-search-container,
.top-search-container {
  position: relative !important;
  display: inline-block;
  vertical-align: middle;
  max-width: 280px !important;
  width: 280px;
}
#top-search-container input,
.top-search-container input,
.top-search-container input.form-control {
  background: var(--modern-surface) !important;
  border: 1px solid var(--modern-border) !important;
  border-radius: var(--modern-radius-sm) !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px 0 38px !important;
  padding-left: 38px !important;
  font-size: 0.875rem !important;
  color: var(--modern-text) !important;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#top-search-container input:focus,
.top-search-container input:focus {
  border-color: var(--modern-accent) !important;
  box-shadow: 0 0 0 3px var(--modern-focus) !important;
  outline: none !important;
}

#list-page-actions-container,
#list-page-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-panel,
.x-filter-panel,
.sidepanel-filter,
.table-config-ajax {
  color: var(--modern-text) !important;
}

.custom-control-label::before {
  border-color: var(--modern-border) !important;
  background: var(--modern-surface) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--modern-accent) !important;
  background: var(--modern-accent) !important;
}

.alert {
  border: 1px solid transparent !important;
  border-radius: var(--modern-radius) !important;
  box-shadow: none !important;
}

.alert-info { background: var(--modern-info-soft) !important; color: #075985 !important; border-color: #bae6fd !important; }
.alert-success { background: var(--modern-success-soft) !important; color: #166534 !important; border-color: #bbf7d0 !important; }
.alert-warning { background: var(--modern-warning-soft) !important; color: #92400e !important; border-color: #fde68a !important; }
.alert-danger { background: var(--modern-danger-soft) !important; color: #991b1b !important; border-color: #fecaca !important; }

@media (max-width: 767px) {
  .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .page-titles {
    padding: 16px 14px 12px !important;
  }

  #top-search-container,
  .top-search-container {
    width: 180px;
    max-width: 45vw !important;
  }

  .card-body {
    padding: 1rem;
  }
}
#top-search-container > i,
.top-search-container > i {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1rem !important;
  color: var(--modern-text-faint) !important;
  margin: 0 !important;
  pointer-events: none;
  z-index: 2;
}