/* Sidebar menu: scrollable area with max height */
.menu--scrollable {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

/* Accessibility: Screen reader only content */
.is-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Default colors */
:root {
    --background: hsla(220, 23%, 95%, 1);
    --gradient: linear-gradient(135deg,
            hsl(210, 100%, 99%) 0%,
            hsl(220, 83%, 96%) 15%,
            hsl(220, 83%, 96%) 85%,
            hsl(340, 89%, 97%) 100%);
    --base-text-color: hsla(205, 9%, 39%, 1);
    --base-text-color-light: hsla(225, 6%, 56%, 1);
    --green-text-color: hsla(137, 65%, 38%, 1);
    --blue-text-color: hsla(187, 62%, 41%, 1);
    --red-text-color: hsla(352, 88%, 46%, 1);
    --progress-bar-blue: hsla(187, 69%, 53%, 1);
    --progress-bar-orange: hsla(32, 100%, 61%, 1);
    --progress-bar-pink: hsla(324, 100%, 50%, 1);
    --blue-border-color: hsl(187, 69%, 53%);
    --blue-color: hsl(187, 69%, 53%);
    --white-color: hsl(0, 0%, 100%);
    --black-color: hsl(0, 0%, 0%);


    /* Circular progress bar */
    --circle-size: 13rem;
    --site-insights-circle-size: 7rem;
    --websites-list-circle-size: 5rem;

    /* Affiliate Links Table - Sticky column widths */
    --sticky-col-type-width: 70px;
    --sticky-col-visualping-width: 100px;
    --sticky-col-actions-width: 105px;
    --sticky-col-type-right: 205px;
    --sticky-col-visualping-right: 105px;
}

/* General Styles */
.card * {
    color: var(--base-text-color);
}

.is-main-section,
.is-title-bar {
    background-color: var(--background);
}

.gradient {
    background: var(--gradient);
}

.card.gradient {
    border-radius: 25px;
    border: 2px solid rgba(255, 255, 255, 1);
    box-shadow: 24px 24px 48px 0px rgba(199, 203, 215, 1);
}

.green {
    color: var(--green-text-color);
}

.blue {
    color: var(--blue-text-color) !important;
}

.white {
    color: var(--white-color) !important;
}

.white-background {
    background: var(--white-color) !important;
}

.black {
    color: var(--black-color) !important;
}

.title,
.base-color {
    color: var(--base-text-color);
}

.light-grey {
    color: var(--base-text-color-light);
}

.red {
    color: var(--red-text-color);
}

.button-text-color {
    color: hsl(205, 9%, 39%);
}

.progress-bar-blue {
    background: var(--progress-bar-blue);
}

.progress-bar-orange {
    background: var(--progress-bar-orange);
}

.progress-bar-pink {
    background: var(--progress-bar-pink);
}

.blue-border-color {
    border-color: var(--blue-border-color) !important;
}

.blue-color {
    color: var(--blue-color) !important;
}

.button.is-primary {
    background-color: var(--blue-border-color) !important;
    background-image: none !important;
}

.is-round {
    border-radius: 50%;
}

.icon.round .mdi::before {
    font-weight: 900;
}

.is-borderless {
    border: none !important;
}

.no-background {
    background: transparent !important;
    background-color: transparent !important;
}

.clear-filter svg {
    width: 19px;
    padding-top: 4px;
    margin-left: 2px;
}

.button.is-rounded,
.textarea.is-rounded,
.input.is-rounded {
    border-radius: 10px;
}

.select.is-rounded select {
    border-radius: 10px;
    font-weight: 500;
}

.pagination {
    justify-content: end;
    margin-bottom: 0;
    margin-top: 0;
}

.notification.is-info {
    background-color: hsl(187, 69%, 53%);
    color: hsl(0, 0%, 100%);
    border-radius: 8px;
}

/* Flash Messages Container */
.flash-messages-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    max-width: 500px;
}

.flash-messages-container .notification {
    word-break: break-word;
    margin-bottom: 1rem;
}

.flash-messages-container .notification:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .flash-messages-container {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
}

/* Per-page selector styling */
.pagination .select.is-borderless {
    border: none;
}

.pagination .select.is-borderless select {
    border: none;
    background: transparent;
    color: var(--base-text-color);
    font-weight: 600;
    padding-right: 2rem;
    cursor: pointer;
}

.pagination .select.is-borderless::after {
    border-color: var(--base-text-color);
    right: 0.5rem;
}

.has-text-weight-extrabold {
    font-weight: 800 !important;
}

/* Websites table */
.table {
    table-layout: auto;
    width: 100%;
}

.table-wrapper {
    overflow-x: auto;
}

.table th,
.table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Override centered image alignment for User column avatars */
.table td.has-text-left .image {
    margin: 10px 5px;
}

table th a {
    color: hsl(0, 0%, 0%);
    /* Or any color you prefer */
    text-decoration: none;
}

/* Casino Form */
.img-ext-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.4;
    letter-spacing: 0.3px;
}

.bonus-toggle-btn {
    min-width: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding-left: 0;
    padding-right: 0;
    border-color: #b5b5b5;
    background: #f5f5f5;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}

/* Chevron inside the collapsible bonus-section toggle button.
   Rotates 180° when .is-open is applied by toggleBonusSection() in _form.blade.php. */
.bonus-toggle-chevron {
    transition: transform 0.2s ease;
    color: #363636;
    font-size: 1.1rem !important;
    vertical-align: 2px !important;
    display: block;
    margin-top: 1px;
    margin-left: -8px !important;
}

.bonus-toggle-btn.is-open .bonus-toggle-chevron {
    transform: rotate(180deg);
}

.bonus-toggle-btn:hover,
.bonus-toggle-btn:focus {
    background: #ebebeb;
    border-color: #8c8c8c;
}

table th a:hover {
    color: hsl(0, 0%, 50%);
    /* Slightly lighter or darker for hover effect */
}

#columnToggler {
    position: absolute;
    right: 193px;
    top: 43px;
}

.table .is-actions-cell,
.column-actions {
    position: sticky;
    right: 0;
    background: hsl(0, 0%, 100%);
    width: 1px;
}

.column-actions {
    background-color: hsl(0, 0%, 100%) !important;
}

.runcloud-btn {
    background-color: hsl(0, 0%, 0%);
    width: 31px;
    height: 30px;
    padding: 6px;
}

.wp-btn {
    padding: 2px;
    background-color: aliceblue;
}

/* Adjust alternating row colors for the sticky column */
.table tbody tr:nth-child(odd) .is-actions-cell {
    background-color: hsl(0deg, 0%, 98%);
}

.table tbody tr:nth-child(even) .is-actions-cell {
    background-color: hsl(0deg, 0%, 100%);
}

section.section.is-title-bar ul li {
    padding-right: 5px;
}

nav#navbar-main {
    background-color: hsla(220, 23%, 97%, 1);
}

.input::placeholder {
    color: rgba(136, 139, 148, 1) !important;
    /* Change to any color you want */
    opacity: 1;
    /* Ensures full visibility (default in some browsers is lower) */
}

.breadcrumb ul li a {
    padding: 0;
    color: var(--base-color);
    text-transform: uppercase;
}

.breadcrumb ul li span {
    text-transform: uppercase;
}

.breadcrumb ul li:last-child {
    font-weight: 700 !important;
}

.json-field-item {
    padding-left: 30px;
    list-style-type: disc;
}

.submenu {
    display: block;
}

/* Search bar header */
html.has-navbar-fixed-top,
body.has-navbar-fixed-top {
    padding-top: 4.25rem;
}

.navbar-container {
    padding-left: 30px;
}

.search-bar-container {
    background-color: hsl(0, 0%, 100%);
    border-radius: 20px;
    margin: 15px 0;
    box-shadow: 10px 10px 10px -6px hsl(225, 16%, 85%);
}

.button.is-small:not(.is-rounded) {
    border-radius: 20px;
}

.powered-by {
    white-space: nowrap;
}

/* Live search modal */
.modal-background {
    background-color: rgba(10, 10, 10, 0.6);
}

.livesearch.box {
    background: hsl(0, 0%, 100%);
    box-shadow: none;
    border-radius: 16px;
    border: none;
    padding: 5px;
}

.modal-card-head {
    border-bottom: 1px solid hsl(0, 0%, 96%);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: hsl(0, 0%, 100%);
}

.modal-card-body {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

#modalClearSearch {
    border: 1px solid hsl(0, 0%, 86%);
    border-radius: 8px;
}

button.delete {
    background-color: hsl(0, 0%, 71%);
}

.search-select {
    border: 1px solid hsl(0, 0%, 86%);
    border-radius: 8px;
    padding: 5px 0 5px 16px;
    background-color: hsl(0, 0%, 99%);
    transition: all 0.2s ease;
}

.search-select:hover {
    border-color: hsl(217, 71%, 53%);
    background-color: hsl(0, 0%, 95%);
}

.search-select a {
    color: hsl(0, 0%, 21%);
}

.modal-card-body .button.is-light {
    background-color: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 86%);
    box-shadow: none;
    border-radius: 10px !important;
}

.modal-card-body .button.is-info {
    background-color: hsl(215, 100%, 97%);
    border-color: hsl(217, 71%, 53%);
    box-shadow: none;
    border-radius: 10px !important;
    color: hsl(220, 81%, 45%);
}

.modal-card-body .buttons {
    gap: 0;
}

nav.navbar .navbar-item.has-user-avatar .is-user-avatar {
    margin-right: 0;
    display: inline-flex;
    width: 38px;
    height: 38px;
    margin-left: 10px;
}

.navbar-item img {
    max-height: 38px;
}

.navbar-item.date {
    gap: 0.5rem;
}

.navbar-item.notifications {
    position: relative;
}

.notification-count {
    position: absolute;
    right: 7px;
    top: 13px;
    width: 20px;
    height: 20px;
    background-color: hsl(187, 69%, 53%);
    border: 2px solid hsl(0, 0%, 100%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-count span {
    font-size: 9px;
    font-weight: 600;
    color: hsl(0, 0%, 100%);
}

/* Sidebar Main Menu */
aside.aside,
aside.aside .aside-tools {
    background: hsla(220, 20%, 97%, 1);
}

.menu-list .menu-item,
.menu-list a,
.menu-list button {
    background-color: hsla(220, 20%, 97%, 1);
}

.menu-list a:hover,
.menu-label:hover {
    background-color: hsl(222, 12%, 17%);
    color: hsl(0deg, 0%, 100%);
    cursor: pointer;
}

aside.aside .menu-label {
    font-size: 1em;
    line-height: 1.25;
    padding: 0.6rem 0.75rem;
    margin-bottom: 2px;
}

.menu-label.is-active {
    background-color: hsl(0, 0%, 84%) !important;
    color: hsl(220, 13%, 51%) !important;
    cursor: pointer;
}

.menu-list a {
    padding-left: 10px;
}

.menu-list a.is-active {
    background-color: hsl(0, 0%, 84%);
    color: hsl(219, 11%, 50%);
}

aside.aside .menu-list a:hover,
aside.aside .menu-list .menu-item:hover,
aside.aside .menu-list button:hover {
    background-color: hsl(220, 13%, 18%) !important;
    color: hsl(0, 0%, 100%) !important;
}

aside.aside .menu-list li.is-active>a,
aside.aside .menu-list li.is-active>button,
aside.aside .menu-list li>ul li a.is-active {
    background-color: hsl(220, 13%, 18%) !important;
    color: hsl(0, 0%, 100%) !important;
}

@supports selector(:has(a.is-active)) {

    aside.aside .menu-list li:has(> ul a.is-active)>a,
    aside.aside .menu-list li:has(> ul a.is-active)>button {
        background-color: hsl(220, 13%, 18%) !important;
        color: hsl(0, 0%, 100%) !important;
    }
}

.aside-tools-label {
    color: hsl(0, 0%, 30%);
    font-size: 25px;
}

.submenulevel2 {
    padding-left: 80px !important;
    display: block !important;
}

/* Grid Websites */
.grid-websites {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-template-areas:
        "one one two two three three four four five five"
        "one one six six six six six six six six"
        "seven seven seven seven seven eight eight nine nine nine"
        "seven seven seven seven seven ten ten ten ten ten"
        "seven seven seven seven seven eleven eleven eleven eleven eleven"
        "twelve twelve twelve twelve twelve thirteen thirteen thirteen thirteen thirteen"
        "twelve twelve twelve twelve twelve thirteen thirteen thirteen thirteen thirteen"
        "twelve twelve twelve twelve twelve fourteen fourteen fourteen fourteen fourteen"
        "twelve twelve twelve twelve twelve fourteen fourteen fourteen fourteen fourteen"
        "fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen"
        "fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen"
        "fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen"
        "fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen";
}

.one {
    grid-area: one;
    position: relative;
}

.two {
    grid-area: two;
}

.three {
    grid-area: three;
}

.four {
    grid-area: four;
}

.five {
    grid-area: five;
}

.six {
    grid-area: six;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.seven {
    grid-area: seven;
}

.eight {
    grid-area: eight;
}

.nine {
    grid-area: nine;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ten {
    grid-area: ten;
}

.eleven {
    grid-area: eleven;
}

.twelve {
    grid-area: twelve;
}

.thirteen {
    grid-area: thirteen;
}

.fourteen {
    grid-area: fourteen;
}

.fifteen {
    grid-area: fifteen;
}

.seven>.is-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px 40px;
    grid-auto-flow: column;
}

.ten .is-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px 40px;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
}

.eleven .is-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 7px 40px;
}

.twelve>.is-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 7px 40px;
    /*grid-auto-flow: column;*/
}

.fourteen>.is-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px 40px;
    grid-auto-flow: column;
    place-items: center;
}

.box {
    border-radius: 16px;
    border: 2px solid hsla(0, 0%, 89%, 1);
    background: linear-gradient(94.96deg, rgba(248, 248, 248, 0.7) 6.03%, rgba(232, 234, 240, 0.7) 96%);
    box-shadow: 2px 2px 4px 0px hsla(224, 9%, 77%, 1) inset,
        -2px -2px 4px 0px hsla(0, 0%, 100%, 1) inset;
}

.seven .sub-box:not(:first-child),
.twelve .sub-box:not(:first-child) {
    cursor: pointer;
}

.seven .sub-box:not(:first-child):hover,
.twelve .sub-box:not(:first-child):hover {
    border-radius: 16px;
    border: 2px solid hsla(0, 0%, 89%, 1);
    background: linear-gradient(94.96deg, rgba(248, 248, 248, 0.7) 6.03%, rgba(232, 234, 240, 0.7) 96%);
    box-shadow: 2px 2px 4px 0px hsla(224, 9%, 77%, 1) inset,
        -2px -2px 4px 0px hsla(0, 0%, 100%, 1) inset;
}

.box.blue-border-color .title {
    color: var(--blue-text-color) !important;
}

/* Responsive GRID for mobile */

@media (max-width: 768px) {

    section.section.is-main-section,
    section.section.is-title-bar {
        padding: 0.5rem;
        overflow: hidden;
    }

    .level {
        align-items: flex-start;
    }

    .breadcrumb li {
        display: inline-block !important;
    }

    .level-right {
        display: none;
    }

    .websites-single .section.px-5 {
        padding: 1rem 0.5rem 0 0.5rem !important;
    }
    
    /* Mobile URL truncation */
    .truncate-url {
        max-width: 150px; /* ~25-30 chars - TWEAK THIS */
    }
    #table-wrapper-backlinks table td.truncate-url,
    #table-wrapper-backlinks table th.truncate-url {
        min-width: 150px;
    }
    
    .grid-websites {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-flow: row;
        grid-template-areas:
            "one"
            "two"
            "three"
            "four"
            "five"
            "six"
            "eight"
            "nine"
            "ten"
            "eleven"
            "seven"
            "twelve"
            "thirteen"
            "fourteen"
            "fifteen";
    }

    .grid-websites>* {
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin-bottom: 1rem;
    }

    .six,
    .ten .is-grid,
    .eleven .is-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        grid-auto-flow: row;
    }

    .seven>.is-grid,
    .twelve>.is-grid,
    .fourteen>.is-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: row;
    }

    .eight .ip-content,
    .eight .ip-content * {
        flex-direction: row;
    }

    .fourteen {
        padding: 10px 10px !important;
    }

    .fourteen .switch-container {
        flex-direction: row;
    }

    /* Ensure flex containers stack vertically */
    /* .is-flex {               THIS IS BREAKING SOME ELEMENTS, NEED TO BE MORE SPECIFIC 
        flex-direction: column;
        align-items: flex-start;
    } */
    /* Adjust the buttons container */
    .buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        margin-top: 20px;
        gap: 10px !important;
    }

    .button.is-light {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        margin-bottom: 5px;
    }

    .is-flex.is-align-items-center.top-grid {
        flex-wrap: wrap;
        gap: .5rem;
        flex-direction: row;
    }

    .alerts {
        margin-right: 10px !important;
        display: inline-block;
    }

    .external-link {
        display: inline-block !important;
    }

    button.bookmark.ml-3 {
        position: absolute;
        top: 18px;
        right: 10px;
    }

    .progress-bar-details {
        flex-direction: row;
    }
}

/* Medium Screens (769px to 1280px) */
@media (min-width: 769px) and (max-width: 1648px) {
    .grid-websites {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        grid-auto-flow: row;
        grid-template-areas:
            "one one two two three three"
            "four four five five . ."
            "ten ten ten ten eight eight"
            "seven seven seven seven nine nine"
            "six six six six eleven eleven"
            "twelve twelve twelve twelve thirteen thirteen"
            "fourteen fourteen fourteen fourteen fifteen fifteen";
    }
}

.four,
.five {
    margin-bottom: 1.5rem;
}

/* END Grid Websites */

/* GRID ELEMENTS */
.websites-list-view a {
    color: hsl(205, 9%, 39%);
}

.button.is-light .wp-icon-bg {
    fill: hsl(0, 0%, 100%) !important;
}

.button.is-light .wp-icon-logo {
    fill: hsl(205, 9%, 39%);
}

.button.is-light:hover .wp-icon-logo {
    fill: var(--blue-text-color);
}

.button.is-light:hover span:not(.icon) {
    color: var(--blue-text-color);
}

.button.is-light:hover .tooltip-text {
    color: hsl(0, 0%, 100%) !important;
}

.icon.round {
    width: 30px;
    height: 30px;
    background: linear-gradient(94.96deg, rgba(248, 248, 248, 0.7) 6.03%, rgba(232, 234, 240, 0.7) 96%);
    border-radius: 50%;
    border: 1px solid hsla(0, 0%, 89%, 1);
    box-shadow: 2px 2px 4px 0px hsla(224, 9%, 77%, 1) inset,
        -2px -2px 4px 0px hsla(0, 0%, 100%, 1) inset;
}

.circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: hsl(0, 0%, 96%);
    border: 1px solid hsla(226, 8%, 49%, 1);
    font-size: 16px;
    color: hsl(0, 0%, 20%);
    vertical-align: -5px;
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-text {
    visibility: hidden;
    background-color: hsl(0, 0%, 20%) !important;
    background: hsl(0, 0%, 20%) !important;
    color: hsl(0, 0%, 100%) !important;
    text-align: center;
    padding: 6px 8px;
    border-radius: 4px;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: hsl(0, 0%, 20%) transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Tooltip Bottom Variant */
.tooltip-bottom .tooltip-text {
    bottom: auto;
    top: 125%;
}

.tooltip-bottom .tooltip-text::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent hsl(0, 0%, 20%) transparent;
}

.tooltip i::before {
    margin-left: 2px;
    font-size: 10px;
    vertical-align: 6px;
}

/* END Tooltip */

/* Button Light */
.button.is-light,
select.is-light {
    box-shadow: 4px 4px 8px 0 hsla(216, 24%, 34%, 0.09),
        -4px -4px 16px 0 hsla(0, 0%, 100%, 0.25),
        2px 2px 6px 0 hsla(215, 24%, 34%, 0.22) inset,
        -4px -6px 25px 0 hsla(0, 0%, 100%, 1) inset;
    border: 1px solid hsla(0, 0%, 100%, 0.6);
    background: hsla(225, 31%, 95%, 1);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.button.is-light:hover {
    border-color: var(--blue-text-color);
    color: var(--blue-text-color);
}

.button.is-light:hover span,
.button.is-light:hover svg path {
    fill: var(--blue-text-color);
    color: var(--blue-text-color);
}

.button.is-light.is-active {
    border-color: var(--blue-text-color);
    color: var(--blue-text-color);
}

.button.is-light.is-active span,
.button.is-light.is-active svg path {
    fill: var(--blue-text-color);
    color: var(--blue-text-color);
}

.button.is-primary:hover,
.button.is-primary.is-hovered {
    background: linear-gradient(94.96deg, rgba(248, 248, 248, 0.7) 6.03%, rgba(232, 234, 240, 0.7) 96%);
    border-color: var(--blue-text-color);
    color: var(--blue-text-color);
}

.buttons.is-right a:hover svg path,
button:hover svg path {
    fill: var(--blue-text-color);
    ;
}

.button.is-danger:hover {
    background-color: transparent;
    border-color: hsl(348, 86%, 58%);
    color: hsl(348, 86%, 58%);
}

/* END Button Light */

/* Bookmark */
.bookmark:hover>svg path {
    fill: var(--blue-text-color);
}

.bookmark.bookmarked svg path {
    /* to make it active */
    fill: var(--blue-text-color);
}

/* END Bookmark */

/* Alerts */
.alerts {
    position: relative;
    background-color: hsl(358, 84%, 61%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid hsl(0, 0%, 100%);
    box-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.1);
}

.alerts span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: hsl(0, 0%, 100%);
    font-weight: bold;
    font-size: 10px;
}

/* END Alerts */

/* Circular Progress Bar */
.responsive-circle-container {
    width: var(--circle-size);
    height: var(--circle-size);
    background: rgba(238, 240, 246, 1);
    border-radius: 50%;
    box-shadow: 4px 4px 16px 0px rgba(174, 176, 184, 0.6) inset,
        -2px -2px 8px 0px rgba(255, 255, 255, 1) inset;
}

.responsive-circle-container-inner {
    width: 85%;
    height: 85%;
    background: rgba(245, 248, 255, 1);
    border-radius: 50%;
    box-shadow: 6px 6px 36px 0px rgba(0, 0, 0, 0.06),
        -4px -4px 13px 0px rgba(255, 255, 255, 1);
}

.responsive-circular-progress {
    width: 95%;
    height: 95%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.responsive-circular-progress .responsive-circle-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
}

.green-gradient .responsive-circle-inner {
    background: conic-gradient(hsl(137, 70%, 59%) 0%,
            hsl(137, 65%, 38%) calc(var(--progress) * 1%),
            transparent calc(var(--progress) * 1%));
}

.orange-gradient .responsive-circle-inner {
    background: conic-gradient(hsl(40, 95%, 59%) 0%,
            hsl(31, 100%, 54%) calc(var(--progress) * 1%),
            transparent calc(var(--progress) * 1%));
}

.orange-gradient .responsive-progress-text {
    color: hsl(31, 100%, 54%);
}

.red-gradient .responsive-circle-inner {
    background: conic-gradient(hsl(7, 100%, 65%) 0%,
            hsl(7, 82%, 44%) calc(var(--progress) * 1%),
            transparent calc(var(--progress) * 1%));
}

.red-gradient .responsive-progress-text {
    color: hsl(7, 82%, 44%);
}

.purple-gradient .responsive-circle-inner {
    background: conic-gradient(hsl(271, 76%, 65%) 0%,
            hsl(271, 76%, 53%) calc(var(--progress) * 1%),
            transparent calc(var(--progress) * 1%));
}

.purple-gradient .responsive-progress-text {
    color: hsl(271, 76%, 53%);
}

.responsive-circular-progress .responsive-circle-inner::before {
    content: '';
    width: 80%;
    height: 80%;
    background-color: hsl(0deg, 0%, 98%);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.responsive-progress-dr {
    color: var(--base-text-color);
    position: absolute;
    top: 22%;
    font-size: 0.8rem;
}

.responsive-progress-text {
    color: var(--green-text-color);
    position: absolute;
    bottom: 22%;
    font-size: 1.5rem;
}

.responsive-progress-dr {
    font-size: calc(var(--circle-size) / 9);
}

.responsive-progress-text {
    font-size: calc(var(--circle-size) / 4.5);
}

.one .tooltip {
    position: absolute;
    left: calc(var(--circle-size) * 0.9);
    top: calc(var(--circle-size) * 0.95);
}

.one .difference {
    position: absolute;
    left: calc(var(--circle-size) * 1.1);
    top: calc(var(--circle-size) * 0.3);
}

.responsive-circular-progress .responsive-circle-inner {
    transition: background 1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .responsive-circle-container {
        --circle-size: 40vw;
    }
}

/* END Circular progressbar */

/* Circular progress bar for Site Insights */
.fourteen .responsive-circle-container {
    width: var(--site-insights-circle-size);
    height: var(--site-insights-circle-size);
}

.fourteen .responsive-progress-text {
    position: initial;
    z-index: 1;
}

.fourteen .responsive-progress-text {
    font-size: calc(var(--site-insights-circle-size) / 4.5);
}

.switch-container {
    background-color: rgba(238, 240, 246, 1);
    border-radius: 12px;
    padding: 6px;
    width: 120px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 6px 6px 36px 0px hsla(0, 0%, 0%, 0.06),
        /* First shadow */
        -4px -4px 13px 0px hsla(0, 0%, 100%, 1),
        /* Second shadow */
        4px 4px 7px 0px hsla(0, 0%, 0%, 0.07);
    /* Third shadow */
}

.switch-input {
    display: none;
    /* Hide the actual radio buttons */
}

.switch-label {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 8px 0;
}

.switch-container svg path {
    fill: var(--base-text-color);
}

.switch-label.mob {
    padding: 12px 0 4px 1px;
}

.switch-label.desk {
    padding: 15px 0px 1px 2px;
}

.switch-input:checked+.switch-label img {
    opacity: 1;
    /* Highlight the selected option */
}

.switch-toggle {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    height: calc(100% - 12px);
    background-color: transparent;
    border-radius: 12px;
    transition: left 0.3s;
    border: 1px solid hsl(0, 0%, 100%);
    box-shadow: 4px 4px 8px 0px rgba(66, 83, 107, 0.09),
        /* Regular shadow */
        -4px -4px 16px 0px rgba(255, 255, 255, 0.25),
        /* Regular shadow */
        2px 2px 6px 0px rgba(66, 83, 107, 0.22) inset,
        /* Inset shadow */
        -4px -6px 25px 0px rgba(255, 255, 255, 1) inset;
    /* Inset shadow */
}

#desktop:checked~.switch-toggle {
    left: 50%;
    /* Move the toggle to the second option */
}

/* END Circular progress bar for Site Insights */

/* Multi color progress bar */
.multi-progress-bar-container {
    display: flex;
    width: 100%;
    height: 12px;
    padding: 4px;
    border-radius: 20px;
    overflow: hidden;
    background: hsla(225, 31%, 95%, 1);
    border: 1px solid hsla(0, 0%, 100%, 0.7);
    box-shadow: 4px 4px 8px 0px hsla(216, 24%, 34%, 0.09),
        -4px -4px 16px 0px hsla(0, 0%, 100%, 0.25),
        0px 2px 6px 0px hsla(215, 24%, 34%, 0.22) inset,
        0px -4px 14px 0px hsla(0, 0%, 100%, 1) inset;
}

.progress-bar {
    height: 4px;
    border-radius: 0;
}

.progress-bar-blue {
    border-radius: 20px 0 0 20px;
}

.progress-bar-orange {
    border-radius: 0 20px 20px 0;
}

.progress-bar-details {
    margin-top: 10px;
    gap: 40px;
}

.detail {
    gap: 4px;
}

.dot-label {
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.value {
    margin-left: 18px;
}

/* END Multi color progress bar */

/* IP Box */
.flag img {
    width: 22px;
    height: 16px;
    margin-right: 5px;
    border: 1px solid hsla(0, 0%, 80%, 1);
    border-radius: 4px;
}

/* END IP Box */

/* Top Ranking Keywords Box */
.topkeywords table {
    background-color: transparent;
}

.topkeywords td,
.topkeywords th,
.topkeywords tr {
    border: none !important;
    color: var(--base-text-color);
}

/* Disable horizontal scroll inside topkeywords tables and let content wrap. */
.topkeywords .table-container {
    overflow-x: visible;
}

.topkeywords table {
    table-layout: fixed;
    width: 100%;
}

.topkeywords td,
.topkeywords th {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.topkeywords tbody tr:nth-child(odd) {
    background-color: hsla(225, 50%, 87%, 0.698);
}

.topkeywords tbody tr:nth-child(even) {
    background-color: transparent;
}

.topkeywords .pagination-info {
    order: 3;
}

.topkeywords .pagination-previous,
.topkeywords .pagination-next {
    background-color: transparent !important;
    border: none !important;
    min-width: 20px;
}

/* END Top Ranking Keywords Box */

/* Diversity Box */
#diversity table {
    background-color: transparent;
}

#diversity td,
#diversity th,
#diversity tr {
    border: none !important;
    color: var(--base-text-color);
}

#diversity tbody tr:nth-child(odd) {
    background-color: hsla(225, 50%, 87%, 0.698);
}

#diversity .pagination-info {
    order: 3;
}

#diversity .pagination-previous,
#diversity .pagination-next {
    background-color: transparent !important;
    border: none !important;
    min-width: 20px;
}
/* END Diversity Box */

/* END GRID ELEMENTS */

/* WEBSITES LIST VIEW */
.seo-websites .section.is-main-section,
.seo-affiliatelinks .section.is-main-section {
    padding-top: 0;
}

#websites-filter-form .input.box.is-rounded,
#affiliate-links-filter-form .input.box.is-rounded,
#external-backlinks-filter-form .input.box.is-rounded {
    margin-bottom: 0;
}

.navbar-websites .input {
    border-radius: 18px;
    width: 277px;
}

.websites-single .top-grid {
    margin-bottom: 15px;
}

#websites-table-container .websites-top {
    grid-template-columns: 350px repeat(2, 1fr)
}

#websites-table-container .websites-bottom {
    display: grid;
    grid-template-columns: 100px repeat(6, 1fr);
}

#websites-table-container .responsive-circle-container {
    width: var(--websites-list-circle-size);
    height: var(--websites-list-circle-size);
    background: rgba(238, 240, 246, 1);
    border-radius: 50%;
    box-shadow: 4px 4px 16px 0px rgba(174, 176, 184, 0.6) inset,
        -2px -2px 8px 0px rgba(255, 255, 255, 1) inset;
}

#websites-table-container .responsive-progress-dr {
    font-size: calc(var(--websites-list-circle-size) / 9);
}

#websites-table-container .responsive-progress-text {
    font-size: calc(var(--websites-list-circle-size) / 4.5);
}

#websites-table-container .with-circle .responsive-circle-container {
    margin-top: 0 !important;
}

#websites-table-container .with-circle .icon.circle.tooltip,
#websites-table-container .with-circle .difference {
    display: none !important;
}

@media (min-width: 769px) and (max-width: 1648px) {
    :root {
       --circle-size: 10rem;
    }
    #websites-table-container .websites-top.grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "first third"
            "second second";
        gap: 0 0.75rem;
        align-items: start;
    }

    #websites-table-container .websites-top.grid>.field:nth-child(1) {
        grid-area: first;
    }

    #websites-table-container .websites-top.grid>.field:nth-child(2) {
        grid-area: second;
    }

    #websites-table-container .websites-top.grid>.field:nth-child(3) {
        grid-area: third;
        justify-self: end;
    }

    #websites-table-container .bottom-bar {
        display: block;
    }

    #websites-table-container .order-block {
        width: 100%;
    }

    #websites-table-container .pagination-block {
        width: 100%;
    }

    #websites-table-container .websites-bottom {
        grid-template-columns: 100px 120px 120px 135px 135px 2fr 3fr;
        gap: 19px;
    }

    /* Affiliate Links responsive */
    #affiliate-links-table-container .bottom-bar {
        display: block;
    }

    #affiliate-links-table-container .order-block {
        width: 100%;
    }

    #affiliate-links-table-container .pagination-block {
        width: 100%;
    }

    .single-top-bar {
        display: block !important;
    }
}

/* Affiliate Links Table - Fixed and flexible columns with sticky positioning */
#affiliate-links-table-container table {
    table-layout: fixed;
    width: 100%;
}

/* Column 1: Checkbox - fixed small width */
#affiliate-links-table-container table th:nth-child(1),
#affiliate-links-table-container table td:nth-child(1) {
    width: 50px;
}

/* Column 2: Toplist Order - fixed width (max 2-3 digits) */
#affiliate-links-table-container table th:nth-child(2),
#affiliate-links-table-container table td:nth-child(2) {
    width: 120px;
}

/* Column 3: Casino - reasonable fixed width for casino names */
#affiliate-links-table-container table th:nth-child(3),
#affiliate-links-table-container table td:nth-child(3) {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column 4: Permalink - flexible, shares remaining space */
#affiliate-links-table-container table th:nth-child(4),
#affiliate-links-table-container table td:nth-child(4) {
    width: 50%;
    min-width: 120px;
}

#affiliate-links-table-container table td:nth-child(4) code {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column 5: Redirect To - flexible, shares remaining space */
#affiliate-links-table-container table th:nth-child(5),
#affiliate-links-table-container table td:nth-child(5) {
    width: 50%;
    min-width: 140px;
}

#affiliate-links-table-container table td:nth-child(5) code {
    display: flex !important;
    align-items: center;
    max-width: 100%;
}

#affiliate-links-table-container table td:nth-child(5) code > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

#affiliate-links-table-container table td:nth-child(5) code > a {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* Column 6: Type - sticky right column */
#affiliate-links-table-container table th:nth-child(6),
#affiliate-links-table-container table td:nth-child(6) {
    width: var(--sticky-col-type-width);
    position: sticky;
    right: var(--sticky-col-type-right);
    z-index: 10;
}

/* Column 7: VisualPing - sticky right column */
#affiliate-links-table-container table th:nth-child(7),
#affiliate-links-table-container table td:nth-child(7) {
    width: var(--sticky-col-visualping-width);
    position: sticky;
    right: var(--sticky-col-visualping-right);
    z-index: 10;
}

/* Column 8: Actions - sticky right column */
#affiliate-links-table-container table th:nth-child(8),
#affiliate-links-table-container table td:nth-child(8) {
    width: var(--sticky-col-actions-width);
    position: sticky;
    right: 0;
    z-index: 10;
}

@media (min-width: 769px) and (max-width: 1648px) {
    #website-tabs {
        justify-content: space-between;
    }

    .section {
        padding: 2rem 2rem;
    }
    .grid-websites .nine.box {
        grid-template-columns: 1fr;
    }
    .google-icon {
        display: none;
    }
    .websites-single .eleven .is-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-flow: initial;
    }
    .account-information span:nth-child(1) {
        display: block;
    }
    .grid-websites {
        grid-template-areas:    "one one two two three three"
                                "four four five five nine nine"
                                "six six six six six six"
                                "ten ten ten ten eight eight"
                                "seven seven seven seven eleven eleven"
                                "twelve twelve twelve twelve twelve twelve"
                                "thirteen thirteen thirteen thirteen thirteen thirteen"
                                "fourteen fourteen fourteen fourteen fourteen fourteen";
    }
}

@media (max-width: 768px) {
    .websites-top {
        display: block;
    }

    .websites-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        grid-gap: 1rem;
    }

    .websites-top>.top-grid {
        grid-column: 1 / -1;
    }

    #websites-table-container .top-grid {
        flex-wrap: nowrap;
    }

    #websites-table-container .websites-bottom {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
    }

    #websites-table-container .websites-bottom> :nth-child(4n+1):not(:first-child) {
        grid-column-start: 1;
    }

    .child-mb-2>span {
        margin-bottom: 10px !important;
    }
}

/* END WEBSITES LIST VIEW */

/* Command Output Styling */
.command-output {
    font-family: 'Courier New', Monaco, monospace;
    font-size: 13px;
    line-height: 1.4;
    background-color: hsl(210, 17%, 98%);
    border-radius: 8px;
    padding: 15px;
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid hsl(210, 16%, 93%);
}

.output-line {
    display: flex;
    align-items: flex-start;
    padding: 3px 8px;
    margin: 1px 0;
    border-radius: 4px;
    border-left: 3px solid transparent;
}

.output-timestamp {
    color: hsl(208, 7%, 46%);
    font-size: 11px;
    margin-right: 12px;
    min-width: 65px;
    font-weight: 500;
    flex-shrink: 0;
}

.output-message {
    flex: 1;
    word-break: break-word;
}

/* Style based on output type */
.output-info {
    background-color: rgba(13, 110, 253, 0.05);
    border-left-color: hsl(216, 98%, 52%);
    color: hsl(216, 90%, 47%);
}

.output-success {
    background-color: rgba(25, 135, 84, 0.05);
    border-left-color: hsl(152, 69%, 31%);
    color: hsl(152, 69%, 25%);
}

.output-warning {
    background-color: rgba(255, 193, 7, 0.05);
    border-left-color: hsl(45, 100%, 51%);
    color: hsl(45, 95%, 31%);
}

.output-error,
.output-alert {
    background-color: rgba(220, 53, 69, 0.05);
    border-left-color: hsl(354, 70%, 54%);
    color: hsl(354, 61%, 43%);
}

.output-comment {
    background-color: rgba(108, 117, 125, 0.05);
    border-left-color: hsl(208, 7%, 46%);
    color: hsl(210, 9%, 31%);
}

.output-question {
    background-color: rgba(102, 16, 242, 0.05);
    border-left-color: hsl(263, 90%, 51%);
    color: hsl(267, 64%, 37%);
}

/* Default/fallback styles */
.output-line:not([class*="output-"]) {
    background-color: rgba(13, 110, 253, 0.05);
    border-left-color: hsl(216, 98%, 52%);
    color: hsl(216, 90%, 47%);
}

/* Scrollbar styling */
.command-output::-webkit-scrollbar {
    width: 8px;
}

.command-output::-webkit-scrollbar-track {
    background: hsl(0, 0%, 95%);
    border-radius: 4px;
}

.command-output::-webkit-scrollbar-thumb {
    background: hsl(0, 0%, 76%);
    border-radius: 4px;
}

.command-output::-webkit-scrollbar-thumb:hover {
    background: hsl(0, 0%, 66%);
}

/* END Command Output Styling */

/* Websites Filter Bar */
.websites-filter-bar,
.affiliate-links-filter-bar,
.backlinks-filter-bar {
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem 1rem 0.75rem;
}

.websites-clickable-card {
    background-color: hsl(0, 0%, 100%);
    background-image: linear-gradient(90deg, rgba(240, 245, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.select:not(.is-multiple):not(.is-loading)::after {
    border-color: hsl(0deg 0.29% 59.95%);
    right: 1.125em;
    z-index: 4;
}

.sorting-buttons .button.is-rounded {
    padding: 7px 20px;
    height: 36px;
}

.sorting-buttons .button:active,
.sorting-buttons .button.is-active,
.sorting-buttons .button:focus,
.sorting-buttons .button.is-focused,
.affiliate-links-filter-bar .button:active,
.affiliate-links-filter-bar .button.is-active,
.affiliate-links-filter-bar .button:focus,
.affiliate-links-filter-bar .button.is-focused {
    border-color: var(--blue-border-color) !important;
}

/* Custom Checkbox Styling */
.websites-filter-bar .checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid hsl(216, 12%, 84%);
    border-radius: 4px;
    background-color: hsl(0, 0%, 100%);
    cursor: pointer;
    position: relative;
    margin-right: 8px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.websites-filter-bar .checkbox input[type="checkbox"]:hover {
    border-color: var(--blue-border-color);
}

.websites-filter-bar .checkbox input[type="checkbox"]:checked {
    background: var(--blue-border-color);
    /* border-color: var(--blue-border-color); */
}

.websites-filter-bar .checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    width: 5px;
    height: 9px;
    border: solid hsl(0, 0%, 100%);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.websites-filter-bar .checkbox {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    user-select: none;
    font-weight: 600;
}

.websites-filter-bar .checkbox .box {
    padding: 0.6rem;
}

/* External Baclinks */
.seo-externalbacklinks table {
    table-layout: fixed;
}

/* Remote Desktops */
.seo-remotedesktops .card-header {
    border: none !important;
}

.seo-remotedesktops .no-background {
    background: transparent !important;
}

.border-red:hover {
    border-color: var(--red-text-color) !important;
}

/* Responsive URL truncation for tables */
.truncate-url {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* Ensure table columns have minimum width to match content */
#table-wrapper-backlinks table td.truncate-url,
#table-wrapper-backlinks table th.truncate-url {
    min-width: 200px; /* Base minimum width - TWEAK THIS */
}

/* Utility class for preserving newlines in text content. */
.whitespace-pre-line {
    white-space: pre-line;
}

/* Debug Breakpoints in footer */
.debug-breakpoint {
    position: fixed;
    bottom: 5px;
    right: 10px;
    background: #222;
    color: #fff;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 4px;
    z-index: 9999;
}

@media (max-width: 768px) {
    .debug-breakpoint::after {
        content: "mobile (<769px)";
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .debug-breakpoint::after {
        content: "tablet (769–1023px)";
    }
}

@media (min-width: 1024px) and (max-width: 1215px) {
    .debug-breakpoint::after {
        content: "desktop (1024–1215px)";
    }
}

@media (min-width: 1216px) and (max-width: 1407px) {
    .debug-breakpoint::after {
        content: "widescreen (1216–1407px)";
    }
}

@media (min-width: 1408px) {
    .debug-breakpoint::after {
        content: "fullhd (≥1408px)";
    }
}

/* **** MEDIA QUERIES **** */

/* Large Desktop (1216px and up) - Bulma's widescreen breakpoint */
@media (min-width: 1216px) {
    /* Large desktop enhancements go here */
    
    /* Large desktop URL truncation */
    .truncate-url {
        max-width: 200px; /* ~70-80 chars - TWEAK THIS */
    }
    #table-wrapper-backlinks table td.truncate-url,
    #table-wrapper-backlinks table th.truncate-url {
        min-width: 200px;
    }
}

/* Desktop (1024px to 1215px) - Bulma's desktop breakpoint */
@media (max-width: 1215px) and (min-width: 1024px) {
    /* Desktop overrides go here */
    
    /* Desktop URL truncation */
    .truncate-url {
        max-width: 300px; /* ~50-60 chars - TWEAK THIS */
    }
    #table-wrapper-backlinks table td.truncate-url,
    #table-wrapper-backlinks table th.truncate-url {
        min-width: 300px;
    }
}

/* Tablet (769px to 1023px) - Bulma's tablet breakpoint */
@media (max-width: 1023px) and (min-width: 769px) {
    /* Tablet overrides go here */
    
    /* Tablet URL truncation */
    .truncate-url {
        max-width: 250px; /* ~40-50 chars - TWEAK THIS */
    }
    #table-wrapper-backlinks table td.truncate-url,
    #table-wrapper-backlinks table th.truncate-url {
        min-width: 250px;
    }
}

/* Mobile (768px and below) - Bulma's mobile breakpoint */
@media (max-width: 768px) {
    /* Mobile overrides go here */

}

/* External Backlinks Table Styles */
.backlink-col-checkbox {
    width: 30px !important;
}

.backlink-col-dr {
    width: 60px !important;
}

.backlink-col-status {
    width: 170px !important;
}

.backlink-col-price {
    width: 110px !important;
}

.backlink-col-lastcheck {
    width: 130px !important;
}

/* Bulk Actions Card - Initially Hidden */
.bulk-actions-card {
    display: none;
}

.bulk-actions-card.is-active {
    display: block;
}
/* ===================================
   EXTERNAL BACKLINKS CARD LAYOUT
   =================================== */

/* Backlinks list view - similar to websites */
.backlinks-list-view a {
    color: hsl(205, 9%, 39%);
}

.backlinks-clickable-card {
    cursor: pointer;
}

/* Backlinks card top section layout */
#backlinks-table-container .backlinks-top {
    grid-template-columns: repeat(3, 1fr);
}

/* Backlinks card bottom section layout */
#backlinks-table-container .backlinks-bottom {
    display: grid;
    grid-template-columns: 100px repeat(auto-fit,minmax(var(--bulma-grid-column-min),1fr));
    gap: 0.75rem;
    align-items: center;
}

/* Circle container for DR display */
#backlinks-table-container .responsive-circle-container {
    width: var(--websites-list-circle-size);
    height: var(--websites-list-circle-size);
    background: rgba(238, 240, 246, 1);
    border-radius: 50%;
    box-shadow: 4px 4px 16px 0px rgba(174, 176, 184, 0.6) inset,
        -2px -2px 8px 0px rgba(255, 255, 255, 1) inset;
}

#backlinks-table-container .responsive-progress-dr {
    font-size: calc(var(--websites-list-circle-size) / 9);
}

#backlinks-table-container .responsive-progress-text {
    font-size: calc(var(--websites-list-circle-size) / 4.5);
}

#backlinks-table-container .with-circle .responsive-circle-container {
    margin-top: 0 !important;
}

#backlinks-table-container .with-circle .icon.circle.tooltip,
#backlinks-table-container .with-circle .difference {
    display: none !important;
}

/* Tablet/Medium screens */
@media (min-width: 769px) and (max-width: 1648px) {
    #backlinks-table-container .backlinks-top.grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "first third"
            "second second";
        gap: 0 0.75rem;
        align-items: start;
    }

    #backlinks-table-container .backlinks-top.grid>.field:nth-child(1) {
        grid-area: first;
    }

    #backlinks-table-container .backlinks-top.grid>.field:nth-child(2) {
        grid-area: second;
    }

    #backlinks-table-container .backlinks-top.grid>.field:nth-child(3) {
        grid-area: third;
        justify-self: end;
    }

    #backlinks-table-container .backlinks-bottom {
        grid-template-columns: 100px 80px 90px 90px 1.5fr 110px 1fr;
        gap: 15px;
    }
}

/* Mobile screens */
@media screen and (max-width: 768px) {
    .backlinks-top {
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
    }

    .backlinks-top>.top-grid {
        width: 100%;
        justify-content: flex-start !important;
    }

    #backlinks-table-container .backlinks-bottom {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    #backlinks-table-container .backlinks-bottom>.field {
        width: 100%;
    }

    #backlinks-table-container .backlinks-bottom>.field:first-child {
        display: flex;
        justify-content: center;
    }
}

/* Filter bar styling for backlinks */
.backlinks-filter-bar {
    position: relative;
}

.backlinks-filter-bar .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 6px;
}

.backlinks-filter-bar .loading-spinner {
    text-align: center;
}
/* TARGET MARKETS LIST VIEW - Card-based layout */
.target-markets-list-view a {
    color: hsl(205, 9%, 39%);
}

.target-markets-clickable-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.target-markets-clickable-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Target Markets card top section layout */
.target-markets-top {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Target Markets card bottom section layout */
.target-markets-bottom {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(0, 0%, 90%);
}

/* Tablet/Medium screens */
@media (min-width: 769px) and (max-width: 1648px) {
    .target-markets-top.grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 0.75rem;
    }

    .target-markets-top.grid>.field:nth-child(1) {
        grid-column: 1 / -1;
    }

    .target-markets-top.grid>.field:nth-child(2) {
        grid-column: 1 / -1;
        justify-content: flex-start !important;
    }

    .target-markets-top.grid>.field:nth-child(3) {
        grid-column: 1 / -1;
        justify-content: flex-start !important;
    }

    .target-markets-bottom {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* Mobile screens */
@media screen and (max-width: 768px) {
    .target-markets-top {
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
    }

    .target-markets-top>.field {
        width: 100%;
        justify-content: flex-start !important;
    }

    .target-markets-bottom {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .target-markets-bottom>.field {
        width: 100%;
    }

    /* On very small screens, show 1 column for bottom stats */
    @media screen and (max-width: 480px) {
        .target-markets-bottom {
            grid-template-columns: 1fr;
        }
    }
}

/* END TARGET MARKETS LIST VIEW */

/* Navbar button that looks like a navbar-item (for POST forms) */
.navbar-item--button {
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    display: inherit;
    padding: inherit;
}