/* styles.css */

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f3f4f6; /* Tailwind's bg-gray-100 */
  color: #1f2937; /* Tailwind's text-gray-900 */
  transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode */
body.dark {
  background-color: #111827; /* Tailwind's dark:bg-gray-900 */
  color: #f3f4f6; /* Tailwind's dark:text-gray-100 */
}

/* Layout */
#container {
  display: flex;
  height: 100vh; /* Tailwind's h-screen */
  position: relative;
}

#sidebar {
  width: 100%; /* Tailwind's w-full */
  background-color: #ffffff; /* Tailwind's bg-white */
  padding: 1rem; /* Tailwind's p-4 */
  overflow-y: auto; /* Tailwind's overflow-y-auto */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tailwind's shadow-lg */
  position: absolute; /* Tailwind's absolute */
  z-index: 10; /* Tailwind's z-10 */
  transition: transform 0.3s, width 0.3s; /* From existing styles.css */
  flex-shrink: 0; /* Prevent squeezing */
}

#sidebar.collapsed {
  transform: translateX(-100%) !important; /* Existing styles.css */
  width: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 640px) {
  #sidebar {
    position: static; /* Tailwind's sm:static */
    width: 20rem; /* Tailwind's sm:w-80 */
  }
  #sidebar:not(.collapsed) {
    width: 20rem; /* Existing styles.css */
  }
}

#visualization {
  flex: 1; /* Tailwind's flex-1 */
  position: relative; /* Tailwind's relative */
  transition: width 0.3s; /* Existing styles.css */
}

#sidebar.collapsed ~ #visualization {
  width: 100% !important; /* Existing styles.css */
}

@media (min-width: 640px) {
  #sidebar:not(.collapsed) ~ #visualization {
    width: calc(100% - 20rem) !important; /* Existing styles.css */
  }
}

/* Spinner */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #0288d1; /* Tailwind's bg-primary */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.spinner.hidden {
  display: none;
}

/* Typography */
h2 {
  font-size: 1.25rem; /* Tailwind's text-xl */
  font-weight: 600; /* Tailwind's font-semibold */
}

label {
  display: block;
  font-weight: 600; /* Tailwind's font-semibold */
}

.text-sm {
  font-size: 0.875rem; /* Tailwind's text-sm */
}





/* Sidebar Toggle Buttons */
.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background-color: #0288d1;
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
    position: absolute;
    z-index: 20;
}

.sidebar-toggle:hover {
    background-color: #0277bd;
}

#mobileMenuBtn {
    font-size: 1.5rem;
    top: 1rem;
    left: 1rem;
    display: flex;
}

#sidebarToggleBtn {
    top: 1rem;
    left: 1rem;
    display: none;
}

@media (min-width: 640px) {
    #mobileMenuBtn {
        display: none;
    }
    #sidebarToggleBtn {
        display: flex;
    }
}

/* Sidebar */
#sidebar {
    width: 100%;
    background-color: #ffffff;
    padding: 1rem;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 10;
    transition: transform 0.3s, width 0.3s;
    flex-shrink: 0;
}

#sidebar.collapsed {
    transform: translateX(-100%) !important;
    width: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 640px) {
    #sidebar {
        position: static;
        width: 20rem;
    }
    #sidebar:not(.collapsed) {
        width: 20rem;
    }
}

/* Ensure visualization canvas adjusts */
#visualization {
    flex: 1;
    position: relative;
    transition: width 0.3s;
}

#sidebar.collapsed ~ #visualization {
    width: 100% !important;
}

@media (min-width: 640px) {
    #sidebar:not(.collapsed) ~ #visualization {
        width: calc(100% - 20rem) !important;
    }
}


/* Buttons */
button, select, input[type="checkbox"] + label {
  padding: 0.5rem 1rem; /* Tailwind's p-2 px-4 */
  border: 1px solid #d1d5db; /* Tailwind's border-gray-300 */
  border-radius: 0.25rem; /* Tailwind's rounded */
  background-color: #ffffff; /* Tailwind's bg-white */
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover, select:hover {
  background-color: #f3f4f6; /* Tailwind's hover:bg-gray-100 */
}

#mobileMenuBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* Tailwind's text-2xl */
  background-color: #0288d1; /* Tailwind's bg-primary */
  color: white;
  padding: 0.5rem; /* Tailwind's p-2 */
  border-radius: 0.25rem; /* Tailwind's rounded */
}

@media (min-width: 640px) {
  #mobileMenuBtn {
    display: none; /* Tailwind's sm:hidden */
  }
}

#generateBtn, #refreshButton, #themeToggle, #saveBtn, #loadBtn, #exportJsonBtn, #exportObjBtn, #screenshotBtn, #topViewBtn, #frontViewBtn, #sideViewBtn {
  background-color: #0288d1; /* Tailwind's bg-primary */
  color: white;
  width: 100%; /* Tailwind's w-full for most buttons */
  margin-top: 1rem; /* Tailwind's mt-4 */
}

#generateBtn:hover, #saveBtn:hover, #loadBtn:hover, #exportJsonBtn:hover, #exportObjBtn:hover, #screenshotBtn:hover, #topViewBtn:hover, #frontViewBtn:hover, #sideViewBtn:hover {
  background-color: #0277bd; /* Tailwind's hover:bg-primaryHover */
}

#refreshButton {
  background-color: #10b981; /* Tailwind's bg-green-500 */
  margin-top: 0.5rem; /* Tailwind's mt-2 */
}

#refreshButton:hover {
  background-color: #059669; /* Tailwind's hover:bg-green-600 */
}

#themeToggle {
  background-color: #e5e7eb; /* Tailwind's bg-gray-200 */
  width: auto;
  margin-top: 0;
}

body.dark #themeToggle {
  background-color: #4b5563; /* Tailwind's dark:bg-gray-700 */
}

/* Selects and Inputs */
select, input[type="checkbox"] {
  width: 100%; /* Tailwind's w-full */
  margin-top: 0.25rem; /* Tailwind's mt-1 */
}

body.dark select {
  background-color: #4b5563; /* Tailwind's dark:bg-gray-700 */
  color: #f3f4f6;
  border-color: #6b7280; /* Tailwind's dark:border-gray-600 */
}

/* Tabs */
.tab {
  flex: 1; /* Tailwind's flex-1 */
  padding: 0.5rem 1rem; /* Tailwind's py-2 px-4 */
  text-align: center; /* Tailwind's text-center */
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab.active {
  background-color: #0288d1 !important; /* Tailwind's bg-primary (adjusted from styles.css) */
  color: white !important;
}

.tab-content {
  display: none; /* Tailwind's hidden */
}

.tab-content:not(.hidden) {
  display: block;
}

/* Messages */
#invalidMessage {
  color: #ef4444; /* Tailwind's text-red-500 */
  font-weight: bold; /* Tailwind's font-bold */
  margin-top: 0.5rem; /* Tailwind's mt-2 */
  display: none; /* Tailwind's hidden */
}

#invalidMessage:not(.hidden) {
  display: block;
}

#planMessage {
  color: #4b5563; /* Tailwind's text-gray-600 */
  margin-top: 0.5rem; /* Tailwind's mt-2 */
}

body.dark #planMessage {
  color: #9ca3af; /* Tailwind's dark:text-gray-400 */
}

/* Flex and Spacing */
.flex {
  display: flex;
}

.space-x-2 > * + * {
  margin-left: 0.5rem; /* Tailwind's space-x-2 */
}

.mb-4 {
  margin-bottom: 1rem; /* Tailwind's mb-4 */
}

.mt-4 {
  margin-top: 1rem; /* Tailwind's mt-4 */
}

.border-b {
  border-bottom: 1px solid #d1d5db; /* Tailwind's border-gray-300 */
}

/* Miscellaneous */
#loadFileInput {
  display: none; /* Tailwind's hidden */
}

/* Responsive Sidebar */
@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    height: 100%;
    z-index: 10;
    transform: translateX(0);
    transition: transform 0.3s, width 0.3s; /* Existing styles.css */
  }
}