@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

:root {
    --mantine-primary-color-filled: #ffd43b;
    --ag-accent-color: #ffd43b;
    --ag-selected-row-background-color: rgba(255, 212, 59, 0.1);
    --ag-range-selection-border-color: #ffd43b;
    --ag-input-focus-border-color: #ffd43b;
    --ag-input-focus-box-shadow: 0 0 0 1px #ffd43b;
    --ag-checkbox-checked-color: #ffd43b;
    --ag-toggle-button-on-background-color: #ffd43b;
    --ag-toggle-button-on-border-color: #ffd43b;
    --brand-font: 'Roboto', sans-serif;
    --ag-background-color: #0a0a0a;
    --ag-header-background-color: #1a1a1a;
    --ag-odd-row-background-color: #0a0a0a;
    --ag-row-hover-color: #1a1a1a;
    --ag-foreground-color: #ffffff;
    --ag-border-color: rgba(255, 255, 255, 0.2);
    --ag-secondary-border-color: rgba(255, 255, 255, 0.1);
}


*:not(.ag-theme-quartz *):not([class^="ag-"]):not([class*=" ag-"]) {
    font-family: var(--brand-font) !important;
}

html {
    background-color: #000000 !important;
}

body {
    font-family: var(--brand-font) !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    background-color: #000000 !important;
}

._dash-loading {
    margin: auto;
    color: transparent;
    width: 100vw;
    height: 100vh;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

.clipboard-icon {
    font-size: 0; /* hides text but keeps button clickable */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

#copy-current-portfolio-accounts.clipboard-icon::before {
    content: url("https://api.iconify.design/iconoir/copy.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    filter: brightness(0) invert(1);
}

#copy-current-portfolio-link.clipboard-icon::before {
    content: url("https://api.iconify.design/solar/link-linear.svg");
    width: 20px;
    height: 20px;
    display: inline-block;
    filter: brightness(0) invert(1);
}


/* Transparent TagsInput with white text */
.mantine-TextInput-input {
    background-color: transparent !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.mantine-TextInput-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.mantine-TextInput-input:focus {
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.mantine-Input-input {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.mantine-Input-input:focus {
    border-color: rgba(255, 255, 255, 0.8) !important;
}

.ag-theme-quartz .ag-header {
    /*background-color: rgba(0, 41, 91) !important;*/
    /*color: #ffffff !important;*/
    /*backdrop-filter: blur(10px) !important;*/
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;*/
}

.ag-theme-quartz {
    border-radius: 0 !important;
    overflow: hidden !important;
    --ag-value-change-delta-down-color: rgb(255, 0, 0); /* Red for decreases */
    --ag-value-change-delta-up-color: rgb(0, 255, 0); /* Green for increases */
    --ag-header-height: 28px !important; /* Compact header height */
    background-color: #0a0a0a !important;
    --ag-accent-color: #ffd43b !important;
    --ag-selected-row-background-color: rgba(255, 212, 59, 0.1) !important;
    --ag-range-selection-border-color: #ffd43b !important;
    --ag-input-focus-border-color: #ffd43b !important;
    --ag-input-focus-box-shadow: 0 0 0 1px #ffd43b !important;
    --ag-checkbox-checked-color: #ffd43b !important;
    --ag-toggle-button-on-background-color: #ffd43b !important;
    --ag-toggle-button-on-border-color: #ffd43b !important;
    --ag-background-color: #0a0a0a !important;
    --ag-header-background-color: #1a1a1a !important;
    --ag-odd-row-background-color: #0a0a0a !important;
    --ag-row-hover-color: #1a1a1a !important;
    --ag-foreground-color: #ffffff !important;
    --ag-border-color: rgba(255, 255, 255, 0.2) !important;
    --ag-secondary-border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Transaction summary cell styling - row spanning */
.ag-theme-quartz .transaction-summary-cell {
    vertical-align: top !important;
}

/* Border above nonce 0 operations (transaction boundaries) */
.ag-theme-quartz .transaction-boundary-row {
    border-top: 2px solid rgba(255, 212, 59, 0.4) !important;
}

/* Border on left of nonce column */
.ag-theme-quartz .nonce-column-cell {
    border-left: 2px solid rgba(255, 212, 59, 0.4) !important;
}

.ag-theme-quartz .ag-header-row {
    min-height: 28px !important;
    height: 28px !important;
}

.ag-theme-quartz .ag-header-cell {
    line-height: 28px !important;
}

.ag-theme-quartz .ag-root-wrapper {
    background-color: #0a0a0a !important;
}

.ag-theme-quartz .ag-root {
    background-color: #0a0a0a !important;
}

.ag-theme-quartz .ag-body-viewport {
    background-color: #0a0a0a !important;
}

.ag-theme-quartz .ag-row {
    background-color: #0a0a0a !important;
}

.ag-theme-quartz .ag-row-even {
    background-color: #0a0a0a !important;
}

.ag-theme-quartz .ag-row-odd {
    background-color: #0a0a0a !important;
}

/* Specific row styles - must come after general row styles */
.ag-theme-quartz .saucerswap-row {
    background-color: rgba(148, 252, 109, 0.15) !important;
}

.ag-theme-quartz .hliquity-row {
    background-color: rgba(58, 131, 216, 0.15) !important;
}

.ag-theme-quartz .bonzo-finance-row {
    background-color: rgba(250, 250, 250, 0.15) !important;
}

/* Mantine components text color */
.mantine-Text-root {
    color: #ffffff;
    font-family: var(--brand-font) !important;
    font-weight: 400;
}

.mantine-Text-root[data-dimmed="true"] {
    color: #909296 !important;
}

.mantine-Paper-root {
    background-color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.mantine-GridCol-root {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.mantine-AppShell-root {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-color: #000000 !important;
}

.mantine-AppShell-header {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-color: #000000 !important;
}

.mantine-AppShell-navbar {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-color: #1a1a1a !important;
}

.mantine-AppShell-main {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-color: #000000 !important;
}

.mantine-Chip-label {
    font-family: var(--brand-font) !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
}

.mantine-Checkbox-label {
    color: #ffffff !important;
    font-family: var(--brand-font) !important;
    font-weight: 400 !important;
}

.mantine-Button-root {
    font-family: var(--brand-font) !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
}


/* Section cards for data-dense layout */
.section-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Compact metric card styling */
.metric-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 0;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s, transform 0.2s;
}

.metric-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transform: translateY(-1px);
}


/* AG Grid header text */
.ag-theme-quartz .ag-header {
    font-family: var(--brand-font) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.ag-theme-quartz .ag-header-cell-label {
    font-family: var(--brand-font) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    font-size: 11px !important;
}

.ag-theme-quartz .ag-cell {
    color: #ffffff !important;
    font-family: var(--brand-font) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

/* Negative amount styling - must come after .ag-cell */
.ag-theme-quartz .negative-amount .ag-cell {
    color: #d32f2f !important;
}

.ag-theme-quartz {
    font-family: var(--brand-font) !important;
}


/* AG Grid filter and menu styling */
.ag-theme-quartz .ag-menu {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
}

.ag-theme-quartz .ag-filter {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.ag-theme-quartz .ag-filter-toolpanel-header {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.ag-theme-quartz .ag-filter-toolpanel-body {
    background-color: #1a1a1a !important;
}

.ag-theme-quartz .ag-header .ag-floating-filter-input,
.ag-theme-quartz .ag-header input,
.ag-theme-quartz .ag-filter input,
.ag-theme-quartz .ag-filter select,
.ag-theme-quartz .ag-menu input {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

.ag-theme-quartz .ag-header .ag-floating-filter-input:focus,
.ag-theme-quartz .ag-header input:focus,
.ag-theme-quartz .ag-filter input:focus,
.ag-theme-quartz .ag-filter select:focus,
.ag-theme-quartz .ag-menu input:focus {
    box-shadow: 0 0 0 1px #ffd43b !important;
    border-color: #ffd43b !important;
    outline: none !important;
}

.ag-theme-quartz .ag-filter-apply-panel {
    background-color: #1a1a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ag-theme-quartz .ag-standard-button {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

.ag-theme-quartz .ag-standard-button:hover {
    background-color: #2a2a2a !important;
    border-color: #ffd43b !important;
}

.ag-theme-quartz .ag-tab {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.ag-theme-quartz .ag-tab-selected {
    background-color: #ffd43b !important;
    border-color: #ffd43b !important;
    color: #000000 !important;
}

.ag-theme-quartz .ag-radio-button-input-wrapper {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.ag-theme-quartz .ag-radio-button-input-wrapper.ag-checked {
    border-color: #ffd43b !important;
    background-color: transparent !important;
}

.ag-theme-quartz .ag-radio-button-input-wrapper.ag-checked::after {
    background-color: #ffd43b !important;
}

.ag-theme-quartz .ag-checkbox-input-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background-color: #0a0a0a !important;
    border-radius: 0 !important;
}

.ag-theme-quartz .ag-checkbox-input-wrapper.ag-checked {
    background-color: #ffd43b !important;
    border-color: #ffd43b !important;
}

.ag-theme-quartz .ag-checkbox-input-wrapper.ag-checked::after {
    color: #000000 !important;
}

.ag-theme-quartz .ag-select .ag-picker-field-wrapper {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
}

.ag-theme-quartz .ag-picker-field-display {
    color: #ffffff !important;
}

.ag-theme-quartz .ag-list-item {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.ag-theme-quartz .ag-list-item:hover {
    background-color: #2a2a2a !important;
}

.ag-theme-quartz .ag-list-item-hovered {
    background-color: #2a2a2a !important;
}

.ag-theme-quartz .ag-list-item-selected {
    background-color: rgba(255, 212, 59, 0.2) !important;
    color: #ffd43b !important;
    border-color: #ffd43b !important;
}

.ag-theme-quartz .ag-list-item-selected::before {
    background-color: #ffd43b !important;
}

.ag-theme-quartz .ag-list-item:focus,
.ag-theme-quartz .ag-list-item:focus-visible {
    outline: 2px solid #ffd43b !important;
    outline-offset: -2px !important;
    border-color: #ffd43b !important;
}

.ag-theme-quartz .ag-popup {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
}

.ag-theme-quartz .ag-popup-child {
    background-color: #1a1a1a !important;
}

/* Fix filter icon color when filters are applied */
.ag-theme-quartz .ag-header .ag-icon-filter .ag-filter,
.ag-theme-quartz .ag-header .ag-icon-menu,
.ag-theme-quartz .ag-header .ag-icon,
.ag-theme-quartz .ag-header-cell .ag-icon {
    color: #ffffff !important;
}

.ag-theme-quartz .ag-icon-filter,
.ag-theme-quartz .ag-header-cell .ag-icon-filter {
    color: #ffffff !important;
    opacity: 0.6 !important;
}

.ag-theme-quartz .ag-filter-active .ag-icon-filter,
.ag-theme-quartz .ag-header-cell-filtered .ag-icon-filter {
    color: #ffd43b !important;
    opacity: 1 !important;
}

/* Filter badge (the circle indicator when filter is active) */
.ag-theme-quartz .ag-filter-toolpanel-header .ag-filter-toolpanel-instance-filter-icon,
.ag-theme-quartz .ag-header-cell-filtered .ag-header-icon::after,
.ag-theme-quartz .ag-filter-active::after {
    background-color: #ffd43b !important;
    border-color: #ffd43b !important;
}

.ag-header-cell-label {
    justify-content: center; /* centers header text */
}


/* Brand font styling for titles and headers */
.mantine-Title-root {
    font-family: var(--brand-font);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase ;
    color: #ffffff;
}

/* App title in header */
.mantine-AppShell-header .mantine-Title-root {
    font-family: var(--brand-font);
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.02em;
    color: #ffffff !important;
    text-transform: lowercase;
}

/* Plotly figure fonts */
.js-plotly-plot .plotly text {
    font-family: var(--brand-font) !important;
    font-weight: 400 !important;
}

.js-plotly-plot .gtitle {
    font-family: var(--brand-font) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

.js-plotly-plot .xtitle,
.js-plotly-plot .ytitle {
    font-family: var(--brand-font) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}