:root {
  --mobile-header-height: 74px;
}

:root {
  /* Primary Colors */
  --color-primary: rgba(0, 179, 167, 1);
  --color-primary-light: rgba(31, 191, 175, 1);
  --color-primary-dark: rgba(0, 140, 136, 1);
  --color-red: rgba(194, 31, 42, 1);
  --color-red-dark: rgba(194, 31, 42, 1);
  --color-green: #62c751;
  --color-info: #00bcd4;
  --color-warning: #ff9800;

  /* Typography */
  --color-text: #292d32;
  --color-text-secondary: #555555;
  --color-text-disabled: rgba(0, 0, 0, 0.25);

  /* Backgrounds and Surfaces */
  --color-background: #f7f7f7;
  --color-surface: rgba(255, 255, 255, 1);
  --color-surface-light: #FAFAFA;

  /* Borders and Muted Elements */
  --color-border: rgba(217, 217, 217, 1);
  --color-muted: rgba(245, 245, 245, 1);

  /* Shadows */
  --shadow: 0 20px 40px -10px rgba(29, 33, 94, 0.17);

  --color-status-cyan: #00b3a7;
  --color-status-yellow: #faad14;
  --color-status-lightGreen: #52c41a;
  --color-status-green: #35ac19;
  --color-status-blue: #1890ff;
  --color-status-red: #c21f2a;
  --color-status-disabled: #bfbfbf;

  /* Primary Colors */
  --color-primary-rgb: 0, 179, 167;
  --color-primary-light-rgb: 31, 191, 175;
  --color-primary-dark-rgb: 0, 140, 136;

  --color-red-rgb: 194, 31, 42;
  --color-red-dark-rgb: 194, 31, 42;

  --color-green-rgb: 98, 199, 81; /* from #62c751 */
  --color-info-rgb: 0, 188, 212; /* from #00bcd4 */
  --color-warning-rgb: 255, 152, 0; /* from #ff9800 */

  /* Typography */
  --color-text-rgb: 41, 45, 50; /* from #292d32 */
  --color-text-secondary-rgb: 85, 85, 85; /* from #555555 */
  --color-text-disabled-rgb: 0, 0, 0; /* opacity handled separately */

  /* Backgrounds and Surfaces */
  --color-background-rgb: 247, 247, 247; /* from #f7f7f7 */
  --color-surface-rgb: 255, 255, 255; /* from rgba(255,255,255,1) */
  --color-surface-light-rgb: 250, 250, 250; /* from #FAFAFA */

  /* Borders and Muted Elements */
  --color-border-rgb: 217, 217, 217; /* from rgba(217,217,217,1) */
  --color-muted-rgb: 245, 245, 245; /* from rgba(245,245,245,1) */

  /* Status colors */
  --color-status-cyan-rgb: 0, 179, 167;
  --color-status-yellow-rgb: 250, 173, 20; /* from #faad14 */
  --color-status-lightGreen-rgb: 82, 196, 26; /* from #52c41a */
  --color-status-green-rgb: 53, 172, 25; /* from #35ac19 */
  --color-status-blue-rgb: 24, 144, 255; /* from #1890ff */
  --color-status-red-rgb: 194, 31, 42; /* from #c21f2a */
  --color-status-disabled-rgb: 191, 191, 191; /* from #bfbfbf */
}

.container {
  padding: 0;
}

html {
  font-size: 16px;
  font-family: 'Roboto', 'Inter', sans-serif;
}

html,
body {
  width: 100%;
  background: rgba(250, 250, 250, 1);
}

html,
body,
#root {
  height: 100%;
  overflow-y: hidden;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body {
  overscroll-behavior: none;
  touch-action: none;
}

@media (min-width: 768px) {
  .mobile-only { display: none !important; }
  .desktop-only { display: block; }
}

@media (max-width: 768px) {
  .mobile-only { display: block; }
  .desktop-only { display: none !important; }
}

a, a:visited, a:focus {
  color: inherit;
}

a {
  color: var(--color-primary);
}

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

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  border: 1px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-clip: padding-box;
  cursor: pointer;
}

.scrollable {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

@keyframes fade-in-thumb {
  from { opacity: 0; }
  to   { opacity: 1; }
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:active {
  animation: fade-in-thumb 0.3s forwards;
}