@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark only;
  --background: #0a0a0a;
  --foreground: #ededed;

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-sidebar: 500;
  --z-tooltip: 600;
  --z-portal: 700;
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

* {
  box-sizing: border-box;
}

.sidebar-expanded {
  margin-left: 18rem;
}

.sidebar-collapsed {
  margin-left: 5rem;
}

@media (max-width: 1023px) {
  .sidebar-expanded,
  .sidebar-collapsed {
    margin-left: 0;
  }
}

.sidebar-transition {
  transition: margin-left 300ms ease-in-out;
}

.z-dropdown {
  z-index: var(--z-dropdown);
}

.z-modal {
  z-index: var(--z-modal);
}

.z-sidebar {
  z-index: var(--z-sidebar);
}

.z-tooltip {
  z-index: var(--z-tooltip);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
}

.responsive-modal {
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.responsive-modal-content {
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .responsive-modal {
    width: auto;
    height: auto;
    min-height: 0;
    max-height: 95vh;
  }
}

@media (max-width: 640px) {
  .responsive-modal-content {
    font-size: 16px;
  }
}

.modal-content {
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  margin: auto;
}

#portal-root {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-portal);
}

.upgrade-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: auto;
}

.product-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-portal);
  pointer-events: auto;
  isolation: isolate;
}

.product-modal-content {
  position: relative;
  z-index: var(--z-portal);
  isolation: isolate;
  pointer-events: auto;
}

.import-accounts-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-portal);
  pointer-events: auto;
  isolation: isolate;
  background: rgba(0, 0, 0, 0.7);
}

.import-accounts-modal-content {
  position: relative;
  z-index: var(--z-portal);
  isolation: isolate;
  pointer-events: auto;
}

.user-detail-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  isolation: isolate;
}

.user-detail-modal-content {
  position: relative;
  z-index: calc(var(--z-modal) + 1);
  pointer-events: auto;
  isolation: isolate;
}

.modal-force-top {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-portal);
  isolation: isolate;
}

.modal-portal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-portal);
  pointer-events: none;
  isolation: isolate;
}

[data-width] {
  width: var(--progress-width, 0%);
}

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgb(71 85 105) rgb(30 41 59);
}

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

.scrollbar-thin::-webkit-scrollbar-track {
  background: rgb(30 41 59);
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgb(71 85 105);
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgb(100 116 139);
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
  padding-left: env(safe-area-inset-left);
}

.safe-area-right {
  padding-right: env(safe-area-inset-right);
}