:root {
  --clr-bg:        hsl(222, 20%, 97%);
  --clr-surface:   hsl(0, 0%, 100%);
  --clr-border:    hsl(222, 15%, 90%);
  --clr-accent:    hsl(245, 70%, 58%);
  --clr-accent2:   hsl(165, 60%, 40%);
  --clr-danger:    hsl(0, 72%, 51%);
  --clr-warning:   hsl(38, 92%, 48%);
  --clr-text:      hsl(222, 25%, 15%);
  --clr-muted:     hsl(222, 15%, 55%);
  --clr-past:      hsl(222, 15%, 94%);
  --clr-active:    hsl(45, 100%, 93%);
  --clr-future:    hsl(0, 0%, 100%);
  --clr-pramod:    #0d6efd;
  --clr-remya:     hsl(0, 72%, 51%);
}

[data-theme="dark"] {
  --clr-bg:      hsl(222, 30%, 8%);
  --clr-surface: hsl(222, 25%, 14%);
  --clr-border:  hsl(222, 20%, 25%);
  --clr-text:    hsl(222, 20%, 95%);
  --clr-muted:   hsl(222, 15%, 70%);
  --clr-past:    hsl(222, 25%, 16%);
  --clr-active:  hsl(45, 70%, 20%);
  --clr-future:  hsl(222, 25%, 11%);
  
  --clr-pramod:  #60a5fa; /* light blue */
  --clr-remya:   hsl(0, 85%, 65%);
  
  /* Brighten accents for dark mode readability */
  --clr-accent:  hsl(245, 80%, 75%);
  --clr-accent2: hsl(165, 70%, 50%);
  --clr-danger:  hsl(0, 85%, 65%);
  --clr-warning: hsl(38, 95%, 60%);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-size: 14px;
}

.app-nav { 
    background: var(--clr-surface); 
    border-color: var(--clr-border) !important; 
}
.nav-brand { 
    font-weight: 700; 
    font-size: 1rem; 
    color: var(--clr-accent); 
    text-decoration: none; 
}
.nav-link-item { 
    font-weight: 500; 
    font-size: 0.85rem; 
    color: var(--clr-muted); 
    text-decoration: none; 
    transition: color 0.2s; 
}
.nav-link-item:hover { color: var(--clr-accent); }
.btn-icon { 
    background: none; 
    border: 1px solid var(--clr-border); 
    border-radius: 6px; 
    padding: 4px 8px; 
    cursor: pointer; 
    color: var(--clr-text); 
}
.app-content { padding: 1rem; }

.card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
}

.btn-primary {
    background-color: var(--clr-accent);
    color: #fff;
    border: none;
}
.btn-primary:hover {
    opacity: 0.9;
    color: #fff;
}

/* Overriding bootstrap contextual colors for dark mode */
[data-theme="dark"] .bg-unverified { background-color: hsl(45, 80%, 25%) !important; }
[data-theme="dark"] .bg-unverified .grid-input { color: var(--clr-text) !important; }
[data-theme="dark"] .bg-light { background-color: var(--clr-surface) !important; color: var(--clr-text) !important; }
[data-theme="dark"] .bg-dark { background-color: var(--clr-past) !important; color: var(--clr-text) !important; }
[data-theme="dark"] .text-dark { color: var(--clr-text) !important; }
[data-theme="dark"] .text-primary { color: var(--clr-accent) !important; }
[data-theme="dark"] .text-success { color: var(--clr-accent2) !important; }
[data-theme="dark"] .text-warning { color: var(--clr-warning) !important; }
[data-theme="dark"] .text-danger { color: var(--clr-danger) !important; }
[data-theme="dark"] .text-muted { color: var(--clr-muted) !important; }

/* Grid styling */
.master-grid-container {
    background: var(--clr-surface);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow-x: auto;
    margin-bottom: 2rem;
    border: 1px solid var(--clr-border);
}

.master-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.master-grid th, .master-grid td {
    border-right: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    padding: 0.2rem 0.3rem;
    vertical-align: middle;
}

.master-grid thead th {
    background: var(--clr-past) !important;
    color: var(--clr-text);
    font-weight: 600;
    font-size: 13px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.master-grid .section-header {
    background: var(--clr-past) !important;
    font-weight: 600;
    color: var(--clr-text);
    text-align: left;
}

.master-grid .subtotal-row td {
    background: var(--clr-past) !important;
    font-weight: 600;
}

.master-grid .grand-total-row td {
    background: var(--clr-past) !important;
    color: var(--clr-text) !important;
}

.month-col {
    min-width: 110px;
}
.month-active {
    background: var(--clr-future) !important;
    color: var(--clr-text) !important;
    border-left: 2px solid var(--clr-danger) !important;
    border-right: 2px solid var(--clr-danger) !important;
}
.month-active.block-top {
    border-top: 2px solid var(--clr-danger) !important;
}
.month-active.block-bottom {
    border-bottom: 2px solid var(--clr-danger) !important;
}
.month-active-border-only {
    border-left: 2px solid var(--clr-danger) !important;
    border-right: 2px solid var(--clr-danger) !important;
}
.month-active-border-only.block-top {
    border-top: 2px solid var(--clr-danger) !important;
}
.month-active-border-only.block-bottom {
    border-bottom: 2px solid var(--clr-danger) !important;
}
.month-past {
    background: var(--clr-past) !important;
    color: var(--clr-muted) !important;
}
.month-future {
    background: var(--clr-future) !important;
    color: var(--clr-text) !important;
}

.grid-input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 0.25rem;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    color: var(--clr-text);
    transition: all 0.2s;
    padding: 0.15rem;
}

.grid-input:focus, .grid-input:hover {
    border-color: transparent;
    background: rgba(128, 128, 128, 0.15);
    outline: none;
}

@keyframes savePulse {
    0% { background-color: transparent; }
    50% { background-color: var(--clr-accent2); color: white; }
    100% { background-color: transparent; }
}

.grid-input.saved {
    animation: savePulse 0.5s ease-out;
}

.ratio-badge {
    font-size: 0.7rem;
    background: var(--clr-border);
    padding: 2px 6px;
    border-radius: 12px;
    margin-left: 5px;
    font-weight: bold;
    color: var(--clr-text);
}

.cf-label {
    font-size: 0.7rem;
    color: var(--clr-danger);
    display: block;
    text-align: right;
    margin-top: -5px;
    font-weight: 600;
}

/* Hover-only action buttons */
.hover-action {
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
th:hover .hover-action,
td:hover .hover-action {
    opacity: 1;
    pointer-events: auto;
}

/* Inline add category form - hidden until name label hovered */
.add-cat-form {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.section-header {
    position: relative;
}
.section-header:hover .add-cat-form {
    opacity: 1;
    pointer-events: auto;
}

/* Category row label */
.cat-label-cell {
    position: relative;
    white-space: nowrap;
}

/* Hidden Row Styles */
tr.hidden-row { opacity: 0.5; height: 4px; }
tr.hidden-row td { padding: 0 4px !important; height: 4px; border-bottom: 1px dashed var(--clr-border) !important; overflow: hidden; }
tr.hidden-row .cat-name-text, tr.hidden-row .btn-hide-row { display: none; }
tr.hidden-row:hover .cat-name-text { display: inline-block; font-size: 0.65rem; font-weight: normal; font-style: italic; }
tr.hidden-row:hover .btn-hide-row { display: inline-block; }
tr.hidden-row:hover td { height: 16px; }
tr.hidden-row .grid-input, tr.hidden-row .delete-form { display: none !important; }

/* Verification Highlight */
.bg-unverified { background-color: #fef08a !important; }