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

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --cw-primary: #e8600a;
  --cw-primary-hover: #cf5509;
  --cw-primary-light: #fef3ec;
  --cw-primary-rgb: 232, 96, 10;
  --cw-dark: #2b2d31;
  --cw-dark-hover: #3a3d44;
  --cw-grey-100: #f7f8fa;
  --cw-grey-200: #f0f2f5;
  --cw-grey-300: #e2e5ea;
  --cw-grey-400: #c8cdd5;
  --cw-grey-500: #9ca3af;
  --cw-grey-600: #6b7280;
  --cw-grey-700: #4b5563;
  --cw-grey-800: #374151;
  --cw-grey-900: #1e1e2d;
  --cw-white: #ffffff;
  --cw-body-bg: #f0f2f5;
  --cw-card-bg: #ffffff;
  --cw-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --cw-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --cw-radius: 6px;
  --cw-radius-lg: 10px;
  --cw-transition: 0.2s ease;
  --cw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   BASE / BODY
   ============================================================ */
body {
  font-family: var(--cw-font);
  font-size: 13.5px;
  background-color: var(--cw-body-bg);
  color: var(--cw-grey-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto;
}

a, button.link {
  color: var(--cw-primary);
  text-decoration: none;
  transition: color var(--cw-transition);
}
a:hover, button.link:hover {
  color: var(--cw-primary-hover);
  text-decoration: underline;
}

h1 { font-size: 1.5em; font-weight: 700; color: var(--cw-grey-900); }
h2 { font-size: 1.25em; font-weight: 600; color: var(--cw-grey-900); }
h3 { font-size: 1.1em; font-weight: 600; color: var(--cw-grey-800); }

/* ============================================================
   HEADER
   ============================================================ */
header {
  background-color: var(--cw-white);
  color: var(--cw-dark);
  height: auto;
  min-height: 60px;
  border-bottom: 1px solid var(--cw-grey-300);
  position: relative;
  z-index: 100;
}
header a { color: var(--cw-dark); }
.navbar-brand a.site-title,
.navbar-brand a.site-title:hover,
header .nav-link,
header .nav-link:hover {
  color: var(--cw-dark);
  font-size: 0.875em;
  font-weight: 500;
}
header .nav-link:hover { color: var(--cw-primary); }
header a, header a:hover { font-size: 0.875em; }
.navbar-brand a.site-title {
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.02em;
}
img.img-fluid.image-style-logo { max-height: 34px; }
header .region-nav-branding img { height: 42px; }
.site-logo img, #block-cwadmin-account-menu img {
  max-height: 32px;
  margin-right: 10px;
}
#block-cwadmin-account-menu,
#block-cwadmin-currentuserandoginfo {
  padding-right: 40px;
}
.region.region-nav-secondary {
  display: contents;
  font-size: 1.1em;
}
/* Push OG/user info to the right in the header nav — aligned with main content (90%) */
header nav > .d-flex {
  justify-content: space-between;
  align-items: center;
  max-width: 90%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
#main-navbar .collapse > .d-flex {
  max-width: 90%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
#navbarSupportedContent {
  margin-left: auto;
}

/* ============================================================
   MAIN NAVBAR
   ============================================================ */
#main-navbar {
  background-color: var(--cw-dark);
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
#main-navbar .nav-item {
  font-weight: 600;
  font-size: 0.875em;
}
#main-navbar .nav-link {
  color: rgba(255, 255, 255, 0.88);
  padding: 0.75rem 1rem;
  transition: all var(--cw-transition);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
#main-navbar .nav-link:hover,
#main-navbar .nav-link.active {
  color: var(--cw-primary);
  border-bottom-color: var(--cw-primary);
  background-color: rgba(255, 255, 255, 0.05);
}
#main-navbar li.nav-item a {
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.2s ease;
}
#main-navbar li.nav-item a:hover,
#main-navbar li.nav-item a.active {
  color: var(--cw-primary);
}
#main-navbar ul.dropdown-menu {
  background-color: var(--cw-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
#main-navbar ul.dropdown-menu li .dropdown-item {
  color: rgba(255, 255, 255, 0.85);
}
#main-navbar ul.dropdown-menu li .dropdown-item:hover,
#main-navbar ul.dropdown-menu li .dropdown-item.active {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--cw-primary);
}

/* ============================================================
   DROPDOWN MENUS (general)
   ============================================================ */
@media (min-width: 576px) {
  .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
  .dropdown-menu > .dropdown:hover > .dropdown-menu { display: block; margin-top: -9px; }
  .dropdown-menu > .dropdown > .dropdown-menu { left: 100%; top: 0; }
}
.dropdown-menu {
  font-size: 0.9em;
  border: 1px solid var(--cw-grey-300);
  border-radius: var(--cw-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.35rem 0;
  animation: cw-dropdown-in 0.15s ease;
}
@keyframes cw-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.navbar-nav .dropdown-menu { border-radius: var(--cw-radius); }
.dropdown-item {
  padding: 0.45rem 1rem;
  font-size: 0.875em;
  color: var(--cw-grey-800);
  transition: all var(--cw-transition);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--cw-primary-light);
  color: var(--cw-primary);
}
.dropdown-menu li.dropdown > .dropdown-item::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-menu li.dropdown:hover > .dropdown-item::after {
  transition: 0.2s ease;
  transform: rotate(-90deg);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb {
  padding: 12px 0 8px 0;
  margin-bottom: 0;
  background: transparent;
}
.breadcrumb .breadcrumb-item a {
  font-size: 0.8em;
  color: var(--cw-grey-600);
  text-decoration: none;
  transition: color var(--cw-transition);
}
.breadcrumb .breadcrumb-item a:hover { color: var(--cw-primary); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cw-grey-400); }

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
main {
  padding-bottom: 40px;
  min-height: calc(100vh - 200px);
}
main > .container,
main > .container-fluid,
main > .container-lg,
main > .container-xl,
main > .container-xxl,
main > div {
  max-width: 90%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   CONTENT REGIONS / CARDS
   ============================================================ */
.region.region-content {
  background-color: var(--cw-card-bg);
  padding: 28px 32px;
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-card-shadow);
  border: 1px solid var(--cw-grey-300);
}
.region.region-sidebar-first { margin-right: 12px; }
.region.region-sidebar-second { margin-left: 12px; }
.region.region-sidebar-first .block,
.region.region-sidebar-second .block {
  background-color: var(--cw-card-bg);
  padding: 16px;
  border-radius: var(--cw-radius);
  box-shadow: var(--cw-card-shadow);
  border: 1px solid var(--cw-grey-300);
  margin-bottom: 16px;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.cw-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cw-grey-100) 0%, var(--cw-grey-200) 50%, var(--cw-primary-light) 100%);
  padding: 20px;
}
.cw-login-container {
  width: 100%;
  max-width: 420px;
}
.cw-login-card {
  background: var(--cw-white);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  padding: 40px 36px 32px;
  border: 1px solid var(--cw-grey-300);
}
.cw-login-header {
  text-align: center;
  margin-bottom: 28px;
}
.cw-login-logo img {
  height: 48px;
  margin-bottom: 20px;
}
.cw-login-title {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--cw-grey-900);
  margin: 0 0 6px;
}
.cw-login-subtitle {
  font-size: 0.875em;
  color: var(--cw-grey-500);
  margin: 0;
}
.cw-login-messages {
  margin-bottom: 16px;
}
.cw-login-form .form-item {
  margin-bottom: 18px;
}
.cw-login-form .form-item label {
  font-size: 0.8125em;
  font-weight: 600;
  color: var(--cw-grey-700);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cw-login-form .form-item .form-control {
  padding: 0.6rem 0.85rem;
  font-size: 0.9375em;
  border: 1.5px solid var(--cw-grey-300);
  border-radius: 8px;
  transition: border-color var(--cw-transition), box-shadow var(--cw-transition);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.cw-login-form .form-item .form-control:focus {
  border-color: var(--cw-primary);
  box-shadow: 0 0 0 3px rgba(var(--cw-primary-rgb), 0.12);
}
.cw-login-form .form-item .description {
  font-size: 0.75em;
  color: var(--cw-grey-500);
  margin-top: 4px;
}
.cw-login-form .form-actions {
  border-top: none;
  padding-top: 8px;
  margin-top: 8px;
}
.cw-login-form .form-submit,
.cw-login-form .btn-primary {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 0.9375em;
  font-weight: 600;
  border-radius: 8px;
  letter-spacing: 0.02em;
}
.cw-login-footer {
  text-align: center;
  margin-top: 24px;
}
.cw-login-footer p {
  font-size: 0.75em;
  color: var(--cw-grey-500);
  margin: 0;
}
/* Hide page title, breadcrumbs, tabs, and chrome on login page */
.cw-login-page ~ * { display: none; }
.cw-login-card #block-cwadmin-page-title { display: none; }
.cw-login-card .breadcrumb { display: none; }
.cw-login-card .tabs-primary { display: none; }
.cw-login-card .region.region-content {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* ============================================================
   ERROR PAGE (403, 404)
   ============================================================ */
.cw-error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 260px);
  padding: 40px 20px;
}
.cw-error-container {
  text-align: center;
  max-width: 520px;
}
.cw-error-icon {
  margin-bottom: 24px;
}
.cw-error-icon i {
  font-size: 4rem;
  color: var(--cw-primary);
  opacity: 0.7;
}
.cw-error-content {
  margin-bottom: 28px;
}
.cw-error-content h1 {
  font-size: 2em;
  font-weight: 700;
  color: var(--cw-grey-900);
  margin-bottom: 8px;
}
.cw-error-content p {
  font-size: 1em;
  color: var(--cw-grey-600);
  line-height: 1.6;
}
.cw-error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 28px;
}
.cw-error-actions .btn {
  padding: 0.55rem 1.4rem;
  font-size: 0.875em;
  font-weight: 600;
  border-radius: 8px;
}
.cw-error-actions .btn i {
  margin-right: 6px;
}
.cw-error-help {
  padding-top: 20px;
  border-top: 1px solid var(--cw-grey-200);
}
.cw-error-help p {
  font-size: 0.8em;
  color: var(--cw-grey-500);
  margin: 0;
}
.cw-error-page .region.region-content {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}
@media (max-width: 575.98px) {
  .cw-login-card {
    padding: 28px 24px 24px;
  }
  .cw-error-actions {
    flex-direction: column;
  }
}

/* ============================================================
   NODE FORMS
   ============================================================ */
.node-form {
  margin: unset;
  background-color: var(--cw-card-bg);
  padding: 20px 28px 28px;
  border-radius: var(--cw-radius-lg);
}
.form-item, .form-actions { margin-top: unset; }
.form-item {
  margin-bottom: 16px;
}
.form-item .description {
  color: var(--cw-grey-500);
  font-size: 0.8em;
  margin-top: 4px;
}
.form-item .form-control,
.form-item .form-select {
  border-color: var(--cw-grey-300);
  border-radius: var(--cw-radius);
  padding: 0.45rem 0.75rem;
  font-size: 0.875em;
  transition: border-color var(--cw-transition), box-shadow var(--cw-transition);
}
.form-item .form-control:hover,
.form-item .form-select:hover {
  border-color: var(--cw-grey-400);
}
.form-actions {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--cw-grey-200);
  display: flex;
  gap: 8px;
}
.form-actions .btn,
.form-actions .button,
.form-actions .form-submit {
  padding: 0.5rem 1.5rem;
  font-size: 0.875em;
  font-weight: 600;
}

/* ============================================================
   LABELS
   ============================================================ */
label {
  color: var(--cw-grey-800);
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 0.875em;
  letter-spacing: 0.01em;
}
.link.link-edit-summary,
#edit-body-0-format-help-about { font-size: 0.8em; }

/* ============================================================
   TABLES
   ============================================================ */
table {
  border: 1px solid var(--cw-grey-300);
  font-size: 0.875em;
  width: 100%;
  border-radius: var(--cw-radius);
  overflow: hidden;
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.65rem;
  vertical-align: middle;
  border-bottom-color: var(--cw-grey-300);
}
.views-element-container .view-content table th,
.field-group-multiple-table table thead th {
  background-color: var(--cw-grey-100);
  color: var(--cw-grey-700);
  font-weight: 600;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--cw-grey-300);
}
a.tabledrag-handle .handle { display: unset; }
.table-striped > tbody > tr:nth-of-type(2n) > * {
  --bs-table-color-type: unset;
  --bs-table-bg-type: unset;
}
.table-striped > tbody > tr:nth-of-type(2n-1) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}
.table-striped > tbody > tr.odd > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}
.table-striped > tbody > tr.even > * {
  --bs-table-color-type: inherit;
  --bs-table-bg-type: inherit;
}
table.field-ui-overview thead tr,
table.field-ui-overview tbody tr { border-bottom: 1px solid var(--cw-grey-300); }
table.field-ui-overview thead th,
table.field-ui-overview tbody td { padding: 0.4rem 0.5rem; }
table.field-ui-overview thead th { background-color: var(--cw-grey-100); }
.field-group-multiple-table { position: relative; max-width: 100%; overflow-x: auto; }
.field-group-multiple-table table { width: 100%; }
.field-group-multiple-table table thead th { padding: 0.4rem 0.5rem; white-space: normal; text-transform: none; text-align: left; }
.field-group-multiple-table table tbody td { padding: 0.4rem 0.5rem; white-space: nowrap; }
.field-group-multiple-table table thead tr,
.field-group-multiple-table table tbody tr { border-bottom: 1px solid var(--cw-grey-300); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  --bs-btn-bg: var(--cw-primary);
  --bs-btn-border-color: var(--cw-primary);
  --bs-btn-disabled-bg: var(--cw-primary);
  --bs-btn-disabled-border-color: var(--cw-primary);
  --bs-btn-hover-bg: var(--cw-primary-hover);
  --bs-btn-hover-border-color: var(--cw-primary-hover);
  --bs-btn-active-bg: #b84d08;
  --bs-btn-active-border-color: #b84d08;
  color: var(--cw-white);
  font-weight: 500;
  border-radius: var(--cw-radius);
  transition: all var(--cw-transition);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-primary:hover {
  box-shadow: 0 2px 6px rgba(232, 96, 10, 0.3);
  color: var(--cw-white);
}
.btn-outline-primary, .node-preview-container .node-preview-backlink {
  --bs-btn-color: var(--cw-primary);
  --bs-btn-border-color: var(--cw-primary);
  --bs-btn-hover-bg: var(--cw-primary);
  --bs-btn-hover-border-color: var(--cw-primary);
  --bs-btn-active-bg: var(--cw-primary);
  --bs-btn-active-border-color: var(--cw-primary);
  --bs-btn-disabled-color: var(--cw-primary);
  --bs-btn-disabled-border-color: var(--cw-primary);
  border-radius: var(--cw-radius);
  font-weight: 500;
}
.btn-success { color: white; background-color: #059669; border-color: #059669; border-radius: var(--cw-radius); font-weight: 500; }
.btn-success a { color: white; }
.btn-warning, .alert-info a.btn-warning { color: white; background-color: #f59e0b; border-color: #f59e0b; border-radius: var(--cw-radius); font-weight: 500; }
.btn-warning a { color: white; }
.btn-danger { color: white; background-color: #dc2626; border-color: #dc2626; border-radius: var(--cw-radius); font-weight: 500; }
.btn-danger a { color: white; }
.btn-info, a.btn-info { color: white; background-color: #0891b2; border-color: #0891b2; border-radius: var(--cw-radius); font-weight: 500; }
.btn-info a, a.btn-info, a:hover.btn-info { color: white; }
.btn-default { color: white; background-color: #3b82f6; border-color: #3b82f6; border-radius: var(--cw-radius); font-weight: 500; }
.btn-default a { color: white; }
.btn-dark { color: white; background-color: var(--cw-dark); border-color: var(--cw-dark); border-radius: var(--cw-radius); font-weight: 500; }
.btn-dark a { color: white; }
.btn-light { color: var(--cw-grey-800); background-color: var(--cw-grey-100); border-color: var(--cw-grey-300); border-radius: var(--cw-radius); font-weight: 500; }
.btn-light a { color: var(--cw-grey-800); }
a.button, .form-submit { font-size: 0.9em; border-radius: var(--cw-radius); }
a.badge { text-decoration: none; }
.alert-info .btn-primary { background-color: #0891b2; border-color: #0891b2; color: white; }

/* ============================================================
   CONFIRM FORMS (DELETE)
   ============================================================ */
.node-confirm-form { color: #dc2626; padding-top: 30px; }
.node-confirm-form input[type="submit"] {
  border: 1px solid #dc2626;
  background-color: #dc2626;
  color: white;
  border-radius: var(--cw-radius);
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert-success { color: #065f46; background-color: #ecfdf5; border-color: #a7f3d0; border-radius: var(--cw-radius); font-size: 0.875em; border-left: 4px solid #059669; }
.alert-success a { color: #059669; }
.alert-warning { color: #92400e; background-color: #fffbeb; border-color: #fde68a; border-radius: var(--cw-radius); font-size: 0.875em; border-left: 4px solid #f59e0b; }
.alert-warning a { color: #d97706; }
.alert-danger { color: #991b1b; background-color: #fef2f2; border-color: #fecaca; border-radius: var(--cw-radius); font-size: 0.875em; border-left: 4px solid #dc2626; }
.alert-danger a { color: #dc2626; }
.alert-info { color: #155e75; background-color: #ecfeff; border-color: #a5f3fc; border-radius: var(--cw-radius); font-size: 0.875em; border-left: 4px solid #0891b2; }
.alert-info a { color: #0891b2; }
.alert-default { color: #1e40af; background-color: #eff6ff; border-color: #bfdbfe; border-radius: var(--cw-radius); font-size: 0.875em; border-left: 4px solid #3b82f6; }
.alert-default a { color: #3b82f6; }
.alert-dark { color: var(--cw-grey-900); background-color: var(--cw-grey-100); border-color: var(--cw-grey-400); border-radius: var(--cw-radius); font-size: 0.875em; border-left: 4px solid var(--cw-grey-700); }
.alert-dark a { color: var(--cw-grey-800); }
.alert-light { color: var(--cw-grey-800); background-color: var(--cw-grey-100); border-color: var(--cw-grey-300); border-radius: var(--cw-radius); font-size: 0.875em; border-left: 4px solid var(--cw-grey-400); }
.alert-light a { color: var(--cw-grey-700); }

/* ============================================================
   PRIMARY TABS (View / Edit / Delete etc.)
   ============================================================ */
.tabs-primary { margin: 0 0 24px 0; }
.nav-tabs {
  border-bottom: none;
  gap: 4px;
  background: var(--cw-grey-100);
  border-radius: var(--cw-radius-lg);
  padding: 4px;
}
.nav-tabs .nav-link {
  margin-right: 0;
  margin-bottom: 0;
  background-color: transparent;
  border-radius: var(--cw-radius);
  color: var(--cw-grey-600);
  font-weight: 500;
  font-size: 0.8em;
  padding: 0.5rem 1.1rem;
  transition: all var(--cw-transition);
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.nav-tabs a.nav-link { color: var(--cw-grey-600); text-decoration: none; }
.nav-tabs .nav-link:hover {
  background-color: var(--cw-white);
  color: var(--cw-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.is-active {
  background-color: var(--cw-white);
  color: var(--cw-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ============================================================
   HORIZONTAL TABS (field group tabs like Purchaser, Deal Suppliers)
   ============================================================ */
.horizontal-tabs {
  border: 1px solid var(--cw-grey-300);
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-card-shadow);
  overflow: visible;
  margin-bottom: 20px;
}
.horizontal-tabs .horizontal-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 2px solid var(--cw-primary);
  background: var(--cw-grey-100);
  border-radius: 0;
}
.horizontal-tabs .horizontal-tabs-list li.horizontal-tab-button {
  border: none;
  background: transparent;
  box-shadow: none;
  margin-bottom: -2px;
  border-radius: 0;
  border-right: 1px solid var(--cw-grey-300);
}
.horizontal-tabs .horizontal-tabs-list li.horizontal-tab-button:last-child {
  border-right: none;
}
.horizontal-tabs .horizontal-tabs-list li.horizontal-tab-button a {
  display: block;
  padding: 0.7rem 1.25rem;
  font-size: 0.84em;
  font-weight: 600;
  color: var(--cw-grey-700);
  text-decoration: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  transition: all var(--cw-transition);
  background: transparent;
}
.horizontal-tabs .horizontal-tabs-list li.horizontal-tab-button a:hover {
  color: var(--cw-primary);
  background: rgba(232, 96, 10, 0.06);
  box-shadow: none;
}
.horizontal-tabs .horizontal-tabs-list li.horizontal-tab-button.selected {
  background: var(--cw-primary);
  border-radius: 0;
}
.horizontal-tabs .horizontal-tabs-list li.horizontal-tab-button.selected a {
  color: var(--cw-white);
  font-weight: 700;
  background: var(--cw-primary);
  box-shadow: none;
  border: none;
  border-bottom: 3px solid var(--cw-primary);
  border-radius: 0;
  position: relative;
}
.horizontal-tabs .horizontal-tabs-list li.horizontal-tab-button.selected a strong {
  color: var(--cw-white);
}
.horizontal-tabs .horizontal-tabs-list li.horizontal-tab-button.selected a:hover {
  color: var(--cw-white);
  background: var(--cw-primary-hover);
}
.horizontal-tabs .horizontal-tabs-panes {
  padding: 16px;
  border-top: none;
  border-radius: 0;
  margin-top: 0;
  background: var(--cw-white);
  overflow-x: auto;
}

/* ============================================================
   SECONDARY TABS & VERTICAL TABS
   ============================================================ */
.tabs-wrapper.tabs-secondary { padding: 10px; }
.tabs-wrapper.tabs-secondary .nav.nav-tabs { border: none; }
.tabs-wrapper.tabs-secondary .nav-link.active.is-active { border: 1px solid var(--cw-grey-300); }
.vertical-tabs__pane { border: none; }
.vertical-tabs__menu-item {
  background-color: var(--cw-grey-100);
  border-bottom: 1px solid var(--cw-grey-300);
  transition: all var(--cw-transition);
}
.vertical-tabs__menu-item:hover { background-color: var(--cw-primary-light); }

/* ============================================================
   BLOCKS / PAGE TITLE
   ============================================================ */
.block > h2 {
  font-size: 1em;
  font-weight: 700;
  border-bottom: 2px solid var(--cw-primary);
  margin-bottom: 14px;
  padding-bottom: 10px;
  color: var(--cw-grey-900);
}
article,
.user-admin-settings,
#auto-username-settings,
#field-overview,
#entity-form-display-edit-form,
#entity-view-display-edit-form {
  background-color: var(--cw-card-bg);
  padding: 18px;
  border: 1px solid var(--cw-grey-300);
  border-radius: var(--cw-radius);
  font-size: 0.9em;
}
#block-cwadmin-page-title {
  padding-bottom: 8px;
  border-bottom: none;
  margin-bottom: 4px;
}
#block-cwadmin-page-title h1 {
  font-size: 1.35em;
  font-weight: 700;
  color: var(--cw-grey-900);
  margin: 0;
}
#block-cwadmin-page-title h1 em,
#block-cwadmin-page-title h1 i {
  font-style: normal;
  color: var(--cw-grey-500);
  font-weight: 400;
  font-size: 0.85em;
  display: block;
  margin-bottom: 2px;
}
#block-cwadmin-help {
  padding: 12px 0 0 12px;
  font-size: 0.875em;
  color: var(--cw-grey-600);
}

/* ============================================================
   DETAILS / FIELDSETS / COLLAPSIBLE SECTIONS
   ============================================================ */
details.form-wrapper,
fieldset.form-wrapper {
  border: 1px solid var(--cw-grey-300);
  border-radius: var(--cw-radius);
  margin-bottom: 16px;
  background: var(--cw-white);
}
details.form-wrapper > summary,
fieldset.form-wrapper > legend {
  font-size: 0.875em;
  font-weight: 600;
  color: var(--cw-grey-800);
  padding: 10px 16px;
  cursor: pointer;
  background: var(--cw-grey-100);
  border-radius: var(--cw-radius) var(--cw-radius) 0 0;
  border-bottom: 1px solid var(--cw-grey-300);
  margin-bottom: 0;
}
details.form-wrapper[open] > summary {
  border-radius: var(--cw-radius) var(--cw-radius) 0 0;
}
details.form-wrapper > .details-wrapper {
  padding: 16px;
}

/* ============================================================
   FIELD GROUP TABLE (Purchaser / Supplier tables in forms)
   ============================================================ */
.field-group-multiple-table {
  border: 1px solid var(--cw-grey-300);
  border-radius: var(--cw-radius);
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 16px;
}
.field-group-multiple-table table {
  border: none;
  margin: 0;
}
.field-group-multiple-table table thead th {
  background-color: var(--cw-grey-100);
  color: var(--cw-grey-700);
  font-weight: 600;
  font-size: 0.75em;
  text-transform: none;
  text-align: left;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--cw-grey-300);
  padding: 0.6rem 0.65rem;
  white-space: normal;
}
.field-group-multiple-table table tbody td {
  padding: 0.5rem 0.65rem;
  vertical-align: middle;
}
.field-group-multiple-table table tbody td .form-item {
  margin-bottom: 0;
}
.field-group-multiple-table table tbody td .form-control {
  font-size: 0.8125em;
  padding: 0.35rem 0.6rem;
}

/* ============================================================
   VERTICAL TABS (Revision, Status sidebar)
   ============================================================ */
.vertical-tabs {
  border: 1px solid var(--cw-grey-300);
  border-radius: var(--cw-radius);
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  width: 100%;
  margin-left: 0;
}
.vertical-tabs__menu {
  border-right: 1px solid var(--cw-grey-300);
  background: var(--cw-grey-100);
  width: 160px;
  min-width: 160px;
  list-style: none;
  padding: 0;
  margin: 0;
  float: none;
}
.vertical-tabs__panes {
  padding: 16px;
  flex: 1;
  min-width: 0;
}
.vertical-tabs__menu-item {
  border-bottom: 1px solid var(--cw-grey-200);
  padding: 0;
}
.vertical-tabs__menu-item a {
  padding: 8px 10px;
  display: block;
  text-decoration: none;
  font-size: 0.78em;
  color: var(--cw-grey-700);
  transition: all var(--cw-transition);
}
.vertical-tabs__menu-item a:hover {
  background: var(--cw-primary-light);
  color: var(--cw-primary);
}
.vertical-tabs__menu-item.is-selected a,
.vertical-tabs__menu-item.is-selected {
  background: var(--cw-white);
  border-left: 3px solid var(--cw-primary);
}
.vertical-tabs__menu-item .vertical-tabs__menu-item-summary {
  font-size: 0.7em;
  color: var(--cw-grey-500);
  display: block;
  margin-top: 1px;
}
#field-display-overview { width: 100%; }
.filter-guidelines-item { font-size: 0.75em; color: var(--cw-grey-500); }

/* ============================================================
   VIEWS
   ============================================================ */
.view {
  background-color: var(--cw-card-bg);
  padding: 0;
  border-radius: var(--cw-radius);
}
.view-filters {
  background-color: var(--cw-grey-100);
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--cw-grey-300);
  border-radius: var(--cw-radius);
}
.view-filters legend { margin-bottom: 0; font-size: inherit; font-weight: 600; color: var(--cw-grey-700); }
.view-filters .form-item { margin-bottom: 0; }
.view-filters label { margin-bottom: 2px; font-size: 0.8em; }
.views-exposed-form > .form--inline {
  display: inline-flex;
  font-size: 0.875em;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.views-exposed-form > .form--inline .form-actions { padding-top: 0; padding-bottom: 0; align-self: flex-end; }
.views-field-node-bulk-form { width: 10px; }
.views-field-wsb-loans-report-eds .fa-file-contract { font-size: 1.5em; }
.layout__region--content > .views-element-container { padding: 3px 0 20px; }
.layout .layout__region { padding: 0 0 0 1em; }
.layout--onecol .layout__region { padding-left: 0; }
.layout .layout__region--first { padding-left: 0; }
.views-view-responsive-grid__item {
  padding: 8px;
  border: 1px solid var(--cw-grey-300);
  border-radius: var(--cw-radius);
  transition: all var(--cw-transition);
}
.views-admin a { color: unset; text-decoration: none; }
.view-front-page-card-view .views-view-responsive-grid__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--cw-card-shadow-hover);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.page-link {
  color: var(--cw-grey-700);
  font-size: 0.875em;
  border-color: var(--cw-grey-300);
  transition: all var(--cw-transition);
}
.page-link:hover {
  color: var(--cw-primary);
  background-color: var(--cw-primary-light);
  border-color: var(--cw-primary);
}
.page-link.active,
.media-library-view--widget .view-header a.page-link.is-active,
.active > .page-link {
  background-color: var(--cw-primary);
  border-color: var(--cw-primary);
  color: var(--cw-white);
}

/* ============================================================
   VIEWS HEADER AREA
   ============================================================ */
.views-element-container .view-header { margin: 1em 0; }
.views-element-container .view-header .area-monthly-report-wrapper {
  clear: both;
  padding: 16px 16px 10px;
  background-color: var(--cw-primary-light);
  border: 1px solid rgba(232, 96, 10, 0.15);
  border-radius: var(--cw-radius);
}
.views-element-container .view-header .area-monthly-report-wrapper .list-group-item {
  background: none;
  padding: 4px 8px;
  text-align: center;
  margin-left: 0;
  font-size: 0.875em;
  border-radius: var(--cw-radius);
  transition: all var(--cw-transition);
}
.views-element-container .view-header .area-monthly-report-wrapper .list-group-item.active {
  background-color: var(--cw-primary);
  color: var(--cw-white);
}
.views-element-container .view-header .area-monthly-report-wrapper .list-group-item a { margin-right: 0; color: inherit; }
.views-element-container .view-header .area-monthly-report-wrapper .list-group-item.active a { color: white; }
.views-element-container .view-header a { margin-right: 20px; }
.views-element-container .view-header a.no-margin { margin: 0; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-control:focus, .form-select:focus {
  border-color: var(--cw-primary);
  box-shadow: 0 0 0 3px rgba(232, 96, 10, 0.12);
}
.form-textarea-wrapper textarea {
  min-width: 100px;
  border-color: var(--cw-grey-300);
  border-radius: var(--cw-radius);
  transition: border-color var(--cw-transition), box-shadow var(--cw-transition);
}
.form-textarea-wrapper textarea:focus {
  border-color: var(--cw-primary);
  box-shadow: 0 0 0 3px rgba(232, 96, 10, 0.12);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.marg-left-10 { margin-left: 10px !important; }
.marg-left-20 { margin-left: 20px !important; }
.marg-left-30 { margin-left: 30px !important; }
.pad-right-0 { padding-right: 0px !important; }
.pad-left-0 { padding-left: 0px !important; }
.dh-25 { height: 25px; }
.dh-50 { height: 50px; }
.dh-65 { height: 65px; }
.dh-75 { height: 75px; }

/* ============================================================
   FORM CHECKBOXES & RADIOS
   ============================================================ */
.form-check {
  padding-left: 1.75em;
  margin-bottom: 4px;
}
.form-check-input {
  width: 1.1em;
  height: 1.1em;
  border-color: var(--cw-grey-400);
  transition: all var(--cw-transition);
}
.form-check-input:checked {
  background-color: var(--cw-primary);
  border-color: var(--cw-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(232, 96, 10, 0.15);
  border-color: var(--cw-primary);
}
.form-check-label {
  font-weight: 400;
  font-size: 0.875em;
  color: var(--cw-grey-800);
}

/* ============================================================
   WORKFLOW / STATE CHANGE SECTION
   ============================================================ */
.field--name-field-finance-status,
.content-moderation-entity-moderation-form {
  background: var(--cw-grey-100);
  border: 1px solid var(--cw-grey-300);
  border-radius: var(--cw-radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}

/* ============================================================
   PUBLISHED TOGGLE
   ============================================================ */
.node-form > .form-item:last-of-type .form-check {
  padding: 8px 0 8px 1.75em;
}

/* ============================================================
   MISC
   ============================================================ */
.bg-light { color: inherit; }
.knowledge-level-badge { float: left; margin-right: 10px; white-space: nowrap; }
.ck .image-alternative-text-missing-wrapper { display: none; }
.electronic-document {
  width: 650px;
  margin: auto;
  color: black;
  font-size: 12px;
  font-family: var(--cw-font);
  max-width: 100%;
}
.electronic-document table { border: 1px solid black; width: 100%; }
.electronic-document td { border-width: 1px; }
.electronic-document h2 { font-size: 16px; }
.electronic-document h1, .electronic-document h2, .electronic-document h3,
.electronic-document h4, .electronic-document h5, .electronic-document h6 {
  margin: 0px 0px 15px 0px;
  font-weight: bold;
  color: #303e67;
}
.node--type-electronic-document ul.pre_links { display: block; overflow: hidden; padding-left: 0; }
.node_view ul.pre_links li:first-child { background: none; padding-left: 0; }
.node_view ul.pre_links li a:before { font-family: "Font Awesome 6 Free"; content: '\f02f'; font-weight: 900; padding-right: 4px; }
.node_view ul.pre_links li:nth-child(2) { background: none; }
.node_view ul.pre_links li:nth-child(2) a:before { content: '\f1c1'; }
article.node .paragraphs-table-add-btn-wrapper { display: none; }
.chosen-container { display: block !important; padding: 1px 40px 1px 0; border-color: var(--cw-grey-300); min-width: 186px; }
.chosen-container-multi .chosen-choices { border: none; }
.chosen-container.chosen-container-single { font-size: 1em; padding: 0; height: 32px;}
.chosen-container.chosen-container-single .chosen-single { border: none; }
.button-dropdown { position: relative; }
.view-credit-committee-report.view-display-id-block_purchaser .view-footer .container { padding: 0; margin: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 575.98px) {
  .views-exposed-form > .form--inline { display: block; }
  .views-exposed-form > .form--inline .form-actions { padding: 0; }
  .views-exposed-form > .form--inline .form-item, .form-control { max-width: 100%; }
  .block-wsb-og-logo-block { max-width: 110px; }
  header .region-nav-branding .block-wsb-og-logo-block img { height: auto; }
  .region.region-content { padding: 16px; border-radius: 0; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cw-grey-200); }
::-webkit-scrollbar-thumb { background: var(--cw-grey-400); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cw-grey-500); }