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

@layer components {
  body.admin--panel { @apply bg-grey-300; }

  section { @apply m-4; }

  button:disabled {
    cursor: initial;
    opacity: .5;
  }

  .modal-content input:disabled { @apply bg-grey-300; }

  .container--title {
    &.main--page {
      @apply flex gap-4 h-24 border-b border-gray-200 shrink-0 items-center;
    }
  }

  .button {
    @apply text-black py-2 px-6 block font-semibold;
    border-radius: 6px;
    cursor: pointer;
  }

  input.border {
    @apply rounded-md;
  }

  .btn--yellow {
    background-color: var(--yellow-400);
  }

  .role-assignments {
    .fields-container:nth-of-type(even) {
      background-color: transparent;
    }
    .fields-container:nth-of-type(odd) {
      background-color: var(--grey-200);
    }
  }
}

.gm-ui-hover-effect {
  display: none !important;
}

img.profile--image {
  width: fit-content;
  block-size: fit-content;
}

.container {
  max-width: 1366px;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "first second";
}

.first-column {
  grid-area: first;
}

.second-column {
  grid-area: second;
}

/* Mobile view: reorder so second column comes first */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* Single column layout on mobile */
    grid-template-areas:
      "second"
      "first";
  }
}