/* ==============================
   FILEBROWSER — CUSTOM THEME
   Black on White | Sharp Edges
   ============================== */

/* ── FONT IMPORT ─────────────────────────────────────
   Downloads fonts for the interface        */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500&display=swap');
/* font-family: 'Outfit', sans-serif; */

/* ── GLOBAL RESET ─────────────────────────────────────
   Base colours and font for the entire interface        */
:root {
  --background:       #ffffff;
  --surface:          #f5f5f5;
  --border:           #e0e0e0;
  --text-primary:     #111111;
  --text-secondary:   #555555;
  --accent:           #111111;
  --accent-hover:     #333333;
  --danger:           #cc0000;
}

body {
  background-color: var(--background);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
}


/* ── SIDEBAR ──────────────────────────────────────────
   Left navigation panel                                 */
#sidebar {
  background-color: #111111 !important;
  border-right: none !important;
}

/* Sidebar text and links */
#sidebar a,
#sidebar span,
#sidebar p,
#sidebar .action {
  color: #ffffff !important;
}

/* Sidebar hover state */
#sidebar a:hover,
#sidebar .action:hover {
  background-color: #222222 !important;
  color: #ffffff !important;
}

/* Sidebar icons — make them white */
#sidebar .material-icons,
#sidebar i {
  color: #ffffff !important;
}

/* Active/selected item in sidebar */
#sidebar .active,
#sidebar a.router-link-active {
  background-color: #333333 !important;
  border-left: 2px solid #ffffff;
}

/* Storage usage bar at bottom of sidebar */
#sidebar .usage {
  border-top: 1px solid #333333;
  color: #aaaaaa !important;
}

#sidebar .usage .used {
  background-color: #ffffff !important;
}

#sidebar .usage .total {
  background-color: #444444 !important;
}


/* ── HEADER / TOOLBAR ─────────────────────────────────
   Top bar with breadcrumb and action buttons            */
#main > header,
header.topbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Breadcrumb text */
header .breadcrumbs a,
header .breadcrumbs span {
  color: var(--text-primary) !important;
  font-weight: 500;
}

/* Header icons and buttons */
header .action,
header button {
  color: var(--text-primary) !important;
  border-radius: 0 !important;
}

header .action:hover,
header button:hover {
  background-color: var(--surface) !important;
}


/* ── FILE LISTING ─────────────────────────────────────
   The main file/folder grid or list view               */
#listing {
  background-color: var(--background) !important;
}

/* Individual file/folder items */
#listing .item {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--border);
}

#listing .item:hover {
  background-color: var(--surface) !important;
}

/* Selected item */
#listing .item.selected,
#listing .item.selected:hover {
  background-color: #111111 !important;
  color: #ffffff !important;
}

#listing .item.selected .name,
#listing .item.selected span {
  color: #ffffff !important;
}

/* File/folder names */
#listing .item .name {
  color: var(--text-primary) !important;
  font-weight: 400;
}

/* File size and date metadata */
#listing .item .meta {
  color: var(--text-secondary) !important;
  font-size: 12px;
}

/* Folder icon colour */
#listing .item .material-icons {
  color: var(--text-primary) !important;
}


/* ── BUTTONS ──────────────────────────────────────────
   All clickable action buttons throughout the UI        */
.button,
button.button {
  border-radius: 0 !important;
  background-color: #111111 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 8px 16px;
}

.button:hover,
button.button:hover {
  background-color: #333333 !important;
}

/* Outlined / secondary buttons */
.button.is-outlined {
  background-color: transparent !important;
  color: #111111 !important;
  border: 1px solid #111111 !important;
}

.button.is-outlined:hover {
  background-color: #111111 !important;
  color: #ffffff !important;
}

/* Danger/delete button */
.button.is-danger {
  background-color: var(--danger) !important;
  color: #ffffff !important;
}


/* ── MODALS & DIALOGS ─────────────────────────────────
   Pop-up windows for rename, delete, new folder etc.   */
.modal-card,
.card {
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
}

.modal-card-head,
.card-header {
  background-color: #111111 !important;
  border-radius: 0 !important;
  border-bottom: none !important;
}

.modal-card-title,
.card-header-title {
  color: #ffffff !important;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.modal-card-body,
.card-content {
  background-color: #ffffff !important;
  color: var(--text-primary) !important;
}

.modal-card-foot,
.card-footer {
  background-color: #f5f5f5 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
}


/* ── INPUTS & FORMS ───────────────────────────────────
   Text inputs, search bar, rename fields etc.           */
input[type="text"],
input[type="password"],
input[type="search"],
.input,
textarea {
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
  background-color: #ffffff !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

input:focus,
.input:focus {
  border-color: #111111 !important;
  outline: none !important;
  box-shadow: none !important;
}


/* ── LOGIN PAGE ───────────────────────────────────────
   The page shown before you log in                      */
#login {
  background-color: #ffffff !important;
}

#login .card {
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
  max-width: 380px;
}

#login img {
  filter: none;
  max-height: 48px;
  margin-bottom: 24px;
}

#login .title {
  color: var(--text-primary) !important;
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}


/* ── SCROLLBAR ────────────────────────────────────────
   Custom scrollbar to match the theme (Chrome/Edge)     */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: #cccccc;
}

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


/* ── NOTIFICATIONS ────────────────────────────────────
   Toast messages that appear on upload, delete etc.     */
.notifications .notification {
  border-radius: 0 !important;
  background-color: #111111 !important;
  color: #ffffff !important;
}

.notifications .notification.is-success {
  background-color: #111111 !important;
}

.notifications .notification.is-danger {
  background-color: var(--danger) !important;
}