/* =============================================================================
   PMIS Component Styles  (v1.0)
   -----------------------------------------------------------------------------
   依存：pmis-design-tokens.css 必須先匯入。
   範圍：覆寫 RadzenButton / RadzenCard / RadzenBadge / RadzenAlert / 表單元件，
         並提供 PMIS 自有元件樣式（首頁區塊、快捷鈕、待辦卡）。
   ============================================================================= */

/* ────────────────────────── 1. 基本字型強化（解決字太小） ────────────────────────── */
html { font-size: var(--pmis-fs-root); }

body,
.rz-body {
    font-family: var(--pmis-font-sans);
    font-size: var(--pmis-fs-base);
    line-height: var(--pmis-lh-normal);
    color: var(--pmis-text-primary);
    background-color: var(--pmis-surface-alt);
}

.rz-button { font-size: var(--pmis-fs-md); letter-spacing: 0.02em; }
.rz-text-h1 { font-size: var(--pmis-fs-4xl); line-height: var(--pmis-lh-tight); font-weight: var(--pmis-fw-bold); }
.rz-text-h2,
.rz-text-display-h4 { font-size: var(--pmis-fs-3xl); line-height: var(--pmis-lh-tight); font-weight: var(--pmis-fw-semibold); }
.rz-text-h3 { font-size: var(--pmis-fs-2xl); font-weight: var(--pmis-fw-semibold); }
.rz-text-h4 { font-size: var(--pmis-fs-xl); font-weight: var(--pmis-fw-semibold); }
.rz-text-h5 { font-size: var(--pmis-fs-lg); font-weight: var(--pmis-fw-semibold); }
.rz-text-h6 { font-size: var(--pmis-fs-md); font-weight: var(--pmis-fw-semibold); }
.rz-text-body1 { font-size: var(--pmis-fs-base); }
.rz-text-body2 { font-size: var(--pmis-fs-sm); }
.rz-text-caption { font-size: var(--pmis-fs-xs); color: var(--pmis-text-muted); }

/* DataGrid / Form Field 內的文字一律放大（原 12-13px 太小）*/
.rz-grid-table,
.rz-grid-table-fixed,
.rz-data-grid,
.rz-dropdown,
.rz-textbox,
.rz-textarea,
.rz-numeric,
.rz-datepicker { font-size: var(--pmis-fs-sm); }

.rz-grid-table th { font-size: var(--pmis-fs-sm); font-weight: var(--pmis-fw-semibold); }

/* ────────────────────────── 2. 按鈕（依屬性配色） ────────────────────────── */
.rz-button {
    border-radius: var(--pmis-radius-sm);
    font-weight: var(--pmis-fw-medium);
    transition:
        background-color var(--pmis-dur-fast) var(--pmis-ease),
        box-shadow var(--pmis-dur-fast) var(--pmis-ease),
        transform var(--pmis-dur-fast) var(--pmis-ease);
}

.rz-button:hover { box-shadow: var(--pmis-shadow-sm); transform: translateY(-1px); }
.rz-button:active { transform: translateY(0); box-shadow: var(--pmis-shadow-xs); }
.rz-button:focus-visible { outline: none; box-shadow: var(--pmis-shadow-focus); }

/* Primary  - 新增/儲存/送出（深蜜紫） */
.rz-button.rz-primary {
    background-color: var(--pmis-color-primary);
    color: var(--pmis-color-on-primary);
    border-color: var(--pmis-color-primary);
}
.rz-button.rz-primary:hover { background-color: var(--pmis-color-primary-hover); border-color: var(--pmis-color-primary-hover); }
.rz-button.rz-primary:active { background-color: var(--pmis-color-primary-active); }

/* Secondary - 查詢/瀏覽/重整/匯出（悠閒灰綠） */
.rz-button.rz-secondary {
    background-color: var(--pmis-color-secondary);
    color: var(--pmis-color-on-secondary);
    border-color: var(--pmis-color-secondary);
}
.rz-button.rz-secondary:hover { background-color: var(--pmis-color-secondary-hover); border-color: var(--pmis-color-secondary-hover); }

/* Info - 檢視/預覽/明細（帆影藍） */
.rz-button.rz-info {
    background-color: var(--pmis-color-info);
    color: var(--pmis-color-on-info);
    border-color: var(--pmis-color-info);
}
.rz-button.rz-info:hover { background-color: var(--pmis-color-info-hover); color: #FFFFFF; }

/* Success - 通過/啟用/完成（初夏綠） */
.rz-button.rz-success {
    background-color: var(--pmis-color-success);
    color: var(--pmis-color-on-success);
    border-color: var(--pmis-color-success);
}
.rz-button.rz-success:hover { background-color: var(--pmis-color-success-hover); border-color: var(--pmis-color-success-hover); }

/* Warning - 審核中/待處理（西班牙白色階加深） */
.rz-button.rz-warning {
    background-color: var(--pmis-color-warning);
    color: var(--pmis-color-on-warning);
    border-color: var(--pmis-color-warning);
}
.rz-button.rz-warning:hover { background-color: var(--pmis-color-warning-hover); }

/* Danger - 刪除/駁回/停用（磚紅） */
.rz-button.rz-danger {
    background-color: var(--pmis-color-danger);
    color: var(--pmis-color-on-danger);
    border-color: var(--pmis-color-danger);
}
.rz-button.rz-danger:hover { background-color: var(--pmis-color-danger-hover); }

/* Light/Neutral - 取消/返回（岩板灰） */
.rz-button.rz-light {
    background-color: var(--pmis-stone-100);
    color: var(--pmis-text-primary);
    border-color: var(--pmis-stone-300);
}
.rz-button.rz-light:hover { background-color: var(--pmis-stone-200); }

/* 停用態：所有按鈕統一 */
.rz-button[disabled],
.rz-button.rz-state-disabled {
    background-color: var(--pmis-stone-200) !important;
    color: var(--pmis-text-disabled) !important;
    border-color: var(--pmis-stone-200) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}

/* ────────────────────────── 3. 卡片 / Panel ────────────────────────── */
.rz-card {
    border-radius: var(--pmis-radius-md);
    border: 1px solid var(--pmis-divider);
    background-color: var(--pmis-surface);
    box-shadow: var(--pmis-shadow-xs);
}

.rz-card .rz-card-header,
.rz-card .rz-card-title {
    color: var(--pmis-text-primary);
    font-weight: var(--pmis-fw-semibold);
}

/* PMIS 自有卡片變體：用於首頁區塊 */
.pmis-section {
    background-color: var(--pmis-surface);
    border: 1px solid var(--pmis-divider);
    border-radius: var(--pmis-radius-lg);
    padding: var(--pmis-sp-5);
    box-shadow: var(--pmis-shadow-sm);
}

.pmis-section__title {
    display: flex;
    align-items: center;
    gap: var(--pmis-sp-2);
    margin: 0 0 var(--pmis-sp-4);
    padding-bottom: var(--pmis-sp-2);
    border-bottom: 2px solid var(--pmis-color-primary);
    font-size: var(--pmis-fs-xl);
    font-weight: var(--pmis-fw-semibold);
    color: var(--pmis-color-primary);
}

.pmis-section--secondary .pmis-section__title { border-bottom-color: var(--pmis-color-secondary); color: var(--pmis-color-secondary); }
.pmis-section--info       .pmis-section__title { border-bottom-color: var(--pmis-color-info-hover); color: var(--pmis-color-info-hover); }
.pmis-section--success    .pmis-section__title { border-bottom-color: var(--pmis-color-success-hover); color: var(--pmis-color-success-hover); }

/* ────────────────────────── 4. 徽章 / 標籤 ────────────────────────── */
.rz-badge {
    border-radius: var(--pmis-radius-pill);
    font-weight: var(--pmis-fw-semibold);
    font-size: var(--pmis-fs-xs);
    padding: 2px 10px;
}
.rz-badge.rz-badge-primary  { background-color: var(--pmis-color-primary); color: #fff; }
.rz-badge.rz-badge-secondary{ background-color: var(--pmis-color-secondary); color: #fff; }
.rz-badge.rz-badge-info     { background-color: var(--pmis-color-info); color: var(--pmis-color-on-info); }
.rz-badge.rz-badge-success  { background-color: var(--pmis-color-success); color: #fff; }
.rz-badge.rz-badge-warning  { background-color: var(--pmis-color-warning); color: var(--pmis-color-on-warning); }
.rz-badge.rz-badge-danger   { background-color: var(--pmis-color-danger); color: #fff; }
.rz-badge.rz-badge-light    { background-color: var(--pmis-stone-200); color: var(--pmis-text-primary); }

/* ────────────────────────── 5. 提示 Alert ────────────────────────── */
.rz-alert {
    border-radius: var(--pmis-radius-md);
    border-left-width: 4px;
    border-left-style: solid;
    padding: var(--pmis-sp-3) var(--pmis-sp-4);
    font-size: var(--pmis-fs-sm);
}
.rz-alert.rz-alert-info    { background-color: rgba(162, 196, 228, 0.18); border-left-color: var(--pmis-color-info-hover); color: var(--pmis-text-primary); }
.rz-alert.rz-alert-success { background-color: rgba(151, 193, 138, 0.18); border-left-color: var(--pmis-color-success-hover); color: var(--pmis-text-primary); }
.rz-alert.rz-alert-warning { background-color: rgba(222, 209, 183, 0.30); border-left-color: var(--pmis-color-warning-active); color: var(--pmis-text-primary); }
.rz-alert.rz-alert-danger  { background-color: rgba(139, 58, 58, 0.10); border-left-color: var(--pmis-color-danger); color: var(--pmis-text-primary); }

/* ────────────────────────── 6. 表單欄位 ────────────────────────── */
.rz-textbox,
.rz-textarea,
.rz-numeric,
.rz-dropdown,
.rz-datepicker {
    border-radius: var(--pmis-radius-sm);
    border: 1px solid var(--pmis-border);
    background-color: var(--pmis-surface);
    color: var(--pmis-text-primary);
    transition: border-color var(--pmis-dur-fast) var(--pmis-ease), box-shadow var(--pmis-dur-fast) var(--pmis-ease);
}
.rz-textbox:focus,
.rz-textarea:focus,
.rz-numeric:focus,
.rz-dropdown.rz-state-focused,
.rz-datepicker.rz-state-focused {
    border-color: var(--pmis-color-primary);
    box-shadow: var(--pmis-shadow-focus);
    outline: none;
}

/* ────────────────────────── 7. 側欄 / Header ────────────────────────── */
.rz-sidebar {
    background-color: var(--pmis-surface);
    border-right: 1px solid var(--pmis-divider);
}

.rz-header {
    background-color: var(--pmis-surface);
    border-bottom: 1px solid var(--pmis-divider);
    box-shadow: var(--pmis-shadow-xs);
}

.rz-panel-menu .rz-panel-menu-item.rz-state-active > .rz-panel-menu-item-link {
    background-color: var(--pmis-purple-50);
    color: var(--pmis-color-primary);
    font-weight: var(--pmis-fw-semibold);
    border-left: 3px solid var(--pmis-color-primary);
}

.rz-panel-menu .rz-panel-menu-item-link:hover {
    background-color: var(--pmis-stone-100);
    color: var(--pmis-color-primary);
}

/* ────────────────────────── 8. DataGrid ────────────────────────── */
.rz-grid-table thead th,
.rz-data-grid .rz-grid-table thead th {
    background-color: var(--pmis-purple-50);
    color: var(--pmis-color-primary);
    font-weight: var(--pmis-fw-semibold);
    border-bottom: 2px solid var(--pmis-color-primary);
}

.rz-grid-table tbody tr:hover { background-color: var(--pmis-cream-50); }
.rz-grid-table tbody tr.rz-selected { background-color: var(--pmis-purple-50); }

/* ────────────────────────── 9. 首頁 ── 歡迎條 ──────────────────────────
   原本深紫底搭配紅色字體 logo 可讀性差，改為淡色漸層（西班牙白 → 帆影藍）+
   左側 4px 深蜜紫色帶，保留品牌色但不再壓住紅字。
   ============================================================ */
.pmis-hero {
    position: relative;
    border-radius: var(--pmis-radius-lg);
    padding: var(--pmis-sp-5) var(--pmis-sp-6);
    background:
        linear-gradient(135deg, var(--pmis-cream-100) 0%, var(--pmis-blue-200) 50%, var(--pmis-blue-300) 100%);
    color: var(--pmis-text-primary);
    overflow: hidden;
    box-shadow: var(--pmis-shadow-sm);
    border: 1px solid var(--pmis-divider);
    border-left: 4px solid var(--pmis-color-primary);
}

/* 在 logo 後方放一個白底凹槽，讓任何 logo 設計（含紅字）都能清晰呈現 */
.pmis-hero__logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
}

.pmis-hero__logo { height: 56px; display: block; }

.pmis-hero__title {
    font-size: var(--pmis-fs-3xl);
    font-weight: var(--pmis-fw-bold);
    color: var(--pmis-color-primary);
    margin: 0;
    letter-spacing: 1px;
}

.pmis-hero__subtitle {
    font-size: var(--pmis-fs-base);
    color: var(--pmis-text-secondary);
    margin-top: var(--pmis-sp-1);
}

/* ────────────────────────── 10. 首頁 ── 快速操作列 ────────────────────────── */
.pmis-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pmis-sp-3);
    align-items: center;
}

.pmis-quick-actions .rz-button {
    /* 加大字級與按鈕 padding，回應「按鈕字太小」 */
    font-size: var(--pmis-fs-md);
    padding: 0.65rem 1.1rem;
    min-height: 44px;          /* 觸控友善 */
    min-width: 124px;
    border-radius: var(--pmis-radius-md);
}

.pmis-quick-actions .rz-button .rzi {
    font-size: 1.25rem;
    margin-right: 0.4rem;
}

.pmis-quick-actions__title {
    font-size: var(--pmis-fs-lg);
    font-weight: var(--pmis-fw-semibold);
    color: var(--pmis-text-primary);
    margin-right: var(--pmis-sp-2);
}

/* ────────────────────────── 11. 首頁 ── 待辦/審核清單 ────────────────────────── */
.pmis-todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--pmis-sp-3); }

.pmis-todo-card {
    position: relative;
    display: flex;
    gap: var(--pmis-sp-3);
    padding: var(--pmis-sp-3) var(--pmis-sp-4);
    background-color: var(--pmis-surface);
    border: 1px solid var(--pmis-divider);
    border-radius: var(--pmis-radius-md);
    box-shadow: var(--pmis-shadow-xs);
    cursor: pointer;
    transition: transform var(--pmis-dur-fast) var(--pmis-ease), box-shadow var(--pmis-dur-fast) var(--pmis-ease);
}
.pmis-todo-card:hover { transform: translateY(-2px); box-shadow: var(--pmis-shadow-md); }

.pmis-todo-card__priority { width: 4px; align-self: stretch; border-radius: 2px; }
.pmis-todo-card__priority--high { background-color: var(--pmis-color-danger); }
.pmis-todo-card__priority--mid  { background-color: var(--pmis-color-warning-active); }
.pmis-todo-card__priority--low  { background-color: var(--pmis-color-success); }
.pmis-todo-card__priority--info { background-color: var(--pmis-color-info-hover); }

.pmis-todo-card__title { font-size: var(--pmis-fs-md); font-weight: var(--pmis-fw-semibold); color: var(--pmis-text-primary); }
.pmis-todo-card__desc  { font-size: var(--pmis-fs-sm); color: var(--pmis-text-muted); }
.pmis-todo-card__meta  { font-size: var(--pmis-fs-xs); color: var(--pmis-text-muted); }

/* ────────────────────────── 12. 首頁 ── 專案總覽（可收合） ────────────────────────── */
.pmis-overview-drawer {
    position: fixed;
    right: 0;
    top: 90px;
    width: min(520px, 92vw);
    max-height: calc(100vh - 110px);
    background-color: var(--pmis-surface);
    border: 1px solid var(--pmis-divider);
    border-right: none;
    border-radius: var(--pmis-radius-lg) 0 0 var(--pmis-radius-lg);
    box-shadow: var(--pmis-shadow-lg);
    transform: translateX(100%);
    transition: transform var(--pmis-dur-base) var(--pmis-ease);
    z-index: var(--pmis-z-overlay);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pmis-overview-drawer--open { transform: translateX(0); }

.pmis-overview-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pmis-sp-3) var(--pmis-sp-4);
    background-color: var(--pmis-purple-50);
    border-bottom: 1px solid var(--pmis-divider);
    color: var(--pmis-color-primary);
    font-weight: var(--pmis-fw-semibold);
}

.pmis-overview-drawer__body { padding: var(--pmis-sp-4); overflow-y: auto; }

/* 觸發按鈕（固定在右側中段） */
.pmis-overview-handle {
    position: fixed;
    right: 0;
    top: 220px;
    z-index: calc(var(--pmis-z-overlay) - 1);
    background-color: var(--pmis-color-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--pmis-radius-md) 0 0 var(--pmis-radius-md);
    padding: var(--pmis-sp-3) var(--pmis-sp-2);
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: var(--pmis-fs-sm);
    letter-spacing: 4px;
    cursor: pointer;
    box-shadow: var(--pmis-shadow-md);
}
.pmis-overview-handle:hover { background-color: var(--pmis-color-primary-hover); }

/* ────────────────────────── 13. 警示徽章（紅點） ────────────────────────── */
.pmis-notification-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--pmis-color-danger);
    box-shadow: 0 0 0 3px var(--pmis-surface);
}

/* ────────────────────────── 14. 列表「最近使用」標記 ────────────────────────── */
.pmis-recent-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--pmis-radius-pill);
    background-color: var(--pmis-cream-100);
    color: var(--pmis-cream-900);
    font-size: var(--pmis-fs-2xs);
    font-weight: var(--pmis-fw-semibold);
}

/* ────────────────────────── 15. 響應式 ────────────────────────── */
@media (max-width: 768px) {
    .pmis-hero { padding: var(--pmis-sp-4); }
    .pmis-hero__title { font-size: var(--pmis-fs-2xl); }
    .pmis-quick-actions .rz-button { min-width: 0; flex: 1 1 calc(50% - var(--pmis-sp-3)); }
    .pmis-overview-drawer { top: 60px; width: 100vw; border-radius: 0; }
    .pmis-overview-handle { top: auto; bottom: 80px; }
}