/*
 * DeltaARBIM admin theme — white, orange, near-black.
 *
 * The panel shipped as stock Bootstrap 5.3 + AdminLTE: blue buttons, blue
 * links, a pale sidebar. Nothing about it said DeltaARBIM, so moving between
 * deltaarbim.tech and the panel that feeds it felt like two different
 * products. This is the same treatment the Shivlam admin already has, with
 * DeltaARBIM's own tokens rather than Shivlam's saffron.
 *
 * The palette is taken from the website's own tokens, not approximated:
 *   --background  #0d0d0d   (app/globals.css)
 *   orange-400    #fb923c   (the accent, used ~488 times across the site)
 *
 * Loaded last, so it overrides the CDN stylesheets without forking them.
 * Everything here is a variable override or a narrow selector; deleting this
 * one file returns the admin to stock.
 */

:root {
    --da-orange: #fb923c;
    --da-orange-600: #ea7c22;
    --da-orange-700: #c2620f;
    --da-orange-soft: rgba(251, 146, 60, 0.12);
    --da-black: #0d0d0d;
    --da-black-soft: #151515;
    --da-line: rgba(255, 255, 255, 0.09);

    /* Bootstrap's own tokens, repointed. */
    --bs-primary: var(--da-orange);
    --bs-primary-rgb: 251, 146, 60;
    --bs-link-color: var(--da-orange-600);
    --bs-link-hover-color: var(--da-orange-700);
    --bs-link-color-rgb: 234, 124, 34;
    --bs-focus-ring-color: rgba(251, 146, 60, 0.28);
}

/* ---------- Buttons ---------- */

.btn-primary {
    --bs-btn-bg: var(--da-orange);
    --bs-btn-border-color: var(--da-orange);
    --bs-btn-color: #1a1206;
    --bs-btn-hover-bg: var(--da-orange-600);
    --bs-btn-hover-border-color: var(--da-orange-600);
    --bs-btn-hover-color: #1a1206;
    --bs-btn-active-bg: var(--da-orange-700);
    --bs-btn-active-border-color: var(--da-orange-700);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--da-orange);
    --bs-btn-disabled-border-color: var(--da-orange);
    --bs-btn-disabled-color: #1a1206;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--da-orange-600);
    --bs-btn-border-color: var(--da-orange);
    --bs-btn-hover-bg: var(--da-orange);
    --bs-btn-hover-border-color: var(--da-orange);
    --bs-btn-hover-color: #1a1206;
    --bs-btn-active-bg: var(--da-orange-600);
    --bs-btn-active-border-color: var(--da-orange-600);
    --bs-btn-active-color: #fff;
}

/* Secondary reads as black-on-white here, not Bootstrap's grey. */
.btn-outline-secondary {
    --bs-btn-color: #2b2b2b;
    --bs-btn-border-color: #d5d5d5;
    --bs-btn-hover-bg: var(--da-black);
    --bs-btn-hover-border-color: var(--da-black);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--da-black);
    --bs-btn-active-border-color: var(--da-black);
}

.btn-dark {
    --bs-btn-bg: var(--da-black);
    --bs-btn-border-color: var(--da-black);
    --bs-btn-hover-bg: #232323;
    --bs-btn-hover-border-color: #232323;
}

/* ---------- Sidebar: the black half of the pairing ---------- */

.app-sidebar,
.sidebar-wrapper {
    background: var(--da-black) !important;
    border-right: 1px solid var(--da-line) !important;
}

.app-sidebar .brand-link,
.app-sidebar .brand-text {
    color: #fff !important;
    border-bottom: 1px solid var(--da-line) !important;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.app-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.68) !important;
    border-radius: 8px;
    margin: 2px 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-sidebar .nav-link .nav-icon {
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.15s ease;
}

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

.app-sidebar .nav-link:hover .nav-icon {
    color: var(--da-orange);
}

/* The current section is the one thing in the sidebar that carries colour. */
.app-sidebar .nav-link.active {
    background: var(--da-orange) !important;
    color: #1a1206 !important;
    font-weight: 600;
}

.app-sidebar .nav-link.active .nav-icon {
    color: #1a1206;
}

.app-sidebar .nav-header {
    color: rgba(255, 255, 255, 0.34) !important;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-top: 1rem;
}

/* ---------- Header ---------- */

.app-header {
    border-bottom: 1px solid #e7e7e7 !important;
}

/* ---------- Content surfaces stay white ---------- */

.card {
    border: 1px solid #e9e9e9;
    border-radius: 10px;
}

.card-header {
    background: #fff !important;
    border-bottom: 1px solid #ededed !important;
    font-weight: 600;
}

/* ---------- Tables ---------- */

.table > thead th {
    background: #fafafa;
    color: #2b2b2b;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    border-bottom: 2px solid #ececec;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--da-orange-soft);
}

/* ---------- Forms ---------- */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--da-orange);
    box-shadow: 0 0 0 0.2rem rgba(251, 146, 60, 0.2);
}

.form-check-input:checked {
    background-color: var(--da-orange);
    border-color: var(--da-orange);
}

/* A required field should look required before the form is submitted, not
   after. The asterisk is generated, so no markup has to change. */
label.required::after,
.form-label.required::after {
    content: " *";
    color: #d9534f;
    font-weight: 700;
}

/* ---------- Lists, badges, accents ---------- */

.list-group-item.active {
    background-color: var(--da-orange);
    border-color: var(--da-orange);
    color: #1a1206;
    font-weight: 600;
}

.list-group-item-action:hover {
    background-color: var(--da-orange-soft);
}

.badge.bg-primary,
.badge-soft-primary {
    background-color: var(--da-orange) !important;
    color: #1a1206 !important;
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--da-orange);
    color: var(--da-orange-700);
    font-weight: 600;
}

.text-primary {
    color: var(--da-orange-600) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--da-orange-soft);
    color: #1a1206;
    box-shadow: inset 0 -1px 0 rgba(251, 146, 60, 0.3);
}

.accordion-button:focus {
    border-color: var(--da-orange);
    box-shadow: 0 0 0 0.2rem rgba(251, 146, 60, 0.2);
}

.page-item.active .page-link {
    background-color: var(--da-orange);
    border-color: var(--da-orange);
    color: #1a1206;
}

.page-link {
    color: var(--da-orange-600);
}

a {
    text-decoration-color: rgba(251, 146, 60, 0.4);
}

/* DataTables' own controls, which ship their own blue. */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--da-orange) !important;
    border-color: var(--da-orange) !important;
    color: #1a1206 !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--da-orange);
    box-shadow: 0 0 0 0.2rem rgba(251, 146, 60, 0.2);
}

/* ---------- Login ---------- */

/* The login card is the one screen a signed-out person sees, and it was pure
   stock Bootstrap. This ties it to the same palette without touching its
   markup. */
.login-box .card,
.register-box .card {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(13, 13, 13, 0.06);
}

/* ---------- Focus visibility ---------- */

/* Keyboard focus was inheriting Bootstrap's blue ring against an orange
   palette. Same ring, brand colour, and never removed: an admin that cannot
   be tabbed through is an admin that cannot be used one-handed on a phone. */
:focus-visible {
    outline: 2px solid var(--da-orange);
    outline-offset: 2px;
}