/* css/dashboard.css - CSC Nova Pro 3D Glass Dashboard Theme */
:root {
    --bg: #f4f5ff;
    --ink: #172044;
    --muted: #77809d;
    --glass: rgba(255, 255, 255, .68);
    --stroke: rgba(255, 255, 255, .9);
    --panel: rgba(255, 255, 255, .72);
    --shadow: 0 18px 55px rgba(55, 56, 125, .12);
    --sidebar1: #191b43;
    --sidebar2: #40317d;
}

body.dark {
    --bg: #101225;
    --ink: #f0f2ff;
    --muted: #a5accb;
    --glass: rgba(30, 32, 59, .72);
    --stroke: rgba(255, 255, 255, .12);
    --panel: rgba(27, 29, 54, .78);
    --shadow: 0 18px 55px rgba(0, 0, 0, .25);
    --sidebar1: #0a0b1d;
    --sidebar2: #211744;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background .35s, color .35s;
}

body:before, body:after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    animation: orb 13s ease-in-out infinite alternate;
}
body:before { width: 420px; height: 420px; background: #a99aff; right: -130px; top: -170px; }
body:after { width: 390px; height: 390px; background: #80e7df; left: 20%; bottom: -190px; animation-delay: -6s; }

@keyframes orb { to { transform: translate(-45px, 35px) scale(1.15); } }
@keyframes enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(155deg, var(--sidebar1), var(--sidebar2)); color: #fff; padding: 22px 14px; display: flex; flex-direction: column; position: relative; overflow: hidden; z-index: 8; }
.sidebar:after { content: ""; position: absolute; width: 260px; height: 260px; border: 1px solid #ffffff20; border-radius: 50%; bottom: -120px; left: -100px; box-shadow: 0 0 0 24px #ffffff08, 0 0 0 50px #ffffff05; pointer-events: none; }

.brand { display: flex; align-items: center; gap: 11px; padding: 5px 8px 29px; font-size: 22px; font-weight: 850; letter-spacing: -.7px; color: #fff; }
.brandmark { width: 43px; height: 43px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, #68eee1, #aa85ff, #ff92c8); background-size: 200% 200%; animation: shine 5s linear infinite; color: #201b51; box-shadow: 0 9px 24px #0b082c65; font-size: 21px; }
.brand small { display: block; font-size: 10px; font-weight: 500; color: #d1d0f4; letter-spacing: .5px; margin-top: 4px; }

.nav { display: grid; gap: 7px; position: relative; z-index: 1; }
.nav button { border: 1px solid transparent; background: transparent; color: #dcdef8; text-align: left; padding: 12px 13px; border-radius: 13px; display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 13px; transition: .23s; }
.nav button:hover { background: #ffffff13; transform: translateX(3px); }
.nav button.active { background: linear-gradient(110deg, #8064ff, #4a9bff); color: #fff; box-shadow: 0 9px 26px #09072270; }
.nav .ico { width: 24px; text-align: center; font-size: 18px; }

.sidefoot { margin-top: auto; border: 1px solid #ffffff21; background: #ffffff0c; padding: 14px; border-radius: 15px; color: #d5d7f8; font-size: 11px; line-height: 1.9; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #55efbb; box-shadow: 0 0 0 4px #55efbb22; margin-right: 6px; }

main { min-width: 0; }
.topbar { height: 78px; padding: 0 27px; display: flex; align-items: center; justify-content: space-between; gap: 14px; position: sticky; top: 0; z-index: 5; background: var(--glass); backdrop-filter: blur(22px); border-bottom: 1px solid var(--stroke); }
.top-left { display: flex; align-items: center; gap: 13px; font-size: 19px; font-weight: 800; color: var(--ink); }
.hamb { display: none; border: 0; border-radius: 11px; background: var(--panel); color: var(--ink); padding: 9px 12px; font-size: 20px; }
.topright { display: flex; align-items: center; gap: 8px; font-size: 12px; }

/* Header High Bright Colorful Pills */
.topright .pill {
    border: none !important;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 14px;
    backdrop-filter: blur(16px);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}
.topright .pill:hover { transform: translateY(-2px); filter: brightness(1.08); }
#header-date { background: linear-gradient(135deg, #0284c7, #38bdf8) !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(56, 189, 248, 0.35) !important; }
.pill.user, #header-user-info { background: linear-gradient(135deg, #7c3aed, #a78bfa) !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35) !important; }
.pill.day { background: linear-gradient(135deg, #059669, #34d399) !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35) !important; }

.themebtn { width: 41px; height: 41px; border-radius: 13px; border: 1px solid var(--stroke); background: var(--panel); color: var(--ink); font-size: 18px; cursor: pointer; transition: transform .2s; }
.themebtn:hover { transform: rotate(18deg) scale(1.05); }
.logout { border: 0; border-radius: 12px; background: linear-gradient(135deg, #ff739d, #ef4e80); color: white; padding: 11px 14px; font-weight: 750; cursor: pointer; box-shadow: 0 6px 16px #ef4e8030; }

.content { max-width: 1700px; margin: auto; padding: 27px 28px 18px; }

/* Stats Cards - Updated for 4 Cards Layout */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { min-height: 151px; border-radius: 21px; padding: 20px 21px; color: #fff; position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform .25s, box-shadow .25s; box-shadow: 0 15px 34px #36346920; animation: enter .55s ease both; }
.stat:hover { transform: perspective(800px) rotateX(3deg) rotateY(-3deg) translateY(-4px); box-shadow: 0 23px 40px #36346935; }
.stat:before { content: ""; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, #ffffff25 50%, transparent 60%); transform: translateX(-45%); transition: transform .6s; }
.stat:hover:before { transform: translateX(45%); }
.stat:after { content: ""; position: absolute; width: 135px; height: 135px; border: 1px solid #ffffff3b; border-radius: 50%; right: -28px; bottom: -55px; box-shadow: 0 0 0 17px #ffffff0c, 0 0 0 35px #ffffff08; }
.purple { background: linear-gradient(130deg, #7050ed, #a17dff); }
.blue { background: linear-gradient(130deg, #2788ee, #54c8ee); }
.pink { background: linear-gradient(130deg, #e955a2, #ff9d92); }
.shop-dues { background: linear-gradient(130deg, #0ea5e9, #6366f1); }
.stat-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 750; color: #ffffffeb; }
.stat-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ffffff60; background: #ffffff24; border-radius: 13px; font-size: 20px; backdrop-filter: blur(10px); }
.value { font-size: 33px; font-weight: 900; letter-spacing: -1px; margin: 12px 0 3px; color: #fff; }
.stat small { font-size: 11px; color: #ffffffdf; }

@media(max-width: 1300px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 740px) {
    .stats { grid-template-columns: 1fr; }
}

/* Panels */
.panel { background: var(--panel); backdrop-filter: blur(22px); border: 1px solid var(--stroke); border-radius: 21px; padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow); animation: enter .6s ease both; color: var(--ink); }
.panelhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.panelhead h2 { margin: 0; font-size: 16px; color: var(--ink); }
.panelhead p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.tag { font-size: 10px; font-weight: 850; color: #7758e9; background: #eeeaff; padding: 7px 10px; border-radius: 10px; white-space: nowrap; }

/* Quick Actions - Original Theme Preserved */
.actions { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 11px; }
.action { min-height: 105px; border: 1px solid #ffffff80; border-radius: 18px; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 9px 18px #20264b13; transition: transform .23s, box-shadow .23s; position: relative; overflow: hidden; }
.action:after { content: ""; position: absolute; width: 80px; height: 160%; top: -30%; left: -120%; transform: rotate(20deg); background: #ffffff2a; transition: left .45s; }
.action:hover { transform: translateY(-5px) scale(1.025); box-shadow: 0 15px 28px #20264b27; }
.action:hover:after { left: 130%; }
.sym { height: 40px; width: 40px; display: grid; place-items: center; border: 1px solid #ffffff65; background: #ffffff25; border-radius: 14px; font-size: 21px; }
.a1 { background: linear-gradient(145deg, #4560e9, #7e8cff); }
.a2 { background: linear-gradient(145deg, #7541e9, #b07bff); }
.a3 { background: linear-gradient(145deg, #00aa99, #51ddbd); }
.a4 { background: linear-gradient(145deg, #ff963a, #ffc46b); }
.a5 { background: linear-gradient(145deg, #e84d94, #ff8bb4); }
.a6 { background: linear-gradient(145deg, #2675d9, #4bc1f2); }
.a7 { background: linear-gradient(145deg, #0c9e75, #62dcaa); }
.a8 { background: linear-gradient(145deg, #8651e9, #d185f5); }

/* Balances Grid */
.balances { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.balance { background: var(--glass); border: 1px solid var(--stroke); border-radius: 17px; padding: 15px; display: flex; align-items: center; gap: 12px; min-width: 0; transition: transform .22s, box-shadow .22s; }
.balance:hover { transform: translateY(-4px); box-shadow: 0 13px 25px #27264b17; }
.balicon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 15px; display: grid; place-items: center; font-weight: 900; font-size: 19px; }
.b1 { background: #e8edff; color: #4b61df; }
.b2 { background: #f0e6ff; color: #8848e4; }
.b3 { background: #fff0dc; color: #d8771d; }
.b4 { background: #ddf8ef; color: #07977a; }
.balance label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.balance strong { font-size: 21px; letter-spacing: -.5px; color: var(--ink); }

/* Entry Page Custom Buttons & Layout */
.service-btn {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}
.service-btn.active {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

.tx-btn {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.35) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tx-btn.debit-active {
    background: linear-gradient(135deg, #ef4444, #f87171) !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;
}
.tx-btn.credit-active {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

.save-entry-btn {
    background: linear-gradient(135deg, #ec4899, #f472b6) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45) !important;
    cursor: pointer;
    transition: transform 0.2s;
}
.save-entry-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

.inline-entry-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.inline-entry-row > div { flex: 1; min-width: 200px; }

/* Modern Table Styling */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); backdrop-filter: blur(25px); border-radius: 18px; overflow: hidden; border: 1px solid var(--stroke); margin-top: 15px; box-shadow: 0 15px 35px rgba(23, 32, 68, 0.08); }
th { background: linear-gradient(135deg, rgba(112, 80, 237, 0.12), rgba(84, 200, 238, 0.12)); color: var(--ink); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 16px 20px; border-bottom: 1px solid var(--stroke); text-align: left; }
td { padding: 16px 20px; text-align: left; border-bottom: 1px solid rgba(220, 231, 243, 0.6); color: var(--ink); font-size: 13px; font-weight: 500; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(128, 100, 255, 0.06); }

input, select, textarea {
    background: var(--glass) !important;
    border: 1px solid var(--stroke) !important;
    color: var(--ink) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    outline: none;
    width: 100%;
}

.footer { display: flex; justify-content: space-between; gap: 10px; padding: 3px 3px 12px; color: var(--muted); font-size: 11px; }
.toast { position: fixed; bottom: 22px; right: 22px; z-index: 20; display: none; max-width: calc(100vw - 36px); padding: 14px 18px; border-radius: 14px; color: white; background: #292354; box-shadow: 0 14px 35px #17163d55; font-size: 13px; }


/* Unique Colorful Themes & Enhanced Animations for Live Service Balances */
.balances .balance {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover Animation: Lift up, scale, and glowing shadow */
.balances .balance:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.9);
}

/* Card 1: PNB Balance (Soft Indigo / Blue Unique Gradient) */
.balances .balance:nth-child(1) {
    background: linear-gradient(135deg, rgba(75, 97, 223, 0.12), rgba(39, 136, 238, 0.18));
}
.balances .balance:nth-child(1):hover {
    box-shadow: 0 16px 35px rgba(75, 97, 223, 0.25);
}

/* Card 2: PhonePe Balance (Soft Purple / Violet Unique Gradient) */
.balances .balance:nth-child(2) {
    background: linear-gradient(135deg, rgba(136, 72, 228, 0.12), rgba(168, 85, 247, 0.18));
}
.balances .balance:nth-child(2):hover {
    box-shadow: 0 16px 35px rgba(136, 72, 228, 0.25);
}

/* Card 3: Recharge Balance (Soft Amber / Orange Unique Gradient) */
.balances .balance:nth-child(3) {
    background: linear-gradient(135deg, rgba(216, 119, 29, 0.12), rgba(245, 158, 11, 0.18));
}
.balances .balance:nth-child(3):hover {
    box-shadow: 0 16px 35px rgba(216, 119, 29, 0.25);
}

/* Card 4: CSC Balance (Soft Emerald / Teal Unique Gradient) */
.balances .balance:nth-child(4) {
    background: linear-gradient(135deg, rgba(7, 151, 122, 0.12), rgba(16, 185, 129, 0.18));
}
.balances .balance:nth-child(4):hover {
    box-shadow: 0 16px 35px rgba(7, 151, 122, 0.25);
}

/* Shining Light Effect on Hover for Live Service Balances */
.balances .balance {
    position: relative;
    overflow: hidden;
}

.balances .balance::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg) translateX(-100%);
    transition: transform 0.7s ease-in-out;
    pointer-events: none;
}

.balances .balance:hover::after {
    transform: rotate(30deg) translateX(100%);
}