/* Canvas LMS Style Theme for iteach Dashboard */

:root {
  /* Canvas Primary Colors */
  --canvas-primary: #0374B5;
  --canvas-primary-dark: #0061A0;
  --canvas-primary-light: #E8F3FA;
  
  /* Canvas Secondary Colors */
  --canvas-success: #00AC18;
  --canvas-success-light: #E6F7E6;
  --canvas-warning: #FC5E13;
  --canvas-warning-light: #FFF4EC;
  --canvas-danger: #BF0E08;
  --canvas-danger-light: #FFE8E5;
  --canvas-info: #0374B5;
  --canvas-info-light: #E8F3FA;
  
  /* Canvas Grays */
  --canvas-gray-darker: #2D3B45;
  --canvas-gray-dark: #394B58;
  --canvas-gray: #556572;
  --canvas-gray-light: #C7CDD1;
  --canvas-gray-lighter: #E1E3E4;
  --canvas-gray-lightest: #F5F5F5;
  --canvas-white: #FFFFFF;
  
  /* Canvas Typography */
  --canvas-font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --canvas-font-size-base: 14px;
  --canvas-font-size-small: 12px;
  --canvas-font-size-large: 16px;
  --canvas-font-size-h1: 23px;
  --canvas-font-size-h2: 18px;
  --canvas-font-size-h3: 16px;
  --canvas-line-height: 1.5;
  
  /* Canvas Spacing */
  --canvas-spacing-xs: 6px;
  --canvas-spacing-small: 12px;
  --canvas-spacing-medium: 18px;
  --canvas-spacing-large: 24px;
  --canvas-spacing-xl: 30px;
  
  /* Canvas Border Radius */
  --canvas-border-radius: 3px;
  --canvas-border-radius-large: 4px;
  
  /* Canvas Box Shadows */
  --canvas-box-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.1);
  --canvas-box-shadow-medium: 0 2px 5px rgba(0, 0, 0, 0.1);
  --canvas-box-shadow-large: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Base Styles */
body {
  font-family: var(--canvas-font-family);
  font-size: var(--canvas-font-size-base);
  line-height: var(--canvas-line-height);
  color: var(--canvas-gray-darker);
  background-color: var(--canvas-gray-lightest);
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--canvas-font-family);
  font-weight: 300;
  color: var(--canvas-gray-darker);
  margin-bottom: var(--canvas-spacing-small);
}

h1, .h1 { 
  font-size: var(--canvas-font-size-h1); 
  font-weight: 300;
  border-bottom: 1px solid var(--canvas-gray-lighter);
  padding-bottom: var(--canvas-spacing-small);
  margin-bottom: var(--canvas-spacing-medium);
}

h2, .h2 { 
  font-size: var(--canvas-font-size-h2); 
  font-weight: 400;
}

h3, .h3 { 
  font-size: var(--canvas-font-size-h3); 
  font-weight: 400;
}

/* Links */
a {
  color: var(--canvas-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--canvas-primary-dark);
  text-decoration: underline;
}

/* Buttons - Canvas Style */
.btn {
  font-family: var(--canvas-font-family);
  font-size: var(--canvas-font-size-base);
  font-weight: 400;
  padding: 8px 14px;
  border-radius: var(--canvas-border-radius);
  border: 1px solid transparent;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary {
  background: var(--canvas-primary);
  border-color: var(--canvas-primary);
  color: var(--canvas-white);
}

.btn-primary:hover {
  background: var(--canvas-primary-dark);
  border-color: var(--canvas-primary-dark);
  color: var(--canvas-white);
}

.btn-secondary,
.btn-default {
  background: var(--canvas-white);
  border: 1px solid var(--canvas-gray-light);
  color: var(--canvas-gray-darker);
}

.btn-secondary:hover,
.btn-default:hover {
  background: var(--canvas-gray-lightest);
  border-color: var(--canvas-gray);
  color: var(--canvas-gray-darker);
}

.btn-success {
  background: var(--canvas-success);
  border-color: var(--canvas-success);
  color: var(--canvas-white);
}

.btn-success:hover {
  background: #00911A;
  border-color: #00911A;
  color: var(--canvas-white);
}

.btn-danger {
  background: var(--canvas-danger);
  border-color: var(--canvas-danger);
  color: var(--canvas-white);
}

.btn-danger:hover {
  background: #A00E08;
  border-color: #A00E08;
  color: var(--canvas-white);
}

.btn-info {
  background: var(--canvas-info);
  border-color: var(--canvas-info);
  color: var(--canvas-white);
}

.btn-info:hover {
  background: var(--canvas-primary-dark);
  border-color: var(--canvas-primary-dark);
  color: var(--canvas-white);
}

.btn-sm {
  padding: 5px 10px;
  font-size: var(--canvas-font-size-small);
}

.btn-lg {
  padding: 10px 18px;
  font-size: var(--canvas-font-size-large);
}

/* Cards - Canvas Style */
.card {
  background: var(--canvas-white);
  border: 1px solid var(--canvas-gray-lighter);
  border-radius: var(--canvas-border-radius);
  box-shadow: var(--canvas-box-shadow-small);
  margin-bottom: var(--canvas-spacing-medium);
}

.card-header {
  background: var(--canvas-gray-lightest);
  border-bottom: 1px solid var(--canvas-gray-lighter);
  padding: var(--canvas-spacing-small) var(--canvas-spacing-medium);
  font-weight: 500;
  font-size: var(--canvas-font-size-base);
  color: var(--canvas-gray-darker);
}

.card-body {
  padding: var(--canvas-spacing-medium);
}

.card-footer {
  background: var(--canvas-gray-lightest);
  border-top: 1px solid var(--canvas-gray-lighter);
  padding: var(--canvas-spacing-small) var(--canvas-spacing-medium);
}

/* Forms - Canvas Style */
.form-label {
  font-size: var(--canvas-font-size-base);
  font-weight: 500;
  color: var(--canvas-gray-darker);
  margin-bottom: var(--canvas-spacing-xs);
}

.form-control,
.form-select {
  font-family: var(--canvas-font-family);
  font-size: var(--canvas-font-size-base);
  padding: 8px 12px;
  border: 1px solid var(--canvas-gray-light);
  border-radius: var(--canvas-border-radius);
  background: var(--canvas-white);
  color: var(--canvas-gray-darker);
  transition: border-color 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--canvas-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--canvas-primary-light);
}

.form-control-sm,
.form-select-sm {
  padding: 5px 10px;
  font-size: var(--canvas-font-size-small);
}

.form-text {
  font-size: var(--canvas-font-size-small);
  color: var(--canvas-gray);
  margin-top: var(--canvas-spacing-xs);
}

/* Tables - Canvas Style */
.table {
  background: var(--canvas-white);
  border: 1px solid var(--canvas-gray-lighter);
  border-radius: var(--canvas-border-radius);
  overflow: hidden;
}

.table thead th {
  background: var(--canvas-gray-lightest);
  border-bottom: 2px solid var(--canvas-gray-lighter);
  color: var(--canvas-gray-darker);
  font-weight: 500;
  font-size: var(--canvas-font-size-small);
  text-transform: uppercase;
  padding: var(--canvas-spacing-small);
}

.table tbody tr {
  border-bottom: 1px solid var(--canvas-gray-lighter);
}

.table tbody tr:hover {
  background: var(--canvas-primary-light);
}

.table tbody td {
  padding: var(--canvas-spacing-small);
  vertical-align: middle;
}

/* Alerts - Canvas Style */
.alert {
  padding: var(--canvas-spacing-small) var(--canvas-spacing-medium);
  border: 1px solid transparent;
  border-radius: var(--canvas-border-radius);
  margin-bottom: var(--canvas-spacing-medium);
}

.alert-info {
  background: var(--canvas-info-light);
  border-color: var(--canvas-primary);
  color: var(--canvas-gray-darker);
}

.alert-success {
  background: var(--canvas-success-light);
  border-color: var(--canvas-success);
  color: var(--canvas-gray-darker);
}

.alert-warning {
  background: var(--canvas-warning-light);
  border-color: var(--canvas-warning);
  color: var(--canvas-gray-darker);
}

.alert-danger {
  background: var(--canvas-danger-light);
  border-color: var(--canvas-danger);
  color: var(--canvas-gray-darker);
}

/* Badges - Canvas Style */
.badge {
  font-size: var(--canvas-font-size-small);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--canvas-border-radius);
}

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

/* Navigation Bar - Canvas Style */
.navbar {
  background: var(--canvas-white);
  border-bottom: 2px solid var(--canvas-primary);
  box-shadow: var(--canvas-box-shadow-small);
  padding: 0;
}

.navbar-brand {
  color: var(--canvas-gray-darker);
  font-size: var(--canvas-font-size-large);
  font-weight: 400;
  padding: var(--canvas-spacing-small) var(--canvas-spacing-medium);
}

.navbar-brand:hover {
  color: var(--canvas-primary);
  text-decoration: none;
}

.navbar-nav .nav-link {
  color: var(--canvas-gray-darker);
  padding: var(--canvas-spacing-medium) var(--canvas-spacing-medium);
  font-size: var(--canvas-font-size-base);
  transition: all 0.2s ease;
}

.navbar-nav .nav-link:hover {
  background: var(--canvas-primary-light);
  color: var(--canvas-primary);
  text-decoration: none;
}

.navbar-nav .nav-link.active {
  background: var(--canvas-primary);
  color: var(--canvas-white);
}

/* Breadcrumbs - Canvas Style */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--canvas-font-size-small);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--canvas-gray);
  padding: 0 8px;
}

.breadcrumb-item a {
  color: var(--canvas-primary);
}

.breadcrumb-item.active {
  color: var(--canvas-gray);
}

/* Modal - Canvas Style */
.modal-content {
  border: none;
  border-radius: var(--canvas-border-radius-large);
  box-shadow: var(--canvas-box-shadow-large);
}

.modal-header {
  background: var(--canvas-gray-lightest);
  border-bottom: 1px solid var(--canvas-gray-lighter);
  padding: var(--canvas-spacing-medium);
  border-radius: var(--canvas-border-radius-large) var(--canvas-border-radius-large) 0 0;
}

.modal-title {
  font-size: var(--canvas-font-size-h2);
  font-weight: 300;
  color: var(--canvas-gray-darker);
}

.modal-body {
  padding: var(--canvas-spacing-large);
}

.modal-footer {
  background: var(--canvas-gray-lightest);
  border-top: 1px solid var(--canvas-gray-lighter);
  padding: var(--canvas-spacing-medium);
  border-radius: 0 0 var(--canvas-border-radius-large) var(--canvas-border-radius-large);
}

/* Progress Bars - Canvas Style */
.progress {
  height: 20px;
  background: var(--canvas-gray-lighter);
  border-radius: var(--canvas-border-radius);
  overflow: hidden;
}

.progress-bar {
  background: var(--canvas-primary);
  transition: width 0.3s ease;
}

/* Custom Canvas Components */
.canvas-header-bar {
  background: var(--canvas-white);
  border-bottom: 1px solid var(--canvas-gray-lighter);
  padding: var(--canvas-spacing-medium) 0;
  margin-bottom: var(--canvas-spacing-large);
}

.canvas-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--canvas-spacing-large);
}

.canvas-action-buttons {
  display: flex;
  gap: var(--canvas-spacing-small);
}

.canvas-content-box {
  background: var(--canvas-white);
  border: 1px solid var(--canvas-gray-lighter);
  border-radius: var(--canvas-border-radius);
  padding: var(--canvas-spacing-large);
  margin-bottom: var(--canvas-spacing-medium);
}

.canvas-sidebar {
  background: var(--canvas-gray-lightest);
  border: 1px solid var(--canvas-gray-lighter);
  border-radius: var(--canvas-border-radius);
  padding: var(--canvas-spacing-medium);
}

/* Utility Classes */
.text-canvas-primary { color: var(--canvas-primary) !important; }
.text-canvas-success { color: var(--canvas-success) !important; }
.text-canvas-danger { color: var(--canvas-danger) !important; }
.text-canvas-warning { color: var(--canvas-warning) !important; }
.text-canvas-muted { color: var(--canvas-gray) !important; }

.border-canvas { border-color: var(--canvas-gray-lighter) !important; }
.border-canvas-primary { border-color: var(--canvas-primary) !important; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .canvas-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--canvas-spacing-medium);
  }
  
  .canvas-action-buttons {
    width: 100%;
  }
  
  .canvas-action-buttons .btn {
    flex: 1;
  }
}

/* Override Bootstrap colors with Canvas colors */
.text-primary { color: var(--canvas-primary) !important; }
.text-success { color: var(--canvas-success) !important; }
.text-danger { color: var(--canvas-danger) !important; }
.text-warning { color: var(--canvas-warning) !important; }
.text-info { color: var(--canvas-info) !important; }
.text-muted { color: var(--canvas-gray) !important; }

/* Specific component overrides */
.container-fluid {
  padding-left: var(--canvas-spacing-large);
  padding-right: var(--canvas-spacing-large);
}

main.container-fluid {
  background: var(--canvas-gray-lightest);
  min-height: calc(100vh - 60px);
}

/* Canvas-style icons */
.bi {
  font-size: 1.1em;
  vertical-align: text-bottom;
}

/* Dashboard Cards - Canvas Style */
.dashboard-card {
  background: var(--canvas-white);
  border: 1px solid var(--canvas-gray-lighter);
  border-radius: var(--canvas-border-radius);
  padding: var(--canvas-spacing-large);
  text-align: center;
  transition: all 0.2s ease;
  height: 100%;
}

.dashboard-card:hover {
  box-shadow: var(--canvas-box-shadow-medium);
  transform: translateY(-2px);
}

.dashboard-card .bi {
  font-size: 2.5em;
  color: var(--canvas-primary);
  margin-bottom: var(--canvas-spacing-small);
}

/* Form improvements */
.input-group {
  border-radius: var(--canvas-border-radius);
}

.input-group-text {
  background: var(--canvas-gray-lightest);
  border: 1px solid var(--canvas-gray-light);
  color: var(--canvas-gray);
}

/* Loading spinner */
.spinner-border {
  color: var(--canvas-primary);
}

/* Tooltips */
.tooltip {
  font-size: var(--canvas-font-size-small);
}

.tooltip-inner {
  background: var(--canvas-gray-darker);
  padding: var(--canvas-spacing-xs) var(--canvas-spacing-small);
  border-radius: var(--canvas-border-radius);
}