/* Chat Tabs */
        .chat-tabs {
            display: flex;
            gap: 8px;
            flex: 1;
        }
        .chat-tab {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
            min-height: 44px;
            display: flex;
            align-items: center;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
        }
        .chat-tab:hover {
            color: rgba(255, 255, 255, 0.9);
        }
        .chat-tab.active {
            color: white;
            border-bottom-color: white;
        }
        .chat-msg img {
            max-width: 200px;
            max-height: 200px;
            border-radius: 8px;
            margin-top: 8px;
            cursor: pointer;
        }
    
/* --- Professional kiosk theme overrides --- */
.timeclock-kiosk, .kiosk, .timeclock-page, #page-timeclock {
  background: #f7f7f7 !important;
  color: #111 !important;
}
#page-timeclock .card, .timeclock-kiosk .card, .kiosk .card {
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
#page-timeclock .btn, .timeclock-kiosk .btn, .kiosk .btn {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
}
#page-timeclock .btn.btn-secondary, .timeclock-kiosk .btn.btn-secondary, .kiosk .btn.btn-secondary {
  background: transparent !important;
  color: #111 !important;
}
#page-timeclock .status-pill, .timeclock-kiosk .status-pill, .kiosk .status-pill {
  background: rgba(0,0,0,0.06) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}




.pl-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.pl-overlay.pl-active {
  opacity: 1; pointer-events: all;
}
.pl-panel {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 16px;
  width: min(860px, 95vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  transform: scale(0.96) translateY(12px);
  transition: transform 240ms cubic-bezier(.32,.72,0,1), opacity 200ms ease;
  opacity: 0;
}
.pl-overlay.pl-active .pl-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.pl-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  flex-shrink: 0;
}
.pl-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.pl-header-actions { display: flex; gap: 8px; align-items: center; }
.pl-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text-muted, #888);
  padding: 2px 6px; border-radius: 6px;
}
.pl-close:hover { background: var(--bg-hover, #f0f0f0); }
.pl-body { overflow-y: auto; padding: 20px 24px; flex: 1; }

/* List view */
.pl-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border, #e0e0e0);
  margin-bottom: 10px; background: var(--bg-card, #fff);
  transition: box-shadow 140ms ease;
}
.pl-list-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
.pl-list-name { font-weight: 600; font-size: 15px; }
.pl-list-meta { font-size: 12px; color: var(--text-muted, #888); margin-top: 2px; }
.pl-list-actions { display: flex; gap: 6px; }
.pl-empty { text-align: center; color: var(--text-muted,#888); padding: 40px 0; }

/* Edit view */
.pl-edit-field { margin-bottom: 14px; }
.pl-edit-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-muted,#888); letter-spacing: .04em; text-transform: uppercase; }
.pl-edit-field input[type="text"] {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border,#e0e0e0);
  background: var(--bg-input,#fff); font-size: 14px;
  font-family: inherit; box-sizing: border-box;
}
.pl-edit-field input[type="text"]:focus { outline: none; border-color: #2D6A4F; }
.pl-products-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.pl-products-table th {
  text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted,#888);
  border-bottom: 2px solid var(--border,#e0e0e0);
}
.pl-products-table td { padding: 9px 10px; border-bottom: 1px solid var(--border,#e0e0e0); vertical-align: middle; }
.pl-products-table tr:last-child td { border-bottom: none; }
.pl-price-input {
  width: 90px; padding: 5px 8px; text-align: right;
  border: 1px solid var(--border,#e0e0e0); border-radius: 6px;
  font-size: 13px; font-family: 'JetBrains Mono', monospace;
  background: var(--bg-input,#fff);
}
.pl-price-input:focus { outline: none; border-color: #2D6A4F; }
.pl-footer {
  padding: 14px 24px; border-top: 1px solid var(--border,#e0e0e0);
  display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
}
.pl-reset-btn { font-size: 11px; color: var(--text-muted,#888); background:none; border:none; cursor:pointer; text-decoration:underline; align-self:center; margin-right:auto; }
.pl-reset-btn:hover { color: var(--text-main,#222); }



body.auth-locked .app { filter: none !important; opacity: 0 !important; pointer-events: none; user-select: none; }

#ph-splash { position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:var(--bg-main,#f5f5f3);z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;margin:0;padding:0; }
#ph-splash.ph-splash-out { animation:phSplashOut 380ms cubic-bezier(.4,0,1,1) both; }
@keyframes phSplashOut { 0%{opacity:1} 100%{opacity:0;pointer-events:none} }
#ph-splash-logo { width:64px;height:64px;object-fit:contain;animation:phSplashLogoIn 400ms cubic-bezier(.32,.72,0,1) both; }
@keyframes phSplashLogoIn { from{opacity:0;transform:scale(.85) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
#ph-splash-name { font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:600;letter-spacing:.05em;color:var(--text-main,#1a1a1a);opacity:0;animation:phFadeUp 350ms ease 150ms both; }
#ph-splash-track { width:160px;height:2px;background:var(--border,#e0e0e0);border-radius:2px;overflow:hidden;opacity:0;animation:phFadeUp 300ms ease 200ms both; }
#ph-splash-bar { height:100%;width:0%;background:#2D6A4F;border-radius:2px;transition:width 220ms cubic-bezier(.4,0,.2,1); }
#ph-splash-status { font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted,#888);letter-spacing:.06em;opacity:0;animation:phFadeUp 300ms ease 250ms both;min-height:16px; }
@keyframes phFadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.section.ph-nav-enter { animation:phSectionEnter 220ms cubic-bezier(.32,.72,0,1) both; }
@keyframes phSectionEnter { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.modal-overlay { display:flex !important;opacity:0;pointer-events:none;backdrop-filter:blur(0px);transition:opacity 200ms ease,backdrop-filter 200ms ease !important; }
.modal-overlay.active { opacity:1;pointer-events:all;backdrop-filter:blur(5px) !important; }
.modal-overlay .modal { transform:scale(.96) translateY(12px);opacity:0;transition:transform 240ms cubic-bezier(.32,.72,0,1),opacity 200ms ease !important; }
.modal-overlay.active .modal { transform:scale(1) translateY(0);opacity:1; }

button.ph-loading { position:relative;pointer-events:none;opacity:.72;cursor:not-allowed; }
@keyframes phSpin { to{transform:rotate(360deg)} }
.ph-spin-icon { display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:rgba(255,255,255,.85);border-radius:50%;animation:phSpin .55s linear infinite;vertical-align:middle;margin-right:7px;flex-shrink:0; }

tbody.ph-table-reveal { opacity:0; }
tbody { transition:opacity 160ms ease; }

@keyframes phRowSlide { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
tbody tr.ph-row-in { animation:phRowSlide 160ms ease both; }

.ph-pulse-dot { display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:middle;position:relative;top:-1px;flex-shrink:0;animation:phDotPulse 2.2s ease-in-out infinite; }
@keyframes phDotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.65)} }

.admin-shell { padding: 18px; }
.admin-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.admin-tab { border:1px solid var(--border); background: var(--bg-hover); color: var(--text); padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.admin-tab.active { background: var(--green-dark); color:#fff; border-color: var(--green-dark); }
.admin-panel { display:none; }
.admin-panel.active { display:block; }
.admin-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:18px; }
.admin-stat { background: linear-gradient(180deg,#fff,#f7fbf8); border:1px solid var(--border); border-radius:14px; padding:16px; }
.admin-stat .label { font-size:12px; color: var(--text-muted); text-transform: uppercase; letter-spacing:.08em; margin-bottom:8px; }
.admin-stat .value { font-size:28px; font-weight:700; color: var(--green-dark); }
.admin-stat .sub { font-size:12px; color: var(--text-muted); margin-top:6px; }
.admin-two-col { display:grid; grid-template-columns: 1.3fr 1fr; gap:18px; }
.admin-subcard { padding:16px; }
.admin-control-list { display:flex; flex-direction:column; gap:10px; }
.admin-log-table { max-height: 420px; overflow:auto; }
.admin-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.admin-pill.active { background:#e7f6ee; color:#1b4332; }
.admin-pill.inactive { background:#fbe9e9; color:#8d1e1e; }
.admin-diagnostic-list { display:grid; gap:10px; }
.admin-diagnostic-item { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.admin-backup-list { display:grid; gap:10px; }
.admin-backup-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.admin-users-actions { display:flex; gap:8px; flex-wrap:wrap; }
.admin-actions-row { display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 1100px) { .admin-two-col { grid-template-columns:1fr; } }