:root {
    --kl-black: #0f1115;
    --kl-charcoal: #181b20;
    --kl-charcoal-2: #242832;
    --kl-ink: #1f2937;
    --kl-muted: #6b7280;
    --kl-soft: #f6f7f9;
    --kl-soft-2: #eef1f4;
    --kl-card: #ffffff;
    --kl-border: #e5e7eb;
    --kl-border-strong: #d1d5db;
    --kl-red: #e42b1f;
    --kl-red-dark: #b91f17;
    --kl-red-soft: #fde9e7;
    --kl-gold: #c9a24a;
    --kl-gold-dark: #9b7624;
    --kl-gold-soft: #fff7df;
    --kl-success: #16803c;
    --kl-success-soft: #e8f5ed;
    --kl-warning: #b7791f;
    --kl-warning-soft: #fff7df;
    --kl-shadow: 0 1px 2px rgba(15, 17, 21, 0.05);
    --kl-radius: 8px;
    --brand: var(--kl-charcoal);
    --brand-strong: var(--kl-black);
    --gold: var(--kl-gold);
    --primary: var(--kl-charcoal);
    --accent: var(--kl-red);
}

* {
    box-sizing: border-box;
}

html {
    background: var(--kl-soft);
}

body {
    background: var(--kl-soft) !important;
    color: var(--kl-ink);
    font-family: Inter, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

a {
    color: var(--kl-charcoal);
}

h1,
h2,
h3 {
    color: var(--kl-black);
    letter-spacing: 0;
}

.eyebrow,
.nav-title,
.panel-link {
    color: var(--kl-gold-dark) !important;
}

.sidebar,
.sidebar-nav,
.yard-ops-sidebar,
.admin-side,
.side,
.shell-sidebar {
    background: #111318 !important;
    color: #ffffff !important;
    border-right: 1px solid #252932;
    box-shadow: none;
}

.sidebar h2,
.sidebar-nav h2,
.sidebar-nav h3,
.yard-ops-sidebar h2,
.admin-side h2,
.side h2,
.shell-sidebar h2 {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    letter-spacing: 0;
}

.nav-link,
.sidebar a,
.sidebar-nav a,
.yard-ops-sidebar a,
.admin-side a,
.side a,
.shell-sidebar a {
    border-radius: var(--kl-radius) !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 700;
}

.nav-link:hover,
.nav-link.active,
.sidebar a:hover,
.sidebar a.active,
.sidebar-nav a:hover,
.sidebar-nav a.active,
.yard-ops-sidebar a:hover,
.yard-ops-sidebar a.active,
.admin-side a:hover,
.admin-side a.active,
.side a:hover,
.side a.active,
.shell-sidebar a:hover,
.shell-sidebar a.active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.nav-link.active,
.sidebar a.active,
.sidebar-nav a.active,
.yard-ops-sidebar a.active,
.admin-side a.active,
.side a.active,
.shell-sidebar a.active {
    box-shadow: inset 2px 0 0 var(--kl-gold);
}

.main-content,
.main,
.content {
    background: var(--kl-soft);
}

.card,
.operations-panel,
.panel,
.box,
.container-card,
.form-card,
.log-container,
.req-card,
.search-container,
.move-card,
.filter-card,
.list-box,
.form-box {
    background: var(--kl-card) !important;
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-radius) !important;
    box-shadow: var(--kl-shadow) !important;
}

button,
input[type="submit"],
input[type="button"],
.btn,
.btn-new,
.action-link,
.btn-confirm,
.btn-hold,
.btn-approve,
.btn-reject,
.btn-execute,
.btn-export {
    min-height: 42px;
    border-radius: var(--kl-radius) !important;
    font-weight: 800;
    letter-spacing: 0;
}

button,
input[type="submit"],
input[type="button"],
.btn,
.btn-new,
.btn-confirm,
.btn-hold,
.btn-approve,
.btn-reject,
.btn-execute,
.btn-export {
    border: 0;
    background: var(--kl-charcoal) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(15, 17, 21, 0.12);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.btn-new:hover,
.btn-confirm:hover,
.btn-hold:hover,
.btn-approve:hover,
.btn-reject:hover,
.btn-execute:hover,
.btn-export:hover {
    background: var(--kl-black) !important;
}

.btn-new {
    box-shadow: none !important;
}

.action-link {
    border: 1px solid var(--kl-charcoal) !important;
    background: #ffffff !important;
    color: var(--kl-charcoal) !important;
    box-shadow: none !important;
}

.action-link:hover {
    background: var(--kl-charcoal) !important;
    color: #ffffff !important;
}

table {
    border-collapse: collapse;
}

th {
    background: #f9fafb !important;
    color: var(--kl-muted) !important;
    font-weight: 800;
}

td,
th {
    border-color: var(--kl-border) !important;
}

tbody tr:hover {
    background: #fafafa;
}

input,
select,
textarea {
    border: 1px solid var(--kl-border-strong);
    border-radius: var(--kl-radius);
    min-height: 42px;
    background: #ffffff;
    color: var(--kl-ink);
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(15, 17, 21, 0.1);
    border-color: var(--kl-charcoal);
}

.status-badge,
.badge {
    border-radius: var(--kl-radius) !important;
}

.status-OPEN,
.status-ACTIVE,
.status-APPROVED,
.status-CLEARED {
    background: var(--kl-success-soft) !important;
    color: var(--kl-success) !important;
}

.status-PENDING,
.status-WAITING {
    background: var(--kl-gold-soft) !important;
    color: var(--kl-gold-dark) !important;
}

.status-HOLD,
.status-REJECTED,
.status-CANCELLED,
.status-DAMAGED {
    background: var(--kl-red-soft) !important;
    color: var(--kl-red-dark) !important;
}

.dwell-alert,
.danger,
.text-danger {
    color: var(--kl-red) !important;
}

@media (max-width: 1024px) {
    body {
        min-width: 0;
    }

    .sidebar {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        position: static !important;
        box-shadow: 0 10px 28px rgba(15, 17, 21, 0.12);
    }

    .main-content {
        padding: 20px !important;
    }

    table {
        font-size: 0.95rem;
    }

    td,
    th {
        padding: 14px 12px;
    }
}