/* Akku components — consumes tokens from _shared.css */

/* ========== BUTTONS ========== */
.akku-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  font-family: var(--font-sans); font-weight:500; font-size:var(--text-sm);
  letter-spacing:-0.005em;
  border:1px solid transparent; border-radius:var(--radius-md);
  padding: 0 var(--space-5); height:36px;
  cursor:pointer; user-select:none; white-space:nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.akku-btn:focus-visible{outline:none; box-shadow: 0 0 0 3px var(--iris-200)}
.akku-btn:active{transform: translateY(1px)}
.akku-btn[disabled]{opacity:.5; pointer-events:none}

/* sizes */
.akku-btn.sm{height:30px; padding:0 var(--space-4); font-size:12.5px; border-radius:var(--radius-sm)}
.akku-btn.lg{height:44px; padding:0 var(--space-6); font-size:15px; border-radius:var(--radius-md)}
.akku-btn.xl{height:52px; padding:0 var(--space-7); font-size:16px; border-radius:var(--radius-md); font-weight:600}
.akku-btn.icon-only{padding:0; width:36px}
.akku-btn.icon-only.sm{width:30px}
.akku-btn.icon-only.lg{width:44px}

/* variants */
.akku-btn.primary{background:var(--iris-500); color:#fff}
.akku-btn.primary:hover{background:var(--iris-600); box-shadow: var(--shadow-iris)}
.akku-btn.primary:active{background:var(--iris-700)}

.akku-btn.secondary{background:var(--coral-500); color:#fff}
.akku-btn.secondary:hover{background:var(--coral-600); box-shadow: var(--shadow-coral)}

.akku-btn.neutral{background:var(--ink); color:#fff}
.akku-btn.neutral:hover{background:#1E293B}

.akku-btn.outline{background:var(--bg-elev); color:var(--ink); border-color:var(--rule)}
.akku-btn.outline:hover{border-color:var(--iris-400); color:var(--iris-700); background:var(--iris-50)}

.akku-btn.ghost{background:transparent; color:var(--ink-muted)}
.akku-btn.ghost:hover{background:var(--iris-50); color:var(--iris-700)}

.akku-btn.link{background:transparent; color:var(--iris-700); padding:0; height:auto; border-radius:2px}
.akku-btn.link:hover{color:var(--iris-900); text-decoration:underline; text-underline-offset:3px}

.akku-btn.danger{background:var(--color-danger); color:#fff}
.akku-btn.danger:hover{background:#B91C1C}

/* ========== INPUT / FORM ========== */
.akku-field{display:flex; flex-direction:column; gap:var(--space-2); min-width:0}
.akku-label{
  font-size:12px; font-weight:500; letter-spacing:.01em;
  color:var(--ink-muted); display:flex; gap:var(--space-2); align-items:center;
}
.akku-label .req{color:var(--color-danger)}
.akku-helper{font-size:11.5px; color:var(--ink-subtle); line-height:1.5}
.akku-helper.error{color:var(--color-danger)}

.akku-input{
  height:36px; padding:0 var(--space-4);
  font-family:inherit; font-size:var(--text-sm); color:var(--ink);
  background:var(--bg-elev); border:1px solid var(--rule); border-radius:var(--radius-md);
  outline:none; width:100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.akku-input::placeholder{color:var(--ink-subtle)}
.akku-input:hover{border-color:#CBD5E1}
.akku-input:focus{border-color:var(--iris-400); box-shadow: 0 0 0 3px var(--iris-100)}
.akku-input.error{border-color:var(--color-danger)}
.akku-input.error:focus{box-shadow: 0 0 0 3px #FECACA}
.akku-input[disabled]{background:#F8FAFC; color:var(--ink-subtle); cursor:not-allowed}

.akku-input.lg{height:44px; font-size:15px}

.akku-textarea{
  min-height:92px; padding:var(--space-4);
  font-family:inherit; font-size:var(--text-sm); color:var(--ink); line-height:1.55;
  background:var(--bg-elev); border:1px solid var(--rule); border-radius:var(--radius-md);
  outline:none; width:100%; resize:vertical;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.akku-textarea:focus{border-color:var(--iris-400); box-shadow: 0 0 0 3px var(--iris-100)}

/* input with leading icon */
.akku-input-group{position:relative}
.akku-input-group .lead{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-subtle); font-size:14px; pointer-events:none; line-height:1;
}
.akku-input-group .akku-input.has-lead{padding-left:36px}

/* select (basic) */
.akku-select{
  height:36px; padding:0 36px 0 var(--space-4);
  font-family:inherit; font-size:var(--text-sm); color:var(--ink);
  background:var(--bg-elev); border:1px solid var(--rule); border-radius:var(--radius-md);
  outline:none; appearance:none; cursor:pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
.akku-select:focus{border-color:var(--iris-400); box-shadow:0 0 0 3px var(--iris-100)}

/* checkbox & radio */
.akku-check{
  display:inline-flex; align-items:center; gap:var(--space-3);
  font-size:var(--text-sm); color:var(--ink); cursor:pointer;
}
.akku-check input{position:absolute; opacity:0; pointer-events:none}
.akku-check .box{
  width:16px; height:16px; border:1.5px solid var(--rule);
  border-radius:var(--radius-xs); background:var(--bg-elev); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition: all var(--dur-fast) var(--ease-out);
}
.akku-check input:checked + .box{background:var(--iris-500); border-color:var(--iris-500)}
.akku-check input:checked + .box::after{
  content:""; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.akku-check input:focus-visible + .box{box-shadow:0 0 0 3px var(--iris-100)}

.akku-radio .box{border-radius:var(--radius-full)}
.akku-radio input:checked + .box{background:var(--bg-elev); border-color:var(--iris-500); border-width:2px}
.akku-radio input:checked + .box::after{
  content:""; width:8px; height:8px; border:0; border-radius:999px; background:var(--iris-500);
  transform: none;
}

/* switch */
.akku-switch{display:inline-flex; align-items:center; gap:var(--space-3); cursor:pointer; font-size:var(--text-sm)}
.akku-switch input{position:absolute; opacity:0; pointer-events:none}
.akku-switch .track{
  width:34px; height:20px; background:#CBD5E1; border-radius:999px; position:relative;
  transition: background var(--dur-base) var(--ease-out);
}
.akku-switch .track::after{
  content:""; position:absolute; top:2px; left:2px;
  width:16px; height:16px; background:#fff; border-radius:999px;
  box-shadow: 0 1px 2px rgba(15,23,42,.2);
  transition: transform var(--dur-base) var(--ease-out);
}
.akku-switch input:checked + .track{background:var(--iris-500)}
.akku-switch input:checked + .track::after{transform: translateX(14px)}

/* ========== CARDS ========== */
.akku-card{
  background:var(--bg-elev); border:1px solid var(--rule);
  border-radius:var(--radius-lg); padding:var(--space-7);
  display:flex; flex-direction:column; gap:var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.akku-card.interactive{cursor:pointer}
.akku-card.interactive:hover{border-color:var(--iris-300); box-shadow:var(--shadow-md); transform:translateY(-2px)}
.akku-card.elevated{box-shadow:var(--shadow-sm); border-color:transparent}
.akku-card.feature{background: linear-gradient(180deg, var(--iris-50) 0%, #fff 60%); border-color:var(--iris-200)}

.akku-card .title{margin:0; font-size:var(--text-lg); font-weight:600; letter-spacing:var(--tracking-snug)}
.akku-card .meta{font-family:var(--font-mono); font-size:11px; color:var(--ink-subtle); letter-spacing:.04em}
.akku-card .desc{margin:0; font-size:var(--text-sm); color:var(--ink-muted); line-height:1.6}
.akku-card .foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; padding-top:var(--space-4); border-top:1px solid var(--rule);
  font-size:12px; color:var(--ink-muted);
}

.akku-stat{
  display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-7); background:var(--bg-elev); border:1px solid var(--rule);
  border-radius:var(--radius-lg);
}
.akku-stat .k{font-size:12px; font-weight:500; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.08em}
.akku-stat .v{
  font-family:var(--font-display); font-weight:700; font-stretch:75%;
  font-size:44px; line-height:1; letter-spacing:var(--tracking-tight);
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.akku-stat .d{font-size:12.5px; color:var(--ink-muted); line-height:1.5}
.akku-stat .d .up{color:var(--color-success); font-weight:500}
.akku-stat .d .down{color:var(--color-danger); font-weight:500}

/* ========== BADGES ========== */
.akku-badge{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-sans); font-size:11.5px; font-weight:500;
  padding: 3px var(--space-3); border-radius:var(--radius-full);
  line-height:1.4;
}
.akku-badge .dot{width:6px; height:6px; border-radius:999px; background:currentColor; opacity:.8}
.akku-badge.solid.primary{background:var(--iris-500); color:#fff}
.akku-badge.solid.secondary{background:var(--coral-500); color:#fff}
.akku-badge.solid.accent{background:var(--teal-500); color:#fff}
.akku-badge.solid.neutral{background:var(--ink); color:#fff}
.akku-badge.soft.primary{background:var(--iris-100); color:var(--iris-800)}
.akku-badge.soft.secondary{background:var(--coral-100); color:var(--coral-800)}
.akku-badge.soft.accent{background:var(--teal-100); color:var(--teal-800)}
.akku-badge.soft.neutral{background:#F1F5F9; color:var(--ink)}
.akku-badge.soft.success{background:var(--color-success-surface); color:#14532D}
.akku-badge.soft.warning{background:var(--color-warning-surface); color:#78350F}
.akku-badge.soft.danger{background:var(--color-danger-surface); color:#7F1D1D}
.akku-badge.soft.info{background:var(--color-info-surface); color:#1E3A8A}
.akku-badge.outline{background:transparent; border:1px solid var(--rule); color:var(--ink-muted)}

.akku-tag{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding: 4px var(--space-3); font-size:12px; font-weight:500;
  border:1px solid var(--rule); border-radius:var(--radius-sm);
  color:var(--ink-muted); background:var(--bg-elev);
}
.akku-tag .x{
  width:14px; height:14px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; background:#F1F5F9;
  color:var(--ink-subtle); font-size:10px; cursor:pointer;
}
.akku-tag .x:hover{background:var(--iris-100); color:var(--iris-700)}

/* ========== NAV ========== */
.akku-topbar{
  display:flex; align-items:center; gap:var(--space-7); height:56px;
  padding: 0 var(--space-7);
  background:var(--bg-elev); border:1px solid var(--rule); border-radius:var(--radius-lg);
}
.akku-topbar .brand{
  display:inline-flex; align-items:center; gap:var(--space-3);
  font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:var(--tracking-snug);
}
.akku-topbar .brand .logo{
  width:26px; height:26px; border-radius:7px;
  background: conic-gradient(from 45deg, var(--iris-500), var(--coral-500), var(--iris-500));
}
.akku-topbar nav{display:flex; gap:var(--space-2); margin-left:var(--space-5)}
.akku-nav-item{
  padding: 7px var(--space-4); font-size:13px; font-weight:500;
  color:var(--ink-muted); border-radius:var(--radius-sm);
  text-decoration:none; cursor:pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.akku-nav-item:hover{background:var(--iris-50); color:var(--iris-700)}
.akku-nav-item.active{background:var(--iris-100); color:var(--iris-800)}
.akku-topbar .spacer{flex:1}
.akku-topbar .search{
  width:280px; height:34px; background:var(--bg); border:1px solid var(--rule);
  border-radius:var(--radius-md); padding:0 var(--space-4);
  display:flex; align-items:center; gap:var(--space-3);
  font-size:12.5px; color:var(--ink-subtle);
}
.akku-topbar .search kbd{
  margin-left:auto; font-family:var(--font-mono); font-size:10.5px;
  padding:1px 6px; background:var(--bg-elev); border:1px solid var(--rule);
  border-radius:4px; color:var(--ink-muted);
}

.akku-sidebar{
  width:240px; background:var(--bg-elev); border:1px solid var(--rule);
  border-radius:var(--radius-lg); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-5);
}
.akku-sidebar .sb-section{display:flex; flex-direction:column; gap:var(--space-1)}
.akku-sidebar .sb-label{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-subtle);
  padding:0 var(--space-3); margin-bottom:var(--space-2);
}
.akku-sb-item{
  display:flex; align-items:center; gap:var(--space-3);
  padding: 7px var(--space-3); font-size:13px; font-weight:500;
  color:var(--ink-muted); border-radius:var(--radius-sm);
  cursor:pointer; transition: all var(--dur-fast) var(--ease-out);
}
.akku-sb-item:hover{background:var(--iris-50); color:var(--iris-700)}
.akku-sb-item.active{background:var(--iris-500); color:#fff}
.akku-sb-item .ico{width:16px; height:16px; flex-shrink:0; display:inline-block}
.akku-sb-item .count{margin-left:auto; font-family:var(--font-mono); font-size:11px; opacity:.8}

.akku-tabs{display:flex; gap:var(--space-2); border-bottom:1px solid var(--rule); padding-bottom:0}
.akku-tab{
  padding: var(--space-3) var(--space-4);
  font-size:13px; font-weight:500; color:var(--ink-muted);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition: all var(--dur-fast) var(--ease-out);
}
.akku-tab:hover{color:var(--ink)}
.akku-tab.active{color:var(--iris-700); border-bottom-color:var(--iris-500)}

/* breadcrumb */
.akku-crumb{display:flex; align-items:center; gap:var(--space-2); font-size:12.5px; color:var(--ink-muted)}
.akku-crumb a{color:inherit; text-decoration:none}
.akku-crumb a:hover{color:var(--iris-700)}
.akku-crumb .sep{color:var(--ink-subtle); font-size:10px}
.akku-crumb .cur{color:var(--ink); font-weight:500}

/* alert/banner */
.akku-alert{
  display:flex; gap:var(--space-4); padding: var(--space-5) var(--space-6);
  border-radius:var(--radius-md); border:1px solid;
  font-size:13.5px; line-height:1.55;
}
.akku-alert .ico{width:18px; height:18px; flex-shrink:0; margin-top:1px}
.akku-alert b{font-weight:600; margin-right:var(--space-2)}
.akku-alert.info{background:var(--color-info-surface); border-color:#BFDBFE; color:#1E3A8A}
.akku-alert.success{background:var(--color-success-surface); border-color:#BBF7D0; color:#14532D}
.akku-alert.warning{background:var(--color-warning-surface); border-color:#FDE68A; color:#78350F}
.akku-alert.danger{background:var(--color-danger-surface); border-color:#FECACA; color:#7F1D1D}

/* avatar */
.akku-avatar{
  width:32px; height:32px; border-radius:999px; overflow:hidden; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-weight:600; font-size:12px; color:#fff;
  letter-spacing:.02em;
}
.akku-avatar.sm{width:24px; height:24px; font-size:10px}
.akku-avatar.lg{width:44px; height:44px; font-size:15px}
.akku-avatar-group{display:inline-flex}
.akku-avatar-group .akku-avatar{margin-left:-8px; box-shadow:0 0 0 2px var(--bg-elev)}
.akku-avatar-group .akku-avatar:first-child{margin-left:0}

/* progress */
.akku-progress{
  width:100%; height:6px; background:var(--iris-100); border-radius:999px; overflow:hidden;
}
.akku-progress > span{
  display:block; height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--iris-500), var(--iris-400));
}