/*
 * StreamFlow v2.1 - Live Streaming Lewat VPS
 * 
 * Custom Features & UI Components
 * Created by: Bang Tutorial
 * GitHub: https://github.com/bangtutorial

 * © 2026 Bang Tutorial - All rights reserved
 */

@font-face {
  font-family: 'tabler-icons';
  src: url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.30.0/fonts/tabler-icons.woff2') format('woff2');
  font-display: block;
  font-weight: normal;
  font-style: normal;
}

.ti {
  font-family: 'tabler-icons' !important;
  visibility: visible !important;
  opacity: 1;
}

.sidebar-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 4rem;
  margin: 0 auto;
  margin-bottom: 0.75rem;
  color: white;
  border-radius: 0.75rem;
  transition-property: all;
  transition-timing-function: linear;
  transition-duration: 300ms;
  cursor: pointer;
}

.sidebar-icon:hover {
  background-color: var(--primary-color);
  color: white;
  border-radius: 0.75rem;
}

.sidebar-tooltip {
  position: absolute;
  width: auto;
  padding: 0.5rem;
  margin: 0.5rem;
  min-width: max-content;
  left: 5rem;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  color: white;
  background-color: #121212;
  font-size: 0.75rem;
  font-weight: bold;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  transform: scale(0);
  transform-origin: left;
}

.sidebar-icon:hover .sidebar-tooltip {
  transform: scale(1);
}

:root {
  --primary-color: #0078D4;
}

body {
  font-family: 'Inter', sans-serif;
}

.modal-overlay {
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease-in-out;
}

.modal-container {
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.modal-overlay.active {
  opacity: 1;
}

.modal-overlay.active .modal-container {
  transform: scale(1);
  opacity: 1;
}

[onclick^="setVideoOrientation"] {
  position: relative;
  overflow: hidden;
}

[onclick^="setVideoOrientation"]:before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary-color);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

[onclick^="setVideoOrientation"].bg-primary:before {
  opacity: 0.1;
}

[onclick^="setVideoOrientation"]:hover:before {
  opacity: 0.05;
}

[onclick^="setVideoOrientation"] i {
  transition: transform 0.2s ease-in-out;
}

[onclick^="setVideoOrientation"]:active i {
  transform: scale(0.9);
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #374151;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #6b7280 #374151;
}

/* Spin Animation - Use Tailwind's built-in or define if needed */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ti.animate-spin {
  animation: spin 1s linear infinite !important;
  display: inline-block;
}

@media (max-width: 768px) {
  .modal-container {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
  
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .modal-form-group {
    margin-bottom: 1rem;
  }
  
  .modal-input {
    padding: 0.75rem;
    font-size: 16px;
  }
}

/* ==========================================================
 * StreamFlow Custom Design - Windows 11 Flat UI
 * Scope: tampilan saja. Tidak mengubah logo, icon, favicon,
 * backend, route, service Rotation, scheduler, atau streaming.
 * ========================================================== */
:root {
  --primary-color: #0078d4;
  --sf-accent: #0078d4;
  --sf-accent-hover: #106ebe;
  --sf-accent-soft: rgba(0, 120, 212, 0.16);
  --sf-bg: #0c111b;
  --sf-shell: #101722;
  --sf-surface: #151d2a;
  --sf-surface-2: #1c2533;
  --sf-surface-3: #243044;
  --sf-border: rgba(148, 163, 184, 0.18);
  --sf-border-strong: rgba(148, 163, 184, 0.28);
  --sf-text: #f8fafc;
  --sf-muted: #94a3b8;
  --sf-muted-2: #64748b;
  --sf-danger: #dc2626;
  --sf-danger-hover: #b91c1c;
  --sf-success: #16a34a;
  --sf-warning: #d97706;
  --sf-radius: 0px;
  --sf-radius-sm: 0px;
}

html {
  color-scheme: dark;
  background: var(--sf-bg) !important;
}

body {
  font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--sf-bg) !important;
  color: var(--sf-text) !important;
  letter-spacing: 0 !important;
}

body::selection {
  background: rgba(0, 120, 212, 0.45);
  color: #ffffff;
}

/* Flat Windows-style surfaces */
body .bg-dark-900,
body .bg-gray-900 {
  background-color: var(--sf-bg) !important;
}

body .bg-dark-800,
body .bg-gray-800 {
  background-color: var(--sf-surface) !important;
}

body .bg-dark-700,
body .bg-gray-700 {
  background-color: var(--sf-surface-2) !important;
}

body .bg-dark-600,
body .bg-gray-600 {
  background-color: var(--sf-surface-3) !important;
}

body .bg-primary,
body .peer:checked ~ .peer-checked\:bg-primary {
  background-color: var(--sf-accent) !important;
}

body .text-primary {
  color: var(--sf-accent) !important;
}

body .border-primary,
body .focus\:border-primary:focus {
  border-color: var(--sf-accent) !important;
}

body .ring-primary,
body .focus\:ring-primary:focus {
  --tw-ring-color: var(--sf-accent) !important;
}

body .border-gray-700,
body .border-gray-600,
body .border-gray-600\/50,
body .border-gray-700\/50 {
  border-color: var(--sf-border) !important;
}

body .text-gray-500 { color: var(--sf-muted-2) !important; }
body .text-gray-400 { color: var(--sf-muted) !important; }
body .text-gray-300 { color: #cbd5e1 !important; }
body .text-gray-200 { color: #e2e8f0 !important; }
body .text-white { color: var(--sf-text) !important; }

/* Remove old 3D feel: no heavy shadows, no glow, no raised buttons */
body .shadow,
body .shadow-sm,
body .shadow-md,
body .shadow-lg,
body .shadow-xl,
body .shadow-2xl {
  box-shadow: none !important;
}

body .rounded-xl,
body .rounded-lg,
body .rounded-md {
  border-radius: var(--sf-radius) !important;
}

body .rounded {
  border-radius: var(--sf-radius-sm) !important;
}

/* App shell */
body div[class*="lg:fixed"][class*="lg:flex-col"][class*="w-20"],
body div[class*="lg:fixed"][class*="top-0"][class*="left-20"],
body div[class*="lg:hidden"][class*="fixed"][class*="top-0"],
body div[class*="lg:hidden"][class*="fixed"][class*="bottom-0"] {
  background-color: var(--sf-shell) !important;
  border-color: var(--sf-border) !important;
  box-shadow: none !important;
}

body div[class*="lg:fixed"][class*="lg:flex-col"][class*="w-20"] {
  border-right: 1px solid var(--sf-border) !important;
}

body div[class*="lg:fixed"][class*="top-0"][class*="left-20"] {
  border-bottom: 1px solid var(--sf-border) !important;
}

/* Sidebar and bottom navigation */
.sidebar-icon {
  width: 3.75rem !important;
  height: 3.75rem !important;
  border-radius: var(--sf-radius) !important;
  color: var(--sf-muted) !important;
  background: transparent !important;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease !important;
}

.sidebar-icon:hover {
  background-color: var(--sf-surface-2) !important;
  color: var(--sf-text) !important;
}

.sidebar-icon.bg-primary,
.sidebar-icon[class*="bg-primary"] {
  background-color: var(--sf-accent) !important;
  color: #ffffff !important;
}

.sidebar-tooltip,
#profile-dropdown,
#mobile-profile-popup,
#mobile-notification-popup,
#notification-dropdown,
[id$="Dropdown"],
[id$="dropdown"] {
  background-color: var(--sf-surface) !important;
  border: 1px solid var(--sf-border) !important;
  box-shadow: none !important;
  border-radius: var(--sf-radius) !important;
}

.bottom-nav-item {
  color: var(--sf-muted) !important;
  transition: color 120ms ease, background-color 120ms ease !important;
}

.bottom-nav-item:hover {
  color: var(--sf-text) !important;
  background-color: rgba(148, 163, 184, 0.08) !important;
}

.bottom-nav-active {
  color: var(--sf-accent) !important;
}

.bottom-nav-active::before {
  background-color: var(--sf-accent) !important;
  border-radius: 0 0 3px 3px !important;
}

/* Cards, tables, panels, list items */
body .bg-gray-800.rounded-lg,
body .bg-dark-800.rounded-lg,
body .bg-dark-800.rounded-xl,
body .bg-dark-700.rounded-lg,
body .bg-gray-800.rounded-xl,
body .gallery-grid-item,
body .file-item,
body .folder-drop-target,
body form .bg-dark-800,
body [class*="bg-dark-800"][class*="rounded"],
body [class*="bg-gray-800"][class*="rounded"] {
  border: 1px solid var(--sf-border) !important;
  box-shadow: none !important;
}

body .hover\:bg-dark-700:hover,
body .hover\:bg-dark-700\/50:hover,
body .hover\:bg-dark-600:hover,
body .hover\:bg-gray-700\/30:hover,
body .hover\:bg-gray-700\/50:hover,
body .hover\:bg-gray-600:hover,
body .hover\:border-gray-600:hover {
  background-color: var(--sf-surface-2) !important;
  border-color: var(--sf-border-strong) !important;
}

body table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body thead,
body thead.bg-gray-700,
body thead.bg-dark-700 {
  background-color: var(--sf-surface-2) !important;
}

body tbody tr {
  transition: background-color 100ms ease !important;
}

body tbody tr:hover {
  background-color: rgba(148, 163, 184, 0.07) !important;
}

body .divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--sf-border) !important;
}

/* Buttons */
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
a[class*="px-"][class*="py-"] {
  box-shadow: none !important;
}

button[class*="bg-primary"],
a[class*="bg-primary"],
.bg-primary[class*="px-"],
.bg-primary[class*="py-"] {
  background-color: var(--sf-accent) !important;
  border: 1px solid transparent !important;
  border-radius: var(--sf-radius-sm) !important;
  box-shadow: none !important;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease !important;
}

button[class*="bg-primary"]:hover,
a[class*="bg-primary"]:hover,
body .hover\:bg-blue-600:hover,
body .hover\:bg-blue-500:hover {
  background-color: var(--sf-accent-hover) !important;
}

button[class*="bg-dark-700"],
a[class*="bg-dark-700"],
button[class*="bg-gray-700"],
a[class*="bg-gray-700"] {
  background-color: var(--sf-surface-2) !important;
  border-color: var(--sf-border) !important;
  border-radius: var(--sf-radius-sm) !important;
}

button[class*="bg-dark-700"]:hover,
a[class*="bg-dark-700"]:hover,
button[class*="bg-gray-700"]:hover,
a[class*="bg-gray-700"]:hover {
  background-color: var(--sf-surface-3) !important;
}

body .bg-red-600,
button[class*="bg-red-600"],
a[class*="bg-red-600"] {
  background-color: var(--sf-danger) !important;
}

body .hover\:bg-red-700:hover,
button[class*="bg-red-600"]:hover,
a[class*="bg-red-600"]:hover {
  background-color: var(--sf-danger-hover) !important;
}

body .bg-green-600,
button[class*="bg-green-600"],
a[class*="bg-green-600"] {
  background-color: var(--sf-success) !important;
}

body .hover\:bg-green-500:hover,
button[class*="bg-green-600"]:hover,
a[class*="bg-green-600"]:hover {
  background-color: #15803d !important;
}

/* Inputs and form controls */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
select {
  background-color: #101827 !important;
  border: 1px solid var(--sf-border) !important;
  color: var(--sf-text) !important;
  border-radius: var(--sf-radius-sm) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 120ms ease, background-color 120ms ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
textarea:hover,
select:hover {
  border-color: var(--sf-border-strong) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
textarea:focus,
select:focus {
  background-color: #0f1726 !important;
  border-color: var(--sf-accent) !important;
  box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.26) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--sf-muted-2) !important;
}

/* Progress bars, badges, pills */
body .rounded-full.bg-gray-700,
body .rounded-full.bg-dark-700 {
  background-color: #273244 !important;
}

body [id$="bar"].bg-primary,
body [id*="bar"].bg-primary,
body .h-2\.5.bg-primary,
body .h-1\.5.bg-primary {
  background-color: var(--sf-accent) !important;
}

body .bg-blue-100 { background-color: rgba(0, 120, 212, 0.18) !important; }
body .text-blue-800 { color: #93c5fd !important; }
body .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; }
body .text-purple-800 { color: #d8b4fe !important; }
body .bg-green-100 { background-color: rgba(34, 197, 94, 0.16) !important; }
body .text-green-800 { color: #86efac !important; }
body .bg-red-100 { background-color: rgba(220, 38, 38, 0.16) !important; }
body .text-red-800 { color: #fca5a5 !important; }

/* Modals: flat sheet style */
.modal-overlay,
body [class*="fixed"][class*="inset-0"][class*="bg-black"] {
  backdrop-filter: none !important;
}

.modal-container,
body [id$="ModalContent"],
body [class*="modal-container"],
body [id$="Modal"] > div > div[class*="bg-dark-800"] {
  background-color: var(--sf-surface) !important;
  border: 1px solid var(--sf-border) !important;
  box-shadow: none !important;
  border-radius: var(--sf-radius) !important;
}

/* Upload/drop zones */
body .border-dashed {
  background-color: rgba(148, 163, 184, 0.05) !important;
  border-color: var(--sf-border-strong) !important;
}

body .border-dashed:hover,
body .drag-over,
body #rootDropZone:hover {
  border-color: var(--sf-accent) !important;
  background-color: var(--sf-accent-soft) !important;
}

/* Auth and welcome screens */
body .min-h-screen > .w-full.max-w-md,
body .min-h-screen .max-w-md.bg-dark-800,
body .min-h-screen .max-w-lg.bg-dark-800 {
  background-color: var(--sf-surface) !important;
  border: 1px solid var(--sf-border) !important;
  box-shadow: none !important;
}

.donate-button,
.saweria-button {
  background: var(--sf-surface-2) !important;
  border: 1px solid var(--sf-border) !important;
  box-shadow: none !important;
  color: var(--sf-text) !important;
  transform: none !important;
}

.donate-button:hover,
.saweria-button:hover {
  background: var(--sf-surface-3) !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.saweria-button span,
.saweria-button .text-gray-800 {
  color: var(--sf-text) !important;
}

/* Clean scrollbars */
.custom-scrollbar::-webkit-scrollbar,
body *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track {
  background: var(--sf-bg) !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
  background: #334155 !important;
  border: 2px solid var(--sf-bg) !important;
  border-radius: 999px !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover {
  background: #475569 !important;
}

.custom-scrollbar,
body * {
  scrollbar-width: thin;
  scrollbar-color: #334155 var(--sf-bg);
}

/* Small polish */
body h1,
body h2,
body h3,
body h4 {
  letter-spacing: -0.01em;
}

body .transition-all,
body .transition-colors,
body .transition-transform {
  transition-duration: 120ms !important;
}

body .scale-95 {
  transform: none !important;
}

body .hover\:scale-105:hover,
body .group:hover .group-hover\:scale-100 {
  transform: none !important;
}

body img[alt*="Logo"],
body img[src*="logo"] {
  filter: none !important;
}



/* ==========================================================
 * StreamFlow Custom Design - Sharp Square Corners Patch
 * User preference: no rounded corners anywhere.
 * Makes previews, cards, buttons, inputs, modals, tables,
 * thumbnails, progress bars, dropdowns, and scrollbars square.
 * ========================================================== */
body .rounded,
body .rounded-sm,
body .rounded-md,
body .rounded-lg,
body .rounded-xl,
body .rounded-2xl,
body .rounded-3xl,
body .rounded-full,
body [class*="rounded-"],
body [class~="rounded"],
body button,
body a,
body input,
body select,
body textarea,
body .sidebar-icon,
body .sidebar-tooltip,
body .modal-container,
body .gallery-grid-item,
body .file-item,
body .folder-drop-target,
body .donate-button,
body .saweria-button,
body table,
body thead,
body tbody,
body tr,
body th,
body td,
body img,
body video,
body iframe,
body canvas,
body audio,
body progress,
body [id*="preview"],
body [class*="preview"],
body [class*="card"],
body [class*="panel"],
body [class*="modal"],
body [class*="dropdown"],
body [class*="Dropdown"],
body [class*="tooltip"],
body [class*="badge"],
body [class*="pill"],
body [class*="avatar"],
body [class*="thumbnail"] {
  border-radius: 0 !important;
}

body *::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-track {
  border-radius: 0 !important;
}

.bottom-nav-active::before,
body .bottom-nav-active::before {
  border-radius: 0 !important;
}


/* ==========================================================
 * StreamFlow Theme Variant - Windows 11 Classic Square Dark
 * Purpose: darker, more rigid, professional control-panel look.
 * Scope: visual only.
 * ========================================================== */
:root {
  --primary-color: #0a84ff;
  --sf-accent: #0a84ff;
  --sf-accent-hover: #006fd6;
  --sf-accent-soft: rgba(10, 132, 255, 0.10);
  --sf-bg: #0a0d12;
  --sf-shell: #0d1117;
  --sf-surface: #11161d;
  --sf-surface-2: #161c24;
  --sf-surface-3: #1c2430;
  --sf-border: rgba(255, 255, 255, 0.10);
  --sf-border-strong: rgba(255, 255, 255, 0.18);
  --sf-text: #f3f6fb;
  --sf-muted: #a7b2c2;
  --sf-muted-2: #7e8a9b;
  --sf-danger: #c83c3c;
  --sf-danger-hover: #b52e2e;
  --sf-success: #1f9d55;
  --sf-warning: #c9801b;
  --sf-radius: 0px;
  --sf-radius-sm: 0px;
}

html,
body {
  background: var(--sf-bg) !important;
}

body {
  color: var(--sf-text) !important;
}

/* Make the shell more like a rigid admin panel */
body .bg-dark-900,
body .bg-gray-900 {
  background-color: var(--sf-bg) !important;
}

body .bg-dark-800,
body .bg-gray-800,
body form .bg-dark-800,
body [class*="bg-dark-800"],
body [class*="bg-gray-800"] {
  background-color: var(--sf-surface) !important;
}

body .bg-dark-700,
body .bg-gray-700 {
  background-color: var(--sf-surface-2) !important;
}

body .bg-dark-600,
body .bg-gray-600 {
  background-color: var(--sf-surface-3) !important;
}

/* Hard borders, no softness */
body .bg-dark-800,
body .bg-dark-700,
body .bg-dark-600,
body .bg-gray-800,
body .bg-gray-700,
body .bg-gray-600,
body .gallery-grid-item,
body .file-item,
body .folder-drop-target,
body .modal-container,
body #profile-dropdown,
body #mobile-profile-popup,
body #mobile-notification-popup,
body #notification-dropdown,
body [id$="Dropdown"],
body [id$="dropdown"],
body table,
body thead,
body tbody,
body tr,
body th,
body td {
  border-color: var(--sf-border) !important;
  box-shadow: none !important;
}

/* Sidebar and top bar */
body div[class*="lg:fixed"][class*="lg:flex-col"][class*="w-20"],
body div[class*="lg:fixed"][class*="top-0"][class*="left-20"],
body div[class*="lg:hidden"][class*="fixed"][class*="top-0"],
body div[class*="lg:hidden"][class*="fixed"][class*="bottom-0"] {
  background-color: var(--sf-shell) !important;
  border-color: var(--sf-border) !important;
}

.sidebar-icon {
  width: 3.55rem !important;
  height: 3.55rem !important;
  background: transparent !important;
  color: var(--sf-muted) !important;
  border: 1px solid transparent !important;
}

.sidebar-icon:hover {
  background-color: var(--sf-surface-2) !important;
  color: var(--sf-text) !important;
  border-color: var(--sf-border) !important;
}

.sidebar-icon.bg-primary,
.sidebar-icon[class*="bg-primary"] {
  background-color: var(--sf-accent) !important;
  border-color: var(--sf-accent) !important;
  color: #ffffff !important;
}

/* Buttons: rigid desktop-like flat */
button,
a[class*="px-"][class*="py-"],
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
select {
  border-radius: 0 !important;
}

button[class*="bg-primary"],
a[class*="bg-primary"],
.bg-primary[class*="px-"],
.bg-primary[class*="py-"] {
  background-color: var(--sf-accent) !important;
  border: 1px solid #0567c2 !important;
  color: #ffffff !important;
}

button[class*="bg-primary"]:hover,
a[class*="bg-primary"]:hover,
body .hover\:bg-blue-600:hover,
body .hover\:bg-blue-500:hover {
  background-color: var(--sf-accent-hover) !important;
  border-color: #045cae !important;
}

button[class*="bg-dark-700"],
a[class*="bg-dark-700"],
button[class*="bg-gray-700"],
a[class*="bg-gray-700"],
button[class*="bg-dark-800"],
a[class*="bg-dark-800"],
button[class*="bg-gray-800"],
a[class*="bg-gray-800"] {
  background-color: var(--sf-surface-2) !important;
  border: 1px solid var(--sf-border) !important;
  color: var(--sf-text) !important;
}

button[class*="bg-dark-700"]:hover,
a[class*="bg-dark-700"]:hover,
button[class*="bg-gray-700"]:hover,
a[class*="bg-gray-700"]:hover,
button[class*="bg-dark-800"]:hover,
a[class*="bg-dark-800"]:hover,
button[class*="bg-gray-800"]:hover,
a[class*="bg-gray-800"]:hover {
  background-color: var(--sf-surface-3) !important;
  border-color: var(--sf-border-strong) !important;
}

/* Inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
select {
  background-color: #0f141b !important;
  border: 1px solid var(--sf-border) !important;
  color: var(--sf-text) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
textarea:focus,
select:focus {
  background-color: #0f141b !important;
  border-color: var(--sf-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.18) !important;
}

/* Tables and rows */
body thead,
body thead.bg-gray-700,
body thead.bg-dark-700 {
  background-color: #151b23 !important;
}

body tbody tr:hover,
body .hover\:bg-dark-700:hover,
body .hover\:bg-dark-700\/50:hover,
body .hover\:bg-dark-600:hover,
body .hover\:bg-gray-700\/30:hover,
body .hover\:bg-gray-700\/50:hover,
body .hover\:bg-gray-600:hover,
body .hover\:border-gray-600:hover {
  background-color: #1a212b !important;
  border-color: var(--sf-border-strong) !important;
}

/* Preview/video/media boxes square and framed */
body video,
body iframe,
body canvas,
body img,
body [id*="preview"],
body [class*="preview"],
body [class*="thumbnail"] {
  background-color: #0b0f14 !important;
  border: 1px solid var(--sf-border) !important;
}

/* Progress bars and badges stay square */
body .rounded-full.bg-gray-700,
body .rounded-full.bg-dark-700,
body .h-2\.5,
body .h-1\.5,
body [id$="bar"],
body [id*="bar"] {
  border-radius: 0 !important;
}

/* Scrollbar more classic */
body *::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body *::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
  background: #0d1117 !important;
  border: 1px solid #1a2028 !important;
}

body *::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #2b3441 !important;
  border: 1px solid #394454 !important;
}

body *::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #364152 !important;
}

/* Remove any remaining soft visual effects */
body .modal-overlay,
body [class*="fixed"][class*="inset-0"][class*="bg-black"] {
  backdrop-filter: none !important;
}

body .transition-all,
body .transition-colors,
body .transition-transform,
.sidebar-icon,
button,
a,
input,
select,
textarea {
  transition-duration: 80ms !important;
}