/* ============================================================
   WEC.css — Account Tree & Sidebar supplement
   Dark theme — pure HTML details/summary
   ============================================================ */

/* ---------- Account filter ---------- */

.acct-filter-wrap {
   position: relative;
   margin-bottom: 8px;
}

.acct-filter {
   width: 100%;
   box-sizing: border-box;
   padding: 6px 28px 6px 10px;
   font-size: 12px;
   font-family: Inter, sans-serif;
   color: var(--color-text-heading, hsl(220, 20%, 95%));
   background: var(--color-surface-raised, hsl(220, 14%, 14%));
   border: 1px solid var(--color-border, hsl(220, 14%, 24%));
   border-radius: 6px;
   outline: none;
   transition: border-color 200ms ease, box-shadow 200ms ease;
}

.acct-filter::placeholder {
   color: var(--color-text-muted, hsl(220, 10%, 45%));
}

.acct-filter:focus {
   border-color: var(--color-primary, hsl(192, 70%, 50%));
   box-shadow: 0 0 0 2px hsla(192, 70%, 50%, 0.2);
}

.acct-filter-clear {
   display: none;
   position: absolute;
   right: 6px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   color: var(--color-text-muted, hsl(220, 10%, 45%));
   font-size: 16px;
   line-height: 1;
   padding: 2px 4px;
   border-radius: 3px;
   transition: color 150ms ease, background 150ms ease;
}

.acct-filter-clear:hover {
   color: var(--color-text-heading, hsl(220, 20%, 95%));
   background: hsla(0, 0%, 100%, 0.08);
}

/* No results warning */
.acct-no-results {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   font-size: 12px;
   color: hsl(40, 95%, 65%);
   background: hsla(40, 95%, 50%, 0.08);
   border: 1px solid hsla(40, 95%, 50%, 0.2);
   border-radius: 6px;
   margin-bottom: 8px;
}

.acct-no-results-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: hsl(40, 95%, 50%);
   color: hsl(40, 30%, 10%);
   font-weight: 700;
   font-size: 13px;
   flex-shrink: 0;
}

/* Account tree — scrollable container */
.accountView {
   max-height: 55vh;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
   scrollbar-color: var(--color-border, hsl(220, 14%, 24%)) transparent;
}

.accountView::-webkit-scrollbar {
   width: 6px;
}

.accountView::-webkit-scrollbar-track {
   background: transparent;
}

.accountView::-webkit-scrollbar-thumb {
   background: var(--color-border, hsl(220, 14%, 24%));
   border-radius: 3px;
}

.accountView::-webkit-scrollbar-thumb:hover {
   background: var(--color-text-muted, hsl(220, 10%, 45%));
}

/* ---------- details/summary tree ---------- */

.acct-group {
   margin: 0 0 2px 0;
}

.acct-group summary {
   list-style: none;
   cursor: pointer;
   padding: 0;
   display: flex;
   align-items: center;
}

/* Remove default marker */
.acct-group summary::-webkit-details-marker {
   display: none;
}

/* CSS chevron */
.acct-group summary::before {
   content: '';
   display: inline-block;
   width: 7px;
   height: 7px;
   border-right: 2px solid var(--color-text-muted, hsl(220, 10%, 55%));
   border-bottom: 2px solid var(--color-text-muted, hsl(220, 10%, 55%));
   transform: rotate(-45deg);
   transition: transform 200ms ease;
   margin-right: 6px;
   flex-shrink: 0;
}

.acct-group[open] > summary::before {
   transform: rotate(45deg);
}

/* All account links (both master and child) */
.acct-link {
   display: block;
   padding: 4px 8px;
   font-size: 12px;
   line-height: 1.4;
   color: var(--color-sidebar-link, hsl(220, 15%, 78%));
   text-decoration: none;
   border: none;
   background: none;
   cursor: pointer;
   border-radius: 4px;
   transition: color 150ms ease, background 150ms ease;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: left;
   width: 100%;
}

.acct-link:hover {
   color: var(--color-primary, hsl(192, 70%, 50%));
   background: hsla(192, 70%, 50%, 0.08);
}

/* Master account links (bold) */
.acct-master {
   font-weight: 600;
   color: var(--color-text-heading, hsl(220, 20%, 95%));
}

/* Selected item — teal pill */
.acct-selected {
   color: #fff !important;
   background: var(--color-primary, hsl(192, 70%, 50%)) !important;
   font-weight: 600;
   border-radius: 4px;
}

/* Child items — indented */
.acct-group > .acct-link:not(summary .acct-link) {
   padding-left: 22px;
   font-weight: normal;
}

/* ============================================================
   Sidebar — tighter spacing
   ============================================================ */

.sidebarcontent {
   padding: 8px 10px 4px 10px !important;
}

ul.sidebarlinks {
   list-style: none;
   margin: 0;
   padding: 4px 0 0 0;
   margin-bottom: 0;
}

ul.sidebarlinks li {
   padding-bottom: 1px;
   font-size: 13px;
}

ul.sidebarlinks li a {
   color: var(--color-sidebar-link, hsl(220, 15%, 78%));
   padding: 2px 8px 2px 6px;
   border-radius: 4px;
   display: inline-block;
   transition: color 150ms ease, background 150ms ease;
}

ul.sidebarlinks li a:hover {
   color: var(--color-primary, hsl(192, 70%, 50%));
   background: hsla(192, 70%, 50%, 0.08);
}

/* ---------- Kebab context menu ---------- */

.kebab-name-cell {
   display: flex;
   align-items: center;
   gap: 6px;
}

.kebab-name-cell > span {
   flex: 1;
   min-width: 0;
}

.kebab-wrap {
   position: relative;
   display: inline-block;
}

.kebab-btn {
   background: none;
   border: 1px solid var(--color-border, hsl(220, 14%, 24%));
   border-radius: 6px;
   color: var(--color-text-muted, hsl(220, 10%, 55%));
   cursor: pointer;
   font-size: 20px;
   line-height: 1;
   width: 28px;
   height: 32px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
   padding: 0;
   flex-shrink: 0;
}

.kebab-btn:hover {
   background: hsla(192, 70%, 50%, 0.1);
   color: var(--color-primary, hsl(192, 70%, 50%));
   border-color: var(--color-primary, hsl(192, 70%, 50%));
   transform: none;
   box-shadow: none;
   filter: none;
}

.kebab-menu {
   display: none;
   position: absolute;
   left: 0;
   top: 100%;
   min-width: 170px;
   background: var(--color-surface-raised, hsl(220, 14%, 16%));
   border: 1px solid var(--color-border, hsl(220, 14%, 24%));
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0,0,0,0.35);
   padding: 4px 0;
   z-index: 1000;
}

.kebab-menu.open {
   display: flex;
   flex-direction: column;
}

.kebab-item {
   display: block;
   padding: 8px 14px;
   color: var(--color-text, hsl(220, 15%, 78%)) !important;
   font-size: 13px;
   font-family: Inter, sans-serif;
   text-decoration: none !important;
   white-space: nowrap;
   transition: background 150ms ease, color 150ms ease;
}

.kebab-item:hover {
   background: hsla(192, 70%, 50%, 0.1);
   color: var(--color-primary, hsl(192, 70%, 50%)) !important;
}

.kebab-item-danger {
   color: hsl(0, 70%, 60%) !important;
}

.kebab-item-danger:hover {
   background: hsla(0, 70%, 50%, 0.1);
   color: hsl(0, 70%, 55%) !important;
}

/* Compact kebab for detail view inline use */
.kebab-btn-sm {
   width: 22px;
   height: 24px;
   font-size: 16px;
   border-radius: 4px;
}