/* =============================================================================
 * PPS Portal v2.0 — Global Design System
 * =============================================================================
 * This file unifies the look and feel across ALL pages.
 * Applied globally via page-template.blade.php.
 *
 * Brand Colors:
 *   Primary Red:    #c62828 (PPS brand)
 *   Dark Red:       #b71c1c
 *   Light Red BG:   #fef2f2
 *   Dark Navy:      #344767 (text)
 *   Secondary:      #8392ab (muted text)
 *   Success:        #4caf50
 *   Warning:        #ff9800
 *   Info:           #2196f3
 * ============================================================================= */

/* ─── TYPOGRAPHY ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: #344767;
}
/* PPS Red for .text-danger headings */
h5.text-danger, h6.text-danger,
.card-header h5.text-danger,
.card-header h6.text-danger {
    color: #c62828 !important;
}
.text-danger {
    color: #c62828 !important;
}
.text-gradient.text-danger {
    background: linear-gradient(135deg, #c62828, #b71c1c) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.text-success { color: #43a047 !important; }
.text-warning { color: #fb8c00 !important; }
.text-info { color: #1e88e5 !important; }

/* ─── CARDS — Consistent rounded corners and shadow ──────────────────────── */
.card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
}
.card .card-header {
    border-radius: 12px 12px 0 0 !important;
}
.card .card-body {
    padding: 1.25rem;
}

/* ─── PAGE HEADERS — Unified red gradient for all page header bars ───────── */
.card-header.bg-gradient-primary,
.card-header.bg-gradient-danger,
.card-header.bg-gradient-info,
.card-header.bg-gradient-dark {
    background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%) !important;
}
.card-header.bg-gradient-primary h5,
.card-header.bg-gradient-primary h6,
.card-header.bg-gradient-danger h5,
.card-header.bg-gradient-danger h6,
.card-header.bg-gradient-info h5,
.card-header.bg-gradient-info h6,
.card-header.bg-gradient-dark h5,
.card-header.bg-gradient-dark h6 {
    color: #ffffff !important;
}

/* ─── BUTTONS — Primary action = PPS Red ─────────────────────────────────── */
.btn.bg-gradient-danger,
.btn.bg-gradient-primary {
    background: linear-gradient(135deg, #c62828, #b71c1c) !important;
    border: none !important;
    box-shadow: 0 3px 12px rgba(198, 40, 40, 0.25) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn.bg-gradient-danger:hover,
.btn.bg-gradient-primary:hover {
    box-shadow: 0 5px 16px rgba(198, 40, 40, 0.35) !important;
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* Secondary buttons */
.btn.bg-gradient-dark {
    background: linear-gradient(135deg, #344767, #1a2332) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}
.btn.bg-gradient-success {
    background: linear-gradient(135deg, #43a047, #2e7d32) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}
.btn.bg-gradient-warning {
    background: linear-gradient(135deg, #fb8c00, #ef6c00) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}
.btn.bg-gradient-info {
    background: linear-gradient(135deg, #1e88e5, #1565c0) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}
.btn.bg-gradient-secondary {
    border-radius: 8px !important;
    color: #ffffff !important;
}

/* Force white text on ALL gradient buttons — covers every variant */
.btn[class*="bg-gradient-"] {
    color: #ffffff !important;
}
.btn[class*="bg-gradient-"]:hover,
.btn[class*="bg-gradient-"]:focus,
.btn[class*="bg-gradient-"]:active {
    color: #ffffff !important;
}
.btn[class*="bg-gradient-"] span,
.btn[class*="bg-gradient-"] i,
.btn[class*="bg-gradient-"] .btn-inner--text,
.btn[class*="bg-gradient-"] .btn-inner--icon,
.btn[class*="bg-gradient-"] .material-icons,
.btn[class*="bg-gradient-"] .material-icons-round {
    color: #ffffff !important;
}

/* Standalone .btn-danger, .btn-success, etc. (non-gradient) */
.btn-danger, .btn-success, .btn-warning, .btn-info, .btn-dark, .btn-primary, .btn-secondary {
    color: #ffffff !important;
}
.btn-danger:hover, .btn-success:hover, .btn-warning:hover, .btn-info:hover, .btn-dark:hover, .btn-primary:hover {
    color: #ffffff !important;
}

/* Outline buttons */
.btn-outline-danger {
    border-color: #c62828 !important;
    color: #c62828 !important;
    border-radius: 8px !important;
}
.btn-outline-danger:hover {
    background: #c62828 !important;
    color: #fff !important;
}
.btn-outline-dark {
    border-radius: 8px !important;
}

/* ─── TABLES — Clean, readable ───────────────────────────────────────────── */
.table thead th {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8392ab !important;
    border-bottom: 2px solid #e9ecef !important;
    padding: 0.75rem 0.5rem !important;
}
.table tbody td {
    padding: 0.65rem 0.5rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f0f2f5 !important;
    font-size: 0.85rem;
}
.table tbody tr:hover {
    background: #fef2f2 !important;
}

/* ─── BADGES — Consistent styling ────────────────────────────────────────── */
.badge {
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
}
.badge.bg-gradient-danger,
.badge.bg-danger {
    background: linear-gradient(135deg, #c62828, #b71c1c) !important;
}
.badge.bg-gradient-success,
.badge.bg-success {
    background: linear-gradient(135deg, #43a047, #2e7d32) !important;
}
.badge.bg-gradient-warning,
.badge.bg-warning {
    background: linear-gradient(135deg, #fb8c00, #ef6c00) !important;
}
.badge.bg-gradient-info,
.badge.bg-info {
    background: linear-gradient(135deg, #1e88e5, #1565c0) !important;
}

/* ─── FORM INPUTS — Consistent height and styling ────────────────────────── */
.input-group-outline .form-control {
    border-radius: 8px !important;
}
.input-group-outline .form-control:focus {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.1) !important;
}
select.form-control {
    border-radius: 8px !important;
}

/* ─── PAGINATION — PPS Red active state ──────────────────────────────────── */
.page-item.active .page-link {
    background: #c62828 !important;
    border-color: #c62828 !important;
}
.page-link {
    color: #c62828 !important;
    border-radius: 6px !important;
}
.page-link:hover {
    background: #fef2f2 !important;
}

/* ─── ALERTS — Softer, rounded ───────────────────────────────────────────── */
.alert {
    border-radius: 10px !important;
    border: none !important;
}

/* ─── NAV PILLS (filter tabs) — PPS Red active ──────────────────────────── */
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #c62828, #b71c1c) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}
.nav-pills .nav-link {
    border-radius: 8px !important;
    color: #344767;
    font-weight: 600;
    font-size: 0.82rem;
}

/* ─── MODAL — Rounded, clean ─────────────────────────────────────────────── */
.modal-content {
    border-radius: 16px !important;
    border: none !important;
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid #f0f2f5;
}
.modal-footer {
    border-top: 1px solid #f0f2f5;
}

/* ─── ICON SHAPES — Consistent with brand ────────────────────────────────── */
.icon-shape.bg-gradient-danger {
    background: linear-gradient(135deg, #c62828, #b71c1c) !important;
}

/* ─── PAGE HEADER BANNERS (unsplash backgrounds) — Red overlay ───────────── */
.page-header .mask.bg-gradient-primary,
.page-header .mask.bg-gradient-dark {
    background: linear-gradient(135deg, rgba(198,40,40,0.85), rgba(183,28,28,0.9)) !important;
}

/* ─── SCROLLBAR — Thin, subtle ───────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ─── SWEETALERT — PPS branded ───────────────────────────────────────────── */
.swal2-confirm.btn.bg-gradient-danger,
.swal2-confirm.btn.bg-gradient-primary,
.swal2-confirm.btn.bg-gradient-success {
    border-radius: 8px !important;
}

/* ─── FORM SWITCH — Red when checked ─────────────────────────────────────── */
.form-check-input:checked {
    background-color: #c62828 !important;
    border-color: #c62828 !important;
}

/* ─── LOADING SPINNER — Centered ─────────────────────────────────────────── */
.loading {
    z-index: 9999;
}

/* ─── RESPONSIVE TWEAKS ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .card .card-body {
        padding: 1rem;
    }
    .table thead th {
        font-size: 0.6rem !important;
    }
    .table tbody td {
        font-size: 0.78rem;
    }
    h5 { font-size: 1.1rem; }
    h6 { font-size: 0.9rem; }
}