/* 
  Smart Online Plantation System - Premium Design System 
  Theme: Modern Agri-Tech (Deep Jungle Green, Gold)
*/

:root {

  --primary-h: 150;
  --primary-s: 100%;
  --primary-l: 25%;

  --accent-h: 40;
  --accent-s: 100%;
  --accent-l: 50%;

  --bg-dark: #0f1714;
  --bg-card: #162420;

  --text-main: #f0fdf4;
  --text-muted: #86a698;

  --color-primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));

  --color-danger: #ef4444;
  --color-success: #22c55e;
  --color-warning: #f59e0b;

  --glass-bg: rgba(22, 36, 32, 0.7);
  --glass-border: rgba(255,255,255,0.08);

  --shadow-lg: 0 10px 30px -10px rgba(0,0,0,0.5);
}


/* ------------------ RESET ------------------ */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}

body{
  background:var(--bg-dark);
  color:var(--text-main);
  min-height:100vh;
}


/* ------------------ LAYOUT ------------------ */

.app-container{
  display:grid;
  grid-template-columns:250px 1fr;
  min-height:100vh;
}

@media(max-width:768px){

  .app-container{
    grid-template-columns:1fr;
    padding-bottom:80px;
  }

}


/* ------------------ SIDEBAR ------------------ */

.sidebar{
  background:var(--bg-card);
  border-right:1px solid var(--glass-border);
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.nav-logo{
  font-size:1.5rem;
  font-weight:800;
  color:var(--color-accent);
  letter-spacing:-0.5px;
  text-transform:uppercase;
}

.nav-menu{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.nav-item{
  padding:0.75rem 1rem;
  border-radius:12px;
  color:var(--text-muted);
  text-decoration:none;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:10px;
  transition:all .2s ease;
}

.nav-item:hover,
.nav-item.active{
  background:rgba(255,255,255,0.05);
  color:var(--color-accent);
}


/* ------------------ MOBILE NAV ------------------ */

.mobile-nav{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:rgba(15,23,20,0.95);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--glass-border);
  padding:1rem;
  justify-content:space-around;
  z-index:100;
}

@media(max-width:768px){

  .sidebar{display:none;}

  .mobile-nav{display:flex;}

}


/* ------------------ MAIN CONTENT ------------------ */

.main-content{
  padding:2rem;
  overflow-y:auto;
}

.header{
  margin-bottom:2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.page-title{
  font-size:1.8rem;
  font-weight:700;
  background:linear-gradient(to right,#fff,#86a698);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* ------------------ CARDS ------------------ */

.card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:1.5rem;
  margin-bottom:1.5rem;
  box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
  backdrop-filter:blur(12px);
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
  margin-bottom:2rem;
}

.stat-card{
  background:linear-gradient(145deg,
  rgba(255,255,255,0.05)0%,
  rgba(255,255,255,0.01)100%);
  border:1px solid var(--glass-border);
  padding:1.5rem;
  border-radius:16px;
}

.stat-label{
  font-size:0.875rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:0.5rem;
}

.stat-value{
  font-size:2rem;
  font-weight:700;
}

.stat-value.money{
  color:var(--color-accent);
}


/* ------------------ BUTTONS ------------------ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.75rem 1.5rem;
  border-radius:10px;
  border:none;
  font-weight:600;
  cursor:pointer;
  transition:transform .1s,opacity .2s;
}

.btn:active{transform:scale(.98);}

.btn-primary{
  background:var(--color-success);
  color:#000;
}

.btn-accent{
  background:var(--color-accent);
  color:#000;
}

.btn-ghost{
  background:transparent;
  color:var(--text-muted);
  border:1px solid var(--glass-border);
}

.w-full{width:100%;}


/* ------------------ FORMS ------------------ */

input,select,textarea{
  width:100%;
  padding:0.8rem;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--glass-border);
  border-radius:8px;
  color:#fff;
  font-size:1rem;
  margin-bottom:1rem;
}

input:focus,
select:focus{
  outline:none;
  border-color:var(--color-accent);
  box-shadow:0 0 0 2px rgba(234,179,8,0.2);
}

label{
  display:block;
  margin-bottom:0.5rem;
  color:var(--text-muted);
  font-size:0.9rem;
}


/* ------------------ TABLES ------------------ */

.table-container{
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:collapse;
}

th{
  text-align:left;
  padding:1rem;
  color:var(--text-muted);
  border-bottom:1px solid var(--glass-border);
}

td{
  padding:1rem;
  border-bottom:1px solid rgba(255,255,255,0.03);
}

.clickable-row{
  cursor:pointer;
  transition:background .2s;
}

.clickable-row:hover{
  background:rgba(255,255,255,0.05);
}


/* ------------------ BADGES ------------------ */

.status-badge{
  padding:0.25rem 0.75rem;
  border-radius:100px;
  font-size:0.8rem;
  font-weight:600;
}

.status-paid{
  background:rgba(34,197,94,0.2);
  color:#4ade80;
}

.status-unpaid{
  background:rgba(239,68,68,0.2);
  color:#f87171;
}

.status-partial{
  background:rgba(245,158,11,0.2);
  color:#fbbf24;
}


/* ------------------ MODALS ------------------ */

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.8);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:1rem;
}

.modal-card{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:20px;
  width:100%;
  max-width:500px;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-lg);
  animation:modalIn .3s ease-out;
}

.modal-header{
  padding:1.5rem;
  border-bottom:1px solid var(--glass-border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.modal-body{
  padding:1.5rem;
  overflow-y:auto;
}

.btn-close{
  background:transparent;
  border:none;
  color:var(--text-muted);
  font-size:1.5rem;
  cursor:pointer;
}

@keyframes modalIn{

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

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

}


/* ------------------ TOAST ------------------ */

.toast{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  padding:1rem 1.5rem;
  border-radius:12px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(10px);
  animation:toastIn .3s cubic-bezier(.68,-.55,.265,1.55) forwards;
  min-width:300px;
}

.toast-success{border-left:4px solid var(--color-success);}
.toast-error{border-left:4px solid var(--color-danger);}
.toast-warning{border-left:4px solid var(--color-warning);}

.toast ion-icon{font-size:1.5rem;}

@keyframes toastIn{

  from{
    transform:translateX(100%);
    opacity:0;
  }

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

}

@keyframes toastOut{

  from{
    transform:translateX(0);
    opacity:1;
  }

  to{
    transform:translateX(100%);
    opacity:0;
  }

}


/* ------------------ UTILITIES ------------------ */

.hidden{display:none !important;}

.flex-between{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.mb-4{margin-bottom:1rem;}

.text-right{text-align:right;}
.text-center{text-align:center;}