:root {
    --telkom-red: #e42313;
    --telkom-red-dark: #b91c1c;
    --telkom-red-soft: #fff1f1;
    --telkom-border: #fecaca;
    --telkom-text: #1f2937;
    --telkom-muted: #6b7280;
    --telkom-surface: #ffffff;
    --telkom-page: #f8fafc;
}

.telkom-logo {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.telkom-logo-sm {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.telkom-logo-center {
    margin-inline: auto;
}

.sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--telkom-border) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--telkom-border);
    border-radius: 999px;
}

html,
body {
    background: var(--telkom-page) !important;
    color: var(--telkom-text) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(228, 35, 19, 0.08), rgba(255, 255, 255, 0.9) 34%),
        radial-gradient(circle at top right, rgba(228, 35, 19, 0.12), transparent 32%);
}

[class*="bg-[#0b0e14]"],
[class*="bg-[#0b1120]"],
[class*="bg-[#0f172a]"] {
    background-color: var(--telkom-page) !important;
}

[class*="bg-[#161b22]"],
[class*="bg-[#1e293b]"],
[class*="bg-[#1e2235]"],
[class*="bg-[#282c44]"],
[class*="bg-[#1d2432]"],
.bg-gray-700,
.bg-gray-800,
.bg-gray-900 {
    background-color: var(--telkom-surface) !important;
}

[class*="border-[#1f2937]"],
[class*="border-[#30363d]"],
[class*="border-[#334155]"],
[class*="border-[#373d5a]"],
[class*="border-[#2d324a]"],
[class*="border-[#1e293b]"] {
    border-color: var(--telkom-border) !important;
}

.text-white,
.text-gray-300 {
    color: var(--telkom-text) !important;
}

.text-gray-400,
.text-gray-500 {
    color: var(--telkom-muted) !important;
}

.text-blue-300,
.text-blue-400,
.text-blue-500,
.text-blue-600 {
    color: var(--telkom-red) !important;
}

.bg-blue-400,
.bg-blue-500,
.bg-blue-600,
.bg-indigo-900,
.from-blue-600,
.to-indigo-900,
.from-gray-700,
.to-gray-900 {
    background-color: var(--telkom-red) !important;
    --tw-gradient-from: var(--telkom-red) !important;
    --tw-gradient-to: var(--telkom-red-dark) !important;
}

.hover\:bg-blue-400:hover,
.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover {
    background-color: var(--telkom-red-dark) !important;
}

.border-blue-300,
.border-blue-400,
.border-blue-500,
.focus\:border-blue-500:focus,
.hover\:border-blue-500:hover {
    border-color: var(--telkom-red) !important;
}

.shadow-blue-500\/20,
.shadow-blue-500\/30,
.shadow-blue-600\/30 {
    --tw-shadow-color: rgba(228, 35, 19, 0.25) !important;
}

input,
select,
textarea {
    background-color: #ffffff !important;
    border-color: var(--telkom-border) !important;
    color: var(--telkom-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af !important;
}

button.bg-blue-600,
button.bg-blue-500,
a.bg-blue-600,
a.bg-blue-500,
button[class*="bg-[#94b3ff]"],
.file\:bg-blue-600::file-selector-button {
    background-color: var(--telkom-red) !important;
    color: #ffffff !important;
}

button.bg-blue-600:hover,
button.bg-blue-500:hover,
a.bg-blue-600:hover,
a.bg-blue-500:hover,
button[class*="bg-[#94b3ff]"]:hover,
.hover\:file\:bg-blue-500:hover::file-selector-button {
    background-color: var(--telkom-red-dark) !important;
}

button.text-white,
a.text-white,
.bg-blue-400 .text-white,
.bg-blue-500 .text-white,
.bg-blue-600 .text-white,
.bg-red-500 .text-white,
.bg-red-600 .text-white {
    color: #ffffff !important;
}

button,
a[role="button"],
input[type="submit"],
input[type="button"] {
    font-weight: 700;
}

button[class*="bg-red-"],
a[class*="bg-red-"],
button[class*="bg-blue-"],
a[class*="bg-blue-"],
button[class*="bg-green-"],
a[class*="bg-green-"],
button[class*="bg-emerald-"],
a[class*="bg-emerald-"],
button[class*="bg-amber-"],
a[class*="bg-amber-"],
button[class*="bg-orange-"],
a[class*="bg-orange-"],
button[class*="bg-slate-"],
a[class*="bg-slate-"],
button[class*="bg-gray-"],
a[class*="bg-gray-"],
button[class*="bg-[#334155]"],
a[class*="bg-[#334155]"],
button[class*="bg-[#475569]"],
a[class*="bg-[#475569]"],
button[class*="bg-[#1e293b]"],
a[class*="bg-[#1e293b]"] {
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
}

button[class*="bg-red-"],
a[class*="bg-red-"],
button[class*="bg-blue-"],
a[class*="bg-blue-"],
button[class*="bg-[#94b3ff]"],
a[class*="bg-[#94b3ff]"] {
    background-color: var(--telkom-red) !important;
}

button[class*="bg-red-"]:hover,
a[class*="bg-red-"]:hover,
button[class*="bg-blue-"]:hover,
a[class*="bg-blue-"]:hover,
button[class*="bg-[#94b3ff]"]:hover,
a[class*="bg-[#94b3ff]"]:hover {
    background-color: var(--telkom-red-dark) !important;
}

button[class*="bg-green-"],
a[class*="bg-green-"],
button[class*="bg-emerald-"],
a[class*="bg-emerald-"] {
    background-color: #047857 !important;
}

button[class*="bg-green-"]:hover,
a[class*="bg-green-"]:hover,
button[class*="bg-emerald-"]:hover,
a[class*="bg-emerald-"]:hover {
    background-color: #065f46 !important;
}

button[class*="bg-amber-"],
a[class*="bg-amber-"],
button[class*="bg-orange-"],
a[class*="bg-orange-"] {
    background-color: #b45309 !important;
}

button[class*="bg-amber-"]:hover,
a[class*="bg-amber-"]:hover,
button[class*="bg-orange-"]:hover,
a[class*="bg-orange-"]:hover {
    background-color: #92400e !important;
}

button[class*="bg-slate-"],
a[class*="bg-slate-"],
button[class*="bg-gray-"],
a[class*="bg-gray-"],
button[class*="bg-[#334155]"],
a[class*="bg-[#334155]"],
button[class*="bg-[#475569]"],
a[class*="bg-[#475569]"],
button[class*="bg-[#1e293b]"],
a[class*="bg-[#1e293b]"] {
    background-color: #475569 !important;
}

button[class*="bg-slate-"]:hover,
a[class*="bg-slate-"]:hover,
button[class*="bg-gray-"]:hover,
a[class*="bg-gray-"]:hover,
button[class*="bg-[#334155]"]:hover,
a[class*="bg-[#334155]"]:hover,
button[class*="bg-[#475569]"]:hover,
a[class*="bg-[#475569]"]:hover,
button[class*="bg-[#1e293b]"]:hover,
a[class*="bg-[#1e293b]"]:hover {
    background-color: #334155 !important;
}

button[class*="border-"]:not([class*="bg-"]),
a[class*="border-"]:not([class*="bg-"]) {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

button[class*="border-"]:not([class*="bg-"]):hover,
a[class*="border-"]:not([class*="bg-"]):hover {
    background-color: #f8fafc !important;
    border-color: var(--telkom-red) !important;
    color: var(--telkom-red) !important;
}

button:disabled,
button[disabled],
a[aria-disabled="true"] {
    background-color: #cbd5e1 !important;
    color: #64748b !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Function-based button palette for the white Telkom theme. */
button[class*="bg-blue-"],
a[class*="bg-blue-"] {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

button[class*="bg-blue-"]:hover,
a[class*="bg-blue-"]:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

button[class*="bg-blue-100"],
a[class*="bg-blue-100"] {
    background-color: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e3a8a !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12) !important;
}

button[class*="bg-blue-100"]:hover,
a[class*="bg-blue-100"]:hover {
    background-color: #bfdbfe !important;
    color: #1e3a8a !important;
}

button[class*="bg-[#94b3ff]"],
a[class*="bg-[#94b3ff]"] {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

button[class*="bg-[#94b3ff]"]:hover,
a[class*="bg-[#94b3ff]"]:hover {
    background-color: #15803d !important;
}

button[class*="bg-green-"],
a[class*="bg-green-"],
button[class*="bg-emerald-"],
a[class*="bg-emerald-"] {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

button[class*="bg-green-"]:hover,
a[class*="bg-green-"]:hover,
button[class*="bg-emerald-"]:hover,
a[class*="bg-emerald-"]:hover {
    background-color: #15803d !important;
    border-color: #15803d !important;
}

button[class*="bg-red-"],
a[class*="bg-red-"] {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

button[class*="bg-red-"]:hover,
a[class*="bg-red-"]:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

button[class*="bg-orange-"],
a[class*="bg-orange-"],
button[class*="bg-amber-"],
a[class*="bg-amber-"] {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

button[class*="bg-orange-"]:hover,
a[class*="bg-orange-"]:hover,
button[class*="bg-amber-"]:hover,
a[class*="bg-amber-"]:hover {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
}

button[class*="bg-gray-"],
a[class*="bg-gray-"],
button[class*="bg-slate-"],
a[class*="bg-slate-"],
button[class*="bg-[#334155]"],
a[class*="bg-[#334155]"],
button[class*="bg-[#475569]"],
a[class*="bg-[#475569]"],
button[class*="bg-[#1e293b]"],
a[class*="bg-[#1e293b]"],
button[class*="bg-[#0f172a]"],
a[class*="bg-[#0f172a]"] {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

button[class*="bg-gray-"]:hover,
a[class*="bg-gray-"]:hover,
button[class*="bg-slate-"]:hover,
a[class*="bg-slate-"]:hover,
button[class*="bg-[#334155]"]:hover,
a[class*="bg-[#334155]"]:hover,
button[class*="bg-[#475569]"]:hover,
a[class*="bg-[#475569]"]:hover,
button[class*="bg-[#1e293b]"]:hover,
a[class*="bg-[#1e293b]"]:hover,
button[class*="bg-[#0f172a]"]:hover,
a[class*="bg-[#0f172a]"]:hover {
    background-color: #475569 !important;
    border-color: #475569 !important;
}

.nav-link[class*="bg-[#1e293b]"],
.nav-link[class*="bg-[#1d2432]"],
a.nav-link[class*="bg-[#1e293b]"],
a.nav-link[class*="bg-[#1d2432]"] {
    background-color: var(--telkom-red-soft) !important;
    border-color: var(--telkom-border) !important;
    color: var(--telkom-red) !important;
    box-shadow: none !important;
}

.nav-link:hover {
    background-color: var(--telkom-red-soft) !important;
    border-color: var(--telkom-border) !important;
    color: var(--telkom-red) !important;
}

.nav-link:hover {
    background-color: var(--telkom-red-soft) !important;
    color: var(--telkom-red) !important;
}

.nav-link[class*="bg-[#1e293b]"],
.nav-link[class*="bg-[#1d2432]"] {
    background-color: var(--telkom-red-soft) !important;
    border-color: var(--telkom-border) !important;
    color: var(--telkom-red) !important;
}

table thead,
[class*="divide-[#334155]"] > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--telkom-border) !important;
}

tbody tr:hover {
    background-color: var(--telkom-red-soft) !important;
}

video,
canvas,
img {
    border-color: var(--telkom-border) !important;
}