@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 font-bold no-underline text-center px-4 py-2
}

.btn-sm {
  @apply text-sm
}

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

.btn-header {
  @apply rounded-full flex items-center justify-between gap-2 text-primary-light px-4 py-2 
}
.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-dark text-brand-dark 
}
.btn-outline:active, .btn-outline:hover {
  @apply bg-brand-light text-brand-dark
}

.btn-accent {
  @apply font-bold text-brand-bright bg-accent-light
}
.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 whitespace-nowrap py-1 pl-1 pr-8
}
.table-data a {
  @apply text-brand-bright
}

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

body {
  @apply font-montserrat 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 justify-center gap-2 mt-2 sm:m-0
}

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

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

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

.tab-container {
  @apply flex justify-center border-b-[1px] sm:justify-start
}

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

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

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

.tab {
  @apply no-underline font-normal text-center text-neutral-500 min-w-20 mr-3 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
}
.status.pending {
  @apply text-yellow-500;
}

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

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

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

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

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

.status-tag {
  @apply rounded-full text-xs w-fit px-3 py-[2px]
}
.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;
}
select.filter-dropdown {
  @apply border-neutral-300 font-normal text-sm text-neutral-500 py-0
}

/* ---------- 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;
}