/**
 * ===== LONELY CARE - 친구 상태 페이지 전용 CSS (노인 친화적 v2) =====
 * 파일명: status-isolated.css
 * 목적: 친구 상태 페이지 완전 격리 + 노인 친화적 디자인
 * 네임스페이스: #status-page
 *
 * 🎨 노인 친화적 디자인 원칙:
 * - 큰 글자: 최소 18px, 제목 24px+
 * - 높은 대비: 명확한 색상 구분
 * - 넉넉한 터치: 버튼 최소 48px 높이
 * - 명확한 구분: 테두리와 배경색으로 섹션 구분
 */

/* =====================================
   페이지 기본 레이아웃
   ===================================== */

#status-page {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/* 헤더 영역 */
#status-page .header {
    text-align: center !important;
    margin-bottom: 24px !important;
    padding: 20px 0 !important;
}

#status-page .header .logo {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
}

#status-page .header .tagline {
    font-size: 16px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}

/* =====================================
   상태 필터 탭 시스템
   ===================================== */

#status-page .status-filter-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 2px solid #e9ecef !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

#status-page .status-tab {
    flex: 1 !important;
    min-width: calc(50% - 6px) !important;
    padding: 16px 12px !important;
    background: white !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    color: #475569 !important;
    text-align: center !important;
    min-height: 56px !important;
}

#status-page .status-tab:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#status-page .status-tab.active {
    background: linear-gradient(135deg, #74c0fc 0%, #91c3ff 100%) !important;
    color: white !important;
    border-color: #74c0fc !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(116, 192, 252, 0.3) !important;
}

#status-page .status-count {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.3) !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    margin-left: 6px !important;
    font-weight: 700 !important;
}

#status-page .status-tab.active .status-count {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* =====================================
   최근 업데이트 정보
   ===================================== */

#status-page .last-update-info {
    background: #f0f8ff !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    margin-bottom: 24px !important;
    border-left: 4px solid #74c0fc !important;
    font-size: 18px !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(116, 192, 252, 0.1) !important;
}

#status-page .btn-refresh {
    background: linear-gradient(135deg, #74c0fc 0%, #91c3ff 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 8px !important;
    min-height: 48px !important;
}

#status-page .btn-refresh:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(116, 192, 252, 0.3) !important;
}

/* =====================================
   친구 상태 카드 (상태별 색상)
   ===================================== */

#status-page .friend-status-card {
    /* background 제거 - 상태별로 지정 */
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border-left: 6px solid #ddd !important;
    transition: all 0.3s ease !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}

#status-page .friend-status-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* 정상 상태 - 파란색 (기본 배경) */
#status-page .friend-status-card {
    background: #d1ecf1 !important; /* 기본: 연한 파란색 */
}

/* 정상/안전 상태 - 파란색 */
#status-page .friend-status-card.normal,
#status-page .friend-status-card[data-status="normal"],
#status-page .friend-status-card.safe,
#status-page .friend-status-card[data-status="safe"] {
    border-left-color: #28a745 !important;
    background: #d1ecf1 !important;
}

/* 주의 상태 - 노란색 (JavaScript: warning) */
#status-page .friend-status-card.warning,
#status-page .friend-status-card[data-status="warning"],
#status-page .friend-status-card.caution,
#status-page .friend-status-card[data-status="caution"] {
    border-left-color: #ffc107 !important;
    background: #fff3cd !important;
}

/* 경고 상태 - 주황색 (JavaScript: danger) */
#status-page .friend-status-card.danger,
#status-page .friend-status-card[data-status="danger"] {
    border-left-color: #fd7e14 !important;
    background: #ffe5cc !important;
}

/* 위급 상태 - 빨간색 (JavaScript: emergency) */
#status-page .friend-status-card.emergency,
#status-page .friend-status-card[data-status="emergency"],
#status-page .friend-status-card.critical,
#status-page .friend-status-card[data-status="critical"] {
    border-left-color: #dc3545 !important;
    background: #f8d7da !important;
    animation: pulse-emergency 2s infinite !important;
}

/* 이전 호환성 유지 */
#status-page .friend-status-card.status-normal,
#status-page .friend-status-card[data-alert-level="normal"] {
    border-left-color: #28a745 !important;
    background: #d1ecf1 !important;
}

#status-page .friend-status-card.status-warning,
#status-page .friend-status-card[data-alert-level="warning"] {
    border-left-color: #ffc107 !important;
    background: #fff3cd !important;
}

#status-page .friend-status-card.status-danger,
#status-page .friend-status-card[data-alert-level="danger"] {
    border-left-color: #fd7e14 !important;
    background: #ffe5cc !important;
}

#status-page .friend-status-card.status-emergency,
#status-page .friend-status-card[data-alert-level="emergency"] {
    border-left-color: #dc3545 !important;
    background: #f8d7da !important;
    animation: pulse-emergency 2s infinite !important;
}

@keyframes pulse-emergency {
    0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; }
    50% { box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4) !important; }
}

/* =====================================
   친구 상태 카드 헤더
   ===================================== */

#status-page .friend-status-header,
#status-page .friend-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}

#status-page .friend-info {
    flex: 1 !important;
}

#status-page .friend-status-name,
#status-page .friend-name {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
}

#status-page .friend-last-seen {
    font-size: 16px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

/* =====================================
   상태 배지
   ===================================== */

#status-page .friend-status-badge,
#status-page .alert-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    border-radius: 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: white !important;
    min-width: 90px !important;
    justify-content: center !important;
}

#status-page .badge-normal,
#status-page .alert-badge[data-level="normal"] {
    background: #28a745 !important;
}

#status-page .badge-warning,
#status-page .alert-badge[data-level="warning"] {
    background: #ffc107 !important;
    color: #333 !important;
}

#status-page .badge-danger,
#status-page .alert-badge[data-level="danger"] {
    background: #fd7e14 !important;
}

#status-page .badge-emergency,
#status-page .alert-badge[data-level="emergency"] {
    background: #dc3545 !important;
}

#status-page .alert-icon {
    margin-right: 6px !important;
    font-size: 18px !important;
}

/* =====================================
   친구 상세 정보
   ===================================== */

#status-page .friend-status-details,
#status-page .friend-details {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

#status-page .status-detail-item,
#status-page .detail-item {
    background: rgba(255, 255, 255, 0.8) !important;
    padding: 14px !important;
    border-radius: 8px !important;
    text-align: center !important;
    border: 2px solid #e9ecef !important;
}

#status-page .status-detail-label,
#status-page .detail-label {
    font-size: 14px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

#status-page .status-detail-value,
#status-page .detail-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* =====================================
   액션 버튼
   ===================================== */

#status-page .friend-status-actions,
#status-page .friend-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

#status-page .status-action-btn {
    flex: 1 !important;
    padding: 14px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-height: 48px !important;
}

#status-page .btn-call {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
}

#status-page .btn-call:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
}

#status-page .btn-message,
#status-page .btn-contact {
    background: linear-gradient(135deg, #74c0fc 0%, #91c3ff 100%) !important;
    color: white !important;
}

#status-page .btn-message:hover,
#status-page .btn-contact:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(116, 192, 252, 0.3) !important;
}

#status-page .btn-emergency {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: white !important;
    animation: pulse-btn 2s infinite !important;
}

#status-page .btn-emergency:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
}

@keyframes pulse-btn {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* =====================================
   상태 타임라인
   ===================================== */

#status-page .status-timeline {
    background: rgba(255, 255, 255, 0.8) !important;
    padding: 16px !important;
    border-radius: 8px !important;
    margin-top: 16px !important;
    border: 2px solid #e9ecef !important;
}

#status-page .timeline-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    color: #1e293b !important;
}

#status-page .timeline-item {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    color: #475569 !important;
}

#status-page .timeline-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

#status-page .dot-normal {
    background: #28a745 !important;
}

#status-page .dot-warning {
    background: #ffc107 !important;
}

#status-page .dot-danger {
    background: #fd7e14 !important;
}

#status-page .dot-emergency {
    background: #dc3545 !important;
}

/* =====================================
   로딩 상태
   ===================================== */

#status-page .loading-friends {
    text-align: center !important;
    padding: 60px 20px !important;
}

#status-page .loading-friends-icon {
    font-size: 48px !important;
    margin-bottom: 20px !important;
    animation: spin 1s linear infinite !important;
}

#status-page .loading-friends-text {
    color: #475569 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

#status-page .loading-friends-subtext {
    color: #94a3b8 !important;
    font-size: 16px !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =====================================
   긴급 정보 박스
   ===================================== */

#status-page .emergency-info {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border-left: 6px solid #ffc107 !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2) !important;
}

#status-page .emergency-info strong {
    font-size: 20px !important;
    color: #856404 !important;
    font-weight: 700 !important;
}

#status-page .emergency-info p {
    font-size: 18px !important;
    color: #856404 !important;
    margin-top: 8px !important;
    line-height: 1.6 !important;
}

/* =====================================
   반응형 디자인
   ===================================== */

@media (max-width: 768px) {
    #status-page {
        font-size: 17px !important;
    }

    #status-page .header .logo {
        font-size: 24px !important;
    }

    #status-page .header .tagline {
        font-size: 15px !important;
    }

    #status-page .status-tab {
        font-size: 16px !important;
        padding: 14px 10px !important;
    }

    #status-page .friend-status-name,
    #status-page .friend-name {
        font-size: 22px !important;
    }

    #status-page .friend-status-details,
    #status-page .friend-details {
        grid-template-columns: 1fr !important;
    }

    #status-page .friend-status-actions,
    #status-page .friend-actions {
        flex-direction: column !important;
    }

    #status-page .status-action-btn {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    #status-page {
        font-size: 16px !important;
    }

    #status-page .header .logo {
        font-size: 22px !important;
    }

    #status-page .friend-status-card {
        padding: 16px !important;
    }

    #status-page .friend-status-name,
    #status-page .friend-name {
        font-size: 20px !important;
    }

    #status-page .status-filter-tabs {
        padding: 16px !important;
        gap: 10px !important;
    }
}

/* =====================================
   접근성 개선
   ===================================== */

/* 포커스 표시 강화 */
#status-page button:focus,
#status-page .status-tab:focus {
    outline: 3px solid #74c0fc !important;
    outline-offset: 2px !important;
}

/* 터치 영역 확대 */
#status-page button,
#status-page .status-tab,
#status-page .status-action-btn {
    min-height: 48px !important;
    touch-action: manipulation !important;
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    #status-page .friend-status-card {
        border-width: 3px !important;
    }

    #status-page .status-tab {
        border-width: 3px !important;
    }

    #status-page button {
        border: 2px solid currentColor !important;
    }
}