/* Reusable application components */
.app-page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:22px; }
.app-page-header-copy { min-width:0; }
.app-page-eyebrow { color:var(--app-primary); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.app-page-title { margin:0; }
.app-page-subtitle { color:var(--app-muted); margin-top:5px; font-size:.83rem; }
.app-page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.app-stat-card { position:relative; min-height:126px; }
.app-stat-card .card-body { padding:17px 18px; }
.app-stat-label { color:var(--app-muted); font-size:.74rem; font-weight:600; }
.app-stat-value { margin-top:9px; font-size:1.65rem; line-height:1.05; font-weight:760; letter-spacing:-.045em; color:var(--app-text); }
.app-stat-foot { margin-top:11px; color:var(--app-muted); font-size:.7rem; }
.app-stat-icon { position:absolute; right:16px; top:16px; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--app-primary-soft); color:var(--app-primary); font-size:1.05rem; }
.app-stat-card[data-tone="success"] .app-stat-icon { background:#ecfdf5; color:#059669; }
.app-stat-card[data-tone="warning"] .app-stat-icon { background:#fffbeb; color:#d97706; }
.app-stat-card[data-tone="danger"] .app-stat-icon { background:#fef2f2; color:#dc2626; }
.app-stat-card[data-tone="info"] .app-stat-icon { background:#ecfeff; color:#0891b2; }

.app-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px; border:1px solid var(--app-border); border-radius:13px; background:var(--app-surface); margin-bottom:14px; }
.app-toolbar-spacer { margin-left:auto; }

.app-section-title { display:flex; align-items:center; gap:9px; font-size:.95rem; font-weight:720; margin:0 0 12px; }
.app-section-title i { color:var(--app-primary); }

.app-empty { padding:38px 20px; text-align:center; color:var(--app-muted); }
.app-empty-icon { width:52px; height:52px; margin:0 auto 12px; border-radius:16px; display:grid; place-items:center; color:var(--app-primary); background:var(--app-primary-soft); font-size:1.3rem; }
.app-empty-title { color:var(--app-text); font-size:.9rem; font-weight:700; }
.app-empty-text { max-width:380px; margin:5px auto 0; font-size:.78rem; }

.app-status-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px; background:currentColor; }
.app-meta { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--app-muted); font-size:.76rem; }
.app-meta-item { display:flex; align-items:center; gap:5px; }

.app-soft-panel { border:1px solid var(--app-border); border-radius:13px; background:var(--app-surface-2); padding:14px; }
.app-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }

.app-quick-actions { display:flex; flex-wrap:wrap; gap:8px; }
.app-quick-action { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 11px; border:1px solid var(--app-border); border-radius:11px; background:var(--app-surface); color:var(--app-text); text-decoration:none; font-weight:620; font-size:.78rem; transition:all var(--app-transition); }
.app-quick-action:hover { border-color:rgba(var(--app-primary-rgb),.25); background:var(--app-primary-soft); color:var(--app-primary); transform:translateY(-1px); }
.app-quick-action i { color:var(--app-primary); }

/* Status badge semantic aliases usable from JS */
.app-status { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 8px; font-size:.68rem; font-weight:700; }
.app-status-success { background:#ecfdf5; color:#047857; }
.app-status-warning { background:#fffbeb; color:#b45309; }
.app-status-danger { background:#fef2f2; color:#b91c1c; }
.app-status-info { background:#ecfeff; color:#0e7490; }
.app-status-neutral { background:var(--app-surface-3); color:var(--app-muted); }

[data-bs-theme="dark"] .app-stat-card[data-tone="success"] .app-stat-icon,[data-bs-theme="dark"] .app-status-success { background:rgba(16,185,129,.12); color:#6ee7b7; }
[data-bs-theme="dark"] .app-stat-card[data-tone="warning"] .app-stat-icon,[data-bs-theme="dark"] .app-status-warning { background:rgba(245,158,11,.12); color:#fcd34d; }
[data-bs-theme="dark"] .app-stat-card[data-tone="danger"] .app-stat-icon,[data-bs-theme="dark"] .app-status-danger { background:rgba(239,68,68,.12); color:#fca5a5; }
[data-bs-theme="dark"] .app-stat-card[data-tone="info"] .app-stat-icon,[data-bs-theme="dark"] .app-status-info { background:rgba(6,182,212,.12); color:#67e8f9; }

/* High-touch operational screens */
body[data-route^="fnb/kitchen"] .main-content .card,
body[data-route^="fnb/order"] .main-content .card,
body[data-route^="housekeeping/my-rooms"] .main-content .card,
body[data-route^="maintenance/my-jobs"] .main-content .card { box-shadow:var(--app-shadow-sm); }
body[data-route^="fnb/kitchen"] .main-content { max-width:1880px; }
body[data-route^="fnb/kitchen"] .card { border-radius:16px; }
body[data-route^="housekeeping/my-rooms"] .main-content,
body[data-route^="maintenance/my-jobs"] .main-content { max-width:1320px; }
body[data-route^="front-office/pre-arrival"] .table,
body[data-route^="front-office/in-house"] .table,
body[data-route^="reservasi"] .table { font-size:.84rem; }

/* Dense filter forms get a modern toolbar appearance */
.main-content form.d-flex.gap-2:not(.d-inline),
.main-content form.row.g-2,
.main-content form.row.g-3 { align-items:end; }

/* Details / definition-style blocks */
.main-content .list-group-item { padding:11px 14px; background:var(--app-surface); border-color:var(--app-border); }
.main-content dl dt { color:var(--app-muted); font-size:.72rem; font-weight:650; }
.main-content dl dd { color:var(--app-text); font-weight:600; }

/* Semantic status repaint, applied by JS without changing server classes */
.badge[data-semantic="success"] { background:#ecfdf5 !important;color:#047857 !important;border:1px solid #a7f3d0; }
.badge[data-semantic="warning"] { background:#fffbeb !important;color:#b45309 !important;border:1px solid #fde68a; }
.badge[data-semantic="danger"] { background:#fef2f2 !important;color:#b91c1c !important;border:1px solid #fecaca; }
.badge[data-semantic="info"] { background:#ecfeff !important;color:#0e7490 !important;border:1px solid #a5f3fc; }
[data-bs-theme="dark"] .badge[data-semantic="success"] { background:rgba(16,185,129,.12)!important;color:#6ee7b7!important;border-color:rgba(16,185,129,.28); }
[data-bs-theme="dark"] .badge[data-semantic="warning"] { background:rgba(245,158,11,.12)!important;color:#fcd34d!important;border-color:rgba(245,158,11,.28); }
[data-bs-theme="dark"] .badge[data-semantic="danger"] { background:rgba(239,68,68,.12)!important;color:#fca5a5!important;border-color:rgba(239,68,68,.28); }
[data-bs-theme="dark"] .badge[data-semantic="info"] { background:rgba(6,182,212,.12)!important;color:#67e8f9!important;border-color:rgba(6,182,212,.28); }

/* ==========================================================================\n   Hybrid AJAX / PJAX experience\n   ========================================================================== */
.main-content { position: relative; min-height: calc(100vh - 82px); }
body.app-ajax-busy { cursor: progress; }
body.app-ajax-busy .app-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--app-primary), #38bdf8, transparent);
  background-size: 240% 100%;
  animation: appAjaxProgress 1.05s linear infinite;
  z-index: 5;
}
@keyframes appAjaxProgress { from { background-position: 100% 0; } to { background-position: -120% 0; } }

.app-ajax-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  min-height: 280px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--app-bg) 78%, transparent);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 34px 24px;
  pointer-events: none;
}
.app-ajax-loader {
  width: min(760px, 94%);
  padding: 22px;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}
.app-skeleton-line {
  height: 13px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, var(--app-surface-3) 20%, color-mix(in srgb,var(--app-surface-3) 55%,white) 48%, var(--app-surface-3) 76%);
  background-size: 220% 100%;
  animation: appSkeleton 1.1s ease-in-out infinite;
}
.app-skeleton-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:24px; }
.app-skeleton-grid span {
  height: 88px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--app-surface-3) 20%, color-mix(in srgb,var(--app-surface-3) 55%,white) 48%, var(--app-surface-3) 76%);
  background-size:220% 100%;
  animation: appSkeleton 1.1s ease-in-out infinite;
}
.app-ajax-loading-label { margin-top:16px; color:var(--app-muted); font-size:.78rem; font-weight:650; text-align:center; }
@keyframes appSkeleton { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* Keep silent background refresh visually calm. */
.main-content.ajax-loading:not(:has(.app-ajax-overlay)) { opacity: .985; }

/* AJAX-updated tables and cards settle smoothly without a page flash. */
.main-content > * { animation: appContentIn .14s ease-out; }
@keyframes appContentIn { from { opacity:.72; transform:translateY(2px); } to { opacity:1; transform:none; } }

/* Forms submitted by AJAX expose a small processing state without resizing. */
.btn .spinner-border-sm { width:.8rem; height:.8rem; border-width:.12em; }

/* Live operational pages get an unobtrusive freshness indicator. */
body[data-route^="fnb/kitchen"] .main-content::before,
body[data-route^="housekeeping/board"] .main-content::before,
body[data-route^="housekeeping/my-rooms"] .main-content::before,
body[data-route^="front-office/dashboard"] .main-content::before,
body[data-route^="maintenance/dashboard"] .main-content::before {
  content:"LIVE";
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:40;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.22);
  color:#059669;
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.09em;
  pointer-events:none;
}

@media (max-width: 767.98px) {
  .app-ajax-overlay { padding:18px 10px; }
  .app-skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-ajax-loader { padding:16px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-skeleton-line,.app-skeleton-grid span,body.app-ajax-busy .app-topbar::after,.main-content > * { animation:none !important; }
}