/* Baskibu Designer 0.23.0-dev58 — mobile object toolbar containment + reliable sheets + visible Zemin palette */

.bbd-app.bbd-pro-workspace-v0230-dev58 {
  --bbd-v58-nav-height: 68px;
  --bbd-v58-sheet-gap: 8px;
}

/* Zemin is a primary design action now. A multicolour icon makes it discoverable
   without adding another floating explanatory card. */
.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-tool--v58-background .bbd-v58-palette-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-block;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 50% 50% 46% 50%;
  background: conic-gradient(#ff5b1f 0 24%,#f9c846 24% 43%,#30b978 43% 62%,#3b82f6 62% 81%,#8b5cf6 81% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35),0 1px 2px rgba(15,23,42,.09);
}
.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-tool--v58-background .bbd-v58-palette-icon::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
}
.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-tool--v58-background.is-active .bbd-v58-palette-icon {
  box-shadow: 0 0 0 3px rgba(255,91,31,.12),inset 0 0 0 1px rgba(255,255,255,.4);
}

/* --------------------------------------------------------------------------
   Selected object toolbar on compact screens.
   Older mobile CSS supplied left/right/bottom but inherited a large height in
   some viewport combinations. Explicit block sizing makes that impossible.
   -------------------------------------------------------------------------- */
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar {
  position: absolute !important;
  z-index: 9460 !important;
  top: auto !important;
  right: 8px !important;
  bottom: calc(var(--bbd-v58-nav-height) + 8px) !important;
  left: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.38) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.14) !important;
  transform: none !important;
  contain: layout paint !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar[hidden],
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar[hidden],
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58.is-v58-main-sheet-open .bbd-context-route-toolbar,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58.is-v58-main-sheet-open .bbd-context-route-toolbar {
  display: none !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar button,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 5px !important;
  gap: 4px !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar .bbd-context-icon,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar .bbd-context-icon {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar .bbd-context-label-short,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar.bbd-v58-mobile-object-toolbar .bbd-context-label-short {
  min-width: 0 !important;
  max-width: 100% !important;
  display: inline !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   Mobile/tablet bottom navigation. Seven stable equal cells; Zemin sits right
   beside Katmanlar and no item can collapse into the left edge on resize.
   -------------------------------------------------------------------------- */
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar[data-bbd-v58-compact-nav="1"],
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar[data-bbd-v58-compact-nav="1"] {
  position: absolute !important;
  z-index: 9600 !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--bbd-v58-nav-height) !important;
  min-height: var(--bbd-v58-nav-height) !important;
  display: grid !important;
  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  grid-template-rows: 1fr !important;
  grid-auto-flow: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)) !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid #dfe5eb !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.99) !important;
  box-shadow: 0 -9px 24px rgba(15,23,42,.09) !important;
  contain: none !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="0"],
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="0"] {
  display: none !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"],
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 58px !important;
  min-height: 58px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 5px 1px 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #667085 !important;
  box-shadow: none !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] > svg,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] > svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] > span:not(.bbd-v58-palette-icon),
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] > span:not(.bbd-v58-palette-icon) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  font-size: clamp(6.6px,1.95vw,8px) !important;
  font-weight: 760 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"].is-active,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"].is-active {
  background: #fff1eb !important;
  color: #e54b14 !important;
}

/* --------------------------------------------------------------------------
   Main compact sheet. It is deliberately short: enough room to choose/add an
   item while keeping the yelken/artboard visible. Every visible section owns
   its scrolling, so a long template/font list cannot grow over the canvas.
   -------------------------------------------------------------------------- */
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel {
  position: absolute !important;
  z-index: 9550 !important;
  top: auto !important;
  right: var(--bbd-v58-sheet-gap) !important;
  bottom: calc(var(--bbd-v58-nav-height) + var(--bbd-v58-sheet-gap)) !important;
  left: var(--bbd-v58-sheet-gap) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: min(32dvh,270px) !important;
  min-height: min(185px,32dvh) !important;
  max-height: min(32dvh,270px) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #dde3e9 !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.995) !important;
  box-shadow: 0 -12px 34px rgba(15,23,42,.14) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel[hidden] {
  display: none !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-mobile-sheet-bar {
  position: relative !important;
  z-index: 3 !important;
  min-height: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0,1fr) 30px !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 7px !important;
  border-bottom: 1px solid #edf0f3 !important;
  background: #fff !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 #bbd-mobile-sheet-title {
  font-size: 11px !important;
  font-weight: 820 !important;
  text-align: center !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 #bbd-mobile-sheet-close {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-section:not([hidden]) {
  min-height: 0 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 9px 10px 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-section[hidden] {
  display: none !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-edge-toggle {
  display: none !important;
}

/* Zemin sheet: immediate swatch-like color input, no hunting. */
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 [data-panel-content="background"] > h2 {
  margin: 0 !important;
  font-size: 15px !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 [data-panel-content="background"] #bbd-background-color {
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 3px !important;
  border-radius: 10px !important;
}

/* Tablet/drawer keeps a narrow side sheet, not a nearly full viewport slab. */
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel {
  position: absolute !important;
  z-index: 9550 !important;
  top: 70px !important;
  right: auto !important;
  bottom: calc(var(--bbd-v58-nav-height) + 9px) !important;
  left: 9px !important;
  width: min(330px,calc(100% - 18px)) !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 1px solid #dde3e9 !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.995) !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.15) !important;
}
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel[hidden] {
  display: none !important;
}
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-section:not([hidden]) {
  min-height: 0 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 11px 12px 14px !important;
  overflow-y: auto !important;
}
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-section[hidden],
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel > .bbd-panel-edge-toggle {
  display: none !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-stage-area,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-stage-area {
  padding-bottom: var(--bbd-v58-nav-height) !important;
}

@media (max-width:430px) {
  .bbd-app.bbd-pro-workspace-v0230-dev58 { --bbd-v58-nav-height: 64px; }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] {
    height: 54px !important;
    min-height: 54px !important;
    padding-inline: 0 !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool[data-bbd-v58-primary="1"] > span:not(.bbd-v58-palette-icon) {
    font-size: 6.5px !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-tool--v58-background .bbd-v58-palette-icon {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel {
    height: min(30dvh,245px) !important;
    min-height: min(175px,30dvh) !important;
    max-height: min(30dvh,245px) !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-panel,
  .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-context-route-toolbar,
  .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-sidebar .bbd-tool {
    transition: none !important;
  }
}

/* Compact quick dock is redundant now that Zemin is a first-class nav item. */
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v56-quick-dock,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v56-quick-dock {
  display: none !important;
}

.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-palette {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 7px;
  margin: 1px 0 3px;
}
.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-swatch {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 30px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.5);
  border-radius: 9px;
  background: var(--bbd-v58-swatch);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  cursor: pointer;
}
.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-swatch.is-active {
  border-color: #ff5b1f;
  box-shadow: 0 0 0 2px rgba(255,91,31,.18),inset 0 0 0 1px rgba(255,255,255,.3);
}
.bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-swatch.is-active::after {
  content: '✓';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(15,23,42,.82);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  transform: translate(-50%,-50%);
}
@media (max-width:430px) {
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-palette {
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 5px;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev58 .bbd-v58-background-swatch {
    min-height: 27px;
    border-radius: 8px;
  }
}
