body {
    margin: 0;
}

.container {
    display: grid;
    grid-template-columns: 1fr 5fr; /* Sidebar and main content */
    min-height: 100vh; /* Ensure full viewport height */
}

.sidebar {
    min-width: 300px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 2; /* keeps the open website list above the page beside it */
    height: 100vh; /* Full height of the viewport */
    display: flex;
    flex-direction: column;
    padding: 30px;
    padding-right: 50px;
}

.logo {
    margin-bottom: 2rem;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between links */
}

.sidebar-nav > .link,
.sidebar-nav > .logout-form {
    margin-left: 26px;
}

.sidebar-content {
    flex: 1; /* Allow this to grow and take available space */
    display: flex;
    flex-direction: column;
}

.manage-subscription {
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.sidebar-bottom {
    margin-top: auto; /* Pushes the sidebar-bottom to the bottom */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
}

/* F-04 made this a <main> so the dashboard has a landmark to jump to. That
   also opts it into `base.css`'s `main { margin-left: 140px; margin-right:
   140px }` — the MARKETING shell's gutters — which squeezed the whole
   dashboard from 1100px to 820px, centred it, and re-wrapped every metric
   tile. Measured in Chrome at 1280px before this line existed:
   `.metric-boxes` went x=90 w=1100 -> x=230 w=820, tiles 167px -> 120px.
   A class beats a type selector, so declaring the margins here is enough at
   every width (the 900px query sets `main { margin: 10px }` too). */
.main-content {
    position: relative;
    padding: 30px;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}

h2 {
    margin-top: 0;
}






/*Dropdown*/
.dropbtn {
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px; /* Space between text and arrow */
}

.dropbtn .website-link {
    color: inherit;
    text-decoration: underline;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dropbtn .website-link:hover {
    color: var(--color-text);
}

/* The page you are on is named, not linked: a link to the page itself only
   reloads it (owner, 2026-10-31). The other page keeps its link back. */
.dropbtn span.website-link,
.sidebar-current {
    text-decoration: none;
    color: var(--color-text);
    cursor: default;
}

.dropbtn svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 1px; /* Fine-tune vertical alignment */
    fill: var(--color-text-secondary);
}

/* The current site remains a link; only the arrow button opens the list. */
.website-switch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.website-switch-button:hover,
.website-switch-button[aria-expanded="true"] {
    background: var(--color-white-hover);
    color: var(--color-text);
}

.website-switch-button:focus-visible,
.mobile-menu-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

    /* The container <div> - needed to position the dropdown content */
.dropdown {
    font-size: 16px;
    font-weight: inherit;
    font-family: inherit;
    color: var(--color-text);
    position: relative;
    display: inline-block;
}
    
    /* Dropdown Content (Hidden by Default). Anchored on the LEFT and grows
       rightwards over the page: anchored on the right, a list of long domains
       grew leftwards past the window edge (left -79px at 1780px wide). */
.dropdown-content {
    display: block;
    margin-top: 5px;
    left: 0;
    position: absolute;
    min-width: 100%;
    width: max-content;
    max-width: 360px;
    z-index: 1;
    padding: 0;
}

.dropdown-content[hidden] {
    display: none;
}

    /* Links inside the dropdown */
.dropdown-content a {
    font-family: "Rubik", sans-serif;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    border-radius: inherit;
    overflow-wrap: anywhere;
}
    
/* Make keyboard focus as clear as hover inside the website list. */
.dropdown-content a:hover,
.dropdown-content a:focus-visible { background-color: var(--color-white-hover); }
    
/* Sidebar favicons */
.sidebar-favicon {
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 2px;
    flex-shrink: 0;
}

.container.no-sidebar {
    display: block; /* Override grid layout when no sidebar */
    padding: 0 90px; /* Add 90px padding on both sides */
}

.container.no-sidebar .main-content {
    padding: 30px 0; /* Keep vertical padding, remove horizontal padding since container handles it */
}

.public-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -50px; /* Pull the content up to overlap with the title */
}

.public-header .website-name {
    margin: 0;
}

.mobile-only {
    display: none;
}

.top-right-nav {
    position: absolute;
    top: 30px;
    right: 140px;
    display: flex;
    gap: 1.5rem;
}

.top-right-nav .link {
    font-size: 16px;
}

.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mobile-menu-toggle {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.mobile-menu-header .website-name {
    color: var(--color-primary);
    font-size: 30px;
    font-weight: 700;
    width: fit-content;
    display: inline;
    text-align: left;
}

.mobile-menu-header .mobile-menu-toggle {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.modal-content {
    max-width: 450px;
    margin: 20px;
}

.modal-content h3 {
    margin-top: 0;
    color: var(--color-danger);
}

.modal-content p {
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.modal-content ul {
    color: var(--color-text-secondary);
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.modal-content ul li {
    margin-bottom: 4px;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.modal-buttons .standard-button {
    flex: 1;
}

.modal-input {
    width: 100%;
    max-width: 240px;
    margin-top: 8px;
}

.modal-content .input-box:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(208, 51, 51, 0.15);
}

.modal-content .input-box::placeholder {
    letter-spacing: 1px;
}

/* Shared input styles for dashboard pages */
.input-box {
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-box:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px var(--color-secondary-xlight);
}

.input-box::placeholder {
    color: var(--color-text-tertiary);
    font-weight: 400;
}

.danger-button {
    background-color: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
}

.danger-button:hover:not(:disabled) {
    background-color: var(--color-danger-hover);
}

.danger-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.status-message {
    margin-top: 16px;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    background-color: #f3f4f6;
    color: var(--color-text-secondary);
}

.status-message.success {
    background-color: #d1fae5;
    color: #065f46;
}

.status-message.error {
    background-color: #fee2e2;
    color: var(--color-danger);
}

@media screen and (max-width: 768px) {
    .modal-buttons {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .sidebar {
        display: none;
        min-width: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 1000;
        padding: 20px;
    }
    
    .sidebar.show {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .mobile-menu-header {
        padding: 20px;
        text-align: right;
    }

    .sidebar .logo {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sidebar-content {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        height: auto;
    }

    .sidebar-bottom {
        margin-top: auto;
    }
    
    .container {
        display: block;
        padding: 20px;
    }

    .container.no-sidebar {
        padding: 20px;
    }

    .main-content {
        padding: 0;
    }

    .mobile-only {
        display: block;
    }

    .mobile-menu-toggle.mobile-only { display: inline-flex; }

    .desktop-only {
        display: none;
    }

    .website-name {
        text-align: left;
        margin-bottom: 0;  /* Remove bottom margin since it's handled by mobile-header */
    }

    .dropdown-content { position: static; left: auto; right: auto; width: auto; max-width: none; }


}

@media screen and (max-width: 768px) {
    body.nav-open { overflow: hidden; }
}

/* Page title (h1.title keeps the old h2 size for visual parity) */
h1.title {
    font-size: 1.5em;
    margin: 0.83em 0;
}

/* Public/private visibility toggle (analytics + funnels sidebars) */
.visibility-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.toggle-label { font-size: 14px; color: var(--color-text); }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.3s; border-radius: 22px; }
.toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; }
input:checked + .toggle-slider { background-color: var(--color-primary, #3b82f6); }
input:checked + .toggle-slider:before { transform: translateX(18px); }
.toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }

/* No-card trial banner (analytics page) */
.trial-banner {
    background: #eff6ff;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    padding: 10px 16px;
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--color-text);
}

.trial-banner.ended {
    background: #fef2f2;
    border-color: var(--color-danger);
}

/* `.link` carries `margin-right: 30px` for nav spacing (base.css), and that
   file already zeroes it for `p`/`li`/`td`/`figcaption` because the nav gap
   leaked into prose once before — the pricing box read "30-day refund on any
   charge , no questions asked." A `.trial-banner` is a bare <div>, so it was
   never covered, and every inline link in one kept the full nav gap.

   Measured in headless Chrome on 2026-09-16, before this rule: the trial
   countdown rendered "subscribe for $1/month, billed yearly" 33px from the
   "to keep tracking." after it at 1280px, and 18px at 390px, against a ~4px
   word space. That is the banner every trialing customer sees, and it had
   been live the whole time — auth-sweep reported all 20 renders clean,
   because 30px of inline margin does not overflow a viewport. */
.trial-banner .link {
    margin-right: 0;
}

.export-csv-link {
    margin-left: 12px;
    white-space: nowrap;
}

/* Badge widget (analytics sidebar; the badge works when the dashboard is
   public or badge-only mode is on) */
.badge-widget {
    margin: 10px 0;
}

/* The badge is as wide as its text ("harborcoffee.com | 3.3k visitors this
   month" is 300px) and the sidebar column is 220px at 1024-1536. Uncapped, it
   ran 30-150px out of the sticky sidebar over the cards beside it. The button
   is shrink-to-fit, so it needs the cap too, or 100% means the badge's own
   width. `contain` scales the drawing evenly inside the img's fixed 20px
   height (its height attribute), so the row does not jump when the badge
   loads. The badge is an SVG, so the scaled preview stays sharp. */
.badge-widget .badge-copy-button {
    display: block;
    max-width: 100%;
}

.badge-widget img {
    cursor: pointer;
    display: block;
    max-width: 100%;
    object-fit: contain;
}

.badge-public-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    margin-bottom: 8px;
}

.badge-public-row input {
    margin: 1px 0 0;
    flex-shrink: 0;
}

.badge-caption {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin: 6px 0;
}

.badge-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge-options select {
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text-secondary);
}

.badge-page-input {
    margin-top: 6px;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-secondary);
}

.badge-page-tip {
    font-size: 12px;
    margin: 8px 0 0;
}

.badge-page-tip a {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-tertiary);
}

/* Sites without a first hit: visible in the switcher but not navigable */
/* Favicon, then the domain with "no data yet" under it, so a long name wraps
   inside the list instead of widening it. */
.dropdown-content .dropdown-item-disabled {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    row-gap: 2px;
    padding: 12px 16px;
    color: var(--color-text-tertiary);
    cursor: default;
    overflow-wrap: anywhere;
}

.dropdown-content .dropdown-item-disabled img {
    opacity: 0.45;
}

.dropdown-content .dropdown-item-disabled small {
    grid-column: 2;
    font-size: 11px;
    white-space: nowrap;
}

/* Dropbtn label for a not-yet-verified first site: visible, not navigable */
.dropbtn .site-pending {
    color: var(--color-text-tertiary);
    cursor: default;
}

.dropbtn .site-pending img {
    opacity: 0.45;
}