/* ── Thèmes ── */
:root, [data-theme="light"] {
  --bg: #ffffff;
  --bg-alt: #F8F8F8;
  --border: #E8E8E8;
  --text: #1A1A1A;
  --text-muted: #757575;
  --text-link: #2BB24C;
  --tag-bg: #E8F5EC;
  --tag-text: #1A7A35;
  --sidebar-bg: #f3f4f6;
  --sidebar-active: #E8F5EC;
  --sidebar-active-text: #1A7A35;
  --btn-primary: #2BB24C;
  --btn-primary-hover: #239940;
  --btn-danger: #ef4444;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --card-hover: #f9fafb;
}

[data-theme="dark"] {
  --bg: #111827;
  --bg-alt: #1f2937;
  --border: #374151;
  --text: #f9fafb;
  --text-muted: #9ca3af;
  --text-link: #60a5fa;
  --tag-bg: #1e3a5f;
  --tag-text: #93c5fd;
  --sidebar-bg: #1f2937;
  --sidebar-active: #1e3a5f;
  --sidebar-active-text: #93c5fd;
  --btn-primary: #3b82f6;
  --btn-primary-hover: #2563eb;
  --btn-danger: #ef4444;
  --input-bg: #1f2937;
  --input-border: #374151;
  --card-hover: #1f2937;
}

[data-theme="dracula"] {
  --bg: #282a36;
  --bg-alt: #21222c;
  --border: #44475a;
  --text: #f8f8f2;
  --text-muted: #6272a4;
  --text-link: #bd93f9;
  --tag-bg: #44475a;
  --tag-text: #bd93f9;
  --sidebar-bg: #21222c;
  --sidebar-active: #383a4a;
  --sidebar-active-text: #bd93f9;
  --btn-primary: #bd93f9;
  --btn-primary-hover: #a673e8;
  --btn-danger: #ff5555;
  --input-bg: #21222c;
  --input-border: #44475a;
  --card-hover: #21222c;
}

[data-theme="nord"] {
  --bg: #eceff4;
  --bg-alt: #e5e9f0;
  --border: #d8dee9;
  --text: #2e3440;
  --text-muted: #4c566a;
  --text-link: #5e81ac;
  --tag-bg: #d8dee9;
  --tag-text: #5e81ac;
  --sidebar-bg: #e5e9f0;
  --sidebar-active: #d8dee9;
  --sidebar-active-text: #5e81ac;
  --btn-primary: #5e81ac;
  --btn-primary-hover: #4c6f9a;
  --btn-danger: #bf616a;
  --input-bg: #eceff4;
  --input-border: #d8dee9;
  --card-hover: #e5e9f0;
}

[data-theme="nord-dark"] {
  --bg: #2e3440;
  --bg-alt: #3b4252;
  --border: #434c5e;
  --text: #eceff4;
  --text-muted: #9099ab;
  --text-link: #88c0d0;
  --tag-bg: #434c5e;
  --tag-text: #88c0d0;
  --sidebar-bg: #3b4252;
  --sidebar-active: #434c5e;
  --sidebar-active-text: #88c0d0;
  --btn-primary: #5e81ac;
  --btn-primary-hover: #4c6f9a;
  --btn-danger: #bf616a;
  --input-bg: #3b4252;
  --input-border: #434c5e;
  --card-hover: #3b4252;
}

[data-theme="catppuccin"] {
  --bg: #1e1e2e;
  --bg-alt: #181825;
  --border: #313244;
  --text: #cdd6f4;
  --text-muted: #7f849c;
  --text-link: #89b4fa;
  --tag-bg: #313244;
  --tag-text: #cba6f7;
  --sidebar-bg: #181825;
  --sidebar-active: #313244;
  --sidebar-active-text: #cba6f7;
  --btn-primary: #cba6f7;
  --btn-primary-hover: #b793e0;
  --btn-danger: #f38ba8;
  --input-bg: #181825;
  --input-border: #313244;
  --card-hover: #181825;
}

[data-theme="gruvbox"] {
  --bg: #282828;
  --bg-alt: #1d2021;
  --border: #3c3836;
  --text: #ebdbb2;
  --text-muted: #928374;
  --text-link: #83a598;
  --tag-bg: #3c3836;
  --tag-text: #fabd2f;
  --sidebar-bg: #1d2021;
  --sidebar-active: #3c3836;
  --sidebar-active-text: #fabd2f;
  --btn-primary: #83a598;
  --btn-primary-hover: #689d6a;
  --btn-danger: #cc241d;
  --input-bg: #1d2021;
  --input-border: #3c3836;
  --card-hover: #1d2021;
}

[data-theme="solarized"] {
  --bg: #fdf6e3;
  --bg-alt: #eee8d5;
  --border: #dfd5b0;
  --text: #657b83;
  --text-muted: #93a1a1;
  --text-link: #268bd2;
  --tag-bg: #eee8d5;
  --tag-text: #2aa198;
  --sidebar-bg: #eee8d5;
  --sidebar-active: #dfd5b0;
  --sidebar-active-text: #268bd2;
  --btn-primary: #268bd2;
  --btn-primary-hover: #1a6fa8;
  --btn-danger: #dc322f;
  --input-bg: #fdf6e3;
  --input-border: #dfd5b0;
  --card-hover: #eee8d5;
}

[data-theme="rosepine"] {
  --bg: #191724;
  --bg-alt: #1f1d2e;
  --border: #26233a;
  --text: #e0def4;
  --text-muted: #6e6a86;
  --text-link: #9ccfd8;
  --tag-bg: #26233a;
  --tag-text: #c4a7e7;
  --sidebar-bg: #1f1d2e;
  --sidebar-active: #26233a;
  --sidebar-active-text: #c4a7e7;
  --btn-primary: #c4a7e7;
  --btn-primary-hover: #ad8fd0;
  --btn-danger: #eb6f92;
  --input-bg: #1f1d2e;
  --input-border: #26233a;
  --card-hover: #1f1d2e;
}

/* Catppuccin Latte (light) */
[data-theme="catppuccin-latte"] {
  --bg: #eff1f5; --bg-alt: #e6e9ef; --border: #ccd0da; --text: #4c4f69;
  --text-muted: #8c8fa1; --text-link: #1e66f5; --tag-bg: #ccd0da; --tag-text: #8839ef;
  --sidebar-bg: #e6e9ef; --sidebar-active: #ccd0da; --sidebar-active-text: #8839ef;
  --btn-primary: #8839ef; --btn-primary-hover: #7527d7; --btn-danger: #d20f39;
  --input-bg: #eff1f5; --input-border: #ccd0da; --card-hover: #e6e9ef;
}

/* Gruvbox Light */
[data-theme="gruvbox-light"] {
  --bg: #fbf1c7; --bg-alt: #f2e5bc; --border: #d5c4a1; --text: #3c3836;
  --text-muted: #7c6f64; --text-link: #076678; --tag-bg: #d5c4a1; --tag-text: #b57614;
  --sidebar-bg: #f2e5bc; --sidebar-active: #ebdbb2; --sidebar-active-text: #b57614;
  --btn-primary: #458588; --btn-primary-hover: #357577; --btn-danger: #cc241d;
  --input-bg: #fbf1c7; --input-border: #d5c4a1; --card-hover: #f2e5bc;
}

/* Solarized Dark */
[data-theme="solarized-dark"] {
  --bg: #002b36; --bg-alt: #073642; --border: #586e75; --text: #839496;
  --text-muted: #657b83; --text-link: #268bd2; --tag-bg: #073642; --tag-text: #2aa198;
  --sidebar-bg: #073642; --sidebar-active: #586e75; --sidebar-active-text: #93a1a1;
  --btn-primary: #268bd2; --btn-primary-hover: #1a6fa8; --btn-danger: #dc322f;
  --input-bg: #073642; --input-border: #586e75; --card-hover: #073642;
}

/* Dracula Light */
[data-theme="dracula-light"] {
  --bg: #f8f8f2; --bg-alt: #f0f0ea; --border: #e0dfd5; --text: #282a36;
  --text-muted: #6272a4; --text-link: #6272a4; --tag-bg: #e4deff; --tag-text: #6272a4;
  --sidebar-bg: #f0f0ea; --sidebar-active: #e4deff; --sidebar-active-text: #6272a4;
  --btn-primary: #bd93f9; --btn-primary-hover: #a673e8; --btn-danger: #ff5555;
  --input-bg: #f8f8f2; --input-border: #e0dfd5; --card-hover: #f0f0ea;
}

/* Rosé Pine Dawn (light) */
[data-theme="rosepine-dawn"] {
  --bg: #faf4ed; --bg-alt: #fffaf3; --border: #dfdad9; --text: #575279;
  --text-muted: #9893a5; --text-link: #286983; --tag-bg: #dfdad9; --tag-text: #907aa9;
  --sidebar-bg: #fffaf3; --sidebar-active: #f2e9e1; --sidebar-active-text: #907aa9;
  --btn-primary: #286983; --btn-primary-hover: #1f5470; --btn-danger: #b4637a;
  --input-bg: #faf4ed; --input-border: #dfdad9; --card-hover: #f2e9e1;
}

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

html, body { height: 100%; margin: 0; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ── */
.layout { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform 0.2s ease;
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.content { flex: 1; overflow-y: auto; padding: 1.25rem; }
.content-wrap { max-width: none; }

/* ── Sidebar ── */
.sidebar-logo {
  padding: 1.25rem 1rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-section {
  padding: 0.85rem 0.6rem 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.875rem;
  border-radius: 0.375rem;
  margin: 0 0.3rem;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.925rem;
  transition: background 0.1s;
}

.sidebar-item:hover { background: var(--card-hover); text-decoration: none; }
.sidebar-item.active { background: var(--sidebar-active); color: var(--sidebar-active-text); font-weight: 500; }
.sidebar-item.drop-target { background: var(--sidebar-active); outline: 2px solid var(--sidebar-active-text); }

.sidebar-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--border);
  border-radius: 9999px;
  padding: 0.1rem 0.45rem;
  flex-shrink: 0;
}

.sidebar-bottom {
  margin-top: auto;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ── Topbar ── */
.search-input {
  flex: 1;
  max-width: 400px;
  padding: 0.4rem 0.75rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 0.375rem;
  color: var(--text);
  font-size: 0.875rem;
  outline: none;
}

.search-input:focus { border-color: var(--btn-primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }

.btn {
  padding: 0.4rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
}

.btn-primary { background: var(--btn-primary); color: #fff; }
.btn-primary:hover { background: var(--btn-primary-hover); text-decoration: none; color: #fff; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--card-hover); text-decoration: none; color: var(--text); }
.btn-danger { background: var(--btn-danger); color: #fff; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

/* ── Link cards (Feedly style) ── */
.links-list { display: flex; flex-direction: column; }

.link-card {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.link-card:hover { background: var(--card-hover); }
.link-card:hover .link-actions { opacity: 1; }

.link-body { flex: 1; min-width: 0; }

.link-thumbnail {
  flex-shrink: 0;
  width: 110px;
  height: 74px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: block;
  align-self: flex-start;
  margin-top: 2px;
}

.link-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.link-thumbnail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  user-select: none;
  letter-spacing: -0.02em;
}

.link-source {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.link-favicon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 2px;
}

.link-domain {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.link-title {
  font-weight: 700;
  color: var(--text);
  font-size: 1.05rem;
  display: block;
  line-height: 1.45;
  margin-bottom: 0.3rem;
}

.link-title:hover { color: var(--text-link); text-decoration: none; }

.link-description {
  font-size: 0.9rem;
  color: var(--text);
  opacity: 0.72;
  line-height: 1.65;
  margin-bottom: 0.45rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.link-note {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.75;
  border-left: 3px solid var(--sidebar-active-text, #1A7A35);
  padding: 0.35rem 0.875rem;
  background: var(--bg-alt);
  border-radius: 0 4px 4px 0;
}

.link-note p { margin: 0 0 0.5rem; }
.link-note p:last-child { margin-bottom: 0; }
.link-note a { color: var(--text-link); }
.link-note code { font-size: 0.8em; background: var(--border); padding: 0.1em 0.3em; border-radius: 3px; }

.link-footer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.link-date {
  font-size: 0.8rem;
  color: var(--tag-text);
  background: var(--tag-bg);
  border-radius: 9999px;
  padding: 0.15rem 0.65rem;
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.link-actions {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-shrink: 0;
  opacity: 0.2;
  transition: opacity 0.15s;
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}

.pagination-info {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Tags ── */
.tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  background: var(--tag-bg);
  color: var(--tag-text);
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
}

.link-folder-tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  background: var(--sidebar-active);
  color: var(--sidebar-active-text);
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
}

.tag:hover { opacity: 0.8; text-decoration: none; }

/* ── Form ── */
.form-card {
  max-width: 700px;
  margin: 0 auto;
}

.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem; color: var(--text-muted); }

.form-input, .form-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 0.375rem;
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
}

.form-input:focus, .form-textarea:focus {
  border-color: var(--btn-primary);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.form-textarea { resize: vertical; min-height: 80px; }
.form-textarea.tall { min-height: 160px; }

.form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check input { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--btn-primary); }

.form-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }

/* ── Theme select ── */
.theme-select {
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  color: var(--text);
  cursor: pointer;
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-muted);
}

.empty-state a { color: var(--text-link); }

/* ── Mobile ── */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.25rem; color: var(--text); }

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 20;
    transform: translateX(-100%);
    width: 260px;
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-overlay.open { display: block; }
  .hamburger { display: block; }
  .link-actions { opacity: 1; flex-direction: row; }
  .link-thumbnail { display: none; }
  .btn-label { display: none; }
  .topbar form { max-width: none; }
  .content { padding: 0.75rem; }
  .pagination { gap: 0.5rem; flex-wrap: wrap; }
  .pagination-info { width: 100%; text-align: center; order: -1; }
}
/* Drag & Drop dossiers sidebar */
.drag-handle {
  opacity: 0;
  cursor: grab;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: opacity 0.1s;
  user-select: none;
  padding-right: 0.15rem;
}
.sidebar-folder-item:hover .drag-handle { opacity: 1; }
.drag-handle:active { cursor: grabbing; }

.folder-node { position: relative; }
.folder-children { min-height: 4px; }
.folder-children .folder-children { padding-left: 0.875rem; }

.sortable-ghost > .sidebar-folder-item,
.sortable-ghost > a { opacity: 0.35; background: var(--sidebar-active); border-radius: 0.375rem; }
.sortable-chosen > .sidebar-folder-item,
.sortable-chosen > a { background: var(--card-hover); }

/* Logo sidebar — suit la couleur d'accentuation du thème */
.sidebar-logo { color: var(--sidebar-active-text); }

/* Fix CSP: hover sidebar add button */
.sidebar-add-btn { color: var(--text-muted); transition: color 0.15s; }
.sidebar-add-btn:hover { color: var(--text); }

/* ── Vue grille ── */
.links-list.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  align-items: start;
}

.view-grid .link-card {
  flex-direction: column;
  padding: 0;
  border-bottom: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  gap: 0;
  cursor: default;
}

.view-grid .link-thumbnail,
.view-grid .link-thumbnail-placeholder {
  width: 100%;
  height: 160px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  margin: 0;
  align-self: auto;
}

.view-grid .link-body { padding: 0.75rem 1rem 0.5rem; }

.view-grid .link-note { display: none; }

.view-grid .link-description {
  -webkit-line-clamp: 2;
  margin-bottom: 0.35rem;
}

.view-grid .link-actions {
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 0.75rem 0.6rem;
  opacity: 0;
}

.view-grid .link-card:hover .link-actions { opacity: 1; }

.view-grid .link-footer { margin-top: 0.35rem; }

/* ── Sidebar tag actions ── */
.sidebar-tag-input {
  flex: 1; min-width: 0; font-size: 0.875rem;
  border: 1px solid var(--primary, #4a90d9); border-radius: 3px;
  padding: 0 0.25rem; background: var(--bg); color: var(--text); outline: none;
}
.sidebar-tag-btn {
  background: none; border: none; cursor: pointer;
  padding: 0 0.1rem; font-size: 0.8rem; color: var(--text-muted); line-height: 1;
}
.sidebar-tag-btn:hover { color: var(--text); }