/**
 * SUBLIFLOW PRO - Tema Emerald Fresh
 * Sistema de design moderno com tons esmeralda
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Primary Colors - Emerald Scale */
    --theme-primary: 16 185 129;
    --theme-primary-light: 52 211 153;
    --theme-primary-dark: 5 150 105;
    --theme-primary-50: 236 253 245;
    --theme-primary-100: 209 250 229;
    --theme-primary-200: 167 243 208;
    --theme-primary-300: 110 231 183;
    --theme-primary-600: 5 150 105;
    --theme-primary-700: 4 120 87;
    --theme-primary-800: 6 95 70;
    --theme-primary-900: 6 78 59;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-soft: 0 2px 10px -2px rgba(0, 0, 0, 0.05);
    --shadow-floating: 0 10px 40px -10px rgba(0,0,0,0.08);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Base Styles */
* {
    font-family: 'Inter', system-ui, sans-serif;
}

body {
    background-color: rgb(248 250 252);
    color: rgb(15 23 42);
}

/* Component Classes - Emerald Theme */

/* Buttons */
.btn-primary {
    background-color: rgb(var(--theme-primary));
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary:hover {
    background-color: rgb(var(--theme-primary-dark));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background-color: rgb(15 23 42);
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-secondary:hover {
    background-color: rgb(30 41 59);
}

.btn-outline {
    background-color: white;
    color: rgb(71 85 105);
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid rgb(226 232 240);
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-outline:hover {
    border-color: rgb(var(--theme-primary));
    background-color: rgb(var(--theme-primary-50));
    color: rgb(var(--theme-primary-dark));
}

.btn-ghost {
    background-color: transparent;
    color: rgb(71 85 105);
    padding: 0.625rem 1rem;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-ghost:hover {
    background-color: rgb(241 245 249);
    color: rgb(15 23 42);
}

.btn-danger {
    background-color: rgb(244 63 94);
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-danger:hover {
    background-color: rgb(225 29 72);
}

/* Cards */
.card {
    background-color: white;
    border-radius: var(--radius-2xl);
    border: 1px solid rgb(241 245 249);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    transition: all 0.2s ease;
}

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

.card-elevated {
    background-color: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-floating);
    padding: 1.5rem;
}

/* Inputs */
.input {
    width: 100%;
    padding: 0.625rem 1rem;
    background-color: rgb(241 245 249);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(15 23 42);
    transition: all 0.2s ease;
    outline: none;
}

.input:focus {
    background-color: white;
    border-color: rgb(var(--theme-primary));
    box-shadow: 0 0 0 4px rgba(var(--theme-primary), 0.1);
}

.input-error {
    background-color: rgb(255 241 242);
    border-color: rgb(244 63 94);
}

.input-lg {
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
}

/* Select */
.select {
    width: 100%;
    padding: 0.625rem 1rem;
    background-color: rgb(241 245 249);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(15 23 42);
    transition: all 0.2s ease;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

.select:focus {
    background-color: white;
    border-color: rgb(var(--theme-primary));
    box-shadow: 0 0 0 4px rgba(var(--theme-primary), 0.1);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-primary {
    background-color: rgb(var(--theme-primary-50));
    color: rgb(var(--theme-primary-700));
    border: 1px solid rgb(var(--theme-primary-100));
}

.badge-success {
    background-color: rgb(236 253 245);
    color: rgb(5 150 105);
    border: 1px solid rgb(209 250 229);
}

.badge-warning {
    background-color: rgb(255 247 237);
    color: rgb(217 119 6);
    border: 1px solid rgb(253 230 138);
}

.badge-danger {
    background-color: rgb(255 241 242);
    color: rgb(225 29 72);
    border: 1px solid rgb(254 215 215);
}

.badge-neutral {
    background-color: rgb(241 245 249);
    color: rgb(71 85 105);
    border: 1px solid rgb(226 232 240);
}

/* Avatars */
.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}

.avatar-md {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
}

.avatar-lg {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
}

.avatar-primary {
    background: linear-gradient(135deg, rgb(var(--theme-primary)) 0%, rgb(var(--theme-primary-light)) 100%);
}

.avatar-neutral {
    background-color: rgb(203 213 225);
}

/* Toggle Switch */
.toggle {
    width: 2.75rem;
    height: 1.5rem;
    background-color: rgb(203 213 225);
    border-radius: var(--radius-full);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle::after {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    border-radius: var(--radius-full);
    top: 0.125rem;
    left: 0.125rem;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.toggle-active {
    background-color: rgb(var(--theme-primary));
}

.toggle-active::after {
    transform: translateX(1.25rem);
}

/* Checkbox */
.checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-md);
    border: 2px solid rgb(203 213 225);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-checked {
    background-color: rgb(var(--theme-primary));
    border-color: rgb(var(--theme-primary));
}

.checkbox-checked svg {
    color: white;
}

/* Progress / Skeleton */
.skeleton {
    background: linear-gradient(90deg, rgb(226 232 240) 0%, rgb(241 245 249) 50%, rgb(226 232 240) 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Tables */
.table-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
}

.table-row:hover {
    background-color: rgb(248 250 252);
}

/* Divider */
.divider {
    height: 1px;
    background-color: rgb(241 245 249);
    margin: 1.5rem 0;
}

/* Utility Classes */
.text-primary { color: rgb(var(--theme-primary)); }
.text-primary-light { color: rgb(var(--theme-primary-light)); }
.text-primary-dark { color: rgb(var(--theme-primary-dark)); }
.text-primary-50 { color: rgb(var(--theme-primary-50)); }
.text-primary-100 { color: rgb(var(--theme-primary-100)); }
.text-primary-300 { color: rgb(var(--theme-primary-300)); }
.text-primary-600 { color: rgb(var(--theme-primary-600)); }
.text-primary-700 { color: rgb(var(--theme-primary-700)); }

.bg-primary { background-color: rgb(var(--theme-primary)); }
.bg-primary-50 { background-color: rgb(var(--theme-primary-50)); }
.bg-primary-100 { background-color: rgb(var(--theme-primary-100)); }
.bg-primary-600 { background-color: rgb(var(--theme-primary-600)); }
.bg-primary-700 { background-color: rgb(var(--theme-primary-700)); }

.border-primary { border-color: rgb(var(--theme-primary)); }
.border-primary-100 { border-color: rgb(var(--theme-primary-100)); }
.border-primary-200 { border-color: rgb(var(--theme-primary-200)); }

.ring-primary { --tw-ring-color: rgb(var(--theme-primary)); }

/* Animations */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.animate-scale-in {
    animation: scale-in 0.2s ease-out;
}