/**
 * UI Theme - Modern Nursery Design
 * Gayatri Hi-Tech Nursery Management System
 * 
 * CRITICAL: This file only modifies visual presentation
 * All AdminLTE structure, IDs, data-attributes, and JS hooks are preserved
 * 
 * Load Order: After AdminLTE CSS
 */

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

/* Import Modern Font - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body {
  font-family: var(--ui-font-sans);
  background-color: var(--ui-bg-page);
  font-size: var(--ui-text-base);
  line-height: var(--ui-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ui-font-sans);
  font-weight: var(--ui-font-bold);
  line-height: var(--ui-leading-tight);
  letter-spacing: var(--ui-tracking-tight);
}

h1, .h1 { font-size: var(--ui-text-3xl); }
h2, .h2 { font-size: var(--ui-text-2xl); }
h3, .h3 { font-size: var(--ui-text-xl); }
h4, .h4 { font-size: var(--ui-text-lg); }

/* ============================================================
   LAYOUT - PRESERVE STRUCTURE, UPDATE VISUALS
   ============================================================ */

/* Main Wrapper - DO NOT change .wrapper class */
.wrapper {
  /* Only visual enhancements */
}

/* Content Wrapper */
.content-wrapper {
  background-color: var(--ui-bg-page);
  min-height: calc(100vh - 60px);
}

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */

/* Main Header - PRESERVE .main-header class */
.main-header.navbar {
  background-color: var(--ui-header-bg);
  border-bottom: 1px solid var(--ui-border-color);
  box-shadow: var(--ui-header-shadow);
  height: var(--ui-header-height);
  padding: 0 var(--ui-space-6);
}

.main-header .nav-link {
  color: var(--ui-gray-700) !important;
  font-weight: var(--ui-font-medium);
  transition: all var(--ui-transition-base);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
}

.main-header .nav-link:hover {
  color: var(--ui-primary-600) !important;
  background-color: var(--ui-primary-50);
}

/* Hamburger menu icon - ensure visibility */
.main-header .nav-link[data-widget="pushmenu"] {
  font-size: var(--ui-text-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
}

.main-header .nav-link[data-widget="pushmenu"]:hover {
  background-color: var(--ui-primary-50);
  color: var(--ui-primary-700) !important;
}

.main-header .nav-link[data-widget="pushmenu"] i {
  color: var(--ui-gray-700) !important;
}

.main-header .nav-link[data-widget="pushmenu"]:hover i {
  color: var(--ui-primary-700) !important;
}

/* Dropdown */
.dropdown-menu {
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-xl);
  border: 1px solid var(--ui-border-color);
  padding: var(--ui-space-2);
  margin-top: var(--ui-space-2);
}

.dropdown-item {
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-3) var(--ui-space-4);
  font-size: var(--ui-text-sm);
  transition: all var(--ui-transition-fast);
}

.dropdown-item:hover {
  background-color: var(--ui-primary-50);
  color: var(--ui-primary-700);
}

/* ============================================================
   SIDEBAR - PRESERVE .main-sidebar CLASS
   ============================================================ */

.main-sidebar {
  background: var(--ui-sidebar-bg);
  box-shadow: var(--ui-shadow-xl);
  z-index: 1039;
}

/* Brand Logo */
.brand-link {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--ui-space-5) var(--ui-space-6);
  transition: background var(--ui-transition-base);
  display: flex;
  align-items: center;
}

.brand-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.brand-text {
  font-weight: var(--ui-font-semibold);
  font-size: var(--ui-text-sm);
  color: white !important;
  line-height: var(--ui-leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.brand-image {
  opacity: 0.95;
  transition: opacity var(--ui-transition-base);
  max-width: 33px;
  max-height: 33px;
}

.brand-link:hover .brand-image {
  opacity: 1;
}

/* User Panel */
.user-panel {
  padding: var(--ui-space-4) var(--ui-space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-panel .image {
  padding-right: var(--ui-space-3);
}

.user-panel .image img {
  width: 40px;
  height: 40px;
}

.user-panel .info a {
  color: white !important;
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  line-height: var(--ui-leading-snug);
  transition: color var(--ui-transition-base);
  display: block;
}

.user-panel .info a:hover {
  color: var(--ui-primary-400) !important;
}

/* Sidebar Navigation */
.nav-header {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--ui-tracking-wide);
  padding: var(--ui-space-5) var(--ui-space-6) var(--ui-space-2);
  margin-top: var(--ui-space-3);
}

/* PRESERVE .nav-sidebar, .nav-pills, .nav-item, .nav-link classes */
.nav-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: var(--ui-radius-lg);
  margin: var(--ui-space-1) var(--ui-space-4);
  padding: var(--ui-space-3) var(--ui-space-4);
  transition: all var(--ui-transition-base);
  display: flex;
  align-items: center;
  min-height: 44px;
}

.nav-sidebar .nav-link p {
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0;
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  line-height: var(--ui-leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  flex: 1;
}

.nav-sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.nav-sidebar .nav-link:hover p {
  color: white !important;
}

.nav-sidebar .nav-link.active {
  background: linear-gradient(90deg, var(--ui-primary-600), var(--ui-primary-500)) !important;
  color: white !important;
  box-shadow: var(--ui-shadow-primary);
}

.nav-sidebar .nav-link.active p {
  color: white !important;
}

.nav-sidebar .nav-link .nav-icon {
  margin-right: var(--ui-space-3);
  font-size: var(--ui-text-lg);
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all var(--ui-transition-base);
  min-width: 24px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.nav-sidebar .nav-link:hover .nav-icon {
  color: white !important;
  transform: scale(1.1);
}

.nav-sidebar .nav-link.active .nav-icon {
  color: white !important;
  transform: scale(1.1);
}

/* Right arrow for treeview */
.nav-sidebar .nav-link .right {
  margin-left: auto;
  transition: transform var(--ui-transition-base);
  flex-shrink: 0;
}

.nav-sidebar .has-treeview.menu-open > .nav-link .right {
  transform: rotate(-90deg);
}

/* Treeview (nested menu) */
.nav-treeview {
  background-color: rgba(0, 0, 0, 0.2);
  padding: var(--ui-space-2) 0;
  margin-bottom: var(--ui-space-2);
}

.nav-treeview .nav-link {
  padding-left: var(--ui-space-12);
  font-size: var(--ui-text-sm);
  color: rgba(255, 255, 255, 0.7) !important;
  position: relative;
}

.nav-treeview .nav-link p {
  color: rgba(255, 255, 255, 0.8) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  line-height: var(--ui-leading-snug);
}

.nav-treeview .nav-link:hover p {
  color: white !important;
}

.nav-treeview .nav-link .nav-icon {
  font-size: var(--ui-text-sm);
  color: rgba(255, 255, 255, 0.6) !important;
}

.nav-treeview .nav-link:hover .nav-icon {
  color: white !important;
}

/* Sidebar scrollbar - better visibility */
.sidebar {
  overflow-y: auto;
  max-height: calc(100vh - 60px);
}

.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--ui-radius-full);
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--ui-radius-full);
  transition: background var(--ui-transition-base);
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-shadow);
  border: none;
  margin-bottom: var(--ui-space-6);
  overflow: hidden;
  background-color: var(--ui-bg-card);
  transition: all var(--ui-transition-base);
}

.card:hover {
  box-shadow: var(--ui-shadow-xl);
  transform: translateY(-2px);
}

.card-header {
  background: linear-gradient(135deg, var(--ui-gray-50) 0%, white 100%) !important;
  border-bottom: 1px solid var(--ui-border-color) !important;
  padding: var(--ui-space-5) var(--ui-space-6) !important;
  font-weight: var(--ui-font-semibold) !important;
  font-size: var(--ui-text-lg) !important;
  color: var(--ui-gray-900) !important;
}

.card-title {
  color: var(--ui-gray-900) !important;
  font-weight: var(--ui-font-semibold) !important;
  font-size: var(--ui-text-lg) !important;
}

.card-body {
  padding: var(--ui-card-padding);
}

.card-footer {
  background-color: var(--ui-gray-50);
  border-top: 1px solid var(--ui-border-color);
  padding: var(--ui-space-4) var(--ui-space-6);
}

/* Dashboard Small Boxes - PRESERVE .small-box class */
.small-box {
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-lg);
  overflow: hidden;
  transition: all var(--ui-transition-base);
  border: none;
}

.small-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--ui-shadow-2xl);
}

.small-box .icon {
  transition: all var(--ui-transition-slow);
}

.small-box:hover .icon {
  transform: scale(1.1) rotate(5deg);
}

.small-box-footer {
  background: rgba(0, 0, 0, 0.15);
  padding: var(--ui-space-3) var(--ui-space-4);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  transition: all var(--ui-transition-base);
}

.small-box-footer:hover {
  background: rgba(0, 0, 0, 0.25);
  color: white;
}

/* Color variants with modern shadows */
.small-box.bg-info {
  background: linear-gradient(135deg, var(--ui-info-500), var(--ui-info-600));
  box-shadow: var(--ui-shadow-info);
}

.small-box.bg-success {
  background: linear-gradient(135deg, var(--ui-success-500), var(--ui-success-600));
  box-shadow: var(--ui-shadow-success);
}

.small-box.bg-warning {
  background: linear-gradient(135deg, var(--ui-warning-500), var(--ui-warning-600));
  box-shadow: var(--ui-shadow-warning);
}

.small-box.bg-danger {
  background: linear-gradient(135deg, var(--ui-danger-500), var(--ui-danger-600));
  box-shadow: var(--ui-shadow-danger);
}

/* ============================================================
   BUTTONS - PRESERVE ALL .btn CLASSES
   ============================================================ */

.btn {
  font-family: var(--ui-font-sans);
  font-weight: var(--ui-btn-font-weight);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-btn-padding-y) var(--ui-btn-padding-x);
  font-size: var(--ui-text-sm);
  transition: all var(--ui-transition-base);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn-sm {
  padding: var(--ui-btn-padding-y-sm) var(--ui-btn-padding-x-sm);
  font-size: var(--ui-text-xs);
  border-radius: var(--ui-radius-md);
}

.btn-lg {
  padding: var(--ui-btn-padding-y-lg) var(--ui-btn-padding-x-lg);
  font-size: var(--ui-text-base);
  border-radius: var(--ui-radius-xl);
}

/* Button Colors - Ensure text visibility */
.btn-primary {
  background: linear-gradient(135deg, var(--ui-primary-600), var(--ui-primary-500)) !important;
  color: white !important;
  box-shadow: var(--ui-shadow-primary);
  border: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: linear-gradient(135deg, var(--ui-primary-700), var(--ui-primary-600)) !important;
  color: white !important;
  border: none !important;
}

.btn-success {
  background: linear-gradient(135deg, var(--ui-success-600), var(--ui-success-500)) !important;
  color: white !important;
  box-shadow: var(--ui-shadow-success);
  border: none !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: linear-gradient(135deg, var(--ui-success-700), var(--ui-success-600)) !important;
  color: white !important;
  border: none !important;
}

.btn-warning {
  background: linear-gradient(135deg, var(--ui-warning-600), var(--ui-warning-500)) !important;
  color: white !important;
  box-shadow: var(--ui-shadow-warning);
  border: none !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background: linear-gradient(135deg, var(--ui-warning-700), var(--ui-warning-600)) !important;
  color: white !important;
  border: none !important;
}

.btn-danger {
  background: linear-gradient(135deg, var(--ui-danger-600), var(--ui-danger-500)) !important;
  color: white !important;
  box-shadow: var(--ui-shadow-danger);
  border: none !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background: linear-gradient(135deg, var(--ui-danger-700), var(--ui-danger-600)) !important;
  color: white !important;
  border: none !important;
}

.btn-info {
  background: linear-gradient(135deg, var(--ui-info-600), var(--ui-info-500)) !important;
  color: white !important;
  box-shadow: var(--ui-shadow-info);
  border: none !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background: linear-gradient(135deg, var(--ui-info-700), var(--ui-info-600)) !important;
  color: white !important;
  border: none !important;
}

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

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--ui-gray-700) !important;
  color: white !important;
  border: none !important;
}

.btn-default {
  background-color: white !important;
  color: var(--ui-gray-700) !important;
  border: 1px solid var(--ui-border-color) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  background-color: var(--ui-gray-50) !important;
  border-color: var(--ui-gray-300) !important;
  color: var(--ui-gray-900) !important;
}

/* ============================================================
   FORMS - PRESERVE ALL name/id ATTRIBUTES
   ============================================================ */

.form-control,
.custom-select {
  border-radius: var(--ui-input-radius);
  border: var(--ui-input-border-width) solid var(--ui-border-color);
  padding: var(--ui-input-padding-y) var(--ui-input-padding-x);
  font-size: var(--ui-text-sm);
  transition: all var(--ui-transition-base);
  background-color: white;
  color: var(--ui-gray-900);
}

/* Ensure select dropdowns are clickable */
select.form-control,
select.custom-select {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 1;
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

select.form-control:focus,
select.custom-select:focus {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 10;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--ui-primary-500);
  box-shadow: var(--ui-input-focus-ring);
  outline: none;
}

.form-control::placeholder {
  color: var(--ui-gray-400);
}

.form-group {
  margin-bottom: var(--ui-space-5);
}

.form-label,
label {
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-700);
  font-size: var(--ui-text-sm);
  margin-bottom: var(--ui-space-2);
  display: inline-block;
}

.input-group-text {
  background-color: var(--ui-gray-50);
  border-color: var(--ui-border-color);
  color: var(--ui-gray-600);
  border-radius: var(--ui-radius-lg);
}

/* ============================================================
   TABLES - PRESERVE TABLE IDs AND CLASSES
   ============================================================ */

.table {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-900);
}

.table thead th {
  background-color: var(--ui-gray-50) !important;
  color: var(--ui-gray-600) !important;
  font-weight: var(--ui-font-semibold) !important;
  font-size: var(--ui-text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ui-tracking-wide) !important;
  padding: var(--ui-space-4) var(--ui-space-4) !important;
  border-bottom: 2px solid var(--ui-border-color) !important;
}

.table tbody td {
  padding: var(--ui-space-4) var(--ui-space-4);
  vertical-align: middle;
  border-top: 1px solid var(--ui-table-border-color);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--ui-table-stripe-bg);
}

.table tbody tr {
  transition: all var(--ui-transition-fast);
}

.table tbody tr:hover {
  background-color: var(--ui-table-hover-bg);
  cursor: pointer;
}

/* DataTables wrapper - enhance visuals */
.dataTables_wrapper {
  padding: var(--ui-space-4);
}

.dataTables_filter input,
.dataTables_length select {
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border-color);
  padding: var(--ui-space-2) var(--ui-space-3);
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
  border-color: var(--ui-primary-500);
  outline: none;
  box-shadow: var(--ui-input-focus-ring);
}

/* DataTables Buttons */
.dt-button {
  border-radius: var(--ui-radius-md) !important;
  padding: var(--ui-space-2) var(--ui-space-4) !important;
  font-size: var(--ui-text-xs) !important;
  font-weight: var(--ui-font-medium) !important;
  border: 1px solid var(--ui-border-color) !important;
  background: white !important;
  color: var(--ui-gray-700) !important;
  transition: all var(--ui-transition-base) !important;
  margin-right: var(--ui-space-2) !important;
}

.dt-button:hover {
  background: var(--ui-primary-50) !important;
  border-color: var(--ui-primary-500) !important;
  color: var(--ui-primary-700) !important;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  font-weight: var(--ui-font-semibold);
  font-size: var(--ui-text-xs);
  padding: var(--ui-space-1) var(--ui-space-3);
  border-radius: var(--ui-radius-md);
}

.badge-success {
  background-color: var(--ui-success-500);
  color: white;
}

.badge-warning {
  background-color: var(--ui-warning-500);
  color: white;
}

.badge-danger {
  background-color: var(--ui-danger-500);
  color: white;
}

.badge-info {
  background-color: var(--ui-info-500);
  color: white;
}

.badge-primary {
  background-color: var(--ui-primary-500);
  color: white;
}

/* ============================================================
   ALERTS - PRESERVE .alert CLASSES
   ============================================================ */

.alert {
  border-radius: var(--ui-radius-lg);
  border: none;
  padding: var(--ui-space-4) var(--ui-space-5);
  font-size: var(--ui-text-sm);
  box-shadow: var(--ui-shadow-md);
}

.alert-success {
  background-color: var(--ui-success-50);
  color: var(--ui-success-700);
  border-left: 4px solid var(--ui-success-500);
}

.alert-danger {
  background-color: var(--ui-danger-50);
  color: var(--ui-danger-700);
  border-left: 4px solid var(--ui-danger-500);
}

.alert-warning {
  background-color: var(--ui-warning-50);
  color: var(--ui-warning-700);
  border-left: 4px solid var(--ui-warning-500);
}

.alert-info {
  background-color: var(--ui-info-50);
  color: var(--ui-info-700);
  border-left: 4px solid var(--ui-info-500);
}

/* ============================================================
   MODALS - PRESERVE ALL modal/data ATTRIBUTES
   ============================================================ */

.modal-content {
  border-radius: var(--ui-radius-2xl);
  border: none;
  box-shadow: var(--ui-shadow-2xl);
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, var(--ui-primary-600), var(--ui-primary-500));
  color: white;
  border-bottom: none;
  padding: var(--ui-space-6);
}

.modal-title {
  font-weight: var(--ui-font-bold);
  font-size: var(--ui-text-xl);
}

.modal-body {
  padding: var(--ui-space-6);
}

.modal-footer {
  background-color: var(--ui-gray-50);
  border-top: 1px solid var(--ui-border-color);
  padding: var(--ui-space-4) var(--ui-space-6);
}

.modal-backdrop {
  background-color: rgba(17, 24, 39, 0.7);
  backdrop-filter: blur(4px);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 0;
  font-size: var(--ui-text-sm);
}

.breadcrumb-item {
  color: var(--ui-gray-600);
}

.breadcrumb-item.active {
  color: var(--ui-primary-600);
  font-weight: var(--ui-font-medium);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ui-gray-400);
}

.breadcrumb-item a {
  color: var(--ui-gray-700);
  transition: color var(--ui-transition-base);
}

.breadcrumb-item a:hover {
  color: var(--ui-primary-600);
  text-decoration: none;
}

/* ============================================================
   CONTENT HEADER
   ============================================================ */

.content-header {
  padding: var(--ui-space-6) 0;
  margin-bottom: var(--ui-space-6);
}

.content-header h1 {
  font-size: var(--ui-text-3xl);
  font-weight: var(--ui-font-bold);
  color: var(--ui-gray-900);
  margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */

.main-footer {
  background-color: white;
  border-top: 1px solid var(--ui-border-color);
  padding: var(--ui-space-4) var(--ui-space-6);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
}

.main-footer a {
  color: var(--ui-primary-600);
  font-weight: var(--ui-font-medium);
  transition: color var(--ui-transition-base);
}

.main-footer a:hover {
  color: var(--ui-primary-700);
  text-decoration: none;
}

/* ============================================================
   UTILITIES
   ============================================================ */

/* Text Colors - Ensure readability */
.text-dark { color: var(--ui-gray-900) !important; }
.text-muted { color: var(--ui-gray-500) !important; }

/* Ensure all text on white backgrounds is readable */
.card-body,
.modal-body,
.content,
.container-fluid {
  color: var(--ui-gray-900) !important;
}

/* Ensure labels are visible */
label,
.form-label,
.col-form-label {
  color: var(--ui-gray-700) !important;
  font-weight: var(--ui-font-medium);
}

/* Ensure all paragraph text is readable - but don't force wrapping */
p {
  color: var(--ui-gray-700) !important;
}

/* CRITICAL: Override any dark themes that might cause visibility issues */
body {
  background-color: var(--ui-bg-page) !important;
  color: var(--ui-gray-900) !important;
}

/* Ensure all text elements have proper contrast */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ui-gray-900) !important;
}

/* Override any dark background styles that might be applied */
.card,
.card-body,
.modal-content,
.modal-body,
.content-wrapper,
.main-content {
  background-color: white !important;
  color: var(--ui-gray-900) !important;
}

/* Ensure form elements are visible */
.form-control,
.custom-select,
.input-group-text {
  background-color: white !important;
  color: var(--ui-gray-900) !important;
  border-color: var(--ui-border-color) !important;
}

/* Ensure filter inputs are visible */
.card-header .form-control,
.card-header .custom-select,
.card-header select,
.card-header input[type="text"],
.card-header input[type="date"] {
  background-color: white !important;
  color: var(--ui-gray-900) !important;
  border-color: var(--ui-border-color) !important;
}

.card-header .form-control::placeholder,
.card-header input::placeholder {
  color: var(--ui-gray-500) !important;
}

/* Ensure table content is visible */
.table,
.table td,
.table th {
  color: var(--ui-gray-900) !important;
  background-color: white !important;
}

.table thead th {
  background-color: var(--ui-gray-50) !important;
  color: var(--ui-gray-600) !important;
}

/* Ensure buttons are visible with proper contrast */
/* Buttons with dark backgrounds should have white text */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-secondary,
.btn-dark,
.btn[class*="bg-primary"],
.btn[class*="bg-success"],
.btn[class*="bg-danger"],
.btn[class*="bg-warning"],
.btn[class*="bg-info"],
.btn[class*="bg-secondary"],
.btn[class*="bg-dark"] {
  color: white !important;
}

/* Buttons with light backgrounds should have dark text */
.btn-default,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info {
  color: var(--ui-gray-900) !important;
}

/* Smart contrast detection for buttons with custom backgrounds */
/* Default: buttons without specific classes get white text (assuming dark background) */
.btn:not(.btn-default):not(.btn-light):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-warning):not(.btn-outline-danger):not(.btn-outline-info):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary) {
  /* Check if background is explicitly white/light, otherwise use white text */
  color: white !important;
}

/* Exception: buttons with explicitly light/white backgrounds */
.btn-default,
.btn-light,
.btn[style*="background: white"],
.btn[style*="background-color: white"],
.btn[style*="background:#fff"],
.btn[style*="background:#ffffff"],
.btn[style*="background-color:#fff"],
.btn[style*="background-color:#ffffff"],
.btn[style*="background: #fff"],
.btn[style*="background: #ffffff"],
.btn[style*="background-color: #fff"],
.btn[style*="background-color: #ffffff"] {
  color: var(--ui-gray-900) !important;
}

/* Ensure all standard colored buttons maintain white text */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-secondary,
.btn-dark,
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-secondary:hover,
.btn-dark:hover,
.btn-primary:focus,
.btn-success:focus,
.btn-danger:focus,
.btn-warning:focus,
.btn-info:focus,
.btn-secondary:focus,
.btn-dark:focus,
.btn-primary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active,
.btn-info:active,
.btn-secondary:active,
.btn-dark:active {
  color: white !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info {
  color: var(--ui-primary-600) !important;
  background-color: white !important;
  border-color: var(--ui-primary-600) !important;
}

/* Ensure navigation text is visible */
.nav-link,
.navbar-nav .nav-link {
  color: var(--ui-gray-700) !important;
}

.nav-link:hover,
.navbar-nav .nav-link:hover {
  color: var(--ui-primary-600) !important;
}

/* Ensure sidebar text is visible */
.sidebar .nav-link {
  color: var(--ui-gray-300) !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: var(--ui-primary-400) !important;
  background-color: rgba(16, 185, 129, 0.1) !important;
}

/* Ensure buttons never wrap text */
.btn,
button,
input[type="submit"],
input[type="button"] {
  white-space: nowrap !important;
}

/* Table text visibility */
.table {
  color: var(--ui-gray-900) !important;
}

.table thead th {
  color: var(--ui-gray-600) !important;
}

.table tbody td {
  color: var(--ui-gray-900) !important;
}

/* Ensure links are visible and styled */
a {
  color: var(--ui-primary-600);
  transition: color var(--ui-transition-base);
}

a:hover {
  color: var(--ui-primary-700);
  text-decoration: none;
}

/* Dropdown text visibility */
.dropdown-toggle {
  color: var(--ui-gray-700) !important;
}

.dropdown-toggle p {
  color: var(--ui-gray-700) !important;
  margin: 0;
}

.dropdown-item {
  color: var(--ui-gray-700) !important;
}

/* Focus States - Accessibility */
.btn:focus,
.form-control:focus,
button:focus,
a:focus {
  outline: 2px solid var(--ui-primary-500);
  outline-offset: 2px;
}

/* Better focus-visible for keyboard navigation */
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--ui-primary-500);
  outline-offset: 2px;
  box-shadow: var(--ui-input-focus-ring);
}

/* Remove outline for mouse users (preserve for keyboard) */
.btn:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible),
.nav-link:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ============================================================ */

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-wrapper {
  animation: fadeIn var(--ui-transition-slow);
}

/* Pulse animation for loading states */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   IMPROVEMENTS - PROJECT-SPECIFIC
   ============================================================ */

/* Project Actions in tables - Only add space BETWEEN buttons */
.project-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.project-actions .btn {
  margin: 0 !important;
}

/* Better spacing in container-fluid */
.container-fluid {
  padding-left: var(--ui-space-6);
  padding-right: var(--ui-space-6);
}

/* Row spacing */
.row {
  margin-left: calc(var(--ui-space-3) * -1);
  margin-right: calc(var(--ui-space-3) * -1);
}

.row > [class*="col-"] {
  padding-left: var(--ui-space-3);
  padding-right: var(--ui-space-3);
}

/* ============================================================
   RESPONSIVE ENHANCEMENTS
   ============================================================ */

/* Mobile First Improvements */
@media (max-width: 767px) {
  /* Header */
  .main-header {
    padding: 0 var(--ui-space-4);
  }
  
  .main-header .navbar-nav .nav-link {
    padding: var(--ui-space-2) var(--ui-space-3);
  }
  
  /* Content */
  .content-header h1 {
    font-size: var(--ui-text-2xl);
  }
  
  .content-wrapper {
    padding: var(--ui-space-4);
  }
  
  /* Dashboard cards */
  .small-box {
    margin-bottom: var(--ui-space-4);
  }
  
  .small-box .inner h3 {
    font-size: var(--ui-text-3xl);
  }
  
  /* Cards */
  .card-header {
    padding: var(--ui-space-4);
  }
  
  .card-body {
    padding: var(--ui-space-4);
  }
  
  .btn-block {
    width: 100%;
  }
  
  /* Stack buttons vertically on mobile */
  .project-actions {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
  }
  
  .project-actions .btn {
    margin-left: 0 !important;
    width: 100%;
    justify-content: center;
  }
  
  /* Sidebar - Mobile menu */
  .main-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform var(--ui-transition-base);
  }
  
  body.sidebar-open .main-sidebar {
    transform: translateX(0);
    box-shadow: var(--ui-shadow-2xl);
  }
  
  /* Sidebar text must be visible on mobile */
  .sidebar-mini.sidebar-collapse .main-sidebar .nav-link p,
  .sidebar-mini.sidebar-collapse .main-sidebar .brand-text {
    display: inline !important;
    opacity: 1 !important;
  }
  
  /* Tables - better mobile scrolling */
  .table-responsive {
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
  }
  
  /* Form groups */
  .form-group {
    margin-bottom: var(--ui-space-4);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .content-wrapper {
    margin-left: 250px;
  }
  
  .main-sidebar {
    width: 250px;
  }
  
  /* Better spacing for tablets */
  .container-fluid {
    padding-left: var(--ui-space-5);
    padding-right: var(--ui-space-5);
  }
}

/* Desktop - Full experience */
@media (min-width: 992px) {
  /* Ensure sidebar text is always visible */
  .main-sidebar .nav-link p {
    display: inline !important;
  }
  
  .brand-text {
    display: inline-block !important;
  }
  
  /* Better hover states on desktop */
  .nav-sidebar .nav-link {
    margin: var(--ui-space-1) var(--ui-space-3);
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
  .main-sidebar,
  .main-header,
  .main-footer,
  .content-header,
  .project-actions,
  .card-header .btn {
    display: none !important;
  }
  
  .content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .card {
    box-shadow: none !important;
    border: 1px solid var(--ui-border-color) !important;
  }
}

/* ============================================================
   UTILITY CLASSES (Additive - won't break existing code)
   ============================================================ */

/* Modern Card Variants */
.ui-card-hover {
  transition: all var(--ui-transition-base);
}

.ui-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--ui-shadow-xl);
}

/* Gradient Text */
.ui-text-gradient-primary {
  background: linear-gradient(135deg, var(--ui-primary-600), var(--ui-primary-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Icon Enhancements */
.ui-icon-bounce:hover {
  animation: iconBounce 0.5s ease;
}

@keyframes iconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Loading State */
.ui-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.ui-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid var(--ui-primary-500);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}