File: webroot/css/app.css

@import "tailwindcss";

/* Povej Tailwindu, kje naj i??e class-e */
@source "./templates";
@source "./src";
@source "./webroot/js";

/* === Design tokens (barve itd.) === */
@theme {
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;

    --color-border-soft: #e2e8f0;
}

/* === Badminton Tools UI ? komponentni layer === */
@layer components {

    /* ----- PAGE WRAPPER ----- */
    .bt-page {
        @apply max-w-6xl mx-auto px-4 py-6;
    }

    /* KARTICA OKOLI TABELE */
    .bt-card {
        @apply bg-white border border-border-soft rounded-2xl shadow-sm;
    }

    /* SPODNJI FOOTER V KARTICI (za paginacijo) */
    .bt-card-footer {
        @apply px-4 py-2 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500;
    }

    /* ----- HEADER NAD TABELO ----- */
    .bt-header {
        @apply flex items-center justify-between mb-4;
    }

    .bt-header-title {
        @apply text-xl font-semibold text-slate-800;
    }

    .bt-header-subtitle {
        @apply text-xs text-slate-500;
    }

    .bt-actions {
        @apply flex gap-2;
    }

    /* ----- TABLES ----- */
    .bt-table {
        @apply w-full text-sm;
    }

    .bt-table thead {
        @apply bg-slate-50 text-slate-500 uppercase text-xs;
    }

    .bt-table th {
        @apply px-3 py-2 font-semibold text-left;
    }

    .bt-table td {
        @apply px-3 py-2 border-t border-border-soft;
    }

    .bt-table tbody tr:hover {
        @apply bg-slate-50;
    }

    /* ----- BUTTONS ----- */
    .bt-button {
        @apply inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 shadow-sm transition;
    }

    .bt-button-secondary {
        @apply inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-border-soft text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-300 transition;
    }

    /* ----- FORMS ----- */
    .bt-form .bt-form-group {
        @apply mb-4;
    }

    .bt-form label {
        @apply block mb-1 text-sm font-medium text-slate-700;
    }

    .bt-form input[type="text"],
    .bt-form input[type="number"],
    .bt-form input[type="date"],
    .bt-form select,
    .bt-form textarea {
        @apply block w-full rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-primary-500 focus:ring-primary-500 shadow-sm;
    }

    .bt-form .error-message {
        @apply text-red-600 text-xs mt-1;
    }

    /* ----- FLASH ----- */
    .flash-success {
        @apply bg-green-100 border border-green-300 text-green-800 px-3 py-2 rounded mb-3;
    }

    .flash-error {
        @apply bg-red-100 border border-red-300 text-red-800 px-3 py-2 rounded mb-3;
    }

    .flash-info {
        @apply bg-blue-50 border border-blue-200 text-blue-800 px-3 py-2 rounded mb-3 text-sm flex items-center gap-2;
    }

    .flash-success,
    .flash-error {
        @apply flex items-start gap-2 text-sm;
    }

    .flash-icon {
        @apply mt-0.5;
    }

    .flash-message-text {
        @apply flex-1;
    }

    .flash-close {
        @apply text-xs text-slate-400 cursor-pointer hover:text-slate-600;
    }

    /* PAGINACIJA */
    .bt-pagination-list {
        @apply inline-flex items-center gap-1;
    }

    .bt-page-link {
        @apply px-2 py-1 rounded border border-slate-200 bg-white hover:bg-slate-50;
    }

    .bt-page-link--current {
        @apply px-2 py-1 rounded border border-slate-300 bg-slate-100 font-medium;
    }

    .bt-page-link--disabled {
        @apply opacity-40 cursor-default hover:bg-white hover:border-border-soft;
    }

    /* DL - prikaz seznama podatkov */
    .dl-seznam {
        @apply grid grid-cols-[auto_1fr] gap-y-1 text-sm;
    }

    .dl-seznam dt {
        @apply text-slate-500 text-xs uppercase tracking-wide min-w-[120px];
    }

    .dl-seznam dd {
        @apply text-slate-900;
    }

    /* Lihe vrstice (dt + dd par) ? sivo ozadje */
    .dl-seznam dt:nth-child(4n+1),
    .dl-seznam dd:nth-child(4n+2) {
        @apply bg-slate-50;
    }

    .checkbox {
        @apply flex items-center gap-2 py-1;
    }

    .checkbox input[type="checkbox"] {
        @apply h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500;
    }

    .checkbox label {
        @apply text-sm text-slate-700 cursor-pointer;
    }

    .checkbox:hover {
        @apply bg-slate-50 rounded-md;
    }

    .bt-checkbox-group {
        @apply border border-slate-200 rounded-md px-3 py-2 bg-white max-h-64 overflow-y-auto;
    }

    /* Tabela wrapper ? da na mobiju ne odre?e desne strani */
    .bt-table-wrapper {
        @apply w-full overflow-x-auto;
    }

    /* Na manj?ih ekranih naj bo tabela ?ir?a od ekrana ? horizontalni scroll */
    @media (max-width: 768px) {
        .bt-table {
            min-width: 520px;
            /* po ob?utku ? prilagodi glede na ?t. stolpcev */
        }
    }
}