html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    padding-bottom: 60px;
    margin-bottom: 0;
}


/*override metronic */
.kt-card-square {
    border-radius: 0 !important;
}
.kt-badge-success {
    color: #1f2937 !important; /* Tailwind text-gray-800 hex */
}


/* -------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------- */

/* Light mode */
html.light .breadcrumb-icon {
    color: #135DEF !important; /* gray-800 (dark icon for light mode) */
}

/* Dark mode */
html.dark .breadcrumb-icon {
    color: #facc15 !important; /* yellow-400 or any bright color */
}

/* -------------------------------------------------------
   DATATABLES – METRONIC 9 + TAILWIND + DARK MODE SUPPORT
   ------------------------------------------------------- */

/* ===== BUTTONS (EXPORT, MANAGE, COLUMN VISIBILITY) ===== */
table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td {
    padding-left: 1rem !important; /* Increase left padding */
    padding-right: 1rem !important; /* Increase right padding */
}

.dt-btn {
    background-color: #3b82f6; /* blue-500 */
    color: #fff;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color .15s ease-in-out;
}

    .dt-btn:hover {
        background-color: #2563eb;
    }
/* blue-600 */

/* Manage button (dark look) */
.dt-btn-manage {
    background-color: #1f2937; /* gray-800 */
}

    .dt-btn-manage:hover {
        background-color: #374151; /* gray-700 */
    }

/* Collection dropdown items */
.dt-button-collection .dt-button {
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #374151;
}

    .dt-button-collection .dt-button:hover {
        background-color: #f3f4f6; /* gray-100 */
    }

/* ========== SEARCH INPUT ========== */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    margin-left: 0.25rem;
}

/* ========== LENGTH DROPDOWN ========== */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* ========== DATA TABLE HEADER ========== */
table.dataTable thead th {
    background-color:#FDC417;
    color: #2C2F34 !important; /* gray-800 */
    font-weight: 900;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

/* ========== DATA TABLE BODY ========== */
table.dataTable tbody td {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid #f3f4f6;
}

/* Hover */
table.dataTable tbody tr:hover {
    background-color: #FDC407; /* gray-50 */
}

/* Striped rows */
table.dataTable.stripe tbody tr:nth-child(even),
table.dataTable.display tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

/* ========== PAGINATION ========== */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
    margin: 0 0.125rem;
    font-size: 0.75rem;
    background-color: #fff;
    color: #374151;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #f3f4f6;
        color: #111827;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #2563eb;
        border-color: #2563eb;
        color: #fff !important;
    }

/* Info text */
.dataTables_wrapper .dataTables_info {
    font-size: 0.75rem;
    color: #4b5563;
}

/* ----------------------------------------------------
   DARK MODE SUPPORT – FULL METRONIC 9 ALIGNMENT
   ---------------------------------------------------- */
.dark table.dataTable thead th {
    background-color: #1f2937; /* gray-800 */
    color: #f3f4f6;
    border-bottom: 1px solid #374151;
}

.dark table.dataTable tbody td {
    color: #e5e7eb;
    border-bottom: 1px solid #1f2937;
}

.dark table.dataTable tbody tr:hover {
    background-color: #111827;
}

.dark table.dataTable.stripe tbody tr:nth-child(even) {
    background-color: #111827;
}

/* DARK MODE PAGINATION */
.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

    .dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #374151;
        color: #fff;
    }

    .dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #2563eb;
        border-color: #2563eb;
        color: #fff !important;
    }

/* Dark mode search + length */
.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select {
    background-color: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

.dark .dataTables_wrapper .dataTables_info {
    color: #9ca3af;
}

/* DARK MODE BUTTONS */
.dark .dt-btn,
.dark .dt-btn-manage {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

    .dark .dt-btn:hover,
    .dark .dt-btn-manage:hover {
        background-color: #4b5563;
    }

/* DARK MODE WRAPPERS */
.dark .kt-card,
.dark .kt-card-square,
.dark .dataTables_wrapper {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #1f2937 !important;
}

/* ========== ADVANCED FILTER BUILDER ========== */
#dynamic-filters {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 1rem;
    border-radius: 0.375rem;
}

.dark #dynamic-filters {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Inputs + selects inside filter builder */
.filter-condition select,
.filter-condition input {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
}

.dark .filter-condition select,
.dark .filter-condition input {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

    .dark .filter-condition input::placeholder {
        color: #9ca3af !important;
    }

/* Filter action buttons */
.filter-actions button {
    font-size: 0.75rem;
}

/* Dark mode: advanced filter panel + text */
.dark #dynamic-filters {
    background-color: #1f2937 !important; /* gray-800 */
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

    /* Ensure ALL text inside the filter panel is visible in dark mode */
    .dark #dynamic-filters,
    .dark #dynamic-filters * {
        color: #e5e7eb !important; /* gray-200 */
    }
/* Dark mode: Keep Add / Clear filter buttons colored */
.dark #add-filter {
    background-color: #059669 !important; /* emerald-600 */
    color: #ffffff !important;
}

.dark #clear-filter {
    background-color: #d97706 !important; /* amber-600 */
    color: #ffffff !important;
}
.dark table.dataTable tbody tr:hover {
    background-color: #059669 !important; /* gray-900 */
}

/* Default DataTables button look */
.dt-btn {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s ease-in-out;
}

    .dt-btn:hover {
        background-color: #2563eb; /* blue-600 */
    }

/* Manage button special look */
.dt-btn-manage {
    background-color: #6b7280; /* gray-500 */
}

    .dt-btn-manage:hover {
        background-color: #4b5563; /* gray-600 */
    }

/* Dark mode parent buttons */
.dark .dt-btn {
    background-color: #334155; /* slate-700 */
    color: #f8fafc; /* slate-50 */
}

    .dark .dt-btn:hover {
        background-color: #475569; /* slate-600 */
    }

.dark .dt-btn-manage {
    background-color: #1e293b; /* slate-800 */
}

    .dark .dt-btn-manage:hover {
        background-color: #334155; /* slate-700 */
    }

/* Dropdown menu container */
.dt-button-collection {
    border-radius: 0.5rem !important;
    background-color: white !important;
    padding: 0.25rem 0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

    /* Items inside dropdown */
    .dt-button-collection .dt-button {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
        color: #374151 !important; /* gray-700 */
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }

        .dt-button-collection .dt-button:hover {
            background-color: #f3f4f6 !important; /* gray-100 */
        }

.dark .dt-button-collection {
    background-color: #1f2937 !important; /* gray-800 */
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}

    .dark .dt-button-collection .dt-button {
        color: #e5e7eb !important; /* gray-200 */
    }

        .dark .dt-button-collection .dt-button:hover {
            background-color: #374151 !important; /* gray-700 */
        }

/* Restore button in Columns menu */
/* Last item in the dropdown = Restore */
.dt-button-collection .dt-button:last-child {
    font-weight: 600 !important;
}

.dark .dt-button-collection .dt-button:last-child {
    color: #f3f4f6 !important;
}

/* ===================================================== */
/* OBJECTIVES RATING CARD                                */
/* ===================================================== */

.objectives-rating-card {
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid #e4e6ef !important;

    font-size: 14px !important;
}

/* =============================== */
/* HEADER                          */
/* =============================== */
.objectives-rating-header {
    background-color: #e10600 !important; /* Red header */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 12px !important;
    text-transform: uppercase !important;

}

/* =============================== */
/* TABLE BASE                      */
/* =============================== */
.objectives-rating-table th,
.objectives-rating-table td {
    padding: 14px 10px !important;
    vertical-align: middle !important;
    border-color: #000 !important;
    border-top: 1px solid #000 !important;
}

/* Dotted separator between rows */
.rating-score-row td {
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
}

/* =============================== */
/* TITLE ROW COLORS                */
/* =============================== */
.rating-title-row th {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;

}

/* Column colors (match image) */
.rating-unacceptable {
    background-color: #ff0000 !important;
}

.rating-basic {
    background-color: #ffc000 !important;
    color: #000000 !important;
}

.rating-successful {
    background-color: #92d050 !important;
    color: #000000;
}

.rating-exceeds {
    background-color: #9dc3e6 !important;
    color: #000000 !important;
}

.rating-outstanding {
    background-color: #002060 !important;
}

/* =============================== */
/* LETTER GRADE ROW                */
/* =============================== */
.rating-letter-row td {
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #000 !important;
}

/* =============================== */
/* FOOTER TEXT                     */
/* =============================== */
.objectives-rating-card .card-footer {
    font-size: 13px !important;
    line-height: 1.6 !important;
}
body {
    margin-bottom: 0px; /* IMPORTANT */
    padding-bottom: 0px; /* replaces old margin */
    background: transparent;
}