/* ──────────────────────────────────────────────────────────────────────────
   OpenDrawing — Dashboard: filter tabs, search bar, sort + view toggle
   ────────────────────────────────────────────────────────────────────────── */

@layer components {

/* ── TOOLBAR WRAPPER ─────────────────────────────────────────────────────── */
.projects-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; flex-wrap: wrap;
}

.toolbar-divider {
  width: 1px; height: 20px;
  background: var(--border); flex-shrink: 0; margin: 0 2px;
}

/* ── FILTER TABS ─────────────────────────────────────────────────────────── */
.filter-tabs {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 3px; flex-shrink: 0;
  height: 34px;
}

.filter-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; font-size: 12px; font-weight: 500;
  color: var(--text-muted);
  border-radius: calc(var(--radius-lg) - 2px);
  cursor: pointer; transition: all 0.12s;
  white-space: nowrap; border: none; background: none;

  &:hover {
    color: var(--text-primary); background: var(--bg-hover);
    box-shadow: inset 0 0 0 1px var(--border);
  }

  &:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  &.active {
    background: var(--bg-hover); color: var(--text-primary); font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--border-light);
  }

  & .tab-count {
    font-size: 10px; font-weight: 600;
    background: var(--bg-base); color: var(--text-muted);
    border-radius: 20px; padding: 1px 6px;
    min-width: 18px; text-align: center;
  }

  &.active .tab-count { background: var(--accent-dim); color: var(--accent); }
}

/* ── SEARCH BAR ──────────────────────────────────────────────────────────── */
.search-wrap { position: relative; flex: 1; min-width: 180px; max-width: 320px; }

.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; display: flex;
}

.search-input {
  width: 100%; height: 34px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary);
  padding: 0 32px; font-size: 12px; outline: none;
  transition: border-color 0.12s;

  &::placeholder { color: var(--text-secondary); }
  &:focus        { border-color: var(--accent); }
}

.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); cursor: pointer; display: none;
  background: none; border: none; padding: 2px;
  border-radius: 3px; line-height: 0;

  &:hover    { color: var(--text-primary); }
  &.visible  { display: flex; }
}

/* ── TYPE FILTER ─────────────────────────────────────────────────────────── */
.type-filter-wrap {
  flex-shrink: 0;
  max-width: 160px;
}

.type-filter-wrap .sort-select {
  width: 100%;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── SORT DROPDOWN ───────────────────────────────────────────────────────── */
.sort-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sort-label { display: none; }

.sort-select {
  height: 34px;
  background: var(--bg-surface); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius);
  padding: 0 28px 0 10px;
  font-size: 12px; font-family: inherit; outline: none; cursor: pointer;
  transition: border-color 0.12s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235c6580' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;

  &:focus { border-color: var(--accent); }
}

/* ── VIEW TOGGLE ─────────────────────────────────────────────────────────── */
.view-toggle {
  display: flex; gap: 2px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3px; flex-shrink: 0;
  margin-left: 0;
}

.view-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text-muted); cursor: pointer;
  border: none; background: none; transition: all 0.1s;

  &:hover  { color: var(--text-primary); background: var(--bg-hover); }
  &.active { background: var(--bg-hover); color: var(--text-primary); }
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

/* Tablet: filter tabs take full row, search+controls drop to second row */
@media (max-width: 720px) {
  .filter-tabs {
    width: 100%; overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
    &::-webkit-scrollbar { display: none; }
  }

  .toolbar-divider { display: none; }

  .search-wrap { max-width: none; flex: 1; min-width: 0; }

  .sort-wrap   { margin-left: auto; }
}

/* Mobile: search expands, sort+view stay paired */
@media (max-width: 480px) {
  .projects-toolbar { gap: 6px; }

  .filter-tab { padding: 5px 9px; }

  .search-wrap { width: 100%; flex-basis: 100%; order: 3; }

  .sort-wrap   { order: 4; margin-left: 0; }
  .view-toggle { order: 5; }
}

} /* @layer components */