/* BS Manager — custom bits on top of Tailwind (animations, cards, fields) */

/* ── Credential cards — clean & minimal (color used sparingly) ────── */
.cred-card {
    border-radius: 16px;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.cred-card:hover {
    transform: translateY(-2px);
    border-color: #D2D7E6;
    box-shadow: 0 12px 28px -14px rgba(16,24,40,.28);
}
.dark .cred-card:hover { border-color: #343A4A; box-shadow: 0 12px 26px -12px rgba(0,0,0,.55); }

/* category filter pills */
.pill {
    display: inline-flex; align-items: center; flex-shrink: 0;
    background: #fff; border: 1px solid #E7EAF3; color: #1F2937;
    font-weight: 700; font-size: .85rem;
    padding: .5rem 1rem; border-radius: 999px;
    white-space: nowrap;
    transition: all .15s ease;
}
.dark .pill { background: #171A23; border-color: #262A36; color: #E5E7EB; }
.pill:hover { border-color: #6D5DF6; color: #6D5DF6; }
.pill-active, .pill-active:hover {
    background: #6D5DF6; border-color: #6D5DF6; color: #fff;
    box-shadow: 0 4px 12px -2px rgba(109,93,246,.45);
}
.pill-add {
    background: transparent; border-style: dashed; color: #6B7280; gap: 6px;
}
.pill-add:hover { border-style: dashed; }

/* crown = feature toggle */
.crown-btn {
    flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #CBD5E1; font-size: .85rem;
    transition: all .15s ease;
}
.crown-btn:hover { color: #F59E0B; background: rgba(245,158,11,.12); }
.crown-btn.on { color: #F59E0B; }

/* featured (favorited) card — warm amber highlight, like the reference */
.cred-fav {
    background: #FFF7ED;
    border-color: #FB923C;
    box-shadow: 0 6px 20px -8px rgba(249,115,22,.35);
}
.dark .cred-fav { background: #241a10; border-color: #B45309; }
.cred-fav .fld-box { background: #FFFFFF; border-color: #FADFC0; }
.dark .cred-fav .fld-box { background: #1a130a; border-color: #5a3f16; }

/* provider badge (filled pill) */
.prov-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--c, #6D5DF6); color: #fff;
    padding: 5px 12px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; letter-spacing: .01em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--c, #6D5DF6) 45%, transparent);
}

/* labelled boxed fields */
.fld-label { display: block; font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: 5px; }
.dark .fld-label { color: #C7CBD5; }
.fld-box {
    display: flex; align-items: center; gap: 8px;
    background: #F7F8FC; border: 1px solid #E5E8F1; border-radius: 12px;
    padding: .6rem .8rem; font-size: .85rem;
}
.dark .fld-box { background: #0F1117; border-color: #262A36; }
.fld-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* soft-red delete button */
.btn-danger-soft {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(239,68,68,.1); color: #EF4444;
    font-weight: 600; font-size: .83rem; padding: .5rem .95rem; border-radius: 10px;
    transition: all .15s ease;
}
.btn-danger-soft:hover { background: #EF4444; color: #fff; }
.btn-sm { padding: .5rem .95rem; font-size: .83rem; }
.dark .cred-card:hover { border-color: #343A4A; box-shadow: 0 10px 26px -12px rgba(0,0,0,.55); }

/* the one spot of color: the platform icon tile */
.cred-icon {
    background: color-mix(in srgb, var(--cat) 12%, transparent);
    color: var(--cat);
    border-radius: 12px;
}

/* category as quiet text with a small color dot */
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 600;
    color: #6B7280;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-chip i { color: var(--cat); }

/* 2FA — small, muted */
.cred-2fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px; height: 17px;
    border-radius: 5px;
    font-size: .55rem;
    background: rgba(34,197,94,.12);
    color: #16A34A;
    flex-shrink: 0;
}

/* actions rest quiet, surface on hover */
.cred-actions .mini-btn { opacity: 0; transition: opacity .15s ease; }
.cred-card:hover .cred-actions .mini-btn,
.cred-actions .mini-btn.text-amber-500 { opacity: 1; }

::selection { background: #6D5DF6; color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #ECEEF5; border-radius: 8px; }
.dark ::-webkit-scrollbar-thumb { background: #262A36; }

/* cards */
.card {
    background: #FFFFFF;                 /* white cards on the soft-gray page */
    border: 1px solid #E7EAF3;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dark .card { background: #171A23; border-color: #262A36; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -4px rgba(16,24,40,.14); border-color: rgba(109,93,246,.35); }

/* buttons */
.btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #6D5DF6; color: #fff; font-weight: 600; font-size: .855rem;
    padding: .55rem 1.05rem; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(109,93,246,.35);
    transition: all .18s ease;
}
.btn-primary:hover { background: #5B4EEB; transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(109,93,246,.55); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff;
    border: 1px solid #E1E5F0; color: inherit; font-weight: 600; font-size: .855rem;
    padding: .55rem 1.05rem; border-radius: 12px; transition: all .18s ease;
}
.dark .btn-ghost { background: transparent; border-color: #262A36; }
.btn-ghost:hover { background: rgba(109,93,246,.1); color: #6D5DF6; border-color: transparent; }
.icon-btn {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #6B7280; font-size: .85rem; transition: all .15s ease;
}
.icon-btn:hover { background: rgba(109,93,246,.1); color: #6D5DF6; transform: scale(1.08); }
.mini-btn {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #6B7280; font-size: .72rem; transition: all .15s ease;
}
.mini-btn:hover { background: rgba(109,93,246,.1); color: #6D5DF6; }

/* forms */
.field {
    width: 100%; background: #fff; border: 1px solid #E1E5F0; border-radius: 12px;
    padding: .55rem .9rem; font-size: .875rem; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dark .field { background: #171A23; border-color: #262A36; color: #E5E7EB; }
.field:focus { border-color: #6D5DF6; box-shadow: 0 0 0 3px rgba(109,93,246,.12); }
.lbl { display: block; font-weight: 600; font-size: .8rem; margin-bottom: .35rem; }

/* dropdown + menu */
.menu-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .75rem; border-radius: 9px; font-size: .85rem; font-weight: 500;
    transition: all .13s ease;
}
.menu-item:hover { background: rgba(109,93,246,.1); color: #6D5DF6; }
.dropdown-panel { animation: dropIn .16s ease; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* cred fields */
/* borderless rows separated by hairlines — no boxed fields */
.cred-field {
    display: flex; align-items: center; gap: 12px;
    background: transparent; border: 0; border-radius: 0;
    padding: .55rem .15rem; font-size: .82rem; margin: 0;
    border-top: 1px solid #DEE3EE;
}
.dark .cred-field { border-top-color: #20242F; }
.cred-field:first-of-type { border-top: 0; }
.cred-field .cf-label { color: #9AA1AE; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; width: 44px; flex-shrink: 0; }
.cred-field .cf-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* copy/reveal buttons: present but quiet, full on hover */
.cred-card .cred-field .mini-btn { opacity: .5; transition: opacity .15s ease; }
.cred-card:hover .cred-field .mini-btn { opacity: .8; }
.cred-card .cred-field .mini-btn:hover { opacity: 1; }

/* toast */
.bsm-toast {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid #ECEEF5; border-radius: 14px;
    box-shadow: 0 12px 32px -4px rgba(16,24,40,.18);
    padding: .85rem 1.1rem; min-width: 290px; max-width: 380px;
    font-size: .86rem; font-weight: 500;
    animation: toastIn .28s cubic-bezier(.21,1.02,.73,1);
}
.dark .bsm-toast { background: #171A23; border-color: #262A36; color: #E5E7EB; }
.bsm-toast.leaving { animation: toastOut .2s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }

/* strength meter */
.strength-bar { height: 5px; border-radius: 4px; background: #ECEEF5; overflow: hidden; }
.dark .strength-bar { background: #262A36; }
.strength-bar > div { height: 100%; border-radius: 4px; transition: width .3s ease, background .3s ease; }

/* animations */
.fade-up { animation: fadeUp .35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
.stagger > * { animation: fadeUp .35s ease both; }
.stagger > *:nth-child(2) { animation-delay: .04s; } .stagger > *:nth-child(3) { animation-delay: .08s; }
.stagger > *:nth-child(4) { animation-delay: .12s; } .stagger > *:nth-child(5) { animation-delay: .16s; }
.stagger > *:nth-child(6) { animation-delay: .2s; }  .stagger > *:nth-child(7) { animation-delay: .24s; }

.skeleton {
    background: linear-gradient(90deg,#ECEEF5 25%,#f6f7fb 50%,#ECEEF5 75%);
    background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px;
}
.dark .skeleton { background: linear-gradient(90deg,#262A36 25%,#1c2029 50%,#262A36 75%); background-size: 200% 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* sidebar collapse / mobile */
@media (min-width: 1024px) {
    body.sb-collapsed #sidebar { width: 76px; }
    body.sb-collapsed #sidebar .nav-label { display: none; }
    body.sb-collapsed #sidebar .nav-link { justify-content: center; }
    body.sb-collapsed #main { margin-left: 76px; }
}
@media (max-width: 1023.98px) {
    #sidebar { transform: translateX(-100%); }
    body.sb-open #sidebar { transform: none; box-shadow: 0 12px 32px -4px rgba(0,0,0,.3); }
    body.sb-open #backdrop { display: block !important; }
}

/* modal */
.modal > div:last-child { animation: modalIn .22s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* task board */
.task-card { cursor: grab; }
.task-card.dragging { opacity: .5; transform: rotate(2deg); }
.task-col.drag-over { border-color: #6D5DF6; background: rgba(109,93,246,.08); }

/* timeline */
.timeline-item { position: relative; display: flex; gap: 14px; padding-bottom: 1.4rem; }
.timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background: #ECEEF5; }
.dark .timeline-item:not(:last-child)::before { background: #262A36; }

/* auth — flat, no gradients */
.auth-bg { background: #F4F6FB; }
.dark .auth-bg { background: #0F1117; }

/* horizontally-scrollable rows (category pills on mobile) with no visible scrollbar */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* No sideways scrolling, ever. Media can't exceed its column, and flex/grid
   children are allowed to shrink below their content width (they default to
   min-width:auto, which is the usual cause of a page-wide horizontal scrollbar).
   Deliberately NOT using overflow-x:hidden — that breaks the sticky header. */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
.cred-card, .card { min-width: 0; }
.fld-val, .cf-value { min-width: 0; }