/* ==========================================
   Khanta Payment Reminder
   FINAL PRODUCTION style.css
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--primary:#2563eb;
--primary-dark:#1d4ed8;
--success:#16a34a;
--danger:#dc2626;
--warning:#f59e0b;
--whatsapp:#22c55e;

--bg:#f3f6fb;
--card:#ffffff;
--text:#111827;
--muted:#6b7280;
--line:#e5e7eb;

--shadow:0 10px 24px rgba(0,0,0,.08);
--shadow-lg:0 16px 36px rgba(0,0,0,.12);

--radius:18px;
--radius-sm:14px;
}

/* ==========================================
   BASE
========================================== */
html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:
linear-gradient(
180deg,
#eef4ff 0%,
#f8fafc 100%
);
color:var(--text);
min-height:100vh;
padding-bottom:86px;
-webkit-tap-highlight-color:transparent;
}

.app{
max-width:760px;
margin:auto;
padding:14px;
}

/* ==========================================
   HEADER
========================================== */
.header{
text-align:center;
padding:6px 0 18px;
}

.header h1{
font-size:30px;
font-weight:700;
letter-spacing:.2px;
}

.header p{
margin-top:6px;
font-size:14px;
color:var(--muted);
}

/* ==========================================
   NAV
========================================== */
.nav{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;

position:sticky;
top:10px;
z-index:999;

padding:6px;

margin-bottom:18px;

border-radius:20px;

background:
rgba(255,255,255,.72);

backdrop-filter:blur(12px);

box-shadow:var(--shadow);
}

.nav-btn{
border:none;
cursor:pointer;

padding:14px 10px;

font-family:'Poppins',sans-serif;
font-size:14px;
font-weight:700;

border-radius:14px;

background:#fff;
color:var(--text);

transition:
transform .18s ease,
box-shadow .18s ease,
background .18s ease;
}

.nav-btn:hover{
transform:translateY(-1px);
}

.nav-btn:active{
transform:scale(.97);
}

.active-btn{
background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:#fff;

box-shadow:
0 12px 24px
rgba(37,99,235,.24);
}

/* ==========================================
   PAGE
========================================== */
.page{
display:none;
}

.page.active{
display:block;
animation:fadeSlide .22s ease;
}

@keyframes fadeSlide{
from{
opacity:0;
transform:translateY(8px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* ==========================================
   CARD
========================================== */
.card{
background:var(--card);
border-radius:var(--radius);
padding:18px;
box-shadow:var(--shadow);
margin-bottom:14px;

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

.card:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-lg);
}

/* ==========================================
   GRID
========================================== */
.grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.stat{
text-align:center;
padding:24px 14px;
}

.stat h2{
font-size:30px;
font-weight:700;
color:var(--primary);
margin-bottom:6px;
word-break:break-word;
}

.stat p{
font-size:14px;
font-weight:500;
color:var(--muted);
}

/* ==========================================
   FORM
========================================== */
.form-card h3{
font-size:20px;
margin-bottom:14px;
}

input{
width:100%;

padding:14px;

margin-bottom:12px;

border:1px solid var(--line);
border-radius:14px;

outline:none;

background:#fff;

font-size:15px;
font-family:'Poppins',sans-serif;

transition:
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}

input::placeholder{
color:#9ca3af;
}

input:focus{
border-color:var(--primary);
box-shadow:
0 0 0 4px
rgba(37,99,235,.08);
transform:translateY(-1px);
}

button{
font-family:'Poppins',sans-serif;
}

#saveBtn{
width:100%;
border:none;
cursor:pointer;

padding:14px;

border-radius:14px;

font-size:15px;
font-weight:700;
color:#fff;

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

box-shadow:
0 14px 26px
rgba(37,99,235,.24);

transition:
transform .18s ease,
box-shadow .18s ease,
opacity .18s ease;
}

#saveBtn:hover{
transform:translateY(-1px);
}

#saveBtn:active{
transform:scale(.98);
}

#saveBtn:disabled{
opacity:.7;
cursor:not-allowed;
}

/* ==========================================
   RECORDS
========================================== */
.record{
background:#fff;
border-radius:18px;
padding:16px;
box-shadow:var(--shadow);
margin-bottom:14px;

border-left:5px solid #dbeafe;
}

.record.overdue{
border-left-color:var(--danger);

background:
linear-gradient(
90deg,
rgba(220,38,38,.04),
#fff 24%
);
}

.record.today{
border-left-color:var(--warning);

background:
linear-gradient(
90deg,
rgba(245,158,11,.05),
#fff 24%
);
}

.record h3{
font-size:18px;
margin-bottom:8px;
}

.record p{
font-size:14px;
color:#4b5563;
margin:5px 0;
line-height:1.45;
}

/* ==========================================
   ACTIONS
========================================== */
.actions{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin-top:14px;
}

.actions button{
border:none;
cursor:pointer;

padding:11px 8px;

border-radius:12px;

font-size:13px;
font-weight:700;
color:#fff;

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

transition:
transform .18s ease,
opacity .18s ease;
}

.actions button:hover{
transform:translateY(-1px);
}

.actions button:active{
transform:scale(.97);
}

.paid{
background:var(--success);
}

.delete{
background:var(--danger);
}

.whatsapp{
background:var(--whatsapp);
}

/* ==========================================
   EMPTY / ERROR
========================================== */
.empty{
text-align:center;
padding:28px 12px;
color:var(--muted);
font-weight:500;

border:1px dashed #d1d5db;
background:
rgba(255,255,255,.82);
}

/* ==========================================
   TOAST
========================================== */
.toast{
position:fixed;

left:50%;
bottom:92px;

transform:
translateX(-50%)
translateY(20px);

background:#111827;
color:#fff;

padding:12px 16px;

border-radius:14px;

font-size:14px;
font-weight:500;

opacity:0;
pointer-events:none;

z-index:9999;

max-width:90%;
text-align:center;

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

transition:
opacity .25s ease,
transform .25s ease;
}

.toast.show{
opacity:1;

transform:
translateX(-50%)
translateY(0);
}

/* ==========================================
   NETWORK BAR
========================================== */
.netbar{
position:fixed;

top:12px;
left:50%;

transform:translateX(-50%);

padding:10px 14px;

border-radius:14px;

font-size:13px;
font-weight:700;

z-index:9999;

opacity:0;

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

transition:.25s ease;
}

.netbar.show{
opacity:1;
}

.netbar.online{
background:#dcfce7;
color:#166534;
}

.netbar.offline{
background:#fee2e2;
color:#991b1b;
}

/* ==========================================
   SKELETON
========================================== */
.skeleton{
height:110px;

border-radius:18px;

margin-bottom:14px;

background:
linear-gradient(
90deg,
#eef2f7 25%,
#f8fafc 50%,
#eef2f7 75%
);

background-size:220% 100%;

animation:shine 1.1s infinite;
}

@keyframes shine{
0%{
background-position:200% 0;
}
100%{
background-position:-200% 0;
}
}

/* ==========================================
   FOOTER
========================================== */
.footer{
position:fixed;

left:0;
right:0;
bottom:0;

padding:14px;

text-align:center;

font-size:14px;
color:var(--muted);

background:
rgba(255,255,255,.78);

backdrop-filter:blur(12px);

border-top:
1px solid
rgba(255,255,255,.65);

box-shadow:
0 -6px 18px
rgba(0,0,0,.06);
}

/* ==========================================
   SCROLLBAR
========================================== */
::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#eef2f7;
}

::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:20px;
}

/* ==========================================
   MOBILE
========================================== */
@media(max-width:600px){

.app{
padding:12px;
}

.header h1{
font-size:24px;
}

.header p{
font-size:13px;
}

.nav{
top:8px;
gap:8px;
}

.nav-btn{
padding:12px 8px;
font-size:13px;
}

.grid{
gap:10px;
}

.stat{
padding:18px 10px;
}

.stat h2{
font-size:24px;
}

.record h3{
font-size:17px;
}

.actions{
grid-template-columns:1fr;
}

.toast{
bottom:88px;
font-size:13px;
padding:11px 14px;
}

.footer{
padding:13px;
}

.card:hover,
.record:hover{
transform:none;
}

}