/*
==============================================================================
Common.css
Attendance Management System

Reusable Components
- Typography
- Cards
- Buttons
- Forms
- Tables
- Alerts
- Badges
- Pagination
- Empty States
- Utilities
==============================================================================
*/

/*=============================================================================
Typography
=============================================================================*/

.page-title {

    margin: 0;

    font-size: 1.6rem;

    font-weight: 600;

    color: var(--text-dark);

}

.page-subtitle {

    margin-top: .25rem;

    color: var(--text-light);

    font-size: .95rem;

}

.section-title {

    margin-bottom: 1rem;

    font-size: 1.15rem;

    font-weight: 600;

}

/*=============================================================================
Cards
=============================================================================*/

.card {

    border: none;

    border-radius: 16px;

    background: var(--surface);

    box-shadow: var(--shadow-sm);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.card:hover {

    box-shadow: var(--shadow-md);

}

.card-header {

    background: transparent;

    border-bottom: 1px solid var(--border);

    padding: 1rem 1.25rem;

    font-weight: 600;

}

.card-body {

    padding: 1.25rem;

}

.card-footer {

    background: transparent;

    border-top: 1px solid var(--border);

}

/*=============================================================================
Buttons
=============================================================================*/

.btn {

    border-radius: 10px;

    font-weight: 500;

    transition:
        background .25s,
        color .25s,
        transform .15s,
        box-shadow .25s;

}

.btn:active {

    transform: scale(.98);

}

.btn-primary {

    background: var(--primary);

    border-color: var(--primary);

}

.btn-primary:hover {

    background: var(--primary-dark);

    border-color: var(--primary-dark);

}

.btn-outline-primary:hover {

    color: #fff;

}

/*=============================================================================
Form Controls
=============================================================================*/

.form-label {

    font-weight: 500;

    margin-bottom: .45rem;

}

.form-control,
.form-select {

    min-height: 44px;

    border-radius: 10px;

    border: 1px solid var(--border);

    transition:
        border-color .25s,
        box-shadow .25s;

}

.form-control:focus,
.form-select:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 .2rem rgba(37,99,235,.15);

}

.form-control.is-invalid,
.form-select.is-invalid {

    border-color: #DC3545;

}

.form-control.is-valid,
.form-select.is-valid {

    border-color: #198754;

}

textarea.form-control {

    min-height: 120px;

    resize: vertical;

}

/*=============================================================================
Input Group
=============================================================================*/

.input-group-text {

    background: #F8FAFC;

    border-color: var(--border);

}

/*=============================================================================
Tables
=============================================================================*/

.table {

    margin-bottom: 0;

    vertical-align: middle;

}

.table thead th {

    background: #F8FAFC;

    border-bottom: 2px solid var(--border);

    font-weight: 600;

    white-space: nowrap;

}

.table tbody tr {

    transition: background .2s;

}

.table-hover tbody tr:hover {

    background: rgba(37,99,235,.05);

}

.table td,
.table th {

    padding: .85rem 1rem;

}

/*=============================================================================
Badges
=============================================================================*/

.badge {

    padding: .45rem .65rem;

    border-radius: 20px;

    font-weight: 500;

}

/*=============================================================================
Alerts
=============================================================================*/

.alert {

    border: none;

    border-radius: 12px;

}

.alert-success {

    background: #ECFDF5;

    color: #047857;

}

.alert-danger {

    background: #FEF2F2;

    color: #B91C1C;

}

.alert-warning {

    background: #FFFBEB;

    color: #B45309;

}

.alert-info {

    background: #EFF6FF;

    color: #1D4ED8;

}

/*=============================================================================
Pagination
=============================================================================*/

.pagination .page-link {

    border-radius: 8px;

    margin: 0 .15rem;

    border: none;

    color: var(--text-dark);

}

.pagination .page-item.active .page-link {

    background: var(--primary);

    border-color: var(--primary);

}

/*=============================================================================
Breadcrumb
=============================================================================*/

.breadcrumb {

    margin-bottom: 1rem;

    background: transparent;

}

.breadcrumb-item+.breadcrumb-item::before {

    color: var(--text-light);

}

/*=============================================================================
Avatar
=============================================================================*/

.avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}

.avatar-sm {

    width: 32px;

    height: 32px;

}

.avatar-lg {

    width: 56px;

    height: 56px;

}

/*=============================================================================
Statistics Card
=============================================================================*/

.stat-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.stat-icon {

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 1.5rem;

}

.stat-value {

    font-size: 1.8rem;

    font-weight: 700;

}

.stat-label {

    color: var(--text-light);

}

/*=============================================================================
Search Box
=============================================================================*/

.search-box {

    position: relative;

}

.search-box .form-control {

    padding-left: 2.5rem;

}

.search-box i {

    position: absolute;

    left: .9rem;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-light);

}

/*=============================================================================
Empty State
=============================================================================*/

.empty-state {

    padding: 3rem 1rem;

    text-align: center;

}

.empty-state img {

    width: 180px;

    margin-bottom: 1rem;

}

.empty-state h5 {

    margin-bottom: .5rem;

}

.empty-state p {

    color: var(--text-light);

}

/*=============================================================================
Modal
=============================================================================*/

.modal-content {

    border: none;

    border-radius: 16px;

}

.modal-header {

    border-bottom: 1px solid var(--border);

}

.modal-footer {

    border-top: 1px solid var(--border);

}

/*=============================================================================
Utilities
=============================================================================*/

.cursor-pointer {

    cursor: pointer;

}

.user-select-none {

    user-select: none;

}

.text-truncate-2 {

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.border-dashed {

    border: 2px dashed var(--border);

}

.bg-primary-light {

    background: var(--primary-light);

}

.shadow-hover:hover {

    box-shadow: var(--shadow-md);

}

.w-60 {

    width: 60px;

}

.w-80 {

    width: 80px;

}

.w-120 {

    width: 120px;
}

.min-vh-50 {

    min-height: 50vh;

}

.transition {

    transition: all .25s ease;

}