/* --- Root Interface Properties and Core System Resets --- */
html {
    scroll-behavior: smooth;
}

/* --- Optimized Form & Input Touch Element Ergonomics (Prevents iOS Safari auto-zoom distortions) --- */
input, 
select, 
button {
    font-size: 16px !important;
    min-height: 44px;
}

/* --- Responsive Table Content Overflow Adaptations --- */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* --- Interactive Visual Response Affordance Transform Animations --- */
.card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* --- Scrollbar Performance Modifications for Webkit Layout Subsystems --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
/* Palengke Helper+ unified input style */
.ph-input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid #d1d5db;          /* gray-300 */
  border-radius: 0.75rem;             /* rounded-xl */
  background-color: #f9fafb;          /* gray-50 */
  color: #111827;                     /* gray-900 */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ph-input:focus {
  outline: none;
  border-color: #059669;              /* emerald-600 */
  box-shadow: 0 0 0 1px #05966933;    /* subtle focus ring */
  background-color: #ffffff;
}

.ph-input::placeholder {
  color: #9ca3af;                     /* gray-400 */
}
/* --- Motion: tab, modal, card and button animations --- */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes popIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Tab entry motion is coordinated by switchTab so rapid taps cancel cleanly. */

.fixed.inset-0:not(.hidden) {
    animation: fadeIn 0.2s ease-out both;
}

.fixed.inset-0:not(.hidden) > * {
    animation: popIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

button {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

button:active:not(:disabled) {
    transform: scale(0.97);
}

.rounded-2xl.shadow-md,
.rounded-2xl.shadow-sm,
.rounded-xl.shadow-sm {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rounded-2xl.shadow-md:hover,
.rounded-2xl.shadow-sm:hover,
.rounded-xl.shadow-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -8px rgba(4, 120, 87, 0.25);
}

.tab-link {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Dashboard shell: sidebar + card styling --- */
.sidebar-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.95rem !important;
    font-weight: 500;
    color: #0f172a;
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-item:hover {
    background: #ecfdf5;
}

.sidebar-item.active {
    background: #059669;
    color: #ffffff;
}

.sidebar-item.active:hover {
    background: #047857;
}

nav .tab-link.active {
    background: #059669;
    color: #ffffff;
}

.tab-content > h2:first-child {
    font-size: 1.75rem;
    font-weight: 600;
    color: #0f172a;
}

.tab-content .rounded-xl.shadow-sm,
.tab-content .rounded-2xl.shadow-sm,
.tab-content .rounded-2xl.shadow-md,
.tab-content .rounded-xl.shadow-md {
    border-radius: 0.5rem;
    border-color: #cbd5e1;
    box-shadow: none;
}

#appTutorial::backdrop { background: rgba(15, 23, 42, 0.6); }

/* Tutorial: a compact guide card, with its own scoped visual styles. */
#appTutorial.tutorial-dialog { padding:0; border:1px solid #d4e6dd; border-radius:24px; width:min(620px,calc(100% - 24px)); max-height:90dvh; color:#18372c; background:#fafcf9; box-shadow:0 24px 80px #052e1640; overflow-y:auto; }
#appTutorial::backdrop { background:#102e27a6; backdrop-filter:blur(4px); }
.tutorial-header { padding:20px 28px 22px; background:linear-gradient(125deg,#064e3b,#14735a); color:#fff; }
.tutorial-topline,.tutorial-heading-row,.tutorial-language-row,.tutorial-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.tutorial-eyebrow { font-size:11px; letter-spacing:.16em; font-weight:700; color:#c9f0db; }
.tutorial-close { font-size:13px; padding:8px 12px; border:1px solid #ffffff55; border-radius:10px; background:#ffffff12; color:#fff; min-height:40px; }
.tutorial-heading-row { justify-content:flex-start; margin:14px 0 18px; }
.tutorial-icon { width:64px; height:64px; padding:10px; flex-shrink:0; border-radius:18px; background:#ffffff16; border:1px solid #ffffff28; }
.tutorial-icon svg { width:100%; height:100%; }
.tutorial-topic { font-size:21px; line-height:1.3; font-weight:700; }
.tutorial-step-label { color:#c9f0db; font-size:13px; margin-top:5px; }
.tutorial-progress { display:block; appearance:none; width:100%; height:6px; border:0; border-radius:8px; overflow:hidden; background:#ffffff26; }
.tutorial-progress::-webkit-progress-bar { background:#ffffff26; border-radius:8px; }
.tutorial-progress::-webkit-progress-value { background:#bef264; border-radius:8px; }
.tutorial-progress::-moz-progress-bar { background:#bef264; border-radius:8px; }
.tutorial-body { padding:22px 28px; }
.tutorial-language-row { margin-bottom:24px; color:#52675d; font-size:12px; }
.tutorial-language-row select { border:1px solid #c9dacf; border-radius:10px; padding:9px 12px; background:white; color:#18372c; font-size:13px; min-height:40px; }
#tutorialTitle { font-size:26px; line-height:1.25; font-weight:750; letter-spacing:-.025em; margin:0 0 10px; }
#tutorialText { color:#52675d; line-height:1.6; font-size:15px; margin-bottom:20px; }
.tutorial-tip-cards { list-style:none; padding:0; margin:0; counter-reset:guide-tip; display:grid; gap:10px; }
.tutorial-tip-cards li { position:relative; counter-increment:guide-tip; padding:15px 16px 15px 54px; border:1px solid #e0e9df; border-radius:14px; background:white; color:#344f42; font-size:14px; line-height:1.6; }
.tutorial-tip-cards li::before { content:counter(guide-tip); position:absolute; left:14px; top:16px; width:26px; height:26px; display:grid; place-items:center; background:#edf5e7; border-radius:8px; color:#366438; font-size:12px; font-weight:700; }
.tutorial-section-link { margin-top:20px; color:#146143; font-size:14px; font-weight:650; text-decoration:underline; text-underline-offset:4px; min-height:40px; }
.tutorial-footer { position:sticky; bottom:0; padding:16px 28px; border-top:1px solid #dfe9df; background:#fafcf9; }
.tutorial-back,.tutorial-next { min-height:44px; padding:10px 23px; border-radius:12px; font-size:14px; font-weight:650; }
.tutorial-back { border:1px solid #c9dacf; color:#344f42; background:white; }
.tutorial-back:disabled { opacity:.4; cursor:default; }
.tutorial-next { background:#116149; color:white; border:1px solid #116149; }
.tutorial-next:hover { background:#064e3b; }
#appTutorial button:focus-visible,#appTutorial select:focus-visible { outline:3px solid #84cc16; outline-offset:3px; }
@media(max-width:480px) { .tutorial-header {padding:16px 20px 18px;} .tutorial-body {padding:18px 20px;} .tutorial-footer {padding:14px 20px;} #tutorialTitle {font-size:23px;} .tutorial-topic {font-size:19px;} .tutorial-icon {width:54px;height:54px;} }

/* Tutorial entry points shared by all six tabs. */
.tutorial-help-button { display:inline-flex; align-items:center; gap:10px; max-width:100%; min-height:44px; margin:10px 0 18px; padding:7px 12px 7px 7px; border:1px solid #cde3d4; border-radius:12px; background:#f0f8ef; color:#145a40; font-size:13px; font-weight:600; line-height:1.4; text-align:left; text-decoration:none; box-shadow:0 2px 5px #145a4006; transition:background .15s,border-color .15s; }
.tutorial-help-button:hover { background:#e3f1df; border-color:#a6c7ac; }
.tutorial-help-button:focus-visible { outline:3px solid #65a30d; outline-offset:3px; }
.tutorial-help-icon { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; border-radius:8px; background:#fff; color:#246e4a; }
.tutorial-help-icon svg { width:19px; height:19px; }
.tutorial-help-arrow { flex-shrink:0; width:16px; height:16px; color:#497b58; }

/* Mobile app shell: all destinations remain visible above the safe area. */
.mobile-bottom-nav { display:none; }
@media (max-width:767px) {
    :root { --mobile-nav-height:calc(68px + env(safe-area-inset-bottom, 0px)); }
    #appPage { padding-bottom:var(--mobile-nav-height); }
    #appMainContent { min-height:calc(100dvh - 60px - var(--mobile-nav-height)); }
    #mobileTopBar { padding-top:calc(8px + env(safe-area-inset-top, 0px)); }
    #mobileTopBar h1 { font-size:17px; }
    #mobileMenu { max-height:60dvh; overflow-y:auto; }
    .mobile-bottom-nav { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); position:fixed; z-index:35; bottom:0; left:0; right:0; padding:5px max(4px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px)); background:#fff; border-top:1px solid #dce7e0; box-shadow:0 -4px 18px #133c2910; }
    .mobile-bottom-nav .mobile-bottom-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:58px; min-width:0; padding:5px 0; border-radius:12px; font-size:10px !important; font-weight:600; line-height:1.2; color:#64746d; background:transparent; }
    .mobile-bottom-tab svg { width:23px; height:23px; }
    .mobile-bottom-nav .mobile-bottom-tab.active { color:#08744f; background:#eaf6ee; }
    .mobile-bottom-tab:focus-visible { outline:2px solid #08744f; outline-offset:-2px; }
    #homeHero { margin:16px 16px 0; padding:28px 18px; border-radius:18px; }
    #homeHero h2 { font-size:30px; line-height:1.15; letter-spacing:-.025em; padding:0; }
    #homeHero p { font-size:14px; line-height:1.6; padding:0; margin-top:14px; }
    #view-home > h2 { font-size:23px; line-height:1.3; margin-bottom:6px; }
    .tutorial-help-button { font-size:13px !important; margin-top:8px; }
    #view-home .p-6 { padding:18px; }
    #view-home .rounded-xl { border-radius:14px; }
    #view-grocery > .grid > div { padding:16px; min-width:0; }
    #groceryCartItems input { max-width:100%; }
    #totalCost { font-size:20px; overflow-wrap:anywhere; text-align:right; }
    #aiChatShell { height:calc(100dvh - 60px - env(safe-area-inset-top,0px) - var(--mobile-nav-height)); min-height:440px; }
    .ai-chat-header { align-items:flex-start; gap:8px; padding:12px 16px; }
    .ai-chat-header > div { min-width:0; }
    .ai-chat-header > div > div { flex-wrap:wrap; gap:6px; }
    .ai-chat-header .tutorial-help-button { order:3; margin:4px 0; }
    .ai-chat-header > button { font-size:12px !important; }
    .ai-composer { padding:12px; }
    .ai-composer > div:first-child { flex-wrap:nowrap; overflow-x:auto; }
    .ai-composer > div:first-child button { flex-shrink:0; font-size:12px !important; min-height:36px; }
    #aiQuestionInput { min-width:0; font-size:16px; }
    .ai-composer > p { display:none; }
    #view-prices th,#view-prices td { padding:10px; }
    .tab-content { scroll-margin-top:70px; }
}

.mobile-bottom-tab svg { transition:transform 160ms ease; }
.mobile-bottom-tab.active svg { transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce) { .mobile-bottom-tab svg { transition:none !important; } }