/**
 * Elderly Club - LINE Products Theme
 * ใช้ทุกหน้า: Member, Assistant Manager, Manager
 * อ้างอิง LINE Brand / LINE Design System (LINE Forest Green)
 */
:root {
    /* LINE Primary (LINE Forest Green) */
    --line-green: #06C755;
    --line-green-dark: #05B04B;
    --line-green-darker: #049A42;
    --line-green-light: #E8F8EE;
    --line-green-soft: #F0FBF4;
    
    /* Legacy aliases (ชี้ไป LINE) */
    --ec-soft-peach: var(--line-green-soft);
    --ec-deep-pink: var(--line-green);
    --ec-nature-green: var(--line-green);
    --ec-warm-gray: #424242;
    --ec-line-green: var(--line-green);
    --ec-line-green-dark: var(--line-green-dark);
    --ec-line-green-light: var(--line-green-light);
    
    /* Neutrals (LINE-style) */
    --ec-gray-50: #FAFAFA;
    --ec-gray-100: #F5F5F5;
    --ec-gray-200: #EEEEEE;
    --ec-gray-400: #BDBDBD;
    --ec-gray-600: #757575;
    --ec-gray-800: #424242;
    --ec-white: #FFFFFF;
    
    /* Semantic */
    --ec-success: var(--line-green);
    --ec-primary: var(--line-green);
    --ec-primary-soft: var(--line-green-soft);
}

/* Utility classes */
.bg-theme-page { background-color: var(--line-green-soft); }
.bg-theme-card { background-color: var(--ec-white); }
.text-theme-primary { color: var(--line-green); }
.text-theme-muted { color: var(--ec-gray-800); }
.bg-theme-primary { background-color: var(--line-green); }
.bg-theme-success { background-color: var(--line-green); }
.border-theme-primary { border-color: var(--line-green); }

/* LINE green helpers (work without Tailwind config) */
.bg-line-green { background-color: var(--line-green); }
.bg-line-green-soft { background-color: var(--line-green-soft); }
.bg-line-green-light { background-color: var(--line-green-light); }
.text-line-green { color: var(--line-green); }
.border-line-green { border-color: var(--line-green); }
.line-green-soft { background-color: var(--line-green-soft); }

/* Font */
body.ec-theme {
    font-family: 'Prompt', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ec-gray-800);
}

/* Bottom Nav (LINE theme) - comfortable in LINE browser */
.ec-bottom-nav {
    min-height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    display: flex;
    align-items: stretch;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    background-color: var(--ec-white);
}
.ec-nav-item {
    text-decoration: none;
    color: var(--ec-gray-600);
    transition: color 0.2s;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-size: 0.75rem;
}
.ec-nav-item span:first-of-type {
    font-size: 1.125rem;
    line-height: 1;
}
.ec-nav-item span:last-of-type {
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}
.ec-nav-item:hover, .ec-nav-item:active {
    color: var(--line-green);
}
.ec-nav-item.ec-nav-active {
    color: var(--line-green);
    border-top: 2px solid var(--line-green);
    padding-top: 6px;
}

/* ========== LINE Browser / Mini App UX ========== */
/* Comfortable use in LINE in-app browser: touch targets, safe areas, font size */

/* Safe area (notch, home indicator) - use on body or main container */
.ec-safe-top { padding-top: env(safe-area-inset-top, 0); }
.ec-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.ec-safe-left { padding-left: env(safe-area-inset-left, 0); }
.ec-safe-right { padding-right: env(safe-area-inset-right, 0); }
.ec-safe-x { padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); }
.ec-safe-y { padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }

/* Min touch target 44px (Apple HIG / accessibility) for buttons and links */
.ec-touch-target {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ec-touch-target-block {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Avoid iOS zoom on input focus: use 16px+ for inputs */
.ec-theme input,
.ec-theme select,
.ec-theme textarea,
.ec-input-comfort {
    font-size: 16px !important;
}
@media (max-width: 768px) {
    .ec-theme { font-size: 16px; }
}

/* Softer tap highlight in LINE browser */
.ec-theme a,
.ec-theme button,
.ec-nav-item {
    -webkit-tap-highlight-color: rgba(6, 199, 85, 0.15);
    tap-highlight-color: rgba(6, 199, 85, 0.15);
}

/* LINE MINI App loading icon (30×30) — design/loading-icon.md */
.ec-line-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--line-green-light);
    border-top-color: var(--line-green);
    border-radius: 50%;
    animation: ec-line-spin 0.75s linear infinite;
    flex-shrink: 0;
}
@keyframes ec-line-spin {
    to { transform: rotate(360deg); }
}
.ec-loading-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Page container with safe area and comfortable padding */
.ec-page-line {
    min-height: 100vh;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(5rem, env(safe-area-inset-bottom));
}