/*!
 * Settle CRM - Modular CSS Architecture
 * Version: 2.3.0
 * Description: Comprehensive modular CSS system based on Clio design principles
 * 
 * Architecture Overview:
 * - base.css: CSS variables, typography, utilities, and fundamentals
 * - layout.css: Header, sidebar, main layout system
 * - components/: Reusable UI components (buttons, forms, tables, cards, modals, badges)
 * - pages/: Page-specific styling (dashboard, login, reports)
 * 
 * This modular approach provides:
 * ✓ Better maintainability and organization
 * ✓ Easier debugging and development
 * ✓ Consistent design system
 * ✓ Improved performance through selective loading
 * ✓ Clear separation of concerns
 */

/* ===== FOUNDATION ===== */
/* Core variables, typography, and utilities */
@import url("./base-new.css");

/* ===== LAYOUT SYSTEM ===== */
/* Header, sidebar, and main content layout */
@import url("./layout.css");

/* ===== COMPONENT LIBRARY ===== */
/* Reusable UI components */
@import url("./components/buttons.css");
@import url("./components/forms.css");
@import url("./components/tables.css");
@import url("./components/cards.css");
@import url("./components/modals.css");
@import url("./components/badges.css");
@import url("./components/filters.css");
@import url("./components/page-layout.css");
@import url("./components/comments.css");
@import url("./components/pagination.css");
@import url("./components/bulk-actions.css");

/* ===== PAGE-SPECIFIC STYLES ===== */
/* Individual page styling */
@import url("./pages/dashboard.css");
@import url("./pages/reports.css");
@import url("./pages/login.css");

/* ===== UTILITY OVERRIDES ===== */
/* Final tweaks and Bootstrap compatibility */

/* Ensure modular system takes precedence */
body {
  font-family: var(--font-family-sans);
  background-color: var(--background-color-app);
  color: var(--text-color-default);
}

/* Hide legacy Bootstrap components that interfere */
.navbar {
  display: none !important;
}

.container-fluid > .row > .sidebar {
  display: none !important;
}

.container-fluid > .row > main {
  flex: 1;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Ensure dropdown menus work properly */
.dropdown-menu {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--box-shadow);
  padding: 6px 0;
  border: 1px solid var(--border-color-subdued);
  background-color: var(--background-color-surface-default);
  font-family: var(--font-family-sans);
}

.dropdown-item {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text-color-default);
  background-color: transparent;
  transition: background-color 0.15s ease;
  font-family: var(--font-family-sans);
  text-decoration: none;
}

.dropdown-item:hover {
  background: var(--boldly-color-grey-100);
  color: var(--text-color-default);
  text-decoration: none;
}

.dropdown-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color-subdued);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-family-sans);
}

/* ===== RESPONSIVE FOUNDATION ===== */

@media (max-width: 1024px) {
  /* Tablet adjustments */
  .clio-header {
    padding: 12px 16px;
  }

  .clio-header-search {
    max-width: min(40ch, 35%);
  }
}

@media (max-width: 768px) {
  /* Mobile adjustments */
  .clio-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s;
  }

  .clio-main {
    margin-left: 0;
  }

  .clio-sidebar.open {
    transform: translateX(0);
  }

  .clio-header .logo {
    margin-right: 20px;
  }

  .clio-header .search-area {
    display: none;
  }

  /* Header for mobile */
  .clio-header {
    padding: 8px 12px;
    height: 56px;
  }

  /* Hide app name on mobile */
  .clio-header .app-name {
    display: none;
  }

  /* Hide search completely on mobile for more space */
  .clio-header-search {
    display: none;
  }
}

/* History page highlighted row */
.highlighted-row {
  background: #fef3c7 !important;
  border-left: 4px solid #f59e0b !important;
  animation: highlightFade 3s ease-out forwards;
}

@keyframes highlightFade {
  0% {
    background: #fbbf24 !important;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
  }
  100% {
    background: #fef3c7 !important;
    box-shadow: none;
  }
}