/**
 * TMS - Transform Management System
 * Custom Styles
 */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Serenity:wght@300;400;500;700&display=swap');

/* Base styles */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Serenity', Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;    
}

main {
    flex: 1 0 auto;
}

.bg-primary1 {
    background-color: #000000;
}


/* Header and navbar styles */
header {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar {
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-link.active {
    font-weight: bold;
}


/* text styles */
h1 {
    font-size: 2rem;
    font-weight: 600;    
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;    
}
h3 {
    font-size: 1rem;
    font-weight: 600;    
}


/* Card styles */
.card {
    margin-bottom: 1.5rem;
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
    background-color: rgba(0, 0, 0, 0.03);
    cursor: pointer;
}

.card-header:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* Button styles */
.btn-primary {
    background-color: #000000;
    border-color: #ff0000;
}

.btn-primary:hover {
    background-color: #ff0000;
    border-color: #000000;
}


/* Form styles */
.form-control:focus, .form-select:focus {
    border-color: #bac8f3;
    box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
}

.form-select {
    font-size: 1rem;
}


/* DataTables customization */
.dataTables_wrapper .dataTables_length, 
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_info, 
.dataTables_wrapper .dataTables_paginate {
    margin-top: 1rem;
}

table.dataTable {
    border-collapse: collapse !important;
}

/* Collapsible elements */
[data-bs-toggle="collapse"] .fa-chevron-down {
    transition: transform 0.2s;
}

[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Dashboard card styles */
.dashboard-card {
    transition: transform 0.2s;
}

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

/* Utility classes */
.cursor-pointer {
    cursor: pointer;
}