/* BLISS Push admin portal */
:root {
    --bp-primary: #1f4e8c;
    --bp-primary-dark: #163a69;
    --bp-accent: #f5a623;
    --bp-bg: #f3f5f9;
    --bp-sidebar: #ffffff;
    --bp-border: #e3e7ee;
    --bp-text-muted: #6b7686;
}

body { background: var(--bp-bg); font-size: .92rem; color: #1e2733; }
a { color: var(--bp-primary); }
.btn-primary { background: var(--bp-primary); border-color: var(--bp-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--bp-primary-dark); border-color: var(--bp-primary-dark); }
.text-muted { color: var(--bp-text-muted) !important; }

/* Top bar */
.bp-topbar { background: linear-gradient(90deg, var(--bp-primary-dark), var(--bp-primary)); height: 56px; box-shadow: 0 2px 6px rgba(0,0,0,.12); z-index: 1040; }
.bp-logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--bp-accent); color: #1e2733; }

/* Layout */
.bp-wrapper { display: flex; padding-top: 56px; min-height: 100vh; }
.bp-sidebar { width: 230px; flex-shrink: 0; background: var(--bp-sidebar); border-right: 1px solid var(--bp-border); position: fixed; top: 56px; bottom: 0; overflow-y: auto; padding: 12px 0 40px; z-index: 1030; transition: transform .2s ease; }
.bp-sidebar .nav-link { color: #344050; padding: .55rem 1.25rem; border-left: 3px solid transparent; }
.bp-sidebar .nav-link i { width: 22px; display: inline-block; color: #8592a3; }
.bp-sidebar .nav-link:hover { background: #f1f4f9; color: var(--bp-primary); }
.bp-sidebar .nav-link.active { color: var(--bp-primary); border-left-color: var(--bp-primary); background: #eaf0f9; font-weight: 600; }
.bp-sidebar .nav-link.active i { color: var(--bp-primary); }
.bp-nav-group { cursor: default; }
.bp-nav-group.active { background: transparent !important; border-left-color: transparent !important; }
.bp-subnav .nav-link { padding-left: 3rem; font-size: .88rem; }
.bp-sidebar-footer { position: absolute; bottom: 10px; left: 20px; color: #a0a9b6; font-size: .75rem; }
.bp-main { flex: 1; margin-left: 230px; padding: 24px; min-width: 0; }

@media (max-width: 991.98px) {
    .bp-sidebar { transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
    .bp-sidebar.open { transform: translateX(0); visibility: visible; box-shadow: 2px 0 12px rgba(0,0,0,.15); }
    .bp-main { margin-left: 0; padding: 16px; }
}

/* Cards */
.card { border: 1px solid var(--bp-border); border-radius: 10px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--bp-border); font-weight: 600; border-radius: 10px 10px 0 0 !important; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.composer-actions .btn { white-space: nowrap; }
@media (max-width: 575.98px) { .composer-actions, .composer-actions > div { width: 100%; } .composer-actions .btn { display: block; width: 100%; margin-right: 0 !important; } }
.stat-card .stat-label { color: var(--bp-text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.stat-card .stat-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.bg-soft-primary { background: #e6eefa; color: var(--bp-primary); }
.bg-soft-success { background: #e3f6ec; color: #1e8a4c; }
.bg-soft-danger { background: #fde8e8; color: #c0392b; }
.bg-soft-warning { background: #fff3dc; color: #b7791f; }
.bg-soft-info { background: #e1f4f8; color: #117a8b; }
.bg-soft-secondary { background: #eef0f3; color: #4b5563; }

/* Tables */
.table { background: #fff; margin-bottom: 0; }
.table thead th { border-top: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bp-text-muted); background: #fafbfd; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-responsive { border-radius: 0 0 10px 10px; }
.badge-status { text-transform: capitalize; font-weight: 600; padding: .35em .6em; }
.badge-light { border: 1px solid var(--bp-border); }
.filter-bar .form-control, .filter-bar .custom-select { font-size: .85rem; }
.text-truncate-200 { max-width: 220px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
code.token { font-size: .78rem; color: #4b5563; word-break: break-all; }

/* Login */
.bp-guest { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg, #163a69 0%, #1f4e8c 60%, #2b6cb0 100%); }
.login-card { width: 100%; max-width: 400px; border: 0; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.login-card .bp-logo { width: 48px; height: 48px; font-size: 1.5rem; border-radius: 12px; }

/* Composer */
.type-picker .btn { flex: 1; }
.type-picker .btn i { display: block; font-size: 1.3rem; margin-bottom: 2px; }
.char-count { font-size: .75rem; color: var(--bp-text-muted); }
.drop-zone { border: 2px dashed #c4ccd8; border-radius: 10px; padding: 18px; text-align: center; color: var(--bp-text-muted); cursor: pointer; background: #fafbfd; }
.drop-zone.dragover { border-color: var(--bp-primary); background: #eef3fb; }
.image-thumb { max-height: 90px; border-radius: 6px; border: 1px solid var(--bp-border); }

/* Phone preview */
.phone { width: 300px; max-width: 100%; margin: 0 auto; border-radius: 34px; background: #111; padding: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.phone-screen { border-radius: 24px; min-height: 480px; padding: 14px 10px; background: linear-gradient(160deg, #3d5a80 0%, #293241 100%); position: relative; overflow: hidden; }
.phone-status { color: #fff; font-size: .7rem; display: flex; justify-content: space-between; padding: 0 8px 10px; opacity: .85; }
.notif { background: rgba(255,255,255,.96); border-radius: 16px; padding: 10px 12px; box-shadow: 0 4px 12px rgba(0,0,0,.2); color: #1e2733; }
.notif-head { display: flex; align-items: center; font-size: .7rem; color: #5f6b7a; margin-bottom: 4px; }
.notif-app-icon { width: 16px; height: 16px; border-radius: 4px; background: var(--bp-accent); display: inline-flex; align-items: center; justify-content: center; font-size: .55rem; color: #1e2733; margin-right: 6px; }
.notif-title { font-weight: 600; font-size: .85rem; line-height: 1.25; word-break: break-word; }
.notif-body { font-size: .8rem; color: #3b4552; line-height: 1.3; word-break: break-word; white-space: pre-line; max-height: 7.8em; overflow: hidden; }
.notif-image { margin-top: 8px; border-radius: 10px; width: 100%; max-height: 160px; object-fit: cover; background: #e9edf3; display: block; }
.notif-image-placeholder { margin-top: 8px; border-radius: 10px; height: 120px; background: repeating-linear-gradient(45deg, #e9edf3, #e9edf3 10px, #f3f5f9 10px, #f3f5f9 20px); display: flex; align-items: center; justify-content: center; color: #8592a3; font-size: .75rem; }
.preview-collapsed .notif-image, .preview-collapsed .notif-image-placeholder { display: none; }
.preview-collapsed .notif-body { max-height: 1.35em; white-space: nowrap; text-overflow: ellipsis; }

/* Select2 sizing */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { font-size: .82rem; }
.select2-result-user small { color: var(--bp-text-muted); }

/* Misc */
.json-view { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 12px; font-size: .78rem; max-height: 380px; overflow: auto; }
.kv dt { color: var(--bp-text-muted); font-weight: 500; font-size: .8rem; }
.kv dd { margin-bottom: .6rem; }
.empty-state { padding: 40px 20px; text-align: center; color: var(--bp-text-muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: 6px; }