:root {
    --wa-green: #128c7e;
    --wa-green-dark: #075e54;
    --sidebar-width: 250px;
}

body.app-body { background: #f4f6f9; }

.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: #1f2937;
    color: #cbd5e1;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.app-brand {
    display: flex; align-items: center; gap: .6rem;
    padding: 1rem 1.25rem; font-size: 1.15rem; font-weight: 600;
    color: #fff; text-decoration: none; background: var(--wa-green-dark);
}
.app-brand i { font-size: 1.4rem; }

.app-nav { padding: .75rem .5rem; }
.app-nav .nav-link {
    display: flex; align-items: center; gap: .7rem;
    color: #cbd5e1; padding: .55rem .9rem; border-radius: .4rem; margin-bottom: 2px;
}
.app-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.app-nav .nav-link.active { background: var(--wa-green); color: #fff; }
.nav-heading {
    text-transform: uppercase; font-size: .7rem; letter-spacing: .08em;
    color: #94a3b8; padding: 1rem .9rem .3rem;
}

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
    display: flex; align-items: center; gap: .5rem;
    background: #fff; padding: .6rem 1.25rem; border-bottom: 1px solid #e5e7eb;
    position: sticky; top: 0; z-index: 1020;
}
.app-content { padding: 1.5rem; }

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--wa-green); color: #fff; font-weight: 600; font-size: .85rem;
}

.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.4rem; margin: 0; }

.stat-card { border: 0; border-left: 4px solid var(--wa-green); }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.stat-card .stat-label { color: #6b7280; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.stat-card.stat-danger { border-left-color: #dc3545; }
.stat-card.stat-warning { border-left-color: #f59e0b; }
.stat-card.stat-info { border-left-color: #0ea5e9; }

.card { border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.table > :not(caption) > * > * { vertical-align: middle; }

.form-row-lr .col-form-label { font-weight: 500; }

.perm-group { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .75rem 1rem; background: #fff; }
.perm-group h6 { font-size: .8rem; text-transform: uppercase; color: #6b7280; }

.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--wa-green-dark), var(--wa-green)); padding: 1rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-logo { width: 56px; height: 56px; border-radius: 50%; background: var(--wa-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; }

@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; left: calc(-1 * var(--sidebar-width)); z-index: 1040; transition: left .2s; }
    .app-sidebar.open { left: 0; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
    .app-content { padding: 1rem; }
}

/* WhatsApp-style template preview */
.wa-chat { background: #e5ddd5; border-radius: .6rem; padding: 1rem; }
.wa-bubble { background: #fff; border-radius: .5rem; padding: .5rem .65rem; max-width: 340px; box-shadow: 0 1px 1px rgba(0,0,0,.15); }
.wa-header { font-weight: 600; margin-bottom: .25rem; word-break: break-word; }
.wa-media { width: 100%; border-radius: .35rem; margin-bottom: .35rem; display: block; }
.wa-media-placeholder { background: #d9dee3; color: #5b6770; text-align: center; padding: 1.6rem .5rem; }
.wa-body { white-space: pre-wrap; word-break: break-word; font-size: .92rem; }
.wa-footer { color: #8696a0; font-size: .75rem; margin-top: .3rem; word-break: break-word; }
.wa-button { background: #fff; color: #027eb5; text-align: center; border-radius: .5rem; padding: .4rem; margin-top: .25rem; max-width: 340px; box-shadow: 0 1px 1px rgba(0,0,0,.15); font-size: .9rem; }

/* Campaign wizard */
.wizard-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: 0 0 1rem; }
.wizard-steps li a { display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 2rem; background: #e9ecef; color: #6b7280; text-decoration: none; font-size: .85rem; }
.wizard-steps .num { display: inline-flex; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #cbd5e1; color: #fff; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; }
.wizard-steps li.done a { background: #d1fae5; color: #065f46; } .wizard-steps li.done .num { background: #10b981; }
.wizard-steps li.current a { background: var(--wa-green); color: #fff; } .wizard-steps li.current .num { background: #fff; color: var(--wa-green); }
.tpl-choice { cursor: pointer; } .tpl-choice:hover { box-shadow: 0 0 0 2px rgba(18,140,126,.35); }
@media (max-width: 575.98px) { .wizard-steps .lbl { display: none; } .wizard-steps li.current .lbl { display: inline; } }

/* Inbox */
.inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr) 280px; gap: 1rem; height: calc(100vh - 130px); min-height: 520px; }
.inbox > .card { overflow: hidden; display: flex; flex-direction: column; }
.inbox-list-scroll { overflow-y: auto; flex: 1 1 auto; }
.conv-item.active { background: var(--wa-green); border-color: var(--wa-green); color: #fff; }
.conv-item.active .text-muted { color: rgba(255,255,255,.8) !important; }
.inbox-thread { flex: 1 1 auto; overflow-y: auto; padding: 1rem; background: #e5ddd5; }
.msg-row { display: flex; margin-bottom: .4rem; }
.msg-row.in { justify-content: flex-start; } .msg-row.out { justify-content: flex-end; }
.msg-bubble { max-width: 75%; padding: .4rem .6rem; border-radius: .5rem; box-shadow: 0 1px 1px rgba(0,0,0,.15); word-break: break-word; }
.msg-row.in .msg-bubble { background: #fff; } .msg-row.out .msg-bubble { background: #d9fdd3; } .msg-bubble.auto { background: #eef2ff; }
.msg-text { white-space: pre-wrap; } .msg-note { color: #6b7280; font-style: italic; font-size: .85rem; }
.msg-sender { font-size: .72rem; color: #6b7280; font-weight: 600; }
.msg-meta { display: flex; justify-content: flex-end; gap: .35rem; font-size: .7rem; color: #6b7280; margin-top: .15rem; }
.msg-tick.tick-read { color: #0d6efd; } .msg-tick.tick-failed { color: #dc3545; font-weight: 700; }
.msg-error { color: #dc3545; font-size: .78rem; }
.msg-media { max-width: 260px; max-height: 260px; border-radius: .35rem; display: block; margin-bottom: .25rem; }
.msg-file { display: inline-block; margin-bottom: .25rem; }
.inbox-side { overflow-y: auto; }
@media (max-width: 1199.98px) { .inbox { grid-template-columns: 280px minmax(0, 1fr); } .inbox-side { display: none; } }
@media (max-width: 767.98px) { .inbox { grid-template-columns: 1fr; height: auto; } .inbox-list-scroll { max-height: 40vh; } .inbox-thread { min-height: 50vh; max-height: 60vh; } }