/* ============================================================================
   DaCucina — Workspace tabs (dc-tabs) 2026-09-24
   Scoped: .dc-topbar, .dc-tabs*, .dc-crumbs, .dc-picker, .dc-ctx,
   .dc-tabs-confirm, .dc-sb__more. Palette = ivory / stone / graphite / bronze.
   ============================================================================ */
.dc-topbar {
  --tb-bg: #F7F5F0;
  --tb-surface: #FFFEFC;
  --tb-stone: #EFEAE2;
  --tb-text: #292621;
  --tb-text2: #756D63;
  --tb-border: #E5DDD2;
  --tb-bronze: #A78053;
  --tb-t: 160ms;
  --tb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  height: 48px;
  min-height: 48px;
  padding: 0 12px 0 12px;
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-border);
  gap: 10px;
}
body.dark .dc-topbar { --tb-bg: #161922; --tb-surface: #1c2030; --tb-stone: #1a1e2b; --tb-text: #f5f1ea; --tb-text2: #b3ada1; --tb-border: rgba(245,241,234,.10); --tb-bronze: #c89d6b; }
.dc-topbar .topbar-left { flex: 1; min-width: 0; align-items: stretch; gap: 6px; height: 100%; }
.dc-topbar .topbar-right { flex-shrink: 0; }

.dc-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  flex: 0 1 auto;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-top: 6px;
}
.dc-tabs::-webkit-scrollbar { display: none; }
.dc-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  max-width: 220px;
  min-width: 0;
  flex: 0 0 auto;
  padding: 0 8px 0 6px;
  border: 1px solid var(--tb-border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--tb-stone);
  color: var(--tb-text2);
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
  transition: background var(--tb-t) var(--tb-ease), color var(--tb-t) var(--tb-ease), transform var(--tb-t) var(--tb-ease);
  transform-origin: bottom center;
}
.dc-tab > i { font-size: 17px; flex-shrink: 0; color: var(--tb-text2); }
.dc-tab__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tab:hover { background: #F3EFE8; color: var(--tb-text); }
body.dark .dc-tab:hover { background: #222737; }
.dc-tab.active {
  background: var(--tb-surface);
  color: var(--tb-text);
  font-weight: 500;
  z-index: 1;
  margin-bottom: -1px;
  height: 41px;
}
.dc-tab.active > i { color: var(--tb-bronze); }
.dc-tab.active::after { content: ''; position: absolute; top: -1px; right: 10px; left: 10px; height: 2px; background: var(--tb-bronze); border-radius: 0 0 2px 2px; }
.dc-tab:focus-visible { outline: 2px solid var(--tb-bronze); outline-offset: -2px; }
.dc-tab__x {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--tb-text2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: .55; transition: background var(--tb-t) var(--tb-ease), opacity var(--tb-t) var(--tb-ease), color var(--tb-t) var(--tb-ease);
}
.dc-tab__x i { font-size: 14px; }
.dc-tab:hover .dc-tab__x, .dc-tab.active .dc-tab__x, .dc-tab__x:focus-visible { opacity: 1; }
.dc-tab__x:hover { background: rgba(194, 65, 12, 0.12); color: #C2410C; }
.dc-tab__x:focus-visible { outline: 2px solid var(--tb-bronze); }
.dc-tab.enter { animation: dcTabIn 160ms var(--tb-ease); }
.dc-tab.leave { animation: dcTabOut 140ms var(--tb-ease) forwards; pointer-events: none; }
@keyframes dcTabIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dcTabOut { to { opacity: 0; transform: scale(.94); } }

.dc-tabs__add {
  align-self: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--tb-border); border-radius: 8px; background: var(--tb-surface); color: var(--tb-text2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--tb-t) var(--tb-ease), color var(--tb-t) var(--tb-ease), border-color var(--tb-t) var(--tb-ease), transform var(--tb-t) var(--tb-ease);
}
.dc-tabs__add i { font-size: 18px; }
.dc-tabs__add:hover { border-color: var(--tb-bronze); color: var(--tb-bronze); }
.dc-tabs__add:active { transform: scale(.94); }
.dc-tabs__add:focus-visible { outline: 2px solid var(--tb-bronze); outline-offset: 2px; }
.dc-tabs__add.is-full { opacity: .45; cursor: not-allowed; }
.dc-tabs__count { align-self: center; flex-shrink: 0; font-size: 11.5px; color: var(--tb-text2); white-space: nowrap; margin-inline-start: 4px; }
.dc-tabs__limit { position: absolute; top: 50px; right: 16px; z-index: 30; background: #2B2724; color: #F7F3EC; font-size: 12.5px; padding: 8px 12px; border-radius: 8px; box-shadow: 0 6px 18px rgba(41,38,33,.22); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 160ms ease, transform 160ms ease; }
.dc-tabs__limit.show { opacity: 1; transform: none; }
.dc-tabs-mobile-title { display: none; }

.dc-crumbs {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 30px; padding: 0 20px;
  background: #FFFEFC; border-bottom: 1px solid #E5DDD2;
  font-size: 12.5px; color: #756D63;
}
body.dark .dc-crumbs { background: #1c2030; border-color: rgba(245,241,234,.10); color: #b3ada1; }
.dc-crumbs .page-title { font-size: 13px !important; font-weight: 600; color: #292621; margin: 0; letter-spacing: 0; }
body.dark .dc-crumbs .page-title { color: #f5f1ea; }
.dc-crumbs .breadcrumb { font-size: 12px; padding: 0; border: 0; color: inherit; }
.dc-crumbs .breadcrumb:empty { display: none; }
.dc-crumbs__sep { color: #A78053; }

/* + picker */
.dc-picker { position: fixed; inset: 0; z-index: 2550; display: none; direction: rtl; }
.dc-picker.open { display: block; }
.dc-picker__backdrop { position: absolute; inset: 0; background: rgba(41,38,33,.18); }
.dc-picker__panel {
  position: absolute; top: 10vh; left: 50%; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); max-height: 72vh; display: flex; flex-direction: column;
  background: #FFFEFC; color: #292621; border: 1px solid #E5DDD2; border-radius: 14px; box-shadow: 0 24px 60px rgba(41,38,33,.25);
  animation: dcPickerIn 160ms ease;
}
.dc-picker.anchored .dc-picker__panel { transform: none; left: auto; }
@keyframes dcPickerIn { from { opacity: 0; transform: translateY(-6px); } }
.dc-picker.anchored .dc-picker__panel { animation: dcPickerInA 160ms ease; }
@keyframes dcPickerInA { from { opacity: 0; } }
.dc-picker__head { padding: 12px 14px 6px; font-size: 14px; font-weight: 600; }
.dc-picker__row { display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 0 10px; height: 36px; border: 1px solid #E5DDD2; border-radius: 9px; background: #F7F5F0; }
.dc-picker__row i { color: #A78053; font-size: 17px; }
.dc-picker__input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: inherit; }
.dc-picker__list { list-style: none; margin: 0; padding: 4px 8px 8px; overflow-y: auto; }
.dc-picker__group { font-size: 11px; font-weight: 600; color: #756D63; padding: 8px 10px 2px; letter-spacing: .03em; }
.dc-picker__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.dc-picker__item > i { font-size: 18px; width: 22px; text-align: center; color: #756D63; }
.dc-picker__item .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-picker__item .g { font-size: 11.5px; color: #756D63; }
.dc-picker__item:hover, .dc-picker__item[aria-selected="true"] { background: #EEE9E0; }
.dc-picker__item[aria-selected="true"] > i { color: #A78053; }
.dc-picker__empty { padding: 18px; text-align: center; color: #756D63; font-size: 13.5px; }
.dc-picker__hint { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid #E5DDD2; color: #756D63; font-size: 11.5px; }
.dc-picker__hint kbd { font-family: inherit; border: 1px solid #E5DDD2; border-radius: 4px; padding: 0 5px; margin-inline-end: 4px; background: #F7F5F0; }
body.dark .dc-picker__panel { background: #1c2030; color: #f5f1ea; border-color: rgba(245,241,234,.12); }
body.dark .dc-picker__row { background: #161922; border-color: rgba(245,241,234,.12); }
body.dark .dc-picker__item:hover, body.dark .dc-picker__item[aria-selected="true"] { background: #232838; }
body.dark .dc-picker__hint { border-color: rgba(245,241,234,.12); }
body.dark .dc-picker__hint kbd { background: #161922; border-color: rgba(245,241,234,.15); }

/* nav context menu */
.dc-ctx {
  position: fixed; z-index: 2560; min-width: 210px; display: none; flex-direction: column; padding: 6px; direction: rtl;
  background: #FFFEFC; color: #292621; border: 1px solid #E5DDD2; border-radius: 10px; box-shadow: 0 12px 32px rgba(41,38,33,.22);
  animation: dcPickerIn 140ms ease;
}
.dc-ctx.open { display: flex; }
.dc-ctx__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 13.5px; cursor: pointer; text-align: right; }
.dc-ctx__item i { font-size: 17px; color: #756D63; }
.dc-ctx__item:hover, .dc-ctx__item:focus-visible { background: #EEE9E0; outline: none; }
.dc-ctx__item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.dc-ctx__note { font-size: 11.5px; color: #756D63; padding: 4px 10px 4px; }
.dc-ctx__note:empty { display: none; }
body.dark .dc-ctx { background: #1c2030; color: #f5f1ea; border-color: rgba(245,241,234,.12); }
body.dark .dc-ctx__item:hover, body.dark .dc-ctx__item:focus-visible { background: #232838; }

/* unsaved-changes dialog */
.dc-tabs-confirm { position: fixed; inset: 0; z-index: 2600; display: none; align-items: center; justify-content: center; direction: rtl; padding: 16px; }
.dc-tabs-confirm.open { display: flex; }
.dc-tabs-confirm__backdrop { position: absolute; inset: 0; background: rgba(41,38,33,.4); }
.dc-tabs-confirm__panel { position: relative; width: min(440px, 100%); background: #FFFEFC; color: #292621; border: 1px solid #E5DDD2; border-radius: 14px; box-shadow: 0 24px 60px rgba(41,38,33,.28); padding: 18px 20px 16px; animation: dcPickerIn 160ms ease; }
.dc-tabs-confirm__panel h3 { margin: 0 0 6px; font-size: 16px; }
.dc-tabs-confirm__panel p { margin: 0 0 14px; font-size: 13.5px; color: #756D63; }
.dc-tabs-confirm__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.dc-tabs-confirm__discard { color: #C2410C !important; }
body.dark .dc-tabs-confirm__panel { background: #1c2030; color: #f5f1ea; border-color: rgba(245,241,234,.12); }
body.dark .dc-tabs-confirm__panel p { color: #b3ada1; }

/* nav item options button (mobile) */
.dc-sb__more { display: none; width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 7px; background: transparent; color: inherit; align-items: center; justify-content: center; cursor: pointer; margin-inline-start: 2px; }
.dc-sb__more i { font-size: 17px; }
.dc-sb__more:hover { background: rgba(167,128,83,.14); }


/* round 2: options button is a sibling of the nav link (row wrapper); banner + conflict dialog */
.dc-sidebar .dc-sb__row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.dc-sidebar .dc-sb__row > .nav-item { flex: 1; min-width: 0; }
.dc-sb--collapsed .dc-sb__row { justify-content: center; }
.dc-tabs-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border: 1px solid #E8C9A5; border-radius: 10px; background: #FBF3E8; color: #292621; font-size: 13px; }
.dc-tabs-banner i { color: #A78053; font-size: 18px; }
.dc-tabs-banner span { flex: 1; min-width: 200px; }
.dc-tabs-banner .btn-secondary { font-size: 12.5px; padding: 5px 10px; }
body.dark .dc-tabs-banner { background: #2a2418; border-color: #5b4a2e; color: #f5f1ea; }
.dc-tabs-conflict__vals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.dc-tabs-conflict__vals > div { border: 1px solid #E5DDD2; border-radius: 9px; padding: 8px 10px; background: #F7F5F0; min-width: 0; }
.dc-tabs-conflict__vals small { display: block; font-size: 11px; color: #756D63; margin-bottom: 2px; }
.dc-tabs-conflict__vals b { display: block; font-size: 14px; font-weight: 600; word-break: break-word; }
body.dark .dc-tabs-conflict__vals > div { background: #161922; border-color: rgba(245,241,234,.12); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dc-tab, .dc-tab__x, .dc-tabs__add, .dc-tabs__limit { transition: none !important; }
  .dc-tab.enter, .dc-tab.leave, .dc-picker__panel, .dc-ctx, .dc-tabs-confirm__panel { animation: none !important; }
}

/* mobile */
@media (max-width: 900px) {
  .dc-topbar { height: auto !important; min-height: 48px; padding: 6px 8px !important; flex-wrap: nowrap !important; }
  .dc-topbar .topbar-left { align-items: center; gap: 4px; }
  .dc-tabs { padding-top: 0; align-items: center; -webkit-overflow-scrolling: touch; }
  .dc-tab { height: 36px; max-width: 160px; border-radius: 9px; border-bottom: 1px solid var(--tb-border); }
  .dc-tab.active { height: 36px; margin-bottom: 0; }
  .dc-tab.active::after { display: none; }
  .dc-tab.active { box-shadow: inset 0 -2px 0 var(--tb-bronze); }
  .dc-tabs__count { display: none; }
  .dc-tabs__limit { right: 8px; left: 8px; top: 56px; }
  .dc-crumbs { padding: 0 12px; height: 26px; font-size: 12px; }
  .dc-crumbs .breadcrumb { display: inline !important; }
  .dc-sidebar .nav-item .dc-sb__more, .dc-sidebar .dc-sb__row .dc-sb__more { display: inline-flex; }
  .dc-picker__panel { top: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
  .dc-picker.anchored .dc-picker__panel { left: 8px !important; right: 8px !important; top: 8px !important; width: auto; }
  .dc-ctx { min-width: 200px; }
}
@media (max-width: 900px) and (orientation: portrait) {
  .dc-topbar .topbar-left { padding-inline-start: 52px; } /* room for the fixed hamburger */
}