@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');

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

body {
  @apply font-sans text-[18px];
}

@layer utilities {
  .heading-1 {
    @apply text-[56px] font-bold leading-tight;
  }

  .heading-2 {
    @apply text-[48px] font-bold leading-tight;
  }

  .heading-3 {
    @apply text-[40px] font-bold leading-tight;
  }

  .heading-4 {
    @apply text-[32px] font-bold leading-snug;
  }

  .heading-5 {
    @apply text-[24px] font-bold leading-snug;
  }

  .heading-6 {
    @apply text-[20px] font-bold leading-normal;
  }

  .body-1 {
    @apply text-[30px] leading-relaxed;
  }

  .body-2 {
    @apply text-[25px] leading-relaxed;
  }

  .body-3 {
    @apply text-[21px] leading-relaxed;
  }

  .body-4 {
    @apply text-[18px] leading-relaxed;
  }

  .admin-heading {
    @apply heading-4;
  }

  .admin-heading.has-icon,
  .admin-subhead.has-icon {
    @apply flex gap-2 items-center;

    svg {
      @apply text-brand-navy-blue;
    }
  }

  .admin-subhead {
    @apply heading-6;
  }

  .admin-p {
    @apply body-4;
  }

  /* Buttons */
  .btn-toolbar {
    @apply flex flex-col gap-2 md:flex-row md:items-center;
  }

  .btn-primary,
  .btn-secondary,
  .btn-text {
    @apply inline-block text-[16px] leading-[1rem] transition-all duration-300 ease-in-out cursor-pointer;
  }

  .btn-secondary,
  .btn-text {
    @apply font-medium;
  }

  .btn-primary:disabled,
  .btn-secondary:disabled,
  .btn-text:disabled,
  .btn-primary.disabled,
  .btn-secondary.disabled,
  .btn-text.disabled {
    @apply opacity-30 cursor-not-allowed;
  }

  .btn-primary:disabled,
  .btn-secondary:disabled,
  .btn-primary.disabled,
  .btn-secondary.disabled {
    @apply bg-neutral-600;
  }

  .btn-primary:disabled,
  .btn-primary.disabled {
    @apply border-neutral-600 hover:bg-neutral-600 hover:border-neutral-600;
  }

  .btn-secondary:disabled,
  .btn-secondary.disabled {
    @apply border-neutral-600 text-neutral-600 bg-transparent hover:bg-transparent hover:border-neutral-600 hover:text-neutral-600 active:text-neutral-600;
  }

  .btn-text:disabled,
  .btn-text.disabled {
    @apply text-black hover:text-black;
  }

  .btn-primary,
  .btn-secondary {
    @apply bg-black text-center border-[2px] border-brand-navy-blue inline-block py-[10px] px-[16px] rounded-md hover:border-[#0063B2] active:border-[#218FCB];
  }

  .btn-primary {
    @apply bg-brand-navy-blue text-white hover:bg-[#0063B2] active:bg-[#218FCB];
  }

  .btn-secondary {
    @apply bg-transparent text-brand-navy-blue hover:text-[#0063B2] hover:bg-neutral-200 active:bg-neutral-400 active:border-brand-navy-blue active:text-white;
  }

  .btn-text {
    @apply text-brand-navy-blue hover:text-[#0063B2];
  }

  /* Form Controls */
  .form-group {
    @apply mb-4;
  }

  .control-label {
    @apply block text-[18px] font-semibold text-gray-900 mb-2;
  }

  .form-control {
    @apply block w-full px-4 py-3 text-[18px] text-gray-900 border-[2px] border-gray-300 rounded-md placeholder:text-gray-500 focus:outline-none focus:border-brand-navy-blue transition-colors;
  }

  .form-control:disabled {
    @apply opacity-30 cursor-not-allowed;
  }

  select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5rem;
    padding-right: 3rem;
  }

  .form-hint {
    @apply block text-sm text-gray-500 mt-2;
  }

  /* Error State */
  .form-group.error .control-label {
    @apply text-state-error;
  }

  .form-group.error .form-control {
    @apply border-state-error;
  }

  .form-group.error .form-control:focus {
    @apply border-state-error;
  }

  .form-group.error .form-hint {
    @apply text-state-error;
  }

  /* Data Grid / Table */
  .data-grid {
    @apply w-full border-collapse text-left;
  }

  .data-grid thead th {
    @apply font-bold text-black border-b border-black px-4 py-3 whitespace-nowrap;
  }

  .data-grid tbody td {
    @apply border-b border-neutral-200 px-4 py-3;
  }

  .data-grid tbody tr:hover {
    @apply bg-neutral-50;
  }

  .data-grid tbody tr:hover td {
    @apply border-neutral-400;
  }

  .body-gradient {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjM5IiBoZWlnaHQ9IjYwOCIgdmlld0JveD0iMCAwIDYzOSA2MDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8yN18yMCkiPgo8cmVjdCB3aWR0aD0iNjM5IiBoZWlnaHQ9IjYwOCIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgNjM5IDApIiBmaWxsPSIjRjJGM0Y1Ii8+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfMjdfMjApIj4KPHBhdGggZD0iTTc0OS42OTQgNjM1Ljg1M0w3MzIuODMzIDU1MS43MDJMNTkwLjgxNiA0MzcuNTYxTDUxMC4xMjIgNTI5LjAzNEwzOTYuNjg4IDU2OC42MTNMMjcyLjU0NiA1NDQuOTU3TDE0MC4xMzMgNTI5LjcwMUwxMTQuNDc1IDYxOC41MjJDMTU1LjExNCA2MDAuMjMzIDU0MC44NjEgNjIyLjAwMyA1ODQuNzU3IDYxMC4yNDFDNjI4LjY1MyA1OTguNDggNzEzLjAwNSA2MjIuNDE1IDc0OS42OTQgNjM1Ljg1M1oiIGZpbGw9IiNGQ0E4NkUiLz4KPC9nPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMV9mXzI3XzIwKSI+CjxwYXRoIGQ9Ik0zMTYuMjI2IDEzMy4zODNDMzA0LjA5OSAxNTQuNTczIDM3MC4yNTkgMjI1Ljk5OSA0MzYuNjg5IDI0NC4zNjdDNTAzLjEyIDI2Mi43MzUgNTczLjAxNyAxODIuODI0IDU3My4wMTcgMTgyLjgyNEw0OTUuNzI3IDgxLjM4MjhDMzk5LjkyNSA3NC43NjUzIDMyNS40MTggMTE3LjMyMiAzMTYuMjI2IDEzMy4zODNaIiBmaWxsPSIjRjJGM0Y1Ii8+CjwvZz4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjJfZl8yN18yMCkiPgo8cGF0aCBkPSJNNDcwLjk5NCA1MjYuNjM2QzUwMS45OTIgNTA2LjYwOSA3NjEuNDU5IDUxMC42MzcgNzU0LjUgNTAzLjE0QzY2NCA0MDUuNjM5IDYyMi41NzcgMzE5LjcxMSA0NzAuOTk0IDQ1My42MzlDNDQ0LjI2NiA0NzcuMjU0IDM5Mi4xNjUgNjA3LjYyMSAzNzkuMjY5IDYzMC42MjhMMzc2LjQxNiA2MzMuODYzQzM3Ni43MDMgNjM0LjY0NyAzNzcuNjk0IDYzMy40MzkgMzc5LjI2OSA2MzAuNjI4TDQ3MC45OTQgNTI2LjYzNloiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8yN18yMCkiLz4KPC9nPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyM19mXzI3XzIwKSI+CjxwYXRoIGQ9Ik02MjguMDM1IDI2MS4wODNDNTc5LjQ0NSA0MDEuODc5IDU0OS45MjIgNDYyLjE4OSA0NzAuNzIzIDQ2Ni4yMTdMNTM5LjA3NSAzODUuODIyTDU1NS45MjkgMzA1LjEyOEw1MzEuMjY3IDIyNy42ODhMMzEzLjE4NiA4Ny4zNjEzTDEyOC43ODIgMzUuNzMzNUw0NDYuMTc4IDI4LjMyOTNDNTUxLjUyNCAzMS45ODQ2IDY4OS4yMzIgODMuNzU5MSA2MjguMDM1IDI2MS4wODNaIiBmaWxsPSIjOTVDMEVBIi8+CjwvZz4KPHJlY3Qgd2lkdGg9IjYzOSIgaGVpZ2h0PSIyMDIiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDguNzQyMjhlLTA4IDguNzQyMjhlLTA4IDEgNjM5IDApIiBmaWxsPSJ1cmwoI3BhaW50MV9saW5lYXJfMjdfMjApIi8+CjxyZWN0IHdpZHRoPSI2MDgiIGhlaWdodD0iMzA2IiB0cmFuc2Zvcm09Im1hdHJpeCg0LjM3MTE0ZS0wOCAxIDEgLTQuMzcxMTRlLTA4IDAgMCkiIGZpbGw9InVybCgjcGFpbnQyX2xpbmVhcl8yN18yMCkiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9mXzI3XzIwIiB4PSItMTExLjY1OCIgeT0iMjExLjQyOSIgd2lkdGg9IjEwODcuNDgiIGhlaWdodD0iNjUwLjU1NiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMTMuMDY2IiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMjdfMjAiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjFfZl8yN18yMCIgeD0iMjUxLjA3OSIgeT0iMTYuOTg5OSIgd2lkdGg9IjM4NS42MzgiIGhlaWdodD0iMjkzLjgxOSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIzMS44NSIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzI3XzIwIi8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSJmaWx0ZXIyX2ZfMjdfMjAiIHg9IjI3My43MTYiIHk9IjI4Mi4wMjMiIHdpZHRoPSI1ODMuNjIyIiBoZWlnaHQ9IjQ1NC43NzUiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTEuMzUiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8yN18yMCIvPgo8L2ZpbHRlcj4KPGZpbHRlciBpZD0iZmlsdGVyM19mXzI3XzIwIiB4PSItMTkuNzYwNSIgeT0iLTEyMC4yMTMiIHdpZHRoPSI4MTEuNDQiIGhlaWdodD0iNzM0Ljk3MiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI3NC4yNzEyIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMjdfMjAiLz4KPC9maWx0ZXI+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8yN18yMCIgeDE9IjQ4Mi43NzUiIHkxPSI1NjIuOTQiIHgyPSI0MzEuMTQ1IiB5Mj0iNjE2LjY3NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRjJEODgyIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZERjFDNSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMjdfMjAiIHgxPSIzNDMuNjg0IiB5MT0iMCIgeDI9IjM0My42ODQiIHkyPSIyMDIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQyX2xpbmVhcl8yN18yMCIgeDE9IjMyNy4wMTEiIHkxPSIwIiB4Mj0iMzI3LjAxMSIgeTI9IjMwNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9saW5lYXJHcmFkaWVudD4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yN18yMCI+CjxyZWN0IHdpZHRoPSI2MzkiIGhlaWdodD0iNjA4IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgNjM5IDApIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==');
    background-position: bottom right;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* Tabs */
.tabs-wrapper {
  @apply flex mb-8 overflow-y-auto;

  button {
    @apply px-8 py-4 font-bold text-neutral-400 border-b-2 border-neutral-400 whitespace-nowrap;
  }

  .tab-active {
    @apply text-brand-navy-blue border-brand-navy-blue bg-brand-navy-blue/10;
  }
}