/* Komponen dasar dashboard */
.card { background: #fff; border-radius: 0.875rem; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.card-head { padding: 0.875rem 1.25rem; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 0.925rem; }
.btn { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 0.5rem; padding: 0.5rem 0.9rem; font-size: 0.85rem; font-weight: 500; line-height: 1.25rem; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.btn-primary { background: #0f172a; color: #fff; }
.btn-primary:hover { background: #1e293b; }
.btn-success { background: #059669; color: #fff; }
.btn-success:hover { background: #047857; }
.btn-warn { background: #f59e0b; color: #fff; }
.btn-outline { border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.btn-outline:hover { background: #f8fafc; }
.btn-danger { border: 1px solid #fecdd3; background: #fff; color: #be123c; }
.btn-danger:hover { background: #fff1f2; }
.btn-xs { padding: 0.3rem 0.6rem; font-size: 0.75rem; border-radius: 0.4rem; }
.input { width: 100%; border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; background: #fff; }
.input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.label { display: block; font-size: 0.8rem; font-weight: 500; color: #475569; }
.label .input, .label textarea, .label select { margin-top: 0.3rem; }
table.tbl { width: 100%; font-size: 0.85rem; }
table.tbl thead th { text-align: left; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; font-weight: 600; padding: 0.7rem 1rem; background: #f8fafc; }
table.tbl tbody td { padding: 0.7rem 1rem; border-top: 1px solid #f1f5f9; vertical-align: top; }
table.tbl tbody tr:hover td { background: #fafcff; }
.stat { background: #fff; border-radius: 0.875rem; border: 1px solid #e2e8f0; padding: 1rem 1.15rem; position: relative; overflow: hidden; }
.stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, #94a3b8); }
.stat .v { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 0.2rem; }
.stat .l { font-size: 0.72rem; color: #64748b; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; margin-right: 0.35rem; }
pre.code { background: #0f172a; color: #e2e8f0; border-radius: 0.6rem; padding: 0.9rem 1rem; font-size: 0.75rem; overflow: auto; line-height: 1.5; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }