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

@layer components {
    ul.validation-errors {
        @apply list-disc ml-4;
    }
    
    select.single-select {
        @apply mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6;
    }
    .page-header-container {
        @apply max-w-7xl px-4 sm:px-6 lg:px-8 space-y-4;
    }

    .page-content-container {
        @apply max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col space-y-4;
    }
    
    .panel {
        @apply bg-white shadow sm:rounded-lg px-4 py-5 sm:p-6 flex flex-col space-y-4;
    }
    
    .panel-content {
        @apply flex flex-col space-y-4;
    }
    
    .panel-footer {
        @apply mt-6 flex gap-10;
    }

    .btn {
        @apply rounded py-1 px-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 inline-block;
    }

    .btn-primary {
        @apply btn bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600;
    }

    .btn-secondary {
        @apply btn bg-gray-100 text-gray-900 hover:bg-gray-50 focus-visible:outline-gray-100;
    }

    .btn-danger {
        @apply btn bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600;
    }

    .btn-warning {
        @apply btn bg-yellow-600 text-white hover:bg-yellow-500 focus-visible:outline-yellow-600;
    }
    
    .btn-icon {
        @apply inline-flex items-center;
    }

    .btn-icon > svg {
        @apply me-2;
    }

    .badge-danger {
        @apply inline-flex items-center rounded bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800;
    }

    .badge-info {
        @apply inline-flex items-center rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800;
    }

    .btn-form {
        @apply flex w-full justify-center rounded-md bg-primary-500 py-2 px-3 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600;
    }
    
    .radio-control {
        @apply flex items-center;
    }
    
    .radio-input {
        @apply h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600;
    }
    
    .radio-label {
        @apply ml-3 block text-sm font-medium leading-6 text-gray-900;
    }

    .text-input {
        @apply px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6
    }
    
    input[type="date"] {
        @apply px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6;
    }
    
    input[type="checkbox"] {
        @apply h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-600;
    }

    td > input:only-child {
        @apply absolute left-4 top-1/2 -mt-2;
    }
    
    h1 {
        @apply text-2xl font-semibold text-gray-900 leading-6 mb-8;
    }

    .h2, h2 {
        @apply text-2xl font-semibold text-gray-900 leading-6;
    }

    h3 {
        @apply text-base font-semibold text-gray-900 leading-6;
    }

    h3 {
        @apply text-xl font-semibold text-gray-900 mb-3 mt-3
    }
    .input-validation-error {
        @apply text-red-900 focus:outline-none ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6
    }

    .field-validation-error {
        @apply text-red-600 text-sm
    }

    .validation-summary-errors {
        @apply my-3 text-sm text-red-600 ring-1 ring-red-600 ring-offset-1 ring-offset-red-50 rounded-md p-2
    }

    .link-blue {
        @apply no-underline text-blue-600 hover:text-blue-800 visited:text-blue-600
    }
    
    .text-danger {
        @apply text-red-600;
    }

    .validation-errors, .validation-message {
        @apply text-red-600;
    }
    
    .alert-box-message {
        @apply text-sm font-medium
    }
    
    table.tbl-default {
        @apply divide-y divide-gray-300
    }

    table.tbl-default thead {
        @apply bg-gray-200
    }

    table.tbl-default tbody {
        @apply divide-y divide-gray-200 bg-white
    }

    table.tbl-default th {
        @apply px-3 py-3.5 text-left text-sm font-semibold text-gray-900
    }

    table.tbl-default td {
        @apply px-3 py-4 text-sm text-gray-500
    }

    table.tbl-default td.td-strong {
        @apply text-gray-900
    }

    table.tbl-default td.td-indent, table.tbl-default th.th-indent {
        @apply pl-4 sm:pl-6
    }

    table.tbl-default a {
        @apply link-blue;

        text-decoration: none;
    }
    
    div.table-container {
        @apply overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg;
    }
    
    tr.selected {
        @apply bg-blue-100;
    }

    .pricing-card {
        @apply bg-white shadow sm:rounded-lg p-4 flex flex-col space-y-4 border-2 border-gray-200;
    }

    .pricing-card-active {
        @apply pricing-card border-blue-600;
    }
    
    ul.radio-horizontal {
        @apply items-center w-full bg-white border-0 rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:flex;
    }
    
    ul.radio-horizontal > li {
        @apply w-full border-b border-gray-200 sm:border-b-0 sm:border-r;
    }
    
    ul.radio-horizontal > li > div {
        @apply flex items-center pl-3;
    }
    
    ul.radio-horizontal > li > div > input {
        @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2;
    }
    
    ul.radio-horizontal > li > div > label {
        @apply w-full py-3 ml-2 text-sm font-medium text-gray-900;
    }
    
    label.form-label {
        @apply block text-sm font-medium leading-6 text-gray-900;
    }
    
    .sidebar {
        @apply hidden lg:fixed lg:inset-y-0 lg:flex lg:flex-col bg-primary-700;
    }
    
    .sidebar-anonymous {
        @apply sidebar lg:w-16 items-center pt-5 pb-4;
    }
    
    .sidebar-authorized {
        @apply sidebar lg:w-64;
    }
    
    .sidebar-content {
        @apply flex flex-col flex-1 space-y-1 p-2;
    }
    
    .sidebar-footer {
        @apply flex flex-col flex-shrink-0 flex-grow-0 p-4 bg-opacity-25 bg-black space-y-4;
    }
    
    .navbar-mobile {
        @apply sticky top-0 z-10 bg-gray-100 p-1 lg:hidden;
    }
    
    main {
        @apply py-6 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col space-y-4 min-h-full;
    }
    
    .content-container-anonymous {
        @apply flex-1 lg:pl-16;
    }
    
    .content-container-authorized {
        @apply flex-1 lg:pl-64;
    }
    
    .nav-link {
        @apply text-white flex items-center rounded-md px-2 py-2 text-sm font-medium hover:bg-black hover:bg-opacity-40;
    }
    
    .nav-link-active {
        @apply bg-black bg-opacity-50 text-white;
    }
    
    .nav-link-icon {
        @apply w-6 h-6 mr-3 text-blue-300;
    }
    
    .nav-link-submenu {
        @apply m-2 rounded-md bg-opacity-25 bg-black p-4;
    }
    
    .nav-link-submenu-title {
        @apply text-xs font-semibold text-blue-200 ml-3 mb-3 truncate;
    }
    
    .btn-group-basic {
        @apply isolate inline-flex rounded-md shadow-sm;
    }
    
    .btn-group-basic-item {
        @apply relative inline-flex items-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10;
    }
    
    .btn-group-basic-item:first-of-type {
        @apply rounded-l-md;
    }
    
    .btn-group-basic-item:last-of-type {
        @apply rounded-r-md;
    }
    
    .btn-group-basic-item:not(:first-of-type) {
        @apply -ml-px;
    }
}

:root {
    --color-primary-300: 103 149 232;
    --color-primary-500: 23 93 220;
    --color-primary-700: 18 82 163;
}