/* ============================================================
   CPData Theme - Centralized Design System
   Modern, colorful UI for CPData business management
   Version: 1.0
   ============================================================ */

/* ---- Root Variables ---- */
:root {
    --cpd-blue:        #2563eb;
    --cpd-blue-dark:   #1d4ed8;
    --cpd-blue-light:  #3b82f6;
    --cpd-navy:        #1e3a5f;
    --cpd-navy-dark:   #162d4a;
    --cpd-teal:        #0891b2;
    --cpd-teal-dark:   #0e7490;
    --cpd-green:       #059669;
    --cpd-green-dark:  #047857;
    --cpd-red:         #dc2626;
    --cpd-red-dark:    #b91c1c;
    --cpd-amber:       #d97706;
    --cpd-amber-dark:  #b45309;
    --cpd-purple:      #7c3aed;
    --cpd-purple-dark: #6d28d9;
    --cpd-gray:        #4b5563;
    --cpd-gray-dark:   #374151;
    --cpd-shadow:      0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
    --cpd-shadow-lg:   0 10px 25px -3px rgba(0,0,0,.12), 0 4px 10px -2px rgba(0,0,0,.06);
    --cpd-radius:      0;
    --cpd-radius-lg:   0;
}


/* ============================================================
   CARD SYSTEM
   ============================================================ */

.card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: var(--cpd-shadow-lg) !important;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 15px 35px -5px rgba(0,0,0,.16), 0 6px 12px -3px rgba(0,0,0,.08) !important;
}

/* ---- Default card header (no Bootstrap bg-* class) ---- */
.card-header {
    background: var(--cpd-blue) !important;
    color: white !important;
    border-bottom: none !important;
    font-weight: 600;
    padding: 0.875rem 1.25rem;
}

/* ---- bg-white / bg-light → override to brand blue ---- */
.card-header.bg-white,
.card-header.bg-light {
    background: #4a90d9 !important;
    color: white !important;
}

/* ---- bg-primary ---- */
.card-header.bg-primary {
    background: var(--cpd-blue) !important;
    color: white !important;
}

/* ---- bg-success ---- */
.card-header.bg-success {
    background: var(--cpd-green) !important;
    color: white !important;
}

/* ---- bg-danger ---- */
.card-header.bg-danger {
    background: var(--cpd-red) !important;
    color: white !important;
}

/* ---- bg-warning ---- */
.card-header.bg-warning {
    background: var(--cpd-amber) !important;
    color: #1f2937 !important;
}

/* ---- bg-info ---- */
.card-header.bg-info {
    background: var(--cpd-teal) !important;
    color: white !important;
}

/* ---- bg-dark ---- */
.card-header.bg-dark {
    background: #374151 !important;
    color: white !important;
}

/* ---- bg-secondary ---- */
.card-header.bg-secondary {
    background: var(--cpd-gray) !important;
    color: white !important;
}

/* Ensure explicit text colour helpers on card headers keep working */
.card-header.text-dark  { color: #1f2937 !important; }
.card-header.text-white { color: white   !important; }

/* Icons inside card headers */
.card-header .fas,
.card-header .fab,
.card-header .far,
.card-header .fal,
.card-header .fa {
    opacity: .90;
}

/* Card body */
.card-body {
    background-color: #ffffff;
}

/* Colored cards (bg-primary, bg-success etc.) — keep Bootstrap color, make body transparent */
.card.bg-primary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning,
.card.bg-info,
.card.bg-dark,
.card.bg-secondary,
.card.bg-light {
    background-color: inherit;
}

.card.bg-primary .card-body,
.card.bg-success .card-body,
.card.bg-danger  .card-body,
.card.bg-warning .card-body,
.card.bg-info    .card-body,
.card.bg-dark    .card-body,
.card.bg-secondary .card-body,
.card.text-white .card-body {
    background-color: transparent !important;
}

/* Card footer */
.card-footer {
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
}


/* ============================================================
   MODAL SYSTEM
   ============================================================ */

.modal-content {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;
    overflow: hidden;
}

.modal-dialog .modal-content,
.modal-dialog .modal-header,
.modal-dialog .modal-footer,
.modal-dialog .modal-body {
    border-radius: 0 !important;
}

.modal-header {
    background: var(--cpd-navy) !important;
    color: white !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem;
}

.modal-header .modal-title {
    color: white !important;
    font-weight: 600;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: .8;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-footer {
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 !important;
}


/* ============================================================
   TABLE SYSTEM
   ============================================================ */

.table thead th,
.table th {
    background: var(--cpd-navy) !important;
    color: white !important;
    border: none !important;
    font-weight: 600;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(37, 99, 235, .04);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(37, 99, 235, .09) !important;
    cursor: default;
}

.table-responsive {
    border-radius: 0;
    overflow: hidden;
}


/* ============================================================
   SIDEBAR ENHANCEMENTS
   ============================================================ */

.sidebar {
    background: #1e2a3a !important;
}

.sidebar .nav-link {
    border-left: 3px solid transparent;
    transition: all .18s ease !important;
}

.sidebar .nav-link:hover {
    background-color: rgba(59, 130, 246, .18) !important;
    color: #93c5fd !important;
    border-left-color: var(--cpd-blue-light) !important;
}

.sidebar .nav-link.active {
    background: rgba(37, 99, 235, .25) !important;
    color: white !important;
    border-left-color: var(--cpd-blue-light) !important;
    font-weight: 600;
}


/* ============================================================
   BUTTON SYSTEM
   ============================================================ */

.btn {
    border-radius: .35rem !important;
    font-weight: 500;
    transition: all .18s ease;
}

.btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.btn:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

.btn-primary {
    background-color: var(--cpd-blue) !important;
    border-color: var(--cpd-blue-dark) !important;
}

.btn-success,
.btn-success-muted {
    background-color: var(--cpd-green) !important;
    border-color: var(--cpd-green-dark) !important;
    color: white !important;
}

.btn-danger,
.btn-danger-muted {
    background-color: var(--cpd-red) !important;
    border-color: var(--cpd-red-dark) !important;
    color: white !important;
}

.btn-warning {
    background-color: var(--cpd-amber) !important;
    border-color: var(--cpd-amber-dark) !important;
}

.btn-info {
    background-color: var(--cpd-teal) !important;
    border-color: var(--cpd-teal-dark) !important;
    color: white !important;
}

.btn-secondary {
    background-color: var(--cpd-gray) !important;
    border-color: var(--cpd-gray-dark) !important;
    color: white !important;
}

.btn-dark {
    background-color: #374151 !important;
    border-color: #111827 !important;
}

/* Outline variants */
.btn-outline-primary { color: var(--cpd-blue) !important; border-color: var(--cpd-blue) !important; }
.btn-outline-primary:hover { background-color: var(--cpd-blue) !important; color: white !important; }
.btn-outline-light { color: rgba(255,255,255,.9) !important; border-color: rgba(255,255,255,.5) !important; }
.btn-outline-light:hover { background-color: rgba(255,255,255,.15) !important; color: white !important; }


/* ============================================================
   ALERT ENHANCEMENTS
   ============================================================ */

.alert {
    border: none;
    border-left: 4px solid;
    border-radius: 0;
}

.alert-success {
    border-left-color: var(--cpd-green);
    background-color: #ecfdf5;
    color: #065f46;
}

.alert-danger,
.alert-error {
    border-left-color: var(--cpd-red);
    background-color: #fef2f2;
    color: #7f1d1d;
}

.alert-warning {
    border-left-color: var(--cpd-amber);
    background-color: #fffbeb;
    color: #78350f;
}

.alert-info {
    border-left-color: var(--cpd-teal);
    background-color: #f0f9ff;
    color: #0c4a6e;
}


/* ============================================================
   BADGE ENHANCEMENTS
   ============================================================ */

.badge {
    border-radius: .3rem;
    font-weight: 500;
    padding: .35em .65em;
    font-size: .78rem;
}

.badge.bg-primary   { background: var(--cpd-blue)   !important; }
.badge.bg-success   { background: var(--cpd-green)  !important; }
.badge.bg-danger    { background: var(--cpd-red)    !important; }
.badge.bg-warning   { background: var(--cpd-amber)  !important; color: #1f2937 !important; }
.badge.bg-info      { background: var(--cpd-teal)   !important; }
.badge.bg-secondary { background: var(--cpd-gray)   !important; }
.badge.bg-dark      { background: #374151            !important; }


/* ============================================================
   FORM ENHANCEMENTS
   ============================================================ */

.form-control:focus,
.form-select:focus {
    border-color: var(--cpd-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, .22) !important;
}

.form-control,
.form-select {
    border-radius: 0;
    border: 1.5px solid #d1d5db;
    transition: border-color .18s ease, box-shadow .18s ease;
}


/* ============================================================
   ICON HELPER CLASSES
   ============================================================ */

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0;
    flex-shrink: 0;
}

.icon-badge-blue   { background-color: rgba(37, 99, 235, .12);  color: var(--cpd-blue);   }
.icon-badge-green  { background-color: rgba(5, 150, 105, .12);  color: var(--cpd-green);  }
.icon-badge-red    { background-color: rgba(220, 38, 38, .12);  color: var(--cpd-red);    }
.icon-badge-amber  { background-color: rgba(217, 119, 6, .12);  color: var(--cpd-amber);  }
.icon-badge-teal   { background-color: rgba(8, 145, 178, .12);  color: var(--cpd-teal);   }
.icon-badge-purple { background-color: rgba(124, 58, 237, .12); color: var(--cpd-purple); }
.icon-badge-gray   { background-color: rgba(75, 85, 99, .12);   color: var(--cpd-gray);   }


/* ============================================================
   PAGE HEADER UTILITY
   ============================================================ */

.page-header {
    background: var(--cpd-blue);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 0;
    margin-bottom: 1.5rem;
    box-shadow: var(--cpd-shadow);
}

.page-header h1, .page-header h2, .page-header h3,
.page-header h4, .page-header h5, .page-header p {
    color: white;
    margin-bottom: 0;
}


/* ============================================================
   STAT / DASHBOARD CARDS
   ============================================================ */

.stat-card {
    border-radius: 0;
    padding: 1.25rem;
    box-shadow: var(--cpd-shadow);
    color: white;
}

.stat-card-blue   { background: var(--cpd-blue);   }
.stat-card-green  { background: var(--cpd-green);  }
.stat-card-amber  { background: var(--cpd-amber);  color: #1f2937; }
.stat-card-teal   { background: var(--cpd-teal);   }
.stat-card-purple { background: var(--cpd-purple); }
.stat-card-red    { background: var(--cpd-red);    }


/* ============================================================
   MISC ENHANCEMENTS
   ============================================================ */

/* Breadcrumb */
.breadcrumb-item.active { color: var(--cpd-blue); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cpd-blue-light); }

/* Pagination */
.page-item.active .page-link {
    background-color: var(--cpd-blue) !important;
    border-color: var(--cpd-blue-dark) !important;
}

.page-link {
    color: var(--cpd-blue);
    border-radius: 0;
}

.page-link:hover {
    color: var(--cpd-blue-dark);
    background-color: rgba(37, 99, 235, .08);
}

/* Scrollbar */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: #f1f5f9; }
::-webkit-scrollbar-thumb    { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cpd-blue); }

/* Toast container */
.toast-container { z-index: 1090; }

/* Dropdown */
.dropdown-item:active,
.dropdown-item:focus {
    background-color: var(--cpd-blue) !important;
    color: white !important;
}

/* List group */
.list-group-item.active {
    background-color: var(--cpd-blue) !important;
    border-color: var(--cpd-blue) !important;
}

/* Selection tile (instellingen page) */
.settings-tile {
    border-radius: 0 !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

.settings-tile:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.2) !important;
}

/* Nav tabs */
.nav-tabs .nav-link.active {
    color: var(--cpd-blue) !important;
    border-color: var(--cpd-blue) var(--cpd-blue) #fff !important;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    color: var(--cpd-blue-dark);
}

/* Progress bar */
.progress-bar {
    background-color: var(--cpd-blue);
}

/* Input group addon */
.input-group-text {
    background-color: #f0f4ff;
    color: var(--cpd-blue);
    border-color: #d1d5db;
}