.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Button Animations */
.btn {
  transition: all 0.2s ease;
  transform: scale(1);
}

.btn:hover {
  transform: translateY(-2px);
  /* Slight lift */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Enhanced shadow on hover */
}

.btn:active {
  transform: scale(0.95);
  /* Click effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Button Refactoring Overrides */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
}

.btn-primary .icono {
  filter: brightness(0) invert(1);
  /* Ensure white icon */
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: white !important;
}

.btn-secondary:hover {
  background-color: #34495e !important;
  /* Slightly lighter dark blue */
  border-color: #34495e !important;
}

.btn-secondary .icono {
  filter: brightness(0) invert(1);
  /* Ensure white icon */
}

/* Ensure icons in light buttons are dark */
.btn-light .icono {
  filter: none;
  color: var(--text-color-dark);
}

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

:root {
  --primary-color: #e67e22;
  --primary-light: #f39c12;
  --primary-dark: #b56520;
  --secondary-color: #2c3e50;
  --tint-color: #ffffff;
  --background-color: #eeeeee;
  --text-color-light: #ffffff;
  --text-color-dark: #333;
}

body {
  background-color: var(--primary-color);
  color: var(--text-color-light);
  font-family: Arial, sans-serif;
  margin: 0;
  overflow-x: hidden;
  /* Prevent body scroll */
}

.navbar {
  background-color: var(--primary-color) !important;
  z-index: 1000 !important;
}

/* ... existing navbar styles ... */

/* WRAPPER & SCROLL HANDLING */
.layout-wrapper {
  overflow-x: hidden;
  /* Ensure wrapper doesn't cause scroll */
  width: 100vw;
}

.layout-main {
  /* Added padding-bottom to avoid content touching edge */
  padding: 1.5rem !important;
  /* Ensure main handles its own vertical scroll if needed, but rarely horizontally */
  overflow-x: hidden;
}

.navbar a {
  color: white !important;
  font-size: 20px;
}

.navbar a:hover {
  color: var(--primary-light);
}

.navbar-pill {
  color: var(--tint-color) !important;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-weight: 600;
}

.navbar-pill:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--tint-color) !important;
}

/* LOGIN MODE */
.login-mode.layout-wrapper {
  background-color: var(--primary-color);
}

.login-mode .layout-main {
  /* Transparent or matching background for Login so the card stands out */
  background-color: transparent;
  box-shadow: none;
  /* Center content in login mode */
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-mode #main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.login-mode .card {
  background-color: var(--secondary-color) !important;
  color: white !important;
  border: none;
  border-radius: 12px;
}

.login-mode .form-label {
  color: white !important;
}

/* APP MODE */
.app-mode.layout-wrapper {
  background-color: var(--secondary-color);
}

/* App Mode: Aside (Left Menu) - ORANGE */
.app-mode .layout-aside {
  background-color: var(--primary-color);
  color: white !important;
}

/* App Mode: Main Content & Toolbar - WHITE */
.app-mode .layout-main,
.app-mode .layout-toolbar {
  background-color: white;
  color: var(--text-color-dark) !important;
}

/* Specific text overrides for App Mode Main/Toolbar panels */
.app-mode .layout-main .text-white,
.app-mode .layout-toolbar .text-white {
  color: var(--text-color-dark) !important;
}

/* App Mode: Nav Rounding */
.app-mode .navbar {
  border-radius: 0.5rem !important;
  /* Ensure navbar rounding matches panels */
}

/* Keep headers in Main colored primarily */
.app-mode .layout-main h1,
.app-mode .layout-main h2,
.app-mode .layout-main h3,
.app-mode .layout-main h4 {
  color: var(--primary-color);
}

.text-primary {
  color: var(--primary-color) !important;
}

/* List Page Table Header Styling */
.app-mode .layout-main .table thead th {
  background-color: var(--secondary-color) !important;
  color: white !important;
  border-bottom: 0px;
}

.layout-wrapper {
  /* Default handled by specific modes */
  transition: background-color 0.3s;
}

.layout-body {
  min-height: 0;
  overflow: hidden;
  /* Prevent body scroll if children scroll */
}

/* Common styles for panels */
.layout-aside,
.layout-main,
.layout-toolbar {
  background-color: var(--primary-color);
  overflow-y: auto;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.layout-aside {
  flex: 0 0 15%;
  max-width: 260px;
  min-width: 200px;
}

.layout-main {
  /* Taken by flex-grow-1 in HTML, but ensuring defaults */
  min-width: 0;
  /* Flexbox trick for text-overflow */
}

.layout-toolbar {
  flex: 0 0 15%;
  max-width: 260px;
  min-width: 200px;
}

@media (max-width: 992px) {
  .layout-body {
    flex-direction: column;
    overflow: auto;
  }

  .layout-aside,
  .layout-main,
  .layout-toolbar {
    flex: 0 0 auto;
    max-width: 100%;
    border-radius: 0.5rem !important;
    /* Keep rounded corners even on mobile if desired, or set to 0 */
  }
}

.home-container {
  width: 100%;
  height: 100%;
  max-width: 90vw;
  max-height: 90vh;
}

.icono {
  color: var(--tint-color);
}

h1,
h2,
h3,
h4 {
  color: var(--primary-color);
}

h5 {
  color: var(--text-color-light) !important;
}

.layout-aside .sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: white !important;
  padding: 0.35rem 0.5rem;
  /* Reduced padding further */
  border-radius: 6px;
  background-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-weight: 700;
  /* Bold */
  font-size: 14px;
}

.layout-aside .sidebar-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  /* Subtle hover */
  color: white !important;
  text-decoration: none;
  transform: none;
  /* Remove movement */
}

/* Clean Icon */
/* Clean Icon */
.sidebar-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  /* filter removed to show original colors */
  /* opacity removed */
  transition: opacity 0.2s ease;
}

.layout-aside .sidebar-link:hover .sidebar-icon {
  opacity: 1;
}

footer {
  background-color: var(--secondary-color);
  color: white;
  padding: 10px;
  text-align: center;
}

#home-icon {
  width: 200px;
}

#module-box-container {
  min-height: 80vh;
  padding: 20px;
}

.container-100 {
  min-height: 100vh !important;
}

.container-primary {
  background-color: var(--primary-color) !important;
}

#empty-reparaciones-card {
  height: 100%;
}

.table-footer-actions {
  position: sticky;
  bottom: 0;
  background-color: #fff;
  z-index: 1;
}

#btn-user-menu {
  outline: none;
  box-shadow: none;
}

.dropdown-toggle:after {
  display: none;
}

.toast-danger {
  background-color: rgb(255, 45, 45) !important;
  color: #ffcbcb !important;
  border: solid 1px #880808 !important;
}

.toast-success {
  background-color: rgb(38, 150, 26) !important;
  color: #c8ffc8 !important;
  border: solid 1px #08880e !important;
}

.toast-warning {
  background-color: rgb(211, 187, 29) !important;
  color: #fffbc9 !important;
  border: solid 1px #887708 !important;
}

.modal-content {
  background-color: var(--secondary-color) !important;
}

.modal-header {
  border-bottom: 0;
}

.modal-header>h5 {
  color: var(--primary-color) !important;
}

.modal-body>p {
  color: var(--text-color-light) !important;
}

.modal-footer {
  border-top: 0;
}

.mt-6 {
  margin-top: 75px !important;
}

.active {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* Fix for Tab Panes inheriting global .active */
.tab-content>.tab-pane.active {
  background-color: white !important;
  color: var(--text-color-dark) !important;
}

.custom-dialog {
  z-index: 1030 !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;

  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;

  width: 1000px;
  background-color: var(--tint-color);
  padding: 25px;
  border-radius: 10px;
  border: 0px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px;
}

.custom-dialog::backdrop {
  z-index: 1030 !important;
}

.standard-modal {
  padding: 0 !important;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-width: 95vw;
  max-height: 90vh;
  width: 1000px;
}

.standard-modal .modal-header {
  background-color: var(--primary-color);
  color: white;
  border-bottom: none;
}

.standard-modal .modal-footer {
  background-color: white;
  border-top: none;
}

.standard-modal .modal-body {
  background-color: white;
}

.modal {
  z-index: 1050 !important;
}

.modal-backdrop {
  z-index: 1040 !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

/* ========================================= */
/* UI ANIMATION & SIDEBAR REFACTOR START     */
/* ========================================= */

/* Sidebar Transition */
#app-aside {
  transition: all 0.15s ease-in-out;
  /* Ensure content doesn't overflow horizontally when shrinking */
  overflow-x: hidden;
}

/* Sidebar Collapsed State */
/* Sidebar Collapsed State */
#app-aside.collapsed {
  flex: 0 0 60px;
  max-width: 60px;
  min-width: 60px;
}

#app-aside.collapsed .nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100%;
}

#app-aside.collapsed .sidebar-text {
  display: none !important;
}

#app-aside.collapsed .sidebar-link {
  justify-content: center !important;
  padding: 10px 0 !important;
  gap: 0 !important;
  width: 100%;
}

#app-aside.collapsed .sidebar-icon {
  margin: 0 !important;
}

/* Page Entry Animation */
@keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page Exit Animation */
@keyframes fadeOutSlideDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Apply Entry Animation to Main Content */
#app-main {
  transition: all 0.15s ease-in-out;
  /* Smooth width/flex resizing */
}

#main-content {
  animation: fadeInSlideUp 0.15s ease-out forwards;
}

/* Class to trigger Exit Animation */
.page-exit #main-content {
  animation: fadeOutSlideDown 0.15s ease-in forwards;
}

/* Breadcrumb overrides to fix global .active conflict */
.breadcrumb-item.active {
  background-color: transparent !important;
  color: var(--primary-color) !important;
  font-weight: bold;
}

/* Breadcrumb links color */
.breadcrumb-item a {
  color: var(--primary-color) !important;
}

/* Breadcrumb separator color */
.breadcrumb-item+.breadcrumb-item::before {
  color: var(--primary-color) !important;
}

/* Profile Menu Item Styles */
.navbar .dropdown-menu .menu-item-primary-hover {
  font-size: 0.9rem !important;
  /* Smaller font */
  color: black !important;
  transition: all 0.2s ease;
}

.navbar .dropdown-menu .menu-item-primary-hover:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.navbar .dropdown-menu .menu-item-primary-hover img {
  filter: brightness(0);
  /* Force icon to black by default */
  transition: all 0.2s ease;
}

.navbar .dropdown-menu .menu-item-primary-hover:hover img {
  filter: brightness(0) invert(1);
  /* Turn icon white on hover */
  opacity: 1 !important;
}

/* ========================================= */
/* DATATABLES GLOBAL STYLES                  */
/* ========================================= */

/* Pagination Colors (Orange Primary) */
.page-item.active .page-link {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.page-link {
  color: var(--primary-color) !important;
}

.page-link:hover {
  background-color: #f8f9fa;
  color: var(--primary-dark) !important;
}

/* Custom DataTable Styling (Class: itech-datatable) */
/* Requires the table to also have 'border-collapse: separate' which is handled below */

.itech-datatable {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100% !important;
}

/* Header Styling: Secondary Color & Rounded Corners */
.itech-datatable thead th {
  background-color: var(--secondary-color) !important;
  color: white !important;
  border-bottom: none;
}

.itech-datatable thead th:first-child {
  border-top-left-radius: 8px;
}

.itech-datatable thead th:last-child {
  border-top-right-radius: 8px;
}

/* OVERRIDE: Internal Tables (Trabajos/Materiales) - Clean Header */
#dt-trabajos thead th,
#dt-materiales thead th {
  background-color: var(--secondary-color) !important;
  /* Secondary color background */
  color: white !important;
  /* White text */
  border-bottom: 0px;
  /* Remove border for cleaner look with dark background */
}

/* Custom Tabs Styling */
.nav-tabs .nav-link {
  color: var(--primary-color);
}

.nav-tabs .nav-link:hover {
  border-color: transparent;
  color: var(--primary-dark) !important;
}

.nav-tabs .nav-link.active {
  color: var(--primary-color);
  font-weight: bold;
  border-bottom: 3px solid var(--primary-color);
}

.tab-content {
  background-color: white;
}