/* whatsapp.mostafaelwan.com — Product App shell. Same brand DNA as mostafaelwan.com,
   WhatsApp green kept strictly as a small accent (connection status, WA icon). */
:root {
    --brand-primary: #1E90FF;
    --brand-secondary: #40E0D0;
    --brand-gradient: linear-gradient(135deg, #40E0D0 0%, #1E90FF 100%);
    --wa-accent: #25D366;
    --wa-accent-dark: #128C7E;
    --surface: #ffffff;
    --surface-soft: #f5f8fb;
    --sidebar-bg: #ffffff;
    --text-primary: #1a2733;
    --text-muted: #64748b;
    --border: #e6ebf0;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-card: 0 4px 18px rgba(15,23,42,.06);

    /* Elevation system — real depth, not flat shadows. Each level stacks a soft
       ambient shadow with a tighter contact shadow, like a physical layer lifted
       off the surface below it. Used for cards, icon badges, and floating panels. */
    --elev-0: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(15,23,42,.04);
    --elev-1: 0 1px 2px rgba(15,23,42,.04), 0 6px 14px rgba(15,23,42,.06);
    --elev-2: 0 2px 4px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.09);
    --elev-3: 0 4px 8px rgba(15,23,42,.06), 0 20px 44px rgba(15,23,42,.13);
    --elev-brand: 0 8px 20px rgba(30,144,255,.22), 0 2px 6px rgba(30,144,255,.15);
}

body { background: var(--surface-soft); color: var(--text-primary); font-family: 'Cairo', sans-serif; }

/* App shell */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    width: 250px; background: var(--sidebar-bg); border-left: 1px solid var(--border);
    padding: 1.25rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0;
}
.app-brand { display: flex; align-items: center; gap: .6rem; padding: 0 1.25rem 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.app-brand .logo-badge { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem; }
.app-nav-label { font-size: .7rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; padding: 1rem 1.25rem .4rem; }
.app-nav-link {
    display: flex; align-items: center; gap: .65rem; padding: .6rem 1.25rem; color: var(--text-primary);
    text-decoration: none; font-size: .92rem; border-right: 3px solid transparent; transition: background .15s ease;
}
.app-nav-link:hover { background: var(--surface-soft); color: var(--text-primary); }
.app-nav-link.active { background: rgba(30,144,255,.08); border-right-color: var(--brand-primary); color: var(--brand-primary); font-weight: 700; }
.app-nav-link.disabled { opacity: .45; pointer-events: none; }
.app-nav-link .badge-soon { margin-right: auto; font-size: .62rem; background: #eef2f6; color: var(--text-muted); padding: .15rem .5rem; border-radius: 999px; }
.app-main { flex: 1; padding: 1.75rem; min-width: 0; }

/* Mobile drawer */
.app-sidebar-toggle { display: none; }
@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; right: 0; top: 0; z-index: 1050; transform: translateX(100%); transition: transform .2s ease; box-shadow: -10px 0 30px rgba(0,0,0,.15); }
    .app-sidebar.open { transform: translateX(0); }
    .app-sidebar-toggle { display: inline-flex; }
    .app-shell-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1040; }
    .app-shell-backdrop.open { display: block; }
    .app-main { padding: 1.1rem; }
}

/* Cards / stats */
.app-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.app-stat { padding: 1.25rem; }
.app-stat .stat-label { color: var(--text-muted); font-size: .8rem; }
.app-stat .stat-value { font-size: 1.75rem; font-weight: 800; }

/* Workspace header bar */
.app-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.app-plan-badge { background: rgba(30,144,255,.1); color: var(--brand-primary); font-weight: 700; font-size: .75rem; padding: .35rem .8rem; border-radius: 999px; }

/* Status badges (shared vocabulary with the marketing site's whatsapp-product.css) */
.wa-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; }
.wa-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wa-status-connected, .wa-status-active { background: rgba(37,211,102,.12); color: #128C7E; }
.wa-status-disconnected, .wa-status-failed { background: rgba(239,68,68,.1); color: #dc2626; }
.wa-status-pending, .wa-status-draft { background: rgba(148,163,184,.15); color: #64748b; }
.wa-status-suspended { background: rgba(245,158,11,.12); color: #b45309; }

/* Onboarding / empty states */
.app-onboarding { background: var(--brand-gradient); border-radius: var(--radius); padding: 2rem; color: #fff; }
.app-empty { text-align: center; padding: 3rem 1.5rem; }
.app-empty i { font-size: 2.5rem; color: var(--text-muted); opacity: .5; margin-bottom: 1rem; }
.app-empty h6 { font-weight: 700; }
.app-empty p { color: var(--text-muted); max-width: 40ch; margin: 0 auto 1rem; }

.btn-wa-primary { background: var(--brand-gradient); border: none; color: #fff; border-radius: 10px; font-weight: 700; }
.btn-wa-primary:hover { color: #fff; opacity: .92; }
.btn-wa-accent { background: var(--wa-accent); border: none; color: #fff; border-radius: 10px; font-weight: 700; }
.btn-wa-accent:hover { background: var(--wa-accent-dark); color: #fff; }

/* ============ Elevation / 3D component system ============
   Shared across the built-out product pages (inbox, templates, campaigns,
   contacts, OTP, settings). Depth communicates hierarchy: raised = actionable,
   flat = informational, floating = the thing you're focused on right now. */

.elev-1 { box-shadow: var(--elev-1); }
.elev-2 { box-shadow: var(--elev-2); }
.elev-3 { box-shadow: var(--elev-3); }

/* Raised panel — the base building block for all new pages */
.panel {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    border: 1px solid rgba(15,23,42,.03);
    transition: box-shadow .2s ease, transform .2s ease;
}
.panel-hover:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }
.panel-flat { box-shadow: var(--elev-0); border: 1px solid var(--border); }

/* 3D icon badge — layered gradient + inset highlight + drop shadow so the icon
   reads as a small lifted tile, not a flat colored circle */
.icon-tile {
    width: 44px; height: 44px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; color: #fff; flex-shrink: 0;
    background: var(--brand-gradient);
    box-shadow: var(--elev-brand), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.12);
}
.icon-tile.lg { width: 56px; height: 56px; border-radius: 16px; font-size: 1.3rem; }
.icon-tile.sm { width: 34px; height: 34px; border-radius: 10px; font-size: .85rem; }
.icon-tile.wa { background: linear-gradient(145deg, var(--wa-accent) 0%, var(--wa-accent-dark) 100%); box-shadow: 0 8px 20px rgba(37,211,102,.25), 0 2px 6px rgba(37,211,102,.18), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.12); }
.icon-tile.muted { background: linear-gradient(145deg, #eef2f6 0%, #dfe6ee 100%); color: var(--text-muted); box-shadow: var(--elev-1), inset 0 1px 1px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.05); }
.icon-tile.warn { background: linear-gradient(145deg, #ffb648 0%, #f0ad4e 100%); box-shadow: 0 8px 20px rgba(240,173,78,.25), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.1); }
.icon-tile.danger { background: linear-gradient(145deg, #f36a6a 0%, #dc3545 100%); box-shadow: 0 8px 20px rgba(220,53,69,.22), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.1); }

/* Floating stat/summary card — the elevated version of .app-stat */
.stat-tile {
    background: var(--surface); border-radius: var(--radius); padding: 1.1rem 1.25rem;
    box-shadow: var(--elev-1); border: 1px solid rgba(15,23,42,.03);
    display: flex; align-items: center; gap: .9rem;
    transition: box-shadow .2s ease, transform .2s ease;
}
.stat-tile:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }
.stat-tile .stat-label { color: var(--text-muted); font-size: .78rem; font-weight: 600; }
.stat-tile .stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }

/* List row that lifts slightly on hover — used for conversations/contacts/templates rows */
.raised-row {
    background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.raised-row:hover { box-shadow: var(--elev-2); transform: translateY(-1px); border-color: transparent; }
.raised-row.active { box-shadow: var(--elev-2); border-color: transparent; background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); }

/* Floating action surface — chat composer, modals-in-page */
.float-surface { background: var(--surface); border-radius: var(--radius); box-shadow: var(--elev-3); border: 1px solid rgba(15,23,42,.04); }

/* Segmented pill tabs with a lifted active state */
.tile-tabs { display: inline-flex; gap: .3rem; background: var(--surface-soft); padding: .3rem; border-radius: 999px; box-shadow: var(--elev-0); }
.tile-tabs a { padding: .45rem 1.1rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--text-muted); text-decoration: none; transition: all .15s ease; }
.tile-tabs a.active { background: var(--surface); color: var(--brand-primary); box-shadow: var(--elev-1); }

@media (prefers-reduced-motion: reduce) {
    .app-sidebar, .app-nav-link, .panel, .panel-hover, .stat-tile, .raised-row { transition: none; }
}