/* ============================================================
   style.css
   手沖咖啡紀錄 App — 全域樣式
   手機優先設計，暖棕咖啡色系
   ============================================================ */

/* ==================== CSS 變數 ==================== */
:root {
    /* 主色系 */
    --color-bg:         #F5EDE0;   /* 奶油米色背景 */
    --color-surface:    #FFFFFF;   /* 卡片白 */
    --color-primary:    #4A2C17;   /* 深焙咖啡棕 */
    --color-primary-md: #7B4A2D;   /* 中棕 */
    --color-primary-lt: #C8956C;   /* 淺棕橙 */
    --color-accent:     #D4730A;   /* 琥珀橙（強調） */
    --color-text:       #2D1A0E;   /* 深咖文字 */
    --color-text-md:    #6B4226;   /* 中棕文字 */
    --color-text-lt:    #A08060;   /* 淡棕文字 */
    --color-border:     #E8D8C4;   /* 邊線 */
    --color-input-bg:   #FBF6F0;   /* 輸入框背景 */

    /* 評分顏色 */
    --color-fail:    #E8B4B4;
    --color-ok:      #F5DFA0;
    --color-perfect: #F4A8B8;

    /* 尺寸 */
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --shadow:     0 2px 12px rgba(74, 44, 23, 0.10);
    --shadow-lg:  0 4px 24px rgba(74, 44, 23, 0.18);

    /* 字體 */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Noto Sans TC', 'PingFang TC', sans-serif;
}

/* ==================== Reset ==================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    min-height: 100dvh;
    overflow-x: hidden;
}

/* ==================== 工具類 ==================== */
.hidden { display: none !important; }

/* ==================== 登入頁 ==================== */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 24px 20px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(212, 115, 10, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(74, 44, 23, 0.12) 0%, transparent 60%),
        var(--color-bg);
}

.login-wrap {
    width: 100%;
    max-width: 360px;
}

.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 8px rgba(74,44,23,0.25));
}

.login-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.02em;
}

.login-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-lt);
    margin-top: 4px;
    letter-spacing: 0.1em;
}

.login-error {
    background: #FDECEA;
    color: #C0392B;
    border: 1px solid #F5C6CB;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 0.875rem;
    margin-bottom: 16px;
    text-align: center;
}

.login-form {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-lg);
}

.login-form .form-field {
    margin-bottom: 16px;
}

.login-form label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-md);
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.login-form input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--color-input-bg);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.2s;
}

.login-form input:focus {
    border-color: var(--color-primary-lt);
    background: #fff;
}

.btn-login {
    width: 100%;
    padding: 14px;
    background: var(--color-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-top: 8px;
    letter-spacing: 0.05em;
    transition: background 0.2s, transform 0.1s;
}

.btn-login:active {
    background: var(--color-primary-md);
    transform: scale(0.98);
}

/* ==================== App 框架 ==================== */
.app-body {
    background: var(--color-bg);
    min-height: 100dvh;
}

/* 畫面切換 */
.view {
    display: none;
    min-height: 100dvh;
    flex-direction: column;
}

.view.active {
    display: flex;
}

/* ==================== 頂部標題列 ==================== */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-primary);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(74,44,23,0.3);
    /* iOS safe area */
    padding-top: max(14px, env(safe-area-inset-top));
}

.header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.header-icon {
    font-size: 1.3rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-icon:hover,
.btn-icon:active {
    background: rgba(255,255,255,0.3);
}

.btn-back {
    background: none;
    border: none;
    color: rgba(255,255,255,0.9);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-header-title {
    font-size: 0.95rem;
    font-weight: 600;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* ==================== 清單工具列 ==================== */
.list-toolbar {
    padding: 12px 16px 8px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 24px;
    font-size: 0.9rem;
    background: var(--color-input-bg);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.2s;
}

.search-input:focus {
    border-color: var(--color-primary-lt);
}

/* ==================== 清單主體 ==================== */
.list-main {
    flex: 1;
    padding: 16px;
    padding-bottom: 32px;
    overflow-y: auto;
}

.brew-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 紀錄卡片 */
.brew-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 1px solid var(--color-border);
    position: relative;
}

.brew-card:active {
    transform: scale(0.98);
    box-shadow: none;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    flex: 1;
    margin-right: 8px;
}

.card-score {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.card-tag {
    font-size: 0.72rem;
    padding: 3px 9px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.tag-roast   { background: #EEE0D0; color: var(--color-primary); }
.tag-method  { background: #D8EBE4; color: #1E5C4A; }

.card-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

.rating-失敗 { background: var(--color-fail); color: #8B1A1A; }
.rating-普通 { background: var(--color-ok);   color: #7A5800; }
.rating-完美 { background: var(--color-perfect); color: #7A1A3A; }

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
    margin-top: 4px;
}

.card-date {
    font-size: 0.75rem;
    color: var(--color-text-lt);
}

.card-flavors {
    font-size: 0.72rem;
    color: var(--color-text-lt);
    max-width: 60%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 刪除按鈕（浮在卡片右下） */
.card-delete {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: none;
    border: none;
    color: #CCC;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}
.card-delete:active { color: #E74C3C; }

/* 空狀態 */
.list-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-lt);
}

.empty-icon {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.list-empty p {
    font-size: 0.95rem;
    line-height: 1.8;
}

.list-loading {
    text-align: center;
    padding: 40px;
    color: var(--color-text-lt);
    font-size: 0.9rem;
}

/* ==================== 表單主體 ==================== */
.form-main {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 100px; /* 留出底部按鈕空間 */
}

/* 表單區塊 */
.form-section {
    background: var(--color-surface);
    margin: 12px 12px 0;
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}

.section-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    border-left: 3px solid var(--color-accent);
    padding-left: 8px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

/* 欄位群組 */
.field-group {
    margin-bottom: 16px;
}

.field-group:last-child {
    margin-bottom: 0;
}

.field-group label,
.field-group > label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-md);
    margin-bottom: 7px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.field-group label small {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-lt);
    font-size: 0.7rem;
}

/* 雙欄 */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* 三欄 */
.field-row-3 {
    grid-template-columns: 1fr 1.4fr 0.8fr;
}

/* 輸入框 */
input[type="text"],
input[type="password"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: var(--font-body);
    background: var(--color-input-bg);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

/* date input：iOS 上需額外設定最小高度讓點擊區域與其他欄位等高 */
input[type="date"] {
    min-height: 46px;
    cursor: pointer;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary-lt);
    background: #fff;
}

textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A08060' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.input-time {
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
}

/* ==================== 滑桿 ==================== */
.slider-group .slider-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.slider-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.slider-minmax {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--color-text-lt);
    margin-top: 4px;
}

/* Range slider 樣式 */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: var(--color-border);
    outline: none;
    cursor: pointer;
    border: none;
    padding: 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(74,44,23,0.3);
    border: 3px solid #fff;
    transition: transform 0.1s;
}

input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(74,44,23,0.3);
    border: 3px solid #fff;
}

/* ==================== 水溫（小型滑桿） ==================== */
.small-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.small-slider-wrap input[type="range"] {
    flex: 1;
}

.small-slider-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

/* ==================== 總注水量 ==================== */
.total-water-group {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #E8F4F0, #D4EDE6);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid #B8DDD4;
}

.total-water-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #2C6B5A;
    font-weight: 600;
    flex: 1;
}

.tw-icon { font-size: 1.1rem; }

.total-water-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #2C6B5A;
    line-height: 1;
}

.total-water-value small {
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 3px;
    vertical-align: middle;
}

.total-water-note {
    font-size: 0.65rem;
    color: #5A9B8A;
    text-align: right;
    margin-left: 8px;
    line-height: 1.3;
}

/* ==================== 整體評分 ==================== */
.score-group .score-display {
    text-align: center;
    margin: 8px 0 12px;
}

#score-big {
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(74,44,23,0.15);
}

.slider-score::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    background: var(--color-accent);
}

/* ==================== 快速評價按鈕 ==================== */
.quick-rating-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.quick-rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--color-border);
    color: var(--color-text-lt);
}

.qr-icon { font-size: 1.2rem; line-height: 1; }

/* 未選中 */
.quick-rating-btn[data-value="失敗"]        { background: #F9EDED; color: #B07070; }
.quick-rating-btn[data-value="普通"]        { background: #FBF3DB; color: #9A7A30; }
.quick-rating-btn[data-value="完美"]        { background: #FCEEF2; color: #A05070; }

/* 選中 */
.quick-rating-btn.active[data-value="失敗"] { background: var(--color-fail); color: #7A1A1A; border-color: #D08080; }
.quick-rating-btn.active[data-value="普通"] { background: var(--color-ok);   color: #6A4800; border-color: #C0A840; }
.quick-rating-btn.active[data-value="完美"] { background: var(--color-perfect); color: #6A1A3A; border-color: #D080A0; }

/* ==================== 標籤（Tag chips） ==================== */
.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 4px 0;
}

.tag {
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    background: #EEE8E0;
    color: var(--color-text-md);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    border: 1.5px solid transparent;
}

.tag:active {
    transform: scale(0.95);
}

.tag.selected {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary-md);
}

/* ==================== 等化器 ==================== */
.equalizer-group {
    background: var(--color-input-bg);
    border-radius: var(--radius-md);
    padding: 20px 16px;
    border: 1px solid var(--color-border);
}

.eq-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.eq-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.eq-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-md);
    width: 30px;
    flex-shrink: 0;
}

.eq-slider {
    flex: 1;
    height: 4px;
}

.eq-slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
}

.eq-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}

/* ==================== 儲存按鈕（固定底部） ==================== */
.form-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--color-bg) 80%, transparent);
    z-index: 50;
}

.btn-save {
    width: 100%;
    padding: 16px;
    background: var(--color-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 16px rgba(74,44,23,0.35);
    transition: background 0.2s, transform 0.1s;
}

.btn-save:active {
    background: var(--color-primary-md);
    transform: scale(0.98);
}

.btn-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==================== Toast 提示 ==================== */
.toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 15, 5, 0.88);
    color: #fff;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 200;
    pointer-events: none;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s;
}

/* ==================== 確認對話框 ==================== */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.confirm-box {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 100%;
    max-width: 320px;
    box-shadow: var(--shadow-lg);
}

#confirm-msg {
    font-size: 1rem;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}

.confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-secondary {
    padding: 12px;
    background: var(--color-border);
    color: var(--color-text-md);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-secondary:active { background: #DACCBC; }

.btn-danger {
    padding: 12px;
    background: #E74C3C;
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-danger:active { background: #C0392B; }

/* ==================== 桌機限寬 ==================== */
@media (min-width: 500px) {
    .login-body { padding: 40px 20px; }

    /*
     * 讓整個 view 容器限寬並水平置中。
     * 內部的 sticky / static 元素自然跟著容器走，不需額外定位。
     */
    .view {
        max-width: 430px;
        margin: 0 auto;
    }

    /*
     * form-footer 是 position:fixed，脫離文件流，
     * 需要手動限寬並置中。
     */
    .form-footer {
        left: 50%;
        transform: translateX(-50%);
        max-width: 430px;
        width: 100%;
    }
}