/* ============== JMS / Blonets Cyber Theme ============== */
body {
  outline: 5px solid lime !important;
}

/* ألوان عامة */
:root {
  --jms-bg-main: #050508;
  --jms-bg-panel: #111118;
  --jms-bg-panel-soft: #181824;
  --jms-accent: #8b1238;        /* بورجاندي */
  --jms-accent-soft: #3b0b1b;
  --jms-text-main: #f5f5f5;
  --jms-text-muted: #9b9b9b;
  --jms-border-subtle: #26263a;
}

/* خلفية عامة */
html, body {
  background-color: var(--jms-bg-main) !important;
  color: var(--jms-text-main) !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* الجذر الأساسي للتطبيق */
#app {
  background-color: var(--jms-bg-main) !important;
}

/* ================= NAVBAR / HEADER ================= */

/* التوب بار الأساسي */
header,
.topbar,
#app header {
  background: linear-gradient(90deg, #050508, #190814) !important;
  border-bottom: 1px solid var(--jms-border-subtle) !important;
  color: var(--jms-text-main) !important;
}

/* اللوجو في الـ navbar */
header img[src$="logo.svg"],
header img[src*="logo.svg"] {
  height: 34px !important;
  width: auto !important;
  margin-right: 0.7rem;
}

/* اسم السيرفر / العنوان في التوب بار */
header .title,
header .brand,
header h1 {
  color: var(--jms-text-main) !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* أزرار الـ top-right (الإعدادات / اليوزر / إلخ) */
#dropdown button,
header button {
  background-color: transparent !important;
  color: var(--jms-text-main) !important;
}

#dropdown i.material-icons {
  color: var(--jms-text-muted) !important;
}

#dropdown button:hover i.material-icons {
  color: var(--jms-accent) !important;
}

/* ================= SIDEBAR & MAIN ================= */

aside,
.sidebar {
  background-color: var(--jms-bg-panel) !important;
  border-right: 1px solid var(--jms-border-subtle) !important;
  color: var(--jms-text-main) !important;
}

/* لينكات في الـ sidebar */
aside a,
.sidebar a {
  color: var(--jms-text-muted) !important;
}

aside a.router-link-active,
.sidebar a.router-link-active,
aside a:hover,
.sidebar a:hover {
  color: var(--jms-accent) !important;
}

/* منطقة الكونتنت */
main,
main .content,
#main {
  background-color: var(--jms-bg-main) !important;
}

/* ================= BREADCRUMB / PATH BAR ================= */

.breadcrumb,
.breadcrumbs,
nav[aria-label="breadcrumb"] {
  background-color: var(--jms-bg-panel) !important;
  border-bottom: 1px solid var(--jms-border-subtle) !important;
  color: var(--jms-text-muted) !important;
}

.breadcrumb a,
.breadcrumbs a {
  color: var(--jms-text-muted) !important;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
  color: var(--jms-accent) !important;
}

/* ================= FILE LIST / GRID ================= */

/* الكونتينر الأساسي للفايلات */
#listing {
  background-color: var(--jms-bg-main) !important;
}

/* صفوف الليست */
#listing.list .item {
  background-color: var(--jms-bg-panel-soft) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  padding: 0.65em 0.9em !important;
}

#listing.list .item:nth-child(even) {
  background-color: var(--jms-bg-panel) !important;
}

/* لما تعلم على فايل */
#listing .item[aria-selected="true"],
#listing .item.is-selected {
  background: radial-gradient(circle at top left, rgba(139, 18, 56, 0.35), transparent 60%) !important;
  border-left: 2px solid var(--jms-accent) !important;
}

/* أسماء الملفات */
#listing .item span,
#listing .item .name {
  color: var(--jms-text-main) !important;
}

/* الأيكونات */
#listing .item div i,
#listing .item i.material-icons {
  color: var(--jms-accent) !important;
}

/* ================= TABLE HEADER / SORT BAR ================= */

#listing thead,
#listing .header,
#listing .thead {
  background-color: var(--jms-bg-panel) !important;
  border-bottom: 1px solid var(--jms-border-subtle) !important;
}

#listing thead th,
#listing .header span {
  color: var(--jms-text-muted) !important;
}

/* ================= LOGIN PAGE ================= */

/* خلفية صفحة اللوجين */
body.login,
body[class*="login"] {
  background: radial-gradient(circle at top, #251020, #050508 55%) !important;
}

/* كارت اللوجين */
.login,
.login-card,
form[method="post"] {
  background-color: rgba(10, 10, 18, 0.95) !important;
  border-radius: 14px !important;
  border: 1px solid var(--jms-border-subtle) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
}

/* لوجو JMS في اللوجين */
.login img[src$="logo.svg"],
.login-card img[src$="logo.svg"],
.login img[src*="logo.svg"] {
  display: block;
  margin: 0 auto 0.75rem auto;
  height: 48px !important;
}

/* عنوان اللوجين */
.login h1,
.login-card h1,
.login-card h2 {
  text-align: center;
  color: var(--jms-text-main) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* حقول الإدخال */
.login input,
.login-card input,
.login input[type="text"],
.login input[type="password"],
.login-card input[type="text"],
.login-card input[type="password"] {
  background-color: #0b0b13 !important;
  border-radius: 8px !important;
  border: 1px solid var(--jms-border-subtle) !important;
  color: var(--jms-text-main) !important;
}

/* زرار Login */
.login button,
.login input[type="submit"],
.login-card button,
.login-card input[type="submit"] {
  background: linear-gradient(135deg, var(--jms-accent), #d41e55) !important;
  border-radius: 999px !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.login button:hover,
.login input[type="submit"]:hover,
.login-card button:hover,
.login-card input[type="submit"]:hover {
  filter: brightness(1.08);
}

/* ================= FOOTER “Developed by Blonets” ================= */

/* بنعمل pseudo-footer من غير ما نعدل HTML */
body::after {
  content: "Developed by Blonets";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(90deg, #050508, #190814);
  color: var(--jms-text-muted);
  border-top: 1px solid var(--jms-border-subtle);
  z-index: 9999;
}

/* ما يغطيش على أي مودال فوقه */
.modal-open body::after,
body[aria-modal="true"]::after {
  opacity: 0.6;
}

/* ================= SMALL TOUCHES ================= */

/* Scrollbar خفيفة */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #050508;
}

::-webkit-scrollbar-thumb {
  background: #333045;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--jms-accent);
}