@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
 
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
 
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
 
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
 
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
 
    --radius: 0.5rem;
  }
 
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
 
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
 
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
 
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
 
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
 
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
 
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
 
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
 
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }

  /* Grid container to split the page into two columns */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns of equal width */
  height: 100%;
}

/* Left column with light gray background and placeholder for image */
.column-a {
  background-color: #f0f0f0; /* Light gray background */
  /* Placeholder for background image */
  background: linear-gradient(rgba(106, 93, 183, 0.8), rgba(106, 93, 183, 0.8));
  background-size: cover;
  background-position: center;
}

/* Right column */
.column-b {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Login panel centered using Flexbox */
.login-panel {
  width: 90%;
  max-width: 500px;
  height: auto;
  background-color: #ffffff;
  border: 1px solid #9a32e8;
  padding: 40px;
  /* Center content within the panel */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
}

/* Styling for input fields */
.login-panel input {
  margin-bottom: 20px;
  padding: 10px;
  font-size: 16px;
}

/* Styling for the login button */
.login-panel button {
  font-size: 16px;
  cursor: pointer;
  padding: 16px 20px;
  background-image: linear-gradient(#a08dff, #685bb5);
  text-shadow: #685da0 0px 0px 2px;
  color: white;
  border: none;
  border-radius: 30px;
  margin-top: 1rem;
}

.login-panel button:hover {
  background-image: linear-gradient(#685bb5, #685bb5);
}

/* Optional: Center the panel content horizontally */
.login-panel input,
.login-panel button {
  width: 100%;
}

.textbox, input {
  /* background-color: rgb(246, 243, 255); */
  background-color: rgb(249, 247, 255);
  border: 1px solid rgb(209, 198, 247);
  border-radius: 5px;
  padding: 8px;
  font-size: 13px;
}

.textbox:active,
.textbox:focus {
  background-color: white;
}

.textbox::placeholder {
  font-family: 'Open Sans';
  color: rgb(121, 121, 121);
  font-size: 0.8rem;
}

.logo-medium {
  width: 50%;
  flex-direction: column;
  align-self: center;
  padding: 2rem 0 3rem 0;
}

.bg-primary {
  background-color: black !important;
}

table {
  margin-top: 1rem;
  border-collapse: collapse !important;
  width: 100%;
}

thead {
  font-weight: bold !important;
}

th {
  border: 1px solid #ddd;
  padding: 8px;
  background-color: #f5f5f5;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
}

}