/* Organization & hierarchy styles for Ockey Dashboard */

/* Drag insertion placeholder and ghost */
.card-insertion-placeholder {
  border: 2px dashed var(--accent, #60a5fa);
  background: rgba(96, 165, 250, 0.08);
  border-radius: 15px;
  margin: 6px 0;
  min-height: 50px;
  transition: all 0.15s ease;
  pointer-events: none;
}
.card-drag-ghost {
  position: fixed;
  z-index: 9999;
  background: var(--surface, #18181b);
  border: 2px solid var(--accent, #60a5fa);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #f4f4f5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0.92;
  transform: translate(-50%, -50%);
}

/* Home widget collapse controls */
.widget-collapse-toggle {
  background: none;
  border: 0;
  color: var(--muted, #a1a1aa);
  font-size: 14px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.widget-collapse-toggle:hover {
  background: var(--raised, #27272a);
  color: var(--text, #f4f4f5);
}
.live-widget.widget-collapsed {
  padding-bottom: 14px;
}
.live-widget.widget-collapsed > .widget-header {
  margin-bottom: 0;
}
.live-widget.widget-collapsed > :not(.widget-header) {
  display: none !important;
}

/* Sidebar navigation hierarchy & childtabs */
.nav-parent-group {
  display: grid;
  gap: 3px;
  margin-bottom: 4px;
}
.nav-parent-btn {
  width: 100%;
}
.nav-child-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  margin: 2px 0 6px;
  border-left: 2px solid var(--line, #343439);
}
.nav-child-tab {
  background: none;
  border: 0;
  color: var(--muted, #a1a1aa);
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}
.nav-child-tab:hover {
  background: var(--raised, #27272a);
  color: var(--text, #f4f4f5);
}
.nav-child-tab.selected {
  background: var(--raised, #27272a);
  color: var(--accent, #60a5fa);
  font-weight: 500;
}

/* In-pane secondary child navigation bar */
.workspace-child-tabs {
  display: flex;
  gap: 8px;
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line, #343439);
  flex-wrap: wrap;
}
.workspace-child-tab {
  background: var(--surface, #18181b);
  border: 1px solid var(--line, #343439);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--muted, #a1a1aa);
  font-size: 13px;
  cursor: pointer;
}
.workspace-child-tab:hover {
  background: var(--raised, #27272a);
  color: var(--text, #f4f4f5);
}
.workspace-child-tab.selected {
  background: var(--raised, #27272a);
  border-color: var(--accent, #60a5fa);
  color: var(--accent, #60a5fa);
  font-weight: 600;
}

/* Mobile compact hamburger menu drawer */
.mobile-nav-toggle {
  display: none;
  background: var(--surface, #18181b);
  border: 1px solid var(--line, #343439);
  border-radius: 8px;
  color: var(--text, #f4f4f5);
  font-size: 18px;
  padding: 8px 12px;
  cursor: pointer;
  align-items: center;
  gap: 6px;
}
@media (max-width: 720px) {
  .mobile-nav-toggle {
    display: inline-flex;
    margin-bottom: 10px;
  }
  aside {
    transition: max-height 0.25s ease;
  }
  aside:not(.mobile-drawer-open) nav {
    display: none !important;
  }
  aside.mobile-drawer-open nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    max-height: 70vh;
    overflow-y: auto !important;
    background: var(--surface, #18181b);
    border: 1px solid var(--line, #343439);
    border-radius: 12px;
    padding: 12px !important;
    margin-top: 10px !important;
  }
}

/* Services categories & folders */
.service-org-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 0 20px;
  padding: 12px 16px;
  background: var(--surface, #18181b);
  border: 1px solid var(--line, #343439);
  border-radius: 10px;
}
.service-folder-section {
  margin-bottom: 24px;
}
.service-folder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line, #343439);
}
.service-folder-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #f4f4f5);
  display: flex;
  align-items: center;
  gap: 8px;
}
.service-folder-actions {
  display: flex;
  gap: 6px;
}
.service-folder-select {
  margin-top: 8px;
  width: 100%;
  font-size: 11px;
  padding: 4px 6px;
  background: var(--raised, #27272a);
  border: 1px solid var(--line, #343439);
  color: var(--muted, #a1a1aa);
  border-radius: 6px;
}
.native-card.dragging {
  opacity: 0.45;
}

/* Uniform folder tiles; all editing lives behind the expanded folder pencil. */
.service-folders{display:grid;grid-template-columns:repeat(auto-fill,156px);gap:14px;align-items:start}
.service-folders .service-folder-section{margin:0;padding:0;min-width:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden}
.service-folder-header{position:relative;margin:0;padding:0;border:0;display:flex;align-items:center;justify-content:space-between}
.service-folder-tile{position:relative;background:transparent;border:0;color:var(--text);padding:12px;width:100%;height:154px;cursor:pointer;border-radius:19px;text-align:left;display:block;overflow:hidden}
.service-folder-tile:hover{background:var(--raised)}
.service-folder-tile:focus-visible,.whole-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.folder-icon-grid{display:grid;grid-template-columns:repeat(3,28px);grid-template-rows:repeat(3,28px);gap:5px;justify-content:center;align-content:start;position:relative}
.folder-service-icon{border:1px solid color-mix(in srgb,var(--color,var(--accent)) 40%,transparent);background:color-mix(in srgb,var(--color,var(--accent)) 12%,var(--surface));color:var(--color,var(--accent));border-radius:7px;font-size:10px;font-weight:650;display:grid;place-items:center}
.folder-empty-icon{grid-column:1/-1;grid-row:1/4;display:grid;place-items:center;font-size:24px;color:var(--muted)}
.folder-more{position:absolute;right:0;bottom:0;padding:2px 5px;background:var(--surface);border-radius:5px;font-size:10px}
.folder-tile-label{position:absolute;bottom:7px;left:7px;right:7px;height:38px;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 6px;border-radius:15px;background:rgba(85,100,123,.32);backdrop-filter:blur(12px);font-size:12px;line-height:15px;overflow:hidden}
.folder-tile-label strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-weight:550}
.service-folder-section.folder-expanded{grid-column:1/-1;padding:14px}
.folder-expanded .service-folder-header{margin-bottom:12px}
.folder-expanded .service-folder-tile{height:auto;min-height:42px;width:auto;max-width:calc(100% - 48px);padding:0;display:flex;align-items:center;gap:12px;border-radius:8px}
.folder-expanded .folder-icon-grid{grid-template-columns:repeat(3,12px);grid-template-rows:repeat(3,12px);gap:2px;flex-shrink:0}
.folder-expanded .folder-service-icon{font-size:5px;border-radius:3px}
.folder-expanded .folder-tile-label{position:static;height:auto;min-height:34px;padding:6px 12px;flex:1}
.folder-expanded .folder-tile-label strong{-webkit-line-clamp:unset}
.folder-pencil{height:32px;width:32px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line);border-radius:50%;color:var(--muted);background:var(--raised);cursor:pointer}
.folder-pencil svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.folder-edit-panel{padding:12px;margin-bottom:14px;background:var(--raised);border:1px solid var(--line);border-radius:10px;display:grid;gap:10px}
.folder-edit-panel label{display:grid;gap:6px;font-size:12px}.folder-edit-panel input{width:100%;min-width:0}.folder-edit-panel .actions{flex-wrap:wrap}.folder-edit-error:empty{display:none}
@media(max-width:500px){.service-folders{grid-template-columns:repeat(auto-fill,156px);gap:10px}.service-folder-section.folder-expanded{padding:10px}.service-org-toolbar input{min-width:0!important;flex-basis:100%!important}}