@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f8f9fa; /* Light background color */ color: #212529; /* Dark text color */ line-height: 1.6; -webkit-font-smoothing: antialiased; }

:root { /* Custom color variables */
        --primary: #4E49E2; --secondary: #2ecc71;
        --success: #27ae60; --info: #4E49E2; 
        --warning: #f39c12; --danger: #e74c3c; 
        --light: #f8f9fa; --dark: #343a40; 
        /* Spacing */
        --spacer: 1rem; 
        --input-padding-y: 0.8rem; 
        --input-padding-x: 1rem; 
        --btn-padding-y: 0.75rem; 
        --btn-padding-x: 1.5rem; 
        /* Border radius */ 
        --border-radius: 0.5rem; --border-radius-lg: 0.75rem; --border-radius-sm: 0.25rem; 
        /* Fonts */ --font-family-base: 'Segoe UI', system-ui, -apple-system, sans-serif; 
        --font-weight-normal: 400; --font-weight-bold: 600; }

/* Modern input styling */
.form-control,
.form-select { padding: var(--input-padding-y) var(--input-padding-x); border-radius: var(--border-radius); border: 1px solid #ced4da; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }

.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.25rem rgba(31, 188, 146, 0.25); }

/* Floating labels */
.form-control { padding: var(--input-padding-y) var(--input-padding-x); }


/* Modern button styling */
.btn { padding: var(--btn-padding-y) var(--btn-padding-x); border-radius: var(--border-radius); font-weight: var(--font-weight-bold); text-transform: none; transition: all 0.2s ease-in-out; border: none; }

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

.btn-primary:hover { background-color: #3e3abc; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

.btn-secondary { background-color: var(--secondary); }

.btn-secondary:hover { background-color: #27ae60; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

/* Card styling */
.card { border-radius: var(--border-radius-lg); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); border: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }

.card:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }

.card-header { background-color: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 1.25rem 1.5rem; }

.card-body { padding: 1.5rem; }



.nav-link { font-weight: var(--font-weight-bold); padding: 0.5rem 1rem !important; border-radius: var(--border-radius); transition: background-color 0.2s ease; }

.nav-link:hover { background-color: rgba(31, 188, 146, 0.1); }

/* Table styling */
.table { border-radius: var(--border-radius); overflow: hidden; }

.table thead th { background-color: rgba(0, 0, 0, 0.03); border-bottom: none; font-weight: var(--font-weight-bold); }

/* Badges */
.badge { padding: 0.5em 0.75em; font-weight: var(--font-weight-normal); border-radius: 20px; }

/* Custom utilities */
.shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; }

.shadow { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; }

.shadow-lg { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important; }

/* Spacing utilities */
.spacer-sm { margin-bottom: calc(var(--spacer) * 1) !important; }

.spacer-md { margin-bottom: calc(var(--spacer) * 2) !important; }

.spacer-lg { margin-bottom: calc(var(--spacer) * 3) !important; }

/*custom modal ui*/
.modal-content { border-radius: var(--border-radius-lg); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
.modal-header { border-bottom: none; padding: 1.25rem 1.5rem; }
.modal-title { font-size: 1.5rem; font-weight: var(--font-weight-bold); color: #343a40; }
.modal-body { padding: 1.5rem; color: #495057; font-size: 1rem; line-height: 1.6; }
.modal-footer { border-top: none; padding: 1.25rem 1.5rem; display: flex; justify-content: flex-end; }
.modal-footer .btn { margin-left: 0.5rem; }
.modal-footer .btn:first-child { margin-left: 0; }
.modal-footer .btn-primary { background-color: var(--primary); border-color: var(--primary); }