/* ========================================
   全域設計規範
   補充 Tailwind CSS 不足之處
   ======================================== */

:root {
    /* 專案特定顏色 */
    --color-primary: rgb(37 99 235);      /* blue-600 */
    --color-primary-hover: rgb(29 78 216); /* blue-700 */
    --color-danger: rgb(220 38 38);       /* red-600 */
    --color-danger-hover: rgb(185 28 28); /* red-700 */
    
    /* 陰影層級 */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* 圓角 */
    --radius-card: 0.5rem;  /* 8px */
    --radius-button: 0.375rem; /* 6px */
    
    /* 間距 */
    --spacing-card: 1.5rem; /* 24px */
}

/* ========================================
   卡片元件標準化
   ======================================== */

.card {
    background: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-card);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* 卡片層級 */
.card-level-1 {
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-level-2 {
    padding: 1rem;
    background: rgb(249 250 251); /* gray-50 */
    border-radius: 0.375rem;
    margin-top: 1rem;
}

.card-level-3 {
    padding: 0.5rem 0;
}

/* ========================================
   按鈕互動狀態
   ======================================== */

.btn-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-button);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger {
    background-color: var(--color-danger);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-button);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
}

.btn-danger:hover {
    background-color: var(--color-danger-hover);
}

.btn-danger:focus {
    outline: 2px solid var(--color-danger);
    outline-offset: 2px;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   表單元件互動狀態
   ======================================== */

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
    border-color: transparent;
}

input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: rgb(243 244 246); /* gray-100 */
}

/* ========================================
   手機優先響應式增強
   ======================================== */

/* 手機版：主要操作按鈕固定在底部 */
@media (max-width: 767px) {
    .mobile-action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        z-index: 40;
    }
    
    .mobile-action-bar .btn-primary,
    .mobile-action-bar .btn-danger {
        width: 100%;
    }
    
    /* 為固定底部按鈕預留空間 */
    body.has-mobile-action-bar {
        padding-bottom: 5rem;
    }
    
    /* 表單標籤置於輸入框上方 */
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .form-group label {
        font-weight: 500;
    }
}

/* 桌面版：按鈕並排 */
@media (min-width: 768px) {
    .action-bar {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
    }
    
    .form-group {
        display: grid;
        grid-template-columns: 150px 1fr;
        align-items: center;
        gap: 1rem;
    }
}

/* ========================================
   響應式表格轉換
   ======================================== */

@media (max-width: 767px) {
    .table-responsive {
        display: block;
    }
    
    .table-responsive thead {
        display: none;
    }
    
    .table-responsive tbody {
        display: block;
    }
    
    .table-responsive tr {
        display: block;
        margin-bottom: 1rem;
        padding: 1rem;
        background: white;
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-card);
    }
    
    .table-responsive td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgb(229 231 235); /* gray-200 */
    }
    
    .table-responsive td:last-child {
        border-bottom: none;
    }
    
    .table-responsive td::before {
        content: attr(data-label);
        font-weight: 600;
        color: rgb(75 85 99); /* gray-600 */
    }
}

/* ========================================
   全域響應式字體系統
   解決 iPad 字體過小問題
   ======================================== */

/* 手機版（預設）- 基準大小 16px */
html {
    font-size: 100%; /* 16px */
}

/* iPad 直向 (768px - 1023px) - 放大 12.5% */
@media (min-width: 768px) and (max-width: 1023px) {
    html {
        font-size: 112.5%; /* 18px */
    }
}

/* iPad 橫向 / 桌面 (≥ 1024px) - 放大 25% */
@media (min-width: 1024px) {
    html {
        font-size: 125%; /* 20px */
    }
}

/* 
 * 所有使用 rem 單位的 Tailwind class 會自動按比例放大
 * 例如：
 * - text-sm (0.875rem) 在手機 14px → iPad 直向 15.75px → 桌面 17.5px
 * - text-base (1rem) 在手機 16px → iPad 直向 18px → 桌面 20px
 * - text-xl (1.25rem) 在手機 20px → iPad 直向 22.5px → 桌面 25px
 */

/* ========================================
   語義化字體系統
   5 級字體層級，完整三級響應式支援
   ======================================== */

/* Display: 主標題 (h1) */
.text-display {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    letter-spacing: -0.025em; /* tracking-tight */
    line-height: 1.25; /* leading-tight */
}

@media (min-width: 768px) {
    .text-display {
        font-size: 2.25rem; /* text-4xl */
    }
}

@media (min-width: 1024px) {
    .text-display {
        font-size: 3rem; /* text-5xl */
    }
}

/* Heading: 次標題 (h2, h3) */
.text-heading {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    line-height: 1.25; /* leading-tight */
}

@media (min-width: 768px) {
    .text-heading {
        font-size: 1.5rem; /* text-2xl */
    }
}

@media (min-width: 1024px) {
    .text-heading {
        font-size: 1.875rem; /* text-3xl */
    }
}

/* Body: 正文 (p, div, span) */
.text-body {
    font-size: 1rem; /* text-base */
    font-weight: 400; /* font-normal */
    line-height: 1.625; /* leading-relaxed */
}

@media (min-width: 768px) {
    .text-body {
        font-size: 1.125rem; /* text-lg */
    }
}

@media (min-width: 1024px) {
    .text-body {
        font-size: 1.25rem; /* text-xl */
    }
}
    
    /* Caption: 輔助文字 (label) - 加粗黑體 */
    .text-caption {
        font-size: 0.875rem; /* text-sm */
        font-weight: 700; /* font-bold - 改為加粗 */
        line-height: 1.5; /* leading-normal */
        color: rgb(31 41 55); /* text-gray-800 - 改為深色 */
    }
    
    @media (min-width: 768px) {
        .text-caption {
            font-size: 1rem; /* text-base */
        }
    }
    
    @media (min-width: 1024px) {
        .text-caption {
            font-size: 1.125rem; /* text-lg */
        }
    }

/* Note: 註解文字 (提示、小字) */
.text-note {
    font-size: 0.75rem; /* text-xs */
    line-height: 1.5; /* leading-normal */
    color: rgb(107 114 128); /* text-gray-500 */
}

@media (min-width: 768px) {
    .text-note {
        font-size: 0.875rem; /* text-sm */
        color: rgb(107 114 128); /* text-gray-500 */
    }
}

@media (min-width: 1024px) {
    .text-note {
        font-size: 1rem; /* text-base */
        color: rgb(107 114 128); /* text-gray-500 */
    }
}

/* ========================================
   Utility
   ======================================== */

/* 隱藏 input[type=number] 的箭頭 */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinner {
  -moz-appearance: textfield;
}