/* CAS Shared Styling - Used by CAS.Client and CAS.Admin */

/* Form controls */
.form-control {
    @apply block w-full px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 focus:outline-2 focus:outline-cas-blue focus:border-cas-blue transition-colors;
}

/* Invalid state styling */
.invalid.form-control {
    @apply text-red-600 border-red-500 dark:border-red-400 bg-red-50 dark:bg-red-900/20 focus:border-red-500 focus:outline-red-500;
}

/* Disabled/Readonly state styling */
.form-control:disabled,
.form-control[readonly] {
    @apply bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-600 cursor-not-allowed opacity-75;
}

.form-control:disabled:focus,
.form-control[readonly]:focus {
    @apply outline-none border-gray-200 dark:border-gray-600;
}

/* Universal scrollbar styling for all elements */
* {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
    border: 1px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
    background-clip: content-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark mode universal scrollbar */
.dark * {
    scrollbar-color: #4b5563 transparent;
}

.dark *::-webkit-scrollbar-thumb {
    background: #4b5563;
    background-clip: content-box;
}

.dark *::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
    background-clip: content-box;
}

/* Panel System */
.panel {
    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700;
}

.panel-header {
    @apply flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-gray-700;
}

.panel-title {
    @apply text-lg font-medium text-gray-900 dark:text-gray-100;
}

.panel-header-actions {
    @apply flex items-center space-x-2;
}

/* Table System */
.table-container {
    @apply panel overflow-visible;
}

.table {
    @apply w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table-header {
    @apply bg-cas-blue dark:bg-cas-blue;
}

.table-cell-header {
    @apply px-4 py-2 text-left text-xs font-medium text-white dark:text-white uppercase tracking-wider border-b border-gray-200 dark:border-gray-700;
}

.table-body {
    @apply bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700;
}

.table-row {
    @apply hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors;
}

.table-cell {
    @apply px-4 py-3 text-sm text-gray-900 dark:text-gray-100;
}

/* Loading States */
.loading-skeleton {
    @apply h-4 bg-gray-200 dark:bg-gray-600;
}

/* Form controls */
.form-control {
    @apply block w-full px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 focus:outline-2 focus:outline-cas-blue focus:border-cas-blue transition-colors;
}

.panel-header {
    @apply flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-gray-700;
}

.panel-title {
    @apply text-lg font-medium text-gray-900 dark:text-gray-100;
}

.panel-header-actions {
    @apply flex items-center space-x-2;
}

.panel-header-lg {
    @apply px-6 py-6 border-b border-gray-200 dark:border-gray-700;
}

.panel-body {
    @apply p-4;
}

.panel-body-lg {
    @apply p-6;
}

/* Table System */
.table-container {
    @apply panel overflow-visible;
}

.table {
    @apply w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table-header {
    @apply bg-cas-blue dark:bg-cas-blue;
}

.table-header-cell {
    @apply px-4 py-2 text-left text-xs font-medium text-white dark:text-white uppercase tracking-wider;
}

.table-cell-header {
    @apply px-4 py-2 text-left text-xs font-medium text-white dark:text-white uppercase tracking-wider border-b border-gray-200 dark:border-gray-700;
}

.table-body {
    @apply bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700;
}

.table-row {
    @apply hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors;
}

.table-cell {
    @apply px-4 py-3 text-sm text-gray-900 dark:text-gray-100;
}

/* Loading States */
.table-loading-row {
    @apply animate-pulse;
}

.loading-skeleton {
    @apply h-4 bg-gray-200 dark:bg-gray-600;
}

.loading-skeleton-sm {
    @apply h-3 bg-gray-200 dark:bg-gray-600;
}

.loading-skeleton-lg {
    @apply h-6 bg-gray-200 dark:bg-gray-600;
}

.loading-spinner {
    @apply animate-spin h-5 w-5 text-gray-400;
}

.loading-spinner svg {
    @apply text-cas-blue;
}

/* Modal System */
.modal-overlay {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 transition-opacity;
}

.modal-container {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal-content {
    @apply bg-white dark:bg-gray-800 shadow-xl;
}

.modal-header {
    @apply px-4 pt-5 pb-4 sm:p-6;
}

.modal-body {
    @apply px-4 py-4 sm:px-6;
}

.modal-footer {
    @apply px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse border-t border-gray-200 dark:border-gray-700;
}

/* Button System */
.btn {
    @apply inline-flex items-center px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply btn bg-cas-blue text-white hover:bg-opacity-90 focus:ring-cas-blue;
}

.btn-secondary {
    @apply btn bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus:ring-cas-blue;
}

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

/* Empty State */
.empty-state {
    @apply text-center py-8 text-gray-500 dark:text-gray-400;
}

/* Fix for table border conflicts within panels */
.panel .table {
    @apply divide-y-0;
}
.table-cell-header.with-logo {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 133 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' fill-rule='evenodd' d='M25.54 37.2c3.35.02 6.63-1.01 9.4-2.96l1.14-.82 1.52 2.34-1.14.78A18.63 18.63 0 0125.54 40h-6.02c-5.38 0-9.98-1.96-13.81-5.87C1.9 30.23 0 25.53 0 20 0 14.47 1.9 9.77 5.7 5.88A18.63 18.63 0 0119.53 0h6.02c3.9-.03 7.72 1.18 10.92 3.46l1.14.78-1.52 2.34-1.14-.82a16.14 16.14 0 00-9.4-2.96h-6.02c-4.61 0-8.57 1.69-11.87 5.06A16.72 16.72 0 002.74 20c0 4.75 1.64 8.8 4.91 12.14a16.01 16.01 0 0011.87 5.06h6.02zm58.72-8.6h-.04c-.28 3.16-1.5 5.8-3.65 7.9-2.41 2.33-5.5 3.5-9.25 3.5H56.75c-4.09 0-7.35-1.34-9.79-4a12.65 12.65 0 01-3.27-8.8c0-3.3 1.03-6.11 3.09-8.44 2.28-2.57 5.31-3.86 9.1-3.86h15.44c4.36 0 7.76 1.55 10.2 4.63v-4.4c0-4.35-.95-7.5-2.85-9.41-1.9-1.92-5.04-2.88-9.4-2.88H58.34c-2.84 0-4.98.29-6.43.86a5.96 5.96 0 00-3.23 3l-.62 1.24-2.47-1.25.65-1.24A8.58 8.58 0 0151.3.97c1.73-.62 4.08-.93 7.04-.93h10.93c5.12 0 8.9 1.23 11.33 3.7 2.44 2.46 3.65 6.26 3.66 11.4V28.6zm-12.94 8.6c3.27 0 5.85-1.04 7.73-3.12a9.48 9.48 0 002.47-6.6c0-2.63-.82-4.85-2.47-6.66-1.88-2.08-4.46-3.12-7.73-3.12H55.87c-3.04 0-5.43 1.02-7.16 3.04a9.55 9.55 0 00-2.28 6.46c0 2.72.85 5.02 2.55 6.88 1.88 2.08 4.47 3.11 7.77 3.11h14.57zm51.34-20.43c2.62 0 4.86.96 6.73 2.88a9.48 9.48 0 012.78 6.88v3.7c0 2.7-.92 5-2.78 6.92a9.15 9.15 0 01-6.73 2.84H99.91c-3.3 0-6.1-1.75-8.41-5.25l-.77-1.17 2.29-1.55.76 1.17c1.75 2.7 3.8 4.04 6.13 4.04h22.76a6.5 6.5 0 004.83-2.02 6.85 6.85 0 001.98-4.98v-3.7a6.8 6.8 0 00-1.98-4.94 6.5 6.5 0 00-4.83-2.02H99.9a9.08 9.08 0 01-6.73-2.88 9.41 9.41 0 01-2.82-6.88c0-2.7.94-4.99 2.82-6.88A9.05 9.05 0 0199.9.03h22.76c3.3 0 6.08 1.77 8.37 5.3l.75 1.13-2.24 1.56-.76-1.17c-1.75-2.67-3.8-4-6.13-4H99.9a6.5 6.5 0 00-4.84 2.01 6.8 6.8 0 00-1.98 4.95c0 1.94.66 3.59 1.98 4.94a6.51 6.51 0 004.84 2.02h22.75z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 60px auto;
    padding-right: 70px;
}