/* ============================================================
   HPCL Admin Portal - Custom Styles
   Loaded after AdminLTE to override/extend styles
   ============================================================ */

/* ── Google Font fallback (if offline) ── */
body {
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
}

/* ── CSS Variables ── */
:root {
    --hpcl-primary:   #667eea;
    --hpcl-secondary: #764ba2;
    --hpcl-gradient:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --hpcl-dark:      #1a1a2e;
    --hpcl-darker:    #16213e;
    --hpcl-sidebar:   #0f3460;
    --hpcl-danger:    #e74c3c;
    --hpcl-success:   #2ecc71;
    --hpcl-radius:    10px;
    --hpcl-shadow:    0 4px 20px rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.main-sidebar,
.brand-link {
    background: linear-gradient(180deg, var(--hpcl-dark) 0%, var(--hpcl-darker) 100%) !important;
    border-right: none !important;
}

.brand-link {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 14px 16px !important;
}

.brand-text {
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: #fff !important;
    letter-spacing: 2px !important;
}

.brand-text span.accent { color: var(--hpcl-danger); }

.nav-sidebar .nav-item > .nav-link {
    color: rgba(255,255,255,0.7) !important;
    border-radius: 8px !important;
    margin: 2px 10px !important;
    padding: 9px 14px !important;
    transition: all 0.2s ease !important;
}

.nav-sidebar .nav-item > .nav-link:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

.nav-sidebar .nav-item > .nav-link.active {
    background: var(--hpcl-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(102,126,234,0.45) !important;
}

.nav-sidebar .nav-header {
    color: rgba(255,255,255,0.35) !important;
    font-size: 0.68rem !important;
    letter-spacing: 1.8px !important;
    padding: 12px 18px 4px !important;
}

.nav-sidebar .nav-icon {
    width: 1.4rem !important;
    font-size: 0.95rem !important;
}

/* User panel */
.user-panel {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.user-panel .info a {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 600 !important;
}

.user-panel .image img {
    border: 2px solid rgba(255,255,255,0.25) !important;
}

/* ══════════════════════════════════════════
   TOP NAVBAR
══════════════════════════════════════════ */
.main-header.navbar {
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    border-bottom: none !important;
    min-height: 56px !important;
}

.main-header .nav-link {
    color: #555 !important;
    transition: color 0.2s;
}

.main-header .nav-link:hover { color: var(--hpcl-primary) !important; }

/* ══════════════════════════════════════════
   CONTENT AREA
══════════════════════════════════════════ */
.content-wrapper {
    background: #f4f6f9 !important;
}

.content-header h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #2d3748 !important;
}

.breadcrumb {
    background: transparent !important;
    font-size: 0.82rem !important;
}

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card {
    border: none !important;
    border-radius: var(--hpcl-radius) !important;
    box-shadow: var(--hpcl-shadow) !important;
    margin-bottom: 1.5rem !important;
}

.card-header {
    background: var(--hpcl-gradient) !important;
    color: #fff !important;
    border-radius: var(--hpcl-radius) var(--hpcl-radius) 0 0 !important;
    border-bottom: none !important;
    padding: 14px 20px !important;
    font-weight: 600 !important;
}

.card-header .card-title {
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.card-header .btn-light {
    background: rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #fff !important;
    border-radius: 7px !important;
    font-size: 0.82rem !important;
    transition: all 0.2s;
}

.card-header .btn-light:hover {
    background: rgba(255,255,255,0.35) !important;
}

.card-footer {
    background: #fafbfc !important;
    border-top: 1px solid #eee !important;
    border-radius: 0 0 var(--hpcl-radius) var(--hpcl-radius) !important;
}

/* ══════════════════════════════════════════
   INFO BOXES (Dashboard)
══════════════════════════════════════════ */
.info-box {
    border-radius: var(--hpcl-radius) !important;
    box-shadow: var(--hpcl-shadow) !important;
    border: none !important;
    min-height: 80px !important;
}

.info-box-icon {
    border-radius: var(--hpcl-radius) 0 0 var(--hpcl-radius) !important;
    width: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.6rem !important;
}

.info-box-number {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

.btn-primary {
    background: var(--hpcl-gradient) !important;
    border: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
    box-shadow: 0 6px 18px rgba(102,126,234,0.45) !important;
    transform: translateY(-1px) !important;
    background: var(--hpcl-gradient) !important;
}

.btn-outline-primary {
    border-color: var(--hpcl-primary) !important;
    color: var(--hpcl-primary) !important;
}

.btn-outline-primary:hover {
    background: var(--hpcl-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.btn-sm { font-size: 0.78rem !important; padding: 4px 10px !important; }

/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
.table th {
    border-top: none !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #6c757d !important;
    background: #f8f9fa !important;
    padding: 12px 16px !important;
}

.table td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    font-size: 0.875rem !important;
    color: #444 !important;
}

.table-hover tbody tr:hover {
    background: #f0f4ff !important;
}

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-control {
    border-radius: 8px !important;
    border: 1px solid #dde2ec !important;
    font-size: 0.875rem !important;
    padding: 9px 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.form-control:focus {
    border-color: var(--hpcl-primary) !important;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15) !important;
}

label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin-bottom: 5px !important;
}

.custom-file-label {
    border-radius: 8px !important;
    border: 1px solid #dde2ec !important;
    font-size: 0.875rem !important;
}

.custom-file-label::after {
    border-radius: 0 8px 8px 0 !important;
    background: var(--hpcl-gradient) !important;
    color: #fff !important;
    font-weight: 500 !important;
}

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-content {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
}

.modal-header {
    border-radius: 14px 14px 0 0 !important;
    padding: 16px 22px !important;
}

.modal-body { padding: 22px !important; }
.modal-footer { padding: 14px 22px !important; }

/* ══════════════════════════════════════════
   BADGES
══════════════════════════════════════════ */
.badge {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.3px !important;
    padding: 4px 8px !important;
}

.badge-success { background: #d4edda !important; color: #155724 !important; }
.badge-danger  { background: #f8d7da !important; color: #721c24 !important; }
.badge-info    { background: #d1ecf1 !important; color: #0c5460 !important; }
.badge-warning { background: #fff3cd !important; color: #856404 !important; }

/* ══════════════════════════════════════════
   ALERTS
══════════════════════════════════════════ */
.alert {
    border: none !important;
    border-radius: var(--hpcl-radius) !important;
    font-size: 0.875rem !important;
}

.alert-success { background: #d4edda !important; color: #155724 !important; }
.alert-danger  { background: #f8d7da !important; color: #721c24 !important; }

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
.pagination .page-link {
    border-radius: 7px !important;
    margin: 0 2px !important;
    border: 1px solid #dee2e6 !important;
    color: var(--hpcl-primary) !important;
    font-size: 0.82rem !important;
    transition: all 0.2s !important;
}

.pagination .page-item.active .page-link {
    background: var(--hpcl-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.pagination .page-link:hover {
    background: #f0f4ff !important;
    color: var(--hpcl-primary) !important;
}

/* ══════════════════════════════════════════
   TOGGLE SWITCH
══════════════════════════════════════════ */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--hpcl-primary) !important;
    border-color: var(--hpcl-primary) !important;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.main-footer {
    background: #fff !important;
    border-top: 1px solid #eee !important;
    font-size: 0.82rem !important;
    color: #888 !important;
    padding: 12px 20px !important;
}

/* ══════════════════════════════════════════
   SCROLLBAR (Webkit)
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--hpcl-primary); }

/* ══════════════════════════════════════════
   RESPONSIVE TWEAKS
══════════════════════════════════════════ */
@media (max-width: 768px) {
    .content-header h1 { font-size: 1.2rem !important; }
    .info-box-icon { width: 60px !important; font-size: 1.2rem !important; }
    .card-header { padding: 12px 14px !important; }
}

.cke_notification_warning { display: none !important; }