/* Clean Modern CSS Overrides - Metronic Inspired Style */
/* Consolidated all custom styles in one file */

:root {
  /* Metronic-inspired muted color palette */
  --primary: #3699ff;
  --primary-light: #f1f9ff;
  --success: #1bc5bd;
  --success-light: #c9f7f5;
  --warning: #ffa800;
  --warning-light: #fff4de;
  --danger: #f64e60;
  --danger-light: #ffe2e5;
  --info: #8950fc;
  --info-light: #eee5ff;
  --dark: #181c32;
  --gray-100: #f3f6f9;
  --gray-200: #eef3f7;
  --gray-300: #e4e6ea;
  --gray-400: #b5b5c3;
  --gray-500: #a1a5b7;
  --gray-600: #7e8299;
  --gray-700: #5e6278;
  --gray-800: #3f4254;
  --gray-900: #181c32;
  --border-radius: 0.475rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.75rem;
}

/* Typography */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-700) !important;
  background-color: var(--gray-100) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  margin-bottom: 1rem;
}

/* MDB5 Sidenav Overrides - Match Documentation Style */
.sidenav {
  background-color: #fbfbfb !important;
  border-right: 1px solid var(--gray-300) !important;
  box-shadow: none !important;
  transform: translateX(0) !important; /* Keep sidenav open */
}

.sidenav[data-mdb-hidden="false"] {
  transform: translateX(0) !important;
}

.sidenav .sidenav-link {
  color: var(--gray-700) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.15s ease !important;
}

.sidenav .sidenav-link:hover {
  background-color: var(--gray-100) !important;
  color: var(--gray-800) !important;
}

.sidenav .sidenav-link.active {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
  border-right: 3px solid var(--primary) !important;
}

.sidenav .sidenav-link i {
  width: 18px !important;
  text-align: center !important;
  margin-right: 0.75rem !important;
  font-size: 0.8rem !important; /* Smaller icons */
}

.sidenav .sidenav-collapse .sidenav-link {
  padding-left: 2rem !important;
  font-size: 0.8125rem !important;
}

.sidenav .sidenav-collapse .sidenav-link i {
  font-size: 0.4rem !important; /* Much smaller for sub-items */
  margin-right: 0.5rem !important;
}

/* Category headings in sidenav */
.sidenav-category {
  padding: 1rem 1rem 0.5rem !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--gray-500) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Main content adjustment for sidenav */
.sidenav-enabled {
  margin-left: 260px !important;
}

/* Cards - Clean and Minimal */
.card {
  background: #ffffff !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: none !important;
  margin-bottom: 1.5rem !important;
}

.card-header {
  background: var(--gray-100) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 1rem 1.25rem !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  font-size: 0.9rem !important;
}

.card-body {
  padding: 1.25rem !important;
}

.card-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  margin-bottom: 0.5rem !important;
}

/* Buttons - Flat Design */
.btn {
  border-radius: var(--border-radius) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  border: none !important;
  transition: background-color 0.15s ease !important;
  text-decoration: none !important;
}

.btn-sm {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.8125rem !important;
}

.btn-primary {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background: #1e7ff5 !important;
}

.btn-success {
  background: var(--success) !important;
  color: #ffffff !important;
}

.btn-success:hover {
  background: #0bb7af !important;
}

.btn-warning {
  background: var(--warning) !important;
  color: #ffffff !important;
}

.btn-warning:hover {
  background: #e6960a !important;
}

.btn-info {
  background: var(--info) !important;
  color: #ffffff !important;
}

.btn-info:hover {
  background: #7944ea !important;
}

.btn-outline-primary {
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* Forms - Minimal Style */
.form-control {
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--border-radius) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  transition: border-color 0.15s ease !important;
  background-color: #ffffff !important;
}

.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

.form-select {
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--border-radius) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
}

.form-label {
  font-weight: 500 !important;
  color: var(--gray-700) !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem !important;
}

/* Badges - Flat Style */
.badge {
  font-weight: 500 !important;
  font-size: 0.7rem !important;
  padding: 0.3em 0.6em !important;
  border-radius: var(--border-radius-sm) !important;
}

.badge.bg-primary { background: var(--primary) !important; }
.badge.bg-success { background: var(--success) !important; }
.badge.bg-warning { background: var(--warning) !important; }
.badge.bg-info { background: var(--info) !important; }
.badge.bg-danger { background: var(--danger) !important; }
.badge.bg-secondary { background: var(--gray-400) !important; }

/* Navbar - Clean Header */
.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--gray-300) !important;
  box-shadow: none !important;
}

/* Tables - Clean and Minimal */
.table {
  color: var(--gray-700) !important;
  font-size: 0.875rem !important;
}

.table th {
  background: var(--gray-100) !important;
  border-bottom: 1px solid var(--gray-300) !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  padding: 0.75rem !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.table td {
  padding: 0.75rem !important;
  border-bottom: 1px solid var(--gray-200) !important;
  vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: rgba(0, 0, 0, 0.01) !important;
}

/* Alerts - Flat Design */
.alert {
  border: 1px solid !important;
  border-radius: var(--border-radius) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 1rem !important;
}

.alert-success {
  background: var(--success-light) !important;
  color: var(--success) !important;
  border-color: rgba(27, 197, 189, 0.3) !important;
}

.alert-warning {
  background: var(--warning-light) !important;
  color: #b58c00 !important;
  border-color: rgba(255, 168, 0, 0.3) !important;
}

.alert-danger {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
  border-color: rgba(246, 78, 96, 0.3) !important;
}

.alert-info {
  background: var(--info-light) !important;
  color: var(--info) !important;
  border-color: rgba(137, 80, 252, 0.3) !important;
}

/* Progress Bars */
.progress {
  height: 0.375rem !important;
  border-radius: 0.1875rem !important;
  background-color: var(--gray-200) !important;
}

.progress-bar {
  border-radius: 0.1875rem !important;
}

/* Modals - Flat Design */
.modal-content {
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1) !important;
}

.modal-header {
  background: var(--gray-100) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 1.25rem 1.5rem !important;
}

.modal-body {
  padding: 1.5rem !important;
}

.modal-footer {
  background: var(--gray-100) !important;
  border-top: 1px solid var(--gray-200) !important;
  padding: 1rem 1.5rem !important;
}

/* Text Colors - Consistent with Theme */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-muted { color: var(--gray-500) !important; }
.text-gray-800 { color: var(--gray-800) !important; }
.text-gray-300 { color: var(--gray-300) !important; }

/* Background Colors */
.bg-primary { background-color: var(--primary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-danger { background-color: var(--danger) !important; }

/* Dropdown Menus - Flat */
.dropdown-menu {
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08) !important;
  padding: 0.25rem 0 !important;
}

.dropdown-item {
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  color: var(--gray-700) !important;
  transition: background-color 0.15s ease !important;
}

.dropdown-item:hover {
  background: var(--gray-100) !important;
  color: var(--gray-800) !important;
}

/* Icon sizing - smaller and more refined */
.fa-3x {
  font-size: 2rem !important; /* Reduced from 3x */
}

.fa-5x {
  font-size: 3rem !important; /* Reduced from 5x */
}

/* Full-frame iframe container */
.notion-embed-container {
  position: relative !important;
  width: 100% !important;
  height: 600px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--border-radius) !important;
}

.notion-embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .sidenav-enabled {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .card-body {
    padding: 1rem !important;
  }
  
  .btn {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
  }
  
  .fa-3x {
    font-size: 1.5rem !important;
  }
}

/* Custom utility classes */
.border-left-primary {
  border-left: 3px solid var(--primary) !important;
}

.border-left-success {
  border-left: 3px solid var(--success) !important;
}

.border-left-info {
  border-left: 3px solid var(--info) !important;
}

.border-left-warning {
  border-left: 3px solid var(--warning) !important;
}