/* Custom Styles for GBOX Finance System */

/* Chart container full width */
.chart-container {
  width: 100% !important;
  max-width: 100% !important;
}

.chart-container canvas {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* User icon in navbar */
.nav-profile .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
}

.nav-profile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2d5a3d 0%, #1f5a39 100%);
  color: #ffffff;
  font-size: 18px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.nav-profile-icon:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.nav-profile-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
}

/* Apply Montserrat to text elements only - exclude icon elements */
body {
  font-family: 'Montserrat', sans-serif !important;
}

p, h1, h2, h3, h4, h5, h6, label, input, select, textarea, button, table, th, td, li, ul, ol, .menu-title, .card-title {
  font-family: 'Montserrat', sans-serif !important;
}

/* Preserve icon fonts - explicitly set icon font families */
i[class*="icon-"], i[class*="feather-"] {
  font-family: 'feather' !important;
}

i[class*="ti-"], [class*="ti-"]:before {
  font-family: 'themify' !important;
}

i[class*="mdi-"], [class*="mdi-"]:before {
  font-family: 'Material Design Icons' !important;
}

/* Ensure icon pseudo-elements use correct fonts */
[class*="icon-"]:before {
  font-family: 'feather' !important;
}

[class*="ti-"]:before {
  font-family: 'themify' !important;
}

[class*="mdi-"]:before {
  font-family: 'Material Design Icons' !important;
}

/* Income and Expense text colors */
.text-income { 
  color: #28a745; 
  font-weight: bold; 
}

.text-expense { 
  color: #dc3545; 
  font-weight: bold; 
}

/* Reports cards - equal height and centered content */
.reports-cards .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.reports-cards .card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: 1;
}

/* Make text-muted white for better readability in report cards */
.reports-cards .text-muted {
  color: #ffffff !important;
  opacity: 0.9;
}

/* Make text-muted white in data-icon-card cards (dashboard and reports) */
.data-icon-card-success .text-muted,
.data-icon-card-danger .text-muted,
.data-icon-card-info .text-muted {
  color: #ffffff !important;
  opacity: 0.9;
}

/* Report type buttons styling */
.reportsForm .btn-group-toggle a,
.reportsForm .d-flex a {
  text-decoration: none;
  white-space: nowrap;
}

.reportsForm .d-flex a i {
  margin-right: 5px;
  vertical-align: middle;
}

/* Report type buttons - add spacing between icon and text */
#reportsForm .btn i {
  margin-right: 0.25rem !important;
}

.btn.btn-sm{
  border-radius: 4px !important;
}

/* Gap utility for flex containers */
.gap-2 {
  gap: 0.5rem;
}

/* Better spacing for badges and buttons in tables */
.data-table .badge {
  margin: 0 2px !important;
  padding: 6px 12px !important;
}

.dataTables_wrapper .dataTable td .btn,
.data-table td .btn,
.dataTables_wrapper .dataTable .btn {
  margin: 0 3px !important;
  padding: 6px 12px !important;
}

.data-table td .btn:first-child,
.dataTables_wrapper .dataTable td .btn:first-child {
  margin-left: 0 !important;
}

.data-table td .btn:last-child,
.dataTables_wrapper .dataTable td .btn:last-child {
  margin-right: 0 !important;
}

/* Better spacing for DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin: 0 2px;
  padding: 0.5rem 0.75rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  margin: 0 4px;
}

/* Ensure modal backdrop is visible and darkened */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 1040;
}

.modal {
  z-index: 1050;
}

/* When quick add modals are open, ensure backdrop is visible */
#quickAddClientModal.show ~ .modal-backdrop,
#quickAddProjectModal.show ~ .modal-backdrop,
#quickAddServiceModal.show ~ .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 1040;
}

/* Transaction type switch buttons */
.transaction-type-switch {
  display: flex;
  gap: 0;
}

.transaction-type-switch .btn {
  border-radius: 0;
  transition: all 0.3s ease;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.transaction-type-switch .btn:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.transaction-type-switch .btn:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.transaction-type-switch .btn-outline-success,
.transaction-type-switch .btn-outline-danger {
  opacity: 0.6;
}

.transaction-type-switch .btn-success,
.transaction-type-switch .btn-danger {
  opacity: 1;
  font-weight: 600;
}

.transaction-type-switch .btn i {
  font-size: 1rem;
  margin-right: 0.25rem;
}

/* Typeahead input field styling - ensure same width as other form controls */
.form-group .typeahead {
  width: 100% !important;
  display: block !important;
}

.form-group .twitter-typeahead {
  width: 100% !important;
  display: block !important;
  position: relative;
}

.form-group .twitter-typeahead .tt-input,
.form-group .twitter-typeahead .tt-hint {
  width: 100% !important;
  box-sizing: border-box;
}

.form-group .twitter-typeahead .tt-hint {
  color: #999;
}

.twitter-typeahead .tt-menu {
  width: 100% !important;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 2px;
  max-height: 200px;
  overflow-y: auto;
}

.twitter-typeahead .tt-suggestion {
  padding: 8px 12px;
  cursor: pointer;
}

.twitter-typeahead .tt-suggestion:hover,
.twitter-typeahead .tt-suggestion.tt-cursor {
  background-color: #f5f5f5;
  cursor: pointer;
  color: #5e53ae;
}

/* Badge colors */
.badge-income { 
  background-color: #28a745; 
}

.badge-expense { 
  background-color: #dc3545; 
}

/* Badge text styling - white color and font-weight 500 */
.badge, .badge-income, .badge-expense, [class*="badge"] {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Custom checkbox styling for VAT */
#add_vat {
  width: 20px;
  height: 20px;
  min-width: 20px;
  cursor: pointer;
  margin-right: 0;
  margin-top: 0;
  margin-left: 0;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid #007bff;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

#add_vat:checked {
  background-color: #007bff;
  border-color: #007bff;
}

#add_vat:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#add_vat:hover {
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

#add_vat:checked:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

#add_vat:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.form-check-label[for="add_vat"] {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  color: #495057;
  margin-left: 8px;
  line-height: 1.5;
}

.form-check.d-flex {
  padding-left: 0 !important;
  margin-bottom: 0;
  margin-top: 0;
  margin-left: 0;
}

.form-group .form-check {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0 !important;
}

/* Align checkbox with input fields - match the alignment of input fields */
.form-group .form-check.d-flex {
  margin-left: 0;
  padding-left: 0 !important;
}

/* Remove default Bootstrap form-check padding to align with inputs */
#transactionModal .form-group .form-check {
  padding-left: 0 !important;
}

#transactionModal .form-check-input {
  margin-left: 0 !important;
  margin-top: 0 !important;
}

/* Button small size */
.btn-sm {
  padding: 0.6rem 0.8rem;
}

/* Center icons and text vertically in buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn i {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 0rem !important;
}

/* Fix spacing in sub-menu items */
.sidebar .nav .sub-menu .nav-link i {
  margin-right: 0.5rem;
}

/* Table responsive improvements - prevent horizontal scroll */
.table-responsive {
  overflow-x: auto;
  max-width: 100%;
}

.data-table {
  width: 100% !important;
  table-layout: fixed;
}

.data-table td,
.data-table th {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure tooltips work on truncated text */
[data-toggle="tooltip"] {
  cursor: help;
}

/* Reduce table cell padding */
.table th, .jsgrid .jsgrid-table th, 
.table td, .jsgrid .jsgrid-table td {
  padding: 1.2rem 0.8rem !important;
}

/* Prevent DataTables from hiding action buttons on small screens */
.data-table .btn {
  white-space: nowrap;
  display: inline-block;
  min-width: auto;
  flex-shrink: 0;
}

.data-table td:last-child {
  white-space: nowrap !important;
  overflow: visible !important;
}

.data-table td:last-child > div {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

/* Ensure action buttons are always visible */
.data-table .btn-sm {
  padding: 0.25rem 0.4rem;
  font-size: 0.875rem;
  margin: 0;
  flex-shrink: 0;
}