/**
 * GawangPinas Landing — Components Stylesheet
 * Buttons, Form Controls, Badges, Tables, Cards, Search, Modal, and Toasts
 * Clean, Standard CSS — Understandable to a College Student
 */

/* ── 1. Buttons (.btn) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--gp-radius-md);
  font-family: var(--gp-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color var(--gp-transition-fast),
              border-color var(--gp-transition-fast),
              color var(--gp-transition-fast),
              transform var(--gp-transition-fast);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* Primary Button */
.btn--primary {
  background-color: var(--gp-primary);
  color: #ffffff;
  border-color: var(--gp-primary);
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--gp-primary-hover);
  border-color: var(--gp-primary-hover);
  color: #ffffff;
}

/* Outline / Secondary Button */
.btn--outline {
  background-color: var(--gp-surface);
  color: var(--gp-text-main);
  border-color: var(--gp-border-strong);
}

.btn--outline:hover:not(:disabled) {
  background-color: var(--gp-surface-2);
  border-color: var(--gp-text-muted);
  color: var(--gp-text-main);
}

/* Subtle Link Button */
.btn--subtle {
  background-color: transparent;
  color: var(--gp-text-secondary);
}

.btn--subtle:hover:not(:disabled) {
  background-color: var(--gp-surface-2);
  color: var(--gp-text-main);
}

/* Sizing Modifiers */
.btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 0.8125rem;
  border-radius: var(--gp-radius-sm);
}

.btn--lg {
  height: 44px;
  padding: 0 20px;
  font-size: 0.9375rem;
  border-radius: var(--gp-radius-md);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ── 2. Form Controls ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--gp-space-4);
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gp-text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-label-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gp-text-muted);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-family: var(--gp-font-sans);
  font-size: 0.875rem;
  color: var(--gp-text-main);
  background-color: var(--gp-surface);
  border: 1px solid var(--gp-border-strong);
  border-radius: var(--gp-radius-sm);
  padding: 0 12px;
  outline: none;
  transition: border-color var(--gp-transition-fast), box-shadow var(--gp-transition-fast);
}

.form-input {
  height: 40px;
}

.form-select {
  height: 40px;
  cursor: pointer;
}

.form-textarea {
  padding: 10px 12px;
  min-height: 90px;
  line-height: 1.5;
  resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gp-primary);
  box-shadow: 0 0 0 3px var(--gp-primary-light);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: var(--gp-surface-2);
  color: var(--gp-text-muted);
  cursor: not-allowed;
}

.form-error {
  font-size: 0.75rem;
  color: var(--gp-danger-text);
  margin-top: 2px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gp-space-4);
}

/* ── 3. Cards & Content Containers ── */
.card {
  background-color: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-lg);
  overflow: hidden;
  box-shadow: var(--gp-shadow-xs);
}

.card--interactive {
  transition: border-color var(--gp-transition-fast), box-shadow var(--gp-transition-fast), transform var(--gp-transition-fast);
}

.card--interactive:hover {
  border-color: var(--gp-border-strong);
  box-shadow: var(--gp-shadow-sm);
  transform: translateY(-2px);
}

.card-header {
  padding: var(--gp-space-4) var(--gp-space-5);
  border-bottom: 1px solid var(--gp-border);
  background-color: var(--gp-surface-2);
}

.card-body {
  padding: var(--gp-space-5);
}

.card-footer {
  padding: var(--gp-space-3) var(--gp-space-5);
  border-top: 1px solid var(--gp-border);
  background-color: var(--gp-surface-2);
}

/* ── 5. Data Tables ── */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-md);
  background-color: var(--gp-surface);
  box-shadow: var(--gp-shadow-xs);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  text-align: left;
}

.table th {
  background-color: var(--gp-surface-2);
  color: var(--gp-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gp-border);
}

.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gp-border);
  color: var(--gp-text-secondary);
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background-color: var(--gp-surface-2);
}

.table td.num,
.table th.num {
  text-align: right;
  font-feature-settings: var(--gp-tabular-nums);
  font-variant-numeric: tabular-nums;
}

/* ── 6. Search Bar & Filter Chips ── */
.search-bar {
  display: flex;
  align-items: center;
  background-color: var(--gp-surface);
  border: 1px solid var(--gp-border-strong);
  border-radius: var(--gp-radius-md);
  padding: 4px 6px;
  gap: 8px;
  width: 100%;
  max-width: 600px;
}

.search-bar:focus-within {
  border-color: var(--gp-primary);
  box-shadow: 0 0 0 3px var(--gp-primary-light);
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--gp-text-main);
  padding: 6px 8px;
  background: transparent;
}

.search-input::placeholder {
  color: var(--gp-text-faint);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--gp-radius-sm);
  background-color: var(--gp-surface);
  border: 1px solid var(--gp-border);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gp-text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--gp-transition-fast);
}

.filter-chip:hover {
  border-color: var(--gp-border-strong);
  color: var(--gp-text-main);
}

.filter-chip.is-active {
  background-color: var(--gp-primary);
  border-color: var(--gp-primary);
  color: #ffffff;
  font-weight: 600;
}

/* ── 7. Accessible Modal Base ── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(33, 25, 20, 0.6);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: var(--gp-space-4);
}

.modal-backdrop.is-open {
  display: flex;
}

.modal-dialog {
  background-color: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--gp-shadow-md);
  overflow: hidden;
}

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

.modal-title {
  margin: 0;
  font-size: 1.125rem;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--gp-text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gp-radius-sm);
}

.modal-close:hover {
  background-color: var(--gp-surface-2);
  color: var(--gp-text-main);
}

.modal-body {
  padding: var(--gp-space-5);
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gp-space-2);
  padding: var(--gp-space-4) var(--gp-space-5);
  border-top: 1px solid var(--gp-border);
  background-color: var(--gp-surface-2);
}

/* ── 8. Toast Notifications ── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: 10px 16px;
  border-radius: var(--gp-radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: var(--gp-shadow-md);
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #211914;
  color: #ffffff;
  border: 1px solid #5D4532;
  animation: toastFadeIn 0.2s ease-out;
}

.toast--success {
  border-color: var(--gp-success);
}

.toast--error {
  border-color: var(--gp-danger);
}

@keyframes toastFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Unified GawangPinas public header. Keep these rules identical across sites. */
body .site-header { position:relative; top:0; border-top:0; border-bottom:1px solid var(--gp-border); background:var(--gp-bg,var(--gp-surface)); }
body .site-header > .container { box-sizing:border-box; width:100%; max-width:1200px; margin-inline:auto; padding-inline:24px; }
body .site-header :is(.header-inner,.site-header-inner) { display:flex; align-items:center; justify-content:space-between; height:72px; min-height:72px; gap:20px; }
body .site-header .brand { display:inline-flex; align-items:center; flex-shrink:0; gap:10px; text-decoration:none; }
body .site-header :is(.brand__logo,.brand-logo-wrap) { display:grid; place-items:center; box-sizing:border-box; width:36px; height:36px; padding:0; border:0; border-radius:9px; background:transparent; }
body .site-header :is(.brand__logo img,.brand-logo) { width:100%; height:100%; object-fit:contain; }
body .site-header :is(.brand__name,.brand-text) { display:flex; flex-direction:column; gap:3px; font-size:18px; font-weight:700; line-height:1.15; letter-spacing:-.02em; color:var(--gp-text-main); }
body .site-header .brand-name { font:inherit; letter-spacing:inherit; }
body .site-header :is(.brand__name small,.brand-sub) { font-size:11px; font-weight:500; line-height:1.2; letter-spacing:0; color:var(--gp-text-muted,#675644); }
body .site-header :is(.main-nav,.site-nav,.nav-list) { align-items:center; gap:4px; }
body .site-header :is(.nav-link,.site-nav a) { display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; padding:10px; font-size:14px; font-weight:500; line-height:1.4; white-space:nowrap; border-radius:4px; color:var(--gp-text-secondary); text-decoration:none; }
body .site-header :is(.nav-link,.site-nav a):hover { background:var(--gp-surface-2); color:var(--gp-text-main); }
/* Keep the active navigation underline straight at both ends. */
body .site-header :is(.nav-link.is-active,.nav-link[aria-current="page"]) { border-radius:0; }
body .site-header :is(.header-actions,.site-actions) { display:flex; align-items:center; flex-shrink:0; gap:8px; }
body .site-header :is(.btn,.icon-btn,.nav-toggle) { box-sizing:border-box; min-height:44px; height:44px; border-radius:4px; box-shadow:none; }
body .site-header .btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; font-size:13px; font-weight:600; line-height:1.4; white-space:nowrap; }
body .site-header :is(.btn--primary,.btn-primary) { background:#5D1916; border:1px solid #5D1916; color:#211914; }
body .site-header :is(.btn--primary,.btn-primary):hover { background:#6C3603; border-color:#6C3603; color:#211914; }
body .site-header :is(.btn--outline,.btn-secondary) { background:transparent; border:1px solid var(--gp-border-strong); color:var(--gp-text-main); }
body .site-header :is(.icon-btn,.nav-toggle) { width:44px; min-width:44px; align-items:center; justify-content:center; padding:0; border:1px solid var(--gp-border); background:transparent; color:var(--gp-text-secondary); }
body .site-header :focus-visible { outline:2px solid var(--gp-text-main); outline-offset:3px; }
@media(min-width:1200px) {
 body .site-header :is(.main-nav,.site-nav) { display:flex; position:static; }
 body .site-header .nav-list { flex-direction:row; }
 body .site-header :is(.menu-toggle,.nav-toggle) { display:none; }
}
@media(max-width:1199px) {
 body .site-header :is(.main-nav,.site-nav) { display:none; }
 body .site-header :is(.menu-toggle,.nav-toggle) { display:inline-flex; }
 body .site-header .main-nav.is-open { display:flex; position:absolute; top:72px; left:0; width:100%; max-height:calc(100dvh - 72px); overflow:auto; padding:16px; background:var(--gp-surface); border-bottom:1px solid var(--gp-border); z-index:1100; }
 body .site-header .main-nav.is-open .nav-list { width:100%; flex-direction:column; align-items:stretch; }
 body .site-header .main-nav.is-open .nav-link { width:100%; }
 body .site-header .site-menu:not([hidden]) { max-height:calc(100dvh - 72px); }
}
@media(max-width:768px) {
 body .site-header > .container { padding-inline:16px; }
 body .site-header :is(.header-inner,.site-header-inner) { gap:12px; }
 body .site-header :is(.btn--hide-mobile,.site-actions .btn) { display:none; }
}
@media(max-width:480px) { body .site-header .site-actions .icon-btn:first-child { display:inline-flex; } }

/* Bag and two-tone wordmark follow the mobile app's brand lockup. */
body .brand__wordmark { display:inline-flex; white-space:nowrap; font-size:22px; font-weight:800; line-height:1.1; letter-spacing:-.035em; }
body .brand__wordmark > span:first-child { color:#5D1916; }
body .brand__wordmark > span:last-child { color:#5D1F14; }
[data-theme="dark"] body .brand__wordmark > span { color:#FDFBF7; }
body :is(.site-header,.gp-footer) .brand { gap:10px; }
body :is(.site-header,.gp-footer) .brand__logo { width:44px; height:44px; flex-shrink:0; border-radius:0; overflow:visible; background:transparent; }
body :is(.site-header,.gp-footer) .brand__logo img { width:100%; height:100%; object-fit:contain; }
@media(max-width:480px) {
 body .site-header .brand__logo { width:36px; height:36px; }
 body .site-header .brand__wordmark { font-size:19px; }
}

/* Compact brand spacing across GawangPinas websites. */
body :is(.site-header,.gp-footer,.site-footer) .brand { gap:6px; }
body :is(.site-header,.gp-footer,.site-footer) .brand__name { gap:1px; }

/* Slightly smaller website brand lockup. */
body :is(.site-header,.gp-footer,.site-footer) .brand__logo { width:38px; height:38px; }
body .brand__wordmark { font-size:20px; }
@media(max-width:480px) { body .site-header .brand__logo { width:32px; height:32px; } body .site-header .brand__wordmark { font-size:18px; } }