/* ==========================================================
   OFFICIAL MATERIAL DESIGN 2 DARK THEME SPECIFICATION
   Reference: https://m2.material.io/design/color/dark-theme.html
   
   Elevations:
     - Baseline (00dp): #121212
     - Surface 1 (01dp): #1e1e1e (5% white overlay)
     - Surface 2 (02dp): #222222 (7% white overlay)
     - App Bar / Header (04dp): #272727 (9% white overlay)
     - Menus / Dropdowns (08dp): #2d2d2d (12% white overlay)
     - Dialogs / Modals (16dp): #353535 (15% white overlay)
     
   Accents & Contrast:
     - Primary: #BB86FC (Desaturated 200 Purple for Dark Theme)
     - Secondary: #03DAC6 (Desaturated 200 Teal)
     - Error: #CF6679
     - High Emphasis Text: rgba(255, 255, 255, 0.87)
     - Medium Emphasis Text: rgba(255, 255, 255, 0.60)
     - Disabled / Outline: rgba(255, 255, 255, 0.38)
     - Dividers: rgba(255, 255, 255, 0.08)
   ========================================================== */

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

:root, :root.dark {
  /* Material Dark Accents */
  --blue: #BB86FC !important;
  --dark-blue: #9955E8 !important;
  --red: #CF6679 !important;
  --dark-red: #B00020 !important;
  --moon-grey: #242424 !important;

  /* Material Elevations */
  --background: #121212 !important;
  --surfacePrimary: #1E1E1E !important;
  --surfaceSecondary: #272727 !important;
  --item-selected: #2D2D2D !important;

  /* Material Text Hierarchy */
  --textPrimary: rgba(255, 255, 255, 0.60) !important;
  --textSecondary: rgba(255, 255, 255, 0.87) !important;

  /* Action & Icons */
  --action: #BB86FC !important;
  --iconPrimary: #BB86FC !important;
  --iconSecondary: #03DAC6 !important;
  --iconTertiary: rgba(255, 255, 255, 0.38) !important;

  --icon-blue: #BB86FC !important;
  --icon-orange: #FFB74D !important;
  --icon-yellow: #FFF59D !important;
  --icon-green: #03DAC6 !important;
  --icon-red: #CF6679 !important;
  --icon-violet: #CE93D8 !important;

  /* Outlines & Borders */
  --divider: rgba(255, 255, 255, 0.08) !important;
  --dividerPrimary: rgba(255, 255, 255, 0.12) !important;
  --dividerSecondary: rgba(255, 255, 255, 0.24) !important;
  --borderPrimary: rgba(255, 255, 255, 0.08) !important;
  --borderSecondary: rgba(255, 255, 255, 0.16) !important;
  --hover: rgba(255, 255, 255, 0.04) !important;

  /* Form Feedback */
  --input-red: rgba(207, 102, 121, 0.2) !important;
  --input-green: rgba(3, 218, 198, 0.2) !important;
}

/* Global Reset & Roboto Typography */
html, body, #app, main, #main, #listing, .dashboard {
  background-color: #121212 !important;
  color: rgba(255, 255, 255, 0.87) !important;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  accent-color: #BB86FC !important;
  letter-spacing: 0.01em;
}

/* Headings */
h1, h2, h3, .card-title, header title {
  font-family: 'Roboto', sans-serif !important;
  color: rgba(255, 255, 255, 0.87) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* 04dp App Bar (Header) */
header {
  background: #272727 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

header .action {
  color: rgba(255, 255, 255, 0.87) !important;
  border-radius: 50% !important;
  transition: background-color 0.2s, color 0.2s !important;
}

header .action:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #BB86FC !important;
}

/* Breadcrumbs (Navigation Path) */
#breadcrumbs a {
  color: rgba(255, 255, 255, 0.60) !important;
  transition: color 0.2s;
}

#breadcrumbs a:hover, #breadcrumbs span.current {
  color: rgba(255, 255, 255, 0.87) !important;
}

#breadcrumbs .material-icons {
  color: #BB86FC !important;
}

/* 01dp Navigation Sidebar */
nav#sidebar, nav {
  background: #1E1E1E !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

nav .action {
  color: rgba(255, 255, 255, 0.87) !important;
  border-radius: 8px !important;
  margin: 4px 8px !important;
  transition: all 0.2s ease !important;
}

nav .action:hover, nav .action.active {
  background: rgba(187, 134, 252, 0.12) !important;
  color: #BB86FC !important;
}

/* 01dp Surface Cards & 16dp Dialogs */
.card {
  background: #1E1E1E !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  color: rgba(255, 255, 255, 0.87) !important;
}

.modal {
  background: #353535 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8) !important;
}

/* 08dp Dropdown Menu */
#dropdown {
  background: #2D2D2D !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
  overflow: hidden;
}

#dropdown .action {
  color: rgba(255, 255, 255, 0.87) !important;
  transition: background 0.15s !important;
}

#dropdown .action:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #BB86FC !important;
}

/* Listing: Folders & Files (01dp surface) */
#listing .item {
  background-color: #1E1E1E !important;
  border-radius: 12px !important;
  transition: all 0.15s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

#listing .item:hover {
  background-color: #262626 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

#listing .item[aria-selected="true"], #listing .item.selected {
  background-color: rgba(187, 134, 252, 0.14) !important;
  border-color: #BB86FC !important;
  box-shadow: 0 0 0 1px #BB86FC !important;
}

#listing .item .name {
  color: rgba(255, 255, 255, 0.87) !important;
  font-weight: 400 !important;
}

#listing .item .size, #listing .item .modified {
  color: rgba(255, 255, 255, 0.60) !important;
}

.item i.material-icons {
  color: #BB86FC !important;
}

/* Material Buttons */
.button, button {
  border-radius: 6px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
}

/* Primary Button: #BB86FC background with black text */
.button--blue, input[type="submit"].button--blue, button.button--blue {
  background: #BB86FC !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: 0 3px 8px rgba(187, 134, 252, 0.3) !important;
}

.button--blue:hover, input[type="submit"].button--blue:hover, button.button--blue:hover {
  background: #A362F8 !important;
  box-shadow: 0 4px 14px rgba(187, 134, 252, 0.5) !important;
  transform: translateY(-1px);
}

.button--flat {
  color: #BB86FC !important;
}

.button--flat:hover {
  background: rgba(187, 134, 252, 0.08) !important;
}

/* Inputs & Form Fields */
input[type="text"], input[type="password"], input[type="search"], input[type="email"], textarea, select {
  background: #1E1E1E !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 6px !important;
  color: rgba(255, 255, 255, 0.87) !important;
  padding: 0.65em 0.9em !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus {
  border-color: #BB86FC !important;
  box-shadow: 0 0 0 2px rgba(187, 134, 252, 0.25) !important;
}

/* Material Dark Login Screen */
#login {
  background: radial-gradient(circle at center, #1E1E1E 0%, #121212 100%) !important;
}

#login form {
  background: #1E1E1E !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  padding: 2.4em !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8) !important;
}

#login img {
  filter: invert(65%) sepia(50%) saturate(2400%) hue-rotate(225deg) brightness(100%) contrast(101%) !important;
}

#login h1 {
  color: rgba(255, 255, 255, 0.87) !important;
  font-size: 2em !important;
  margin-bottom: 0.8em !important;
}

#login input.button {
  margin-top: 1.2em !important;
  background: #BB86FC !important;
  color: #000000 !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 0.7em !important;
}

#login input.button:hover {
  background: #A362F8 !important;
}

/* Search Bar */
.search-button, #search {
  background: #272727 !important;
  border-radius: 6px !important;
}

/* Sleek Dark Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #2D2D2D;
  border-radius: 4px;
}

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