@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital");

:root {
    --box-shadow: rgba(124, 150, 145, 0.757) 0px 3px 8px;
    --borderColor: #007bff;
    --shadow-Color: rgb(48, 40, 40);
    --text-Color: white;
    --original: #F5F7FA;
}

/* reset / base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    list-style: none;
}

html,
body {
    height: 100%;
}

body {
    background-color: var(--box-shadow);
}

/* hidden helper */
.hidden {
    display: none;
}

/* layout */
.outer-wrap {
    width: 100%;
    min-height: 100vh;
    background-color: var(--shadow-Color);
    padding: 30px;
}

.inner-wrap {
    max-width: 1200px;
    margin: auto;
}

.heading {
    margin: 30px auto;
    padding: 0 20px;
    text-align: center;
    color: var(--text-Color);
}

.heading .title {
    font-size: 2rem;
    font-weight: 600;
}

.heading .subtitle {
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: 6px;
}

/* transaction control layout (form / stats / chart) */
.transaction-control {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 30px auto;
}

/* each column */
.transaction-control>div,
#chartContainer {
    flex: 1 1 calc(33.33% - 20px);
    min-width: 260px;
}

.actions,
.stats,
.transaction-history,
#chartContainer {
    background-color: var(--text-Color);
    padding: 20px;
    box-shadow: var(--box-shadow);
    border-radius: 10px;
}

/* form */
.actions .add {
    display: flex;
    flex-direction: column;
}

.actions form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.actions input[type="text"],
.actions input[type="number"],
.actions input[type="submit"],
.actions input[type="button"] {
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #ddd;
    font-size: 1rem;
    outline: none;
}

.actions input:hover {
    border-color: #007bff;
    transition: .4s ease;
}

.actions .add input[type="submit"] {
    background-color: #2666CF;
    color: #fff;
    border: none;
    box-shadow: var(--box-shadow);
    cursor: pointer;
    transition: transform .18s ease, background-color .18s;
}

.actions .add input[type="submit"]:hover {
    transform: translateY(-2px);
    background-color: #1149a4;
}

#cancelEdit {
    background-color: var(--borderColor);
    color: #fff;
    border: none;
    cursor: pointer;
}

/* stats colors (keeping your look) */
.stats p {
    background-color: #bed7ff;
    margin: 20px 10px;
    padding: 10px 20px;
    box-shadow: var(--box-shadow);
    font-size: 18px;
    border-radius: 6px;
    text-align: center;
}

.stats p.balance {
    background-color: #fff2dd92;
    border-right: 10px solid #f4b240;
}

.stats p.income {
    background-color: #e7fff1ad;
    border-right: 10px solid #32a171;
}

.stats p.expense {
    background-color: #ffeef0bb;
    border-right: 10px solid #0b65f7;
}

/* chart */
#chartContainer {
    max-width: 360px;
    margin: 20px auto;
    text-align: center;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#chartContainer canvas {
    width: 100% !important;
    height: 260px !important;
}

#noDataMessage {
    color: #e51212;
    display: none;
    font-size: large;
    font-weight: 700;
    margin-top: 12px;
}

/* Transaction history / search */
.transaction-history {
    margin: 40px 10px;
    border-radius: 10px;
}

.search-box {
    margin: 10px 20px 0;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 6px;
    outline: none;
}

.search-box input:focus,
.search-box input:hover {
    border-color: var(--borderColor);
    transition: .4s ease;
}

.search-box button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    background-color: #1149a4;
    color: #fff;
    border-radius: 6px;
    border: none;
}

.search-box button:hover {
    background-color: #007bff;
    cursor: pointer;
    transition: .4s ease;
}

/* records list */
.records {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px;
}

.records div {
    flex: 1 1 45%;
    min-width: 240px;
}

.records li {
    width: 100%;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: #f8f9fa;
    margin: 12px 0;
    box-shadow: var(--box-shadow);
    border-left: 6px solid #007bff;
    opacity: 1;
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.2, .9, .2, 1), opacity .35s ease;
}

/* color differences remain on income/expense lists */
.records .income li {
    border-left-color: #32a171;
}

.records .expense li {
    border-left-color: #0b65f7;
}

.records li p:first-child {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.records span {
    font-size: 16px;
}

.records span#time {
    color: #32a171;
    font-size: 12px;
}

.records i.delete,
.records i.edit {
    margin-left: 10px;
    color: #082032;
    cursor: pointer;
    font-size: 18px;
}

.records i.edit {
    color: rgb(167, 26, 26);
}

.records i.delete:hover {
    color: #B42B51;
}

.records i.edit:hover {
    color: red;
}

/* animation for newly added items */
.fade-in {
    opacity: 0;
    transform: translateY(12px) scale(0.995);
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* subtle hover scale */
.actions,
.stats,
.transaction-history {
    transition: transform .25s ease;
}

.actions:hover,
.stats:hover,
.transaction-history:hover {
    transform: translateY(-4px);
}

/* responsive adjustments */
@media screen and (max-width: 900px) {
    .transaction-control {
        flex-direction: column;
    }

    .transaction-control>div,
    #chartContainer {
        min-width: 100%;
    }

    .records {
        flex-direction: column;
        gap: 10px;
    }

    .records div {
        width: 100%;
    }
}

@media screen and (max-width: 450px) {
    .outer-wrap {
        padding: 10px;
    }

    .actions,
    .stats,
    .transaction-history {
        margin: 10px 0;
        padding: 12px;
    }

    .heading .title {
        font-size: 1.4rem;
    }

    .search-box button {
        right: 8px;
    }

    #chartContainer canvas {
        height: 200px !important;
    }
}

/* ultra small */
@media screen and (max-width: 220px) {
    .records li {
        flex-direction: column;
        text-align: center;
    }

    .records div {
        width: 50%;
    }
}