/* ================================================================
   Synova Digital — FileBrowser Custom Theme
   Target: files.synovadigital.co
   ================================================================ */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  /* Brand palette — matches synovadigital.co landing */
  --sd-blue:           #3b82f6;
  --sd-blue-dark:      #1a56a0;
  --sd-blue-glow:      rgba(26,86,160,0.13);
  --sd-blue-badge:     rgba(26,86,160,0.12);
  --sd-border-hover:   rgba(26,86,160,0.38);
  --sd-orange:         #f4a61a;
  --sd-orange-glow:    rgba(244,166,26,0.32);
  --sd-orange-subtle:  rgba(244,166,26,0.07);

  /* Surfaces */
  --sd-bg:             #050d1f;
  --sd-bg-nav:         #070e1e;
  --sd-bg-panel:       rgba(255,255,255,0.04);
  --sd-bg-hover:       rgba(255,255,255,0.044);

  /* Borders */
  --sd-border:         rgba(255,255,255,0.07);
  --sd-border-div:     rgba(255,255,255,0.06);

  /* Typography */
  --sd-text:           #ffffff;
  --sd-text-muted:     #7b9cbf;

  /* Semantic */
  --sd-danger:         #ef4444;
  --sd-success:        #22c55e;
  --sd-warning:        #f4a61a;

  /* Radii */
  --sd-radius-sm:      4px;
  --sd-radius:         6px;
  --sd-radius-lg:      10px;
  --sd-radius-xl:      14px;

  --sd-font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

/* ── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body, #app {
  font-family: var(--sd-font) !important;
  background: var(--sd-bg) !important;
  color: var(--sd-text) !important;
  margin: 0;
  min-height: 100vh;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(rgba(255,255,255,0.022) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 64px);
  pointer-events: none;
  z-index: 0;
}

/* ── Top navigation bar ─────────────────────────────────────────── */
header,
#app > header,
.header,
nav.header {
  background: var(--sd-bg-nav) !important;
  border-bottom: 1px solid var(--sd-border-div) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.45) !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 1.25rem !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* Logo in header */
header img,
header .logo,
.header img {
  height: 28px !important;
  width: auto !important;
  margin-right: 0.75rem !important;
}

/* Brand name text in header */
header span,
header .title,
header h1 {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--sd-text) !important;
  letter-spacing: -0.01em !important;
}

/* Header action icons (upload, new folder, etc.) */
header button,
header i,
.action {
  color: var(--sd-text-muted) !important;
  transition: color 0.15s ease !important;
}
header button:hover i,
.action:hover {
  color: var(--sd-text) !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
aside,
.sidebar,
nav.sidebar,
#sidebar {
  background: var(--sd-bg-nav) !important;
  border-right: 1px solid var(--sd-border-div) !important;
}

.sidebar nav a,
aside nav a {
  color: var(--sd-text-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: var(--sd-radius) !important;
  padding: 0.5rem 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  text-decoration: none !important;
}
.sidebar nav a:hover,
aside nav a:hover {
  background: var(--sd-bg-hover) !important;
  color: var(--sd-text) !important;
}
.sidebar nav a.active,
aside nav a.router-link-active {
  background: var(--sd-blue-badge) !important;
  color: var(--sd-blue) !important;
}

/* ── Main content area ───────────────────────────────────────────── */
main,
#main,
.main,
.container {
  background: var(--sd-bg) !important;
}

/* ── File listing (list view) ────────────────────────────────────── */
.item,
.file-list .item,
[class*="item"] {
  border-bottom: 1px solid var(--sd-border) !important;
  transition: background 0.1s ease !important;
  padding: 0.5rem 0.75rem !important;
  display: flex !important;
  align-items: center !important;
}
.item:hover {
  background: var(--sd-bg-hover) !important;
}
.item:last-child {
  border-bottom: none !important;
}

/* Item name */
.item .name,
.item p {
  color: var(--sd-text) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* Item metadata (size, date) */
.item .size,
.item .modified,
.item span {
  color: var(--sd-text-muted) !important;
  font-size: 0.8rem !important;
}

/* Folder icon color */
.item i.material-icons[aria-label="folder"],
.item i[class*="folder"] {
  color: var(--sd-warning) !important;
}

/* File icon color */
.item i.material-icons,
.item i[class*="file"] {
  color: var(--sd-text-muted) !important;
}

/* Selected items */
.item.selected,
.item[aria-selected="true"] {
  background: var(--sd-blue-badge) !important;
  border-color: var(--sd-blue) !important;
}

/* ── File listing (mosaic / grid view) ───────────────────────────── */
.item.mosaic,
.mosaic .item,
[class*="mosaic"] {
  background: var(--sd-bg-panel) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius-lg) !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.item.mosaic:hover {
  background: var(--sd-bg-panel) !important;
  border-color: var(--sd-border-hover) !important;
  box-shadow: 0 2px 12px var(--sd-blue-glow) !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────── */
.breadcrumbs,
nav[class*="breadcrumb"] {
  background: transparent !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
}
.breadcrumbs a,
nav[class*="breadcrumb"] a {
  color: var(--sd-blue) !important;
  text-decoration: none !important;
}
.breadcrumbs a:hover { text-decoration: underline !important; }
.breadcrumbs span,
nav[class*="breadcrumb"] span {
  color: var(--sd-text-muted) !important;
  margin: 0 0.25rem !important;
}

/* ── Buttons ────────────────────────────────────────────────────── */
button,
.button,
input[type="submit"] {
  font-family: var(--sd-font) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  border-radius: var(--sd-radius) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}

/* Primary action button */
button.action[class*="blue"],
.button.primary,
button[class*="primary"],
.is-primary {
  background: var(--sd-blue) !important;
  color: #fff !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
}
button.action[class*="blue"]:hover,
.button.primary:hover,
button[class*="primary"]:hover,
.is-primary:hover {
  background: var(--sd-blue-dark) !important;
  box-shadow: 0 2px 8px var(--sd-orange-glow) !important;
}

/* Danger button */
button[class*="danger"],
.is-danger,
.button.danger {
  background: var(--sd-danger) !important;
  color: #fff !important;
  border: none !important;
}

/* Ghost / outline button */
button[class*="light"],
.button.outline {
  background: transparent !important;
  border: 1px solid var(--sd-border) !important;
  color: var(--sd-text) !important;
}
button[class*="light"]:hover,
.button.outline:hover {
  background: var(--sd-bg-hover) !important;
  border-color: var(--sd-text-muted) !important;
}

/* ── Form inputs ────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  background: var(--sd-bg) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius) !important;
  color: var(--sd-text) !important;
  font-family: var(--sd-font) !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.75rem !important;
  width: 100% !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--sd-blue) !important;
  box-shadow: 0 0 0 3px var(--sd-blue-glow) !important;
  outline: none !important;
}
input::placeholder { color: var(--sd-text-muted) !important; }

/* ── Modals / dialogs ────────────────────────────────────────────── */
.overlay,
.modal-overlay,
[class*="overlay"] {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(4px) !important;
}
.card,
.modal,
[class*="dialog"],
.prompt {
  background: var(--sd-bg-panel) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius-xl) !important;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6) !important;
  padding: 1.75rem !important;
}
.card h2,
.modal h2,
.prompt h2,
.card h3 {
  color: var(--sd-text) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

/* ── Upload progress bar ─────────────────────────────────────────── */
.progress,
[class*="progress"] {
  background: var(--sd-border) !important;
  border-radius: 999px !important;
  height: 6px !important;
}
.progress > *,
[class*="progress-bar"] {
  background: var(--sd-blue) !important;
  border-radius: 999px !important;
  transition: width 0.2s ease !important;
}

/* ── Toast / notification ────────────────────────────────────────── */
.toast,
[class*="toast"],
[class*="notification"] {
  border-radius: var(--sd-radius-lg) !important;
  font-size: 0.875rem !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

/* ── Context menu (right-click) ──────────────────────────────────── */
.context-menu,
[class*="context-menu"] {
  background: var(--sd-bg-panel) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius-lg) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  padding: 0.25rem 0 !important;
}
.context-menu li a,
.context-menu li button,
[class*="context-menu"] li {
  color: var(--sd-text) !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--sd-radius-sm) !important;
  transition: background 0.1s ease !important;
}
.context-menu li a:hover,
.context-menu li button:hover {
  background: var(--sd-bg-hover) !important;
}

/* ── Login page ──────────────────────────────────────────────────── */
#login,
.login,
[class*="login"] {
  background: var(--sd-bg) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Login card — glassmorphism + gradient accent bar */
#login .card,
.login-card,
[class*="login"] form {
  background: var(--sd-bg-panel) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: var(--sd-radius-xl) !important;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6) !important;
  padding: 2.5rem !important;
  min-width: 360px !important;
  max-width: 400px !important;
  width: 100% !important;
  backdrop-filter: blur(12px) !important;
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(100deg, #1a56a0, #f4a61a) 1 !important;
}

/* Logo on login */
#login img.logo,
.login img,
[class*="login"] img {
  display: block !important;
  height: 52px !important;
  width: auto !important;
  margin: 0 auto 1.75rem !important;
}

/* Login title */
#login h1, #login h2,
[class*="login"] h1, [class*="login"] h2 {
  text-align: center !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--sd-text) !important;
  margin-bottom: 1.5rem !important;
}

/* Login button */
#login button[type="submit"],
[class*="login"] button[type="submit"] {
  width: 100% !important;
  background: var(--sd-blue) !important;
  color: #fff !important;
  border: none !important;
  padding: 0.65rem 1rem !important;
  border-radius: var(--sd-radius) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin-top: 0.5rem !important;
}
#login button[type="submit"]:hover {
  background: var(--sd-blue-dark) !important;
  box-shadow: 0 2px 12px var(--sd-orange-glow) !important;
}

/* ── Scrollbars ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sd-bg); }
::-webkit-scrollbar-thumb { background: var(--sd-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sd-text-muted); }

/* ── Miscellaneous ───────────────────────────────────────────────── */
a { color: var(--sd-blue) !important; }
a:hover { color: var(--sd-blue-dark) !important; }
hr { border-color: var(--sd-border) !important; }

/* Material icons sizing */
i.material-icons { font-size: 1.2rem !important; vertical-align: middle; }