/**
 * AAN Call Admin - Shadcn-Inspired Modern SaaS Design System
 * Based on shadcn/ui principles: subtle, neutral, highly refined
 */

/* ================================
   CSS VARIABLES - Design Tokens
   ================================ */

:root {
    /* Colors - Neutral Gray Scale */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 188 91% 43%; /* Cyan #06B6D4 */
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 188 91% 43%;

    --radius: 0.5rem;

    /* Shadows - Subtle Elevation */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Spacing Scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
}

/* ================================
   TYPOGRAPHY - Modern Hierarchy
   ================================ */

.text-display {
    @apply text-4xl font-bold tracking-tight text-gray-900;
}

.text-h1 {
    @apply text-3xl font-semibold tracking-tight text-gray-900;
}

.text-h2 {
    @apply text-2xl font-semibold tracking-tight text-gray-900;
}

.text-h3 {
    @apply text-xl font-semibold text-gray-900;
}

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

.text-body {
    @apply text-sm text-gray-700 leading-relaxed;
}

.text-small {
    @apply text-xs text-gray-600;
}

.text-muted {
    @apply text-sm text-gray-500;
}

/* ================================
   BUTTONS - Shadcn Style
   ================================ */

.btn-shadcn {
    @apply inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors;
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
    @apply disabled:pointer-events-none disabled:opacity-50;
    min-height: 44px;
    padding: 0.625rem 1rem;
}

.btn-default {
    @apply btn-shadcn bg-cyan-600 text-white hover:bg-cyan-700 shadow-sm;
}

.btn-secondary {
    @apply btn-shadcn bg-gray-100 text-gray-900 hover:bg-gray-200;
}

.btn-outline {
    @apply btn-shadcn border border-gray-300 bg-white hover:bg-gray-50 hover:border-gray-400;
}

.btn-ghost {
    @apply btn-shadcn hover:bg-gray-100 hover:text-gray-900;
}

.btn-destructive {
    @apply btn-shadcn bg-red-600 text-white hover:bg-red-700;
}

.btn-sm {
    @apply text-xs;
    min-height: 36px;
    padding: 0.5rem 0.75rem;
}

.btn-lg {
    @apply text-base;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
}

.btn-icon {
    @apply btn-shadcn w-10 h-10 p-0;
}

/* ================================
   CARDS - Elevated Containers
   ================================ */

.card {
    @apply rounded-xl border border-gray-200 bg-white shadow-sm transition-shadow;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    @apply flex flex-col space-y-1.5 p-6 pb-4;
}

.card-title {
    @apply text-2xl font-semibold leading-none tracking-tight;
}

.card-description {
    @apply text-sm text-gray-500;
}

.card-content {
    @apply p-6 pt-0;
}

.card-footer {
    @apply flex items-center p-6 pt-0;
}

/* Stat Card Variant */
.stat-card {
    @apply card p-6 hover:shadow-lg transition-all duration-200;
}

.stat-card-icon {
    @apply w-12 h-12 rounded-lg bg-gradient-to-br from-cyan-50 to-cyan-100 text-cyan-600 flex items-center justify-center mb-4;
}

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

.stat-card-value {
    @apply text-3xl font-bold text-gray-900 mb-0.5;
}

.stat-card-change {
    @apply text-xs text-gray-500;
}

/* ================================
   INPUTS - Clean Forms
   ================================ */

.input-shadcn {
    @apply flex h-11 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent;
    @apply disabled:cursor-not-allowed disabled:opacity-50;
    @apply placeholder:text-gray-400;
    transition: all 0.2s;
}

.input-shadcn:focus {
    @apply shadow-sm;
}

.textarea-shadcn {
    @apply input-shadcn min-h-[88px] resize-y;
}

.select-shadcn {
    @apply input-shadcn appearance-none bg-white cursor-pointer;
    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.25em 1.25em;
    padding-right: 2.5rem;
}

.label-shadcn {
    @apply text-sm font-medium text-gray-700 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
    margin-bottom: 0.5rem;
    display: block;
}

/* Input with Icon */
.input-group {
    @apply relative;
}

.input-group-icon {
    @apply absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4;
}

.input-group .input-shadcn {
    @apply pl-10;
}

/* ================================
   BADGES - Status Indicators
   ================================ */

.badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors;
    @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
}

.badge-default {
    @apply bg-gray-900 text-white;
}

.badge-secondary {
    @apply bg-gray-100 text-gray-900 border border-gray-200;
}

.badge-success {
    @apply bg-emerald-100 text-emerald-700 border border-emerald-200;
}

.badge-warning {
    @apply bg-amber-100 text-amber-700 border border-amber-200;
}

.badge-error {
    @apply bg-red-100 text-red-700 border border-red-200;
}

.badge-info {
    @apply bg-blue-100 text-blue-700 border border-blue-200;
}

/* Dot indicator */
.badge-dot::before {
    content: "";
    @apply inline-block w-2 h-2 rounded-full mr-1.5;
    background-color: currentColor;
    opacity: 0.8;
}

/* ================================
   TABLES - Modern Data Display
   ================================ */

.table-container {
    @apply card overflow-hidden;
}

.table-modern {
    @apply w-full border-separate;
    border-spacing: 0;
}

.table-modern thead {
    @apply bg-gray-50/50;
}

.table-modern thead th {
    @apply px-6 py-3.5 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider;
    @apply border-b border-gray-200;
}

.table-modern tbody tr {
    @apply transition-colors;
}

.table-modern tbody tr:hover {
    @apply bg-gray-50/50;
}

.table-modern tbody td {
    @apply px-6 py-4 text-sm text-gray-900 border-b border-gray-100;
}

.table-modern tbody tr:last-child td {
    @apply border-b-0;
}

/* ================================
   CHARTS - Modern Visualization Containers
   ================================ */

.chart-container {
    @apply card p-6;
}

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

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

.chart-canvas-wrapper {
    @apply relative;
    min-height: 300px;
}

.chart-canvas-wrapper canvas {
    @apply w-full h-full;
}

/* ================================
   SIDEBAR - Modern Navigation
   ================================ */

.sidebar-modern {
    @apply fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-gray-200;
    @apply transform transition-transform duration-300 ease-in-out;
}

.sidebar-header {
    @apply h-16 flex items-center px-6 border-b border-gray-200;
}

.sidebar-nav {
    @apply px-3 py-4 space-y-1;
}

.nav-item-modern {
    @apply flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg;
    @apply transition-all duration-200 ease-in-out;
}

.nav-item-modern:hover {
    @apply bg-gray-100 text-gray-900;
}

.nav-item-modern.active {
    @apply bg-cyan-50 text-cyan-700 font-semibold;
    box-shadow: inset 3px 0 0 0 #06B6D4;
}

.nav-item-modern svg {
    @apply w-5 h-5 flex-shrink-0;
    transition: color 0.2s;
}

.nav-item-modern.active svg {
    @apply text-cyan-600;
}

/* ================================
   LOADING STATES - Smooth Feedback
   ================================ */

.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

.spinner-modern {
    @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-6 h-6;
}

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

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

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

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

/* ================================
   EMPTY STATES - Refined Placeholders
   ================================ */

.empty-state-modern {
    @apply flex flex-col items-center justify-center py-16 px-4 text-center;
}

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

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

.empty-state-description {
    @apply text-sm text-gray-500 mb-6 max-w-sm;
}

/* ================================
   DIVIDER - Subtle Separators
   ================================ */

.divider {
    @apply border-t border-gray-200 my-6;
}

.divider-vertical {
    @apply border-l border-gray-200 mx-4 h-full;
}

/* ================================
   UTILITY CLASSES
   ================================ */

.text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-cyan-600 to-cyan-400;
}

.hover-lift {
    @apply transition-transform duration-200 hover:-translate-y-1;
}

.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2;
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

@media (max-width: 768px) {
    .sidebar-modern {
        @apply -translate-x-full;
    }

    .sidebar-modern.open {
        @apply translate-x-0;
    }

    .stat-card-value {
        @apply text-2xl;
    }

    .card-header,
    .card-content,
    .card-footer {
        @apply p-4;
    }
}