/* ==========================================
   ExpenseTrackify - Reminders
========================================== */

.reminder-dashboard{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:15px;

margin:20px 0;

}

.dashboard-card{

padding:20px;

border-radius:18px;

text-align:center;

background:#1f2937;

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

transition:.3s;

}

.dashboard-card:hover{

transform:translateY(-4px);

}

.dashboard-card h3{

font-size:14px;

font-weight:500;

margin-bottom:10px;

color:#d1d5db;

}

.dashboard-card h1{

font-size:30px;

font-weight:700;

color:#fff;

}

.upcoming{

border-left:5px solid #22c55e;

}

.overdue{

border-left:5px solid #ef4444;

}

.completed{

border-left:5px solid #3b82f6;

}

/* ============================= */

.card{

background:#1f2937;

padding:20px;

border-radius:18px;

margin-bottom:20px;

box-shadow:0 10px 20px rgba(0,0,0,.15);

}

.card input,

.card select,

.card textarea{

width:100%;

padding:14px;

margin-bottom:15px;

border:none;

border-radius:12px;

background:#111827;

color:#fff;

font-size:15px;

font-family:Poppins,sans-serif;

outline:none;

}

.card textarea{

height:90px;

resize:none;

}

/* ============================= */

.btn-primary{

width:100%;

padding:15px;

border:none;

border-radius:12px;

background:#14E4B5;

color:#111827;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-2px);

box-shadow:0 10px 20px rgba(20,228,181,.35);

}

/* ============================= */

.reminder-item{

background:#1f2937;

border-radius:16px;

padding:18px;

margin-bottom:15px;

display:flex;

justify-content:space-between;

align-items:center;

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

transition:.3s;

}

.reminder-item:hover{

transform:translateY(-3px);

}

.reminder-left h4{

font-size:16px;

margin-bottom:5px;

color:#fff;

}

.reminder-left p{

font-size:13px;

color:#9ca3af;

}

.reminder-right{

text-align:right;

}

.reminder-time{

font-weight:600;

color:#14E4B5;

margin-bottom:8px;

}

.status{

display:inline-block;

padding:5px 12px;

border-radius:20px;

font-size:12px;

font-weight:600;

}

.status.upcoming{

background:#22c55e22;

color:#22c55e;

}

.status.overdue{

background:#ef444422;

color:#ef4444;

}

.status.completed{

background:#3b82f622;

color:#3b82f6;

}

/* ============================= */

.empty-state{

text-align:center;

padding:40px 20px;

background:#1f2937;

border-radius:18px;

}

.empty-icon{

font-size:45px;

color:#14E4B5;

margin-bottom:15px;

}

.empty-state h4{

margin-bottom:10px;

color:#fff;

}

.empty-state p{

color:#9ca3af;

font-size:14px;

}

/* ============================= */

.fab{

position:fixed;

bottom:90px;

right:25px;

width:60px;

height:60px;

border-radius:50%;

background:#14E4B5;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

color:#111827;

text-decoration:none;

box-shadow:0 12px 25px rgba(20,228,181,.4);

transition:.3s;

z-index:999;

}

.fab:hover{

transform:scale(1.08);

}

/* ============================= */

@media(max-width:768px){

.reminder-dashboard{

grid-template-columns:1fr;

}

.dashboard-card{

padding:18px;

}

.card{

padding:18px;

}

.reminder-item{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

.reminder-right{

text-align:left;

}

}

@media(max-width:480px){

.dashboard-card h1{

font-size:24px;

}

.btn-primary{

font-size:15px;

padding:14px;

}

.card input,

.card select,

.card textarea{

font-size:14px;

}

}

.reminder-actions{

display:flex;

gap:10px;

margin-top:15px;

}

.reminder-actions button{

border:none;

cursor:pointer;

width:38px;

height:38px;

border-radius:10px;

font-size:15px;

transition:.3s;

}

.edit-btn{

background:#3b82f6;

color:#fff;

}

.complete-btn{

background:#10b981;

color:#fff;

}

.delete-btn{

background:#ef4444;

color:#fff;

}

.reminder-actions button:hover{

transform:scale(1.08);

}

.notification-icon{

position:relative;

}

#bellBadge{

position:absolute;

top:-6px;

right:-8px;

width:20px;

height:20px;

border-radius:50%;

background:#ef4444;

color:#fff;

font-size:11px;

display:none;

align-items:center;

justify-content:center;

font-weight:600;

}

@media(max-width:768px){

#bellBadge{

width:18px;

height:18px;

font-size:10px;

}

}

.toast{

position:fixed;

bottom:90px;

left:50%;

transform:translateX(-50%);

background:#14b8a6;

color:#fff;

padding:12px 22px;

border-radius:10px;

opacity:0;

transition:.3s;

z-index:9999;

}

.toast.show{

opacity:1;

bottom:110px;

}


.modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.6);

justify-content:center;

align-items:center;

z-index:9999;

}

.modal-content{

width:90%;

max-width:330px;

background:#1f2433;

padding:25px;

border-radius:18px;

text-align:center;

}

.modal-content h3{

margin-bottom:12px;

}

.modal-buttons{

display:flex;

gap:15px;

margin-top:20px;

}

.modal-buttons button{

flex:1;

}