/* ========================================
   Pro Building Cloud — Clean Branding
   Subtle. Professional. Not overwhelming.
   ======================================== */

:root {
  --brand-gold: #FACC00;
  --brand-gold-dim: rgba(250, 204, 0, 0.15);
  --brand-black: #000000;
  --brand-gray: #545454;
  --select-gray: #2a2a2a;
  --select-gray-light: #333333;
  --hover-gray: #252525;
  --border-subtle: #3a3a3a;
}

/* === Login Page === */
#login {
  background: #111 !important;
}

#login form {
  background: #1e1e1e !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  padding: 2.5rem !important;
}

#login img {
  max-width: 280px !important;
  margin-bottom: 1.5rem !important;
}

#login input {
  background: #151515 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 12px 16px !important;
}

#login input:focus {
  border-color: var(--brand-gold) !important;
  box-shadow: 0 0 0 2px rgba(250, 204, 0, 0.15) !important;
  outline: none !important;
}

#login input[type="submit"],
#login button[type="submit"] {
  background: var(--brand-gold) !important;
  color: var(--brand-black) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
}

#login input[type="submit"]:hover,
#login button[type="submit"]:hover {
  background: #e0b800 !important;
}

/* === Header — clean black with thin gold bottom line === */
header,
nav,
#nav,
.navbar {
  background: var(--brand-black) !important;
  border-bottom: 1px solid var(--brand-gold) !important;
}

/* === File/Folder Listing === */

/* Normal hover — subtle light gray */
#listing .item:hover {
  background: var(--hover-gray) !important;
}

/* Selected items — light gray bg with thin gold border */
#listing .item[aria-selected="true"] {
  background: var(--select-gray) !important;
  outline: 1px solid rgba(250, 204, 0, 0.4) !important;
  outline-offset: -1px !important;
}

/* Folder icons — gold/yellow color */
#listing .item .material-icons,
#listing .item i.material-icons {
  color: inherit !important;
}

/* Target folder icons specifically */
#listing .item[data-dir="true"] .material-icons,
#listing .item[aria-label] i[title="folder"],
.item .file-icon-folder,
i.material-icons:not(.action) {
  color: var(--brand-gold) !important;
}

/* Make sure file icons stay default (not gold) */
#listing .item:not([data-dir="true"]) img,
.file-icon {
  filter: none !important;
}

/* === Breadcrumbs — white, not gold === */
.breadcrumbs a,
#listing h2 a,
.breadcrumbs span {
  color: #ccc !important;
}

.breadcrumbs a:hover {
  color: #fff !important;
}

/* === Links — mostly white/gray, gold only on hover === */
a:not(.action) {
  color: #ccc !important;
}

a:not(.action):hover {
  color: var(--brand-gold) !important;
}

/* === Buttons — only primary actions get gold === */
.button--flat.button--blue,
button[type="submit"] {
  background: var(--brand-gold) !important;
  color: var(--brand-black) !important;
}

/* Secondary buttons — gray, not gold */
.button--flat:not(.button--blue),
button.action:not([type="submit"]) {
  background: var(--select-gray-light) !important;
  color: #ddd !important;
}

.button--flat:not(.button--blue):hover {
  background: #444 !important;
}

/* === Upload / FAB — gold (primary action) === */
.floating-button,
#upload-button,
.upload-button {
  background: var(--brand-gold) !important;
  color: var(--brand-black) !important;
}

/* === Sidebar — clean dark === */
#sidebar,
.sidebar {
  background: #151515 !important;
  border-right: 1px solid #2a2a2a !important;
}

/* === Modals/Prompts — dark cards === */
.card,
.prompt,
.modal {
  background: #1e1e1e !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
}

/* === Scrollbar — subtle === */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

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

/* === Selection highlight === */
::selection {
  background: rgba(250, 204, 0, 0.2);
  color: #fff;
}

/* === Checkboxes === */
input[type="checkbox"]:checked {
  accent-color: var(--brand-gold) !important;
}

/* === Progress bars === */
.progress-bar,
.upload-progress {
  background: var(--brand-gold) !important;
}

/* === Footer — clean === */
footer a[href*="filebrowser"],
footer a[href*="github"] {
  display: none !important;
}

footer::after {
  content: "Pro Building Cloud" !important;
  color: #444 !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}