/* ==========================================================================
   NEXUS UNION PROTOCOL // DATA VAULT (CLEAN CYBERPUNK 2.0 THEME)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --c-bg: #030712;
  --c-sidebar: #050b18;
  --c-header: #060e20;
  --c-surface: #081226;
  --c-surface-hover: #0d1d3a;
  --c-card: #09142b;
  --c-cyan: #00e5ff;
  --c-cyan-glow: rgba(0, 229, 255, 0.35);
  --c-purple: #9d00ff;
  --c-purple-bright: #b524ff;
  --c-green: #00ff88;
  --c-red: #ff2a5f;
  --text-main: #e2f1ff;
  --text-muted: #8ca3c7;
  --border-subtle: rgba(0, 229, 255, 0.15);
}

/* 1. TYPOGRAPHY & RESET */
body, input, textarea, select, table, td, th {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--text-main) !important;
}

body {
  background-color: var(--c-bg) !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.05) 0%, transparent 60%),
    linear-gradient(rgba(0, 229, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.015) 1px, transparent 1px) !important;
  background-size: 100% 100%, 40px 40px, 40px 40px !important;
}

/* 2. CRITICAL: PRESERVE MATERIAL ICONS (Fixes text overlapping file names) */
.material-icons, 
.material-icons-outlined,
i.material-icons,
i.v-icon,
i[class*="material-icons"],
.action i,
button i {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 22px !important;
  display: inline-block !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-wrap: normal !important;
  white-space: nowrap !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  color: inherit !important;
}

/* 3. HEADINGS & TITLES */
h1, h2, h3, .title, .breadcrumbs, .logo {
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: 1px !important;
  color: var(--text-main) !important;
}

/* 4. MAIN HEADER */
header, nav.header {
  background: var(--c-header) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

/* 5. HEADER ACTION BUTTONS (Clean, transparent, no giant blocks) */
header .action, 
header button,
nav.header .action,
.action-bar .action {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
  transition: all 0.2s ease !important;
  padding: 6px 10px !important;
}

header .action:hover,
nav.header .action:hover,
.action-bar .action:hover {
  background: rgba(0, 229, 255, 0.1) !important;
  border-color: rgba(0, 229, 255, 0.3) !important;
  color: var(--c-cyan) !important;
  transform: none !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2) !important;
}

/* 6. SEARCH BAR IN HEADER */
#search, .search-bar, header input {
  background: rgba(3, 7, 18, 0.85) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 6px 12px !important;
}

#search:focus, header input:focus {
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.3) !important;
  outline: none !important;
}

/* 7. SIDEBAR NAVIGATION */
.sidebar, nav.drawer {
  background: var(--c-sidebar) !important;
  border-right: 1px solid var(--border-subtle) !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.7) !important;
}

.sidebar .action, 
nav.drawer .action,
.sidebar a,
nav.drawer a {
  background: transparent !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  color: var(--text-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
  margin: 4px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.sidebar .action:hover,
nav.drawer .action:hover,
.sidebar a:hover,
nav.drawer a:hover {
  background: rgba(0, 229, 255, 0.06) !important;
  color: var(--c-cyan) !important;
  border-left-color: var(--c-cyan) !important;
  transform: none !important;
}

.sidebar .active,
nav.drawer .active {
  background: rgba(0, 229, 255, 0.1) !important;
  color: var(--c-cyan) !important;
  border-left: 3px solid var(--c-cyan) !important;
  font-weight: 700 !important;
}

/* 8. FILE LISTING (Clean & Modern Table/Grid) */
.item, div[role="row"], .card {
  background: var(--c-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
  margin-bottom: 4px !important;
  transition: all 0.15s ease !important;
  color: var(--text-main) !important;
}

.item:hover, div[role="row"]:hover {
  background: var(--c-surface-hover) !important;
  border-color: rgba(0, 229, 255, 0.3) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  transform: none !important;
}

/* Folder & File Icons */
.item i, div[role="row"] i {
  color: var(--c-cyan) !important;
  margin-right: 8px !important;
}

/* 9. PRIMARY SUBMIT BUTTONS (Only Dialog/Form Action buttons, not icons) */
.button.button--flat,
button[type="submit"],
.card .button,
form button:not(.action) {
  background: var(--c-cyan) !important;
  color: #000 !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 18px !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.3) !important;
  transition: 0.2s all ease !important;
}

.button.button--flat:hover,
button[type="submit"]:hover,
form button:not(.action):hover {
  background: #fff !important;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.6) !important;
}

/* 10. LOGIN SCREEN */
#login {
  background: var(--c-bg) !important;
}

#login .card, #login form {
  background: var(--c-card) !important;
  border: 1.5px solid var(--c-cyan) !important;
  border-radius: 12px !important;
  padding: 35px 30px !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 229, 255, 0.2) !important;
  max-width: 400px !important;
  width: 100% !important;
}

#login input {
  background: rgba(2, 6, 14, 0.9) !important;
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
}

#login input:focus {
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.3) !important;
}

/* 11. SCROLLBARS */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-cyan);
}