/* ============================================================
   WapDost Mobile UI — mobile.css
   ONLY loads on mobile (max-width: 767px)
   Desktop pe zero impact — existing layout untouched
   ============================================================ */

/* ---- Variables ---- */
:root {
    --wa-green:      #075e54;
    --wa-green-lt:   #128c7e;
    --wa-accent:     #25d366;
    --wa-topbar-h:   54px;
    --wa-bottomnav-h:56px;
}

/* ---- WA Topbar ---- */
#wa-topbar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--wa-topbar-h);
    background: #ffffff !important;
    z-index: 999;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
#wa-topbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 32px;
    overflow: hidden;
}
#wa-topbar-logo img {
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}
#wa-topbar-logo span {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}
#wa-topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}
#wa-unread-pill {
    display: none;
    background: var(--wa-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
    line-height: 1.6;
}
#wa-menu-btn {
    width: 36px; height: 36px;
    border: none; background: none;
    color: #333;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
#wa-menu-btn:active { background: rgba(255,255,255,.15); }

/* ---- Dropdown ---- */
#wa-menu {
    display: none;
    position: fixed;
    top: var(--wa-topbar-h);
    right: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.2);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}
.wa-dd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    font-size: 14px;
    color: #333 !important;
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    border-bottom: 0.5px solid #f5f5f5;
    line-height: 1;
}
.wa-dd-item:last-child { border-bottom: none; }
.wa-dd-item:active { background: #f5f5f5; }
.wa-dd-danger { color: #dc2626; }
.wa-dd-sep { height: 5px; background: #f5f5f5; }

/* ---- Bottom Nav ---- */
#wa-bottomnav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--wa-bottomnav-h);
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    border-top: 1px solid #e0e0e0;
    z-index: 999;
    flex-direction: row;
    align-items: stretch;
    box-shadow: 0 -1px 6px rgba(0,0,0,.07);
}
.wa-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #aab3bb;
    gap: 3px;
    padding: 6px 4px 4px;
    border-top: 2.5px solid transparent;
    -webkit-tap-highlight-color: transparent;
}
.wa-tab svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #aab3bb !important;
    fill: none !important;
    stroke-width: 2 !important;
    display: block !important;
}
.wa-tab span {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #aab3bb !important;
    font-family: 'DM Sans', sans-serif !important;
    display: block !important;
    line-height: 1 !important;
}
.wa-tab.wa-active {
    border-top: 2.5px solid #075e54 !important;
    color: #075e54 !important;
}
.wa-tab.wa-active svg  { stroke: #075e54 !important; }
.wa-tab.wa-active span { color: #075e54 !important; }

/* Hide WA chrome when chat is open (class added by JS) */
body.chat-open #wa-topbar    { display: none !important; }
body.chat-open #wa-bottomnav { display: none !important; }

/* ============================================================
   MOBILE ONLY: @media max-width 767px
   ============================================================ */
@media (max-width: 767px) {
    /* Show WA chrome */
    #wa-topbar    { display: flex !important; }
    #wa-bottomnav { display: flex !important; }

    /* Hide original topbar & sidebar */
    .topbar          { display: none !important; }
    .sidebar         { display: none !important; }
    .sidebar-overlay { display: none !important; }
    #hamburger       { display: none !important; }

    /* Push content: below topbar, above bottom nav */
    .main {
        margin-left: 0 !important;
        padding-top: var(--wa-topbar-h) !important;
        padding-bottom: calc(var(--wa-bottomnav-h) + env(safe-area-inset-bottom)) !important;
    }

    /* Toast above bottom nav */
    #toast-container {
        bottom: calc(var(--wa-bottomnav-h) + 8px + env(safe-area-inset-bottom)) !important;
        left: 12px;
        right: 12px;
    }

    /* Page body */
    .page-body { padding: 14px 12px !important; }

    /* Page header inline */
    .page-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    .page-title { font-size: 16px !important; }
    .page-desc  { display: none !important; }

    /* Modal - full screen card */
    .modal-overlay { align-items: center !important; padding: 10px !important; }

    /* Misc */
    .stats-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
    .grid-2     { grid-template-columns: 1fr !important; }
    .form-row   { grid-template-columns: 1fr !important; gap: 0 !important; }
    .auth-card  { padding: 24px 20px !important; margin: 16px !important; }
}