/* =========================
   KSL KHATABOOK FINAL CSS
   PART 1
========================= */

/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}


/* Page Background + Animation */

body{
    background:#f5f5f5;
    animation:pageFade 0.35s ease-in-out;
}


@keyframes pageFade{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* Header */

.header,
.topbar{

    background:#C70039;
    color:#fff;
    padding:15px;
    text-align:center;

    box-shadow:0 3px 8px rgba(0,0,0,.2);

}


/* Main Container */

.container{

    width:95%;
    max-width:1200px;
    margin:auto;
    padding:15px;

}


/* Cards */

.card{

    background:#fff;

    padding:15px;

    margin-bottom:15px;

    border-radius:10px;

    box-shadow:0 2px 5px rgba(0,0,0,.1);

    transition:
    transform .25s ease,
    box-shadow .25s ease;

}


/* Card Hover Effect */

.card:hover{

    transform:translateY(-4px);

    box-shadow:0 8px 18px rgba(0,0,0,.18);

}


/* Customer / Karigar / Supplier Name */

.card h3{

    font-size:28px;

    font-weight:bold;

    color:#000;

}


/* Normal Buttons */

.btn{

    display:inline-block;

    padding:10px 15px;

    background:#D4AF37;

    color:#000;

    text-decoration:none;

    border:none;

    border-radius:6px;

    cursor:pointer;

    font-weight:bold;

    font-size:16px;

    margin:3px;

    transition:
    transform .2s ease,
    box-shadow .2s ease;

}


/* Button Hover */

.btn:hover{

    transform:translateY(-3px);

    box-shadow:0 5px 12px rgba(0,0,0,.25);

}


/* Button Click Effect */

.btn:active{

    transform:scale(.96);

}


.btn-primary{

    background:#0d6efd;

    color:#fff;

}


.btn-danger{

    background:#dc3545;

    color:#fff;

}


.btn-success{

    background:#198754;

    color:#fff;

}


/* Tables */

table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

}


table th{

    background:#C70039;

    color:#fff;

    padding:10px;

    font-size:18px;

}


table td{

    padding:10px;

    border:1px solid #ddd;

    font-size:18px;

    text-align:center;

}


/* Forms */

input,
textarea,
select{

    width:100%;

    padding:12px;

    margin-top:5px;

    margin-bottom:10px;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:18px;

    transition:border .2s ease,
    box-shadow .2s ease;

}


/* Input Focus Effect */

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:#D4AF37;

    box-shadow:0 0 8px rgba(212,175,55,.5);

}
/* =========================
   PART 2 - Final Design
========================= */


/* Balance Colors */

.balance-positive{

    color:green;

    font-weight:bold;

}


.balance-negative{

    color:red;

    font-weight:bold;

}


/* Action Buttons
   Ledger, Edit, Delete */

.action-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:6px;

}


.action-buttons .btn{

    width:auto;

    min-width:65px;

    padding:6px 10px;

    margin:2px;

    font-size:14px;

}


/* Dashboard Buttons */

.menu-buttons{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.menu-btn{

    display:block;

    width:100%;

    padding:18px;

    text-align:center;

    background:#D4AF37;

    color:#000;

    font-weight:bold;

    font-size:28px;

    border-radius:10px;

    text-decoration:none;

    transition:
    transform .25s ease,
    box-shadow .25s ease;

}


/* Dashboard Button Hover */

.menu-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 5px 12px rgba(0,0,0,.25);

}


/* Dashboard Button Click */

.menu-btn:active{

    transform:scale(.96);

}


/* Logout Button */

.logout-btn{

    background:#dc3545;

    color:#fff;

}


/* Mobile Responsive Design */

@media(max-width:768px){


.container{

    width:98%;

    padding:10px;

}


/* Cards Heading */

.card h3{

    font-size:24px;

}


/* Tables */

table th,
table td{

    font-size:15px;

    padding:7px;

}


/* Normal Buttons */

.btn{

    display:block;

    width:100%;

    text-align:center;

    margin-bottom:8px;

}


/* Fix Action Buttons on Mobile */

.action-buttons .btn{

    display:inline-block;

    width:auto;

    min-width:55px;

    margin:2px;

    padding:5px 8px;

    font-size:12px;

}


/* Dashboard Buttons */

.menu-btn{

    font-size:24px;

    padding:16px;

}


/* Forms */

input,
textarea,
select{

    font-size:16px;

}

}