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

/* Prevent global scaling - only allow container scaling */
html, body {
  transform: none !important;
  zoom: 1 !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  height: 100%;
  overflow: hidden;
}

/* Root element */
#root {
  height: 100%;
  overflow: hidden;
}

/* Ensure header and sidebar remain fixed size */
header, nav, aside {
  transform: none !important;
  zoom: 1 !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
}

/* Main content area scrollable */
main {
  position: relative;
}

/* Ensure proper scaling behavior for content only */
.content-container {
  transform-origin: top left;
}

/* Custom CSS for Settings page */
.max-w-4xl {
    max-width: 79rem;
}

/* Custom CSS for Role Modal */
.max-w-md {
    max-width: 38rem;
}

/* Custom CSS for Login page only */
.login-page .max-w-md {
    max-width: 26rem;
}

/* Custom CSS for Permission elements */
.bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

/* Prevent browser zoom from affecting layout structure */
.layout-container {
  zoom: 1 !important;
  transform: none !important;
}

.layout-container .content-container {
  /* Allow content to scale naturally */
  transform-origin: top left;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Smooth scrolling */
* {
  scroll-behavior: smooth;
}