/* ── PI Management System — Custom Styles ── */

body {
    background-color: #f5f6fa;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.navbar-dark.bg-dark {
    background-color: #1a3a5c !important;
}

.navbar-brand {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

/* Cards */
.card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s;
}
.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card-header {
    background-color: #fff;
    border-bottom: 2px solid #f0f0f0;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

/* Stats cards on dashboard */
.card.border-primary { border-top: 3px solid #0d6efd !important; }
.card.border-success { border-top: 3px solid #198754 !important; }
.card.border-info   { border-top: 3px solid #0dcaf0 !important; }

/* Tables */
.table > thead > tr > th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    font-weight: 600;
    border-bottom-width: 1px;
}

.table-hover > tbody > tr:hover {
    background-color: #f0f4ff;
}

/* PI Create page — item rows */
.pi-item-row td {
    vertical-align: middle;
}
.pi-item-row .item-amount {
    color: #0d6efd;
    min-width: 70px;
}

/* Buttons */
.btn {
    border-radius: 0.375rem;
}
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover {
    color: #fff;
}

/* Footer */
footer {
    color: #adb5bd;
    font-size: 0.8rem;
}

/* Alerts */
.alert {
    border: none;
    border-radius: 0.5rem;
}

/* Responsive table wrapper */
.table-responsive {
    border-radius: 0.5rem;
}

/* Total display card */
#total_display {
    font-size: 2rem;
}

/* Form focus */
.form-control:focus,
.form-select:focus {
    border-color: #1a3a5c;
    box-shadow: 0 0 0 0.2rem rgba(26, 58, 92, 0.15);
}

/* Print-friendly tweaks */
@media print {
    .navbar, footer, .btn, form, .alert {
        display: none !important;
    }
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}