/* ============================================================
   PATAS REDESIGN V5 — GREEN APP IDENTITY
   Fokus:
   - Hijau dominan untuk menu utama
   - Ikon lebih berkarakter
   - Teks tetap kontras dan mudah dibaca
   - Nuansa aplikasi, bukan halaman laporan
   VISUAL ONLY — tidak mengubah PHP / database / data.
   ============================================================ */

:root{
  --patas-green-950:#032A1B;
  --patas-green-900:#043C26;
  --patas-green-800:#075634;
  --patas-green-700:#087A3D;
  --patas-green-600:#0A9650;
  --patas-green-500:#19AB61;

  --patas-mint:#E9F7EF;
  --patas-mint-2:#D8F0E2;
  --patas-cream:#FFF6DD;
  --patas-gold:#D6A43D;
  --patas-orange:#E38A3D;
  --patas-blue:#2A78B8;
  --patas-purple:#7756B3;
  --patas-red:#B74444;

  --patas-ink:#103126;
  --patas-muted:#63776E;
  --patas-line:#D6E6DD;
  --patas-bg:#EEF6F1;
  --patas-surface:#FFFFFF;

  --patas-shadow:0 12px 30px rgba(4,63,40,.10);
  --patas-shadow-lg:0 20px 55px rgba(3,53,34,.15);
}

/* ========================= BASE ========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0 !important;
  color:var(--patas-ink) !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  background:
    radial-gradient(circle at 0 0,rgba(214,164,61,.12),transparent 23%),
    radial-gradient(circle at 100% 4%,rgba(10,150,80,.13),transparent 28%),
    linear-gradient(180deg,#F7FBF8 0%,var(--patas-bg) 52%,#E9F3ED 100%) !important;
}
a{color:var(--patas-green-700)}
h1,h2,h3,h4{
  color:var(--patas-green-950) !important;
  letter-spacing:-.03em !important;
}
.wrap{
  max-width:1240px !important;
  padding:28px 24px 55px !important;
}
.card{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(206,225,215,.9) !important;
  border-radius:20px !important;
  box-shadow:var(--patas-shadow) !important;
}

/* ========================= HEADER ========================= */
.top{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  min-height:68px !important;
  padding:13px 24px !important;
  color:#fff !important;
  background:
    linear-gradient(120deg,var(--patas-green-950),var(--patas-green-800) 52%,var(--patas-green-700)) !important;
  border:0 !important;
  box-shadow:0 8px 26px rgba(2,44,29,.22) !important;
}
.top b{
  color:#fff !important;
  font-size:18px !important;
  letter-spacing:-.015em;
}
.top a,.top .logout{
  color:#fff !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:11px !important;
  padding:8px 12px !important;
  text-decoration:none !important;
}

/* ========================= DASHBOARD STAT ========================= */
.grid{gap:14px !important}
.grid>.card{
  min-height:120px;
  border:0 !important;
  color:#fff !important;
  overflow:hidden;
  position:relative;
  box-shadow:var(--patas-shadow-lg) !important;
}
.grid>.card small{color:rgba(255,255,255,.76) !important}
.grid>.card strong{
  color:#fff !important;
  font-size:29px !important;
  line-height:1.05;
}
.grid>.card:nth-child(1){
  background:linear-gradient(145deg,#075333,#10A55B) !important;
}
.grid>.card:nth-child(2){
  background:linear-gradient(145deg,#07554F,#0BA08E) !important;
}
.grid>.card:nth-child(3){
  background:linear-gradient(145deg,#8B681B,#D6A43D) !important;
}
.grid>.card::after{
  content:"";
  position:absolute;
  width:135px;height:135px;
  right:-42px;bottom:-48px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
}

/* ============================================================
   MAIN MENU — GREEN DOMINANT
   ============================================================ */
.quick-grid{
  margin-top:17px !important;
  padding:18px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 95% 0,rgba(255,255,255,.10),transparent 21%),
    radial-gradient(circle at 4% 95%,rgba(255,255,255,.07),transparent 25%),
    linear-gradient(135deg,var(--patas-green-950),var(--patas-green-900) 42%,var(--patas-green-700)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:var(--patas-shadow-lg) !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:13px !important;
  position:relative;
}
.quick-grid::before{
  content:"MENU UTAMA PATAS";
  grid-column:1/-1;
  display:block;
  color:rgba(255,255,255,.92);
  font-weight:900;
  font-size:11px;
  letter-spacing:.12em;
  padding:1px 4px 4px;
}

/* Green cards, not white cards */
.quick-card{
  position:relative;
  min-height:112px !important;
  padding:16px !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  border:1px solid rgba(255,255,255,.17) !important;
  border-radius:18px !important;
  color:#fff !important;
  text-decoration:none !important;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 9px 22px rgba(1,34,22,.18) !important;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.quick-card::after{
  content:"";
  position:absolute;
  right:-24px;bottom:-30px;
  width:92px;height:92px;border-radius:50%;
  background:rgba(255,255,255,.045);
}
.quick-card:hover{
  transform:translateY(-4px) !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.08)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 18px 30px rgba(1,34,22,.26) !important;
}
.quick-card b{
  color:#fff !important;
  font-size:15px !important;
}
.quick-card span{
  color:rgba(255,255,255,.78) !important;
  font-size:11px !important;
  line-height:1.42 !important;
}

/* Icon tiles — colorful but still coherent */
.quick-icon{
  width:50px !important;height:50px !important;
  flex:0 0 50px !important;
  border-radius:15px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 7px 16px rgba(0,0,0,.12) !important;
  font-size:23px !important;
}
.quick-card:nth-child(2) .quick-icon{
  background:#FFF3C9 !important;
}
.quick-card:nth-child(3) .quick-icon{
  background:#DFF4FF !important;
}
.quick-card:nth-child(4) .quick-icon{
  background:#FFE8D8 !important;
}
.quick-card:nth-child(5) .quick-icon{
  background:#E9E1FF !important;
}
.quick-card:nth-child(6) .quick-icon{
  background:#DDF7E8 !important;
}

/* If the menu has only six cards, visually number them as tools */
.quick-card:nth-child(1)::before,
.quick-card:nth-child(2)::before,
.quick-card:nth-child(3)::before,
.quick-card:nth-child(4)::before,
.quick-card:nth-child(5)::before,
.quick-card:nth-child(6)::before{
  position:absolute;
  top:9px;right:11px;
  color:rgba(255,255,255,.38);
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
}
.quick-card:nth-child(1)::before{content:"01"}
.quick-card:nth-child(2)::before{content:"02"}
.quick-card:nth-child(3)::before{content:"03"}
.quick-card:nth-child(4)::before{content:"04"}
.quick-card:nth-child(5)::before{content:"05"}
.quick-card:nth-child(6)::before{content:"06"}

/* ========================= ATTENDANCE = SUPPORTING INFO ========================= */
.patas-attendance-widget{
  margin-top:15px !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,#FFFFFF,#F3FAF6) !important;
  color:var(--patas-ink) !important;
  border:1px solid var(--patas-line) !important;
  box-shadow:var(--patas-shadow) !important;
}
.patas-attendance-head h2{color:var(--patas-green-950) !important}
.patas-attendance-eyebrow{color:var(--patas-green-700) !important}
.patas-attendance-head p{color:var(--patas-muted) !important}
.patas-attendance-btn{
  background:linear-gradient(135deg,var(--patas-green-800),var(--patas-green-600)) !important;
  color:#fff !important;
  border:0 !important;
}
.patas-attendance-stat{
  background:#EDF7F1 !important;
  color:var(--patas-ink) !important;
  border:1px solid #D9E9E0 !important;
}
.patas-attendance-stat span,.patas-attendance-stat small{color:var(--patas-muted) !important}
.patas-attendance-stat strong{color:var(--patas-green-950) !important}
.patas-attendance-highlight{
  background:linear-gradient(145deg,#FFF5D8,#FFFBEF) !important;
  border-color:#F0DDA8 !important;
}
.patas-attendance-highlight strong{color:#765614 !important}

/* ========================= BUTTONS ========================= */
.btn,.button{
  border-radius:12px !important;
  font-weight:900 !important;
  transition:.16s ease !important;
}
.btn.primary,.primary,.btn:not(.secondary):not(.danger):not(.delete){
  background:linear-gradient(135deg,var(--patas-green-800),var(--patas-green-600)) !important;
  color:#fff !important;
  border:0 !important;
}
.btn.secondary,.secondary{
  background:#fff !important;
  color:var(--patas-green-900) !important;
  border:1px solid #C6DBCF !important;
}

/* ========================= FORMS ========================= */
input,select,textarea,.field{
  min-height:44px;
  border:1px solid #C4DBCF !important;
  border-radius:12px !important;
  background:#fff !important;
  color:var(--patas-ink) !important;
}
input:focus,select:focus,textarea:focus,.field:focus{
  outline:none !important;
  border-color:#58AC7B !important;
  box-shadow:0 0 0 4px rgba(8,122,61,.11) !important;
}

/* ========================= TABLES ========================= */
table,.table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
  border:1px solid #D6E6DD !important;
  border-radius:15px !important;
  overflow:hidden;
  background:#fff;
}
th{
  padding:12px 10px !important;
  color:#fff !important;
  background:linear-gradient(135deg,var(--patas-green-900),var(--patas-green-700)) !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.035em;
  text-transform:uppercase;
}
td{
  padding:12px 10px !important;
  border-bottom:1px solid #E1ECE6 !important;
}
tbody tr:nth-child(even) td{background:#F3FAF6 !important}
tbody tr:hover td{background:#E7F6ED !important}
tbody tr:last-child td{border-bottom:0 !important}

/* ========================= STAT/REPORT CARDS ========================= */
.stats{
  gap:12px !important;
}
.stats>.stat{
  border:0 !important;
  border-radius:17px !important;
  background:linear-gradient(145deg,#EFF9F3,#DDF2E5) !important;
  box-shadow:0 7px 20px rgba(5,64,41,.06);
}
.stats>.stat:nth-child(2){background:linear-gradient(145deg,#E9F8F1,#CDEEDC) !important}
.stats>.stat:nth-child(3){background:linear-gradient(145deg,#FFF5DA,#F8EABF) !important}
.stats>.stat:nth-child(4){background:linear-gradient(145deg,#EFF8F7,#D8EFEB) !important}
.stats>.stat strong{
  color:var(--patas-green-950) !important;
  font-size:24px !important;
}

/* ========================= STATUS ========================= */
.pill,.badge{
  border-radius:999px !important;
  font-weight:900 !important;
  border:0 !important;
}
.pill,.badge.hadir,.paid{
  background:#DDF4E7 !important;
  color:#0A6D3C !important;
}
.unpaid{
  background:#FFEBDD !important;
  color:#A24E1A !important;
}

/* ========================= LOGIN ========================= */
.login{
  background:
    radial-gradient(circle at 10% 10%,rgba(214,164,61,.18),transparent 26%),
    radial-gradient(circle at 86% 82%,rgba(10,150,80,.19),transparent 34%),
    linear-gradient(135deg,#E4F7EC,#FFF4D6) !important;
}
.login-card{
  border-radius:25px !important;
  border:1px solid #D0E4DA !important;
  box-shadow:0 28px 70px rgba(3,55,36,.17) !important;
}
.login-card .full{
  background:linear-gradient(135deg,var(--patas-green-900),var(--patas-green-600)) !important;
  color:#fff !important;
}

/* ========================= MOBILE APP ========================= */
@media(max-width:1000px){
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:700px){
  .top{
    min-height:60px !important;
    padding:12px 14px !important;
  }
  .wrap{padding:18px 14px 84px !important}
  .grid{grid-template-columns:1fr !important}
  .quick-grid{
    grid-template-columns:1fr !important;
    padding:14px !important;
    border-radius:20px !important;
  }
  .quick-card{
    min-height:88px !important;
    align-items:center !important;
  }
  .quick-icon{
    width:46px !important;height:46px !important;flex-basis:46px !important;
  }
  h1{font-size:28px !important}
  .card{border-radius:18px !important}
}