/* Blog Manager Pro — vault.css */
/* Access level badges, credential types, vault assign UI */

/* ═══════════════════════════════════════
   V6 ADDITIONS — Vault, Access, Levels
   ═══════════════════════════════════════ */

/* -- Token aliases for new accents -- */
:root {
    --c-teal: #39c5cf;
    --c-muted-acc: #545d68;
}
.bmp-ac-muted::before { background: var(--c-muted); }
.bmp-ac-teal::before  { background: var(--c-teal);  }

/* Stat icons */
.bmp-stat-ico { font-size: 22px; margin-bottom:8px; }
.bmp-stat-val { font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.bmp-stat-lbl { font-size:12px; font-weight:600; margin-top:6px; }
.bmp-stat-sub { font-size:11px; color:var(--c-subtle); margin-top:3px; }

/* -- Access Level Badges -- */
.bmp-level-badge {
    display:inline-flex; align-items:center; padding:3px 9px;
    border-radius:99px; font-size:11px; font-weight:700;
    letter-spacing:.02em; white-space:nowrap;
}
.bmp-level-owner       { background:rgba(163,113,247,.15); color:#a371f7; border:1px solid rgba(163,113,247,.25); }
.bmp-level-manager     { background:rgba(88,166,255,.15);  color:#58a6ff; border:1px solid rgba(88,166,255,.25); }
.bmp-level-editor      { background:rgba(63,185,80,.15);   color:#3fb950; border:1px solid rgba(63,185,80,.25); }
.bmp-level-contributor { background:rgba(240,136,62,.15);  color:#f0883e; border:1px solid rgba(240,136,62,.25); }
.bmp-level-viewer      { background:rgba(139,148,158,.12); color:#8b949e; border:1px solid rgba(139,148,158,.2); }

.bmp-pub-badge {
    display:inline-flex; align-items:center; padding:3px 8px;
    background:rgba(57,197,207,.12); color:var(--c-teal);
    border:1px solid rgba(57,197,207,.2);
    border-radius:99px; font-size:10px; font-weight:700;
    letter-spacing:.03em; margin-left:4px;
}

/* -- Credential type badges -- */
.bmp-type-badge {
    display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
    background:var(--c-surf2); border:1px solid var(--c-border2);
    border-radius:var(--r-sm); font-size:12px; white-space:nowrap;
}
.bmp-type-login    { color:#58a6ff; }
.bmp-type-api_key  { color:#a371f7; }
.bmp-type-ftp      { color:#f0883e; }
.bmp-type-database { color:#3fb950; }
.bmp-type-ssh      { color:#e3b341; }
.bmp-type-smtp     { color:#39c5cf; }
.bmp-type-other    { color:#8b949e; }

/* -- Mono text for usernames -- */
.bmp-mono { font-family: 'Courier New', monospace; font-size:12px; }
.bmp-col-user { max-width:160px; }

/* -- Password cell -- */
.bmp-pw-cell { display: flex; align-items: center; gap: 5px; }
.bmp-pw-mask {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--c-muted);
    min-width: 80px;
}
.bmp-pw-mask.revealed {
    letter-spacing: 0;
    color: var(--c-text);
    font-size: 12px;
    background: var(--c-surf2);
    padding: 2px 6px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border2);
}

/* Reveal / copy buttons */
.bmp-app .bmp-pw-reveal,
.bmp-app .bmp-pw-copy,
.bmp-app button.bmp-pw-reveal,
.bmp-app button.bmp-pw-copy {
    background: none !important;
    background-color: transparent !important;
    border: 1px solid var(--c-border) !important;
    border-color: var(--c-border) !important;
    border-radius: var(--r-sm) !important;
    width: 26px !important; height: 26px !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    cursor: pointer !important; font-size: 13px !important;
    color: var(--c-muted) !important;
    transition: all .15s !important; flex-shrink: 0 !important;
    box-shadow: none !important; padding: 0 !important; margin: 0 !important;
    line-height: 1 !important; outline: none !important;
}
.bmp-app .bmp-pw-reveal:hover,
.bmp-app .bmp-pw-copy:hover,
.bmp-app button.bmp-pw-reveal:hover,
.bmp-app button.bmp-pw-copy:hover {
    background: var(--c-surf2) !important;
    background-color: var(--c-surf2) !important;
    color: var(--c-text) !important;
    border-color: var(--c-border2) !important;
}

/* Password input wrapper — eye icon */
.bmp-pw-input-wrap { position: relative; }
.bmp-pw-input-wrap .bmp-in { padding-right: 42px; }
.bmp-app .bmp-pw-toggle,
.bmp-app button.bmp-pw-toggle {
    position: absolute !important; right: 10px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important; background-color: transparent !important;
    border: none !important; border-color: transparent !important;
    cursor: pointer !important; font-size: 16px !important;
    color: var(--c-muted) !important; padding: 0 !important; line-height: 1 !important;
    box-shadow: none !important; outline: none !important; margin: 0 !important;
    transition: color .15s !important;
}
.bmp-app .bmp-pw-toggle:hover,
.bmp-app button.bmp-pw-toggle:hover {
    color: var(--c-text) !important;
    background: none !important; background-color: transparent !important;
    border-color: transparent !important;
}

/* -- Access Settings -- */
.bmp-access-header {
    display:flex; align-items:flex-start; justify-content:space-between;
    margin-bottom:24px; flex-wrap:wrap; gap:12px;
}
.bmp-access-header h2 { font-size:20px; font-weight:800; margin-bottom:4px; }
.bmp-access-header p  { font-size:13px; color:var(--c-muted); max-width:500px; }

.bmp-access-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:16px;
    margin-bottom:24px;
}
.bmp-access-card {
    background:var(--c-surf);
    border:1px solid var(--c-border);
    border-top:3px solid var(--lc,var(--c-primary));
    border-radius:var(--r);
    padding:20px;
    transition:box-shadow .2s;
}
.bmp-access-card:hover { box-shadow:var(--shadow-sm); }
.bmp-access-card-top {
    display:flex; align-items:flex-start; gap:12px; margin-bottom:16px;
}
.bmp-ac-icon { font-size:24px; flex-shrink:0; margin-top:2px; }
.bmp-ac-name { font-size:14px; font-weight:700; color:var(--c-text); margin-bottom:3px; }
.bmp-ac-desc { font-size:11px; color:var(--c-muted); line-height:1.4; }
.bmp-ac-lock { font-size:16px; margin-left:auto; flex-shrink:0; opacity:.5; }

.bmp-ac-perms { display:flex; flex-direction:column; gap:0; }
.bmp-perm-row {
    display:flex; align-items:center; gap:10px;
    padding:8px 0;
    border-bottom:1px solid var(--c-border);
    cursor:pointer;
    transition:opacity .15s;
}
.bmp-perm-row:last-child { border-bottom:none; }
.bmp-perm-row:hover { opacity:.8; }
.bmp-perm-locked { cursor:default; opacity:.6; }

/* Custom toggle switch */
.bmp-perm-row input[type="checkbox"] { display:none; }
.bmp-perm-toggle {
    width:32px; height:18px; border-radius:9px;
    background:var(--c-border2); flex-shrink:0;
    position:relative; transition:background .2s;
}
.bmp-perm-toggle::after {
    content:''; position:absolute;
    width:12px; height:12px; border-radius:50%;
    background:#fff; top:3px; left:3px;
    transition:transform .2s;
}
.bmp-perm-row input:checked + .bmp-perm-toggle { background:var(--lc,var(--c-primary)); }
.bmp-perm-row input:checked + .bmp-perm-toggle::after { transform:translateX(14px); }
.bmp-perm-label { font-size:12px; font-weight:500; color:var(--c-text); }

.bmp-access-note {
    background:rgba(88,166,255,.07); border:1px solid rgba(88,166,255,.15);
    border-radius:var(--r); padding:14px 18px;
    font-size:13px; color:var(--c-muted); line-height:1.6;
}
.bmp-access-note strong { color:var(--c-blue); }

/* -- Credential summary rows (overview) -- */
.bmp-cred-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 0; border-bottom:1px solid var(--c-border);
}
.bmp-cred-row:last-child { border-bottom:none; }
.bmp-cred-title { font-size:13px; font-weight:500; }

/* -- Avatar mini (accessible-by) -- */
.bmp-av-xs {
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:50%;
    background:linear-gradient(135deg,var(--c-primary),var(--c-violet));
    color:#fff; font-size:10px; font-weight:700;
    margin-left:-4px; border:2px solid var(--c-surf);
}
.bmp-av-xs:first-child { margin-left:0; }
.bmp-av-more {
    background:var(--c-surf2); border-color:var(--c-border2);
    color:var(--c-muted); font-size:9px;
}

/* -- Vault assign level preview -- */
.bmp-level-preview {
    background:var(--c-surf2); border:1px solid var(--c-border);
    border-radius:var(--r-sm); padding:12px 14px;
    font-size:12px; color:var(--c-muted); line-height:1.5;
}

/* -- Overrides for v5 stat card names (v6 uses different class names) -- */
.bmp-stat-card { padding:18px 18px 16px; }

/* Responsive additions */
@media (max-width:700px) {
    .bmp-access-grid { grid-template-columns:1fr; }
    .bmp-access-header { flex-direction:column; }
}


/* ═══════════════════════════════════════════
   V6.1.2 — Vault assignment & webmail styles
   ═══════════════════════════════════════════ */

/* Vault assign section inside modal */
.bmp-app .bmp-vault-assign-section {
    border: 1px solid var(--c-border);
    border-color: var(--c-border);
    border-radius: var(--r);
    overflow: hidden;
    margin-top: 4px;
}
.bmp-app .bmp-assign-toggle,
.bmp-app button.bmp-assign-toggle {
    width: 100% !important;
    background: var(--c-surf2) !important;
    background-color: var(--c-surf2) !important;
    border: 1px solid var(--c-border2) !important;
    border-color: var(--c-border2) !important;
    border-radius: 0 !important;
    color: var(--c-text) !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    text-align: left !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background .15s !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    text-shadow: none !important;
}
.bmp-app .bmp-assign-toggle:hover,
.bmp-app button.bmp-assign-toggle:hover {
    background: var(--c-border2) !important;
    background-color: var(--c-border2) !important;
    color: var(--c-text) !important;
    border-color: var(--c-border2) !important;
}
.bmp-assign-toggle #bmp-vault-assign-count {
    background: var(--c-primary);
    color: #fff;
    border-radius: 99px;
    font-size: 10px; padding: 2px 7px; font-weight: 700;
    display: none;
}
.bmp-assign-toggle #bmp-vault-assign-count.visible { display: inline; }
.bmp-toggle-arrow { margin-left: auto; font-size: 10px; color: var(--c-muted); }
.bmp-app .bmp-assign-panel { padding: 12px; background: var(--c-surf); }