:root {
    --bg: #0b141a;
    --panel: #111b21;
    --panel2: #202c33;
    --text: #e9edef;
    --muted: #8696a0;
    --green: #00a884;
    --border: #2a3942
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #0c1317;
    color: var(--text);
    font-family: Segoe UI,Arial,sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

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

.sidebar {
    width: 76px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    padding: 18px
}
.menu-toggle { display:grid; place-items:center; width:38px; height:38px; margin-right:12px; border:0; border-radius:8px; background:transparent; color:#e9edef; font-size:1.25rem; }
body:not(.chat-page) .menu-toggle { display:grid !important; }
.menu-toggle:hover { background:var(--panel2); }
/* The admin menu opens only when its button is selected. */
body:not(.menu-open) .sidebar { width:0; padding:0; overflow:hidden; border:0; }
body:not(.menu-open) .main { min-width:0; }

.brand {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px
}

    .brand span {
        color: var(--green)
    }

.nav a {
    display: grid;
    place-items: center;
    padding: 11px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    color: #d5dfe4
}
.nav a i { font-size: 1.2rem; }
.brand { text-align: center; font-size: 16px; }

    .nav a:hover {
        background: var(--panel2)
    }

.main {
    flex: 1
}

.topbar {
    height: 64px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--panel);
    border-bottom: 1px solid var(--border)
}
.topbar-left { display:flex; align-items:center; min-width:0; }
.topbar-left .select { flex:0 1 250px; }
.topbar-user { display:flex; align-items:center; gap:8px; }
.user-profile { display:flex; align-items:center; gap:8px; min-width:0; }
.user-profile-copy { display:flex; flex-direction:column; min-width:0; }
.user-profile-copy strong { color:#dce5e9; font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-profile-copy small { color:#8696a0; font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#315b80; color:#fff; font-size:.72rem; font-weight:700; }

/* SweetAlert dialogs follow the application dark theme. */
.swal2-popup { background:#202c33 !important; color:#e9edef !important; }
.swal2-title, .swal2-html-container { color:#e9edef !important; }
.swal2-styled.swal2-confirm { background:#00a884 !important; }
.swal2-styled.swal2-deny { background:#d84a4a !important; }
.swal2-styled.swal2-cancel { background:#37474f !important; }
.swal2-input { background:#0b141a !important; color:#e9edef !important; border-color:#2a3942 !important; }

.install-app-button { border:0; border-radius:7px; padding:8px 12px; margin-right:10px; background:#00a884; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.2); font-weight:700; white-space:nowrap; }
.install-app-button:hover { background:#008f70; }
.install-app-prompt{position:fixed;z-index:2000;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;max-width:calc(100vw - 24px);padding:8px 8px 8px 12px;border:1px solid #356258;border-radius:9px;background:#202c33;color:#e9edef;box-shadow:0 8px 24px rgba(0,0,0,.38);font-size:.78rem}.install-app-prompt[hidden]{display:none!important}.install-app-prompt>i{color:#00c895;font-size:1rem}.install-app-prompt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.install-app-prompt-action{border:0;border-radius:6px;padding:6px 9px;background:#00a884;color:#fff;font-size:.72rem;font-weight:700;white-space:nowrap}.install-app-prompt-action:hover{background:#008f70}.install-app-prompt-close{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:#aebac1;font-size:1.25rem;line-height:1}.install-app-prompt-close:hover{background:#37474f;color:#fff}
.location-map { width:100%; height:420px; border:0; border-radius:9px; background:#202c33; }
.contact-compact{display:flex;align-items:center;gap:10px;min-width:240px}.contact-compact-copy{min-width:0}.contact-compact-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-compact-details{height:15px;overflow:hidden;white-space:nowrap}.contact-compact small{color:#8696a0}.contact-compact .chat-contact-badge{display:inline-block;max-width:78px;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;margin-right:3px;padding:0 4px;border-radius:5px;background:#263b3c;color:#a9c6d0;font-size:.58rem;font-weight:600;line-height:13px}.contact-compact .chat-designation-badge{background:#3b3153;color:#d9c9ff}.contact-compact .chat-company-group-badge{background:#263b3c;color:#b7d1db}.contact-compact .chat-company-group-badge em{color:#00c895;font-style:normal;font-weight:800}.contact-action{display:inline-grid;place-items:center;width:30px;height:30px;color:#aebac1;text-decoration:none}.contact-action:hover{color:#00c895}.contact-action.danger:hover{color:#ff8d8d}

.content {
    padding: 24px
}

.mobile-primary-nav { display:none; }

/* Chat uses the business selector as a compact fixed dock in its own left panel. */
@media (min-width: 901px) {
    body.chat-page .topbar { position:fixed; z-index:20; left:0; bottom:0; width:0; height:0; padding:0; background:transparent; border:0; }
    body.chat-page.menu-open .topbar { left:76px; }
    body.chat-page .topbar-left { display:none; position:fixed; z-index:25; left:8px; bottom:58px; width:260px; min-width:0; padding:8px; border:1px solid #37474f; border-radius:8px; background:#202c33; box-shadow:0 8px 22px rgba(0,0,0,.38); }
    body.chat-page.menu-open .topbar-left { left:84px; }
    body.chat-page .topbar.user-menu-open .topbar-left { display:flex; align-items:center; gap:7px; }
    body.chat-page .topbar .menu-toggle {
        position:fixed;
        z-index:21;
        top:4px;
        left:8px;
        width:34px;
        height:34px;
        margin:0;
        background:#111b21;
    }
    body.chat-page.menu-open .topbar .menu-toggle { left:84px; }
    body.chat-page .topbar .install-app-button { display:none !important; }
    body.chat-page .topbar .select { display:none !important; }
    body.chat-page .business-info { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e9edef; font-size:.76rem; font-weight:650; }
    body.chat-page .topbar-user { position:fixed; z-index:20; left:0; bottom:0; width:350px; height:52px; display:flex; justify-content:flex-start; gap:8px; padding:7px 12px; background:#111b21; border-top:1px solid #26353d; }
    body.chat-page.menu-open .topbar-user { left:76px; }
    body.chat-page .user-profile { display:flex; flex-direction:row; align-items:center; gap:7px; min-width:0; text-align:left; }
    body.chat-page .user-avatar { width:30px; height:30px; flex:0 0 30px; font-size:.62rem; }
    body.chat-page .user-profile-copy { min-width:0; max-width:245px; }
    body.chat-page .user-profile-copy strong { display:block; color:#dce5e9; font-size:.72rem; line-height:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    body.chat-page .user-profile-copy small { display:block; color:#8696a0; font-size:.56rem; line-height:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    body.chat-page .edit-user-link { color:#00c895; font-size:.66rem; white-space:nowrap; text-decoration:none; }
    body.chat-page .edit-user-link:hover { color:#72f0c3; text-decoration:underline; }
    body.chat-page .user-info-toggle { display:grid; place-items:center; width:27px; height:27px; margin-left:auto; padding:0; border:0; border-radius:50%; background:transparent; color:#aebac1; font-size:.8rem; }
    body.chat-page .user-info-toggle:hover { background:#26353d; color:#d9fff1; }
    body.chat-page .topbar.user-menu-open .user-info-toggle i { transform:rotate(180deg); }
    body.chat-page .logout-link { display:none; }
}

@media (max-width: 900px) {
    body.chat-page .topbar { display:none; }
}

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px
}

.grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

.stat {
    font-size: 30px;
    font-weight: 700
}

.muted {
    color: var(--muted)
}

.btn {
    background: var(--green);
    border: 0;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer
}

    .btn.secondary {
        background: var(--panel2)
    }

.input, .select {
    width: 100%;
    padding: 10px 12px;
    background: #0b141a;
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 8px
}

table {
    width: 100%;
    border-collapse: collapse
}

th, td {
    padding: 11px;
    border-bottom: 1px solid var(--border);
    text-align: left
}

th {
    color: #9fb0ba;
    font-weight: 600
}

.toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 14px
}

.chat {
    height: 62vh;
    overflow: auto;
    background: #0b141a;
    border-radius: 10px;
    padding: 16px
}

.bubble {
    max-width: 70%;
    padding: 9px 12px;
    border-radius: 9px;
    margin: 8px 0;
    background: var(--panel2)
}

    .bubble.out {
        margin-left: auto;
        background: #005c4b
    }

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center
}

.login-card {
    width: 380px;
    background: var(--panel);
    padding: 28px;
    border-radius: 16px;
    border: 1px solid var(--border)
}

    .login-card h1 {
        margin-top: 0
    }

.field {
    margin-bottom: 14px
}

@media(max-width:900px) {
    .sidebar {
        width: 76px
    }

        .sidebar .label, .brand .label {
            display: none
        }

    .grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:600px) {
    .grid {
        grid-template-columns: 1fr
    }

    .content {
        padding: 12px
    }
}

/* WhatsApp-inspired mobile inbox */
.wa-inbox { display:none; }
@media (max-width: 600px) {
    body { background:#0b141a; color:#e9edef; }
    .app, .main { display:block; min-height:100vh; }
    .sidebar, .topbar { display:none !important; }
    .content { padding:0; }
    .mobile-primary-nav { position:fixed; z-index:100; bottom:0; left:0; right:0; height:72px; display:flex; align-items:center; justify-content:space-around; padding:6px 8px max(6px, env(safe-area-inset-bottom)); background:rgba(17,27,33,.98); border-top:1px solid #2a3942; }
    .mobile-primary-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:58px; color:#d5dfe4; font-size:10px; font-weight:650; text-decoration:none; }
    .mobile-primary-nav a:active { color:#00c895; }
    .mobile-primary-nav i { font-size:22px; line-height:22px; }
    body:not(.chat-page) .content { padding-bottom:84px; }
    body.chat-page .mobile-primary-nav { display:none; }
    .wa-inbox { display:block; min-height:100vh; padding-bottom:82px; background:#111b21; }
    .wa-inbox-header { padding:22px 18px 0; position:sticky; top:0; z-index:5; background:rgba(17,27,33,.96); backdrop-filter:blur(10px); }
    .wa-actions { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }
    .wa-header-right { display:flex; gap:15px; align-items:center; }
    .wa-icon-button, .wa-new-chat { border:0; background:#202c33; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; color:#e9edef; font-size:25px; text-decoration:none; }
    .wa-new-chat { background:#20c675; color:white; font-size:28px; }
    .wa-inbox h1 { color:#fff; font-size:39px; line-height:1; margin:0 0 20px; font-weight:750; letter-spacing:-1.2px; }
    .wa-search { display:flex; gap:12px; align-items:center; height:56px; padding:0 17px; border-radius:28px; background:#202c33; color:#aebac1; font-size:21px; }
    .wa-search input { border:0; outline:0; background:transparent; min-width:0; width:100%; font:inherit; color:#e9edef; }
    .wa-search input::placeholder { color:#aebac1; opacity:1; }
    .wa-filter-row { display:flex; gap:9px; overflow-x:auto; padding:13px 0 10px; scrollbar-width:none; }
    .wa-filter, .wa-status-filter { flex:0 0 auto; border:1px solid #37474f; color:#aebac1; background:#111b21; border-radius:21px; height:42px; padding:0 16px; font-size:17px; font-weight:600; }
    .wa-filter.active { background:#103e35; border-color:#00a884; color:#d9fff1; }
    .wa-status-filter { min-width:94px; }
    .wa-chat-list { padding:6px 18px 0; }
    .wa-archive-row, .wa-chat-row { color:#e9edef; display:flex; align-items:center; text-decoration:none; }
    .wa-archive-row { gap:21px; height:84px; padding:0 10px; font-size:25px; font-weight:650; }
    .wa-archive-icon { font-size:21px; color:#aebac1; }
    .wa-chat-row { position:relative; min-height:88px; gap:15px; padding:10px 0; }
    .wa-chat-row + .wa-chat-row:before { content:""; position:absolute; top:0; left:80px; right:0; border-top:1px solid #2a3942; }
    .wa-avatar { flex:0 0 68px; width:68px; height:68px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#e6dcff,#b9a5ee); color:#fff; font-size:22px; font-weight:700; }
    .wa-avatar img, .contact-grid-avatar img { width:100%; height:100%; object-fit:cover; }
    .contact-grid-avatar { display:grid; place-items:center; width:38px; height:38px; overflow:hidden; border-radius:50%; background:#315b80; color:#fff; font-weight:700; font-size:12px; }
    .wa-chat-copy { min-width:0; flex:1; display:block; }
    .wa-chat-top { display:flex; gap:10px; align-items:baseline; justify-content:space-between; }
    .wa-chat-top strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px; font-weight:700; }
    .wa-chat-top time { flex:0 0 auto; color:#aebac1; font-size:16px; }
    .wa-chat-preview { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#aebac1; margin-top:5px; font-size:17px; }
    .wa-contact-details { color:#8ba8b6; font-size:12px; font-weight:600; }
    .wa-contact-details:after { content:" · "; color:#667b86; }
    .wa-preview-message { font-size:15px; }
    .wa-chat-preview i { color:#aebac1; }
    .wa-unread { position:absolute; right:1px; bottom:10px; display:grid; place-items:center; min-width:25px; height:25px; padding:0 6px; border-radius:13px; background:#20bd72; color:#fff; font-size:14px; }
    .has-unread .wa-chat-top time { color:#19aa62; }
    .wa-empty { padding:44px 0; text-align:center; color:#777; }
    .wa-bottom-nav { position:fixed; z-index:10; bottom:0; left:0; right:0; height:79px; display:flex; justify-content:space-around; background:rgba(17,27,33,.97); border-top:1px solid #2a3942; padding:8px 8px env(safe-area-inset-bottom); }
    .wa-bottom-nav a { width:20%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#e9edef; font-size:11px; font-weight:600; text-decoration:none; }
    .wa-bottom-nav i { font-size:24px; line-height:24px; }
    .wa-bottom-nav a.active i { background:#d8f8d0; border-radius:16px; min-width:52px; text-align:center; padding:3px 0; }
}
/* Form Labels */
.form-label{
    color: #e9edef!important;
    font-weight: 600;
    margin-bottom: .35rem;
}
/* Card Titles */
.card-title{
    color: #ffffff!important;
    font-weight: 600;
}
/* Form Controls */
.form-control,
.form-select{
    background:#0b141a;
    border: 1px solid #2a3942;
    color: #ffffff;
}
.form-control:focus,
.form-select:focus{
    background:#0b141a;
    color: #ffffff;
    border-color:#00a884;
    box-shadow: 0 0 0 .25rem rgba(0, 168, 132, .25);
}
.form-control::placeholder{
    color:#8c98a4;
}
/* Checkbox labels */
.form-check-label{
    color: #e9edef;
} 
body {
    background: #0b141a;
}

.card {
    background: #202c33;
    color: #e9edef;
    border: 1px solid #2a3942;
}

h1, h2, h3, h4 {
    color: #ffffff;
}

p, li {
    color: #d1d7db;
    line-height: 1.8;
}

.text-muted {
    color: #8696a0 !important;
}

hr {
    border-color: #2a3942;
}
/* ==========================================================
   ASP.NET GridView - Dark Theme
========================================================== */

.table,
.table table {
    width: 100%;
    border-collapse: collapse;
    background: transparent !important;
    color: #e9edef !important;
    margin-bottom: 0;
}

    /* Header */

    .table thead,
    .table thead tr,
    .table thead th,
    .table th {
        background: #1f2937 !important;
        color: #ffffff !important;
        border: 1px solid #374151 !important;
        padding: 10px 12px;
        font-weight: 600;
    }

    /* Body */

    .table tbody,
    .table tbody tr {
        background: transparent !important;
    }

    .table td {
        background: #2b3440 !important;
        color: #ffffff !important;
        border: 1px solid #374151 !important;
        padding: 10px 12px;
        vertical-align: middle;
    }

    /* Alternate rows */

    .table tr:nth-child(even) td {
        background: #313b48 !important;
    }

    /* Hover */

    .table tr:hover td {
        background: #435366 !important;
    }

    /* Links */

    .table a {
        color: #6cb6ff !important;
        text-decoration: none;
    }

        .table a:hover {
            color: #9bd2ff !important;
            text-decoration: underline;
        }

    /* Checkboxes */

    .table input[type=checkbox] {
        transform: scale(1.15);
        cursor: pointer;
    }

    /* ASP.NET GridView Pager */

    .table tfoot td {
        background: #1f2937 !important;
        color: #ffffff !important;
    }

/* Remove default ASP.NET white styles */

table {
    background: transparent;
}

    table tr {
        background: transparent;
    }

    table td {
        color: #ffffff;
    }

    table th {
        color: #ffffff;
    }

/* GridView */

.GridView {
    background: transparent;
}