/* 
  Apple DNA - Universal UI/UX Design System 
  Base Styles & Tokens 
*/

:root {
  /* Typography */
  --font-primary: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Menlo", monospace;

  /* Type Scale */
  --text-large-title: 34px;
  --text-title-1: 28px;
  --text-title-2: 22px;
  --text-title-3: 20px;
  --text-headline: 17px;
  --text-body: 17px;
  --text-callout: 16px;
  --text-subhead: 15px;
  --text-footnote: 13px;
  --text-caption-1: 12px;
  --text-caption-2: 11px;

  /* Line Heights */
  --line-height-heading: 1.25;
  --line-height-body: 1.47;
  --line-height-single: 1.0;

  /* Spacing Grid (4pt Base) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-44: 44px;
  --space-48: 48px;
  --space-64: 64px;

  /* Corner Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Colors (Base Palette) */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f2f2f7;
  --color-label-primary: #000000;
  --color-label-secondary: #8e8e93;
  --color-label-tertiary: #c7c7cc;
  --color-separator: rgba(60, 60, 67, 0.36);
  --color-blue: #007aff;
  --color-green: #34c759;
  --color-red: #ff3b30;
  --color-orange: #f97316; /* FAB ERP Brand Orange */
}

/* Base Resets */
html, body {
  font-family: var(--font-primary);
  color: var(--color-label-primary);
  line-height: var(--line-height-body);
  background-color: var(--color-bg-primary);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Classes */
.apple-large-title {
  font-size: var(--text-large-title);
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: var(--line-height-heading);
}

.apple-title-1 {
  font-size: var(--text-title-1);
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: var(--line-height-heading);
}

.apple-title-2 {
  font-size: var(--text-title-2);
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: var(--line-height-heading);
}

.apple-title-3 {
  font-size: var(--text-title-3);
  font-weight: 600;
  letter-spacing: -0.1px;
  line-height: var(--line-height-heading);
}

.apple-headline {
  font-size: var(--text-headline);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--line-height-heading);
}

.apple-body {
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--line-height-body);
}

.apple-subhead {
  font-size: var(--text-subhead);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--line-height-body);
  color: var(--color-label-secondary);
}

.apple-footnote {
  font-size: var(--text-footnote);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--line-height-body);
}

/* Layout Utilities */
.apple-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

@media (min-width: 768px) {
  .apple-container {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }
}

@media (min-width: 1024px) {
  .apple-container {
    padding-left: var(--space-32);
    padding-right: var(--space-32);
  }
}

/* Component: Button */
.apple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-body);
  border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-16);
  min-height: var(--space-44); /* Touch target */
  transition: transform 100ms ease-out, opacity 100ms ease-out;
  cursor: pointer;
  border: none;
  text-align: center;
}

.apple-btn:active {
  transform: scale(0.96);
}

.apple-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.apple-btn-primary {
  background-color: var(--color-blue);
  color: #fff;
}

/* Component: Card */
.apple-card {
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Soft shadow, no thick borders */
  border: 0.5px solid var(--color-separator);
}

/* Reset Links and Inputs */
a {
  color: var(--color-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

input, select, textarea {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-separator);
  padding: var(--space-8) var(--space-12);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-blue);
}

/* Dashboard Structural Classes */
.apple-dashboard-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .apple-dashboard-layout {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
  }
}

@media (min-width: 1024px) {
  .apple-dashboard-layout {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   BOOTSTRAP OVERRIDES - Universal Apple UI Enforcement
   ========================================================================== */

/* Typography Overrides */
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-primary) !important;
}

h1, .h1 { font-size: var(--text-large-title); font-weight: 700; letter-spacing: -0.4px; }
h2, .h2 { font-size: var(--text-title-1); font-weight: 700; letter-spacing: -0.3px; }
h3, .h3 { font-size: var(--text-title-2); font-weight: 700; letter-spacing: -0.2px; }
h4, .h4 { font-size: var(--text-title-3); font-weight: 600; letter-spacing: -0.1px; }

/* Form Controls & Inputs */
.form-control, .input-group-addon, .input-sm {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--text-body) !important;
  padding: var(--space-8) var(--space-12) !important;
  border-color: var(--color-separator) !important;
  height: auto !important;
  min-height: var(--space-44) !important;
}

.form-control:focus {
  border-color: var(--color-blue) !important;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2) !important;
}

/* Buttons */
.btn, .btn-flat {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  min-height: var(--space-44) !important;
  padding: var(--space-8) var(--space-16) !important;
  transition: transform 100ms ease-out, opacity 100ms ease-out !important;
  border: none !important;
}

.btn:active {
  transform: scale(0.96) !important;
}

/* ==========================================================================
   UNIVERSAL ORANGE BRAND THEME (Apple HIG)
   ========================================================================== */
/* Unify all primary and success actions to the Brand Orange */
.btn-primary,
.btn-success,
.btn.bg-green,
.btn.bg-blue,
.btn.bg-aqua,
.btn.bg-purple {
  background-color: var(--color-orange) !important;
  color: #ffffff !important;
  border-color: var(--color-orange) !important;
}

/* Secondary Actions (White with border) */
.btn-default {
  background-color: #ffffff !important;
  color: var(--color-label-primary) !important;
  border: 1px solid var(--color-separator) !important;
}

.btn-default:hover {
  background-color: var(--color-bg-secondary) !important;
}

/* Segmented Controls & Info Buttons */
.btn-info {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-label-secondary) !important;
  border-color: transparent !important;
}

.btn-info.active, .btn-info:active {
  background-color: var(--color-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(255, 149, 0, 0.3) !important;
}

/* Destructive Actions */
.btn-danger,
.btn.bg-red {
  background-color: var(--color-red) !important;
  color: #ffffff !important;
  border-color: var(--color-red) !important;
}

.btn-warning {
  background-color: #ffcc00 !important;
  color: #111 !important;
  border-color: #ffcc00 !important;
}

/* Text Colors */
.text-primary, .text-success, .text-info {
  color: var(--color-orange) !important;
}

/* Header Action Buttons (Overrides Tailwind utilities in Navbar) */
.no-print button.tw-text-gray-500,
.no-print a.tw-text-gray-500,
.no-print details > summary.tw-text-gray-500 {
  color: var(--color-orange) !important;
  background-color: rgba(249, 115, 22, 0.1) !important; /* Soft FAB orange tint */
}

.no-print button.tw-text-gray-500:hover,
.no-print a.tw-text-gray-500:hover,
.no-print details > summary.tw-text-gray-500:hover {
  color: #e68600 !important;
  background-color: rgba(249, 115, 22, 0.15) !important;
}

/* Header Solid Action Buttons (Repair, Clock In) */
.clock_in_btn,
.clock_out_btn,
a[href*="sub_type=repair"],
.no-print [class*="tw-bg-"][class*="-800"] {
  background-color: var(--color-orange) !important;
  color: #ffffff !important;
  border-color: var(--color-orange) !important;
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.25) !important;
}

.no-print [class*="tw-bg-"][class*="-800"]:hover {
  background-color: #e68600 !important;
}

/* Panels / Boxes / Cards */
.box, .panel, .pos-tab-content {
  border-radius: var(--radius-md) !important;
  border: 0.5px solid var(--color-separator) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  padding: var(--space-20) !important;
  background-color: var(--color-bg-primary) !important;
}

.box-header, .panel-heading {
  border-bottom: 0.5px solid var(--color-separator) !important;
  padding-bottom: var(--space-12) !important;
  margin-bottom: var(--space-16) !important;
}

/* Grids & Spacing (Aligning Bootstrap to Apple 4pt Grid) */
.row {
  margin-left: calc(var(--space-16) * -0.5) !important;
  margin-right: calc(var(--space-16) * -0.5) !important;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-left: calc(var(--space-16) * 0.5) !important;
  padding-right: calc(var(--space-16) * 0.5) !important;
}

/* Modals */
.modal-content {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
}

.modal-header {
  border-bottom: 0.5px solid var(--color-separator) !important;
  padding: var(--space-16) var(--space-24) !important;
}

.modal-body {
  padding: var(--space-24) !important;
}

.modal-footer {
  border-top: 0.5px solid var(--color-separator) !important;
  padding: var(--space-16) var(--space-24) !important;
}

/* Tables styling overrides (Apple DNA) */
.table, 
table.dataTable,
.table-bordered,
.table-striped {
  border: none !important;
  border-collapse: collapse !important;
  width: 100% !important;
  background-color: var(--color-bg-primary) !important;
  margin: 0 !important;
}

/* Remove vertical borders and make horizontal borders subtle */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td,
table.dataTable tbody td,
table.dataTable thead th,
table.dataTable tfoot td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 0.5px solid var(--color-separator) !important;
  padding: var(--space-12) var(--space-16) !important;
  font-size: var(--text-subhead) !important;
  font-weight: 400 !important;
  color: var(--color-label-primary) !important;
  vertical-align: middle !important;
  height: var(--space-48) !important;
  box-sizing: border-box !important;
}

/* Header styling */
.table > thead > tr > th,
table.dataTable thead th {
  font-size: var(--text-footnote) !important;
  font-weight: 600 !important;
  color: var(--color-label-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid var(--color-separator) !important;
  text-align: left !important;
}

/* Cell alignment utility supports */
.table th.text-center, .table td.text-center,
table.dataTable thead th.text-center, table.dataTable tbody td.text-center {
  text-align: center !important;
}

.table th.text-right, .table td.text-right,
table.dataTable thead th.text-right, table.dataTable tbody td.text-right {
  text-align: right !important;
}

/* Subtle Alternate Row Stripes */
.table-striped > tbody > tr:nth-of-type(odd),
table.dataTable.display tbody tr.odd,
table.dataTable.striped tbody tr.odd {
  background-color: rgba(0, 0, 0, 0.015) !important;
}

.table-striped > tbody > tr:nth-of-type(even),
table.dataTable.display tbody tr.even,
table.dataTable.striped tbody tr.even {
  background-color: transparent !important;
}

/* Row hover effect */
.table-hover > tbody > tr:hover,
table.dataTable tbody tr:hover {
  background-color: rgba(249, 115, 22, 0.03) !important;
}

/* Fix misalignment of DataTables headers and body when scrolling */
.dataTables_scroll {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  border: 0.5px solid var(--color-separator) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.dataTables_scrollHead {
  background-color: var(--color-bg-secondary) !important;
  border-bottom: 0.5px solid var(--color-separator) !important;
}

.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dataTables_scrollBody table {
  width: 100% !important;
  margin: 0 !important;
}

/* Dashboard Utilities */
.mb-10, .margin-bottom-12, .margin-bottom-20 { margin-bottom: var(--space-16) !important; }
.mt-10, .mt-15 { margin-top: var(--space-16) !important; }
.p-5-5, .p-10 { padding: var(--space-12) !important; }

/* ==========================================================================
   UNIVERSAL MOBILE RESPONSIVENESS (Apple HIG)
   ========================================================================== */
@media (max-width: 767px) {
  /* Typography Scaling */
  h1, .h1, .apple-large-title { font-size: 28px !important; }
  h2, .h2, .apple-title-1 { font-size: 24px !important; }
  h3, .h3, .apple-title-2 { font-size: 20px !important; }
  
  /* Grid & Layout Stacking */
  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    width: 100% !important;
    float: none !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: var(--space-16) !important;
  }
  
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-16) !important;
  }

  /* Components & Modals */
  .box, .panel, .pos-tab-content {
    padding: var(--space-16) !important;
    margin-bottom: var(--space-16) !important;
  }

  .modal-dialog {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .modal-content {
    border-radius: 0 !important; /* Full screen modals on mobile */
    min-height: 100vh !important;
  }

  .modal-header, .modal-body, .modal-footer {
    padding: var(--space-16) !important;
  }

  /* Table Responsiveness */
  .table, .table-responsive, table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .table th, .table td {
    white-space: nowrap !important;
  }

  /* POS Form Actions */
  .pos-form-actions {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: var(--space-16) !important;
    background: var(--color-bg-primary) !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    z-index: 1050 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-8) !important;
  }
  
  .pos-form-actions .btn {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   CUSTOM HTML CHART EXPORT BUTTON (Apple DNA)
   ========================================================================== */
.custom-chart-export-btn {
  background: #ffffff;
  border: 1px solid var(--color-separator, #e5e7eb);
  color: var(--color-label-secondary, #6b7280);
  border-radius: var(--radius-sm, 8px);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease-out;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  padding: 0;
  outline: none;
}

.custom-chart-export-btn:hover {
  background: #f9fafb;
  color: #111827;
  border-color: #d1d5db;
}

.custom-chart-export-btn:active {
  transform: scale(0.94);
}

.custom-chart-export-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid var(--color-separator, #e5e7eb);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  min-width: 180px;
  z-index: 9999;
  padding: 6px 0;
}

.custom-chart-export-item {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  transition: background 150ms ease-out;
}

.custom-chart-export-item:hover {
  background: #f3f4f6;
}

/* Remove unwanted messy text-strokes from Highcharts data labels and legends globally */
.highcharts-data-label text, 
.highcharts-data-label tspan,
.highcharts-axis-labels text,
.highcharts-title tspan,
.highcharts-series text,
.highcharts-legend-item text,
.highcharts-legend-item tspan {
  text-outline: none !important;
  text-shadow: none !important;
  stroke: none !important;
}

/* ==========================================================================
   APPLE DNA DATATABLES & CONTROL ALIGNMENTS
   ========================================================================== */

/* DataTables Top Controls Flex Alignment */
.dataTables_wrapper > .row:first-of-type {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-16) !important;
  margin-bottom: var(--space-16) !important;
  width: 100% !important;
  text-align: left !important;
}

/* Override Bootstrap grid float/width behaviors in wrapper top row */
.dataTables_wrapper > .row:first-of-type > [class*="col-"] {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Clear float decorators from wrapper */
.dataTables_wrapper:after,
.dataTables_wrapper:before {
  display: none !important;
}

/* Length Dropdown Control */
.dataTables_length {
  margin: 0 !important;
}

.dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-8) !important;
  font-size: var(--text-footnote) !important;
  font-weight: 500 !important;
  color: var(--color-label-secondary) !important;
  margin: 0 !important;
}

.dataTables_length select {
  font-family: var(--font-primary) !important;
  font-size: var(--text-footnote) !important;
  font-weight: 500 !important;
  color: var(--color-label-primary) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-separator) !important;
  padding: 4px 28px 4px 12px !important;
  background-color: #ffffff !important;
  height: 32px !important;
  min-height: 32px !important;
  cursor: pointer !important;
  outline: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  transition: all 120ms ease-out !important;
}

.dataTables_length select:focus {
  border-color: var(--color-orange) !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15) !important;
}

/* Export Buttons Container */
.dt-buttons.btn-group {
  display: inline-flex !important;
  gap: var(--space-8) !important;
  float: none !important;
  margin: 0 !important;
}

/* Unify button styling */
.dt-buttons.btn-group .btn,
.dt-buttons.btn-group .tw-dw-btn {
  font-family: var(--font-primary) !important;
  font-size: var(--text-footnote) !important;
  font-weight: 500 !important;
  color: var(--color-label-secondary) !important;
  background-color: #ffffff !important;
  border: 1px solid var(--color-separator) !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px var(--space-12) !important;
  height: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-4) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 120ms ease-out !important;
  margin: 0 !important;
}

.dt-buttons.btn-group .btn:hover,
.dt-buttons.btn-group .tw-dw-btn:hover {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-label-primary) !important;
  border-color: rgba(60, 60, 67, 0.5) !important;
}

.dt-buttons.btn-group .btn:active,
.dt-buttons.btn-group .tw-dw-btn:active {
  transform: scale(0.96) !important;
}

/* Search Filter Control */
.dataTables_filter {
  margin: 0 !important;
}

.dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-8) !important;
  font-size: var(--text-footnote) !important;
  font-weight: 500 !important;
  color: var(--color-label-secondary) !important;
  margin: 0 !important;
}

.dataTables_filter input {
  font-family: var(--font-primary) !important;
  font-size: var(--text-footnote) !important;
  color: var(--color-label-primary) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-separator) !important;
  padding: 6px var(--space-12) !important;
  height: 32px !important;
  min-height: 32px !important;
  width: 200px !important;
  background-color: #ffffff !important;
  transition: all 120ms ease-out !important;
  outline: none !important;
}

.dataTables_filter input:focus {
  border-color: var(--color-orange) !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15) !important;
}

/* ==========================================================================
   REMOVE ADMINLTE BLUE TOP BORDERS
   ========================================================================== */
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.nav-tabs-custom {
  border-top: none !important;
}

.nav-tabs-custom > .nav-tabs {
  border-bottom: 1px solid var(--color-separator) !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  margin-right: var(--space-20) !important;
  padding: var(--space-12) 0 !important;
  font-size: var(--text-subhead) !important;
  font-weight: 500 !important;
  color: var(--color-label-secondary) !important;
  border-bottom: 2px solid transparent !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover {
  color: var(--color-orange) !important;
  border-bottom: 2px solid var(--color-orange) !important;
  background-color: transparent !important;
}

/* ==========================================================================
   SYNC ACTION DROPDOWNS & BUTTONS TO BRAND ORANGE
   ========================================================================== */
.tw-dw-btn-info,
.tw-dw-btn-primary {
  background-color: var(--color-orange) !important;
  border-color: var(--color-orange) !important;
  color: #ffffff !important;
}

.tw-dw-btn-info.tw-dw-btn-outline,
.tw-dw-btn-primary.tw-dw-btn-outline {
  background-color: transparent !important;
  color: var(--color-orange) !important;
  border-color: var(--color-orange) !important;
}

.tw-dw-btn-info.tw-dw-btn-outline:hover,
.tw-dw-btn-primary.tw-dw-btn-outline:hover {
  background-color: var(--color-orange) !important;
  color: #ffffff !important;
  border-color: var(--color-orange) !important;
}

/* Collapse duplicate hidden table header generated by DataTables scrollX/scrollY */
.dataTables_scrollBody thead th,
.dataTables_scrollBody thead td,
table.dataTable.no-footer.dataTables_scrollBody thead th {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  visibility: hidden !important;
}

.dataTables_scrollBody thead tr {
  height: 0 !important;
}