/* ==========================================================================
   GZI eProcurement & Invoicing Modern Enterprise Design System
   Brand Colors: Corporate Navy (#0f3460), Vibrant Cyan (#00aeef), Forest Green (#10b981)
   ========================================================================== */

:root {
  --gzi-navy-dark: #001487;
  --gzi-navy: #002888;
  --gzi-navy-light: #0f3460;
  --gzi-cyan: #00aeef;
  --gzi-cyan-hover: #0095cc;
  --gzi-cyan-light: #e0f4fd;
  --gzi-green: #10b981;
  --gzi-green-hover: #059669;
  --gzi-green-light: #ecfdf5;
  --gzi-amber: #f59e0b;
  --gzi-amber-light: #fef3c7;
  --gzi-red: #ef4444;
  --gzi-red-light: #fee2e2;
  
  --gzi-canvas: #f8fafc;
  --gzi-surface: #ffffff;
  --gzi-border: #e2e8f0;
  --gzi-border-subtle: #edf2f7;
  
  --gzi-text: #1e293b;
  --gzi-text-muted: #64748b;
  --gzi-text-heading: #0f172a;
  
  --gzi-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --gzi-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --gzi-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --gzi-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --gzi-radius: 8px;
  --gzi-radius-sm: 5px;
  --gzi-radius-lg: 12px;
  --gzi-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base & Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--gzi-text);
  background-color: var(--gzi-canvas);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--gzi-text-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   Header & Topbar Modernization
   ========================================================================== */
.topbar {
  background: linear-gradient(90deg, #001487 0%, #00229e 35%, #0033aa 70%, #001487 100%) !important;
  border-bottom: 2px solid var(--gzi-cyan) !important;
  box-shadow: var(--gzi-shadow-md);
  height: 64px !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

.topbar-inner {
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  width: 100% !important;
}

.topbar .navbar-default {
  background: transparent !important;
  border: none !important;
  margin-bottom: 0;
}

.topbar-left {
  background: transparent !important;
  width: 240px;
  float: left;
  height: 56px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  transition: width 0.2s ease;
}

.button-menu-mobile {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--gzi-radius-sm) !important;
  transition: var(--gzi-transition);
  height: 36px;
  width: 36px;
  min-width: 36px;
  padding: 0 !important;
  margin: 0 10px 0 0 !important;
  border: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.button-menu-mobile i {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.button-menu-mobile:hover {
  background: var(--gzi-cyan) !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(0, 174, 239, 0.5);
}

.top-navbar .dropdown > a {
  color: #ffffff !important;
  font-weight: 500;
  padding: 16px 16px !important;
  border-radius: var(--gzi-radius-sm);
  transition: var(--gzi-transition);
  display: inline-block;
}

.top-navbar .dropdown > a:hover,
.top-navbar .dropdown.open > a {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--gzi-cyan) !important;
}

.topbar-profile strong {
  color: #ffffff;
  font-size: 13.5px;
}

/* Global App Header (Forte / Site Master) */
#forteoilheader {
  background: linear-gradient(135deg, var(--gzi-navy-dark) 0%, var(--gzi-navy) 65%, #0e4b85 100%) !important;
  border-bottom: 3px solid var(--gzi-cyan) !important;
  height: auto !important;
  min-height: 85px !important;
  padding: 15px 0 !important;
  box-shadow: var(--gzi-shadow-md);
}

#forteoilheader .brand-title {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 8px 0 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#forteoilheader .brand-subtitle {
  color: var(--gzi-cyan);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

#fortnav ul {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#fortnav li a {
  color: #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--gzi-radius-sm) !important;
  background: rgba(255, 255, 255, 0.05);
  transition: var(--gzi-transition) !important;
  text-decoration: none !important;
  display: inline-block;
}

#fortnav li a:hover {
  background: var(--gzi-cyan) !important;
  border-color: var(--gzi-cyan) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 174, 239, 0.35);
}

/* ==========================================================================
   Admin Breadcrumb Bar & Page Headers
   ========================================================================== */
.admin-breadcrumb-bar {
  background: #ffffff;
  border: 1px solid var(--gzi-border);
  border-radius: var(--gzi-radius);
  padding: 10px 16px;
  margin-bottom: 20px;
  box-shadow: var(--gzi-shadow-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-breadcrumb-bar .breadcrumb-inner {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.breadcrumb-home-icon {
  color: var(--gzi-cyan);
  margin-right: 8px;
  font-size: 15px;
}

.breadcrumb-nav-path {
  color: var(--gzi-text-muted);
  font-weight: 500;
  display: inline-block;
}

.breadcrumb-root-node,
.breadcrumb-link-node {
  color: var(--gzi-cyan) !important;
  text-decoration: none !important;
  font-weight: 500;
}

.breadcrumb-root-node:hover,
.breadcrumb-link-node:hover {
  color: var(--gzi-navy) !important;
  text-decoration: underline !important;
}

.breadcrumb-current-node {
  color: var(--gzi-navy) !important;
  font-weight: 600;
}

/* Global Breadcrumb Override */
.breadcrumb, ol.breadcrumb, ul.breadcrumb {
  position: static !important;
  top: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--gzi-border) !important;
  border-radius: var(--gzi-radius) !important;
  padding: 10px 16px !important;
  margin-bottom: 20px !important;
  font-size: 13px !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: var(--gzi-shadow-xs) !important;
  color: var(--gzi-text-muted) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.breadcrumb > li {
  color: var(--gzi-text-muted) !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.breadcrumb > li a {
  color: var(--gzi-cyan) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.breadcrumb > li a:hover {
  color: var(--gzi-navy) !important;
  text-decoration: underline !important;
}

.breadcrumb > li.active,
.breadcrumb > li:last-child {
  color: var(--gzi-navy) !important;
  font-weight: 600 !important;
}

.breadcrumb > li + li:before {
  content: "/" !important;
  padding: 0 8px !important;
  color: #cbd5e1 !important;
  font-family: inherit !important;
}

.page-heading {
  margin-bottom: 20px;
  padding: 0;
}

.page-heading h1, .page-heading h2, .page-heading h3 {
  color: var(--gzi-navy) !important;
  font-weight: 700 !important;
  margin-top: 0;
}

/* ==========================================================================
   Sidebar Menu Modernization & Expanded State
   ========================================================================== */
.side-menu.left {
  background: #ffffff !important;
  border-right: 1px solid var(--gzi-border) !important;
  box-shadow: var(--gzi-shadow-sm) !important;
  width: 240px;
  top: 64px !important;
  transition: width 0.2s ease;
  z-index: 1020;
}

.content-page {
  margin-left: 240px;
  transition: margin-left 0.2s ease;
  padding-top: 20px;
  min-height: calc(100vh - 64px);
}

.content-page > .content {
  padding: 20px 25px;
}

/* Sidebar Menu Items */
#sidebar-menu {
  width: 100% !important;
}

#sidebar-menu > ul > li {
  background: #ffffff !important;
  display: block !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

#sidebar-menu > ul > li > a {
  color: #475569 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 11px 16px !important;
  border-left: 3px solid transparent !important;
  transition: var(--gzi-transition) !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

#sidebar-menu > ul > li > a i {
  color: #64748b !important;
  font-size: 15px !important;
  width: 22px !important;
  margin-right: 10px !important;
  text-align: center !important;
  transition: var(--gzi-transition);
}

#sidebar-menu > ul > li > a .pull-right {
  margin-left: auto !important;
  float: none !important;
}

#sidebar-menu > ul > li > a .pull-right i {
  margin-right: 0 !important;
  font-size: 12px !important;
  width: auto !important;
}

#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li.active > a,
#sidebar-menu > ul > li.has_sub.active > a {
  color: var(--gzi-navy) !important;
  background-color: var(--gzi-cyan-light) !important;
  border-left-color: var(--gzi-cyan) !important;
}

#sidebar-menu > ul > li > a:hover i,
#sidebar-menu > ul > li > a.active i,
#sidebar-menu > ul > li.active > a i {
  color: var(--gzi-cyan) !important;
}

/* Submenu / Dropdown in Sidebar */
#sidebar-menu ul ul {
  background: #f8fafc !important;
  padding: 4px 0 !important;
  border-left: 3px solid var(--gzi-cyan) !important;
  margin: 0 !important;
  list-style: none !important;
}

#sidebar-menu ul ul li {
  background: transparent !important;
  border: none !important;
}

#sidebar-menu ul ul li a {
  color: #64748b !important;
  padding: 8px 16px 8px 36px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: block !important;
  transition: var(--gzi-transition) !important;
  text-decoration: none !important;
}

#sidebar-menu ul ul li a:hover,
#sidebar-menu ul ul li a.active {
  color: var(--gzi-navy) !important;
  background-color: #e2e8f0 !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Collapsed / Mini Sidebar Experience (#wrapper.enlarged)
   ========================================================================== */
#wrapper.enlarged .left.side-menu {
  width: 60px !important;
  z-index: 1020 !important;
  background: #ffffff !important;
  border-right: 1px solid var(--gzi-border) !important;
  overflow: visible !important;
}

#wrapper.enlarged .content-page {
  margin-left: 60px !important;
}

#wrapper.enlarged .topbar .topbar-left {
  width: 60px !important;
  text-align: center !important;
  padding-left: 0 !important;
}

#wrapper.enlarged .topbar .topbar-left .button-menu-mobile {
  margin: 0 auto !important;
}

#wrapper.enlarged .topbar .topbar-left .logo {
  display: none !important;
}

#wrapper.enlarged #sidebar-menu > ul > li {
  position: relative !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

#wrapper.enlarged #sidebar-menu > ul > li > a {
  padding: 13px 0 !important;
  justify-content: center !important;
  text-align: center !important;
  border-left: none !important;
}

#wrapper.enlarged #sidebar-menu > ul > li > a i {
  margin-right: 0 !important;
  font-size: 17px !important;
  width: 100% !important;
}

#wrapper.enlarged #sidebar-menu > ul > li > a .nav-text,
#wrapper.enlarged #sidebar-menu > ul > li > a .pull-right {
  display: none !important;
}

#wrapper.enlarged #sidebar-menu > ul > li > ul {
  display: none !important;
}

/* Hover Flyout in Collapsed State */
#wrapper.enlarged #sidebar-menu > ul > li:hover > a {
  background-color: var(--gzi-navy) !important;
  color: #ffffff !important;
}

#wrapper.enlarged #sidebar-menu > ul > li:hover > a i {
  color: var(--gzi-cyan) !important;
}

#wrapper.enlarged #sidebar-menu > ul > li:hover > a .nav-text {
  display: block !important;
  position: absolute !important;
  left: 60px !important;
  top: 0 !important;
  height: 100% !important;
  line-height: 44px !important;
  background-color: var(--gzi-navy) !important;
  color: #ffffff !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.18) !important;
  z-index: 1050 !important;
}

#wrapper.enlarged #sidebar-menu > ul > li:hover > ul {
  display: block !important;
  position: absolute !important;
  left: 60px !important;
  top: 44px !important;
  width: 220px !important;
  background: #ffffff !important;
  border: 1px solid var(--gzi-border) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
  z-index: 1050 !important;
  border-left: none !important;
}

#wrapper.enlarged #sidebar-menu > ul > li:hover > ul a {
  padding: 10px 18px !important;
  color: #334155 !important;
  font-size: 12.5px !important;
  display: block !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

#wrapper.enlarged #sidebar-menu > ul > li:hover > ul a:hover {
  background-color: var(--gzi-cyan-light) !important;
  color: var(--gzi-navy) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Vendor & Public Header (#forteoilheader)
   ========================================================================== */
#forteoilheader {
  background: linear-gradient(90deg, #001487 0%, #00229e 35%, #0033aa 70%, #001487 100%) !important;
  border-bottom: 2px solid var(--gzi-cyan) !important;
  padding: 8px 0 !important;
  box-shadow: 0 4px 15px rgba(0, 20, 135, 0.25) !important;
}

#fortnav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

#fortnav li a {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  border-radius: var(--gzi-radius-sm) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transition: var(--gzi-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#fortnav li a:hover {
  background: var(--gzi-cyan) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.4) !important;
}

/* ==========================================================================
   Vendor Portal Navigation Menu (Vendor/nav.ascx)
   ========================================================================== */
#fortemenu {
  background: #ffffff;
  border: 1px solid var(--gzi-border);
  border-radius: var(--gzi-radius);
  padding: 12px;
  margin-bottom: 25px;
  box-shadow: var(--gzi-shadow-sm);
}

#fortemenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#fortemenu li a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  background-color: #f1f5f9;
  border: 1px solid var(--gzi-border);
  border-radius: var(--gzi-radius-sm);
  text-decoration: none;
  transition: var(--gzi-transition);
}

#fortemenu li a:hover {
  background-color: var(--gzi-navy);
  border-color: var(--gzi-navy);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--gzi-shadow-sm);
}

#fortemenu li a.active {
  background-color: var(--gzi-cyan);
  border-color: var(--gzi-cyan);
  color: #ffffff;
}

/* ==========================================================================
   Cards, Panels, Widgets & Containers
   ========================================================================== */
.card, .panel, .widget, .modal-content, .widget-content {
  background: #ffffff !important;
  border: 1px solid var(--gzi-border) !important;
  border-radius: var(--gzi-radius) !important;
  box-shadow: var(--gzi-shadow-sm) !important;
  transition: var(--gzi-transition);
}

.panel-heading, .widget-header, .modal-header {
  background-color: #f8fafc !important;
  border-bottom: 1px solid var(--gzi-border) !important;
  padding: 14px 20px !important;
  border-top-left-radius: var(--gzi-radius) !important;
  border-top-right-radius: var(--gzi-radius) !important;
}

.panel-heading h3, .panel-heading h4,
.widget-header h2, .widget-header h3, .widget-header h4,
.widget-header .modal-title {
  color: var(--gzi-navy) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin: 0 !important;
  display: inline-block;
}

/* Clean up legacy empty tags in widget-header */
.widget-header > br,
.widget-header > p:empty {
  display: none !important;
}

.panel-body, .widget-content, .modal-body {
  padding: 20px !important;
}

.panel-footer, .modal-footer {
  background-color: #f8fafc !important;
  border-top: 1px solid var(--gzi-border) !important;
  padding: 12px 20px !important;
  border-bottom-left-radius: var(--gzi-radius) !important;
  border-bottom-right-radius: var(--gzi-radius) !important;
}

/* ==========================================================================
   Modern Buttons
   ========================================================================== */
.btn {
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: var(--gzi-radius-sm) !important;
  padding: 7px 16px !important;
  transition: var(--gzi-transition) !important;
  box-shadow: var(--gzi-shadow-xs);
  border: 1px solid transparent !important;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--gzi-shadow-sm);
}

.btn-primary {
  background: linear-gradient(180deg, #1e4976 0%, var(--gzi-navy) 100%) !important;
  border-color: var(--gzi-navy) !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #163657 0%, var(--gzi-navy-dark) 100%) !important;
  border-color: var(--gzi-navy-dark) !important;
}

.btn-success, .btn-success-forte {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

.btn-success:hover, .btn-success-forte:hover {
  background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
  border-color: #047857 !important;
}

.btn-info {
  background: linear-gradient(180deg, #38bdf8 0%, var(--gzi-cyan) 100%) !important;
  border-color: var(--gzi-cyan) !important;
  color: #ffffff !important;
}

.btn-info:hover {
  background: linear-gradient(180deg, var(--gzi-cyan) 0%, #0284c7 100%) !important;
  border-color: #0284c7 !important;
}

.btn-default {
  background: #ffffff !important;
  border-color: var(--gzi-border) !important;
  color: #334155 !important;
}

.btn-default:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: var(--gzi-navy) !important;
}

.btn-warning {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}

.btn-danger {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%) !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Form Controls
   ========================================================================== */
.form-control, select.form-control:not([size]), input[type="text"].form-control, input[type="password"].form-control, textarea.form-control {
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--gzi-radius-sm) !important;
  background-color: #ffffff !important;
  color: var(--gzi-text) !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  height: 36px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: var(--gzi-transition);
}

select[size],
select.entity-select-box,
.entity-select-box {
  height: auto !important;
  min-height: 185px !important;
  padding: 6px !important;
}

select[size] option,
.entity-select-box option {
  padding: 9px 12px !important;
  margin-bottom: 2px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}

.form-control:focus {
  border-color: var(--gzi-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.18) !important;
  outline: none;
}

label, .control-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}

.input-group-addon {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
  border-radius: var(--gzi-radius-sm) 0 0 var(--gzi-radius-sm) !important;
  padding: 6px 12px !important;
  font-size: 13.5px !important;
}

/* ==========================================================================
   Data Tables & GridViews
   ========================================================================== */
.table, table.table {
  background: #ffffff !important;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--gzi-border) !important;
  border-radius: var(--gzi-radius);
  overflow: hidden;
  box-shadow: var(--gzi-shadow-xs);
  margin-bottom: 20px;
  width: 100% !important;
}

.table > thead > tr > th,
.table > tbody > tr > th,
table.table th {
  background-color: #f8fafc !important;
  color: #475569 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 10px !important;
  border-bottom: 2px solid var(--gzi-border) !important;
  border-top: none !important;
  vertical-align: middle;
}

.table > tbody > tr > td,
table.table td {
  padding: 10px 10px !important;
  border-top: 1px solid var(--gzi-border-subtle) !important;
  color: #334155;
  font-size: 12.5px;
  vertical-align: middle;
  transition: background-color 0.15s ease;
}

/* Strict SN Column Sizing & Job Grid Layout */
.sn-col,
.table th.sn-col,
.table td.sn-col,
.table > thead > tr > th:first-child:has(> .sn-col),
.table > tbody > tr > td:first-child:has(> .sn-col),
.job-grid-table > thead > tr > th:first-child,
.job-grid-table > tbody > tr > td:first-child {
  width: 50px !important;
  max-width: 50px !important;
  min-width: 50px !important;
  text-align: center !important;
  padding: 10px 4px !important;
  white-space: nowrap !important;
}

.job-grid-table,
table.job-grid-table {
  table-layout: fixed !important;
  width: 100% !important;
}

.job-grid-table > thead > tr > th:nth-child(4),
.job-grid-table > tbody > tr > td:nth-child(4) {
  word-break: normal !important;
  white-space: normal !important;
}

.table-hover > tbody > tr:hover,
table.table tr:hover {
  background-color: #f1f5f9 !important;
}

.table .warning, .table tr.warning {
  background-color: #fffbeb !important;
}

.table .success, .table tr.success {
  background-color: #ecfdf5 !important;
}

.table .info, .table tr.info {
  background-color: #f0f9ff !important;
}

/* Modern Pagination */
.bs-pagination, .pagination {
  margin: 15px 0 !important;
  display: flex;
  gap: 4px;
}

.bs-pagination a, .bs-pagination span,
.pagination > li > a, .pagination > li > span {
  padding: 6px 13px !important;
  border: 1px solid var(--gzi-border) !important;
  border-radius: var(--gzi-radius-sm) !important;
  color: var(--gzi-navy) !important;
  font-weight: 500;
  font-size: 13px;
  background: #ffffff;
  transition: var(--gzi-transition);
}

.bs-pagination a:hover,
.pagination > li > a:hover {
  background-color: var(--gzi-cyan-light) !important;
  border-color: var(--gzi-cyan) !important;
  color: var(--gzi-cyan-hover) !important;
}

.bs-pagination span,
.pagination > .active > a, .pagination > .active > span {
  background-color: var(--gzi-navy) !important;
  border-color: var(--gzi-navy) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Modals & Popups
   ========================================================================== */
.modal-dialog {
  margin-top: 50px;
}

.modal-content {
  border-radius: var(--gzi-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--gzi-shadow-lg) !important;
  border: 1px solid var(--gzi-border) !important;
}

.modal-header {
  background: linear-gradient(135deg, var(--gzi-navy-dark) 0%, var(--gzi-navy) 100%) !important;
  color: #ffffff !important;
  border-bottom: 2px solid var(--gzi-cyan) !important;
}

.modal-header .modal-title {
  color: #ffffff !important;
}

.modal-header .close {
  color: #ffffff !important;
  opacity: 0.8;
  font-size: 24px;
  text-shadow: none;
}

.modal-header .close:hover {
  opacity: 1;
}

/* Footer */
footer.footer {
  background: #ffffff;
  border-top: 1px solid var(--gzi-border);
  padding: 15px 0;
  color: var(--gzi-text-muted);
  font-size: 12.5px;
  margin-top: 40px;
}