/* 登富發 ERP 後台共用樣式：色彩與元件的統一來源，載入順序在佈景主題之後 */
:root {
  --dff-ink: #17212c; --dff-muted: #566373; --dff-line: #dbe2e9; --dff-bg: #f4f6f8; --dff-surface: #fff;
  --dff-brand: #0f4c81; --dff-brand-dark: #0b3a63; --dff-brand-soft: #e7f0f7; --dff-header: #0d3557; --dff-amber: #f2b441;
  --dff-success: #1f7a4d; --dff-warning: #a85f00; --dff-danger: #b3362b; --dff-info: #0e6b8c; --dff-neutral: #566373;
  --dff-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
}
body { font-family: var(--dff-font); color: var(--dff-ink); background: var(--dff-bg); font-size: 14px; }
::selection { background: #cfe2f2; color: var(--dff-ink); }
:focus-visible { outline: 2px solid var(--dff-brand); outline-offset: 2px; }
a { color: var(--dff-brand); }
a:hover { color: var(--dff-brand-dark); }
hr { border-top-color: var(--dff-line); }
h1, h2, h3, h4, h5, h6, .btn, .form-control { font-family: var(--dff-font); }
td, th { font-variant-numeric: tabular-nums; }

/* 頂列 */
#header, #header .navbar, #header .navbar .navbar-collapse { background: var(--dff-header); }
#header { box-shadow: 0 1px 3px rgba(9, 30, 50, .25); }
#header .navbar .navbar-brand .text-logo-element { color: var(--dff-amber); font-size: 20px; margin-left: 20px; }
#header .navbar .navbar-brand .text-logo, #header .navbar .navbar-brand .text-slogan { font-family: var(--dff-font); font-size: 18px; font-weight: 700; color: #fff; }
#header .navbar .navbar-brand .text-slogan { color: var(--dff-amber); margin-left: 2px; }
#header .navbar-nav > li > a, #header .navbar-nav > li > a i, #header .navbar-nav > li > a span { color: #fff; }

/* 側欄 */
#sidebar, #sidebar .sidebar-inner { background: #fff; }
#sidebar { border-right: 1px solid var(--dff-line); }
#sidebar #sideNav li a { color: var(--dff-ink); font-size: 14px; border: 0; background: transparent; }
#sidebar #sideNav li a i { color: var(--dff-muted); }
#sidebar #sideNav li a:hover, #sidebar #sideNav li.active > a, #sidebar #sideNav li a.active { background: var(--dff-brand-soft); color: var(--dff-brand-dark); }
#sidebar #sideNav li a:hover i, #sidebar #sideNav li.active > a i { color: var(--dff-brand); }
#sidebar #sideNav ul.submenu-list { background: #f8fafb; }
#sidebar #sideNav ul.submenu-list li { border-left: 0; }

/* 內容區 */
#content { background: var(--dff-bg); }
#sidebar { min-height: calc(100vh - 50px); }
#todo-area { border-left: 1px solid var(--dff-line) !important; }
.page-header { font-size: 22px; font-weight: 700; color: var(--dff-ink); border-bottom: 0; }
.page-header i { color: var(--dff-muted); margin-right: 8px; }
ul.breadcrumb:empty { display: none; }

/* 按鈕 */
.btn { border-radius: 6px; font-weight: 500; transition: background-color .12s ease-out, border-color .12s ease-out; }
.btn:disabled, .btn.disabled { opacity: .55; }
.btn-primary { background: var(--dff-brand); border-color: var(--dff-brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--dff-brand-dark); border-color: var(--dff-brand-dark); color: #fff; }
.btn-success { background: var(--dff-success); border-color: var(--dff-success); color: #fff; }
.btn-success:hover, .btn-success:focus { background: #18633e; border-color: #18633e; color: #fff; }
.btn-warning { background: var(--dff-warning); border-color: var(--dff-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #8a4e00; border-color: #8a4e00; color: #fff; }
.btn-danger { background: var(--dff-danger); border-color: var(--dff-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: #952c23; border-color: #952c23; color: #fff; }
.btn-info { background: var(--dff-info); border-color: var(--dff-info); color: #fff; }
.btn-info:hover, .btn-info:focus { background: #0b5671; border-color: #0b5671; color: #fff; }
.btn-secondary, .btn-default { background: #fff; border-color: #b9c4cf; color: var(--dff-ink); }
.btn-secondary:hover, .btn-default:hover { background: var(--dff-bg); color: var(--dff-ink); }
.btn-brown { background: #6b4f2f; border-color: #6b4f2f; color: #fff; }
.btn-brown:hover, .btn-brown:focus { background: #553e24; border-color: #553e24; color: #fff; }
.btn-outline-primary { background: #fff; border: 1px solid var(--dff-brand); color: var(--dff-brand); }
.btn-outline-primary:hover { background: var(--dff-brand); color: #fff; }
select.btn option { background: #fff; color: var(--dff-ink); }

/* 標籤 */
.badge { font-weight: 600; border-radius: 4px; }
.badge-primary { background: var(--dff-brand); color: #fff; }
.badge-success { background: var(--dff-success); color: #fff; }
.badge-warning { background: var(--dff-warning); color: #fff; }
.badge-danger { background: var(--dff-danger); color: #fff; }
.badge-info { background: var(--dff-info); color: #fff; }
.badge-secondary { background: var(--dff-neutral); color: #fff; }

/* 表單 */
.form-control, .form-select { border: 1px solid #c3ccd6; border-radius: 6px; color: var(--dff-ink); box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: var(--dff-brand); box-shadow: 0 0 0 3px rgba(15, 76, 129, .16); outline: 0; }
.form-control::placeholder { color: #667381; opacity: 1; }
label { color: var(--dff-ink); font-weight: 600; }

/* 面板與卡片 */
.panel, .card { border: 1px solid var(--dff-line); border-radius: 8px; box-shadow: 0 1px 2px rgba(16, 32, 48, .05); background: #fff; }
.panel-primary > .panel-heading, .panel-default > .panel-heading, .panel-warning > .panel-heading, .panel-heading, .card-header { background: #fff; border-bottom: 1px solid var(--dff-line); color: var(--dff-ink); border-radius: 8px 8px 0 0; }
.panel-heading .panel-title, .panel-heading h4, .card-title { color: var(--dff-ink); font-size: 15px; font-weight: 700; }
.panel-heading .panel-title i { color: var(--dff-muted); }

/* 表格 */
.table > thead > tr > th, .table thead th { background: #eef2f6; color: var(--dff-ink); font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--dff-line); }
.table > tbody > tr > td, .table td { vertical-align: middle; border-color: #e7ecf1; }
.table-hover > tbody > tr:hover > td { background: #f6f9fb; }

/* 列表頁工具列：取代各頁 col-lg 與 margin 造成的階梯排列 */
.dff-toolbar, .email-wrapper > .row:first-child { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.dff-toolbar > [class*="col-"], .dff-toolbar form, .dff-toolbar form > [class*="col-"], .dff-toolbar form > div > [class*="col-"], .email-wrapper > .row:first-child > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; margin: 0 !important; padding: 0; float: none; }
.dff-toolbar form, .dff-toolbar form > .d-flex { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.dff-toolbar .mb-3, .dff-toolbar .mb-2, .email-wrapper > .row:first-child .mb-2 { margin-bottom: 0 !important; }
.dff-toolbar .btn, .dff-toolbar .btn-lg, .email-wrapper > .row:first-child .btn-lg { font-size: 14px; padding: 8px 14px; height: 38px; line-height: 20px; }
.dff-toolbar .form-control, .email-wrapper > .row:first-child .form-control { height: 38px !important; font-size: 14px !important; max-width: 100%; }
.email-wrapper > .row:first-child select.btn { padding-right: 8px; }
.dff-toolbar .form-check-input { position: static; margin: 0 0 0 6px; }

/* 專案與客戶卡片 */
.project-card { border: 1px solid var(--dff-line) !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(16, 32, 48, .05) !important; background: #fff; }
.project-card:hover { border-color: #a9bccd !important; }
.project-card--stale, .project-card--stale:hover { border-color: var(--dff-danger) !important; box-shadow: 0 0 0 1px var(--dff-danger) !important; }
.project-card table td, .table.table-fixed-layout .project-card td { border-top: 0; white-space: normal; overflow: visible; text-overflow: clip; }
.project-meta-info { white-space: normal; overflow-wrap: anywhere; }
.project-actions { display: flex; flex-wrap: wrap; gap: 2px 16px; align-items: center; padding: 4px 8px; }
.project-actions > div { padding: 4px; white-space: nowrap; }
.project-actions a { font-weight: 500; }
.project-actions .btn { margin-left: 4px; }
.stage-badge { border-radius: 4px; font-size: 12px; font-weight: 600; }

/* 分頁、提示、彈窗 */
.pagination > .active > a, .pagination > .active > span, .page-item.active .page-link { background: var(--dff-brand); border-color: var(--dff-brand); color: #fff; }
.pagination > li > a, .page-link { color: var(--dff-brand); }
.alert { border-radius: 6px; }
.modal-content { border: 0; border-radius: 10px; box-shadow: 0 12px 32px rgba(9, 30, 50, .22); }

/* 部分頁面用了 Bootstrap 5 類別，但本系統載入的是 Bootstrap 4，補上對應效果 */
.text-end { text-align: right; }
.text-start { text-align: left; }
.me-1 { margin-right: 4px; } .me-2 { margin-right: 8px; } .ms-1 { margin-left: 4px; } .ms-2 { margin-left: 8px; }
.gap-2 { gap: 8px; }
.form-select { display: block; width: 100%; height: 38px; padding: 6px 10px; background-color: #fff; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }