@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,700;0,800;1,300&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

/**********************************************
 ***********************  UI / Global
 **********************************************/

header.site-header {
  @apply bg-brand-dark
}

header.site-header ul {
  @apply p-0
}

h1.view-title {
  @apply text-brand-bright
}

/*
 ***********************  Buttons & Global Form Elements
*/

button, input[type=button], input[type=submit] {
  @apply cursor-pointer
}

.btn {
  @apply rounded-full px-4 py-2 font-bold no-underline text-center
}

.btn-sm {
  @apply text-sm
}
.btn-xs {
  @apply text-sm px-1 py-1
}
.btn-xl {
  @apply text-xl w-32 h-24 rounded-md
}

.btn-primary {
  @apply bg-accent-bright text-primary-light
}
.btn-primary:hover {
  @apply bg-brand-dark text-primary-light
}

.btn-header {
  @apply px-4 py-2 rounded-full flex items-center justify-between gap-2 text-brand-light
}
.btn-header:hover {
  @apply bg-brand-light text-brand-dark
}
.btn-header.selected {
  @apply bg-brand-light text-brand-dark
}

.btn-outline {
  @apply block border font-bold border-brand-bright text-brand-bright 
}
.btn-outline:active, .btn-outline:hover {
  @apply bg-brand-bright text-primary-light
}

.btn-tablet {
  @apply text-xl w-full h-24 rounded-md border border-brand-bright text-brand-bright transition-all duration-200
}
.btn-tablet:hover {
  @apply bg-neutral-200
}
.btn-tablet.selected {
  @apply bg-green-100 border-green-500 text-green-800
}
.btn-tablet.selected:hover {
  @apply bg-green-200
}

.notes-container {
  @apply transform origin-top transition-all duration-300 ease-out
}

.notes-container.animate-in {
  animation: slide-down 0.3s ease-out;
}

@keyframes slide-down {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.btn-accent {
  @apply font-bold text-brand-bright bg-accent-bright
}
.btn-accent:hover {
  @apply bg-primary-light
}

.btn-light {
  @apply font-bold bg-primary-light text-brand-bright
}
.btn-light:hover {
  @apply bg-accent-bright
}

.btn-square {
  @apply rounded-md
}

a {
  @apply text-link underline hover:text-black
}

/*
 ***********************  Tables
*/
.table-data {
  @apply w-full
}
.table-data thead {
  @apply text-left text-brand-bright
}
.table-data thead th {
  @apply py-1 px-1
}
.table-data tbody tr {
  @apply odd:bg-neutral-50 
}
.table-data tbody tr td {
  @apply py-1 pl-1 pr-8 whitespace-nowrap
}
.table-data a {
  @apply text-link
}

/* ---------- Typography ----------- */

body {
  @apply font-opensans text-base text-black
}

h1, h2, h3, h4, h5, h6, .headline-xs {
  @apply font-montserrat
}

h1 {
  @apply text-4xl leading-8
}

h2 {
  @apply text-3xl
}

h2.devise-header {
  @apply text-primary-light mt-4
}

h3 {
  @apply text-2xl
}

h4 {
  @apply text-xl
}

h5 {
  @apply text-base
}

/* ----------Container----------------------- */

.action-container {
  @apply flex flex-row flex-wrap gap-2 mt-2 sm:m-0 justify-center
}

.action-sub-header {
  @apply flex flex-wrap min-h-14 sm:justify-between sm:flex-row flex-col items-center pb-3
}

.action-header-spacer {
  @apply min-h-10 flex items-center
}

.h-scroll-container {
  @apply overflow-hidden overflow-x-scroll
}

.tab-container {
  @apply flex justify-center md:justify-start
}

.dropdown-menu {
  @apply absolute right-0 min-w-60 bg-primary-light rounded-lg shadow-lg z-50 mt-1 py-4 px-5
}
/* ----------Navigation---------------------- */
.nav-tab {
  @apply block text-brand-light font-bold text-xl no-underline md:px-2
}

.nav-tab.selected {
  @apply rounded-md text-primary-light md:bg-brand-light md:text-brand-dark md:hover:bg-primary-light
}

.nav-tab.deselected {
  @apply hover:text-primary-light
}

.tab {
  @apply no-underline font-normal text-neutral-500 mr-3 min-w-20 text-center sm:text-2xl sm:min-w-32
}
.tab.selected {
  @apply border-b-4 border-brand-dark text-brand-dark
}
/* -----------------UI---------------------- */
select {
  @apply rounded-full max-w-40  
}
.select-container {
  @apply flex flex-col space-y-2
}
select.hide-prompt option[value=""] {
  @apply hidden
}

.status.pending {
  @apply text-yellow-500;
}

.status.active {
  @apply text-green-500;
}

.status.completed {
  @apply text-red-500;
}

.modal-overlay {
  @apply fixed inset-0 z-50 items-center justify-center bg-black bg-opacity-50;
}

.modal-content {
  @apply relative bg-white p-6 rounded-lg shadow-lg max-w-md w-full break-words whitespace-normal;
}

.modal-close-btn {
  @apply absolute top-2 right-4 text-brand-bright hover:text-accent-bright;
}

.status-tag {
  @apply rounded-full text-xs px-3 py-[2px] w-fit
}
.status-tag.error {
  @apply bg-red-100 text-red-800;
}
.status-tag.ok {
  @apply bg-green-100 text-green-800;
}
.status-tag.pending {
  @apply bg-yellow-100 text-yellow-800;
}
.chart {
  @apply border border-neutral-500 rounded-md bg-gradient-to-b from-red-50 to-blue-50 px-2 py-4
}
.chart-legend {
  @apply border border-neutral-500 rounded-md p-2 whitespace-nowrap
}
.chart-checkbox {
  @apply h-5 w-5 cursor-pointer
}
.filter-dropdown {
  @apply border-neutral-300 font-normal text-sm text-neutral-500 py-0 pl-4 pr-8
}

/* ---------- CKEditor Content Styles ---------- */
.ck-content {
  @apply leading-relaxed text-brand-dark;
}

.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6 {
  @apply mt-6 mb-2 font-bold text-brand-bright;
}

.ck-content h1 { @apply text-4xl; }
.ck-content h2 { @apply text-3xl; }
.ck-content h3 { @apply text-2xl; }
.ck-content h4 { @apply text-xl; }
.ck-content h5 { @apply text-lg; }
.ck-content h6 { @apply text-base; }

/* List styles */
.ck-content ul {
  @apply list-disc my-4 pl-8;
}

.ck-content ol {
  @apply list-decimal my-4 pl-8;
}

.ck-content ul ul {
  @apply list-circle my-2;
}

.ck-content ul ul ul {
  @apply list-square;
}

.ck-content ol ol {
  @apply list-decimal my-2;
}

.ck-content ol ol ol {
  @apply list-decimal;
}

.ck-content li {
  @apply my-1;
}

/* Other common elements */
.ck-content p {
  @apply my-4;
}

.ck-content blockquote {
  @apply border-l-4 border-neutral-300 my-4 pl-4 italic;
}

.ck-content table {
  @apply border-collapse w-full my-4;
}

.ck-content table th,
.ck-content table td {
  @apply border border-neutral-300 p-2 text-left;
}

.ck-content table th {
  @apply bg-neutral-50 font-bold;
}

.ck-content pre {
  @apply bg-neutral-50 p-4 rounded overflow-x-auto my-4;
}

/* CKEditor link styles with higher specificity */
.ck-content a,
.ck-content a:link,
.ck-content a:visited {
  @apply text-link underline;
}

.ck-content a:hover,
.ck-content a:focus {
  @apply text-black;
}

/* Override spans inside links that CKEditor creates */
.ck-content a span,
.ck-content a:link span,
.ck-content a:visited span {
  color: inherit !important;
}

.ck-content a:hover span,
.ck-content a:focus span {
  color: inherit !important;
}

.ck-content img {
  @apply max-w-full h-auto my-4;
}

.ck-content .image-style-alignLeft {
  @apply float-left mr-4;
}

.ck-content .image-style-alignRight {
  @apply float-right ml-4;
}

.ck-content .image-style-full {
  @apply w-full;
}