.btn-tcm {
    color: #FFFFFF;
    background-color: #FF7518;
    border-color: #FF7518;
}

.thead-tcm {
    color: #FFFFFF;
    background-color: #FF7518;
    border-color: #FF7518; 
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current:focus {
    border: 0;
    background-image: none;
    background-color: #FF7518;
    color: #fff !important;
}

.main-header-icon {    
    color: #FF7518;
    size : 52px;
}

.breadcrumb-style1 .breadcrumb-item.active, .breadcrumb-style2 .breadcrumb-item.active, .breadcrumb-style3 .breadcrumb-item.active {
    color: #FF7518;
}

.header-background{
	background-color : #FF7518;
}


/* Select2 alignment with bootstrap inputs (scoped) */
.s2-bs .select2-container { width:100% !important; }

.s2-bs .select2-container--default .select2-selection--single,
.s2-bs .select2-container--default .select2-selection--multiple{
  min-height: calc(1.5em + .75rem + 2px);
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

.s2-bs .select2-container--default .select2-selection--single{
  height: calc(1.5em + .75rem + 2px);
}

.s2-bs .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: calc(1.5em + .75rem);
  padding-left: .75rem;
}

.s2-bs .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: calc(1.5em + .75rem);
}

.s2-bs .select2-container--default .select2-selection--multiple{
  padding: .2rem .5rem;
}

/* Fix Select2 single: remove extra vertical space */
.s2-bs .select2-container--default .select2-selection--single{
  height: calc(1.5em + .75rem + 2px) !important;
  min-height: calc(1.5em + .75rem + 2px) !important;

  padding: 0 .75rem !important;
  display: flex !important;
  align-items: center !important;

  box-sizing: border-box !important;
}

.s2-bs .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
}

.s2-bs .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 100% !important;
  top: 0 !important;
  right: .5rem !important;
}

/* Select2 dropdown max height with scrollbar */
.select2-container--default .select2-results > .select2-results__options {
  max-height: 220px;
  overflow-y: auto;
}



/* Right-align DataTables Buttons (Excel / PDF / Print) */
div.dt-buttons {
  float: right !important;
  margin-left: auto;
}

/* Make the buttons area (excel) and our slip button sit on the right */
.dt-right-tools,
div.dt-buttons {
  float: right !important;
}

/* Put slip button and export button(s) on one row */
.dt-right-tools {
  margin-left: 8px;
}

div.dt-buttons .btn,
.dt-right-tools .btn {
  margin-left: 6px;
}

/* Ensure datepicker header and arrows are visible */
.ui-datepicker {
  z-index: 999999 !important;
}

.ui-datepicker-header {
  position: relative !important;
  display: block !important;
  visibility: visible !important;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

/* Force correct placement */
.ui-datepicker-prev { left: 6px !important; }
.ui-datepicker-next { right: 6px !important; }

/* Make sure arrow icons are not hidden */
.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: block !important;
  visibility: visible !important;
}



/* Datepicker arrows (orange) using Unicode escapes */
.ui-datepicker .ui-icon {
  background-image: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

.ui-datepicker .ui-datepicker-prev span::before {
  content: "\2039";  
  color: #FF7518;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
}

.ui-datepicker .ui-datepicker-next span::before {
  content: "\203A";  
  color: #FF7518;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
}

/* Remove padding inside right pane so table can fill fully */
.right-pane-body.p-0 { padding: 0 !important; }

/* Make right body fill available height and scroll */
.right-pane-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;   /* the tableWrapper will scroll */
}

/* Table wrapper becomes the scroller */
#tableWrapper {
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}



/* =========================
   GLOBAL
========================= */
html, body { height: 100%; }

/* =========================
   SPLIT LAYOUT
========================= */
.page-split{
  display:flex;
  gap:12px;
  align-items:stretch;

  height: calc(100vh - 160px);  /* adjust if your header/footer differ */
  min-height: 600px;
}

/* =========================
   LEFT: SEARCH PANE
========================= */
.search-pane{
  flex: 0 0 320px;
  width: 320px;
  height: 100%;

  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;

  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.search-pane-header{
  flex: 0 0 auto;
  padding:10px 12px;
  font-weight:600;
  border-bottom:1px solid #e5e7eb;
  background:#f8fafc;
}

.search-pane-body{
  flex: 1 1 auto;
  min-height: 0;
  padding:10px 12px;

  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior: contain;
}

/* Compact form rows */
.search-pane .form-group{ margin-bottom: 8px !important; }

.search-pane .row.form-group{
  display:flex;
  align-items:center;
}

.search-pane .row.form-group > label{
  flex: 0 0 110px;
  max-width:110px;
  margin-bottom:0;
  font-size:12px;
  color:#374151;
}

.search-pane .row.form-group > input,
.search-pane .row.form-group > select,
.search-pane .row.form-group > div{
  flex:1 1 auto;
}

/* Remove Bootstrap grid interference inside search pane */
.search-pane .col-md-3,
.search-pane .col-md-8,
.search-pane .col-md-6,
.search-pane .col-md-2{
  flex: 1 1 auto !important;
  max-width:none !important;
  padding-left:0;
  padding-right:0;
}

.search-pane .form-control{
  height:32px;
  padding:4px 8px;
  font-size:12px;
}

.search-pane .divider-text{
  margin:10px 0;
  font-size:12px;
}

.mp-btn-row{
  margin-top:14px;
  display:flex;
  gap:8px;
}

/* Select2 compact */
.search-pane .select2-container{ width:100% !important; }
.search-pane .select2-container .select2-selection--single{ height:32px !important; }
.search-pane .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:30px !important;
  font-size:12px !important;
}
.search-pane .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:30px !important;
}

/* Collapse */
.page-split.search-collapsed .search-pane{
  width:0;
  flex:0 0 0;
  border:0;
}
.page-split.search-collapsed .search-pane-header,
.page-split.search-collapsed .search-pane-body{
  display:none;
}

/* =========================
   RIGHT: TABLE PANE
========================= */
.table-pane{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* The ONLY scroller for the table */
#tableWrapper{
  height:100%;
  overflow:auto;  /* both x and y */
}



#dataTable th, #dataTable td{
  white-space:nowrap;
  vertical-align:middle;
}

/*  TRUE sticky header inside #tableWrapper */
#tableWrapper thead th{
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Ensure TCMS orange remains visible when sticky */
#tableWrapper thead.thead-tcm th{
  background-color:#FF7518;
  color:#fff;
}

/* Toolbars alignment */
.toolbar{ float:left; }
.dt-right-tools{ float:right; }

/* =========================
   SELECT CHECKBOX
========================= */
table.dataTable thead th.select-checkbox{ position:relative; }
table.dataTable thead th.select-checkbox:before{
  content:'';
  position:absolute;
  top:1.2em;
  left:50%;
  width:12px;
  height:12px;
  margin-left:-6px;
  border:1px solid #fff;
  border-radius:3px;
}
table.dataTable tr th.select-checkbox.selected::after{
  content:"✓";
  position:absolute;
  top:1.1em;
  left:50%;
  margin-left:-4px;
  font-size:12px;
  color:#fff;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 992px){
  .page-split{ flex-direction:column; height:auto; }
  .search-pane{ width:100%; height:auto; flex:0 0 auto; }
  .page-split.search-collapsed .search-pane{ display:none; }
  #tableWrapper{ height:auto; }
}

/* Make left pane form compact and one-line label+control */
.left-pane .row.form-group{
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.left-pane .row.form-group > label{
  flex: 0 0 110px;
  max-width: 110px;
  margin: 0;
  font-size: 12px;
  color: #374151;
}

.left-pane .row.form-group > .col-8,
.left-pane .row.form-group > div{
  flex: 1 1 auto;
}

.left-pane .form-control{
  height: 32px;
  font-size: 12px;
  padding: 4px 8px;
}

.left-pane .divider-text{
  margin: 10px 0;
  font-size: 12px;
  color: #6b7280;
}

.mp-btn-row{
  display:flex;
  gap:8px;
}

.left-pane-body .divider-text{
  margin: 12px 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}



/* Date inputs look */
.left-pane .input-group .form-control {
  height: 34px;
}

.left-pane .cal-btn {
  height: 34px;
  border-left: 0;
}

/* jQuery UI datepicker theme */
.ui-datepicker {
  font-size: 13px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  z-index: 9999 !important;
}

.ui-datepicker-header {
  border: 0;
  background: #fff7f1;
  border-radius: 8px;
  padding: 6px 8px;
}

.ui-datepicker-title {
  font-weight: 700;
  color: #111827;
}

.ui-datepicker table {
  margin-top: 8px;
}

.ui-datepicker th {
  color: #6b7280;
  font-weight: 600;
  padding: 6px 0;
}

.ui-datepicker td a {
  border-radius: 8px;
  padding: 7px 0;
  text-align: center;
  border: 0 !important;
}

.ui-datepicker td a:hover {
  background: #f3f4f6 !important;
}

.ui-datepicker .ui-state-active {
  background: #0b5ed7 !important;   /* adjust if you have a tcms primary */
  color: #fff !important;
}

.ui-datepicker .ui-state-highlight {
  background: #fde68a !important;
  color: #111827 !important;
}


.toggle-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
  font-size: 14px;
}

.toggle-eye:hover {
  color: #000;
}