:root {
    --container-width: 1320px;
    --menu-item-gap: 20px;
    --menu-item-gap-mobile: 5px;
    --color-page-bg: #f8f9fa;
    --color-surface: #ffffff;
    --color-heading: #333333;
    --color-text: #4a4a4a;
    --color-border: #cccccc;
    --color-primary: #366699;
    --color-primary-hover: #0056b3;
    --color-accent: #ffd621;
    --radius-sm: 5px;
    --radius-md: 10px;
    --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Always reserve the vertical scrollbar's space so the centered layout doesn't
   shift ("jump") when navigating between short pages and long ones (e.g. the
   transactions list, which scrolls). */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--color-page-bg);
    margin: 0;
    /* App shell: header / content / footer stacked, footer pinned to bottom.
       Shared by all pages (was duplicated per-page with height:100vh, which
       clipped any content taller than the viewport). */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

h1 {
    font-size: 24px;
    color: var(--color-heading);
    margin-bottom: 15px;
}

/* Menu */


.menu-bar {
    width: 100%;
    background-color: rgb(36, 59, 85);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Top navigation ===== */
.topnav {
    width: 100%;
    max-width: var(--container-width);
    box-sizing: border-box;
    height: 64px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.topnav a { text-decoration: none; }
.topnav-brand { display: flex; align-items: center; gap: 11px; margin-right: 14px; color: #fff; }
.topnav-logo { width: 36px; height: 36px; border-radius: 9px; }
.topnav-wordmark { font-size: 17px; font-weight: 700; letter-spacing: .2px; color: #fff; }

.topnav-tabs { display: flex; align-items: stretch; height: 64px; gap: 2px; }
.topnav-tab {
    display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 15px;
    color: rgba(255, 255, 255, .74); font-size: .9rem; font-weight: 600;
    border-bottom: 3px solid transparent;
}
.topnav-tab svg { width: 17px; height: 17px; }
.topnav-tab:hover { color: #fff; }
.topnav-tab.active { color: #fff; border-bottom-color: var(--color-accent); }

/* Alert state: no notification channel configured -> red bell so the user sets one.
   Only the bell turns red; the "Notifications" label keeps its normal color. */
.topnav-bell { position: relative; display: inline-flex; align-items: center; }
.topnav-tab.notif-alert svg { stroke: #ff5a5f; animation: cj-bell-shake 2.4s ease-in-out infinite; transform-origin: 50% 3px; }
.topnav-bell-dot {
    position: absolute; top: -3px; right: -3px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #ff3b30; box-shadow: 0 0 0 2px rgb(36, 59, 85);
    animation: cj-bell-pulse 1.6s ease-in-out infinite;
}
@keyframes cj-bell-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes cj-bell-shake {
    0%, 90%, 100% { transform: rotate(0); }
    93% { transform: rotate(-12deg); }
    96% { transform: rotate(10deg); }
    98% { transform: rotate(-5deg); }
}

.topnav-spacer { flex: 1; }
.topnav-right { display: flex; align-items: center; gap: 12px; }

.topnav-new {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--color-accent); color: #3a2e00;
    border-radius: 8px; padding: 8px 14px; font-weight: 700; font-size: .85rem;
}
.topnav-new svg { width: 16px; height: 16px; }
.topnav-new:hover { filter: brightness(.95); }

.topnav-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255, 255, 255, .12); color: #fff;
    padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600;
}
.topnav-pill.admin { background: rgba(255, 255, 255, .2); }
.topnav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.topnav-dot.main { background: #4ade80; }

/* network switch pill (top nav) */
.topnav-net-form { margin: 0; display: inline-flex; }
button.topnav-pill { border: none; cursor: pointer; font: inherit; line-height: 1; }
.topnav-pill.net.main:hover { background: rgba(255, 255, 255, .22); }
.topnav-pill.net.test { background: #dc2626; }                 /* TestNet = red */
.topnav-pill.net.test:hover { background: #b91c1c; }
.topnav-pill.net.test .topnav-dot { background: #fff; }

/* one-shot TestNet warning toast */
.cj-toast {
    position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 10000;
    background: #dc2626; color: #fff; padding: 10px 18px; border-radius: 999px;
    font-size: .85rem; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    transition: opacity .5s ease;
}

.topnav-acct {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(255, 255, 255, .1); padding: 5px 12px 5px 6px; border-radius: 999px; color: #fff;
}
.topnav-acct:hover { background: rgba(255, 255, 255, .18); }
.topnav-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #5b8fc7, #34608f);
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.topnav-uid { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; opacity: .95; }

.topnav-logout, .topnav-login, .topnav-getstarted {
    color: #fff; font-size: .85rem; font-weight: 600;
    padding: 7px 13px; border-radius: 8px; background: rgba(255, 255, 255, .12);
}
.topnav-logout:hover, .topnav-login:hover, .topnav-getstarted:hover { background: rgba(255, 255, 255, .22); }
.topnav-getstarted { background: var(--color-accent); color: #3a2e00; }

@media (max-width: 768px) {
    .topnav { flex-wrap: wrap; height: auto; padding: 8px 14px; gap: 8px; }
    .topnav-tabs { height: auto; order: 3; width: 100%; }
    .topnav-tab { height: 44px; }
    .topnav-wordmark, .topnav-uid, .topnav-new span { display: none; }
    .topnav-new { padding: 8px; }
}
.content-container {
    width: 100%;
    max-width: var(--container-width);
    box-sizing: border-box;
    padding: 0 20px;            /* same gutter as .menu-container so the
                                   header and page content share edges */
    margin: 20px auto 0;
}

/* Mobile menu */

/* New styles for mobile responsiveness */
@media (max-width: 768px) {
    .menu-container {
        display: block;
        /*flex-direction: column;*/
        height: auto;
        text-align: center;
        padding: 10px 0 10px 0;
    }
    .menu-bar .menu-items {
        display: block;
        /*flex-direction: column;*/
        gap: 10px;
        margin-left: 0;
        width: auto;
    }
    .menu-bar .menu-items div {
        display: inline-block;
        margin-top: 10px;
    }
    .menu-bar .menu-items a {
        width: auto;
        text-align: center;
    }
    .margin-left-auto {
        margin-left: 0;
        margin-top: 10px;
    }
    .margin-left-gap {
        margin-left: var(--menu-item-gap-mobile) !important;
    }

}

/* Mobile menu */

.vertically-center {
    margin-top: auto;
    margin-bottom: auto;
}

.account-link {
    border-bottom: 1px solid white;
    color: white;
}

.login-button-menu {
    background-color: #ffd621;
    color: black !important;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    padding: 8px 12px;
    border: 1px solid #4f86c0; /* Same border as copy-button */
}

.logout-button-menu {
    background-color: #e34039;
    color: white !important;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    padding: 8px 12px;
}

.login-button:hover {
    background-color: #e0a800;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-left-gap {
    margin-left: var(--menu-item-gap);
}

/* Menu end */


@media (max-width: 768px) {

    .mobile-hide {
        display: none;
    }

    .mobile-show {
        display: block;
        z-index: 5;
    }

}

.account-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.payment-status {
    font-size: 0.9rem;
    color: #777;
}
.payment-status span {
    font-weight: bold;
    color: #444;
}


.menu-section {
    margin-top: 2rem; /* Spacing between sections */
}


.menu-section h2 {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1.3px;
    font-weight: 100;
}


.menu-section ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}


.menu-section li {
    padding: 0.3rem 0 0.3rem 1rem;
}


.menu-section a {
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 1px;
    line-height: 1.1rem;
    text-decoration: none !important
}

.menu-section li.selected {
    background-color: #294d7325;
}

.menu-section a:hover {
    text-decoration: underline;
}

.sidebars-content {
    flex-grow: 1;
    /* Without this, the default min-width:auto lets a wide child (e.g. the
       transactions table) stretch this panel past its flex share, so pages
       end up with different content widths. min-width:0 keeps them equal. */
    min-width: 0;
}

/* Side menu end */

/* Toggle switch */

/* Container for the toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;   /* Adjust to taste */
    height: 24px; /* Adjust to taste */
    margin-bottom: -7px;    /* dirty fix */
}

/* Hide the real checkbox visually but keep it accessible */
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    position: absolute;
    pointer-events: none;
}

/* The slider "track" and "knob" */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4a6583; /* Off (track) color */
    transition: background-color 0.2s;
    border-radius: 999px;       /* Rounds the track edges */
}

/* The slider "knob" – use a pseudo-element for the circular handle */
.slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;  /* Slightly smaller than slider's height */
    height: 20px; /* to create some space around it */
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

/* When checkbox is checked, shift the knob to the right & update track color */
.toggle-switch input:checked + .slider {
    background-color: #ffd621; /* On (track) color */
}

.toggle-switch input:checked + .slider::before {
    transform: translateX(26px); /* Moves knob from left to right */
}

/* Optional: focus or hover styling to show it's interactive */
.toggle-switch input:focus + .slider,
.toggle-switch:hover .slider {
    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}


/* The switch end */

/* Common */

.display-flex {
    display: flex;
}

.surface-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.button-primary {
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: bold;
}

.button-primary:hover {
    background-color: var(--color-primary-hover);
}

.button-accent {
    background-color: var(--color-accent);
    color: black;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: bold;
}

.button-accent:hover {
    background-color: #e0a800;
}

/* Common end */

.error {
    color: red;
    font-size: 0.9em;
}


.warning-div{
    position : fixed;
    top : 20px;
    right : 20px;
    background-color : #f8d7da;
    color : #721c24;
    padding : 10px 20px;
    border : 1px solid #f5c6cb;
    border-radius : 5px;
    box-shadow : 0 2px 8px rgba(0,0,0,0.1);
    z-index : 1000;
    font-size : 12px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    max-width: 400px;
}

.warning-div-relative{
    position : absolute;
    top : 10px;
    left: 50%;
    transform: translateX(-50%);
    width : 200px;
    padding: 5px;
}

.success-div {
    background-color: #d4edda; /* Light green background */
    color: #155724;            /* Dark green text */
    border: 1px solid #c3e6cb; /* Green border */
}

/* sticky footer: in the flex-column body, margin-top:auto pins it to the viewport
   bottom on short pages and lets it flow after content on long ones */
footer {
    margin-top: auto;
    width: 100%;
}
.footer {
    text-align: center;
    padding: 22px 16px;
    border-top: 1px solid #e8edf3;
    color: #94a3b8;
    font-size: 0.8rem;
}
.footer p { margin: 0; }

.admin-badge,
.testnet-badge {
    background-color: red; /* Red background */
    color: white; /* White text */
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 12px;
    margin-right: 10px; /* Space between Admin badge and Account link */
}