/* variables */

:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;

  --v-blue-primary: rgb(25, 118, 210);
  --v-soft-blue-primary: rgb(144, 202, 249);
  --v-blue-info: rgb(2, 136, 209);
  --v-soft-blue-info: rgb(144, 202, 249);
  --v-blue-highlight: rgb(3, 169, 244);
  --v-soft-blue-highlight: rgb(79, 195, 247);
  --v-pale-blue: rgb(237, 246, 249);
  --v-nav-blue: rgb(218, 230, 241);

  --v-grey: rgb(117, 117, 117);
  --v-grey-text-primary: rgb(33, 33, 33);
  --v-grey-text-secondary: rgb(97, 97, 97);
  --v-soft-grey: rgb(207, 216, 220);
  --v-soft-grey-text-primary: rgb(229, 229, 229);
  --v-soft-grey-text-seconday: rgb(189, 189, 189);
  --v-grey-boxshadow: rgb(98, 100, 103);
  --v-soft-grey-boxshadow: rgb(44, 45, 46);
  --v-slate-grey: rgb(75, 85, 99);

  --v-red: rgb(255, 143, 0);
  --v-soft-red: rgb(255, 209, 128);

  --v-green: rgb(56, 142, 60);
  --v-soft-green: rgb(165, 214, 167);

  --v-off-white: rgb(255, 255, 247);

  --v-background-light: rgb(250, 250, 250);
  --v-background-light-mute: rgb(240, 240, 240);
  --v-background-dark: rgb(48, 48, 48);
  --v-background-dark-mute: rgb(58, 58, 58);

  --v-text-light: rgb(33, 33, 33);
  --v-text-dark: rgb(229, 229, 229);

  --v-border-light: rgb(224, 224, 224);
  --v-border-light-mute: rgb(200, 200, 200);
  --v-border-dark: rgb(81, 81, 81);
  --v-border-dark-mute: rgb(105, 105, 105);

  --v-action-light: rgb(30, 136, 229);
  --v-action-dark: rgb(129, 212, 250);

  --v-hover-light: rgb(77, 182, 172);
  --v-hover-dark: rgb(239, 154, 154);

  --v-action: var(--v-action-light);
  --v-background: var(--v-background-light);
  --v-background-mute: var(--v-background-light-mute);
  --v-background-invert: var(--v-background-dark);
  --v-border: var(--v-border-light);
  --v-border-mute: var(--v-border-light-mute);
  --v-boxshadow: var(--v-blue-highlight);
  --v-button: var(--v-grey);
  --v-container: var(--v-pale-blue);
  --v-container-boxshadow: var(--v-grey-boxshadow);
  --v-divider: var(--v-border-light);
  --v-hover: var(--v-hover-light);
  --v-nav: var(--v-nav-blue);
  --v-text-primary: var(--v-grey-text-primary);
  --v-text-secondary: var(--v-grey-text-secondary);
  --v-text-primary-invert: var(--v-soft-grey-text-primary);
  --v-text-secondary-invert: var(--v-soft-grey-text-secondary);
  --v-title-border: var(--v-blue-primary);

  --v-background-mute-blur: 240, 240, 240;

  --section-gap: 160px;
}

:root.dark {
  --v-action: var(--v-action-dark);
  --v-background: var(--v-background-dark);
  --v-background-mute: var(--v-background-dark-mute);
  --v-background-invert: var(--v-background-light);
  --v-border: var(--v-border-dark);
  --v-border-mute: var(--v-border-dark-mute);
  --v-boxshadow: var(--v-soft-blue-highlight);
  --v-button: var(--v-soft-grey);
  --v-container: var(--v-slate-grey);
  --v-container-boxshadow: var(--v-soft-grey-boxshadow);
  --v-divider: var(--v-border-dark);
  --v-hover: var(--v-hover-dark);
  --v-nav: var(--v-slate-grey);
  --v-text-primary: var(--v-soft-grey-text-primary);
  --v-text-secondary: var(--v-soft-grey-text-secondary);
  --v-text-primary-invert: var(--v-grey-text-primary);
  --v-text-secondary-invert: var(--v-grey-text-secondary);
  --v-title-border: var(--v-soft-blue-primary);

  --v-background-mute-blur: 58, 58, 58;
}

html, body {
  height: 100dvh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
}

/* flex */

.flex-vertical {
  display: flex;
  flex-direction: column;
}

.flex-horizontal {
  display: flex;
  flex-direction: row;
}

/* margin */

.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my-1 {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.my-2 {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.my-3 {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.mx-0 {
  margin-right: 0;
  margin-left: 0;
}

.mx-1 {
  margin-right: var(--spacing-xs);
  margin-left: var(--spacing-xs);
}

.mx-2 {
  margin-right: var(--spacing-sm);
  margin-left: var(--spacing-sm);
}

.mx-3 {
  margin-right: var(--spacing-md);
  margin-left: var(--spacing-md);
}

/* padding */

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.py-2 {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.py-3 {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.px-0 {
  padding-right: 0;
  padding-left: 0;
}

.px-1 {
  padding-right: var(--spacing-xs);
  padding-left: var(--spacing-xs);
}

.px-2 {
  padding-right: var(--spacing-sm);
  padding-left: var(--spacing-sm);
}

.px-3 {
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
}

/* grid */


.flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.flex-item {
  flex: 1 1 calc(25% - var(--spacing-sm)); /* 4 Columns by default */
  min-width: 150px; /* Adjusts to screen size */
}

/* Adjust for Tablets: 2 Columns */
@media (max-width: 768px) {
  .flex-item {
    flex: 1 1 calc(50% - var(--spacing-sm)); /* 2 Columns */
  }
}

/* Adjust for Mobile: 1 Column */
@media (max-width: 480px) {
  .flex-item {
    flex: 1 1 100%; /* Full width */
  }
}

/* app */

.app-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#header {
  height: 56px;
  width: 100%;
  flex-shrink: 0;
}

.app-container {
  flex: 1;
  display: flex;
  height: calc(100dvh - 56px);
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

/* button */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  border-radius: var(--spacing-xs);
  transition: box-shadow 0.3s ease-in;
}

.button:hover {
  box-shadow: 0px 4px 4px -4px var(--v-boxshadow);
  cursor: pointer;
}

.button:active {
  box-shadow: 0px 0px 5px 2px var(--v-boxshadow);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.button-solid {
  background-color: var(--v-button);
  border: 2px solid transparent;
  color: var(--v-text-primary-invert);
  transition: background-color 0.3s ease-in, color 0.3s ease-in, border 0.3s ease-in;
}

.button-solid:focus,
.button-solid:hover {
  background-color: inherit;
  color: var(--v-button);
  border: 2px solid var(--v-button);
}

.button-outline {
  background-color: inherit;
  border: 2px solid var(--v-button);
  color: var(--v-button);
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}

.button-outline:focus,
.button-outline:hover {
  background-color: var(--v-button);
  color: var(--v-text-primary-invert);
}

/* sidebar */

.sidebar {
  position: fixed;
  top: 0;
  width: auto;
  min-width: fit-content;
  max-width: 250px;
  height: 100%;
  background: var(--v-background);
  color: var(--v-text-primary);
  padding-top: 60px;
  transition: transform 0.3s ease-in-out;
}

.sidebar a {
  display: block;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--v-text-primary);
  text-decoration: none;
}

.sidebar a:hover {
  background: var(--v-blue-highlight);
}

/* Left Sidebar */
.sidebar-left {
  left: -250px;
}

.sidebar-left.open {
  transform: translateX(250px);
}

/* Right Sidebar */
.sidebar-right {
  right: -250px;
}

.sidebar-right.open {
  transform: translateX(-250px);
}

/* Hamburger Buttons */
.toggle-btn {
  position: fixed;
  top: 15px;
  background: inherit;
  color: var(--v-button);
  border: 2px solid var(--v-button);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  font-size: 14px;
  border-radius: var(--spacing-xs)
}

.toggle-left {
  left: 15px;
}

.toggle-right {
  right: 15px;
}

/* Overlay */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--v-background);
}

.overlay.show {
  display: block;
}

/* container */

.v-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm);
  margin: var(--spacing-xs);
  overflow: hidden;
  height: 100%;
}

/* table */

.table-container {
  flex: 1;
  overflow: auto;
  height: 100%;
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
}

.table-container table th, 
.table-container table td {
  padding: var(--spacing-sm);
  text-align: left;
  position: relative;
}

.table-container table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--v-grey); /* Ensures it's visible */
}

.table-container table tbody {
  width: 100%;
}

.table-container table th, 
.table-container table td {
  padding: var(--spacing-sm);
  text-align: left;
}

.table-container table th {
  color: var(--v-text-primary);
}

.table-container table tr {
  border-bottom: 1px solid var(--v-border);
}

.table-container table tbody tr:hover,
.table-container table tbody tr:focus  {
  background-color: var(--v-soft-grey);
}

.table-container table tr:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile */
  }
}