/* 共用色票（2026-10-11 紅黑配色，照 10/9 定的「老鐵叫修完成頁 紅色版」）。
   客人端 rescue.css、師傅端 tech.css、總機 admin.css 都先載這份，顏色一律從這裡取：
   之後換色只改這一份。三份樣式表自己的 --navy、--orange 等舊變數名也都指到這裡。
   狀態色（成功綠、待處理黃、取消紅、資訊藍…）保留原本的意思，只調成深色底看得清楚的版本。 */

:root {
    color-scheme: dark;

    /* 底色與區塊 */
    --c-bg: #0B0B0D;            /* 頁面底色 */
    --c-card: #18181B;          /* 卡片／區塊底色 */
    --c-card-2: #222226;        /* 卡片上的次要區塊、表頭、次要按鈕、滑過 */
    --c-chrome: #121215;        /* 頂欄、左側選單 */
    --c-line: #2A2A2F;          /* 分隔線、卡片框 */
    --c-input-line: #3F3F46;    /* 輸入框框線 */
    --c-input-bg: #111114;      /* 輸入框底色 */

    /* 文字 */
    --c-text: #F4F4F5;          /* 主要文字 */
    --c-title: #FFFFFF;         /* 標題 */
    --c-muted: #A1A1AA;         /* 次要文字、說明、placeholder */

    /* 主色（主要按鈕、重點、選中狀態） */
    --c-primary: #E11D2E;
    --c-primary-dark: #B3121F;
    --c-primary-hover: #FF3B4A;
    --c-primary-grad: linear-gradient(135deg, #B3121F, #E11D2E);
    --c-primary-bg: rgba(225, 29, 46, .16);   /* 選中狀態的淡底 */
    --c-accent: #FF3B4A;        /* 深色底上的紅色重點字（金額、連結） */
    --c-on-primary: #FFFFFF;    /* 主要按鈕上的字 */
    --c-error: #FF8A93;         /* 錯誤提示、警示文字 */

    /* 狀態色：solid＝實心底配白字；fg＝深色底上的字；bg／line＝淡底與框 */
    --c-ok-solid: #15803D;   --c-ok-fg: #4ADE80;   --c-ok-bg: rgba(34, 197, 94, .14);   --c-ok-line: rgba(74, 222, 128, .4);
    --c-warn-solid: #D97706; --c-warn-fg: #FBBF24; --c-warn-bg: rgba(245, 158, 11, .15); --c-warn-line: rgba(251, 191, 36, .45);
    --c-bad-solid: #DC2626;  --c-bad-fg: #FF8A93;  --c-bad-bg: rgba(239, 68, 68, .15);   --c-bad-line: rgba(255, 138, 147, .5);
    --c-info-solid: #2563EB; --c-info-fg: #7AB4FF; --c-info-bg: rgba(59, 130, 246, .16); --c-info-line: rgba(122, 180, 255, .45);
    --c-cyan-solid: #0E7490; --c-cyan-fg: #67E8F9; --c-cyan-bg: rgba(34, 211, 238, .13); --c-cyan-line: rgba(103, 232, 249, .45);
    --c-teal-solid: #0F766E; --c-teal-fg: #5EEAD4; --c-teal-bg: rgba(20, 184, 166, .14); --c-teal-line: rgba(94, 234, 212, .5);
    --c-purple-fg: #C4B5FD;  --c-purple-bg: rgba(139, 92, 246, .18);
    --c-neutral-solid: #52525B; --c-neutral-fg: #A1A1AA; --c-neutral-bg: rgba(161, 161, 170, .14);

    /* 字體：中文 Noto Sans TC；英文數字（價格、單號）Saira Condensed。
       Saira 沒有中文字，排第一只會接手英文數字，中文自動落到 Noto Sans TC。 */
    --font-body: "Saira Condensed", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

::placeholder { color: var(--c-muted); opacity: 1; }

/* 輸入框框線（focus 時各頁自己的框色照用） */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not(:focus),
select:not(:focus),
textarea:not(:focus) { border-color: var(--c-input-line); }

/* App 避開手機狀態列（2026-10-11）：客人端、師傅端頁面是 viewport-fit=cover，
   App 裡畫面會延伸到狀態列底下 → 整頁往下讓出狀態列高度，狀態列那條補上頂欄色，
   黏在上方的頂欄也停在狀態列下面。一般瀏覽器 safe-area 是 0，畫面不變。 */
body.safe-top { padding-top: env(safe-area-inset-top, 0px); }
body.safe-top::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: var(--c-chrome);
    z-index: 100;
}
body.safe-top .topbar,
body.safe-top .tech-bar { top: env(safe-area-inset-top, 0px); }