/* ============================================================
   Combr - SaveDrive | Stylesheet Principal
   ============================================================ */

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

:root {
  --sd-primary:     #1a56db;
  --sd-primary-dark:#1046c0;
  --sd-accent:      #0ea5e9;
  --sd-dark:        #0f172a;
  --sd-surface:     #1e293b;
  --sd-border:      #334155;
  --sd-muted:       #64748b;
  --sd-text:        #e2e8f0;
  --sd-text-light:  #94a3b8;
  --sd-success:     #22c55e;
  --sd-warning:     #f59e0b;
  --sd-danger:      #ef4444;
  --sd-radius:      .5rem;
  --sd-shadow:      0 4px 24px rgba(0,0,0,.35);
  --sd-sidebar:     240px;
  --sd-topbar:      58px;
}

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

body {
  font-family: 'Inter', sans-serif;
  background: var(--sd-dark);
  color: var(--sd-text);
  margin: 0;
  font-size: .9rem;
  -webkit-font-smoothing: antialiased;
}

/* ---- Scrollbar ------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sd-surface); }
::-webkit-scrollbar-thumb { background: var(--sd-border); border-radius: 3px; }

/* ---- Topbar ---------------------------------------------- */
.sd-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  height: var(--sd-topbar);
  background: var(--sd-surface);
  border-bottom: 1px solid var(--sd-border);
  display: flex; align-items: center; padding: 0 1.25rem;
  gap: 1rem;
}
.sd-topbar .brand {
  font-size: 1.1rem; font-weight: 700; color: var(--sd-primary);
  text-decoration: none; white-space: nowrap;
  display: flex; align-items: center; gap: .5rem;
}
.sd-topbar .brand span { color: var(--sd-accent); }
.sd-topbar .search-wrap {
  flex: 1; max-width: 460px;
  position: relative;
}
.sd-topbar .search-wrap input {
  width: 100%;
  background: var(--sd-dark); border: 1px solid var(--sd-border);
  border-radius: 2rem; color: var(--sd-text);
  padding: .45rem 1rem .45rem 2.5rem; font-size: .875rem;
  outline: none; transition: border-color .2s;
}
.sd-topbar .search-wrap input:focus { border-color: var(--sd-primary); }
.sd-topbar .search-wrap .bi-search {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--sd-muted); font-size: .875rem;
}
.sd-topbar .ms-auto { margin-left: auto; }
.sd-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sd-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  text-decoration: none; flex-shrink: 0;
}

/* ---- Sidebar --------------------------------------------- */
.sd-sidebar {
  position: fixed; top: var(--sd-topbar); left: 0; bottom: 0;
  width: var(--sd-sidebar); background: var(--sd-surface);
  border-right: 1px solid var(--sd-border);
  overflow-y: auto; z-index: 1020;
  padding: 1rem 0; transition: transform .25s;
}
.sd-sidebar .nav-section {
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--sd-muted);
  padding: 1rem 1.25rem .35rem; margin: 0;
}
.sd-sidebar .nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem 1.25rem; color: var(--sd-text-light);
  text-decoration: none; font-size: .875rem; font-weight: 500;
  border-radius: 0; transition: background .15s, color .15s;
}
.sd-sidebar .nav-link:hover { background: rgba(255,255,255,.05); color: var(--sd-text); }
.sd-sidebar .nav-link.active {
  background: rgba(26,86,219,.15); color: var(--sd-primary);
  border-right: 3px solid var(--sd-primary);
}
.sd-sidebar .nav-link .bi { font-size: 1rem; }

/* Quota bar */
.quota-bar {
  margin: 1rem 1.25rem 0;
  padding: .75rem; background: var(--sd-dark);
  border-radius: var(--sd-radius);
}
.quota-bar .progress { height: 5px; background: var(--sd-border); border-radius: 3px; }
.quota-bar .progress-bar { background: var(--sd-primary); border-radius: 3px; }
.quota-bar small { color: var(--sd-muted); font-size: .75rem; }

/* ---- Main content ---------------------------------------- */
.sd-main {
  margin-left: var(--sd-sidebar);
  margin-top: var(--sd-topbar);
  padding: 1.5rem;
  min-height: calc(100vh - var(--sd-topbar));
}

/* ---- Cards ----------------------------------------------- */
.sd-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
  padding: 1.25rem;
}
.sd-stat-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
  padding: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
.sd-stat-card .icon {
  width: 48px; height: 48px; border-radius: var(--sd-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.sd-stat-card .value { font-size: 1.5rem; font-weight: 700; }
.sd-stat-card .label { color: var(--sd-muted); font-size: .8rem; }

/* ---- File Manager ---------------------------------------- */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}
.file-card {
  background: var(--sd-surface); border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius); padding: .875rem .75rem;
  cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
  position: relative; user-select: none;
}
.file-card:hover { border-color: var(--sd-primary); background: rgba(26,86,219,.07); }
.file-card.selected { border-color: var(--sd-primary); background: rgba(26,86,219,.14); }
.file-card .file-icon { font-size: 2.5rem; margin-bottom: .5rem; display: block; }
.file-card .file-name {
  font-size: .78rem; font-weight: 500; color: var(--sd-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.file-card .file-size { font-size: .7rem; color: var(--sd-muted); }
.file-card .file-menu-btn {
  position: absolute; top: .35rem; right: .35rem;
  opacity: 0; transition: opacity .15s;
  background: var(--sd-dark); border: none; border-radius: .25rem;
  color: var(--sd-muted); width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.file-card:hover .file-menu-btn { opacity: 1; }

/* List view */
.file-list { border: 1px solid var(--sd-border); border-radius: var(--sd-radius); overflow: hidden; }
.file-list-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1rem; border-bottom: 1px solid var(--sd-border);
  cursor: pointer; transition: background .12s;
}
.file-list-item:last-child { border-bottom: none; }
.file-list-item:hover { background: rgba(255,255,255,.04); }
.file-list-item .fi-name { flex: 1; font-size: .875rem; font-weight: 500; min-width: 0; }
.file-list-item .fi-name small { display: block; color: var(--sd-muted); font-size: .75rem; font-weight: 400; }
.file-list-item .fi-size, .file-list-item .fi-date { color: var(--sd-muted); font-size: .78rem; white-space: nowrap; }
.file-list-item .fi-size { min-width: 70px; text-align: right; }
.file-list-item .fi-date { min-width: 110px; text-align: right; }

/* ---- Upload Zone ----------------------------------------- */
.upload-zone {
  border: 2px dashed var(--sd-border); border-radius: var(--sd-radius);
  padding: 2.5rem 1rem; text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s; color: var(--sd-muted);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--sd-primary); background: rgba(26,86,219,.06);
  color: var(--sd-text);
}
.upload-zone .bi { font-size: 2.5rem; margin-bottom: .5rem; display: block; }

/* Upload progress */
.upload-item {
  background: var(--sd-dark); border-radius: var(--sd-radius);
  padding: .75rem 1rem; margin-top: .5rem;
}
.upload-item .progress { height: 4px; background: var(--sd-border); border-radius: 2px; margin-top: .35rem; }
.upload-item .progress-bar { background: var(--sd-primary); transition: width .3s; }

/* ---- Breadcrumb ------------------------------------------ */
.sd-breadcrumb {
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.sd-breadcrumb a { color: var(--sd-muted); text-decoration: none; font-size: .85rem; }
.sd-breadcrumb a:hover { color: var(--sd-text); }
.sd-breadcrumb .sep { color: var(--sd-border); font-size: .7rem; }
.sd-breadcrumb .current { color: var(--sd-text); font-size: .85rem; font-weight: 500; }

/* ---- Toolbar --------------------------------------------- */
.sd-toolbar {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.sd-toolbar .btn-sm { font-size: .8rem; }
.sd-toolbar .ms-auto { margin-left: auto !important; }

/* ---- Forms ----------------------------------------------- */
.form-control, .form-select {
  background: var(--sd-dark) !important;
  border-color: var(--sd-border) !important;
  color: var(--sd-text) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sd-primary) !important;
  box-shadow: 0 0 0 3px rgba(26,86,219,.2) !important;
}
.form-label { font-size: .85rem; font-weight: 500; color: var(--sd-text-light); }
.form-text  { color: var(--sd-muted) !important; }

/* ---- Buttons --------------------------------------------- */
.btn-primary   { background: var(--sd-primary); border-color: var(--sd-primary); }
.btn-primary:hover { background: var(--sd-primary-dark); border-color: var(--sd-primary-dark); }
.btn-outline-secondary {
  border-color: var(--sd-border); color: var(--sd-text-light);
}
.btn-outline-secondary:hover { background: var(--sd-border); color: var(--sd-text); }

/* ---- Tables ---------------------------------------------- */
.table-dark { --bs-table-bg: var(--sd-surface); --bs-table-border-color: var(--sd-border); }
.table-dark thead th { color: var(--sd-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---- Modals ---------------------------------------------- */
.modal-content { background: var(--sd-surface); border: 1px solid var(--sd-border); }
.modal-header  { border-bottom-color: var(--sd-border); }
.modal-footer  { border-top-color: var(--sd-border); }
.btn-close     { filter: invert(1); }

/* ---- Login page ------------------------------------------ */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--sd-dark);
  background-image: radial-gradient(ellipse at 30% 60%, rgba(26,86,219,.15) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 20%, rgba(14,165,233,.1) 0%, transparent 50%);
}
.login-card {
  width: 100%; max-width: 420px;
  background: var(--sd-surface); border: 1px solid var(--sd-border);
  border-radius: 1rem; padding: 2.5rem;
  box-shadow: var(--sd-shadow);
}
.login-card .logo { text-align: center; margin-bottom: 2rem; }
.login-card .logo h1 { font-size: 1.6rem; font-weight: 700; color: #fff; margin: 0; }
.login-card .logo span { color: var(--sd-accent); }
.login-card .logo p { color: var(--sd-muted); font-size: .85rem; margin: .25rem 0 0; }

/* ---- Admin badges ---------------------------------------- */
.badge-role-superadmin { background: linear-gradient(135deg,#7c3aed,#4f46e5); color: #fff; }
.badge-role-admin      { background: var(--sd-primary); color: #fff; }
.badge-role-user       { background: var(--sd-border); color: var(--sd-text); }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 768px) {
  :root { --sd-sidebar: 0px; }
  .sd-sidebar { transform: translateX(-100%); width: 240px; }
  .sd-sidebar.open { transform: translateX(0); }
  .sd-main { margin-left: 0; padding: 1rem; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ---- Dropdown context menu ------------------------------- */
.ctx-menu {
  position: fixed; z-index: 9999;
  background: var(--sd-surface); border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius); box-shadow: var(--sd-shadow);
  min-width: 180px; padding: .35rem 0;
}
.ctx-menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem; color: var(--sd-text);
  text-decoration: none; font-size: .85rem;
  transition: background .12s;
}
.ctx-menu a:hover { background: rgba(255,255,255,.06); }
.ctx-menu .ctx-sep { border-top: 1px solid var(--sd-border); margin: .35rem 0; }

/* ---- Animations ------------------------------------------ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn .25s ease both; }

/* ---- Shared link page ------------------------------------ */
.share-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--sd-dark); padding: 1rem;
}
.share-card {
  width: 100%; max-width: 500px;
  background: var(--sd-surface); border: 1px solid var(--sd-border);
  border-radius: 1rem; padding: 2rem; text-align: center;
}