:root {
  --base-font-size: 10px;
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --success-color: #10b981;
  --success-hover: #059669;
  --dark-bg: #2a3a4b;
  --light-bg: #f8f9fa;
  --card-bg: #ffffff;
  --border-color: #cbd5e0;
  --shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/* Base styles */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: calibri;
  font-size: 0.888rem;
  /* 16px */
  background-color: var(--light-bg);
  color: #333;
  line-height: 1.6;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
a,
div,
button,
input,
textarea {
  font-family: calibri;
}

code,
pre {
  font-family: calibri;
}

/* Relative units for all sizes */
.form-container {
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  margin-left: 18vw;
  /* Sidebar width */
  width: calc(100vw - 18vw);
  max-width: calc(100vw - 18vw);
  overflow-x: hidden;
}

option {
  font-size: 0.858rem;
  /* 13.6px */
}

form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#form {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  /* 16px */
  width: 100%;
  flex-wrap: wrap;
}

.form-wrapper select,
select {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  /* 8px 12px */
  border: 0.0625rem solid var(--border-color);
  /* 1px */
  border-radius: 0.375rem;
  /* 6px */
  font-size: 0.888rem;
  /* 16px */
  margin-bottom: 0.75rem;
  /* 12px */
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-wrapper>label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  /* 4px */
  display: block;
}

.form-wrapper input:focus,
.form-wrapper select:focus,
input:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 0.125rem rgba(37, 99, 235, 0.25);
  /* 2px */
  border-color: var(--primary-color);
}

.contain-select {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  /* 16px */
}

.contain-select>label {
  margin-bottom: 0.25rem;
  /* 4px */
  font-weight: 600;
}

.contain-select input[type="date"],
.contain-select input[type="month"],
.contain-select select {
  max-width: 10.5rem;
  /* 168px */
  height: 2.5rem;
  /* 40px */
}

select {
  background-color: #f0f0f0;
  color: #333;
  padding: 0.3125rem;
  /* 5px */
  border-radius: 0.25rem;
  /* 4px */
}

select option:hover {
  background-color: #2b3d50;
  color: #fff;
}

.submit-btn {
  min-width: 3.125rem;
  /* 50px */
  max-width: 5.625rem;
  /* 90px */
  padding: 0.15rem;
  /* 2.4px */
  font-size: 0.888rem;
  /* 14.4px */
  background-color: var(--primary-color);
  color: white;
  border: 2px solid var(--primary-color);
  border-radius: 0.375rem;
  /* 6px */
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  box-shadow: var(--shadow);
}

.submit-btn:hover,
.submit-btn:active {
  background-color: white;
  color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0 0.25rem 0.5rem rgba(37, 99, 235, 0.3);
  /* 4px 8px */
  transform: translateY(-2px);
}

/* Chart wrapper */
.chart-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  /* 32px */
  flex-wrap: wrap;
  width: 100%;
}

.chart-select {
  display: block;
  margin-bottom: 0.625rem;
  /* 10px */
  flex: 1;
  min-width: 12rem;
  /* 192px */
  max-width: 15rem;
  /* 240px */
}

#chartContainerDaily,
#chartContainerSunday,
#chartContainerGroup,
#chartmain,
#chartCanvas,
#tree-container,
#peak-container,
#energy-container,
#oneday-container,
#shift-container,
#martixchart,
#sankeyChart,
#sunChart,
#weeklyHoursChart {
  min-height: 36rem;
  /* 640px */
}



/* Add more flexible layouts */
.chart-wrapper {
  width: 100% !important;
  overflow: visible !important;
  position: relative !important;
}

/* Printing styles */
@media print {
  body {
    background-color: white;
    color: black;
    font-size: 0.888rem;
    /* 12pt */
  }

  #chartContainerDaily,
  #chartContainerSunday,
  #chartContainerGroup,
  #chartmain,
  #chartCanvas,
  #tree-container,
  #peak-container,
  #energy-container,
  #oneday-container,
  #shift-container {
    height: auto;
    page-break-inside: avoid;
  }
}

#sankeyChart,
#sunChart {
  width: 100% !important;
  height: 600px !important;
  min-height: 500px !important;
  max-width: none !important;
  position: relative !important;
  display: block !important;
}

@media (max-width: 48rem) {

  /* 768px */
  #sunChart,
  #sankeyChart {
    height: 31.25rem !important;
    /* 500px */
    min-height: 25rem !important;
    /* 400px */
  }
}

@media (max-width: 30rem) {

  /* 480px */
  #sunChart,
  #sankeyChart {
    height: 25rem !important;
    /* 400px */
    min-height: 21.875rem !important;
    /* 350px */
  }
}

/* Responsive Design - Small Devices (Mobile) */
@media (max-width: 576px) {
  .form-container {
    margin-left: 0;
    width: 100vw;
    padding: 0.5rem;
    /* 8px */
  }

  .contain-select {
    flex-direction: column;
    gap: 0.5rem;
    /* 8px */
  }

  .submit-btn {
    width: 100%;
    padding: 1.2rem;
    /* 19.2px */
    font-size: 0.888rem;
    /* 20.8px */
  }

  .chart-wrapper {
    flex-direction: column;
    gap: 1rem;
    /* 16px */
  }

  #chartContainerDaily,
  #chartContainerSunday,
  #chartContainerGroup,
  #chartmain,
  #chartCanvas,
  #tree-container,
  #peak-container,
  #energy-container,
  #oneday-container,
  #shift-container {
    height: 16rem;
    /* 256px */
  }
}

/* Medium Devices (Tablets) */
@media (min-width: 576px) and (max-width: 768px) {
  .form-container {
    margin-left: 0;
    width: 100vw;
    padding: 0.75rem;
    /* 12px */
  }

  .contain-select {
    gap: 0.75rem;
    /* 12px */
  }

  .submit-btn {
    padding: 1rem 2rem;
    /* 16px 32px */
    font-size: 0.888rem;
    /* 20px */
  }

  .chart-wrapper {
    flex-direction: column;
    gap: 1.5rem;
    /* 24px */
  }

  #chartContainerDaily,
  #chartContainerSunday,
  #chartContainerGroup,
  #chartmain,
  #chartCanvas,
  #tree-container,
  #peak-container,
  #energy-container,
  #oneday-container,
  #shift-container {
    height: 20rem;
    /* 320px */
  }
}

/* Larger Devices */
@media (min-width: 769px) {
  .form-container {
    margin-left: 15vw;
    width: calc(100vw - 15vw);
  }

  .chart-wrapper {
    gap: 1.5rem;
    /* 24px */
  }

  .chart-select {
    min-width: 11rem;
    /* 176px */
    max-width: 13rem;
    /* 208px */
  }

  #chartContainerDaily,
  #chartContainerSunday,
  #chartContainerGroup,
  #chartmain,
  #chartCanvas,
  #tree-container,
  #peak-container,
  #energy-container,
  #oneday-container,
  #shift-container {
    height: 22rem;
    /* 352px */
  }
}

/* Extra Large Screens */
@media (min-width: 1200px) {
  .form-container {
    margin-left: 18vw;
    width: calc(100vw - 18vw);
  }

  .chart-wrapper {
    gap: 2rem;
    /* 32px */
  }

  .chart-select {
    min-width: 12rem;
    /* 192px */
    max-width: 14rem;
    /* 224px */
  }

  #chartContainerDaily,
  #chartContainerSunday,
  #chartContainerGroup,
  #chartmain,
  #chartCanvas,
  #tree-container,
  #peak-container,
  #energy-container,
  #oneday-container,
  #shift-container {
    height: 28rem;
    /* 448px */
  }
}

/* Error Toast */
#errorContainer {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: none;
  /* hidden by default */
  max-width: calc(100% - 32px);
  min-width: 240px;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  text-align: center;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.95);
  /* Bootstrap danger color, semi-opaque */
  pointer-events: auto;
  transition: transform 220ms ease, opacity 220ms ease;
  opacity: 0;
  transform-origin: center top;
  will-change: transform, opacity;
}

/* visible state */
#errorContainer.show {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* hidden state (slide up) */
#errorContainer.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}

/* Dark Mode Styles */
body.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode .form-container {
  background-color: #1a1a1a;
}

body.dark-mode .chart-wrapper {
  background-color: #1a1a1a;
}

body.dark-mode .chart-select {
  background-color: #2d2d2d;
  border-color: #4a5568;
  color: #e0e0e0;
}

body.dark-mode #chartContainerDaily,
body.dark-mode #chartContainerSunday,
body.dark-mode #chartContainerGroup,
body.dark-mode #chartmain,
body.dark-mode #chartCanvas,
body.dark-mode #tree-container,
body.dark-mode #peak-container,
body.dark-mode #energy-container,
body.dark-mode #oneday-container,
body.dark-mode #shift-container,
body.dark-mode #sankeyChart,
body.dark-mode #sunChart,
body.dark-mode #weeklyHoursChart {
  background-color: #2d2d2d;
  border-color: #4a5568;
}

body.dark-mode option {
  background-color: #3a3a3a;
  color: #e0e0e0;
}

body.dark-mode select {
  background-color: #3a3a3a;
  border-color: #4a5568;
  color: #e0e0e0;
}

body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
  accent-color: #68d391;
}

body.dark-mode label {
  color: #e0e0e0;
}

body.dark-mode .submit-btn {
  background-color: #4a5568;
  color: #e0e0e0;
  border-color: #4a5568;
}

body.dark-mode .submit-btn:hover {
  background-color: #2d3748;
}

body.dark-mode .form-wrapper input,
body.dark-mode .form-wrapper select,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #3a3a3a;
  border-color: #4a5568;
  color: #e0e0e0;
}

body.dark-mode .form-wrapper input:focus,
body.dark-mode .form-wrapper select:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {

  box-shadow: 0 0 0 3px rgba(104, 211, 145, 0.1);
}

body.dark-mode #errorContainer {
  background-color: rgba(45, 45, 45, 0.95);
  color: #e0e0e0;
}

/* Additional dark mode styles for buttons and cards */
body.dark-mode .btn,
body.dark-mode .actionBtn,
body.dark-mode button,
body.dark-mode .submit-btn,
body.dark-mode .bg-indigo-600,
body.dark-mode .bg-green-600,
body.dark-mode .bg-blue-600,
body.dark-mode .bg-red-600 {
  background-color: #4a5568 !important;
  color: #e0e0e0 !important;
  border-color: #4a5568 !important;
}

body.dark-mode .btn:hover,
body.dark-mode .actionBtn:hover,
body.dark-mode button:hover,
body.dark-mode .submit-btn:hover {
  background-color: #2d3748 !important;
}

body.dark-mode .bg-white {
  background-color: #2d2d2d !important;
}

body.dark-mode .bg-gray-50,
body.dark-mode .bg-blue-50,
body.dark-mode .bg-green-50,
body.dark-mode .bg-yellow-50 {
  background-color: #3a3a3a !important;
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-500 {
  color: #b0b0b0 !important;
}

body.dark-mode .text-black,
body.dark-mode .text-blue-600,
body.dark-mode .text-green-600 {
  color: #e0e0e0 !important;
}

body.dark-mode .border-gray-300,
body.dark-mode .border-gray-200 {
  border-color: #4a5568 !important;
}

body.dark-mode i {
  background-color: transparent !important;
}

/* Global Button Styles - Blue/White Theme */
.btn-primary,
button[type="submit"]:not(.btn-success),
button[type="button"]:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-light):not(.btn-icon-only):not(#exportExcelButton):not(#closeModalBtn),
input[type="submit"] {
  background-color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  color: white !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-primary:active,
button[type="submit"]:not(.btn-success):hover,
button[type="submit"]:not(.btn-success):active,
button[type="button"]:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-light):not(.btn-icon-only):not(#exportExcelButton):not(#closeModalBtn):hover,
button[type="button"]:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-light):not(.btn-icon-only):not(#exportExcelButton):not(#closeModalBtn):active,
input[type="submit"]:hover,
input[type="submit"]:active {
  background-color: white !important;
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* Green buttons for success actions (like export) */
.btn-success,
#exportExcelButton {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: white !important;
}

.btn-success:hover,
#exportExcelButton:hover {
  background-color: var(--success-hover) !important;
  border-color: var(--success-hover) !important;
}

/* Icon colors */
/* .text-blue-500,
.text-blue-600 {
  color: var(--primary-color) !important;
} */

/* Workflow button styles */
/* .btn-light {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

.btn-light:hover {
  background-color: #e2e6ea !important;
  border-color: #dae0e5 !important;
}

/* Override the global button primary styles for specific workflow buttons */
/* #addWorkflowBtn,
#updateTableBtn,
#editWorkflowBtn {
  background-color: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  color: #212529 !important;
} */

/* #addWorkflowBtn:hover,
#updateTableBtn:hover,
#editWorkflowBtn:hover {
  background-color: #e2e6ea !important;
  border-color: #dae0e5 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
} */



/* Focus states */
/* .focus\:ring-blue-500:focus,
.focus\:border-blue-500:focus {
  --tw-ring-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
} */

/* Hover states for borders */
/* Air Datepicker Material UI Theme */
.air-datepicker {
  --adp-border-radius: 12px;
  --adp-accent-color: #2563eb;
  --adp-background-color: #ffffff;
  --adp-cell-background-color-selected: #2563eb;
  --adp-cell-background-color-selected-hover: #1d4ed8;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  z-index: 9999 !important;
}

.air-datepicker-cell.-selected- {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  font-weight: bold;
}

.air-datepicker-cell.-current- {
  color: #2563eb;
  font-weight: bold;
}

.air-datepicker-cell.-year-.-selected-,
.air-datepicker-cell.-month-.-selected- {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}

/* Fix for overlapping with search or other inputs */
input[type="date"],
input[type="month"] {
  position: relative;
}

/* Hide native browser date picker icons */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-inner-spin-button {
  display: none;
}