/* ═══════════════════════════════════════════════
   Ákotí Lists — Pure CSS

   Action list:
     <ul class="akoti-list">
       <li class="akoti-list-item">
         <span class="aki aki-file-text"></span>
         <div class="akoti-list-content">
           <span class="akoti-list-title">Journal Entry</span>
           <span class="akoti-list-desc">JE-2025-0042</span>
         </div>
         <span class="akoti-badge success sm">Posted</span>
       </li>
     </ul>

   Variants: .akoti-list-bordered, .akoti-list-striped, .akoti-list-compact
   Clickable: add <a> or .akoti-list-clickable to items
   ═══════════════════════════════════════════════ */

.akoti-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Outfit', system-ui, sans-serif;
}

.akoti-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(26,47,94,0.06);
  transition: background 0.15s;
  color: #1e1e24;
  text-decoration: none;
}

.akoti-list-item:last-child { border-bottom: none; }

/* Clickable items */
a.akoti-list-item,
.akoti-list-item.akoti-list-clickable {
  cursor: pointer;
}
a.akoti-list-item:hover,
.akoti-list-item.akoti-list-clickable:hover {
  background: rgba(168,200,232,0.06);
}

/* Icon slot */
.akoti-list-item > .aki,
.akoti-list-item > .akoti-avatar {
  flex-shrink: 0;
  color: #5f6368;
}

/* Content */
.akoti-list-content {
  flex: 1;
  min-width: 0;
}

.akoti-list-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1e1e24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.akoti-list-desc {
  display: block;
  font-size: 12px;
  color: #8a8a96;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Right-aligned meta */
.akoti-list-meta {
  font-size: 12px;
  color: #8a8a96;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Variants ──────────────────────────────────────── */

.akoti-list-bordered .akoti-list-item {
  border: 1px solid rgba(26,47,94,0.08);
  border-radius: 12px 4px 12px 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(26,47,94,0.08);
}
.akoti-list-bordered .akoti-list-item:hover {
  border-radius: 4px 12px 4px 12px;
  border-color: #a8c8e8;
}

.akoti-list-striped .akoti-list-item:nth-child(even) {
  background: rgba(26,47,94,0.02);
}

.akoti-list-compact .akoti-list-item {
  padding: 8px 12px;
  gap: 8px;
}
.akoti-list-compact .akoti-list-title { font-size: 13px; }
.akoti-list-compact .akoti-list-desc { font-size: 11px; }

/* Description list */
.akoti-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
}
.akoti-dl dt {
  font-weight: 600;
  color: #5f6368;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding-top: 2px;
}
.akoti-dl dd {
  margin: 0;
  color: #1e1e24;
}

/* ── Dark mode ─────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .akoti-list-item { border-color: rgba(255,255,255,0.06); }
  :root:not([data-theme="light"]) .akoti-list-title { color: #e0e0e4; }
  :root:not([data-theme="light"]) .akoti-list-desc, .akoti-list-meta { color: #6a6a76; }
  :root:not([data-theme="light"]) .akoti-list-bordered .akoti-list-item { border-color: rgba(255,255,255,0.08); }
  :root:not([data-theme="light"]) .akoti-dl dt { color: #6a6a76; }
  :root:not([data-theme="light"]) .akoti-dl dd { color: #e0e0e4; }
}