/* Modular CSS Import System - Load in dependency order */

/* BASE - Must load first (contains all CSS variables and foundations) */
@import url('base/reset.css');
@import url('base/variables.css');
@import url('base/themes.css');
@import url('base/footer.css');

/* LAYOUT - Core layout structure */
@import url('layout/dashboard.css');
@import url('layout/sidebar.css');

/* COMPONENTS - Reusable UI components */
@import url('components/buttons.css');
@import url('components/forms.css');
@import url('components/tables.css');
@import url('components/tabs.css');
@import url('components/chatbox.css');
@import url('components/settings.css');
@import url('components/table-forms.css');
@import url('components/searchable-dropdown.css');



/* MODULES - Feature-specific styles */
@import url('modules/hub.css');
@import url('modules/admin.css');
@import url('modules/profile.css');
@import url('modules/socialMedia.css');
@import url('modules/files.css');
@import url('modules/login.css');
@import url('modules/scheduleBatch.css');
@import url('modules/viewBatch.css');
@import url('modules/createBatch.css');
@import url('modules/branding.css');
@import url('modules/mail.css');
@import url('modules/calendar.css');
@import url('modules/connect.css');
@import url('modules/meeting.css');
@import url('modules/subscription.css');
@import url('modules/notifications.css');


/* UTILITIES - Helpers and responsive design (load last) */
@import url('utilities/helpers.css');
@import url('utilities/animations.css');

/* Force theme variables to take priority */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* Legacy schema-specific styles - keep these */
.schema-item,
.table-item {
  margin-bottom: 6px;
  border-radius: 6px;
  transition: background 0.15s;
  padding: 2px 0 2px 0;
}

.schema-item .schema-toggle,
.table-item .table-toggle {
  font-weight: 500;
  font-size: 1.08em;
  padding: 8px 12px;
  border-radius: 6px;
  transition:
    background 0.15s,
    color 0.15s;
  user-select: none;
}

.schema-item .schema-toggle:hover,
.table-item .table-toggle:hover {
  background: #f4f6f8;
  color: #232946;
}

.schema-item.expanded .schema-toggle,
.table-item.expanded .table-toggle {
  background: #e0e7ff;
  color: #232946;
}

.schema-item .arrow,
.table-item .arrow {
  font-size: 1.1em;
  transition: transform 0.2s;
  width: 1.2em;
  display: inline-block;
  text-align: center;
}

.schema-item.expanded .arrow,
.table-item.expanded .arrow {
  transform: rotate(90deg);
}

.schema-rows-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.07);
  font-size: 0.98em;
}

.schema-rows-table th,
.schema-rows-table td {
  padding: 7px 10px;
  border: 1px solid #e0e0e0;
  text-align: left;
}

.schema-rows-table th {
  background: #f4f6f8;
  font-weight: 600;
}

/* Dark theme overrides for legacy components */
[data-theme="dark"] .schema-item .schema-toggle:hover,
[data-theme="dark"] .table-item .table-toggle:hover {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .schema-item.expanded .schema-toggle,
[data-theme="dark"] .table-item.expanded .table-toggle {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .schema-rows-table {
  background: var(--bg-primary) !important;
}

[data-theme="dark"] .schema-rows-table th {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .schema-rows-table td {
  color: var(--text-secondary) !important;
  border-color: var(--border-light) !important;
}

/* Update sidebar bottom spacing */
.sidebar-bottom {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--border-light);
}

/* Add to your main CSS (e.g., :root or body) */
:root {
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 80px;
  --profile-dropdown-gap: 2rem;
}