/* ============================================================
   VOICEDESK — COMPONENT LIBRARY
   Buttons · cards · badges · forms · tables · modal · flash
   ============================================================ */

/* ---------------- buttons ---------------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    height:42px; padding:0 20px; border-radius:12px;
    font-size:13.5px; font-weight:500; letter-spacing:.01em; white-space:nowrap;
    position:relative; overflow:hidden;
    transition:box-shadow var(--t), background var(--t-fast), color var(--t-fast),
               border-color var(--t-fast), transform var(--t-fast);
}
.btn:active{ transform:scale(.97) }
.btn svg{ width:15px; height:15px }

.btn-primary{ background:var(--text); color:#fff; box-shadow:var(--shadow-sm) }
.btn-primary:hover{ box-shadow:0 14px 32px -12px rgba(9,9,11,.45) }
.btn-primary::after{
    content:""; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.15),transparent);
    transform:skewX(-20deg); transition:left .6s var(--ease);
}
.btn-primary:hover::after{ left:125% }

.btn-accent{ background:var(--primary); color:#fff }
.btn-accent:hover{ box-shadow:0 14px 32px -10px var(--primary-ring) }

.btn-ghost{ border:1px solid var(--border-strong); color:var(--text); background:var(--surface) }
.btn-ghost:hover{ border-color:rgba(9,9,11,.3); background:var(--surface-2) }

.btn-soft{ background:var(--primary-soft); color:var(--primary) }
.btn-soft:hover{ background:rgba(108,78,255,.14) }

.btn-danger{ background:var(--danger); color:#fff }
.btn-danger:hover{ box-shadow:0 12px 28px -10px rgba(229,72,77,.45) }
.btn-danger-ghost{ border:1px solid rgba(229,72,77,.3); color:var(--danger) }
.btn-danger-ghost:hover{ background:var(--danger-soft) }

.btn-sm{ height:34px; padding:0 14px; font-size:12.5px; border-radius:10px }
.btn-lg{ height:50px; padding:0 28px; font-size:14.5px; border-radius:14px }
.btn-block{ width:100% }
.btn-icon{ width:38px; height:38px; padding:0; border-radius:11px; color:var(--muted) }
.btn-icon:hover{ background:var(--surface-2); color:var(--text) }

/* ---------------- cards ---------------- */
.card{
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
    transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}
.card-pad{ padding:24px }
.card-hover:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(108,78,255,.22) }
.card-h{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 24px; border-bottom:1px solid var(--border);
}
.card-b{ padding:24px }
.card-f{ padding:16px 24px; border-top:1px solid var(--border); background:var(--surface-2);
         border-radius:0 0 var(--radius-lg) var(--radius-lg) }

/* ---------------- stat block ---------------- */
.stat{ padding:22px 24px }
.stat .stat-n{
    font-family:var(--font-display); font-weight:400; font-size:clamp(30px,3.4vw,40px);
    letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.stat .stat-n em{ font-family:var(--font-serif); font-style:italic; font-size:.6em; color:var(--primary) }
.stat .stat-t{ margin-top:10px; font-family:var(--font-mono); font-size:9.5px;
               letter-spacing:.22em; text-transform:uppercase; color:var(--muted) }

/* ---------------- badges ---------------- */
.badge{
    display:inline-flex; align-items:center; gap:7px;
    height:24px; padding:0 11px; border-radius:100px;
    font-size:11.5px; font-weight:500; letter-spacing:.02em; white-space:nowrap;
}
.badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor }
.badge-muted  { background:var(--surface-3);  color:var(--muted) }
.badge-primary{ background:var(--primary-soft); color:var(--primary) }
.badge-success{ background:var(--success-soft); color:var(--success) }
.badge-danger { background:var(--danger-soft);  color:var(--danger) }
.badge-warning{ background:var(--warning-soft); color:var(--warning) }
.badge-info   { background:var(--info-soft);    color:var(--info) }
.badge-plain::before{ display:none }

/* ---------------- forms ---------------- */
.field{ display:flex; flex-direction:column; gap:8px }
.field-label{
    font-family:var(--font-mono); font-size:10px; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.field-label .opt{ text-transform:none; letter-spacing:.04em; color:var(--muted-2) }
.input, select.input, textarea.input{
    width:100%; height:44px; padding:0 15px;
    background:var(--surface); border:1px solid var(--border-strong); border-radius:12px;
    font-size:14px; transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    appearance:none;
}
textarea.input{ height:auto; padding:12px 15px; resize:vertical; line-height:1.6 }
.input::placeholder{ color:var(--muted-2) }
.input:hover{ border-color:rgba(9,9,11,.24) }
.input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring) }
select.input{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.field-hint{ font-size:12px; color:var(--muted-2) }
.field-err{ font-size:12.5px; color:var(--danger) }
.check{
    display:flex; align-items:flex-start; gap:12px; cursor:pointer;
}
.check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--primary); border-radius:6px }

/* ---------------- table-ish rows ---------------- */
.rowline{
    display:flex; align-items:center; gap:14px;
    padding:14px 0; border-top:1px solid var(--border);
}
.rowline:first-child{ border-top:none }

/* ---------------- empty state ---------------- */
.empty{
    text-align:center; padding:56px 24px;
    border:1px dashed var(--border-strong); border-radius:var(--radius-lg);
    background:var(--surface);
}
.empty .empty-glyph{
    width:44px; height:44px; margin:0 auto 16px; border-radius:50%;
    border:1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center; color:var(--muted);
}
.empty h3{ font-size:15.5px; font-weight:500 }
.empty p{ margin-top:6px; font-size:13px; color:var(--muted); max-width:340px; margin-inline:auto }

/* ---------------- flash ---------------- */
.flash{
    display:flex; align-items:flex-start; gap:13px;
    padding:15px 18px; border-radius:var(--radius);
    border:1px solid; font-size:13.5px;
    animation:fade-up .5s var(--ease) both;
}
.flash-success{ background:var(--success-soft); border-color:rgba(14,159,110,.25); color:#0B6E4E }
.flash-danger { background:var(--danger-soft);  border-color:rgba(229,72,77,.25);  color:#B3383C }
.flash b{ font-weight:600 }
.flash .flash-x{ margin-left:auto; opacity:.5; transition:opacity var(--t-fast) }
.flash .flash-x:hover{ opacity:1 }

/* ---------------- modal ---------------- */
.modal{ position:fixed; inset:0; z-index:300; display:none }
.modal.open{ display:block }
.modal-veil{
    position:absolute; inset:0; background:rgba(9,9,11,.4);
    backdrop-filter:blur(6px); animation:fade-in .3s var(--ease) both;
}
.modal-box{
    position:relative; z-index:1; width:min(480px, calc(100vw - 32px));
    margin:14vh auto 0; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius-xl);
    box-shadow:var(--shadow-pop); padding:30px;
    animation:scale-in .35s var(--ease) both;
}
.modal-box h2{ font-size:19px }
.modal-box .modal-sub{ margin-top:8px; font-size:13.5px; color:var(--muted) }

/* ---------------- dropdown ---------------- */
.dd{ position:relative }
.dd-menu{
    position:absolute; right:0; top:calc(100% + 10px); min-width:200px; z-index:120;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:6px;
    opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
    transition:opacity var(--t-fast), transform var(--t-fast);
}
.dd.open .dd-menu{ opacity:1; transform:none; pointer-events:auto }
.dd-item{
    display:flex; align-items:center; gap:10px; width:100%;
    padding:9px 12px; border-radius:9px; font-size:13.5px; color:var(--text);
    transition:background var(--t-fast);
}
.dd-item:hover{ background:var(--surface-2) }
.dd-item svg{ width:15px; height:15px; color:var(--muted) }
.dd-sep{ height:1px; background:var(--border); margin:6px 4px }

/* ---------------- pagination ---------------- */
.pager{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:4px }
.pager .pager-info{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted-2) }
.pager .pager-nav{ display:flex; gap:6px }
.pager a,.pager span.pg{
    min-width:34px; height:34px; padding:0 10px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; border:1px solid transparent; color:var(--muted);
    transition:all var(--t-fast);
}
.pager a:hover{ background:var(--surface-2); color:var(--text) }
.pager span.pg.on{ background:var(--text); color:#fff }
.pager span.pg.off{ opacity:.35 }