/* =====================================================
   SmartFarm Platform — 공통 스타일시트
   ===================================================== */

/* ─── 리셋 & 기본 ─── */
*, *::before, *::after { box-sizing: border-box; }

:root {
    /* 브랜드 색상 */
    --sf-primary:      #2E7D32;
    --sf-primary-light:#43A047;
    --sf-primary-dark: #1B5E20;
    --sf-accent:       #00BCD4;

    /* 센서 상태 색상 */
    --sf-ok:           #ffffff;
    --sf-warn-bg:      #FFF9C4;
    --sf-warn-text:    #F57F17;
    --sf-danger-bg:    #FFEBEE;
    --sf-danger-text:  #B71C1C;
    --sf-offline-bg:   #F5F5F5;
    --sf-offline-text: #9E9E9E;

    /* 생산 단계 색상 */
    --sf-stage-ipsang:     #00BCD4;
    --sf-stage-anjeong:    #4CAF50;
    --sf-stage-vinyl:      #42A5F5;
    --sf-stage-seokwi:     #90CAF9;
    --sf-stage-temp:       #FF5722;
    --sf-stage-sokki:      #E91E63;
    --sf-stage-cycle1:     #8D6E63;
    --sf-stage-rest:       #9C27B0;
    --sf-stage-cycle2:     #FFC107;
    --sf-stage-cycle3:     #F44336;
    --sf-stage-침봉:        #0D47A1;
    --sf-stage-pyesang:    #607D8B;

    /* 레이아웃 */
    --sf-navbar-h:    56px;
    --sf-radius:      6px;
    --sf-shadow:      0 2px 8px rgba(0,0,0,.12);
    --sf-transition:  180ms ease;
}

/* ─── 네비게이션 바 ─── */
.sf-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0;
    height: var(--sf-navbar-h);
    padding: 0 16px;
    background: var(--sf-primary);
    box-shadow: var(--sf-shadow);
    color: #fff;
}

.sf-navbar__brand {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    margin-right: auto;
    letter-spacing: .02em;
}

.sf-navbar__menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}

.sf-navbar__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--sf-radius);
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .9rem;
    transition: background var(--sf-transition), color var(--sf-transition);
}

.sf-navbar__link:hover,
.sf-navbar__link--active {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.sf-navbar__link--active {
    font-weight: 600;
}

.sf-navbar__icon { font-size: 1rem; }

/* 햄버거 버튼 (모바일) */
.sf-navbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
}
.sf-navbar__toggle span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform var(--sf-transition), opacity var(--sf-transition);
}

@media (max-width: 768px) {
    .sf-navbar__toggle { display: flex; }

    .sf-navbar__menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: var(--sf-navbar-h);
        left: 0;
        right: 0;
        background: var(--sf-primary-dark);
        padding: 8px 0;
        gap: 0;
        box-shadow: var(--sf-shadow);
    }
    .sf-navbar__menu--open { display: flex; }

    .sf-navbar__link {
        border-radius: 0;
        padding: 12px 20px;
    }
}

/* ─── 페이지 공통 레이아웃 ─── */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #212121;
    background: #FAFAFA;
}

.sf-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 16px;
}

/* ─── 센서 상태 행 색상 ─── */
tr.sf-row--warn   { background: var(--sf-warn-bg)   !important; }
tr.sf-row--danger { background: var(--sf-danger-bg) !important; }
tr.sf-row--offline {
    background: var(--sf-offline-bg) !important;
    color: var(--sf-offline-text);
}

.sf-cell--warn   { color: var(--sf-warn-text);   font-weight: 600; }
.sf-cell--danger { color: var(--sf-danger-text); font-weight: 600; }
.sf-cell--offline { color: var(--sf-offline-text); font-style: italic; }

/* ─── 생산 단계 칩(chip) ─── */
.sf-stage-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    line-height: 1.6;
}
.sf-stage-chip--입상     { background: var(--sf-stage-ipsang); }
.sf-stage-chip--안정기   { background: var(--sf-stage-anjeong); }
.sf-stage-chip--비닐제거 { background: var(--sf-stage-vinyl); }
.sf-stage-chip--세척     { background: var(--sf-stage-seokwi); }
.sf-stage-chip--온도충격 { background: var(--sf-stage-temp); }
.sf-stage-chip--솎이     { background: var(--sf-stage-sokki); }
.sf-stage-chip--1주기    { background: var(--sf-stage-cycle1); }
.sf-stage-chip--휴지기   { background: var(--sf-stage-rest); }
.sf-stage-chip--2주기    { background: var(--sf-stage-cycle2); color: #333; }
.sf-stage-chip--3주기    { background: var(--sf-stage-cycle3); }
.sf-stage-chip--침봉     { background: var(--sf-stage-침봉); }
.sf-stage-chip--폐상     { background: var(--sf-stage-pyesang); }

/* ─── 오프라인 배지 ─── */
.sf-offline-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: #BDBDBD;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 4px;
}

/* ─── 요약 카드 (통합 대시보드 상단) ─── */
.sf-summary-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.sf-summary-card {
    flex: 1 1 160px;
    padding: 12px 16px;
    background: #fff;
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sf-summary-card__label {
    font-size: .78rem;
    color: #757575;
}
.sf-summary-card__value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sf-primary);
}
.sf-summary-card--warn  .sf-summary-card__value { color: var(--sf-warn-text); }
.sf-summary-card--danger .sf-summary-card__value { color: var(--sf-danger-text); }

/* ─── 스켈레톤 로딩 ─── */
@keyframes sf-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.sf-skeleton {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    background-size: 1200px 100%;
    animation: sf-shimmer 1.4s infinite;
    border-radius: var(--sf-radius);
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.sf-skeleton * { visibility: hidden; }

/* ─── 토스트 알림 ─── */
#sf-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.sf-toast {
    padding: 10px 18px;
    border-radius: var(--sf-radius);
    background: #323232;
    color: #fff;
    font-size: .88rem;
    box-shadow: var(--sf-shadow);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s, transform .25s;
    pointer-events: auto;
}
.sf-toast--visible {
    opacity: 1;
    transform: translateY(0);
}
.sf-toast--success { background: var(--sf-primary); }
.sf-toast--error   { background: #C62828; }
.sf-toast--warn    { background: #E65100; }