@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 text-sm max-w-screen-lg;
}

/* Standard Block Component */
.block-container {
  @apply bg-white rounded-lg border border-gray-300 md:p-3;
}

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

.block-header > .block-header-row + .block-header-row {
  @apply border-t border-gray-200 -mx-4 px-4 mt-4 pt-4 -mb-4 pb-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-900;
}

.block-card {
  @apply block-container block hover:bg-gray-50 transition-colors;
}

.block-card-title {
  @apply font-semibold text-gray-900;
}

.block-card-description {
  @apply text-xs text-gray-500 mt-1;
}

.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;
}

/* Description list detail row (label-left / value-right grid) */
.detail-row {
  @apply px-4 py-4 items-center sm:grid sm:grid-cols-3 sm:gap-4;
}

/* Value cell in a .detail-row */
.detail-value {
  @apply text-sm text-gray-700 sm:col-span-2;
}

.flash-notice {
  @apply block-container p-4 mb-4 bg-indigo-50 text-indigo-800 font-medium;
}

.flash-alert {
  @apply block-container p-4 mb-4 bg-red-50 text-red-800 font-medium;
}

.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 border rounded-md px-2 sm:px-3 py-1.5 font-medium text-xs sm:text-sm cursor-pointer block md:inline-block whitespace-nowrap;
}

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

.btn-xs {
  @apply !text-xs !px-2 !py-1.5 btn;
}

.detail-row .btn-xs {
  @apply -my-1.5;
}

select.btn {
  @apply py-1.5;
}

.select-filter {
  @apply border border-gray-200 rounded-md px-2 sm:px-3 py-1.5 text-xs sm:text-sm text-gray-700 bg-white hover:border-gray-300 cursor-pointer focus:outline-none focus:ring-1 focus:ring-gray-300;
}

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

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

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

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

.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;
}

/* Responsive block header flex layout */
.block-header-row {
  @apply flex flex-row items-center justify-between gap-3;
}

.block-header-row-stacked {
  @apply flex-col items-start sm:flex-row sm:items-center;
}

.block-header-title {
  @apply flex items-center gap-2 min-w-0;
}

.bg-app-shell {
  background-color: #F1ECE6;
}

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


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

.tab-nav {
  @apply inline-flex flex-row w-auto bg-gray-100 rounded-lg p-0.5 gap-0.5 border border-gray-300;
}

.tab-nav-stacked {
  @apply w-full flex flex-col sm:w-auto sm:inline-flex sm:flex-row;
}

.tab-nav-item {
  @apply px-2 sm:px-3 py-1 text-xs sm:text-sm font-medium rounded-md transition-colors flex-shrink-0 text-gray-600 hover:text-gray-900;
}

.tab-nav-item-active {
  @apply px-2 sm:px-3 py-1 text-xs sm:text-sm font-medium rounded-md transition-colors flex-shrink-0 bg-white text-gray-900 shadow-sm;
}

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

/* Main Data Table */
.table-main {
  @apply w-full;
}

.table-main thead tr {
  @apply border-b border-gray-200;
}

.table-main th {
  @apply py-3 px-4 font-medium text-gray-900 text-sm text-left;
}

.table-main th.text-right { text-align: right; }
.table-main th.text-center { text-align: center; }

.table-main td {
  @apply py-3 px-4 text-sm;
}

.table-main tbody tr {
  @apply border-b border-gray-100 hover:bg-gray-50;
}

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

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

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

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

.nav-link-active {
  @apply flex-1 sm:flex-none text-center sm:text-left px-2 sm:px-3 py-1.5 sm: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.
 *


 */