/*
 * Material Design 3 Theme for TIP Application
 * Based on Google's Material Design Principles
 * Color Scheme: Modern Green (keeping forest/nature theme essence)
 */

:root {
  /* Primary Color Palette - Modern Forest Green */
  --md-primary: #2E7D32;
  --md-primary-light: #4CAF50;
  --md-primary-lighter: #81C784;
  --md-primary-lightest: #C8E6C9;
  --md-primary-dark: #1B5E20;
  --md-primary-darker: #0D3B1A;
  --md-primary-white: #FFFFFF;

  /* Secondary Color - Complementary Green */
  --md-secondary: #558B2F;
  --md-secondary-light: #9CCC65;
  --md-secondary-lighter: #C5E1A5;

  /* Surface & Container Colors */
  --md-surface: #FFFFFF;
  --md-surface-dim: #F5F5F5;
  --md-surface-bright: #FEFCFF;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #F5F5F5;
  --md-surface-container: #F0F0F0;
  --md-surface-container-high: #EBEBEB;
  --md-surface-container-highest: #E6E6E6;

  /* Text Colors */
  --md-on-surface: #1F1F1F;
  --md-on-surface-variant: #49454E;
  --md-on-primary: #FFFFFF;
  --md-on-primary-container: #1B5E20;
  --md-on-secondary: #FFFFFF;
  --md-on-secondary-container: #1B2E0C;

  /* Outline & Borders */
  --md-outline: #79747E;
  --md-outline-variant: #C2C7C7;

  /* Semantic Colors */
  --md-error: #D32F2F;
  --md-error-container: #F9DEDC;
  --md-on-error: #FFFFFF;
  --md-on-error-container: #410E0B;

  --md-warning: #F57C00;
  --md-warning-container: #FFE0B2;
  --md-on-warning: #FFFFFF;

  --md-success: #388E3C;
  --md-success-container: #C8E6C9;
  --md-on-success: #FFFFFF;

  --md-info: #1976D2;
  --md-info-container: #BBDEFB;
  --md-on-info: #FFFFFF;

  /* Scrim & Inverse Colors */
  --md-scrim: rgba(0, 0, 0, 0.5);
  --md-inverse-surface: #313033;
  --md-inverse-on-surface: #F5EFF7;
  --md-inverse-primary: #A4D65E;

  /* Typography Font Stack */
  --md-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --md-font-family-display: 'Inter', system-ui, sans-serif;

  /* Spacing System (8px base unit) */
  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 16px;
  --md-spacing-lg: 24px;
  --md-spacing-xl: 32px;
  --md-spacing-2xl: 48px;

  /* Elevation/Z-index */
  --md-elevation-0: none;
  --md-elevation-1: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
  --md-elevation-2: 0px 3px 6px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.12);
  --md-elevation-3: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 3px 6px rgba(0, 0, 0, 0.10);
  --md-elevation-4: 0px 15px 30px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.08);

  /* Border Radius */
  --md-radius-none: 0px;
  --md-radius-xs: 4px;
  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-lg: 16px;
  --md-radius-full: 28px;

  /* Transitions */
  --md-transition-short: 150ms;
  --md-transition-standard: 300ms;
  --md-transition-long: 500ms;
  --md-transition-curve: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Scale */
  --md-z-tooltip: 1000;
  --md-z-modal: 900;
  --md-z-menu: 800;
  --md-z-sticky: 100;
  --md-z-elevated: 10;
  --md-z-base: 1;
}

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

html, body {
  font-family: var(--md-font-family);
  background-color: var(--md-surface);
  color: var(--md-on-surface);
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--md-primary);
  text-decoration: none;
  transition: color var(--md-transition-short) var(--md-transition-curve);
}

a:hover {
  color: var(--md-primary-light);
}

a:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.md-display-large {
  font-size: 57px;
  line-height: 64px;
  font-weight: 400;
  letter-spacing: -0.25px;
}

.md-custom-label {
    background-color: var(--md-surface);
}

.md-display-medium {
    font-size: 45px;
    line-height: 52px;
    font-weight: 400;
    letter-spacing: 0px;
}

.md-display-small {
  font-size: 36px;
  line-height: 44px;
  font-weight: 400;
  letter-spacing: 0px;
}

.md-headline-large {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: 0px;
}

.md-headline-medium {
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: 0px;
}

.md-headline-small {
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0px;
}

.md-title-large {
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0px;
}

.md-title-medium {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.15px;
}

.md-title-small {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.md-body-large {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.md-body-medium {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.25px;
}

.md-body-small {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.md-label-large {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.md-label-medium {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.md-label-small {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ============================================
   BUTTONS
   ============================================ */

.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-lg);
  border: none;
  border-radius: var(--md-radius-full);
  font-family: var(--md-font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: all var(--md-transition-short) var(--md-transition-curve);
  outline: none;
}

.md-btn:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.md-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Filled Button (Primary) */
.md-btn-filled {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-elevation-0);
}

.md-btn-filled:hover:not(:disabled) {
  background-color: var(--md-primary-dark);
  box-shadow: var(--md-elevation-1);
}

.md-btn-filled:active:not(:disabled) {
  background-color: var(--md-primary-darker);
  box-shadow: var(--md-elevation-0);
}

/* Tonal Button (Secondary) */
.md-btn-tonal {
  background-color: var(--md-primary-lightest);
  color: var(--md-primary-dark);
}

.md-btn-tonal:hover:not(:disabled) {
  background-color: var(--md-primary-lighter);
}

.md-btn-tonal:active:not(:disabled) {
  background-color: var(--md-primary-light);
}

/* Outlined Button */
.md-btn-outlined {
  background-color: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
}

.md-btn-outlined:hover:not(:disabled) {
  background-color: rgba(46, 125, 50, 0.08);
  border-color: var(--md-primary);
}

.md-btn-outlined:active:not(:disabled) {
  background-color: rgba(46, 125, 50, 0.12);
}

/* Text Button */
.md-btn-text {
  background-color: transparent;
  color: var(--md-primary);
}

.md-btn-text:hover:not(:disabled) {
  background-color: rgba(46, 125, 50, 0.08);
}

.md-btn-text:active:not(:disabled) {
  background-color: rgba(46, 125, 50, 0.12);
}

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

.md-card {
  background-color: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elevation-1);
  padding: var(--md-spacing-lg);
  transition: all var(--md-transition-standard) var(--md-transition-curve);
}

.md-card:hover {
  box-shadow: var(--md-elevation-3);
  transform: translateY(-2px);
}

.md-card-outlined {
  background-color: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  box-shadow: none;
  padding: var(--md-spacing-lg);
}

.md-card-elevated {
  background-color: var(--md-surface-container-low);
  border: none;
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elevation-1);
  padding: var(--md-spacing-lg);
}

.md-card-filled {
  background-color: var(--md-surface-container-highest);
  border: none;
  border-radius: var(--md-radius-md);
  box-shadow: none;
  padding: var(--md-spacing-lg);
}

/* Card Content */
.md-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--md-spacing-md);
  margin-bottom: var(--md-spacing-md);
}

.md-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--md-radius-sm);
  background-color: var(--md-primary-lightest);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-primary);
  flex-shrink: 0;
}

.md-card-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--md-on-surface);
  margin: 0 0 var(--md-spacing-sm) 0;
}

.md-card-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--md-on-surface-variant);
  margin: 0 0 var(--md-spacing-md) 0;
}

.md-card-content {
  font-size: 14px;
  line-height: 20px;
  color: var(--md-on-surface-variant);
}

.md-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-spacing-md);
  margin-top: var(--md-spacing-lg);
}

/* ============================================
   NAVIGATION - SIDEBAR
   ============================================ */

.md-nav-drawer {
    display: inline-block;
    flex-direction: column;
    width: 290px;
    height: calc(100% - 10px);
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-lg);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 5px;
    box-shadow: var(--md-elevation-1);
    scrollbar-width: thin;
    scrollbar-color: var(--md-outline-variant) transparent;
    min-height: 500px;
}

.md-nav-drawer::-webkit-scrollbar {
  width: 4px;
}

.md-nav-drawer::-webkit-scrollbar-thumb {
  background-color: var(--md-outline-variant);
  border-radius: 4px;
}

.md-nav-item {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-md);
  padding: 12px var(--md-spacing-lg);
  margin: 2px var(--md-spacing-sm);
  border-radius: var(--md-radius-full);
  cursor: pointer;
  transition: all var(--md-transition-short) var(--md-transition-curve);
  color: var(--md-on-surface-variant);
  user-select: none;
  position: relative;
  overflow: hidden; 
}

.md-nav-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background-color: var(--md-on-surface);
  transition: opacity var(--md-transition-short) var(--md-transition-curve);
  pointer-events: none;
}

.md-nav-item:hover::after {
  opacity: 0.08;
}

.md-nav-item:active::after {
  opacity: 0.12;
}

.md-nav-item:hover {
  color: var(--md-on-surface);
}

.md-nav-item.active {
  background-color: var(--md-primary-lightest);
  color: var(--md-primary);
}

.md-nav-item.active::after {
  background-color: var(--md-primary);
}

.md-nav-item.active .md-nav-icon,
.md-nav-item.active .md-nav-label {
  color: var(--md-primary);
  font-weight: bolder;
}

.md-nav-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 22px;
}

.md-nav-label {
  flex: 1;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.1px;
  line-height: 20px;
}

.md-nav-chevron {
  width: 20px;
  height: 20px;
  transition: transform var(--md-transition-standard) var(--md-transition-curve);
  font-size: 20px;
}

.md-nav-item.expanded .md-nav-chevron {
  transform: rotate(90deg);
}

/* Sub-menu items */
.md-nav-submenu {
  background-color: transparent;
  overflow: hidden;
  animation: submenuSlideDown var(--md-transition-standard) var(--md-transition-curve);
}

@keyframes submenuSlideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
}

.md-nav-subitem {
  display: flex;
  align-items: center;
  padding: 10px var(--md-spacing-md) 10px var(--md-spacing-lg);
  padding-left: calc(var(--md-spacing-lg) + 24px + var(--md-spacing-md));
  margin: 1px var(--md-spacing-sm);
  border-radius: var(--md-radius-full);
  cursor: pointer;
  font-size: 13px;
  line-height: 20px;
  color: var(--md-on-surface-variant);
  transition: all var(--md-transition-short) var(--md-transition-curve);
  position: relative;
  overflow: hidden;
}

.md-nav-subitem::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background-color: var(--md-on-surface);
  transition: opacity var(--md-transition-short) var(--md-transition-curve);
  pointer-events: none;
}

.md-nav-subitem:hover::after {
  opacity: 0.08;
}

.md-nav-subitem:hover {
  color: var(--md-on-surface);
}

.md-nav-subitem.active {
  background-color: var(--md-primary-lightest);
  color: var(--md-primary);
  font-weight: 500;
}

/* ============================================
   HEADER / APP BAR
   ============================================ */

.md-app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 var(--md-spacing-sm);
    height: 64px;
    background: linear-gradient(90deg, var(--md-primary-white) 60px, var(--md-primary-lightest)200px, var(--md-primary-lighter) 800px, var(--md-primary-light) 900px, var(--md-primary-dark) 100%);
    box-shadow: var(--md-elevation-2);
    color: #000000;
    border-radius: 0;
    position: relative;
    z-index: var(--md-z-sticky);
    min-width:1250px;
    min-height:65px;
}

.md-app-bar-title {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  flex: 1;
}

.md-app-bar-logo {
    position:absolute;
    top:-6px;
    left:-5px;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content:start;    
}

    .md-app-bar-logo img {
        filter: drop-shadow(0px 0px 0.05px black);
        width: 100%;
        height: 100%;
    }

.md-app-bar-name {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.15px;
    line-height: 28px;
    margin: 0;
    margin-left: 60px;
    color: var(--md-on-surface);
}

.md-app-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-lg);
}

.md-app-bar-action {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-sm);
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border-radius: var(--md-radius-full);
  cursor: pointer;
  transition: all var(--md-transition-short) var(--md-transition-curve);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  position: relative;
  overflow: hidden;
}

.md-app-bar-action::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background-color: #FFFFFF;
  transition: opacity var(--md-transition-short) var(--md-transition-curve);
  pointer-events: none;
}

.md-app-bar-action:hover::after {
  opacity: 0.12;
}

.md-app-bar-action:active::after {
  opacity: 0.2;
}

.md-app-bar-action:hover {
  color: #FFFFFF;
}

.md-app-bar-action:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

.md-text-field {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
  margin-bottom: var(--md-spacing-md);
}

.md-text-field label {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
}

.md-text-field input,
.md-text-field textarea,
.md-text-field select {
  padding: var(--md-spacing-md);
  font-family: var(--md-font-family);
  font-size: 16px;
  line-height: 24px;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-sm);
  background-color: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  transition: all var(--md-transition-short) var(--md-transition-curve);
}

.md-text-field input:hover,
.md-text-field textarea:hover,
.md-text-field select:hover {
  border-color: var(--md-on-surface-variant);
  background-color: var(--md-surface-container-high);
}

.md-text-field input:focus,
.md-text-field textarea:focus,
.md-text-field select:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
  background-color: var(--md-surface);
}

.md-text-field input:disabled,
.md-text-field textarea:disabled,
.md-text-field select:disabled {
  background-color: var(--md-surface-container-lowest);
  color: var(--md-on-surface-variant);
  opacity: 0.5;
  cursor: not-allowed;
}

.md-text-field-error {
  color: var(--md-error);
  font-size: 12px;
  line-height: 16px;
}

/* ============================================
   STATUS MESSAGES
   ============================================ */

.md-snackbar {
  position: fixed;
  bottom: var(--md-spacing-lg);
  left: var(--md-spacing-lg);
  background-color: var(--md-on-surface);
  color: var(--md-surface);
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elevation-3);
  z-index: var(--md-z-tooltip);
  animation: slideUp var(--md-transition-standard) var(--md-transition-curve);
}

@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.md-alert {
  padding: var(--md-spacing-md);
  border-radius: var(--md-radius-md);
  margin-bottom: var(--md-spacing-md);
}

.md-alert-error {
  background-color: var(--md-error-container);
  color: var(--md-on-error-container);
  border-left: 4px solid var(--md-error);
}

.md-alert-warning {
  background-color: var(--md-warning-container);
  color: var(--md-on-surface);
  border-left: 4px solid var(--md-warning);
}

.md-alert-success {
  background-color: var(--md-success-container);
  color: var(--md-on-surface);
  border-left: 4px solid var(--md-success);
}

.md-alert-info {
  background-color: var(--md-info-container);
  color: var(--md-on-surface);
  border-left: 4px solid var(--md-info);
}

/* ============================================
   LOADING & STATES
   ============================================ */

.md-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--md-outline-variant);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* ============================================
   UTILITY CLASSES
   ============================================ */

.md-flex {
  display: flex;
}

.md-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.md-grid {
  display: grid;
}

.md-mt-sm {
  margin-top: var(--md-spacing-sm);
}

.md-mt-md {
  margin-top: var(--md-spacing-md);
}

.md-mt-lg {
  margin-top: var(--md-spacing-lg);
}

.md-mb-sm {
  margin-bottom: var(--md-spacing-sm);
}

.md-mb-md {
  margin-bottom: var(--md-spacing-md);
}

.md-mb-lg {
  margin-bottom: var(--md-spacing-lg);
}

.md-p-sm {
  padding: var(--md-spacing-sm);
}

.md-p-md {
  padding: var(--md-spacing-md);
}

.md-p-lg {
  padding: var(--md-spacing-lg);
}

.md-gap-sm {
  gap: var(--md-spacing-sm);
}

.md-gap-md {
  gap: var(--md-spacing-md);
}

.md-gap-lg {
  gap: var(--md-spacing-lg);
}

.md-rounded-sm {
  border-radius: var(--md-radius-sm);
}

.md-rounded-md {
  border-radius: var(--md-radius-md);
}

.md-rounded-lg {
  border-radius: var(--md-radius-lg);
}

/* ============================================
   LAYOUT CLASSES
   ============================================ */

.md-main-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    background-color: var(--md-surface-dim);
    min-width: 1250px;
    min-height: 800px;
}

.md-content-area {
    flex: 1;
    overflow-y: auto;
    border-radius: var(--md-radius-lg);
    border: 1px solid var(--md-outline-variant);
    background-color: var(--md-surface);
    box-shadow: var(--md-elevation-1);
    padding: var(--md-spacing-sm);
    margin: 5px 5px 5px 0px;
    scrollbar-width: thin;
    scrollbar-color: var(--md-outline-variant) transparent;
   /* min-height: 900px;*/
}

.md-content-area::-webkit-scrollbar {
  width: 6px;
}

.md-content-area::-webkit-scrollbar-thumb {
  background-color: var(--md-outline-variant);
  border-radius: 6px;
}

/* ============================================
   HOME / DASHBOARD
   ============================================ */

.md-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--md-spacing-2xl) var(--md-spacing-lg);
  background: linear-gradient(180deg, var(--md-primary-lightest) 0%, var(--md-surface) 100%);
  border-radius: var(--md-radius-lg);
  margin-bottom: var(--md-spacing-xl);
}

.md-hero-logo {
  height: 120px;
  margin-bottom: var(--md-spacing-lg);
  filter: drop-shadow(0 4px 12px rgba(46, 125, 50, 0.2));
}

.md-hero-title {
  font-size: 58px;
  font-weight: 400;
  line-height: 60px;
  color: var(--md-on-surface);
  margin: 0 0 var(--md-spacing-sm) 0;
  text-align:left;
  margin-right:50px;
}

.md-hero-subtitle {
    font-size: 38px;
    line-height: 55px;
    color: var(--md-on-surface);
    margin: 0;
    max-width: 600px;
}

.md-section-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin: 0 0 var(--md-spacing-md) 0;
  padding-bottom: var(--md-spacing-sm);
  border-bottom: 1px solid var(--md-outline-variant);
}

.md-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--md-spacing-lg);
}

/* Interactive card (clickable) */
.md-card-interactive {
  background-color: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-elevation-1);
  padding: var(--md-spacing-lg);
  transition: all var(--md-transition-standard) var(--md-transition-curve);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.md-card-interactive::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background-color: var(--md-primary);
  transition: opacity var(--md-transition-short) var(--md-transition-curve);
  pointer-events: none;
}

.md-card-interactive:hover {
  box-shadow: var(--md-elevation-3);
  transform: translateY(-2px);
  border-color: var(--md-primary-lighter);
}

.md-card-interactive:hover::after {
  opacity: 0.04;
}

.md-card-interactive:active {
  transform: translateY(0);
  box-shadow: var(--md-elevation-1);
}

.md-card-interactive:active::after {
  opacity: 0.08;
}

.md-card-icon-container {
  width: 48px;
  height: 48px;
  border-radius: var(--md-radius-md);
  background-color: var(--md-primary-lightest);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.md-card-icon-container .material-icons,
.md-card-icon-container svg {
  color: var(--md-primary);
  fill: var(--md-primary);
  font-size: 24px;
  width: 24px;
  height: 24px;
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.md-login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    background: linear-gradient(180deg, var(--md-primary-lightest) 0%, var(--md-surface) 40%);
    border-radius: var(--md-radius-lg);
}

.md-login-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--md-surface);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-elevation-2);
  padding: var(--md-spacing-2xl);
}

.md-login-header {
  text-align: center;
  margin-bottom: var(--md-spacing-xl);
}

.md-login-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--md-spacing-lg);
  box-shadow: var(--md-elevation-1);
}

.md-login-icon .material-icons {
  font-size: 32px;
  color: var(--md-on-primary);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   DARK MODE (class-based toggle)
   ============================================ */

html.dark-mode {
  /* Primary Colors - lighter tones for dark backgrounds */
  --md-primary: #81C784;
  --md-primary-light: #A5D6A7;
  --md-primary-lighter: #C8E6C9;
  --md-primary-lightest: rgba(129, 199, 132, 0.16);
  --md-primary-dark: #66BB6A;
  --md-primary-darker: #4CAF50;

  /* Secondary */
  --md-secondary: #9CCC65;
  --md-secondary-light: #C5E1A5;
  --md-secondary-lighter: #DCEDC8;

  /* Surface & Container Colors - MD3 dark scheme */
  --md-surface: #1C1B1F;
  --md-surface-dim: #141218;
  --md-surface-bright: #3B383E;
  --md-surface-container-lowest: #0F0D13;
  --md-surface-container-low: #1D1B20;
  --md-surface-container: #211F26;
  --md-surface-container-high: #2B2930;
  --md-surface-container-highest: #36343B;

  /* Text Colors */
  --md-on-surface: #E6E1E5;
  --md-on-surface-variant: #CAC4D0;
  --md-on-primary: #1B5E20;
  --md-on-primary-container: #A5D6A7;
  --md-on-secondary: #1B2E0C;
  --md-on-secondary-container: #C5E1A5;

  /* Outline & Borders */
  --md-outline: #938F99;
  --md-outline-variant: #49454F;

  /* Semantic Colors - adjusted for dark */
  --md-error: #F2B8B5;
  --md-error-container: #8C1D18;
  --md-on-error: #601410;
  --md-on-error-container: #F9DEDC;

  --md-warning: #FFB74D;
  --md-warning-container: #7A4100;
  --md-on-warning: #4E2700;

  --md-success: #81C784;
  --md-success-container: #1B5E20;
  --md-on-success: #0D3B1A;

  --md-info: #90CAF9;
  --md-info-container: #0D47A1;
  --md-on-info: #003172;

  /* Scrim & Inverse */
  --md-scrim: rgba(0, 0, 0, 0.7);
  --md-inverse-surface: #E6E1E5;
  --md-inverse-on-surface: #313033;
  --md-inverse-primary: #2E7D32;

  /* Elevation - tinted surfaces instead of shadows in dark */
  --md-elevation-0: none;
  --md-elevation-1: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 1px 2px rgba(0, 0, 0, 0.6);
  --md-elevation-2: 0px 3px 6px rgba(0, 0, 0, 0.4), 0px 2px 4px rgba(0, 0, 0, 0.5);
  --md-elevation-3: 0px 10px 20px rgba(0, 0, 0, 0.4), 0px 3px 6px rgba(0, 0, 0, 0.35);
  --md-elevation-4: 0px 15px 30px rgba(0, 0, 0, 0.4), 0px 4px 8px rgba(0, 0, 0, 0.3);
}

/* Dark mode: adjust app bar gradient */
html.dark-mode .md-app-bar {
  background: linear-gradient(135deg, #1a3a1c 0%, #2E5731 50%, #3a6b3e 100%);
}

    html.dark-mode .md-custom-label {
        background-color: var(--md-surface-container);
    }

html.dark-mode .md-app-bar-name {
    color: var(--md-on-surface);
}

/* Dark mode: hero gradient */
html.dark-mode .md-hero {
  background: linear-gradient(180deg, rgba(129, 199, 132, 0.08) 0%, var(--md-surface) 100%);
}

/* Dark mode: login gradient */
html.dark-mode .md-login-container {
  background: linear-gradient(180deg, rgba(129, 199, 132, 0.06) 0%, var(--md-surface) 40%);
}

/* Dark mode: login card */
html.dark-mode .md-login-card {
  background-color: var(--md-surface-container);
}

/* Dark mode: login icon */
html.dark-mode .md-login-icon {
  background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
}

/* Dark mode: card icon container */
html.dark-mode .md-card-icon-container {
  background-color: rgba(129, 199, 132, 0.12);
}

/* Dark mode: interactive card */
html.dark-mode .md-card-interactive {
  background-color: var(--md-surface-container);
  border-color: var(--md-outline-variant);
}

/* Dark mode: nav drawer */
html.dark-mode .md-nav-drawer {
  background-color: var(--md-surface-container-low);
  border-color: var(--md-outline-variant);
}

/* Dark mode: content area */
html.dark-mode .md-content-area {
  background-color: var(--md-surface-container-low);
}

/* Dark mode: hero logo invert filter for visibility */
html.dark-mode .md-hero-logo {
  filter: drop-shadow(0 4px 12px rgba(129, 199, 132, 0.3)) brightness(1.1);
}

/* Dark mode: state layer adjustments for light text on dark bg */
html.dark-mode .md-nav-item::after,
html.dark-mode .md-nav-subitem::after {
  background-color: var(--md-on-surface);
}

/* Dark mode: form inputs */
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode input[type="number"],
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .md-text-field input,
html.dark-mode .md-text-field textarea,
html.dark-mode .md-text-field select {
  background-color: var(--md-surface-container-highest);
  border-color: var(--md-outline);
  color: var(--md-on-surface);
}

html.dark-mode .md-text-field input:focus,
html.dark-mode .md-text-field textarea:focus,
html.dark-mode .md-text-field select:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.15);
  background-color: var(--md-surface-container-high);
}

html.dark-mode .md-text-field input::placeholder,
html.dark-mode .md-text-field textarea::placeholder {
  color: var(--md-on-surface-variant);
  opacity: 0.6;
}

/* Dark mode: filled button */
html.dark-mode .md-btn-filled {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
}

html.dark-mode .md-btn-filled:hover:not(:disabled) {
  background-color: var(--md-primary-dark);
}

/* Dark mode: Telerik overrides */
html.dark-mode .k-button-solid {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
}

/* Dark mode: Telerik ComboBox / DropDown inputs */
html.dark-mode .k-combobox,
html.dark-mode .k-dropdownlist,
html.dark-mode .k-textbox,
html.dark-mode .k-input {
  background-color: var(--md-surface-container-highest);
  border-color: var(--md-outline);
  color: var(--md-on-surface);
}

html.dark-mode .k-input-inner,
html.dark-mode .k-input-value-text {
  background-color: transparent;
  color: var(--md-on-surface);
}

html.dark-mode .k-input-inner::placeholder {
  color: var(--md-on-surface-variant);
  opacity: 0.6;
}

html.dark-mode .k-combobox:hover,
html.dark-mode .k-dropdownlist:hover,
html.dark-mode .k-textbox:hover,
html.dark-mode .k-input:hover {
  border-color: var(--md-on-surface-variant);
  background-color: var(--md-surface-container-high);
}

html.dark-mode .k-combobox:focus-within,
html.dark-mode .k-dropdownlist:focus-within,
html.dark-mode .k-textbox:focus-within,
html.dark-mode .k-input:focus-within {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px rgba(129, 199, 132, 0.15);
  background-color: var(--md-surface-container-high);
}

/* Dark mode: Telerik dropdown popup / list */
html.dark-mode .k-popup {
  background-color: var(--md-surface-container-highest) !important;
  border: 1px solid var(--md-outline-variant) !important;
  box-shadow: var(--md-elevation-2) !important;
}

html.dark-mode .k-list {
  background-color: var(--md-surface-container-highest) !important;
}

html.dark-mode .k-list-content {
  background-color: var(--md-surface-container-highest) !important;
}

html.dark-mode .k-list-item,
html.dark-mode .k-list-optionlabel {
  background-color: var(--md-surface-container-highest) !important;
  color: var(--md-on-surface) !important;
}

html.dark-mode .k-list-item:hover,
html.dark-mode .k-list-item.k-hover {
  background-color: var(--md-surface-container-high) !important;
  color: var(--md-on-surface) !important;
}

html.dark-mode .k-list-item.k-selected,
html.dark-mode .k-list-item.k-selected:hover {
  background-color: var(--md-primary-lightest) !important;
  color: var(--md-primary) !important;
}

html.dark-mode .k-list-item.k-focus {
  box-shadow: inset 0 0 0 2px var(--md-primary-lightest) !important;
}

html.dark-mode .k-no-data {
  background-color: var(--md-surface-container-highest) !important;
  color: var(--md-on-surface-variant) !important;
}

html.dark-mode .k-list-filter {
  background-color: var(--md-surface-container-highest) !important;
}

html.dark-mode .k-list-filter .k-textbox,
html.dark-mode .k-list-filter .k-input {
  background-color: var(--md-surface-container) !important;
  color: var(--md-on-surface) !important;
  border-color: var(--md-outline) !important;
}

/* Dark mode: Telerik button icons inside inputs */
html.dark-mode .k-input-button,
html.dark-mode .k-clear-value {
  color: var(--md-on-surface-variant);
}

html.dark-mode .k-input-button:hover,
html.dark-mode .k-clear-value:hover {
  background-color: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

/* Telerik Grid - theme-aware (uses CSS variables that change with dark mode) */
.k-grid {
  background-color: var(--md-surface-container) !important;
  border-color: var(--md-outline-variant) !important;
  color: var(--md-on-surface) !important;
}

.k-grid-header,
.k-grid-header-wrap,
.k-grid-header th,
.k-header {
  background-color: var(--md-surface-container-high) !important;
  border-color: var(--md-outline-variant) !important;
  color: var(--md-on-surface) !important;
}

.k-grid-content,
.k-grid-container {
  background-color: var(--md-surface) !important;
}

.k-grid td,
.k-table-td {
  background-color: var(--md-surface) !important;
  border-color: var(--md-outline-variant) !important;
  color: var(--md-on-surface) !important;
}

.k-grid tr.k-alt td,
.k-table-row.k-alt td,
.k-grid .k-alt .k-table-td,
.k-grid tbody tr:nth-child(even) td,
.k-grid .k-table-body tr:nth-child(even) td {
  background-color: var(--md-surface-container-high) !important;
}

.k-grid tr:hover td,
.k-grid .k-table-row:hover td,
.k-grid .k-table-row.k-hover td {
  background-color: var(--md-surface-container-highest) !important;
}

.k-grid tr.k-selected td,
.k-grid .k-table-row.k-selected td {
  background-color: var(--md-primary-lightest) !important;
  color: var(--md-primary) !important;
}

.k-grid .k-filter-row,
.k-grid .k-filter-row th,
.k-grid .k-filter-row td {
  background-color: var(--md-surface-container-high) !important;
  border-color: var(--md-outline-variant) !important;
}

.k-grid .k-grid-header .k-sort-icon,
.k-grid .k-grid-header .k-i-sort-asc-sm,
.k-grid .k-grid-header .k-i-sort-desc-sm {
  color: var(--md-primary) !important;
}

/* Telerik Pager - theme-aware */
.k-pager,
.k-pager-wrap,
.k-grid-pager {
  background-color: var(--md-surface-container-high) !important;
  border-color: var(--md-outline-variant) !important;
  color: var(--md-on-surface) !important;
}

.k-pager .k-button,
.k-pager-wrap .k-button {
  background-color: transparent !important;
  color: var(--md-on-surface) !important;
  border-color: var(--md-outline-variant) !important;
}

.k-pager .k-button:hover,
.k-pager-wrap .k-button:hover {
  background-color: var(--md-surface-container-highest) !important;
}

.k-pager .k-button.k-selected,
.k-pager-wrap .k-selected {
  background-color: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
}

.k-pager-info,
.k-pager-sizes,
.k-pager-numbers {
  color: var(--md-on-surface) !important;
}

/* Telerik TabStrip - theme-aware */
.k-tabstrip {
  background-color: transparent !important;
}

.k-tabstrip-items,
.k-tabstrip-items-wrapper {
  border-color: var(--md-outline-variant) !important;
}

.k-tabstrip .k-content,
.k-tabstrip-content {
  background-color: var(--md-surface-container) !important;
  border-color: var(--md-outline-variant) !important;
  color: var(--md-on-surface) !important;
}

/* Dark mode: section title border */
html.dark-mode .md-section-title {
  border-bottom-color: var(--md-outline-variant);
}

/* Dark mode: alert adjustments */
html.dark-mode .md-alert-error {
  background-color: var(--md-error-container);
  color: var(--md-on-error-container);
}

html.dark-mode .md-alert-warning {
  background-color: var(--md-warning-container);
  color: var(--md-on-surface);
}

html.dark-mode .md-alert-success {
  background-color: var(--md-success-container);
  color: var(--md-on-surface);
}

html.dark-mode .md-alert-info {
  background-color: var(--md-info-container);
  color: var(--md-on-surface);
}

/* Dark mode: snackbar */
html.dark-mode .md-snackbar {
  background-color: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
}

/* Dark mode: blazor error boundary */
html.dark-mode .blazor-error-boundary {
  background-color: var(--md-error-container);
  color: var(--md-on-error-container);
}

/* Dark mode: checkbox */
html.dark-mode .form-check-input {
  border-color: var(--md-outline);
  background-color: var(--md-surface-container);
}

html.dark-mode .form-check-input:checked {
  background-color: var(--md-primary);
  border-color: var(--md-primary);
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

.md-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  transition: all var(--md-transition-short) var(--md-transition-curve);
}

.md-theme-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background-color: #FFFFFF;
  transition: opacity var(--md-transition-short) var(--md-transition-curve);
  pointer-events: none;
}

.md-theme-toggle:hover::after {
  opacity: 0.12;
}

.md-theme-toggle:active::after {
  opacity: 0.2;
}

.md-theme-toggle .material-icons {
  font-size: 22px;
  transition: transform var(--md-transition-standard) var(--md-transition-curve);
}

.md-theme-toggle:hover .material-icons {
  transform: rotate(30deg);
}

/* Smooth theme transition */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
              color 400ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1),
              fill 400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  .md-app-bar-name {
    font-size: 16px;
  }

    .md-nav-drawer {
        width: 100%;
        max-width: 280px;       
    }

  .md-card {
    padding: var(--md-spacing-md);
  }
}

@media (max-width: 480px) {
  .md-app-bar {
    padding: 0 var(--md-spacing-md);
  }

  .md-app-bar-actions {
    gap: var(--md-spacing-sm);
  }

  .md-btn {
    padding: var(--md-spacing-xs) var(--md-spacing-md);
    font-size: 12px;
  }

  .md-card {
    padding: var(--md-spacing-sm);
  }
}