/* Base */

* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root {
  --bg: #020617;          /* page background */
  --shell-bg: #020617;    /* outer shell */
  --card-bg: #020617;     /* main card background */
  --accent: #38bdf8;      /* cyan accent */
  --accent-soft: rgba(56, 189, 248, 0.12);
  --accent-strong: rgba(56, 189, 248, 0.3);
  --border: #1f2933;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --danger-bg: rgba(248, 113, 113, 0.08);
  --danger-border: #f97373;
  --danger-text: #fecaca;
}

body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at top, #0b1120 0, #020617 50%, #000 100%);
  color: var(--text);
}

/* Login layout */

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.2), transparent 40%),
              radial-gradient(circle at 100% 100%, rgba(94, 234, 212, 0.15), transparent 45%),
              var(--card-bg);
  padding: 24px 26px 28px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

.login-card h1 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 600;
}

.login-subtitle {
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Main app shell */

.app-shell {
  max-width: 960px;
  margin: 32px auto;
  padding: 20px 22px 22px;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 40%),
              radial-gradient(circle at 100% 100%, rgba(94, 234, 212, 0.12), transparent 45%),
              var(--shell-bg);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

/* Header */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.app-title {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-user {
  font-size: 0.85rem;
  color: var(--muted);
}

.app-user strong {
  color: var(--text);
}

/* Form controls */

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: var(--muted);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #020617;
  color: var(--text);
  font-size: 0.92rem;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-strong);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease, border-color 0.12s ease;
}

.btn-primary {
  background: var(--accent);
  color: #0b1120;
  border-color: transparent;
}

.btn-primary:hover {
  background: #0ea5e9;
  box-shadow: 0 0 0 1px var(--accent-strong), 0 12px 30px rgba(56, 189, 248, 0.45);
}

.btn-secondary {
  background: rgba(15, 23, 42, 0.8);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: rgba(15, 23, 42, 1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
}

.btn:active {
  transform: translateY(1px);
}

/* Alerts */

.alert {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.alert-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
}

/* File browser */

.controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.table-wrapper {
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.95);
}

.file-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.file-table th,
.file-table td {
  padding: 8px 10px;
}

.file-table thead {
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid var(--border);
}

.file-table th {
  font-weight: 500;
  color: var(--muted);
  text-align: left;
}

.file-table tbody tr {
  border-bottom: 1px solid rgba(31, 41, 55, 0.6);
}

.file-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.88);
}

.file-table tbody tr:nth-child(odd) {
  background: rgba(15, 23, 42, 0.98);
}

.file-table tbody tr:hover {
  background: rgba(15, 23, 42, 1);
}

.file-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.file-name span.icon {
  width: 18px;
  text-align: center;
  font-size: 1rem;
}

/* Share page */

.share-body {
  max-width: 600px;
  margin: 40px auto;
  padding: 22px 24px 26px;
  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.2), transparent 45%),
              var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

.share-body h1 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 1.2rem;
  font-weight: 500;
}

.share-body p {
  margin-top: 0;
}

.share-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #020617;
  color: var(--text);
  font-size: 0.88rem;
}

.share-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-strong);
}
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.app-logo img {
  display: block;
}

.app-title {
  font-size: 1.0rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.login-title {
  text-align: center;
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
}
.login-card {
  text-align: center;
}
/* Kill Chrome/Edge autofill white/yellow background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #020617 inset !important; /* same as your dark input bg */
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}

/* Firefox autofill */
input:-moz-autofill {
  box-shadow: 0 0 0 1000px #020617 inset !important;
  -moz-text-fill-color: var(--text) !important;
}
/* Toolbar */
.toolbar {
  display: flex;
  gap: 6px;
}

/* Disabled button styling */
.btn[disabled] {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

/* Selected row */
.file-row.selected {
  background: rgba(56, 189, 248, 0.16) !important;
}

.file-row.selected .file-name span.icon {
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.6));
  color: var(--accent);
}
.left-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
}

.crumb-root a {
  color: var(--accent);
  text-decoration: none;
}

.crumb-root a:hover {
  text-decoration: underline;
}

.crumb-sep {
  margin: 0 4px;
  color: var(--muted);
}

.crumb-current {
  color: var(--text);
}

/* Ghost-style buttons (subtle) */
.btn-ghost {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.4);
}

.btn-ghost:hover {
  background: rgba(15, 23, 42, 0.9);
}

/* Toolbar stays compact & aligned */
.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-box {
  margin: 0 12px;
  display: flex;
  align-items: center;
}

.search-form {
  display: flex;
  gap: 6px;
}

.search-form input {
  width: 200px;
}

.search-heading {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--text);
}
.file-actions {
  text-align: center;
  width: 40px;
}

.btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent !important;
  border: none !important;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 4px; /* tiny rounding for nicer hitbox */
}

.btn-more:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent);
}

.btn-more:focus {
  outline: none;
  box-shadow: none;
}

button.btn-more {
  background: transparent !important;
  border: none !important;
}
.context-menu {
  position: fixed;
  min-width: 140px;
  background: rgba(15, 23, 42, 0.98);
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
  padding: 4px 0;
  z-index: 9999;
}

.context-menu.hidden {
  display: none;
}

.context-menu button {
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.context-menu button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.context-menu button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Icon container next to filename */
.file-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* SVG icons */
.icon-svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: var(--muted, #9ca3af); /* fallback gray if --muted not defined */
}

/* Highlight when row is selected */
.file-row.selected .icon-svg {
    fill: var(--accent, #38bdf8); /* fallback teal-ish accent */
}


/* Folder icons: bright yellow */
.file-row[data-type="dir"] .icon-svg {
    fill: #eab308; /* Tailwind amber-500 */
}

/* Selected state boost */
.file-row.selected[data-type="dir"] .icon-svg {
    fill: #facc15; /* amber-400 - brighter highlight */
}

.file-row.selected[data-type="file"] .icon-svg {
    fill: var(--accent, #38bdf8); /* your existing accent highlight */
}

/* Shared link styling (public and private views) */
.file-name a {
    color: inherit;
    text-decoration: none;
}

.file-name a:hover {
    text-decoration: underline;
}

.breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Folders yellow, files grey */
.file-name svg icon-folder,
.file-name svg use[href="#icon-folder"] {
    fill: #d1a200;
}

.file-name svg use[href="#icon-file"] {
    fill: #666;
}

/* Let the whole controls row wrap instead of pushing items out */
.controls-row{
  flex-wrap: wrap;
  justify-content: flex-start; /* space-between is hostile when wrapping */
  gap: 10px;
}

/* Left side can shrink and wrap internally */
.left-controls{
  flex: 1 1 420px;
  min-width: 0;
  flex-wrap: wrap;
}

/* Breadcrumb must be allowed to wrap + break long segments */
/* Breadcrumb should wrap BETWEEN segments, not inside segment names */
.breadcrumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;           /* keep your existing sep spacing */
  min-width: 0;
}

/* Never split a directory name */
.breadcrumb a,
.breadcrumb .crumb-current,
.breadcrumb .crumb-root{
  white-space: nowrap;
}

/* Separator is its own wrap point */
.crumb-sep{
  white-space: nowrap;
  margin: 0 4px;    /* you already have this, fine to keep */
}


/* Keep search + toolbar from stretching weirdly */
.search-box,
.toolbar{
  flex: 0 0 auto;
}

/* Left controls: breadcrumb takes remaining width, Up stays put */
.left-controls{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;   /* keep Up button beside breadcrumb */
  min-width: 0;
}

/* Breadcrumb wraps internally */
.breadcrumb{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Audioplayer */
.audio-player {
    margin: 6px 0 10px;
    padding: 4px 0;
    background: transparent;
    border: none;
    border-top: 1px solid #ddd;      /* subtle divider */
    border-bottom: 1px solid #ddd;   /* optional; remove if too much */

    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.audio-player-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.audio-player-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.audio-player-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.audio-player-track {
    flex: 1;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lighter time text */
.audio-player-time {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    font-size: 12px;
    color: #888; /* lighter than before */
}

.ap-btn {
    width: 30px;
    height: 30px;
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f3f3f3;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ap-btn:hover {
    background: #eaeaea;
}

.ap-btn:active {
    background: #ddd;
}

.ap-icon {
    width: 18px;
    height: 18px;
    fill: #444;
}

/* Seek bar nicely centered with some vertical space */
#audio-player #ap-seek {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #b0b3b8;  /* slightly darker, less “white” */
    cursor: pointer;
    margin: 1px 0 1px 0;
}

/* Thumb styling (Chrome/Edge/Safari) */
#audio-player #ap-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #555;
    border: 1px solid #333;
    margin-top: -4px; /* centers thumb on bar */
}

/* Thumb styling (Firefox) */
#audio-player #ap-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #555;
    border: 1px solid #333;
}

/* Track styling (Firefox) */
#audio-player #ap-seek::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #b0b3b8;
}


/* User management */
        .users-shell {
            max-width: 960px;
            margin: 32px auto;
            padding: 20px 22px 24px;
            border-radius: 16px;
            background: rgba(15, 23, 42, 0.96);
            border: 1px solid #1f2933;
        }
        .users-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 16px;
        }
        .users-header h1 {
            font-size: 1.3rem;
            margin: 0;
        }
        .users-header a {
            font-size: 0.9rem;
        }
        .users-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
            margin-bottom: 20px;
        }
        .users-table th,
        .users-table td {
            padding: 6px 8px;
            border-bottom: 1px solid #1f2937;
            vertical-align: top;
        }
        .users-table th {
            text-align: left;
            font-weight: 500;
            color: #9ca3af;
        }
        .users-table tr:last-child td {
            border-bottom: none;
        }
        .user-roots {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 8px;
        }
        .root-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            border-radius: 999px;
            background: #020617;
            border: 1px solid #1f2937;
            font-size: 0.8rem;
        }
        .root-badge input {
            transform: translateY(0.5px);
        }
        .user-actions {
            display: flex;
            gap: 6px;
        }
        .users-subheading {
            font-size: 1rem;
            margin: 14px 0 8px;
        }
        .form-inline {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            align-items: center;
        }
        .form-inline .form-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .form-inline input[type="text"],
        .form-inline input[type="password"],
        .form-inline select {
            min-width: 160px;
        }
        .alert-box {
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 0.85rem;
            margin-bottom: 12px;
        }
        .alert-error {
            background: #451a1a;
            border: 1px solid #7f1d1d;
            color: #fecaca;
        }
        .alert-ok {
            background: #022c22;
            border: 1px solid #047857;
            color: #a7f3d0;
        }