/* Reka bentuk gaya Apple — macOS untuk PC, iOS untuk mobile.
   Sistem fon -apple-system pulls in San Francisco automatically on Apple
   devices/browsers and falls back gracefully elsewhere. */

/* Animasi lembut antara halaman (View Transitions API, sokongan progresif —
   browser lama terus navigasi biasa tanpa ralat). */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .22s;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
  }
}
:root{
  --bg:#f5f5f7; --surface:#ffffff; --text:#1d1d1f; --muted:#86868b;
  --accent:#007aff; --accent-dark:#0a5cd8; --danger:#ff3b30;
  --weekend:#ff9500; --weekend-bg:rgba(255,149,0,.1); --weekend-text:#c26a00;
  --divider:rgba(60,60,67,.13); --divider-strong:rgba(60,60,67,.22);
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 2px 10px rgba(0,0,0,.06);
  --header-bg:rgba(245,245,247,.75);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000; --surface:#1c1c1e; --text:#f5f5f7; --muted:#98989d;
    --accent:#0a84ff; --accent-dark:#409cff; --danger:#ff453a;
    --weekend:#ff9f0a; --weekend-bg:rgba(255,159,10,.14); --weekend-text:#ff9f0a;
    --divider:rgba(255,255,255,.13); --divider-strong:rgba(255,255,255,.22);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.35);
    --header-bg:rgba(28,28,30,.72);
  }
  table.cal th{background:#161618 !important}
  table.cal td.empty{background:#161618 !important}
  table.cal td.is-holiday{background:rgba(255,69,58,.1)}
  .month-grid a:hover,.day-link:hover,.agenda-row:active{background:#2c2c2e !important}
  .member-pill{background:var(--surface)}
  .member-pill:hover{background:#2c2c2e}
  .chevron-btn{background:rgba(255,255,255,.12)}
  .chevron-btn:hover{background:rgba(255,255,255,.2)}
  .month-list-m a.is-current,.agenda-row.is-today{background:rgba(10,132,255,.16)}
  .quota-step{background:rgba(255,255,255,.1)}
  .quota-step:hover{background:rgba(255,255,255,.16)}
  .quota-save{background:rgba(48,209,88,.2);color:#30d158}
  .quota-save:hover{background:rgba(48,209,88,.3)}
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.47;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}

header{
  position:sticky;top:0;z-index:20;
  background:var(--header-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--divider);
  padding:16px 28px;display:flex;justify-content:space-between;align-items:center;gap:12px
}
header h1{font-size:20px;margin:0;letter-spacing:-.01em;font-weight:600}
header a{font-size:14px;font-weight:500}
.back-link{display:inline-flex;align-items:center;gap:1px;font-weight:600;color:var(--accent)}
.back-link:hover{color:var(--accent-dark)}
.month-nav-title{display:flex;align-items:center;gap:10px}
.chevron-btn{
  width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.05);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;
  flex:0 0 auto;line-height:1
}
.chevron-btn:hover{background:rgba(0,0,0,.09);color:var(--accent-dark)}
.kicker{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
main{padding:24px 28px 60px;max-width:1000px;margin:0 auto}
.hr{border:none;border-top:1px solid var(--divider);margin:16px 0}

/* Pilih bulan — jubin macOS */
.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.month-grid a{
  display:block;padding:20px 16px;border-radius:var(--radius-md);background:var(--surface);
  box-shadow:var(--shadow);font-weight:600;text-align:center;color:var(--text);
  transition:transform .12s ease,box-shadow .12s ease
}
.month-grid a:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-1px)}
.month-grid a:active{transform:translateY(0) scale(.98)}
.month-grid a.is-current{background:var(--accent);color:#fff;box-shadow:0 2px 12px rgba(0,122,255,.4)}
.current-badge{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-top:4px;opacity:.9}
.month-grid a.is-current .current-badge{color:#fff}
.month-list-m a .current-badge{color:var(--accent);background:rgba(0,122,255,.12);padding:2px 8px;border-radius:999px;display:inline-block;margin-top:0}

/* Kalendar bulanan — gaya app Calendar macOS */
table.cal{
  width:100%;border-collapse:separate;border-spacing:0;margin-top:16px;
  background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow)
}
table.cal th{
  font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;
  padding:10px 8px;border-bottom:1px solid var(--divider);text-align:left;background:rgba(0,0,0,.02)
}
table.cal td{
  border-right:1px solid var(--divider);border-bottom:1px solid var(--divider);
  vertical-align:top;height:86px;padding:6px 8px;width:14.28%
}
table.cal tr th:last-child,table.cal tr td:last-child{border-right:none}
table.cal tr:last-child td{border-bottom:none}
table.cal td.empty{background:rgba(0,0,0,.02)}
table.cal td.weekend{background:var(--weekend-bg)}
table.cal td.is-holiday{background:rgba(255,59,48,.06)}
.daynum{
  font-weight:600;font-size:13px;color:var(--text);display:inline-flex;
  align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%
}
table.cal td.weekend .daynum{color:var(--weekend-text)}
.daynum.today{background:var(--danger);color:#fff}
table.cal td.weekend .daynum.today{color:#fff}
.holiday{color:var(--danger);font-size:10px;font-weight:600}
.note-preview{font-size:11px;color:var(--muted);margin-top:3px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-preview{font-size:11px;color:var(--accent);font-weight:600;margin-top:2px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-link{display:block;height:100%;color:inherit;border-radius:inherit;transition:background .1s ease}
.day-link:hover{background:rgba(0,122,255,.06)}

section{margin-top:32px}
h2.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;border-bottom:none;padding-bottom:8px;margin-bottom:2px}

/* Senarai — gaya "inset grouped" iOS/macOS */
ul.plain{list-style:none;padding:0;margin:0;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow)}
ul.plain li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--divider)}
ul.plain li:last-child{border-bottom:none}

form.inline{display:flex;gap:8px;margin-top:12px}
input[type=text],input[type=date],input[type=time],input[type=number],textarea{
  border:1px solid var(--divider-strong);border-radius:var(--radius-sm);padding:9px 12px;
  font:inherit;flex:1;background:var(--surface);color:var(--text)
}
input[type=text]:focus,input[type=date]:focus,input[type=time]:focus,input[type=number]:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,122,255,.15)
}
input[type=color]{border:1px solid var(--divider-strong);border-radius:6px;padding:2px;background:var(--surface);cursor:pointer;height:36px}
input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}

button{
  background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:9px 16px;font-weight:600;font-size:14px;cursor:pointer;transition:background .12s ease,transform .08s ease;
  font-family:inherit
}
button:hover{background:var(--accent-dark)}
button:active{transform:scale(.96)}
button.ghost{background:rgba(0,122,255,.12);color:var(--accent);border:none;padding:7px 12px;border-radius:var(--radius-sm);font-weight:600}
button.ghost:hover{background:rgba(0,122,255,.2)}
button.ghost.del{background:rgba(255,59,48,.12);color:var(--danger)}
button.ghost.del:hover{background:rgba(255,59,48,.2)}
.icon-btn{width:32px;height:32px;padding:0 !important;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}

/* Ahli keluarga — capsul iOS */
.member-switcher{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.member-switcher-label{font-size:12px;color:var(--muted);font-weight:500}
.member-pill-form{display:inline}
.member-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);color:var(--text);border:1.5px solid var(--tag-color,var(--divider-strong));
  border-radius:999px;padding:5px 14px 5px 5px;font-weight:600;font-size:13px;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04);transition:all .12s ease;font-family:inherit
}
.member-pill:hover{background:rgba(0,0,0,.04)}
.member-pill.active{background:var(--tag-color,var(--accent));border-color:var(--tag-color,var(--accent));color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.member-avatar-lg{
  width:20px;height:20px;border-radius:50%;background:var(--tag-color,var(--accent));color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex:0 0 auto
}
.member-pill.active .member-avatar-lg{background:#fff;color:var(--tag-color,var(--accent))}
.member-manage-link{font-size:12px;margin-left:6px;color:var(--accent);font-weight:500}
.member-tag{
  display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px 2px 2px;
  border-radius:999px;border:1px solid var(--tag-color,var(--divider-strong));color:var(--tag-color,var(--text));white-space:nowrap
}
.member-avatar{
  width:14px;height:14px;border-radius:50%;background:var(--tag-color,var(--divider));color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;flex:0 0 auto
}

/* Ringkasan baki cuti tahunan (kuota vs digunakan) */
.leave-summary{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.leave-summary-item{display:flex;align-items:center;gap:8px;font-size:12px}
.leave-summary-name{width:56px;flex:0 0 auto;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leave-summary-bar{flex:1;height:6px;border-radius:3px;background:var(--divider);overflow:hidden}
.leave-summary-fill{display:block;height:100%;background:var(--tag-color,var(--accent));border-radius:3px}
.leave-summary-count{flex:0 0 auto;color:var(--muted);font-variant-numeric:tabular-nums}
.quota-stepper{display:flex;align-items:center;gap:3px;flex:0 0 auto}
.quota-step{width:22px;height:22px;padding:0;border-radius:6px;background:rgba(0,0,0,.06);color:var(--text);font-weight:700;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.quota-step:hover{background:rgba(0,0,0,.1)}
input.quota-input{width:40px;flex:0 0 auto;padding:2px 4px;text-align:center;font-size:12px;border-radius:6px}
.quota-save{width:22px;height:22px;padding:0;border-radius:6px;background:rgba(52,199,89,.15);color:#248a3d;font-weight:700;font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.quota-save:hover{background:rgba(52,199,89,.25)}

/* Titik penanda ahli dlm kalendar */
.day-dots{display:flex;gap:3px;margin-top:3px}
.day-dot{width:6px;height:6px;border-radius:50%;background:var(--tag-color,var(--divider));display:inline-block}

/* Index — senarai bulan mobile (iOS grouped list) */
.month-list-m{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow)}
.month-list-m a{display:flex;align-items:center;gap:8px;padding:16px 34px 16px 18px;border-bottom:1px solid var(--divider);font-weight:500;color:var(--text);position:relative}
.month-list-m a::after{content:"\203a";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600;font-size:19px}
.month-list-m a:last-child{border-bottom:none}
.month-list-m a:active{background:rgba(0,0,0,.04)}
.month-list-m a.is-current{background:rgba(0,122,255,.08)}
.year-form-m{display:flex;gap:8px;align-items:center;margin-bottom:18px}
.year-form-m input{width:90px}

/* Bulan — susun atur agenda mobile (iOS inset grouped) */
.agenda-m{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow)}
.agenda-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--divider);color:var(--text)}
.agenda-row:last-child{border-bottom:none}
.agenda-row:active{background:rgba(0,0,0,.04)}
.agenda-row.is-holiday{background:rgba(255,59,48,.07)}
.agenda-row.weekend{background:var(--weekend-bg)}
.agenda-row.is-today{background:rgba(0,122,255,.06)}
.agenda-daynum{font-weight:600;font-size:15px;min-width:36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text)}
.agenda-daynum-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%}
.agenda-daynum-n.today{background:var(--danger);color:#fff}
.agenda-daynum small{font-size:9px;font-weight:500;text-transform:uppercase;color:var(--muted)}
.agenda-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.agenda-body .note-preview.muted{color:var(--muted);opacity:.6}

/* Nota harian — dua lajur pada PC */
.day-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}

/* Navigasi ringkas (cth. tahun lepas/depan) */
.nav-months{display:flex;justify-content:space-between;margin-top:16px;font-size:14px;font-weight:500}

/* Ringkasan statistik setahun */
.year-stats{display:flex;gap:12px;margin-bottom:14px}
.year-stat{flex:1;background:var(--surface);border-radius:var(--radius-md);padding:14px;text-align:center;box-shadow:var(--shadow)}
.year-stat-num{display:block;font-size:26px;font-weight:800;color:var(--accent)}
.year-stat-label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

/* Pandangan setahun — grid kalendar mini (year.php) */
.year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.mini-month{display:block;background:var(--surface);border-radius:var(--radius-md);padding:10px;box-shadow:var(--shadow);color:inherit;text-decoration:none}
.mini-month-title{font-size:12px;font-weight:700;text-align:center;margin-bottom:6px;color:var(--text)}
table.mini-cal{width:100%;border-collapse:collapse;font-size:9px}
table.mini-cal th{color:var(--muted);font-weight:600;padding:1px 0;text-align:center}
table.mini-cal td{text-align:center;padding:1px 0}
table.mini-cal td a{display:block;text-decoration:none}
.mini-daynum{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;color:var(--text);font-size:9px}
table.mini-cal td.weekend .mini-daynum{color:var(--weekend-text)}
table.mini-cal td.is-holiday .mini-daynum{color:var(--danger);font-weight:700}
.mini-daynum.today{background:var(--danger);color:#fff}
table.mini-cal td.weekend .mini-daynum.today{color:#fff}
.mini-dot{display:block;width:3px;height:3px;border-radius:50%;background:var(--accent);margin:1px auto 0}

/* Borang ringkas mobile: susun menegak, sasaran sentuh lebih besar */
.inline-m{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.inline-m input,.inline-m button{width:100%;padding:12px}
/* Senarai Ahli Keluarga — row paparan sahaja, tekan buka sheet utk edit */
.member-row-tap{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:none;border:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.member-row-avatar{width:36px;height:36px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex:0 0 auto}
.member-row-info{display:flex;flex-direction:column;min-width:0;gap:1px}
.member-row-name{font-weight:600;font-size:15px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-row-quota{font-size:12px;color:var(--muted)}
.member-row-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}

body.is-mobile{font-size:16px;-webkit-tap-highlight-color:transparent;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
body.is-mobile header{
  padding:14px 16px;padding-top:max(14px, env(safe-area-inset-top));
  position:sticky;justify-content:flex-start;gap:0
}
body.is-mobile main{padding:16px 16px calc(84px + env(safe-area-inset-bottom))}
body.is-mobile button,body.is-mobile .ghost{padding:11px 15px}
body.is-mobile ul.plain li{padding:13px 14px}
body.is-mobile textarea{border-radius:var(--radius-md)}
body.is-mobile .year-grid{grid-template-columns:1fr}
body.is-mobile .mini-month{padding:12px}
body.is-mobile table.mini-cal{font-size:12px}
body.is-mobile .mini-daynum{width:22px;height:22px;font-size:12px}

/* "Large Title" gaya iOS — tajuk besar atas, mengecil ke bar padat bila scroll */
body.is-mobile .topbar-title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:17px;font-weight:600;color:var(--text);max-width:56%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
  opacity:0;transition:opacity .18s ease;pointer-events:none
}
body.is-mobile header.is-scrolled .topbar-title{opacity:1}
body.is-mobile header.is-scrolled{box-shadow:0 1px 0 var(--divider)}
.large-title-block{padding:2px 2px 14px}
.large-title-block .kicker{margin-bottom:2px;display:block}
.large-title{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--text)}
.large-title-nav{display:flex;align-items:center;gap:10px;margin:0}

/* Tajuk seksyen melekat bila senarai panjang di-scroll (offset = tinggi tepat header: padding atas+bawah 14px + butang chevron 28px) */
body.is-mobile h2.section-title{position:sticky;top:calc(max(14px, env(safe-area-inset-top)) + 42px);background:var(--bg);z-index:5;padding:8px 0}

/* Tab bar bawah (nav utama gaya iOS) */
.tab-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:var(--header-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--divider);padding:6px 4px max(6px, env(safe-area-inset-bottom))
}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:10px;font-weight:600;padding:4px 0}
.tab-icon{font-size:21px;line-height:1}
.tab-item.active{color:var(--accent)}

/* Borang "bottom sheet" gaya iOS */
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:20px 20px 0 0;
  padding:14px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -4px 24px rgba(0,0,0,.2);
  transform:translateY(110%);transition:transform .25s cubic-bezier(.32,.72,0,1);z-index:41;max-height:80vh;overflow-y:auto
}
.sheet.open{transform:translateY(0)}
.sheet-handle{width:36px;height:5px;border-radius:3px;background:var(--divider-strong);margin:0 auto 14px}
.sheet-title{font-size:15px;font-weight:700;margin-bottom:12px}
.fab-trigger{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;
  background:rgba(0,122,255,.12);color:var(--accent);border:none;border-radius:var(--radius-sm);
  padding:12px;font-weight:600;font-size:14px;font-family:inherit
}

/* State kosong (senarai tiada rekod lagi) */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow);text-align:center}
.empty-state-icon{font-size:28px;line-height:1}
.empty-state-text{font-size:13px;color:var(--muted);max-width:32ch}

/* Toast pengesahan */
.toast{
  position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%) translateY(-16px);
  background:rgba(28,28,30,.92);color:#fff;padding:10px 18px;border-radius:999px;
  font-size:13px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.25);
  opacity:0;transition:opacity .25s ease,transform .25s ease;
  z-index:100;pointer-events:none;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Swipe-to-delete gaya iOS pada senarai. Butang merah kekal DI BELAKANG (z-index bawah) —
   content (z-index atas, latar legap) tutup ia sepenuhnya semasa rehat, hanya terdedah
   bila content diseret/translate ke kiri. Tanpa z-index eksplisit, elemen positioned
   (.swipe-action) sentiasa timbul atas content statik walau apa pun susunan DOM. */
.swipeable{position:relative;overflow:hidden;padding:0 !important}
.swipe-content{display:flex;align-items:center;gap:10px;padding:13px 14px;background:var(--surface);transition:transform .15s ease;width:100%;position:relative;z-index:2}
.swipe-action{position:absolute;top:0;right:0;bottom:0;width:76px;background:var(--danger);color:#fff;border:none;font-weight:700;font-size:13px;font-family:inherit;z-index:1}

@media (max-width:600px){
  .day-columns{grid-template-columns:1fr}
}