/* ── Bulma theme overrides ── */
:root {
    --bulma-primary: #485fc7;
    --bulma-primary-h: 230;
    --bulma-primary-s: 49%;
    --bulma-primary-l: 53%;
    --bulma-primary-invert-l: 100%;
    --bulma-primary-on-scheme-l: 53%;
    --bulma-link: #485fc7;
    --bulma-link-h: 230;
    --bulma-link-s: 49%;
    --bulma-link-l: 53%;
    --bulma-link-invert-l: 100%;
    --bulma-link-on-scheme-l: 53%;
}

/* ── Base ── */
body {
    background-color: #f5f7fa;
    min-height: 100vh;
}

/* ── Navbar ── */
.navbar {
    border-bottom: 1px solid #e8e8e8;
}

.navbar-item .icon + span {
    margin-left: 0.3rem;
}

.navbar-link::after {
    border-color: #888 !important;
}

/* ── Cards & Boxes ── */
.box {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
}

/* ── Buttons ── */
.button.is-outlined {
    border-width: 1.5px;
}

.button.is-small.is-outlined {
    font-weight: 500;
}

/* Better visibility for outlined buttons on light backgrounds */
.button.is-outlined {
    border-color: #b5b5b5 !important;
    background-color: white !important;
}

.button.is-outlined:hover {
    background-color: #f5f5f5 !important;
    border-color: #888 !important;
}

/* Outlined buttons on dark/gradient backgrounds (hero, CTA) */
.hero-btn-outline {
    background-color: transparent !important;
    border: 2px solid white !important;
    color: white !important;
}

.hero-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: white !important;
    color: white !important;
}

/* Ensure outlined variants keep their text color */
.button.is-primary.is-outlined {
    color: #485fc7 !important;
}

.button.is-primary.is-outlined:hover {
    background-color: #485fc7 !important;
    color: white !important;
}

.button.is-danger.is-outlined {
    color: #f14668 !important;
}

.button.is-danger.is-outlined:hover {
    background-color: #f14668 !important;
    color: white !important;
}

.button.is-info.is-outlined {
    color: #3e8ed0 !important;
}

.button.is-info.is-outlined:hover {
    background-color: #3e8ed0 !important;
    color: white !important;
}

/* Plain outlined (no color class) */
.button.is-outlined:not(.is-primary):not(.is-danger):not(.is-info):not(.is-success):not(.is-warning) {
    color: #4a4a4a !important;
}

/* Icon-only action buttons in tables */
.button.is-small .icon:only-child {
    margin: 0 !important;
}

.button.is-small:not(.is-outlined):not(.is-primary):not(.is-danger):not(.is-info) {
    background-color: transparent;
    border-color: transparent;
    color: #888;
}

.button.is-small:not(.is-outlined):not(.is-primary):not(.is-danger):not(.is-info):hover {
    background-color: #f0f0f0;
    color: #363636;
}

.button.is-small.has-text-danger {
    background-color: transparent;
    border-color: transparent;
}

.button.is-small.has-text-danger:hover {
    background-color: #fff0f3;
}

/* ── Tables inside boxes: flush edges, modern look ── */
.box > .table-container,
.box > .table {
    margin: 0 -1.25rem;
    width: calc(100% + 2.5rem);
    max-width: none;
}

.box > .table-container:last-child,
.box > .table:last-child {
    margin-bottom: -1.25rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
}

.box > .table-container:first-child,
.box > .table:first-child {
    margin-top: -1.25rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
}

/* When table-container is the only child, flush all sides */
.box > .table-container:only-child {
    margin: -1.25rem;
    width: calc(100% + 2.5rem);
    border-radius: 8px;
    overflow: hidden;
}

/* Ensure table fills container edge to edge */
.box > .table-container > .table {
    margin: 0;
    width: 100%;
}

.table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background: none;
    color: #8892a4;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #edf0f4;
    padding: 0.75rem 1rem;
}

.table tbody td {
    border-bottom: 1px solid #f2f4f7;
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: #374151;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table.is-hoverable tbody tr:hover {
    background-color: #f8fafc;
}

.table tfoot td {
    border-top: 1px solid #edf0f4;
    border-bottom: none;
    padding: 0.5rem 1rem;
}

/* Edge cells get extra padding to align with box padding */
.box .table thead th:first-child,
.box .table tbody td:first-child,
.box .table tfoot td:first-child {
    padding-left: 1.25rem;
}

.box .table thead th:last-child,
.box .table tbody td:last-child,
.box .table tfoot td:last-child {
    padding-right: 1.25rem;
}

/* ── Truncated text in table cells ── */
.td-truncate {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Tags ── */
.tag {
    font-weight: 500;
}

/* ── Stats cards on dashboard ── */
.heading {
    letter-spacing: 0.5px;
}

/* ── Sections ── */
.section {
    padding-top: 2rem;
}

/* ── Wide container: fluid but capped ── */
.container.is-fluid {
    max-width: 1600px;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ── Auth pages ── */
.auth-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.auth-page .box {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.button.is-primary {
    color: white !important;
}

.button.is-primary:hover {
    color: white !important;
}

.auth-page .auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-page .auth-brand .icon {
    color: #667eea;
}

/* ── Notifications ── */
.notification.is-danger.is-light {
    border-left: 4px solid #f14668;
}

/* ── Level header spacing ── */
.level + .table-container,
.level + .columns,
.level + .box,
.level + .notification {
    margin-top: 0.5rem;
}

/* ── Detail pages ── */
details summary {
    cursor: pointer;
    user-select: none;
}

/* ── File input ── */
.file-cta {
    border-color: #b5b5b5;
}

/* ── Active navbar item ── */
.navbar-item.is-active-page {
    color: #485fc7 !important;
    font-weight: 600;
    border-bottom: 2px solid #485fc7;
}

/* ── Flash toast ── */
.flash-toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    min-width: 300px;
    max-width: 500px;
    animation: flashSlideIn 0.3s ease-out, flashFadeOut 0.5s ease-in 3.5s forwards;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@keyframes flashSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes flashFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ── Mobile ── */
@media screen and (max-width: 768px) {
    .container.is-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .level {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .level-right {
        margin-left: 0 !important;
    }

    /* Dashboard stat cards: 2 per row on mobile */
    .stat-cards > .column {
        flex: none;
        width: 50%;
    }

    /* Flash toast full width */
    .flash-toast {
        left: 1rem;
        right: 1rem;
        min-width: auto;
    }

    /* Navbar business name truncation */
    .navbar-item .tag {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Homepage hero */
    .hero.is-medium .hero-body {
        padding: 2.5rem 1.5rem;
    }

    .hero .title.is-1 {
        font-size: 2rem;
    }

    .hero .subtitle.is-4 {
        font-size: 1rem;
        line-height: 1.4;
    }

    .hero .buttons .button.is-medium,
    .cta-section .buttons .button.is-medium {
        width: 100%;
    }

    /* Homepage value prop cards: stack on mobile */
    .columns.is-multiline > .column.is-4 {
        width: 100%;
    }

    /* Two-audiences side by side → stacked */
    .columns.is-variable.is-8 > .column {
        width: 100%;
    }

    /* Pricing tags wrap nicely */
    .box .tag.is-medium {
        margin-bottom: 0.25rem;
    }

    /* CTA section tighter padding */
    .cta-section {
        padding: 2.5rem 1.5rem !important;
    }

    /* Buttons group: stack vertically on mobile */
    .buttons.are-small {
        flex-wrap: wrap;
    }

    /* Detail pages: subtitle wrap */
    .subtitle {
        word-break: break-word;
    }

    /* Scan page: drop zone smaller */
    .drop-zone {
        padding: 2rem 1rem;
    }
}

/* ── Print ── */
@media print {
    .navbar, .button, .no-print, .flash-toast {
        display: none !important;
    }
}