/**
 * AAN Call Admin - Professional Neutral White Theme
 * Minimal cyan accents, gray-based design with semantic status colors
 */

/* ================================
   TYPOGRAPHY SCALE
   ================================ */

/* Page titles - H1 */
h1, .text-3xl {
    @apply text-3xl font-bold text-gray-900 leading-tight;
}

/* Section titles - H2 */
h2, .text-xl {
    @apply text-xl font-semibold text-gray-900 leading-snug;
}

/* Subsection titles - H3 */
h3, .text-lg {
    @apply text-lg font-semibold text-gray-900 leading-normal;
}

/* Body text */
p, .text-base {
    @apply text-base text-gray-600 leading-relaxed;
}

/* Small text */
.text-sm {
    @apply text-sm text-gray-600 leading-normal;
}

/* Extra small text */
.text-xs {
    @apply text-xs text-gray-500 leading-tight;
}

/* ================================
   METRIC CARDS - Clean White Design
   ================================ */

.metric-card {
    @apply bg-white rounded-lg p-6 border border-gray-200 hover:shadow-md transition-all duration-200;
}

.metric-label {
    @apply text-sm font-medium text-gray-600 mb-1;
}

.metric-value {
    @apply text-3xl font-bold text-gray-900;
}

.metric-icon {
    @apply w-12 h-12 rounded-lg flex items-center justify-center bg-gray-100 text-gray-400;
}

/* Minimal cyan accent on active/hover */
.metric-card:hover .metric-icon {
    @apply bg-gray-50 text-gray-600;
}

/* ================================
   STATUS BADGES - Semantic Color System
   ================================ */

.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-dot {
    @apply w-1.5 h-1.5 rounded-full mr-1.5 bg-current;
}

/* Employee Status */
.status-active {
    @apply bg-emerald-50 text-emerald-600 border border-emerald-200;
}

.status-training {
    @apply bg-amber-50 text-amber-600 border border-amber-200;
}

.status-vacation {
    @apply bg-blue-50 text-blue-600 border border-blue-200;
}

.status-leave {
    @apply bg-gray-100 text-gray-600 border border-gray-300;
}

.status-inactive {
    @apply bg-gray-50 text-gray-600 border border-gray-200;
}

/* Payment Status */
.status-pending, .status-warning {
    @apply bg-amber-50 text-amber-600 border border-amber-200;
}

.status-processing, .status-info {
    @apply bg-blue-50 text-blue-600 border border-blue-200;
}

.status-paid, .status-success {
    @apply bg-emerald-50 text-emerald-600 border border-emerald-200;
}

/* Project Status */
.status-planned {
    @apply bg-gray-50 text-gray-600 border border-gray-200;
}

.status-paused {
    @apply bg-amber-50 text-amber-600 border border-amber-200;
}

.status-completed {
    @apply bg-blue-50 text-blue-600 border border-blue-200;
}

/* VPN Status */
.status-expired {
    @apply bg-red-50 text-red-600 border border-red-200;
}

.status-expiring {
    @apply bg-amber-50 text-amber-600 border border-amber-200;
}

/* ================================
   BUTTONS - Clean Minimal Style with WCAG Touch Targets
   ================================ */

.btn {
    @apply font-medium transition-colors duration-200 inline-flex items-center justify-center gap-2;
}

.btn-primary {
    @apply btn px-6 py-3 rounded-lg text-white bg-cyan-600 hover:bg-cyan-700 shadow-sm;
    min-height: 44px;
    min-width: 44px;
}

.btn-secondary {
    @apply btn px-6 py-3 rounded-lg text-gray-700 bg-white border border-gray-300 hover:bg-gray-50;
    min-height: 44px;
    min-width: 44px;
}

.btn-sm {
    @apply btn px-4 py-2.5 text-sm rounded-lg;
    min-height: 44px;
}

.btn-icon {
    @apply inline-flex items-center justify-center p-2 rounded-lg text-gray-600 hover:text-cyan-600 hover:bg-cyan-50 transition-colors;
    min-height: 32px;
    min-width: 32px;
}

/* Modern compact icon buttons for tables */
.btn-icon-compact {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-lg text-gray-600 transition-colors;
}

.btn-icon-compact:hover {
    @apply bg-cyan-50 text-cyan-600;
}

.btn-icon-compact.btn-delete:hover {
    @apply bg-red-50 text-red-600;
}

/* ================================
   FORMS - Clean Minimal Inputs with WCAG Touch Targets
   ================================ */

.form-group {
    @apply mb-4;
}

.form-input {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition-all duration-200 outline-none;
    min-height: 44px;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1.5;
}

.form-select {
    @apply form-input appearance-none bg-white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    min-height: 44px;
}

.form-textarea {
    @apply form-input resize-y;
    min-height: 88px; /* 2x minimum for textarea */
}

.form-checkbox,
.form-radio {
    @apply w-5 h-5 text-cyan-600 border-gray-300 rounded focus:ring-cyan-500 focus:ring-2 focus:ring-offset-0;
}

/* Form Validation States */
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
    @apply border-emerald-500 focus:border-emerald-500 focus:ring-emerald-500/20 bg-emerald-50/30;
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    @apply border-red-500 focus:border-red-500 focus:ring-red-500/20 bg-red-50/30;
}

.form-feedback {
    @apply mt-1.5 text-sm flex items-center gap-1.5;
}

.form-feedback.is-valid {
    @apply text-emerald-600;
}

.form-feedback.is-invalid {
    @apply text-red-600;
}

.form-feedback svg {
    @apply w-4 h-4 flex-shrink-0;
}

/* Required field indicator */
.form-label.required::after {
    content: " *";
    @apply text-red-500;
}

/* ================================
   TABLES - Clean DataTables
   ================================ */

.datatable-wrapper {
    @apply bg-white rounded-lg border border-gray-200;
}

table.dataTable {
    @apply w-full;
}

table.dataTable thead th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
}

table.dataTable tbody tr {
    @apply border-t border-gray-100 hover:bg-gray-50 transition-colors duration-150;
}

table.dataTable tbody td {
    @apply px-6 py-4 text-sm text-gray-900;
}

/* ================================
   MODALS - Clean Overlay
   ================================ */

.modal-overlay {
    @apply fixed inset-0 bg-gray-900/50 z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-xl;
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-200;
}

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

.modal-footer {
    @apply px-6 py-4 border-t border-gray-200 flex justify-end gap-3;
}

/* ================================
   TABS - Clean Pill Navigation
   ================================ */

.tab-nav {
    @apply flex gap-2 p-1 bg-gray-100 rounded-lg mb-6;
}

.tab-btn {
    @apply px-4 py-2 rounded-md font-medium text-sm text-gray-600 transition-all duration-200 border-b-2 border-transparent;
}

.tab-btn.active {
    @apply text-cyan-700 border-cyan-600;
}

.tab-btn:hover:not(.active) {
    @apply text-gray-900;
}

.tab-content {
    @apply hidden;
}

.tab-content.active {
    @apply block;
}

.tab-button {
    @apply flex-1 px-4 py-2 rounded-md font-medium text-sm text-gray-600 transition-all duration-200;
}

.tab-button.active {
    @apply bg-white text-gray-900 shadow-sm;
}

.tab-button:hover:not(.active) {
    @apply text-gray-900;
}

/* ================================
   CHARTS - Clean Card Container
   ================================ */

.chart-card {
    @apply bg-white rounded-lg p-6 border border-gray-200;
}

.chart-header {
    @apply flex items-center justify-between mb-4;
}

.chart-title {
    @apply text-lg font-semibold text-gray-900;
}

/* ================================
   EMPTY STATES - Clean Placeholders
   ================================ */

.empty-state {
    @apply text-center py-12 px-4;
}

.empty-state-icon {
    @apply w-16 h-16 mx-auto mb-4 text-gray-300;
}

.empty-state-title {
    @apply text-lg font-medium text-gray-900 mb-2;
}

.empty-state-text {
    @apply text-gray-500;
}

/* ================================
   AVATARS - Circular Profile Images
   ================================ */

.avatar {
    @apply rounded-full object-cover border-2 border-gray-200;
}

.avatar-sm {
    @apply w-8 h-8;
}

.avatar-md {
    @apply w-10 h-10;
}

.avatar-lg {
    @apply w-16 h-16;
}

.avatar-fallback {
    @apply rounded-full flex items-center justify-center font-semibold bg-gray-200 text-gray-600;
}

/* ================================
   LOADING STATES & SPINNERS
   ================================ */

/* Skeleton loaders for content placeholders */
.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

/* Spinner sizes */
.spinner {
    @apply inline-block border-2 border-gray-200 border-t-cyan-600 rounded-full animate-spin;
}

.spinner-sm {
    @apply w-4 h-4;
}

.spinner-md {
    @apply w-5 h-5;
}

.spinner-lg {
    @apply w-8 h-8;
}

/* Button loading state */
.btn.is-loading {
    @apply pointer-events-none opacity-75 relative;
}

.btn.is-loading .btn-text {
    @apply opacity-0;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Page/section loading overlay */
.loading-overlay {
    @apply absolute inset-0 bg-white/80 backdrop-blur-sm z-10 flex items-center justify-center;
}

.loading-overlay .spinner {
    @apply w-8 h-8 border-3;
}

/* Table row loading state */
.table-loading {
    @apply relative opacity-50 pointer-events-none;
}

.table-loading::after {
    content: "";
    @apply absolute inset-0 bg-white/50;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ================================
   NAVIGATION - Professional SaaS Active State
   ================================ */

/* Default nav item - subtle gray */
.nav-item {
    @apply relative transition-all duration-200 ease-in-out;
}

/* Hover state - light gray background */
.nav-item:hover {
    @apply bg-gray-100;
}

/* Active state - white background, bold text, left border accent */
.nav-item.active {
    @apply bg-white text-gray-900 font-semibold;
    border-left: 3px solid #06B6D4; /* Cyan accent border */
    padding-left: calc(0.75rem - 3px); /* Compensate for border */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

/* Active state should not have hover effect */
.nav-item.active:hover {
    @apply bg-white;
}

/* Active state icon - cyan color for emphasis */
.nav-item.active svg {
    @apply text-cyan-600;
}

/* Icon transitions */
.nav-item svg {
    transition: color 0.2s ease-in-out;
}

/* Text transitions */
.nav-item span {
    transition: color 0.2s ease-in-out;
}

/* ================================
   RESPONSIVE UTILITIES
   ================================ */

@media (max-width: 768px) {
    .metric-value {
        @apply text-2xl;
    }

    .modal-content {
        @apply rounded-lg;
    }

    table.dataTable thead th,
    table.dataTable tbody td {
        @apply px-4 py-3;
    }
}

/* ================================
   SELECT2 THEME OVERRIDE
   ================================ */

.select2-container--default .select2-selection--single {
    @apply form-input h-auto;
}

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

.select2-dropdown {
    @apply border border-gray-300 rounded-lg shadow-lg;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    @apply bg-cyan-50 text-cyan-700;
}

/* ================================
   FLATPICKR THEME OVERRIDE
   ================================ */

.flatpickr-calendar {
    @apply shadow-lg rounded-lg;
}

.flatpickr-day.selected {
    @apply bg-cyan-600 border-cyan-600;
}

.flatpickr-day.selected:hover {
    @apply bg-cyan-700 border-cyan-700;
}

/* ================================
   DATATABLE CUSTOMIZATION
   ================================ */

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

div.dt-container div.dt-length select {
    @apply form-input w-auto;
}

div.dt-container div.dt-search input {
    @apply form-input;
}

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

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

div.dt-container div.dt-paging button {
    @apply px-3 py-1.5 text-sm rounded-md border border-gray-300 hover:bg-gray-50 transition-colors;
}

div.dt-container div.dt-paging button.current {
    @apply bg-cyan-600 text-white border-cyan-600;
}

/* ================================
   DATATABLES MODERN STYLING FIX
   ================================ */

/* Wrapper spacing - support both class names */
.dataTables_wrapper,
.dt-container {
    padding: 1.5rem !important;
}

/* Info text styling - support both class names */
.dataTables_wrapper .dataTables_info,
.dt-container .dt-info,
.dt-info {
    padding-top: 0.75rem !important;
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    padding-bottom: 0.75rem !important;
}

/* Pagination container - support both class names */
.dataTables_wrapper .dataTables_paginate,
.dt-container .dt-paging,
.dt-paging {
    padding-top: 0.75rem !important;
}

/* Pagination buttons - support both class names */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dt-container .dt-paging .dt-paging-button,
.dt-paging .dt-paging-button,
.paginate_button {
    padding: 0.5rem 0.75rem !important;
    margin: 0 0.125rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    background: white !important;
    color: #374151 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dt-container .dt-paging .dt-paging-button:hover,
.dt-paging .dt-paging-button:hover,
.paginate_button:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dt-container .dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button.current,
.paginate_button.current {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    border-color: #06b6d4 !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dt-container .dt-paging .dt-paging-button.current:hover,
.dt-paging .dt-paging-button.current:hover,
.paginate_button.current:hover {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%) !important;
    border-color: #0891b2 !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled:hover,
.dt-paging .dt-paging-button.disabled,
.dt-paging .dt-paging-button.disabled:hover,
.paginate_button.disabled,
.paginate_button.disabled:hover {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: white !important;
    color: #9ca3af !important;
}

/* Length selector - support both class names */
.dataTables_wrapper .dataTables_length,
.dt-container .dt-length,
.dt-length {
    padding-bottom: 1rem !important;
}

.dataTables_wrapper .dataTables_length select,
.dt-container .dt-length select,
.dt-length select {
    padding: 0.5rem 2rem 0.5rem 0.75rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    margin: 0 0.5rem !important;
}

/* Filter input - support both class names */
.dataTables_wrapper .dataTables_filter,
.dt-container .dt-search,
.dt-search {
    padding-bottom: 1rem !important;
}

.dataTables_wrapper .dataTables_filter input,
.dt-container .dt-search input,
.dt-search input {
    padding: 0.5rem 0.75rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    margin-left: 0.5rem !important;
}

/* Layout wrapper */
.dt-layout-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.dt-layout-cell {
    flex: 0 0 auto !important;
}