/* TaxHound - Space Theme Dark Mode with Cyan/Teal Accent */

/* ============================================
   BULMA GLOBAL CSS VARIABLE OVERRIDES
   Dark space-themed color system
   ============================================ */

:root {
    /* ---- Scheme Colors (Background Surfaces) ---- */
    --bulma-scheme-h: 213;
    --bulma-scheme-s: 50%;
    --bulma-scheme-main-l: 4%;
    --bulma-scheme-main-bis-l: 7%;
    --bulma-scheme-main-ter-l: 10%;
    --bulma-scheme-brightness: dark;
    
    /* Main backgrounds */
    --bulma-scheme-main: #0A1220;           /* Near-black blue */
    --bulma-scheme-main-bis: #101B2D;       /* Elevated surface */
    --bulma-scheme-main-ter: #162236;       /* Slightly elevated */
    --bulma-background: #0A1220;            /* Near-black blue */
    --bulma-background-l: 7%;
    
    /* ---- Text Colors ---- */
    --bulma-text: #B8CFCF;                  /* Body text */
    --bulma-text-l: 77%;
    --bulma-text-weak: #7A9A9A;             /* Muted text */
    --bulma-text-weak-l: 54%;
    --bulma-text-strong: #A0E0E0;           /* Soft cyan text */
    --bulma-text-strong-l: 75%;
    --bulma-text-title-l: 88%;
    
    /* ---- Border Colors ---- */
    --bulma-border: #1F2E3A;                /* Border color */
    --bulma-border-l: 18%;
    --bulma-border-weak: #162236;
    --bulma-border-weak-l: 14%;
    
    /* ---- Primary Color (Cyan/Teal) ---- */
    --bulma-primary: #40D0C0;               /* Primary cyan */
    --bulma-primary-h: 172;
    --bulma-primary-s: 62%;
    --bulma-primary-l: 53%;
    --bulma-primary-light: #1A3A3A;
    --bulma-primary-light-l: 17%;
    --bulma-primary-dark: #30E0C0;          /* Bright aqua hover */
    --bulma-primary-dark-l: 53%;
    --bulma-primary-invert: #0A1220;
    --bulma-primary-on-scheme: #40D0C0;
    
    /* ---- Link Color (Same as Primary) ---- */
    --bulma-link: #40D0C0;
    --bulma-link-h: 172;
    --bulma-link-s: 62%;
    --bulma-link-l: 53%;
    --bulma-link-light: #1A3A3A;
    --bulma-link-light-l: 17%;
    --bulma-link-dark: #30E0C0;
    --bulma-link-dark-l: 53%;
    --bulma-link-invert: #0A1220;
    --bulma-link-on-scheme: #40D0C0;
    --bulma-link-text: #40D0C0;
    --bulma-link-text-hover: #30E0C0;
    
    /* ---- Info Color ---- */
    --bulma-info: #40D0C0;
    --bulma-info-h: 172;
    --bulma-info-s: 62%;
    --bulma-info-l: 53%;
    --bulma-info-light: #1A3A3A;
    --bulma-info-light-l: 17%;
    --bulma-info-dark: #30E0C0;
    --bulma-info-invert: #0A1220;
    --bulma-info-on-scheme: #40D0C0;
    
    /* ---- Success Color ---- */
    --bulma-success: #2FD3A0;               /* Success green */
    --bulma-success-h: 158;
    --bulma-success-s: 64%;
    --bulma-success-l: 51%;
    --bulma-success-light: #1A3A2E;
    --bulma-success-light-l: 17%;
    --bulma-success-dark: #3FE3B0;
    --bulma-success-invert: #0A1220;
    --bulma-success-on-scheme: #2FD3A0;
    
    /* ---- Warning Color ---- */
    --bulma-warning: #FFB020;               /* Warning amber */
    --bulma-warning-h: 40;
    --bulma-warning-s: 100%;
    --bulma-warning-l: 56%;
    --bulma-warning-light: #3A3020;
    --bulma-warning-light-l: 18%;
    --bulma-warning-dark: #FFC040;
    --bulma-warning-invert: #0A1220;
    --bulma-warning-on-scheme: #FFB020;
    
    /* ---- Danger Color ---- */
    --bulma-danger: #E04B4B;                /* Danger red */
    --bulma-danger-h: 0;
    --bulma-danger-s: 70%;
    --bulma-danger-l: 58%;
    --bulma-danger-light: #3A1F1F;
    --bulma-danger-light-l: 17%;
    --bulma-danger-dark: #F05B5B;
    --bulma-danger-invert: #fff;
    --bulma-danger-on-scheme: #E04B4B;
    
    /* ---- Light/Dark Shades ---- */
    --bulma-light: #1F2E3A;
    --bulma-light-l: 18%;
    --bulma-light-invert: #A0E0E0;
    --bulma-dark: #A0E0E0;
    --bulma-dark-l: 75%;
    --bulma-dark-invert: #0A1220;
    --bulma-white: #B8CFCF;
    --bulma-white-invert: #0A1220;
    --bulma-black: #0A1220;
    --bulma-black-invert: #B8CFCF;
    
    /* ---- Hover/Active State Deltas ---- */
    --bulma-hover-background-l-delta: 5%;
    --bulma-active-background-l-delta: 10%;
    --bulma-hover-border-l-delta: 10%;
    --bulma-active-border-l-delta: 20%;
    --bulma-hover-color-l-delta: 5%;
    --bulma-active-color-l-delta: 10%;
    
    /* ---- Shadow ---- */
    --bulma-shadow-h: 172;
    --bulma-shadow-s: 50%;
    --bulma-shadow-l: 10%;
    --bulma-shadow: hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.3);
    
    /* ---- Focus Ring ---- */
    --bulma-focus-h: 172;
    --bulma-focus-s: 62%;
    --bulma-focus-l: 53%;
    --bulma-focus-offset: 2px;
    --bulma-focus-style: solid;
    --bulma-focus-width: 2px;
    --bulma-focus-shadow-size: 0 0 0 0.125em;
    --bulma-focus-shadow-alpha: 0.25;
}

/* ---- Button Base Styling ---- */
.button {
    --bulma-button-background-l: 10%;
    --bulma-button-background-l-delta: 0%;
    --bulma-button-border-l: 18%;
    --bulma-button-border-l-delta: 0%;
    --bulma-button-color-l: 75%;
    --bulma-button-outer-shadow-h: 0;
    --bulma-button-outer-shadow-s: 0%;
    --bulma-button-outer-shadow-l: 0%;
    --bulma-button-outer-shadow-a: 0;
    background-color: #101B2D;
    border-color: #1F2E3A;
    color: #A0E0E0;
}

.button:hover {
    background-color: #162236;
    border-color: #2A3E4A;
    color: #B0F0F0;
}

.button:active,
.button.is-active {
    background-color: #1A2840;
    border-color: #40D0C0;
    color: #40D0C0;
}

.button:focus,
.button.is-focused {
    border-color: #40D0C0;
    box-shadow: 0 0 0 0.125em rgba(64, 208, 192, 0.25);
}

/* ---- Navbar Styling ---- */
.navbar {
    background-color: #0A1220 !important;
    border-bottom: 1px solid #1F2E3A;
}

.navbar-item,
.navbar-link {
    color: #B8CFCF !important;
}

.navbar-item:hover,
.navbar-link:hover {
    background-color: #101B2D !important;
    color: #40D0C0 !important;
}

.navbar-burger span {
    background-color: #40D0C0 !important;
}

.navbar-dropdown {
    background-color: #101B2D;
    border-color: #1F2E3A;
}

.navbar-dropdown .navbar-item:hover {
    background-color: #162236 !important;
}

.navbar-divider {
    background-color: #1F2E3A;
}

/* ---- Card Styling ---- */
.card {
    background-color: #101B2D;
    border: 1px solid #1F2E3A;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card-header {
    background-color: #0A1220;
    border-bottom: 1px solid #1F2E3A;
    box-shadow: none;
}

.card-header-title {
    color: #A0E0E0;
}

.card-content {
    background-color: #101B2D;
}

.card-footer {
    background-color: #0A1220;
    border-top: 1px solid #1F2E3A;
}

.card-footer-item {
    color: #B8CFCF;
}

.card-footer-item:hover {
    background-color: #162236;
    color: #40D0C0;
}

/* ---- Box Styling ---- */
.box {
    background-color: #101B2D;
    border: 1px solid #1F2E3A;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ---- Panel Styling ---- */
.panel {
    background-color: #101B2D;
    border: 1px solid #1F2E3A;
}

.panel-heading {
    background-color: #0A1220;
    border-bottom: 1px solid #1F2E3A;
    color: #A0E0E0;
}

.panel-block {
    border-bottom: 1px solid #1F2E3A;
    color: #B8CFCF;
}

.panel-block:hover {
    background-color: #162236;
}

.panel-block.is-active {
    background-color: #1A3A3A;
    border-left-color: #40D0C0;
    color: #40D0C0;
}

.panel-tabs a {
    color: #7A9A9A;
}

.panel-tabs a:hover {
    color: #40D0C0;
}

.panel-tabs a.is-active {
    border-bottom-color: #40D0C0;
    color: #40D0C0;
}

/* ---- Table Styling ---- */
.table {
    background-color: #101B2D;
    color: #B8CFCF;
}

.table th {
    color: #A0E0E0;
    border-color: #1F2E3A !important;
}

.table td {
    border-color: #1F2E3A !important;
}

.table thead th {
    background-color: #0A1220;
    border-bottom: 2px solid #1F2E3A !important;
}

.table tbody tr:hover {
    background-color: #162236;
}

.table.is-striped tbody tr:nth-child(even) {
    background-color: #0D1825;
}

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

/* ---- Form Input Styling ---- */
.input,
.textarea,
.select select {
    background-color: #0A1220;
    border-color: #1F2E3A;
    color: #B8CFCF;
}

.input::placeholder,
.textarea::placeholder {
    color: #7A9A9A;
}

.input:hover,
.textarea:hover,
.select select:hover {
    border-color: #2A3E4A;
}

.input:focus,
.textarea:focus,
.select select:focus,
.input.is-focused,
.textarea.is-focused {
    border-color: #40D0C0;
    box-shadow: 0 0 0 0.125em rgba(64, 208, 192, 0.25);
}

.label {
    color: #A0E0E0;
}

.help {
    color: #7A9A9A;
}

.select::after {
    border-color: #40D0C0;
}

/* ---- Checkbox and Radio Styling ---- */
.checkbox,
.radio {
    color: #B8CFCF;
}

.checkbox:hover,
.radio:hover {
    color: #40D0C0;
}

/* ---- Notification Styling ---- */
.notification {
    background-color: #101B2D;
    border: 1px solid #1F2E3A;
    color: #B8CFCF;
}

.notification.is-light {
    background-color: #162236;
}

/* ---- Tag Styling ---- */
.tag {
    background-color: #1F2E3A;
    color: #B8CFCF;
}

/* ---- Tabs Styling ---- */
.tabs {
    border-bottom-color: #1F2E3A;
}

.tabs a {
    border-bottom-color: #1F2E3A;
    color: #7A9A9A;
}

.tabs a:hover {
    border-bottom-color: #40D0C0;
    color: #40D0C0;
}

.tabs li.is-active a {
    border-bottom-color: #40D0C0;
    color: #40D0C0;
}

.tabs.is-boxed a {
    border-color: #1F2E3A;
}

.tabs.is-boxed a:hover {
    background-color: #162236;
}

.tabs.is-boxed li.is-active a {
    background-color: #101B2D;
    border-color: #1F2E3A;
    border-bottom-color: transparent;
}

/* ---- Menu Styling ---- */
.menu-label {
    color: #7A9A9A;
}

.menu-list a {
    color: #B8CFCF;
}

.menu-list a:hover {
    background-color: #162236;
    color: #40D0C0;
}

.menu-list a.is-active {
    background-color: #1A3A3A;
    color: #40D0C0;
}

/* ---- Modal Styling ---- */
.modal-card {
    border: 1px solid #1F2E3A;
}

.modal-card-head {
    background-color: #0A1220;
    border-bottom: 1px solid #1F2E3A;
}

.modal-card-title {
    color: #A0E0E0;
}

.modal-card-body {
    background-color: #101B2D;
    color: #B8CFCF;
}

.modal-card-foot {
    background-color: #0A1220;
    border-top: 1px solid #1F2E3A;
}

.modal-background {
    background-color: rgba(0, 0, 0, 0.8);
}

/* ---- Message Styling ---- */
.message {
    background-color: #101B2D;
}

.message-header {
    background-color: #0A1220;
    color: #A0E0E0;
}

.message-body {
    background-color: #101B2D;
    border-color: #1F2E3A;
    color: #B8CFCF;
}

/* ---- Dropdown Styling ---- */
.dropdown-content {
    background-color: #101B2D;
    border: 1px solid #1F2E3A;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dropdown-item {
    color: #B8CFCF;
}

.dropdown-item:hover {
    background-color: #162236;
    color: #40D0C0;
}

.dropdown-divider {
    background-color: #1F2E3A;
}

/* ---- Progress Bar Styling ---- */
.progress {
    background-color: #1F2E3A;
}

/* ---- Breadcrumb Styling ---- */
.breadcrumb a {
    color: #40D0C0;
}

.breadcrumb a:hover {
    color: #30E0C0;
}

.breadcrumb li.is-active a {
    color: #B8CFCF;
}

.breadcrumb li + li::before {
    color: #7A9A9A;
}

/* ---- Pagination Styling ---- */
.pagination-link,
.pagination-previous,
.pagination-next {
    background-color: #101B2D;
    border-color: #1F2E3A;
    color: #B8CFCF;
}

.pagination-link:hover,
.pagination-previous:hover,
.pagination-next:hover {
    background-color: #162236;
    border-color: #2A3E4A;
    color: #40D0C0;
}

.pagination-link.is-current {
    background-color: #40D0C0;
    border-color: #40D0C0;
    color: #0A1220;
}

.pagination-ellipsis {
    color: #7A9A9A;
}

/* ---- Title/Subtitle Styling ---- */
.title {
    color: #A0E0E0;
}

.subtitle {
    color: #B8CFCF;
}

/* ---- Content Styling ---- */
.content {
    color: #B8CFCF;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    color: #A0E0E0;
}

.content a {
    color: #40D0C0;
}

.content a:hover {
    color: #30E0C0;
}

.content blockquote {
    background-color: #101B2D;
    border-left-color: #40D0C0;
}

.content code {
    background-color: #162236;
    color: #40D0C0;
}

.content pre {
    background-color: #0A1220;
}

.content hr {
    background-color: #1F2E3A;
}

/* ---- Hero Styling ---- */
.hero {
    background-color: #0A1220;
}

.hero.is-dark {
    background-color: #0A1220;
}

.hero .title {
    color: #A0E0E0;
}

.hero .subtitle {
    color: #B8CFCF;
}

/* ---- Footer Styling ---- */
.footer {
    background-color: #0A1220;
    border-top: 1px solid #1F2E3A;
    color: #7A9A9A;
}

/* ---- Section Styling ---- */
.section {
    background-color: #0A1220;
}

/* ---- File Upload Styling ---- */
.file-cta {
    background-color: #101B2D;
    border-color: #1F2E3A;
    color: #B8CFCF;
}

.file-cta:hover {
    background-color: #162236;
    color: #40D0C0;
}

.file-name {
    background-color: #0A1220;
    border-color: #1F2E3A;
    color: #B8CFCF;
}

/* ---- Delete Button ---- */
.delete {
    background-color: rgba(64, 208, 192, 0.2);
}

.delete:hover {
    background-color: rgba(64, 208, 192, 0.3);
}

/* ---- Icon Styling ---- */
.icon {
    color: #A0E0E0;
}

/* ---- Level Styling ---- */
.level-item .heading {
    color: #7A9A9A;
}

.level-item .title {
    color: #A0E0E0;
}

/* ============================================
   LAYOUT STYLES
   ============================================ */

html, body {
    min-height: 100vh;
    background-color: #0A1220;
}

body {
    display: flex;
    flex-direction: column;
    background-color: #0A1220;
}

main {
    flex: 1;
}

.logo {
    max-height: 30px;
    width: auto;
}

@media screen and (max-width: 768px) {
    .logo {
        max-height: 24px;
    }
}

.hero-background {
    background-image: url('../images/planet-bkg.svg');
    background-size: cover;
    background-position: 100% 0%;
    background-repeat: no-repeat;
}

.title, .subtitle {
    max-width: 30rem;
}

.card {
    max-width: 45%;
    min-width: 20rem;
}

.welcome {
    max-width: 30%;
    min-width: 20rem;
}

.panel {
    max-width: 60%;
    min-width: 20rem;
}

.card-header-title, .panel-heading {
    line-height: normal;
    width: 100%;
    display: flex;
    justify-content: center;
}

.dashboard-card {
    max-width: 100%;
    min-width: 20rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.dashboard-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1.5rem;
    max-width: 1800px;
    margin: 0 auto;
}

.dashboard-left {
    flex: 1;
    min-width: 400px;
    max-width: 600px;
}

.dashboard-right {
    flex: 2;
    min-width: 600px;
    max-width: 900px;
}

@media screen and (max-width: 768px) {
    .dashboard-container {
        gap: 1rem;
    }
    .dashboard-left,
    .dashboard-right {
        min-width: 100%;
        max-width: 100%;
    }
}

.range-wrapper {
    position: relative;
    width: 100%;
    padding: 15px 0;
}

.tab-content {
    display: block;
}

.tab-content[style*="display: none"] {
    display: none !important;
}

/* ============================================
   SEMANTIC BUTTON VARIANTS (via data attributes)
   These provide visual distinction for specific actions
   ============================================ */

/* Delete/Danger action buttons */
button[id*="delete"],
button[class*="delete-"],
.delete-action {
    background-color: rgba(224, 75, 75, 0.15) !important;
    border-color: #E04B4B !important;
    color: #E04B4B !important;
}

button[id*="delete"]:hover,
button[class*="delete-"]:hover,
.delete-action:hover {
    background-color: rgba(224, 75, 75, 0.25) !important;
    border-color: #F05B5B !important;
    color: #F05B5B !important;
}

/* Confirm buttons in modals (typically dangerous) */
button[id*="confirm-delete"],
#confirm-delete {
    background-color: #E04B4B !important;
    border-color: #E04B4B !important;
    color: #fff !important;
}

button[id*="confirm-delete"]:hover,
#confirm-delete:hover {
    background-color: #F05B5B !important;
    border-color: #F05B5B !important;
}

/* Primary action buttons - stand out more */
.button.is-dark {
    background-color: #40D0C0 !important;
    border-color: #40D0C0 !important;
    color: #0A1220 !important;
}

.button.is-dark:hover {
    background-color: #30E0C0 !important;
    border-color: #30E0C0 !important;
    color: #0A1220 !important;
}

.button.is-dark:active,
.button.is-dark.is-active {
    background-color: #50E0D0 !important;
    border-color: #50E0D0 !important;
}

/* Secondary/Cancel buttons */
.button.is-light {
    background-color: #1F2E3A !important;
    border-color: #2A3E4A !important;
    color: #B8CFCF !important;
}

.button.is-light:hover {
    background-color: #2A3E4A !important;
    border-color: #3A4E5A !important;
    color: #A0E0E0 !important;
}

/* Static buttons (non-interactive) */
.button.is-static {
    background-color: #0A1220 !important;
    border-color: #1F2E3A !important;
    color: #7A9A9A !important;
    pointer-events: none;
}

/* Outlined button variant */
.button.is-outlined {
    background-color: transparent !important;
    border-color: #40D0C0 !important;
    color: #40D0C0 !important;
}

.button.is-outlined:hover {
    background-color: rgba(64, 208, 192, 0.1) !important;
    border-color: #30E0C0 !important;
    color: #30E0C0 !important;
}

/* Small copy buttons */
.copy-btn {
    background-color: #162236 !important;
    border-color: #1F2E3A !important;
    color: #A0E0E0 !important;
}

.copy-btn:hover {
    background-color: #1A3A3A !important;
    border-color: #40D0C0 !important;
    color: #40D0C0 !important;
}

/* ============================================
   TEXT AND BACKGROUND COLOR HELPERS
   Ensure semantic colors work with dark theme
   ============================================ */

/* Text Colors */
.has-text-primary {
    color: #40D0C0 !important;
}

.has-text-link {
    color: #40D0C0 !important;
}

.has-text-info {
    color: #40D0C0 !important;
}

.has-text-success {
    color: #2FD3A0 !important;
}

.has-text-warning {
    color: #FFB020 !important;
}

.has-text-danger {
    color: #E04B4B !important;
}

.has-text-dark {
    color: #A0E0E0 !important;
}

.has-text-light {
    color: #B8CFCF !important;
}

.has-text-white {
    color: #B8CFCF !important;
}

.has-text-grey,
.has-text-grey-light,
.has-text-grey-dark {
    color: #7A9A9A !important;
}

/* Background Colors */
.has-background-primary {
    background-color: #40D0C0 !important;
}

.has-background-primary-light {
    background-color: #1A3A3A !important;
}

.has-background-primary-dark {
    background-color: #2A9A8A !important;
}

.has-background-link {
    background-color: #40D0C0 !important;
}

.has-background-link-dark {
    background-color: #2A9A8A !important;
}

.has-background-info {
    background-color: #40D0C0 !important;
}

.has-background-info-light {
    background-color: #1A3A3A !important;
}

.has-background-info-dark {
    background-color: #2A8A8A !important;
}

.has-background-success {
    background-color: #2FD3A0 !important;
}

.has-background-success-light {
    background-color: #1A3A2E !important;
}

.has-background-success-dark {
    background-color: #1F9070 !important;
}

.has-background-warning {
    background-color: #FFB020 !important;
}

.has-background-warning-light {
    background-color: #3A3020 !important;
}

.has-background-warning-dark {
    background-color: #C08010 !important;
}

.has-background-danger {
    background-color: #E04B4B !important;
}

.has-background-danger-light {
    background-color: #3A1F1F !important;
}

.has-background-danger-dark {
    background-color: #A03535 !important;
}

.has-background-dark {
    background-color: #0A1220 !important;
}

.has-background-light {
    background-color: #1F2E3A !important;
}

.has-background-white,
.has-background-white-bis,
.has-background-white-ter {
    background-color: #0A1220 !important;
}

.has-background-grey-dark,
.has-background-grey-darker {
    background-color: #162236 !important;
}

/* Text colors for colored backgrounds - ensure contrast */
.has-text-white {
    color: #E0F0F0 !important;
}

.has-text-white-bis,
.has-text-white-ter {
    color: #B8CFCF !important;
}

/* ============================================
   SCROLLBAR STYLING (for webkit browsers)
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0A1220;
}

::-webkit-scrollbar-thumb {
    background: #1F2E3A;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2A3E4A;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #1F2E3A #0A1220;
}

/* ============================================
   SELECTION STYLING
   ============================================ */

::selection {
    background-color: rgba(64, 208, 192, 0.3);
    color: #A0E0E0;
}

::-moz-selection {
    background-color: rgba(64, 208, 192, 0.3);
    color: #A0E0E0;
}