/* Premium dark theme for Oxserver */
:root {
  --ox-bg: #0b0f19;
  --ox-bg-soft: #0f172a;
  --ox-surface: #111827;
  --ox-surface-raised: #162033;
  --ox-border: #263244;
  --ox-border-soft: #1e293b;
  --ox-text: #dbe4f0;
  --ox-text-muted: #94a3b8;
  --ox-heading: #f8fafc;
  --ox-primary: #38bdf8;
  --ox-primary-strong: #0ea5e9;
  --ox-success: #22c55e;
  --ox-warning: #f59e0b;
  --ox-danger: #ef4444;
  --ox-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}

html,
body {
  background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 34%),
    linear-gradient(135deg, #0b0f19 0%, #111827 46%, #0f172a 100%) !important;
  color: var(--ox-text) !important;
}

body,
input,
button,
select,
textarea {
  color-scheme: dark;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
label,
strong,
b {
  color: var(--ox-heading) !important;
}

a {
  color: var(--ox-primary) !important;
}

a:hover {
  color: #7dd3fc !important;
}

hr,
.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
  border-color: var(--ox-border) !important;
}

.text-muted,
.file-details,
.items-count,
.small,
small {
  color: var(--ox-text-muted) !important;
}

.bg-light,
.bg-white,
.modal-header,
.card-header:not(.bg-primary),
.list-group-item,
.dropdown-menu,
.popover,
.ui-widget-content {
  background-color: var(--ox-surface) !important;
  color: var(--ox-text) !important;
  border-color: var(--ox-border) !important;
}

.navbar,
.navbar.bg-light,
footer {
  background-color: rgba(15, 23, 42, 0.96) !important;
  border-color: var(--ox-border-soft) !important;
  color: var(--ox-text) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.navbar-brand,
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
  color: var(--ox-heading) !important;
}

.navbar-light .navbar-toggler {
  border-color: var(--ox-border) !important;
}

#fileManager {
  background: transparent !important;
}

#menuPanel {
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
  border-right: 1px solid var(--ox-border-soft) !important;
  box-shadow: 5px 0 24px rgba(0, 0, 0, 0.34) !important;
}

#menuPanel h5 {
  color: var(--ox-heading) !important;
}

#menuPanel .api-key-display {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 6px;
  color: var(--ox-text) !important;
  margin: 14px 0;
  padding: 10px;
}

#menuPanel .nav-link {
  border-radius: 6px;
  color: var(--ox-text-muted) !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#menuPanel .nav-link:hover,
#menuPanel .nav-link.active {
  background: rgba(56, 189, 248, 0.11) !important;
  color: var(--ox-heading) !important;
}

#menuPanel .nav-link.active {
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: inset 3px 0 0 var(--ox-primary);
}

#content {
  background: transparent !important;
}

#header {
  border-bottom-color: var(--ox-border) !important;
}

.container,
.main-content,
.info-section,
.card,
.modal-content,
.rename-modal .modal-content,
.history-modal .modal-content,
.upload-overlay,
.pagination-controls,
.file-item,
.file-grid-item,
.history-list-item,
.context-menu,
.table,
.jumbotron {
  background-color: rgba(17, 24, 39, 0.94) !important;
  border-color: var(--ox-border) !important;
  color: var(--ox-text) !important;
  box-shadow: var(--ox-shadow);
}

.main-content,
.container {
  box-shadow: none;
}

.info-section,
.card,
.modal-content {
  border-radius: 8px !important;
}

.card-header.bg-primary,
.bg-primary,
.btn-primary {
  background: linear-gradient(135deg, var(--ox-primary-strong), #2563eb) !important;
  border-color: rgba(125, 211, 252, 0.35) !important;
  color: #ffffff !important;
}

.btn,
.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"] {
  border-radius: 6px !important;
}

.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"] {
  background-color: #0f172a !important;
  border-color: var(--ox-border) !important;
  color: var(--ox-heading) !important;
  box-shadow: none !important;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: var(--ox-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.18) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #64748b !important;
}

.btn-outline-primary,
.btn-outline-secondary {
  background-color: rgba(15, 23, 42, 0.78) !important;
  border-color: var(--ox-border) !important;
  color: var(--ox-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-secondary:hover {
  background-color: rgba(56, 189, 248, 0.14) !important;
  border-color: var(--ox-primary) !important;
  color: #ffffff !important;
}

.btn-secondary {
  background-color: #1f2937 !important;
  border-color: var(--ox-border) !important;
}

.btn-success {
  background-color: #15803d !important;
  border-color: #22c55e !important;
}

.btn-danger {
  background-color: #b91c1c !important;
  border-color: #ef4444 !important;
}

.table,
table {
  color: var(--ox-text) !important;
}

.table thead th,
table thead th {
  background-color: #0f172a !important;
  border-color: var(--ox-border) !important;
  color: var(--ox-heading) !important;
}

.table td,
.table th,
table td,
table th {
  border-color: var(--ox-border) !important;
}

.table-striped tbody tr:nth-of-type(odd),
tbody tr:nth-of-type(odd) {
  background-color: rgba(15, 23, 42, 0.58) !important;
}

.table-hover tbody tr:hover,
.file-item:hover,
.file-grid-item:hover,
.context-menu-item:hover,
.history-list-item:hover {
  background-color: rgba(56, 189, 248, 0.1) !important;
}

.context-menu {
  border-radius: 8px;
  overflow: hidden;
}

.modal-backdrop.show {
  opacity: 0.72 !important;
}

.modal-header,
.modal-footer {
  border-color: var(--ox-border) !important;
}

.alert {
  border-radius: 8px;
}

.alert-danger {
  background-color: rgba(127, 29, 29, 0.62) !important;
  border-color: rgba(239, 68, 68, 0.48) !important;
  color: #fecaca !important;
}

.alert-success {
  background-color: rgba(20, 83, 45, 0.62) !important;
  border-color: rgba(34, 197, 94, 0.48) !important;
  color: #bbf7d0 !important;
}

.alert-info {
  background-color: rgba(12, 74, 110, 0.62) !important;
  border-color: rgba(56, 189, 248, 0.48) !important;
  color: #bae6fd !important;
}

.badge,
.label {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.folder-name,
.folder-link,
.file-name,
.copy-link,
.upload-icon {
  color: var(--ox-heading) !important;
}

.upload-icon:hover,
.copy-link:hover {
  color: var(--ox-primary) !important;
}

.progress {
  background-color: #0f172a !important;
}

.progress-bar {
  background: linear-gradient(90deg, var(--ox-primary), #2563eb) !important;
}

.upload-overlays-container {
  z-index: 2200 !important;
  pointer-events: none;
}

.upload-overlays-container .upload-overlay {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
  border: 1px solid rgba(56, 189, 248, 0.26) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(15, 23, 42, 0.75) !important;
  color: var(--ox-heading) !important;
  min-width: 540px;
  padding: 14px !important;
  pointer-events: auto;
}

.upload-overlays-container .upload-file-name {
  color: var(--ox-text) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-overlays-container .upload-file-name i {
  color: var(--ox-primary) !important;
}

.upload-overlays-container .progress {
  background: #1e293b !important;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px !important;
  height: 18px;
  overflow: hidden;
}

.upload-overlays-container .progress-bar {
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 55%, #60a5fa 100%) !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.36);
}

.upload-overlays-container .cancel-upload-btn {
  background-color: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #fecaca !important;
}

.ui-widget-header,
.ui-datepicker-header {
  background: #0f172a !important;
  border-color: var(--ox-border) !important;
  color: var(--ox-heading) !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
  background: #111827 !important;
  border-color: var(--ox-border) !important;
  color: var(--ox-text) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
  background: var(--ox-primary-strong) !important;
  border-color: var(--ox-primary) !important;
  color: #ffffff !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0b0f19;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

@media (max-width: 768px) {
  #fileManager {
    min-height: 100vh;
  }

  #menuPanel {
    min-width: 170px !important;
    max-width: 170px !important;
    padding: 14px !important;
  }

  #content {
    padding: 14px !important;
  }
}