/* name=assets/css/welcome.css */
/* Responsive styles untuk Welcome Tea + halaman admin */
:root{
  --green:#2d8f4f;
  --accent:#114a26;
  --bg:#f6fff6;
  --card-bg:#ffffff;
  --muted:#6b8a6b;
  --shadow:0 8px 24px rgba(16,48,23,0.06);
}

*{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#f3fff4 0%,#ffffff 100%);color:var(--accent)}
.container{max-width:1100px;margin:24px auto;padding:16px}

.card{background:var(--card-bg);border-radius:12px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}

/* Header image */
.header-image{width:100%;height:260px;border-radius:10px;overflow:hidden;background:#e9f6ea;display:flex;align-items:center;justify-content:center}
.header-image img{width:100%;height:100%;object-fit:cover;display:block}

/* Form */
h1{margin:0 0 8px;color:var(--green)}
.lead{color:var(--muted);margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-weight:600;margin-bottom:6px;color:#174d2b}
input[type="text"], input[type="date"], select, textarea{width:100%;padding:10px;border:1px solid #e0e6e0;border-radius:8px;background:#fbfffb}
textarea{min-height:110px;resize:vertical}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:0;color:#fff;background:var(--green);cursor:pointer;font-weight:600}
.btn.secondary{background:#eef7ee;color:var(--accent);border:1px solid #d6ead6}
.notice{padding:10px;border-radius:8px;margin-bottom:12px}
.notice.error{background:#fff3f3;border:1px solid #f0c2c2;color:#7a1919}
.notice.success{background:#f3fff5;border:1px solid #bfe8c7;color:#114a26}
.small{font-size:0.92em;color:#4b6c54}
.footer-note{margin-top:14px;color:#356b3e;font-size:0.95em}

/* Admin table responsive */
.table{width:100%;border-collapse:collapse}
.table th, .table td{padding:10px;border-bottom:1px solid #eef6ee;text-align:left}
.table th{background:#f1fbf2;color:var(--accent);font-weight:700}
.thumb{height:60px;object-fit:cover;border-radius:6px}

/* Small screens: make rows cards */
@media (max-width:800px){
  .form-grid{grid-template-columns:1fr}
  .header-image{height:160px}
  .table, .table thead, .table tbody, .table th, .table td, .table tr{display:block}
  .table thead{display:none}
  .table tr{margin-bottom:12px;border-radius:10px;background:linear-gradient(180deg,#ffffff, #fbfffb);box-shadow:var(--shadow);padding:12px}
  .table td{border:0;padding:8px 6px}
  .table td[data-label]:before{
    content: attr(data-label);
    display:block;
    font-weight:700;
    color:var(--muted);
    margin-bottom:6px;
    font-size:0.95em;
  }
  .row-flex{display:flex;gap:12px;flex-wrap:wrap}
  .row-flex .col{flex:1 1 150px}
}

/* Desktop niceties */
@media (min-width:801px){
  .actions a{color:var(--green);text-decoration:none}
}