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

/*
 * ========================================
 * TABLE OF CONTENTS
 * ========================================
 *
 * 1. Base Components
 * 2. Buttons
 * 3. Text Styles
 * 4. Form Elements
 * 5. Layout Components
 * 6. Page Headers
 * 7. Navigation
 * 8. Tables
 */

/*
 * ========================================
 * 1. BASE COMPONENTS
 * ========================================
 */

select:not(:disabled),
textarea:not(:disabled) {
  @apply bg-white;
}

select:disabled,
textarea:disabled {
  @apply bg-gray-100 cursor-not-allowed;
}

.main-container {
  @apply container mx-auto p-4 mb-4 flex text-sm max-w-screen-xl;
}

.white-block {
  @apply bg-white shadow-md rounded-lg p-4 border border-gray-100;
}

.blue-block {
  @apply bg-blue-50 shadow-md rounded-lg p-4 border border-gray-100;
}

/* Standard Block Component */
.block-container {
  @apply bg-white rounded-lg border border-gray-200;
}

.block-header {
  @apply border-b border-gray-200 p-4;
}

.block-header .btn {
  @apply -my-1;
}

.block-content {
  @apply p-4;
}

.block-list {
  @apply divide-y divide-gray-200;
}

.block-title {
  @apply font-bold text-xl text-gray-800;
}

.block-subtitle {
  @apply font-medium text-lg text-gray-700;
}

.block-description {
  @apply font-normal text-gray-500 text-xs;
}

.block-split {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.block-grey-box {
  @apply p-4 bg-gray-50 border border-gray-200 rounded-lg;
}

.show-label {
  @apply text-sm font-medium text-gray-600;
}

.show-value {
  @apply text-base font-semibold text-gray-800;
}

.error-list {
  @apply bg-red-50 text-red-800 px-3 py-2 font-medium rounded-md mt-3 border border-red-200;
}

/*
 * ========================================
 * 2. BUTTONS
 * ========================================
 */

.btn-base {
  @apply rounded-md px-3 py-2 font-medium text-sm cursor-pointer block md:inline-block;
}

.btn {
  @apply btn-base bg-gray-100 hover:bg-gray-200 text-gray-800;
}

select.btn {
  @apply py-2;
}

.btn-primary {
  @apply btn-base bg-emerald-700 hover:bg-emerald-800 text-white;
}

.btn-secondary {
  @apply btn-base bg-gray-600 hover:bg-gray-700 text-white;
}

.btn-danger {
  @apply btn-base bg-red-600 hover:bg-red-700 text-white;
}

/*
 * ========================================
 * 3. TEXT STYLES
 * ========================================
 */

.text-currency-gain {
  @apply text-green-600;
}

.text-currency-loss {
  @apply text-red-700 whitespace-nowrap;
}

.text-currency {
  @apply text-emerald-900;
}

.text-link {
  @apply text-indigo-900 hover:text-indigo-700 transition-colors font-medium hover:underline;
}

.text-link-black {
  @apply text-black font-semibold hover:underline;
}

.text-condensed {
  @apply tracking-tighter;
}

/*
 * ========================================
 * 4. FORM ELEMENTS
 * ========================================
 */

.input-base {
  @apply shadow rounded-md border outline-none px-3 py-2 border-gray-400 focus:outline-blue-600;
}

.checkbox {
  @apply accent-white;
}

/*
 * ========================================
 * 5. LAYOUT COMPONENTS
 * ========================================
 */

/* Mobile friendly justify-between block for text and buttons */
.flex-justify {
  @apply flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4;
}

/*
 * ========================================
 * 6. PAGE HEADERS
 * ========================================
 */

/* Index Page Header */
.index-header {
  @apply mb-4;
}

.index-header h1,
.index-header h2 {
  @apply font-semibold text-lg text-gray-800;
}

.index-header p {
  @apply text-gray-500;
}

/* Show Page Header */
.show-header {
  @apply mb-4;
}

.show-header h1,
.show-header h2 {
  @apply font-bold text-xl text-black;
}

.show-header-prefix {
  @apply font-medium text-gray-500 block md:inline;
}

/*
 * ========================================
 * 7. NAVIGATION
 * ========================================
 */

.nav-tab-list {
  @apply flex bg-gray-200 py-2 rounded-full space-x-1 border border-gray-300;
}

.nav-tab {
  @apply px-4 py-2 rounded-full text-gray-600 font-medium hover:bg-white hover:text-indigo-600 transition-colors duration-150 focus:outline-none;
}

.nav-tab-active {
  @apply px-4 py-2 rounded-full bg-white text-indigo-600 font-semibold shadow focus:outline-none;
}

/* Sidebar Navigation */
.sidebar-link {
  @apply flex gap-x-2 px-4 py-3 text-gray-600 hover:bg-gray-100 hover:text-gray-900;
}

.sidebar-link-active {
  @apply flex gap-x-2 px-4 py-3 font-semibold text-emerald-800 bg-green-50;
}

.sidebar-counter {
  @apply ml-auto bg-gray-100 text-gray-400 size-5 leading-5 text-center rounded-full text-xs;
}

.block-container > .block-list:first-child > li:first-of-type > a:is(.sidebar-link, .sidebar-link-active) {
  @apply rounded-t-lg;
}

.block-container > .block-list:last-child > li:last-of-type > a:is(.sidebar-link, .sidebar-link-active) {
  @apply rounded-b-lg;
}

/*
 * ========================================
 * 8. TABLES
 * ========================================
 */

.table-container {
  @apply overflow-x-auto;
}

/* Simple Table */
.table-simple {
  @apply w-full overflow-hidden divide-y divide-gray-200;
}

.table-simple thead {
  @apply text-gray-600 uppercase tracking-wide text-xs;
}

.table-simple th, td {
  @apply px-4 py-2;
}

/* Rounded Table with Styling */
.table-rounded {
  @apply w-full overflow-hidden rounded-lg shadow-sm divide-y divide-stone-200;
}

.table-rounded thead {
  @apply bg-stone-100 text-left text-gray-600 uppercase tracking-wide text-xs;
}

.table-rounded th {
  @apply leading-7 font-medium;
}

.table-rounded th,
.table-rounded td {
  @apply px-4 py-2;
}

.table-rounded tbody {
  @apply divide-y divide-gray-200;
}

.table-rounded tbody tr {
  @apply bg-white;
}

.table-rounded tbody tr:nth-child(even) {
  /*@apply bg-gray-50;*/
}

.table-rounded tbody tr:hover {
  @apply bg-gray-100;
}

.table-rounded th:first-child {
  @apply rounded-tl-lg;
}

.table-rounded th:last-child {
  @apply rounded-tr-lg;
}

.table-rounded tr:last-child td:first-child {
  @apply rounded-bl-lg;
}

.table-rounded tr:last-child td:last-child {
  @apply rounded-br-lg;
}

.compact-table {
  @apply min-w-full divide-y divide-gray-200;
}

.compact-table thead {
  @apply bg-gray-50;
}

.compact-table th {
  @apply px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.compact-table th.text-right,
.compact-table td.text-right {
  @apply !text-right;
}

.compact-table tbody {
  @apply bg-white divide-y divide-gray-200;
}

.compact-table tr {
  @apply hover:bg-gray-50;
}

.compact-table td {
  @apply px-2 py-2 whitespace-nowrap text-xs;
}

/* Table Cell Padding */
.table-cell-padding {
  @apply px-4 py-2;
}


/*
 * ========================================
 * 9. SPECIAL
 * ========================================
 */

.nav-spacing {
  @apply px-4 py-3;
}

.header-link {
  @apply text-white px-3 py-2 hover:underline;
}

.nav-link {
  @apply px-3 py-2 rounded-md text-sm whitespace-nowrap bg-transparent text-gray-700 hover:bg-gray-200 font-medium;
}

.nav-link-active {
  @apply px-3 py-2  rounded-md text-sm whitespace-nowrap bg-gray-200 text-black font-semibold;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */