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

@layer utilities {
    .page {
        @apply t-p-4;
    }

    .page-title {
        @apply t-mb-2 t-inline-block t-text-[1.6rem] t-text-sky t-font-bold t-tracking-wide;
    }

    .link {
        @apply t-font-bold t-text-sky hover:t-text-sky-light;
    }

    .button-container {
        @apply t-flex t-justify-center t-mt-4;
    }

    .button {
        @apply t-font-bold t-px-4 t-py-2 t-rounded-lg;
    }

    .button-gray {
        @apply button;
        @apply t-text-white t-bg-gray hover:t-bg-gray-light;
    }

    .button-sky {
        @apply button;
        @apply t-text-white t-bg-sky hover:t-bg-sky-light;
    }

    .button-green {
        @apply button;
        @apply t-text-white t-bg-green hover:t-bg-green-light;
    }

    .button-red {
        @apply button;
        @apply t-text-white t-bg-red hover:t-bg-red-light;
    }

    .label {
        @apply t-block t-text-gray t-text-sm t-font-medium t-mb-2;
    }

    .label-dark {
        @apply label;
        @apply t-text-gray-dark;
    }

    .label-darker {
        @apply label;
        @apply t-text-gray-darker;
    }

    .icon-button {
        @apply button;
        @apply t-flex t-items-center t-justify-center t-gap-2;
    }

    .icon-button-gray {
        @apply icon-button;
        @apply t-text-white t-bg-gray hover:t-bg-gray-light;
    }

    .icon-button-sky {
        @apply icon-button;
        @apply t-text-white t-bg-sky hover:t-bg-sky-light;
    }

    .icon-button-green {
        @apply icon-button;
        @apply t-text-white t-bg-green hover:t-bg-green-light;
    }

    .icon-button-red {
        @apply icon-button;
        @apply t-text-white t-bg-red hover:t-bg-red-light;
    }

    .icon-button-icon {
        @apply t-w-6 t-h-6;
    }

    .datatable-wrapper {
        @apply t-overflow-x-auto t-w-full t-border t-border-solid t-border-gray-light t-rounded-lg;
    }

    .section-title-base {
        @apply t-text-[1.2rem] t-font-bold t-text-gray-darker t-mb-2;
    }

    .section-info-base {
        @apply t-text-sm t-mb-4 t-leading-relaxed;
    }

    .section {
        @apply t-border t-border-solid t-border-gray-light t-p-4 t-mb-6 t-rounded-lg;

        .section-title {
            @apply section-title-base;
            @apply t-text-gray-darker t-mb-2;
        }

        .section-info {
            @apply section-info-base;
            @apply t-text-gray-dark t-text-sm t-mb-4;
        }
    }

    .section-gray {
        @apply section;
        @apply t-bg-gray-lighter t-border-gray-light;

        .section-title {
            @apply section-title-base;
            @apply t-text-gray-darkest t-mb-2;
        }

        .section-info {
            @apply section-info-base;
            @apply t-text-gray-darker t-text-sm t-mb-4;
        }
    }

    .stat-card {
        @apply t-w-[220px] t-h-[80px] t-flex t-flex-col t-items-center t-overflow-auto t-bg-white t-p-3 t-rounded-lg t-shadow-md t-border t-border-solid t-border-gray-light;
    }

    .stat-card-title {
        @apply t-text-[1.0rem] t-font-bold t-text-gray-dark t-mb-2;
    }

    .stat-card-value {
        @apply t-text-[1.4rem] t-font-bold t-text-gray-darker;
    }

    .info-card {
        @apply t-w-[400px] t-h-[140px] t-bg-white t-p-4 t-rounded-lg t-shadow-md t-border t-border-solid t-border-gray-light;
    }

    .info-card-content {
        @apply t-overflow-auto t-h-[90px];
    }

    .info-card-title {
        @apply t-text-[1.0rem] t-font-bold t-text-gray-darker t-mb-2;
    }

    .info-card-text {
        @apply t-text-gray-dark t-text-sm t-mt-2 t-space-y-2 t-whitespace-normal t-break-words;
    }

    .text-flag {
        @apply t-font-bold t-text-white t-px-2 t-py-1 t-rounded-md;
    }

    .text-flag-gray {
        @apply t-text-flag;
        @apply t-bg-gray;
    }

    .text-flag-green {
        @apply t-text-flag;
        @apply t-bg-green;
    }

    .text-flag-red {
        @apply t-text-flag;
        @apply t-bg-red;
    }
}