/**
 * assets/css/app.css
 * Sistem reka bentuk kongsi untuk SEMUA halaman (dimuatkan oleh
 * includes/header.php & login.php). Lapisan di atas Bootstrap 5.3 sedia
 * ada — bukan gantian — supaya semua markup btn/card/badge/table yang
 * dah wujud terus kelihatan lebih kemas tanpa perlu tulis semula HTML
 * setiap halaman. Warna jenama diambil daripada logo PKPP Plantation
 * (ungu, hijau, oren, hitam).
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Warna jenama (daripada logo) */
  --pkpp-purple:      #5B2B85;
  --pkpp-purple-dark: #431F63;
  --pkpp-purple-tint: #F1EAF7;
  --pkpp-green:       #5E9C33;
  --pkpp-green-dark:  #497A27;
  --pkpp-orange:      #E0700F;
  --pkpp-orange-dark: #B85B0C;
  --pkpp-ink:         #1E1B24;
  --pkpp-muted:       #6B6774;
  --pkpp-bg:          #F6F5F9;
  --pkpp-surface:     #FFFFFF;
  --pkpp-border:      #E7E4ED;

  --pkpp-radius:      12px;
  --pkpp-radius-sm:   8px;
  --pkpp-shadow-sm:   0 1px 2px rgba(30,27,36,0.05);
  --pkpp-shadow:      0 2px 8px rgba(30,27,36,0.06), 0 1px 2px rgba(30,27,36,0.05);
  --pkpp-shadow-lg:   0 12px 32px rgba(67,31,99,0.14);

  /* Override token Bootstrap supaya btn/badge/alert/focus sedia ada
     terus guna palet jenama, tanpa perlu tulis semula setiap class. */
  --bs-primary:            var(--pkpp-purple);
  --bs-primary-rgb:        91, 43, 133;
  --bs-success:            var(--pkpp-green);
  --bs-success-rgb:        94, 156, 51;
  --bs-warning:            var(--pkpp-orange);
  --bs-warning-rgb:        224, 112, 15;
  --bs-link-color:         var(--pkpp-purple);
  --bs-link-hover-color:   var(--pkpp-purple-dark);
  --bs-body-font-family:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-body-color:         var(--pkpp-ink);
  --bs-border-radius:      var(--pkpp-radius-sm);
  --bs-border-radius-sm:   6px;
  --bs-border-radius-lg:   var(--pkpp-radius);
}

body {
  background: var(--pkpp-bg);
  color: var(--pkpp-ink);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
}

/* Jaring keselamatan — pastikan latar butang/badge utama kekal betul
   walaupun Bootstrap CDN lambat/gagal dimuat (bukan hanya bergantung
   kepada Bootstrap sendiri membaca token --bs-* di atas). */
.btn-success { background-color: var(--pkpp-green); border-color: var(--pkpp-green); }
.btn-success:hover { background-color: var(--pkpp-green-dark); border-color: var(--pkpp-green-dark); }
.btn-primary { background-color: var(--pkpp-purple); border-color: var(--pkpp-purple); }
.btn-primary:hover { background-color: var(--pkpp-purple-dark); border-color: var(--pkpp-purple-dark); }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Navbar jenama — dipakai oleh includes/header.php (.navbar-pkpp-admin
   untuk admin, .navbar-pkpp-staff untuk staf). Latar PUTIH sengaja
   (bukan gelap) — logo PKPP ada teks hitam terbenam ("PLANTATION SDN.
   BHD."), jadi latar gelap akan buat teks logo tak boleh dibaca. Peranan
   dibezakan melalui bar aksen atas + warna tab aktif, bukan latar navbar.
------------------------------------------------------------------------ */
.navbar-pkpp {
  background: var(--pkpp-surface);
  border-bottom: 1px solid var(--pkpp-border);
  box-shadow: var(--pkpp-shadow-sm);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  border-top: 3px solid var(--pkpp-purple);
}
.navbar-pkpp-staff { border-top-color: var(--pkpp-green); }

.navbar-pkpp .navbar-brand-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.navbar-pkpp .navbar-logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}
.navbar-pkpp .navbar-titles { line-height: 1.15; }
.navbar-pkpp .navbar-titles .brand-name {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--pkpp-ink);
}
.navbar-pkpp .navbar-titles .brand-sub {
  font-size: 0.72rem;
  color: var(--pkpp-muted);
  font-weight: 500;
}
.navbar-pkpp .role-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.5rem;
  vertical-align: middle;
  text-transform: uppercase;
}
.navbar-pkpp-admin .role-badge { background: var(--pkpp-purple-tint); color: var(--pkpp-purple-dark); }
.navbar-pkpp-staff .role-badge { background: #EAF3E1; color: var(--pkpp-green-dark); }

.navbar-pkpp .nav-pill {
  border: none;
  background: transparent;
  color: var(--pkpp-muted);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.navbar-pkpp .nav-pill:hover { background: var(--pkpp-bg); color: var(--pkpp-ink); text-decoration: none; }
.navbar-pkpp-admin .nav-pill.active { background: var(--pkpp-purple); color: #fff; }
.navbar-pkpp-staff .nav-pill.active { background: var(--pkpp-green); color: #fff; }

.navbar-pkpp .nav-logout {
  border: none;
  background: transparent;
  color: var(--pkpp-muted);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}
.navbar-pkpp .nav-logout:hover { background: #FBEAEA; color: #B42318; text-decoration: none; }

/* ---------------------------------------------------------------------
   Kad, jadual, borang — kemas tapi tak melampau
------------------------------------------------------------------------ */
.card {
  border: 1px solid var(--pkpp-border);
  border-radius: var(--pkpp-radius);
  box-shadow: var(--pkpp-shadow-sm);
}
.card-header {
  background: var(--pkpp-surface);
  border-bottom: 1px solid var(--pkpp-border);
  font-weight: 700;
  font-size: 0.9rem;
}
.card-footer {
  background: var(--pkpp-surface);
  border-top: 1px solid var(--pkpp-border);
}

.table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pkpp-muted);
  font-weight: 700;
  border-bottom-width: 1px;
}
.table > :not(caption) > * > * { padding: 0.65rem 0.85rem; }
.table-hover > tbody > tr:hover > * { background-color: var(--pkpp-purple-tint); }

.form-control, .form-select {
  border-color: var(--pkpp-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--pkpp-purple);
  box-shadow: 0 0 0 0.2rem rgba(91, 43, 133, 0.15);
}
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--pkpp-ink); }

.btn { font-weight: 600; border-radius: var(--pkpp-radius-sm); }
.btn-success { color: #fff; }

.badge { font-weight: 600; letter-spacing: 0.01em; }

.alert { border: none; border-radius: var(--pkpp-radius-sm); }

/* KPI / statistik ringkasan (cth. admin/dashboard.php) */
.card .fs-3.fw-bold { font-family: 'Plus Jakarta Sans', sans-serif; }

/* ---------------------------------------------------------------------
   Kalendar bulanan (user/calendar.php, paparan "Bulan") — grid ringkas
   kekosongan bilik supaya staf/admin boleh imbas sekali lihat sebelum
   buat tempahan. Setiap kotak = satu hari; "pill" kecil tunjuk status
   ringkas setiap bilik (hijau = kosong, oren = ada tempahan).
------------------------------------------------------------------------ */
.cal-tabs {
  display: inline-flex;
  background: var(--pkpp-bg);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.cal-tabs a {
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--pkpp-muted);
}
.cal-tabs a:hover { text-decoration: none; color: var(--pkpp-ink); }
.cal-tabs a.active {
  background: var(--pkpp-surface);
  color: var(--pkpp-ink);
  box-shadow: var(--pkpp-shadow-sm);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-weekday {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pkpp-muted);
  padding-bottom: 4px;
}
.cal-weekday.weekend { color: var(--pkpp-orange-dark); }

.cal-cell {
  background: var(--pkpp-surface);
  border: 1px solid var(--pkpp-border);
  border-radius: var(--pkpp-radius-sm);
  min-height: 92px;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.cal-cell:hover { box-shadow: var(--pkpp-shadow); border-color: var(--pkpp-purple); text-decoration: none; color: inherit; }
.cal-cell.outside { background: var(--pkpp-bg); opacity: 0.55; }
.cal-cell.weekend { background: #FBF8F1; }
.cal-cell.today { border-color: var(--pkpp-purple); border-width: 2px; }
.cal-cell .cal-date { font-weight: 700; font-size: 0.85rem; }
.cal-cell.today .cal-date { color: var(--pkpp-purple); }

.cal-pill {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  white-space: nowrap;
}
.cal-pill.empty { background: #EAF3E1; color: var(--pkpp-green-dark); }
.cal-pill.busy  { background: #FCEFE1; color: var(--pkpp-orange-dark); }

.cal-cell { min-height: 108px; cursor: pointer; }
.cal-cell:focus-visible { outline: 2px solid var(--pkpp-purple); outline-offset: 1px; }
.cal-event {
  font-size: 0.66rem;
  line-height: 1.3;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--pkpp-bg);
  border-left: 3px solid var(--pkpp-green);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-event.pending { border-left-color: var(--pkpp-orange); }
.cal-more { font-size: 0.64rem; color: var(--pkpp-muted); font-weight: 700; padding-left: 5px; }

/* ---------------------------------------------------------------------
   Halaman log masuk (login.php — HTML sendiri, tak guna header.php)
------------------------------------------------------------------------ */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(91,43,133,0.14), transparent 60%),
    radial-gradient(900px 480px at 108% 108%, rgba(94,156,51,0.12), transparent 55%),
    var(--pkpp-bg);
  padding: 24px;
}
.login-card { max-width: 400px; width: 100%; }
.login-card .card {
  border-radius: 18px;
  box-shadow: var(--pkpp-shadow-lg);
}
.login-card .login-logo { height: 72px; width: auto; margin: 0 auto 14px; display: block; }
.login-card h1 { font-size: 1.15rem; margin-bottom: 0.1rem; }
.login-card .btn-success {
  background: var(--pkpp-purple);
  border-color: var(--pkpp-purple);
}
.login-card .btn-success:hover {
  background: var(--pkpp-purple-dark);
  border-color: var(--pkpp-purple-dark);
}