@import 'datatables.net-dt/css/dataTables.dataTables.css';
@import 'select2/dist/css/select2.css';

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

/* Alpine hides these until it has started, so the wrong view does not flash. */
[x-cloak] {
    display: none !important;
}

/* Server-side tables: make DataTables look like the rest of the app. */
div.dt-container {
    @apply text-sm text-gray-700;
}

div.dt-container div.dt-layout-row {
    @apply m-0 flex flex-wrap items-center justify-between gap-4 px-6 py-4;
}

div.dt-container div.dt-layout-row.dt-layout-table {
    @apply block overflow-x-auto p-0;
}

div.dt-container div.dt-layout-cell {
    @apply p-0;
}

div.dt-container .dt-search input.dt-input,
div.dt-container .dt-length select.dt-input {
    @apply m-0 rounded-lg border-gray-300 bg-white py-2 text-sm text-gray-700 shadow-sm focus:border-brand-500 focus:ring-brand-500;
}

div.dt-container .dt-search input.dt-input {
    @apply w-64 max-w-full px-3;
}

div.dt-container .dt-length select.dt-input {
    @apply me-2 ps-3 pe-8;
}

div.dt-container .dt-length label,
div.dt-container .dt-info {
    @apply text-sm text-gray-600;
}

table.dataTable {
    @apply !m-0 !w-full border-collapse;
}

table.dataTable > thead > tr > th {
    @apply border-y border-gray-200 bg-gray-50 px-6 py-3 text-start text-xs font-semibold uppercase tracking-wider text-gray-500;
}

table.dataTable > tbody > tr > td {
    @apply border-t border-gray-100 px-6 py-4 align-middle;
}

table.dataTable > tbody > tr:first-child > td {
    @apply border-t-0;
}

table.dataTable > tbody > tr:hover > td {
    @apply bg-gray-50;
}

table.dataTable > thead > tr > th.dt-right,
table.dataTable > tbody > tr > td.dt-right {
    @apply text-end;
}

/* Sort arrows sit next to the column title, and numbers line up with the other columns. */
table.dataTable thead > tr > th div.dt-column-header {
    @apply flex-row justify-start gap-2;
}

table.dataTable thead > tr > th div.dt-column-header .dt-column-title {
    @apply grow-0;
}

table.dataTable thead > tr > th.dt-type-numeric div.dt-column-header,
table.dataTable thead > tr > th.dt-type-date div.dt-column-header {
    @apply flex-row justify-start;
}

table.dataTable thead > tr > th.dt-right div.dt-column-header {
    @apply flex-row justify-end;
}

table.dataTable th.dt-type-numeric,
table.dataTable td.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-date {
    @apply text-start;
}

div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    @apply border-b border-gray-100;
}

/* The row number column stays narrow. */
table.dataTable > thead > tr > th.dt-number,
table.dataTable > tbody > tr > td.dt-number {
    @apply w-14 pe-0 text-gray-500;
}

/* A month row opened to show its payments. */
table.dataTable > tbody > tr.dt-hasChild > td {
    @apply bg-brand-50/40;
}

table.dataTable > tbody > tr > td.dt-details {
    @apply border-t-0 bg-gray-50 px-6 pb-5 pt-2;
}

table.dataTable td.dt-empty {
    @apply py-10 text-center text-gray-500;
}

div.dt-container .dt-paging nav {
    @apply flex items-center gap-1;
}

div.dt-container .dt-paging .dt-paging-button {
    @apply !m-0 !min-w-[2.25rem] !rounded-lg !border !border-transparent !bg-none !px-3 !py-1.5 text-sm font-medium !text-gray-600;
}

div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
    @apply !border-gray-200 !bg-gray-100 !text-gray-900;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    @apply !border-brand-600 !bg-brand-600 !text-white;
}

div.dt-container .dt-paging .dt-paging-button.disabled {
    @apply !text-gray-300;
}

div.dt-container div.dt-processing {
    @apply rounded-xl bg-white/90 text-sm font-medium text-gray-600 shadow-raised;
}

div.dt-container div.dt-processing > div:last-child > div {
    @apply bg-brand-500;
}

/* Searchable selects: make Select2 look like the other inputs. */
.select2-container--default .select2-selection--single {
    @apply flex h-auto items-center rounded-md border border-gray-300 bg-white py-2 ps-3 pe-10 text-sm text-gray-900 shadow-sm;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    @apply border-brand-500 ring-1 ring-brand-500;
}

.select2-container--default .select2-selection--single.select2-selection--invalid {
    @apply border-red-400;
}

.select2-container--default.select2-container--focus .select2-selection--single.select2-selection--invalid,
.select2-container--default.select2-container--open .select2-selection--single.select2-selection--invalid {
    @apply border-red-500 ring-red-500;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    @apply p-0 leading-5 text-gray-900;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    @apply text-gray-400;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    @apply end-2 top-1/2 h-5 w-5 -translate-y-1/2;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    @apply border-t-gray-500;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    @apply me-1 h-5 text-lg font-normal leading-5 text-gray-400 hover:text-gray-600;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    @apply cursor-not-allowed bg-gray-50 text-gray-500;
}

.select2-dropdown--app {
    @apply overflow-hidden rounded-md border-gray-200 text-sm shadow-lg;
}

.select2-dropdown--app .select2-search--dropdown {
    @apply p-2;
}

.select2-dropdown--app .select2-search--dropdown .select2-search__field {
    @apply rounded-md border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500;
}

.select2-dropdown--app .select2-results__option {
    @apply px-3 py-2 text-gray-700;
}

.select2-container--default .select2-dropdown--app .select2-results__option--highlighted.select2-results__option--selectable {
    @apply bg-brand-50 text-brand-900;
}

.select2-container--default .select2-dropdown--app .select2-results__option--selected {
    @apply bg-gray-100 font-medium text-gray-900;
}

.select2-dropdown--app .select2-results__message {
    @apply text-gray-500;
}