@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');

/*
  MiyaFiles Clean Dark Theme
  schlicht, stabil, CSS-only
  keine Elemente werden versteckt
*/

:root {
  --miya-bg: #0b0811;
  --miya-surface: #14101d;
  --miya-surface-2: #1b1526;
  --miya-surface-3: #241c31;
  --miya-sidebar: #182232;
  --miya-border: rgba(210, 180, 255, 0.18);
  --miya-border-strong: rgba(210, 180, 255, 0.32);
  --miya-text: #f3ecff;
  --miya-muted: #b8acc8;
  --miya-blue: #9bdcff;
  --miya-purple: #a78bfa;
  --miya-pink: #f0a7d7;
  --miya-green: #8ff0b5;
  --miya-yellow: #f8d77a;
  --miya-red: #ff8da8;
}

/* Grundlayout */
html,
body {
  background: var(--miya-bg) !important;
  color: var(--miya-text) !important;
  font-family: "DM Mono", Arial, monospace !important;
}

body {
  background:
    radial-gradient(circle at 20% 0%, rgba(167, 139, 250, 0.12), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(240, 167, 215, 0.08), transparent 24%),
    var(--miya-bg) !important;
}

/* Wichtig: nichts verstecken */
body,
body * {
  visibility: visible;
}

/* Hauptbereiche */
#wrapper,
.main_content,
.content,
#content,
.content-wrapper,
.page-wrapper,
.container,
.container-fluid {
  background: transparent !important;
  color: var(--miya-text) !important;
}

/* Topbar */
.navbar,
.navbar-default,
header,
#header,
.main-header {
  background: #08060d !important;
  border: 0 !important;
  border-bottom: 1px solid var(--miya-border) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}

.navbar *,
header *,
#header *,
.main-header * {
  color: var(--miya-text) !important;
}

.navbar-brand,
.logo,
.brand {
  color: var(--miya-text) !important;
  font-family: "DM Mono", Arial, monospace !important;
  font-weight: 500 !important;
}

/* Sidebar */
.sidebar,
#sidebar,
.main-sidebar,
.left-side {
  background: var(--miya-sidebar) !important;
  color: var(--miya-text) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sidebar *,
#sidebar *,
.main-sidebar *,
.left-side * {
  color: inherit !important;
}

.sidebar a,
#sidebar a,
.main-sidebar a,
.left-side a,
.nav a {
  color: #bde9ff !important;
  border-radius: 10px !important;
  font-family: "DM Mono", Arial, monospace !important;
}

.sidebar a:hover,
#sidebar a:hover,
.main-sidebar a:hover,
.left-side a:hover,
.nav a:hover {
  background: rgba(167, 139, 250, 0.14) !important;
  color: #ffffff !important;
}

.sidebar .active > a,
#sidebar .active > a,
.main-sidebar .active > a,
.left-side .active > a,
.nav .active > a,
.nav a.active {
  background: #5b21b6 !important;
  color: #ffffff !important;
}

/* Standard-Boxen */
.panel,
.card,
.box,
.widget,
.well,
.modal-content,
.table-responsive,
.form_container,
.white-box,
.thumbnail,
.jumbotron,
.alert,
.dropdown-menu,
.list-group,
.list-group-item {
  background: var(--miya-surface) !important;
  color: var(--miya-text) !important;
  border: 1px solid var(--miya-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Kopfbereiche von Panels */
.panel-heading,
.card-header,
.box-header,
.widget-header {
  background: var(--miya-surface-3) !important;
  color: var(--miya-text) !important;
  border-bottom: 1px solid var(--miya-border) !important;
}

.panel-body,
.card-body,
.box-body,
.widget-body {
  background: var(--miya-surface) !important;
  color: var(--miya-text) !important;
}

/* Donation-/Info-Box nur dunkel, nicht ausblenden */
.jumbotron,
.system_message,
.message,
.home_welcome,
.welcome-box,
.dashboard_msg,
.announcement,
#system_message,
#donations,
#updates {
  background: var(--miya-surface-2) !important;
  color: var(--miya-text) !important;
  border: 1px solid var(--miya-border) !important;
}

/* Text */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
li,
td,
th,
label,
legend,
small {
  font-family: "DM Mono", Arial, monospace !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
legend,
.page-title,
.panel-title,
.box-title,
.card-title {
  color: var(--miya-text) !important;
  font-weight: 500 !important;
}

p,
span,
div,
li,
td,
th {
  color: inherit;
}

.text-muted,
.help-block,
small {
  color: var(--miya-muted) !important;
}

/* Links */
a {
  color: var(--miya-blue) !important;
}

a:hover,
a:focus {
  color: var(--miya-pink) !important;
  text-decoration: none !important;
}

/* Formulare */
.form-control,
input,
select,
textarea,
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices {
  background: #100c18 !important;
  color: var(--miya-text) !important;
  border: 1px solid var(--miya-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: "DM Mono", Arial, monospace !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--miya-purple) !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(243, 236, 255, 0.48) !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background: #171120 !important;
  color: var(--miya-muted) !important;
}

/* Buttons */
.btn,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 10px !important;
  font-family: "DM Mono", Arial, monospace !important;
  font-weight: 500 !important;
  border: 1px solid var(--miya-border-strong) !important;
  background: var(--miya-surface-3) !important;
  color: var(--miya-text) !important;
  box-shadow: none !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  filter: brightness(1.12) !important;
}

.btn-primary,
.btn-success,
button[type="submit"],
input[type="submit"] {
  background: #7c3aed !important;
  color: #ffffff !important;
  border-color: #7c3aed !important;
}

.btn-default,
.btn-secondary {
  background: var(--miya-surface-3) !important;
  color: var(--miya-text) !important;
}

.btn-warning {
  background: #b7791f !important;
  color: #ffffff !important;
  border-color: #b7791f !important;
}

.btn-danger {
  background: #be3455 !important;
  color: #ffffff !important;
  border-color: #be3455 !important;
}

/* Tabellen */
table,
.table {
  background: transparent !important;
  color: var(--miya-text) !important;
}

.table > thead > tr > th,
table thead th {
  background: var(--miya-surface-3) !important;
  color: var(--miya-text) !important;
  border-bottom: 1px solid var(--miya-border-strong) !important;
}

.table > tbody > tr > td,
table tbody td {
  background: transparent !important;
  color: var(--miya-text) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
table tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.025) !important;
}

.table-hover > tbody > tr:hover,
table tr:hover {
  background: rgba(167, 139, 250, 0.08) !important;
}

/* Alerts */
.alert-success {
  background: rgba(28, 76, 56, 0.95) !important;
  color: #dcffe9 !important;
  border-color: rgba(143, 240, 181, 0.28) !important;
}

.alert-danger,
.alert-error {
  background: rgba(84, 28, 44, 0.95) !important;
  color: #ffe2e9 !important;
  border-color: rgba(255, 141, 168, 0.28) !important;
}

.alert-warning {
  background: rgba(91, 65, 23, 0.95) !important;
  color: #fff3d1 !important;
  border-color: rgba(248, 215, 122, 0.28) !important;
}

.alert-info {
  background: rgba(25, 54, 76, 0.95) !important;
  color: #e4f5ff !important;
  border-color: rgba(155, 220, 255, 0.28) !important;
}

/* Dashboard-Kacheln: nicht kaputtstylen, nur abrunden */
.dashboard-stat,
.stat-card,
.small-box {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.dashboard-stat *,
.stat-card *,
.small-box * {
  color: #ffffff !important;
}

/* Login/Installer */
#login_form,
.login_form,
.installer_box {
  background: var(--miya-surface) !important;
  color: var(--miya-text) !important;
  border: 1px solid var(--miya-border) !important;
  border-radius: 16px !important;
}

/* Footer */
footer,
#footer {
  background: transparent !important;
  color: var(--miya-muted) !important;
}

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--miya-purple) rgba(255,255,255,.06);
}

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

*::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
}

*::-webkit-scrollbar-thumb {
  background: #7c3aed;
  border-radius: 999px;
}