/* FullTime ERP Design System - Complete Enterprise Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* Core HSL Tokens */
  --background: 205 24% 98%;        /* #EAEEF2 / Mist */
  --foreground: 205 30% 12%;        /* #141E28 / Ink */
  --primary: 202 97% 23%;           /* Deep Navy #014C74 */
  --primary-foreground: 0 0% 100%;   /* White #FFFFFF */
  --destructive: 356 85% 52%;       /* Brand Red #ED1D2B */
  --destructive-foreground: 0 0% 100%;
  --success: 150 63% 37%;           /* Approved #1B7A3D */
  --warning: 38 92% 48%;            /* Hold/Warning #9A6A00 */
  --accent: 202 52% 91%;            /* Navy Light #DBEBF4 */
  --muted-foreground: 210 13% 41%;  /* Slate #5B6875 */
  --border: 205 22% 89%;            /* Line #DCE3E9 */
  --ring: 202 97% 23%;              /* Navy Focus Ring */
  --radius: 0.5rem;                 /* 8px */

  /* Navy Ramp */
  --navy-900: #012E46;
  --navy-800: #014C74;
  --navy-700: #0A6394;
  --navy-500: #2E88BD;
  --navy-300: #8FC0DE;
  --navy-100: #DBEBF4;

  /* Red Ramp */
  --red-800: #8E0D16;
  --red-700: #C11420;
  --red-600: #ED1D2B;
  --red-400: #F4595F;
  --red-200: #F9A0A3;
  --red-50:  #FCE1E2;

  /* Neutrals */
  --color-ink: #141E28;
  --color-body: #3F4A56;
  --color-slate: #5B6875;
  --color-line: #DCE3E9;
  --color-mist: #EEF2F5;
  --color-paper: #FFFFFF;

  /* Workflow Status Colors */
  --status-draft-bg: #EAEEF2;
  --status-draft-text: #5B6875;
  --status-pending-bg: #FBF1D8;
  --status-pending-text: #9A6A00;
  --status-approved-bg: #E3F4E8;
  --status-approved-text: #1B7A3D;
  --status-active-bg: #DBEBF4;
  --status-active-text: #014C74;
  --status-completed-bg: #E6ECF1;
  --status-completed-text: #25313D;
  --status-hold-bg: #ECE8FA;
  --status-hold-text: #51429E;
  --status-overdue-bg: #FCE1E2;
  --status-overdue-text: #C11420;
}

/* Global Typography & Body Setup */
body, input, button, select, textarea {
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--color-ink);
}

/* Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Instrument Sans', sans-serif !important;
  color: var(--navy-800);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Brand Utility Classes */
.text-brand-primary   { color: var(--navy-800) !important; }
.text-brand-red       { color: var(--red-600) !important; }
.bg-brand-navy        { background-color: var(--navy-800) !important; color: #FFFFFF !important; }
.bg-brand-red         { background-color: var(--red-600) !important; color: #FFFFFF !important; }

/* ERP Badge Component */
.badge-erp {
  background-color: var(--red-600) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 0.25rem !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  vertical-align: middle !important;
  box-shadow: 0 1px 2px rgba(237, 29, 43, 0.3) !important;
}

/* ==========================================================================
   Bootstrap Component Overrides (FullTime ERP System Realignment)
   ========================================================================== */

/* --- Buttons --- */
.btn {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem 1rem;
  transition: all 0.15s ease-in-out !important;
}

/* Primary / Main Action Buttons */
.btn-primary, .btn-info, .btn-dark, .btn-brand-primary {
  background-color: var(--navy-800) !important;
  border-color: var(--navy-800) !important;
  color: #FFFFFF !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-dark:hover, .btn-brand-primary:hover {
  background-color: var(--navy-900) !important;
  border-color: var(--navy-900) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 0.2rem rgba(1, 76, 116, 0.25) !important;
}

/* Destructive / Delete Buttons (Red is strictly reserved for destructive) */
.btn-danger, .btn-brand-destructive {
  background-color: var(--red-600) !important;
  border-color: var(--red-600) !important;
  color: #FFFFFF !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-brand-destructive:hover {
  background-color: var(--red-700) !important;
  border-color: var(--red-700) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 0.2rem rgba(237, 29, 43, 0.25) !important;
}

/* Secondary / Ghost / Outline Buttons */
.btn-secondary, .btn-light, .btn-brand-outline {
  background-color: #FFFFFF !important;
  border: 1px solid var(--color-line) !important;
  color: var(--color-body) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-brand-outline:hover {
  background-color: var(--color-mist) !important;
  color: var(--color-ink) !important;
  border-color: var(--color-slate) !important;
}

/* Outline Variants */
.btn-outline-primary {
  background-color: transparent !important;
  border: 1px solid var(--navy-800) !important;
  color: var(--navy-800) !important;
}
.btn-outline-primary:hover {
  background-color: var(--navy-800) !important;
  color: #FFFFFF !important;
}

.btn-outline-secondary {
  background-color: transparent !important;
  border: 1px solid var(--color-line) !important;
  color: var(--color-body) !important;
}
.btn-outline-secondary:hover {
  background-color: var(--color-mist) !important;
  color: var(--color-ink) !important;
  border-color: var(--color-slate) !important;
}

.btn-outline-danger {
  background-color: transparent !important;
  border: 1px solid var(--red-600) !important;
  color: var(--red-600) !important;
}
.btn-outline-danger:hover {
  background-color: var(--red-600) !important;
  color: #FFFFFF !important;
}

.btn-success {
  background-color: var(--status-approved-text) !important;
  border-color: var(--status-approved-text) !important;
  color: #FFFFFF !important;
}
.btn-success:hover {
  background-color: #166534 !important;
  border-color: #166534 !important;
}

.btn-outline-success {
  background-color: transparent !important;
  border: 1px solid var(--status-approved-text) !important;
  color: var(--status-approved-text) !important;
}
.btn-outline-success:hover {
  background-color: var(--status-approved-text) !important;
  color: #FFFFFF !important;
}

.btn-warning {
  background-color: var(--status-pending-text) !important;
  border-color: var(--status-pending-text) !important;
  color: #FFFFFF !important;
}
.btn-outline-warning {
  background-color: transparent !important;
  border: 1px solid var(--status-pending-text) !important;
  color: var(--status-pending-text) !important;
}
.btn-outline-warning:hover {
  background-color: var(--status-pending-text) !important;
  color: #FFFFFF !important;
}

/* --- Cards & Panels --- */
.card, .panel {
  background-color: var(--color-paper);
  border: 1px solid var(--color-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.2s ease-in-out;
}
.card:hover {
  box-shadow: 0 4px 12px rgba(1, 76, 116, 0.06) !important;
}

.card-header {
  background-color: #F5F8FA;
  border-bottom: 1px solid #EBF0F4 !important;
  color: var(--navy-800) !important;
  font-weight: 700 !important;
  padding: 0.85rem 1.25rem;
}

.card-footer {
  background-color: #F5F8FA;
  border-top: 1px solid #EBF0F4 !important;
  padding: 0.75rem 1.25rem;
}

/* Allow bg-transparent utility to override header/footer background */
.card-header.bg-transparent,
.card-footer.bg-transparent {
  background-color: transparent !important;
}

/* Gradient KPI Card Overrides for Dashboard */
.card.bg-success, .card.bg-success.bg-gradient {
  background: linear-gradient(135deg, #0A6394 0%, #014C74 100%) !important;
  border: none !important;
}

.card.bg-danger, .card.bg-danger.bg-gradient {
  background: linear-gradient(135deg, #ED1D2B 0%, #C11420 100%) !important;
  border: none !important;
}

.card.bg-warning, .card.bg-warning.bg-gradient {
  background: linear-gradient(135deg, #D97706 0%, #92400E 100%) !important;
  border: none !important;
}

.card.bg-primary, .card.bg-primary.bg-gradient {
  background: linear-gradient(135deg, #014C74 0%, #012E46 100%) !important;
  border: none !important;
}

/* --- Tables & Data Grids --- */
.table, table.dataTable {
  font-family: 'Instrument Sans', sans-serif !important;
  border-color: var(--color-line) !important;
}

.table thead th, table.dataTable thead th {
  background-color: #F5F8FA !important;
  color: var(--navy-800) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--color-line) !important;
  padding: 0.75rem 1rem !important;
}

.table tbody td, table.dataTable tbody td {
  color: var(--color-body) !important;
  font-size: 0.875rem !important;
  border-bottom: 1px solid #EBF0F4 !important;
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
}

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

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #FAFCFD !important;
}

/* --- Form Controls & Inputs --- */
.form-control, .form-select, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], select, textarea {
  border: 1px solid #CDD8E0 !important;
  border-radius: var(--radius) !important;
  color: var(--color-ink) !important;
  background-color: var(--color-paper) !important;
  font-family: 'Instrument Sans', sans-serif !important;
  padding: 0.5rem 0.75rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--navy-800) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(1, 76, 116, 0.25) !important;
}

.form-label, label {
  font-weight: 600 !important;
  color: var(--navy-800) !important;
  font-size: 0.85rem !important;
  margin-bottom: 0.35rem !important;
}

/* Select2 FullTime Styling (Supports bootstrap-5 & default fallback) */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid #CDD8E0 !important;
  border-radius: var(--radius, 8px) !important;
  min-height: 38px !important;
  background-color: #ffffff !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--navy-800, #014C74) !important;
  box-shadow: 0 0 0 2px rgba(1, 76, 116, 0.25) !important;
}

/* Select2 Dropdown Popup & Active Options */
.select2-dropdown {
  border: 1px solid #CDD8E0 !important;
  border-radius: var(--radius, 8px) !important;
  box-shadow: 0 8px 24px rgba(1, 46, 70, 0.12) !important;
  overflow: hidden;
  z-index: 1060 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #CDD8E0 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  outline: none !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
  background-color: var(--navy-800, #014C74) !important;
  color: #ffffff !important;
}


/* --- Badges & Status Pills --- */
.badge {
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.35em 0.75em !important;
  letter-spacing: 0.02em;
}

.badge.bg-primary, .badge-primary {
  background-color: var(--status-active-bg) !important;
  color: var(--status-active-text) !important;
}

.badge.bg-success, .badge-success {
  background-color: var(--status-approved-bg) !important;
  color: var(--status-approved-text) !important;
}

.badge.bg-warning, .badge-warning {
  background-color: var(--status-pending-bg) !important;
  color: var(--status-pending-text) !important;
}

.badge.bg-danger, .badge-danger {
  background-color: var(--status-overdue-bg) !important;
  color: var(--status-overdue-text) !important;
}

.badge.bg-secondary, .badge-secondary {
  background-color: var(--status-draft-bg) !important;
  color: var(--status-draft-text) !important;
}

.badge.bg-info, .badge-info {
  background-color: var(--status-active-bg) !important;
  color: var(--status-active-text) !important;
}

/* Dedicated Workflow Status Classes */
.bg-status-draft    { background-color: var(--status-draft-bg) !important; color: var(--status-draft-text) !important; }
.bg-status-pending  { background-color: var(--status-pending-bg) !important; color: var(--status-pending-text) !important; }
.bg-status-approved { background-color: var(--status-approved-bg) !important; color: var(--status-approved-text) !important; }
.bg-status-active   { background-color: var(--status-active-bg) !important; color: var(--status-active-text) !important; }
.bg-status-completed{ background-color: var(--status-completed-bg) !important; color: var(--status-completed-text) !important; }
.bg-status-hold     { background-color: var(--status-hold-bg) !important; color: var(--status-hold-text) !important; }
.bg-status-overdue  { background-color: var(--status-overdue-bg) !important; color: var(--status-overdue-text) !important; }

/* --- Alerts & Banners --- */
.alert {
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  padding: 0.85rem 1.25rem !important;
}
.alert-primary, .alert-info {
  background-color: var(--navy-100) !important;
  border-color: var(--navy-300) !important;
  color: var(--navy-900) !important;
}
.alert-success {
  background-color: var(--status-approved-bg) !important;
  border-color: #A7F3D0 !important;
  color: var(--status-approved-text) !important;
}
.alert-warning {
  background-color: var(--status-pending-bg) !important;
  border-color: #FDE68A !important;
  color: var(--status-pending-text) !important;
}
.alert-danger {
  background-color: var(--status-overdue-bg) !important;
  border-color: var(--red-200) !important;
  color: var(--status-overdue-text) !important;
}

/* --- Modals & Dialogs --- */
.modal-content {
  border-radius: 14px !important;
  border: 1px solid var(--color-line) !important;
  box-shadow: 0 10px 25px rgba(1, 46, 70, 0.15) !important;
}
.modal-header {
  background-color: #F5F8FA !important;
  border-bottom: 1px solid #EBF0F4 !important;
  color: var(--navy-800) !important;
}
.modal-title {
  font-weight: 700 !important;
  color: var(--navy-800) !important;
}
.modal-footer {
  background-color: #F5F8FA !important;
  border-top: 1px solid #EBF0F4 !important;
}

/* --- Dropdowns & Navs --- */
.dropdown-menu {
  border-radius: 10px !important;
  border: 1px solid var(--color-line) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 0.4rem 0;
}
.dropdown-item {
  color: var(--color-body) !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: #F0F4F8 !important;
  color: var(--navy-800) !important;
}

.nav-tabs .nav-link {
  color: var(--color-body) !important;
  font-weight: 500 !important;
  border: none !important;
}
.nav-tabs .nav-link.active {
  border-bottom: 3px solid var(--navy-800) !important;
  color: var(--navy-800) !important;
  font-weight: 700 !important;
  background: transparent !important;
}

.nav-pills .nav-link.active {
  background-color: var(--navy-800) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius) !important;
}