@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

/* Red and Black Theme */
:root {
    --primary-red: #dc2626;
    --dark-red: #b91c1c;
    --light-red: #fecaca;
    --black: #000000;
    --dark-gray: #1f2937;
    --medium-gray: #374151;
    --light-gray: #6b7280;
    --white: #ffffff;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8fafc;
}

/* Navigation */
.navbar-dark {
    background-color: var(--black) !important;
}

.navbar-brand {
    color: var(--white) !important;
    font-weight: bold;
}

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

.btn-primary:hover {
    background-color: var(--dark-red);
    border-color: var(--dark-red);
}

/* Dashboard Cards */
.dashboard-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
}

.card-header {
    background-color: var(--black);
    color: var(--white);
    border-bottom: 2px solid var(--primary-red);
}

/* Sidebar */
.sidebar {
    background-color: var(--dark-gray);
    min-height: 100vh;
    color: var(--white);
}

.sidebar .nav-link {
    color: var(--white);
    padding: 10px 15px;
    margin: 5px 0;
    border-radius: 5px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: var(--primary-red);
    color: var(--white);
}

/* Tables */
.table th {
    background-color: var(--black);
    color: var(--white);
    border-color: var(--primary-red);
}

/* Badges */
.badge-red {
    background-color: var(--primary-red);
    color: var(--white);
}

/* Custom utilities */
.text-red {
    color: var(--primary-red) !important;
}

.bg-red {
    background-color: var(--primary-red) !important;
}

.border-red {
    border-color: var(--primary-red) !important;
}