:root{
    --txt-clr: #000000;
    --alt-txt-clr: #ffffff;
    --dimm-txt-clr: #999999;
    --bg-clr:#121212;
    --accent-clr:#00ffd5;
    --accent-clr-hvr:#00b496;
    --th-clr: #272727;
    --plane-clr: #1e1e1e;
    --gain-clr: #00ff7f;
    --loss-clr: #ff4c4c; 
    --shadow: rgb(10, 10, 10); 
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}
body { 
    background: var(--bg-clr); 
    color: var(--alt-txt-clr);
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 20px; 
}
a {
    text-decoration: none;
    color: var(--txt-clr);
}

h1 { 
    font-size: 2rem; 
    color: var(--accent-clr); 
    margin-bottom: 10px; 
}
.top-bar { 
    width: 100%; 
    max-width: 1200px; 
    display:flex; 
    justify-content: space-between; 
    align-items:center; 
    margin-bottom: 10px; 
}

.logo {
    width: 100%; 
    max-width: 1200px; 
    display:flex; 
    justify-content: space-between; 
    align-items:center; 
    margin-bottom: 10px;
}

.card { 
    background: #1e1e1e; 
    padding: 20px; 
    border-radius: 16px; 
    box-shadow: 0 8px 24px var(--shadow); 
    width: 100%; 
    max-width: none; 
    margin-bottom: 20px; 
}
/* --- NEW STYLES FOR manage_repeats.html --- */
.main-content-wrapper {
    width: 100%;
    max-width: 1200px;
}
.full-width-card {
    max-width: 100%;
    margin-top: 20px;
}
.back-button {
    font-size: 1.1em;
    color: var(--accent-clr);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    font-weight: bold;
}
.back-button:hover {
    color: var(--accent-clr-hvr);
}
.button-as-link { 
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px; 
    margin: 5px 0; 
    border-radius: 12px; 
    border: none; 
    cursor: pointer; 
    background: var(--accent-clr); 
    color: var(--bg-clr) !important; 
    font-weight: bold; 
    transition: 0.25s; 
    width: 100%;
}
.button-as-link:hover { 
    background: var(--accent-clr); 
}
/* --- END NEW STYLES --- */

/* --- 3-Column Layout (for index.html) --- */
.main-grid {
    width: 100%;
    max-width: 1200px; 
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 20px;
}
.right-column-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    grid-column: 3 / 4; 
}
.main-table-card {
    grid-column: 1 / 2; 
    max-height: 70vh; 
    overflow: hidden;
    padding-bottom: 0; 
}
.chart-card {
    grid-column: 2 / 3;
    max-height: 70vh;
}
.graph-card {
    grid-column: 2 / 4;
    

}

.dates {
    display:flex; 
    gap:10px; 
    margin-bottom: 15px; 
    align-items: flex-end;
    justify-content: flex-start; 
    flex-grow: 0;
    width:100%;
}

#dailyBalanceChart {
    width: 100% !important;
}

.controls-card, .balance-card {
    display:flex;
    width: 100%;    
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    margin-bottom: 20px;
    padding: 2px;
}
.controls-card button {
    width: 32%;
    margin-top: 5px;
    text-decoration: none;
}
.entry-table-scroll {
    overflow-y: auto; 
    max-height: calc(70vh - 250px); 
}
/* --- END 3-Column Layout --- */


select, input { 
    width: 100%; 
    padding: 10px; 
    margin-bottom: 10px; 
    border-radius: 8px; 
    border: none; 
    background: var(--plane-clr); 
    color: var(--alt-txt-clr); 
    outline: none; 
}
input::placeholder { 
    color: rgba(255,255,255,0.5); 
}
button { 
    padding: 10px 20px; 
    margin: 5px 0; 
    border-radius: 12px; 
    border: none; 
    cursor: pointer; 
    background: var(--accent-clr); 
    color: var(--txt-clr); 
    font-weight: bold; 
    transition: 0.25s; 
}
button:hover { 
    background: var(--accent-clr-hvr); 
}
table { 
    width: 100%; 
    border-collapse: collapse; 
    border-radius: 12px; 
    overflow: hidden; 
    table-layout: fixed; 
}
th, td { 
    padding: 12px; 
    text-align: center;
}

th:nth-child(1), td:nth-child(1) {
    text-align: left;
    width: 65%; 
    overflow: hidden; 
}

.main-reason {
    display: block; 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

th:nth-child(2), td:nth-child(2) {
    width: 120px; 
    font-weight: bold; 
}

th:nth-child(3), td:nth-child(3) {
    width: 50px; 
}

th { 
    background: var(--th-clr);
    color: var(--accent-clr); 
    position: sticky; 
    top: 0; 
}
tr { 
    background: var(--plane-clr); 
    transition: background 0.3s; 
    border-radius: 20px;
    cursor: pointer; 
}
tr:hover { 
    background: var(--th-clr); 
}

.category-text {
    display: block;
    font-size: 0.75em;
    color: var(--dimm-txt-clr);
    margin-top: 3px;
    font-style: italic;
}

.income { 
    color: var(--gain-clr); 
}
.expense { 
    color: var(--loss-clr); 
}
#totalBalance { 
    font-size: 1.5em; 
}
#monthBalance { 
    font-size: 1.3em; 
    margin-bottom: 10px; 
}
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.7); 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
}
.modal-content { 
    background: var(--bg-clr); 
    border-radius: 12px; 
    padding: 18px; 
    width: 100%; 
    max-width: 760px; 
    color: var(--alt-txt-clr); 
    box-shadow: 0 8px 32px rgba(0,0,0,0.6); 
}
.small-modal { 
    max-width: 420px; 
}
.close { 
    float: right; 
    font-size: 24px; 
    font-weight: bold; 
    cursor: pointer; 
    color: var(--accent-clr); 
}
.close:hover { 
    color: var(--accent-clr-hvr); 
}
#categoryChart { 
    max-width: 100%; 
    max-height: 100%; 
    margin: 0 auto; 
}
.gray { 
    opacity: 0.45 !important; 
    filter: grayscale(80%); 
}
.manage-scroll { 
    max-height: 480px; /* Increased height for full page */
    overflow:auto; 
    border-radius:8px; 
    margin-top:10px; 
}

.manage-table {
    table-layout: auto; 
    min-width: 740px; 
}

.manage-table td input[type="text"], 
.manage-table td input[type="number"], 
.manage-table td input[type="date"], 
.manage-table td input[list],
.manage-table td select {
    width: 100%; 
    box-sizing: border-box; 
    background:var(--bg-clr); 
    color:var(--alt-txt-clr); 
    padding:6px; 
    border-radius:6px; 
    border:1px solid var(--bg-clr);
    margin-bottom: 0; 
}

.manage-table th, .manage-table td {
    padding: 8px;
    text-align: center;
}
.manage-table th:nth-child(1), .manage-table td:nth-child(1) { width: 8%; } 
.manage-table th:nth-child(2), .manage-table td:nth-child(2) { width: 18%; } 
.manage-table th:nth-child(3), .manage-table td:nth-child(3) { width: 10%; } 
.manage-table th:nth-child(4), .manage-table td:nth-child(4) { width: 12%; } 
.manage-table th:nth-child(5), .manage-table td:nth-child(5) { width: 8%; } 
.manage-table th:nth-child(6), .manage-table td:nth-child(6) { width: 10%; } 
.manage-table th:nth-child(7), .manage-table td:nth-child(7) { width: 10%; } 
.manage-table th:nth-child(8), .manage-table td:nth-child(8) { width: 10%; } 
.manage-table th:nth-child(9), .manage-table td:nth-child(9) { width: 10%; } 


.manage-table td button {
    padding: 4px 8px; 
    font-size: 0.8em;
    background: var(--loss-clr);
    color: var(--bg-clr);
    margin: 0;
}

@media (max-width: 950px){
    
    a {
    text-decoration: none;
    color: var(--txt-clr);
    }

    .main-grid {
        grid-template-columns: 1fr; 
        gap: 10px;
        display: flex;
        flex-direction: column;
    }
    .main-table-card {
        grid-column: 1 / 1;
        max-height: none; 
        padding-bottom: 20px; 
    }
    .chart-card {
        grid-column: 1 / 1;
    }
    .right-column-container {
        grid-column: 1 / 1;
        flex-direction: row; 
    }
    .controls-card, .balance-card {
        display:flex;
        width: 100%;
        margin-bottom: 0;
        font-size: auto;
        flex-wrap: wrap;
        justify-content: left;
        align-items: stretch;
        gap: 5px;
        margin-bottom: 20px;
    }
    .controls-card button {
        width: 120px;
        margin-top: 5px;
        text-decoration: none;
    }
    .entry-table-scroll {
        max-height: none;
        overflow-y: hidden; 
    }
}
@media (max-width: 640px){

    a {
    text-decoration: none;
    color:  #00000000;
    }

    .modal-content { 
        padding: 12px; 
        max-width: 95%; 
    }
    th, td { 
        padding: 8px; 
        font-size: 13px; 
    }
    .main-grid {
        display: flex;
        flex-direction: column;
    }
    .right-column-container {
        flex-direction: column; 
        grid-column: 1 / 3; 
    }
    .controls-card, .balance-card {
        display:flex;
        width: 100%;
        margin-bottom: 0;
        font-size: auto;
        flex-wrap: wrap;
        justify-content: left;
        align-items: center;
        gap: 5px;
        margin-bottom: 10px;
    }

    .controls-card button {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        text-decoration: none;
        color:  #00000000;
        overflow: hidden;
        white-space: nowrap;
        align-content: left;
        padding-left: 15px;
    }

    .controls-card button i{
        margin-left: 4px;
        color: var(--txt-clr);
    }

    .dates {
    display:flex; 
    gap:10px; 
    margin-bottom: 15px; 
    align-items: flex-end;
    justify-content: flex-start; 
    flex-wrap: wrap;
    flex-grow: 0;
    width:100%;
    }

}