@import 'quasar/dist/quasar.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Global Theme Styles */
:root {
    /* Color System */
    --color-primary: #1976d2;
    --color-secondary: #26A69A;
    --color-accent: #9C27B0;
    --color-dark: #1d1d1d;
    --color-positive: #21BA45;
    --color-negative: #C10015;
    --color-info: #31CCEC;
    --color-warning: #F2C037;

    /* Typography */
    --font-family: 'Roboto', sans-serif;
    --font-size-base: 0.875rem; /* 14px */
    --line-height-base: 1.5;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border */
    --border-radius: 4px;
    --border-color: rgba(0, 0, 0, 0.12);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19);
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: rgba(0, 0, 0, 0.87);
    background-color: #fafafa;
}

/* Form Components Theme */
.q-field--outlined .q-field__control {
    background-color: white !important;
}
/* .q-field--labeled.q-field--dense .q-field__native, .q-field--labeled.q-field--dense .q-field__prefix, .q-field--labeled.q-field--dense .q-field__suffix */

.q-field__native {
    background-color: transparent !important;
}

.q-field--outlined.q-field--dense .q-field__control {
    border-radius: var(--border-radius);
}

.q-field--square .q-field__control {
    border-radius: 0 !important;
}

/* Card Theme */
.q-card {
    border-radius: var(--border-radius);
}

.q-card--bordered {
    border: 1px solid var(--border-color);
}
.q-field .q-placeholder {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Button Theme */
.q-btn {
    font-weight: 500;
    text-transform: none;
}

.q-btn--dense {
    padding: 6px 12px;
}

/* Table Theme */
.q-table {
    background-color: white;
}

.q-table__card {
    box-shadow: var(--shadow-sm);
}

.q-table thead tr,
.q-table tbody td {
    font-size: var(--font-size-base);
}

/* Utility Classes */
.text-muted {
    color: rgba(0, 0, 0, 0.6);
}

.bg-surface {
    background-color: #fafafa;
}

.bg-card {
    background-color: white;
}