@layer base, components, utilities;

/* Import component styles */
@import "layout/_navbar-VmS4vUF.css";
@import "layout/_page-6cO5tMO.css";
@import "components/_buttons-wJJ5W0-.css";
@import "components/_forms-iUKjnZY.css";
@import "components/_cards-C4JybWW.css";
@import "components/_badges-g6FHteu.css";
@import "components/_auth-botBJs4.css";
@import "pages/_provision-G7iQ98x.css";
@import "pages/_server-kVT7vbp.css";
@import "pages/_pending-mmm9DL9.css";
@import "pages/_logs-A2dHB9A.css";
@import "pages/_settings-BHDjBhE.css";
@import "pages/_firewall-NS-Xsid.css";

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

@layer base {
    /* Base theme variables */
    :root {
        /* Primary colors (blue) */
        --color-primary-50: 239 246 255;
        --color-primary-100: 219 234 254;
        --color-primary-200: 191 219 254;
        --color-primary-500: 59 130 246;
        --color-primary-600: 37 99 235;
        --color-primary-700: 29 78 216;
        
        /* Gray scale */
        --color-gray-50: 249 250 251;
        --color-gray-100: 243 244 246;
        --color-gray-200: 229 231 235;
        --color-gray-300: 209 213 219;
        --color-gray-400: 156 163 175;
        --color-gray-500: 107 114 128;
        --color-gray-600: 75 85 99;
        --color-gray-700: 55 65 81;
        --color-gray-800: 31 41 55;
        --color-gray-900: 17 24 39;
        
        /* Status colors */
        --color-red-50: 254 242 242;
        --color-red-100: 254 226 226;
        --color-red-200: 254 202 202;
        --color-red-600: 220 38 38;
        --color-red-700: 185 28 28;
        
        --color-green-100: 220 252 231;
        --color-green-500: 34 197 94;
        --color-green-700: 21 128 61;
        
        --color-yellow-100: 254 249 195;
        --color-yellow-700: 161 98 7;
        
        --color-orange-100: 255 237 213;
        --color-orange-700: 194 65 12;
        
        --color-blue-50: 239 246 255;
        --color-blue-200: 191 219 254;
        --color-blue-700: 29 78 216;
        
        /* Legacy aliases */
        --color-primary: 59 130 246;
        --color-primary-dark: 29 78 216;
        --color-danger: 239 68 68;
        --color-success: 34 197 94;
        --color-warning: 251 146 60;
        
        --spacing-unit: 0.25rem;
        --border-radius: 0.375rem;
        --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        --font-heading: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: var(--font-sans);
        line-height: 1.5;
        color: rgb(var(--color-gray-900));
        background-color: rgb(var(--color-gray-50));
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-family: var(--font-heading);
        font-weight: 600;
        line-height: 1.2;
    }

    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.675rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }

    a {
        color: rgb(var(--color-primary-600));
        text-decoration: none;
    }

    a:hover {
        color: rgb(var(--color-primary-700));
        text-decoration: underline;
    }

    article p:first-child {
        margin-top: 0;
    }
}

@layer components {
    /* Button Components */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.5;
        border-radius: var(--border-radius);
        border: 1px solid transparent;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
        text-decoration: none;
    }

    .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-primary {
        background-color: rgb(var(--color-primary));
        color: white;
    }

    .btn-primary:hover:not(:disabled) {
        background-color: rgb(var(--color-primary-dark));
        text-decoration: none;
    }

    .btn-danger {
        background-color: rgb(var(--color-danger));
        color: white;
    }

    .btn-danger:hover:not(:disabled) {
        background-color: rgb(220 38 38); /* red-600 */
        text-decoration: none;
    }

    .btn-secondary {
        background-color: rgb(var(--color-gray-200));
        color: rgb(var(--color-gray-900));
    }

    .btn-secondary:hover:not(:disabled) {
        background-color: rgb(var(--color-gray-300));
        text-decoration: none;
    }

    .btn-sm {
        padding: 0.25rem 0.75rem;
        font-size: 0.8125rem;
    }

    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    /* Card Component */
    .card {
        background-color: white;
        border-radius: var(--border-radius);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    .card-header {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid rgb(var(--color-gray-200));
        font-weight: 600;
    }

    .card-body {
        padding: 1.5rem;
    }

    .card-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid rgb(var(--color-gray-200));
        background-color: rgb(var(--color-gray-50));
    }

    /* Form Components */
    .form-group {
        margin-bottom: 1rem;
    }

    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: rgb(var(--color-gray-700));
    }

    .form-control {
        display: block;
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        line-height: 1.5;
        color: rgb(var(--color-gray-900));
        background-color: white;
        border: 1px solid rgb(var(--color-gray-300));
        border-radius: var(--border-radius);
        transition: border-color 0.15s ease-in-out;
    }

    .form-control:focus {
        outline: none;
        border-color: rgb(var(--color-primary));
        box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.1);
    }

    .form-control:disabled {
        background-color: rgb(var(--color-gray-100));
        cursor: not-allowed;
    }

    .form-select {
        appearance: none;
        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;
    }

    .form-error {
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: rgb(var(--color-danger));
    }

    /* Alert Components */
    .alert {
        padding: 1rem;
        border-radius: var(--border-radius);
        margin-bottom: 1rem;
    }

    .alert-success {
        background-color: rgb(220 252 231); /* green-100 */
        border: 1px solid rgb(187 247 208); /* green-200 */
        color: rgb(22 101 52); /* green-800 */
    }

    .alert-danger {
        background-color: rgb(254 226 226); /* red-100 */
        border: 1px solid rgb(254 202 202); /* red-200 */
        color: rgb(153 27 27); /* red-800 */
    }

    .alert-warning {
        background-color: rgb(254 243 199); /* yellow-100 */
        border: 1px solid rgb(253 230 138); /* yellow-200 */
        color: rgb(146 64 14); /* yellow-800 */
    }

    .alert-info {
        background-color: rgb(219 234 254); /* blue-100 */
        border: 1px solid rgb(191 219 254); /* blue-200 */
        color: rgb(30 64 175); /* blue-800 */
    }

    /* Table Component */
    .table {
        width: 100%;
        border-collapse: collapse;
    }

    .table th {
        padding: 0.75rem;
        text-align: left;
        font-size: 0.875rem;
        font-weight: 600;
        color: rgb(var(--color-gray-700));
        background-color: rgb(var(--color-gray-50));
        border-bottom: 2px solid rgb(var(--color-gray-200));
    }

    .table td {
        padding: 0.75rem;
        font-size: 0.875rem;
        border-bottom: 1px solid rgb(var(--color-gray-200));
    }

    .table tbody tr:hover {
        background-color: rgb(var(--color-gray-50));
    }

    /* Badge Component */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
        font-weight: 500;
        border-radius: 9999px;
    }

    .badge-success {
        background-color: rgb(220 252 231);
        color: rgb(22 101 52);
    }

    .badge-danger {
        background-color: rgb(254 226 226);
        color: rgb(153 27 27);
    }

    .badge-warning {
        background-color: rgb(254 243 199);
        color: rgb(146 64 14);
    }

    .badge-info {
        background-color: rgb(219 234 254);
        color: rgb(30 64 175);
    }

    .badge-gray {
        background-color: rgb(var(--color-gray-200));
        color: rgb(var(--color-gray-700));
    }

    /* Container */
    .container {
        width: 100%;
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Loading Spinner */
    .spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 0.6s linear infinite;
    }

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

@layer utilities {
    /* Utility classes */
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-left { text-align: left; }
    
    .mt-1 { margin-top: calc(var(--spacing-unit) * 1); }
    .mt-2 { margin-top: calc(var(--spacing-unit) * 2); }
    .mt-3 { margin-top: calc(var(--spacing-unit) * 3); }
    .mt-4 { margin-top: calc(var(--spacing-unit) * 4); }
    .mt-6 { margin-top: calc(var(--spacing-unit) * 6); }
    .mt-8 { margin-top: calc(var(--spacing-unit) * 8); }
    
    .mb-1 { margin-bottom: calc(var(--spacing-unit) * 1); }
    .mb-2 { margin-bottom: calc(var(--spacing-unit) * 2); }
    .mb-3 { margin-bottom: calc(var(--spacing-unit) * 3); }
    .mb-4 { margin-bottom: calc(var(--spacing-unit) * 4); }
    .mb-6 { margin-bottom: calc(var(--spacing-unit) * 6); }
    .mb-8 { margin-bottom: calc(var(--spacing-unit) * 8); }
    
    .ml-2 { margin-left: calc(var(--spacing-unit) * 2); }
    .mr-2 { margin-right: calc(var(--spacing-unit) * 2); }
    
    .p-4 { padding: calc(var(--spacing-unit) * 4); }
    .p-6 { padding: calc(var(--spacing-unit) * 6); }
    
    .flex { display: flex; }
    .inline-flex { display: inline-flex; }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }
    .gap-2 { gap: calc(var(--spacing-unit) * 2); }
    .gap-4 { gap: calc(var(--spacing-unit) * 4); }
    
    .hidden { display: none; }
    .block { display: block; }
    
    .text-sm { font-size: 0.875rem; }
    .text-xs { font-size: 0.75rem; }
    .text-lg { font-size: 1.125rem; }
    .text-xl { font-size: 1.25rem; }
    
    .font-bold { font-weight: 700; }
    .font-semibold { font-weight: 600; }
    .font-medium { font-weight: 500; }
    
    .w-full { width: 100%; }
    .max-w-md { max-width: 28rem; }
    .max-w-lg { max-width: 32rem; }
    .max-w-xl { max-width: 36rem; }
    
    .rounded { border-radius: var(--border-radius); }
    .rounded-lg { border-radius: 0.5rem; }
    
    .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
    .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
    
    /* Monitoring status indicator */
    .monitoring-status {
        font-size: 0.875rem;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-weight: 500;
    }
    
    .monitoring-status.status-success {
        background-color: rgb(var(--color-success-100));
        color: rgb(var(--color-success-700));
    }
    
    .monitoring-status.status-error {
        background-color: rgb(var(--color-danger-100));
        color: rgb(var(--color-danger-700));
    }
    
    .form-select {
        padding: 0.5rem 2.5rem 0.5rem 0.75rem;
        border: 1px solid rgb(var(--color-gray-300));
        border-radius: var(--border-radius);
        background-color: white;
        font-size: 0.875rem;
        cursor: pointer;
        appearance: none;
        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;
    }
    
    .form-select:focus {
        outline: none;
        border-color: rgb(var(--color-primary-500));
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
}