/* ========================================
   GRAYSCALE DESIGN SYSTEM UTILITIES
   ======================================== */

/* ===================
   BADGE OVERRIDES
   =================== */

/* Neutral badges with accent borders */
.badge-neutral {
    background-color: var(--active-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    font-weight: 500;
}

/*
 * NOTE: We intentionally do NOT override Bootstrap badge colors globally.
 * Role badges (Superadmin, Admin, User) need distinct colors for clarity.
 * Use the badge-*-accent classes below when you want grayscale badges
 * with semantic accent borders.
 */

/* Semantic badges with left border accent */
.badge-success-accent {
    background-color: var(--hover-bg);
    color: var(--text-secondary);
    border-left: 3px solid #10b981;
}

.badge-warning-accent {
    background-color: var(--hover-bg);
    color: var(--text-secondary);
    border-left: 3px solid #f59e0b;
}

.badge-danger-accent {
    background-color: var(--hover-bg);
    color: var(--text-secondary);
    border-left: 3px solid #ef4444;
}

.badge-info-accent {
    background-color: var(--hover-bg);
    color: var(--text-secondary);
    border-left: 3px solid #3b82f6;
}

/* ===================
   ALERT OVERRIDES
   =================== */

/* Base neutral alert */
.alert-neutral {
    background-color: var(--hover-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--text-muted);
}

/* Override Bootstrap alert colors */
.alert.alert-success {
    background-color: var(--hover-bg) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-default) !important;
    border-left: 4px solid #10b981 !important;
}

.alert.alert-warning {
    background-color: var(--hover-bg) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-default) !important;
    border-left: 4px solid #f59e0b !important;
}

.alert.alert-danger {
    background-color: var(--hover-bg) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-default) !important;
    border-left: 4px solid #ef4444 !important;
}

.alert.alert-info {
    background-color: var(--hover-bg) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-default) !important;
    border-left: 4px solid #3b82f6 !important;
}

.alert.alert-primary {
    background-color: var(--hover-bg) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-default) !important;
    border-left: 4px solid var(--text-primary) !important;
}

/* ===================
   CARD OVERRIDES
   =================== */

/* Standard grayscale card — depth (shadow/radius) comes from app.css tokens. */
.card {
    background-color: var(--content-bg);
    border: 1px solid var(--border-default);
}

.card-header {
    background-color: var(--hover-bg);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-primary);
}

/* Override Bootstrap card header colors */
.card-header.bg-primary,
.card-header.bg-secondary,
.card-header.bg-success,
.card-header.bg-warning,
.card-header.bg-danger,
.card-header.bg-info {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

/* Metric cards with accent borders */
.metric-card {
    background-color: var(--content-bg);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--text-muted);
}

.metric-card.metric-success {
    border-left-color: #10b981;
}

.metric-card.metric-warning {
    border-left-color: #f59e0b;
}

.metric-card.metric-danger {
    border-left-color: #ef4444;
}

.metric-card.metric-info {
    border-left-color: #3b82f6;
}

.metric-card .metric-value {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 700;
}

.metric-card .metric-label {
    color: var(--text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===================
   BUTTON OVERRIDES
   =================== */

/* Grayscale primary button */
.btn-grayscale-primary {
    background-color: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--content-bg);
}

.btn-grayscale-primary:hover {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
    color: var(--content-bg);
}

/* Grayscale outline button */
.btn-grayscale-outline {
    background-color: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}

.btn-grayscale-outline:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.btn-grayscale-outline.active {
    background-color: var(--active-bg);
    color: var(--text-primary);
    font-weight: 600;
}

/* Filter button group */
.btn-filter {
    background-color: var(--content-bg);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
}

.btn-filter:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.btn-filter.active {
    background-color: var(--active-bg);
    color: var(--text-primary);
    border-color: var(--active-border);
    font-weight: 600;
}

/* ===================
   TEXT COLOR UTILITIES
   =================== */

/* Override Bootstrap text colors for consistency */
.text-primary {
    color: var(--text-primary) !important;
}

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

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

/* Semantic accent colors (use sparingly) */
.text-accent-success {
    color: #10b981 !important;
}

.text-accent-warning {
    color: #f59e0b !important;
}

.text-accent-danger {
    color: #ef4444 !important;
}

.text-accent-info {
    color: #3b82f6 !important;
}

/* ===================
   ICON STYLING
   =================== */

/* Neutral icon container */
.icon-neutral {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--hover-bg);
    border-radius: 0.5rem;
    color: var(--text-secondary);
}

.icon-neutral.icon-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
}

.icon-neutral.icon-lg {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
}

/* ===================
   TABLE STYLING
   =================== */

.table {
    border-color: var(--border-default);
}

.table thead th {
    background-color: var(--hover-bg);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-default);
    font-weight: 600;
}

.table tbody tr:hover {
    background-color: var(--hover-bg);
}

/* ===================
   FORM STYLING
   =================== */

.form-control:focus,
.form-select:focus {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 0.2rem rgba(55, 65, 81, 0.15);
}

/* ===================
   STATUS INDICATORS
   =================== */

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-muted);
}

.status-dot.status-active {
    background-color: #10b981;
}

.status-dot.status-pending {
    background-color: #f59e0b;
}

.status-dot.status-inactive {
    background-color: #ef4444;
}

/* ===================
   PROGRESS INDICATORS
   =================== */

.progress {
    background-color: var(--hover-bg);
    border-radius: 0.25rem;
}

.progress-bar {
    background-color: var(--text-primary);
}

/* ===================
   TIMELINE FIXES
   =================== */

/* Hide timeline connector line that overlaps cards */
.timeline::before {
    display: none !important;
    content: none !important;
}


/* ===================
   EXPENSE OVERVIEW DRILL-DOWN
   =================== */

/* One line per movement. The columns are fixed so the dates and the amounts hold a column down
   the list; everything that can be long - the description, the route - shares what is left and
   is cut rather than wrapped, because a wrapped row breaks the alignment the list is for.
   Global rather than scoped to one component: the transaction list and the bank movement list
   are the same row wearing different contents, and two copies would drift. */
.drill-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drill-rows > li {
    position: relative;
    padding: 7px 10px 9px;
    border-bottom: 1px solid var(--border-default);
}

.drill-rows > li:last-child {
    border-bottom: 0;
}

.drill-rows > li:hover {
    background-color: var(--hover-bg);
}

.drill-rows .row-line {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.drill-rows .row-date {
    flex: none;
    width: 38px;
    font-size: 11px;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.drill-rows .row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 9px;
    color: inherit;
    text-decoration: none;
}

.drill-rows .row-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58%;
}

.drill-rows .row-label.unknown {
    font-weight: 400;
    font-style: italic;
    color: var(--text-muted);
}

.drill-rows .row-main:hover .row-label {
    text-decoration: underline;
}

.drill-rows .row-route {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    color: var(--text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The chip a bank movement wears instead of a route. */
.drill-rows .row-cat {
    flex: none;
    font-size: 11px;
    color: var(--text-muted);
    border: 1px solid var(--border-default);
    border-radius: 5px;
    padding: 1px 6px;
    white-space: nowrap;
}

.drill-rows .row-jumps {
    flex: none;
    display: flex;
    gap: 4px;
}

/* The jump to the bank movement, and the jump to the invoice. Shown only when there is one to
   go to, so an empty slot says "nothing behind this row" rather than "button broken". */
.drill-rows .jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background-color: var(--content-bg);
    color: var(--text-muted);
    font-size: 11px;
    text-decoration: none;
}

.drill-rows .jump:hover {
    background-color: var(--hover-bg);
    border-color: var(--text-subtle);
    color: var(--text-primary);
}

.drill-rows .jump:focus-visible {
    outline: 2px solid var(--sigo-primary);
    outline-offset: 1px;
}

.drill-rows .row-amt {
    flex: none;
    width: 104px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.drill-rows .row-share {
    flex: none;
    width: 32px;
    text-align: right;
    font-size: 11px;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

/* How much of the clicked bar this one row is, drawn where a third line of text used to be. */
.drill-rows .share-rule {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--hover-bg);
}

.drill-rows .share-rule > i {
    display: block;
    height: 100%;
    border-radius: 2px;
    opacity: .55;
}

/* The list and the graphs beside it. The rail keeps its width and the list takes the rest; on a
   narrow window the rail drops under the list rather than squeezing both. */
.drill-grid {
    display: grid;
    /* Three parts list to two parts graphs. The rail used to be a fixed 328px, which read as an
       afterthought beside a list twice its width; the graphs are the other half of the answer
       and are sized like it. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 16px;
    align-items: start;
    margin-top: 12px;
}

@media (max-width: 1100px) {
    .drill-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The rail follows the reader down the list, so the three graphs stay beside whichever row is
   being read. Sticky only where it has room to be. */
.drill-rail {
    position: sticky;
    top: 76px;
}

@media (max-width: 1100px) {
    .drill-rail {
        position: static;
    }
}

.drill-rail .rail-section {
    padding: 13px 14px 14px;
    border-bottom: 1px solid var(--border-default);
}

.drill-rail .rail-section:last-child {
    border-bottom: 0;
}

.drill-rail .rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.drill-rail .rail-head span {
    font-size: 12px;
    color: var(--text-muted);
}

.drill-rail .rail-head b {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.drill-rail .rail-pie {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drill-rail .rail-legend {
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.drill-rail .rail-legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    padding: 2px 0;
}

.drill-rail .rail-legend .dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.drill-rail .rail-legend .name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.drill-rail .rail-legend .value {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* The Options button and the panel it opens. The backdrop is a transparent sheet under the
   panel and over everything else, so a click anywhere outside closes it without a document
   listener to unsubscribe. */
.opts-menu {
    position: relative;
}

.opts-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.opts-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 7px);
    z-index: 1050;
    width: 300px;
    padding: 6px;
    background-color: var(--content-bg);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
}

.opts-pop:focus {
    outline: none;
}

.opts-group + .opts-group {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border-default);
}

.opts-cap {
    padding: 6px 10px 2px;
    font-size: 11px;
    color: var(--text-subtle);
}

/* A switch and its explanation, as one row of the panel. */
.opts-switch {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 7px;
}

.opts-switch:hover {
    background-color: var(--hover-bg);
}

.opts-switch .form-check {
    margin: 0;
    min-height: 0;
}

.opts-switch .opts-text b {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.opts-switch .opts-text span {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
}

.opts-action {
    padding: 4px 10px 8px;
}

/* The panel charts' tooltip. Lives on the body, not inside the card, so a list of ten
   movements is never cut off by a 150px pie or by the rail around it. */
.fund-tip {
    position: fixed;
    z-index: 1080;
    min-width: 230px;
    max-width: min(460px, 92vw);
    padding: 9px 11px 10px;
    background-color: var(--content-bg);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s;
}

.fund-tip .h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 6px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border-default);
    font-size: 12px;
    color: var(--text-muted);
}

.fund-tip .h b {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fund-tip ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fund-tip li {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 11.5px;
    padding: 1.5px 0;
}

.fund-tip .d {
    flex: none;
    width: 34px;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.fund-tip .l {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.fund-tip .a {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.fund-tip .a.pos { color: #008300; }
.fund-tip .a.neg { color: #e02d2d; }

[data-bs-theme="dark"] .fund-tip .a.pos { color: #34c759; }
[data-bs-theme="dark"] .fund-tip .a.neg { color: #ff5a5a; }