/* MOST CDN Manager — custom styles complementing Tailwind */

html, body { -webkit-font-smoothing: antialiased; }
body { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 500; }

/* Color swatches */
.color-swatch {
  width: 34px; height: 34px; border-radius: .65rem;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: transform .12s, border-color .12s;
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.is-selected { border-color: #1a1a1a; }
.color-swatch.is-selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-size: .85rem;
}
.color-swatch.is-none {
  background: repeating-linear-gradient(45deg, #fff, #fff 6px, #f3f4f7 6px, #f3f4f7 12px);
  border-color: #ececef;
}
.color-swatch.is-none.is-selected { border-color: #1a1a1a; }

/* Sidebar collapse */
#sidebar-card.is-collapsed #sidebar-body { display:none; }
#sidebar-card.is-collapsed #sidebar-chevron { transform: rotate(180deg); }
#sidebar-toggle { cursor:pointer; }
#sidebar-toggle:hover #sidebar-chevron { color:#1a1a1a; }

/* Horizontal sidebar collapse (mostly LG+) */
@media (min-width: 1024px) {
  #app-main.sidebar-hidden #sidebar { display:none; }
  #app-main.sidebar-hidden #sidebar-expand { display:flex; }
}
#sidebar-expand { display:none; }

/* Stat cards */
.stat-card {
  display:flex; align-items:center; gap:.6rem;
  background:#fff; border:1px solid #ececef;
  border-radius:.75rem; padding:.55rem .75rem;
}
.stat-icon {
  width:30px; height:30px; border-radius:.55rem;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; flex-shrink:0;
}
.stat-label { font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#9b9b9b; line-height:1; }
.stat-value { font-size:.95rem; font-weight:700; color:#1a1a1a; line-height:1.2; margin-top:.2rem; word-break: break-word; }

/* Header layout: when no description, center title with icon */
#folder-header-row.no-desc #folder-desc { display:none; }

/* ---- View toggle pill ---- */
.view-btn { color: #6b6b6b; transition: all .15s ease; }
.view-btn.is-active { background:#fff; color:#1a1a1a; box-shadow: 0 1px 2px rgba(16,24,40,.08); }

/* ---- Sort direction button ---- */
#sort-dir.is-desc i { transform: rotate(180deg); }

/* ---- Breadcrumbs ---- */
#breadcrumbs a { color:#4b4b4b; padding:.25rem .5rem; border-radius:.5rem; transition:background .15s; }
#breadcrumbs a:hover { background:#f1f1f3; color:#1a1a1a; }
#breadcrumbs .crumb-sep { color:#c8c8cf; }
#breadcrumbs .crumb-current { color:#1a1a1a; font-weight:600; padding:.25rem .5rem; }

/* ---- Tree ---- */
#tree .tree-node { display:flex; align-items:center; gap:.5rem; padding:.4rem .55rem; border-radius:.5rem; color:#4b4b4b; cursor:pointer; transition:all .12s; min-width:0; }
#tree .tree-node:hover { background:#f7f7f8; color:#1a1a1a; }
#tree .tree-node.is-active { background:#fff5d4; color:#1a1a1a; font-weight:600; }
#tree .tree-node i.fa-chevron-right { font-size:.7rem; color:#9b9b9b; width:.7rem; transition:transform .15s; }
#tree .tree-node.is-open i.fa-chevron-right { transform: rotate(90deg); }
#tree .tree-children { padding-left:.85rem; border-left:1px dashed #ececef; margin-left:.55rem; }
#tree .tree-node .label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Cards (grid view) ---- */
.card {
  position: relative;
  background:#fff;
  border:1px solid #ececef;
  border-radius:1rem;
  padding:1rem;
  display:flex; flex-direction:column; gap:.6rem;
  transition: all .15s ease;
  cursor: pointer;
}
.card:hover { border-color:#F7B500; box-shadow:0 6px 20px rgba(247,181,0,.15); transform: translateY(-1px); }
.card .icon-tile {
  width:48px; height:48px; border-radius:.85rem;
  background:#fff5d4; color:#d99e00;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}
.card .icon-tile.file { background:#f3f4f7; color:#6b7280; }
.card .item-title { font-weight:600; line-height:1.25; word-break: break-word; }
.card .item-sub { font-size:.78rem; color:#8a8a8a; }

/* ---- List view rows ---- */
.row {
  display:grid;
  grid-template-columns: 44px minmax(0,1fr) 110px 120px 44px;
  align-items:center; gap:.75rem;
  padding:.7rem .9rem;
  background:#fff;
  border:1px solid #ececef;
  border-top:none;
  cursor: pointer;
  transition: background .12s;
}
.row:first-of-type { border-top:1px solid #ececef; border-top-left-radius:.85rem; border-top-right-radius:.85rem; }
.row:last-of-type  { border-bottom-left-radius:.85rem; border-bottom-right-radius:.85rem; }
.row:hover { background:#fbfaf3; }
.row .icon-tile {
  width:36px; height:36px; border-radius:.6rem;
  background:#fff5d4; color:#d99e00;
  display:flex; align-items:center; justify-content:center;
}
.row .icon-tile.file { background:#f3f4f7; color:#6b7280; }
.row .item-title { font-weight:600; word-break: break-word; }
.row .meta { font-size:.8rem; color:#8a8a8a; }
@media (max-width: 640px) {
  .row { grid-template-columns: 40px minmax(0,1fr) 40px; }
  .row .meta { display:none; }
}

/* ---- Action menu (3-dot) ---- */
.actions {
  position:relative;
}
.actions-btn {
  width:32px; height:32px; border-radius:.5rem;
  display:inline-flex; align-items:center; justify-content:center;
  color:#6b6b6b; background:transparent;
  transition: background .12s;
}
.actions-btn:hover { background:#f1f1f3; color:#1a1a1a; }

.actions-menu {
  position:absolute;
  right:0; top: calc(100% + 6px);
  z-index:40;
  min-width: 200px;
  background:#fff;
  border:1px solid #ececef;
  border-radius:.75rem;
  box-shadow: 0 10px 30px rgba(16,24,40,.12);
  padding:.35rem;
}
.actions-menu button {
  width:100%; text-align:left;
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .6rem;
  font-size:.875rem; color:#1a1a1a;
  border-radius:.5rem;
  transition: background .1s;
}
.actions-menu button:hover { background:#f7f7f8; }
.actions-menu button.danger { color:#b91c1c; }
.actions-menu button.danger:hover { background:#fee2e2; }
.actions-menu i { width:1rem; color:#8a8a8a; }
.actions-menu button.danger i { color:#b91c1c; }
.actions-menu hr { border-color:#ececef; margin:.25rem 0; }

/* ---- Modals ---- */
.modal-backdrop {
  position: fixed; inset:0; z-index:60;
  background: rgba(16,24,40,.45);
  backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  animation: fadeIn .15s ease;
}
.modal-panel {
  background:#fff; border-radius:1rem;
  width:100%;
  box-shadow: 0 20px 60px rgba(16,24,40,.25);
  display:flex; flex-direction:column;
  max-height: calc(100vh - 2rem);
  animation: pop .18s ease;
}
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid #ececef; }
.modal-title { font-weight:700; font-size:1.05rem; }
.modal-close { width:32px; height:32px; border-radius:.5rem; color:#6b6b6b; }
.modal-close:hover { background:#f3f4f7; color:#1a1a1a; }
.modal-body { padding:1.25rem; overflow:auto; }
.modal-footer { display:flex; gap:.5rem; justify-content:flex-end; padding:1rem 1.25rem; border-top:1px solid #ececef; background:#fafafa; border-bottom-left-radius:1rem; border-bottom-right-radius:1rem; }

.form-label { display:block; font-size:.8rem; font-weight:600; color:#4b4b4b; margin-bottom:.4rem; }
.form-input {
  width:100%; padding:.6rem .8rem; font-size:.9rem;
  background:#fff; border:1px solid #ececef; border-radius:.6rem;
  transition: border-color .12s, box-shadow .12s;
}
.form-input:focus { outline:none; border-color:#F7B500; box-shadow: 0 0 0 3px rgba(247,181,0,.18); }
.form-hint { font-size:.75rem; color:#8a8a8a; margin-top:.4rem; }

.btn-primary {
  background:#F7B500; color:#1a1a1a; font-weight:600;
  padding:.55rem 1rem; border-radius:.6rem; font-size:.875rem;
  display:inline-flex; align-items:center; transition: background .12s;
}
.btn-primary:hover:not(:disabled) { background:#d99e00; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-ghost {
  background:transparent; color:#1a1a1a; font-weight:500;
  padding:.55rem 1rem; border-radius:.6rem; font-size:.875rem;
  border:1px solid transparent;
}
.btn-ghost:hover { background:#f3f4f7; }
.btn-danger {
  background:#dc2626; color:#fff; font-weight:600;
  padding:.55rem 1rem; border-radius:.6rem; font-size:.875rem;
  display:inline-flex; align-items:center; transition: background .12s;
}
.btn-danger:hover { background:#b91c1c; }

/* ---- Icon picker grid ---- */
.icon-cell {
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 1;
  border-radius:.6rem; background:#f7f7f8;
  cursor:pointer; font-size:1.1rem; color:#4b4b4b;
  transition: all .12s;
}
.icon-cell:hover { background:#fff5d4; color:#d99e00; }
.icon-cell.is-selected { background:#F7B500; color:#1a1a1a; box-shadow: 0 0 0 2px #d99e00 inset; }

[data-style-toggle] button.is-active { background:#fff; box-shadow: 0 1px 2px rgba(16,24,40,.08); }

/* ---- Move tree ---- */
[data-move-tree] .mt-row {
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem; border-radius:.5rem; cursor:pointer;
}
[data-move-tree] .mt-row:hover { background:#f7f7f8; }
[data-move-tree] .mt-row.is-selected { background:#fff5d4; color:#1a1a1a; font-weight:600; }
[data-move-tree] .mt-children { padding-left:1rem; border-left:1px dashed #ececef; margin-left:.7rem; }

/* ---- Toast ---- */
.toast {
  background:#1a1a1a; color:#fff;
  padding:.7rem 1rem; border-radius:.7rem; font-size:.875rem;
  box-shadow: 0 10px 30px rgba(16,24,40,.18);
  display:flex; align-items:center; gap:.6rem;
  animation: pop .15s ease;
  max-width: 360px;
}
.toast.success { background:#0f766e; }
.toast.error { background:#b91c1c; }
.toast.info { background:#1f2937; }

/* ---- Search results ---- */
.search-section-title { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#8a8a8a; margin: 1rem 0 .5rem; }

@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes pop { from { opacity:0; transform: scale(.96) } to { opacity:1; transform: scale(1) } }

/* hide scrollbars chrome */
.modal-body::-webkit-scrollbar { width:8px }
.modal-body::-webkit-scrollbar-thumb { background:#e2e2e6; border-radius: 4px }

/* drag-over dropzone */
#dropzone.is-dragover #drop-overlay { display:flex; }