/* acshop 後台主題：在 Bootstrap 之上做側邊欄版面與水藍主色 */
:root{
  --teal:#0e7490; --teal-600:#0891b2; --teal-700:#155e75; --teal-900:#0b3a47;
  --bs-primary:#0e7490; --bs-primary-rgb:14,116,137;
  --bs-link-color:#155e75; --bs-link-hover-color:#0b3a47;
}
body{background:#f1f5f9}

/* 主色按鈕/徽章覆蓋成 teal */
.btn-primary{--bs-btn-bg:var(--teal);--bs-btn-border-color:var(--teal);
  --bs-btn-hover-bg:var(--teal-700);--bs-btn-hover-border-color:var(--teal-700);
  --bs-btn-active-bg:var(--teal-700);--bs-btn-active-border-color:var(--teal-700);
  --bs-btn-disabled-bg:var(--teal);--bs-btn-disabled-border-color:var(--teal)}
.btn-outline-primary{--bs-btn-color:var(--teal);--bs-btn-border-color:var(--teal);
  --bs-btn-hover-bg:var(--teal);--bs-btn-hover-border-color:var(--teal);
  --bs-btn-active-bg:var(--teal);--bs-btn-active-border-color:var(--teal)}
.text-bg-primary{background-color:var(--teal)!important}
.form-control:focus,.form-select:focus{border-color:var(--teal-600);
  box-shadow:0 0 0 .2rem rgba(14,116,137,.18)}
a{color:var(--teal-700)}

/* 版面 */
.app-shell{display:flex; min-height:100vh}
.sidebar{width:230px; flex:0 0 230px; background:linear-gradient(180deg,#0b3a47,#0f2730);
  color:#cbd5e1; position:sticky; top:0; height:100vh; display:flex; flex-direction:column}
.sidebar .brand{display:flex; align-items:center; gap:10px; padding:20px 20px 14px;
  color:#fff; font-weight:700; font-size:19px; letter-spacing:.5px}
.sidebar .brand .logo{font-size:24px}
.sidebar .nav-section{font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:#5b7f8c; padding:14px 20px 6px}
.sidebar .nav-link{display:flex; align-items:center; gap:11px; color:#cbd5e1;
  padding:10px 20px; border-radius:0; font-weight:500}
.sidebar .nav-link .ic{width:20px; text-align:center; font-size:15px; opacity:.95}
.sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff}
.sidebar .nav-link.active{background:var(--teal); color:#fff; box-shadow:inset 3px 0 0 #67e8f9}
.sidebar .side-foot{margin-top:auto; padding:16px 20px; font-size:12px; color:#5b7f8c}

.app-main{flex:1; min-width:0; display:flex; flex-direction:column}
.app-topbar{height:60px; background:#fff; border-bottom:1px solid #e2e8f0;
  display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:5}
.app-topbar .title{font-size:18px; font-weight:650; margin:0}
.app-content{padding:24px; width:100%; max-width:1200px}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--teal); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px}

/* 統計卡 */
.stat-card{border:1px solid #e2e8f0; border-radius:14px; background:#fff; padding:18px 20px;
  box-shadow:0 1px 2px rgba(15,23,42,.04); height:100%}
.stat-card .label{color:#64748b; font-size:13px; margin-bottom:8px}
.stat-card .num{font-size:30px; font-weight:750; line-height:1; letter-spacing:-.5px}
.stat-card.accent{border-left:4px solid var(--teal)}
.stat-card.warn{border-left:4px solid #d97706}
.stat-card.warn .num{color:#b45309}

.card{border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 1px 2px rgba(15,23,42,.04)}
.card .card-header{background:#fff; border-bottom:1px solid #eef2f6; font-weight:650; border-radius:14px 14px 0 0}
.table>:not(caption)>*>*{padding:.6rem .75rem}
.table thead th{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:#64748b; background:#f8fafc}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--teal-700)}

/* ---- 員工管理：就地編輯 UI ---- */
.emp-avatar{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--teal-700,#0f766e); color:#fff; font-size:13px; font-weight:650; flex:0 0 auto}
.emp-name{cursor:pointer; padding:2px 6px; border-radius:6px; border:1px solid transparent; transition:background .12s,border-color .12s}
.emp-name:hover{background:#f1f5f9; border-color:#e2e8f0}
.emp-name:hover::after{content:"✎"; margin-left:6px; color:#94a3b8; font-size:12px}
.emp-name:focus{outline:2px solid #99f6e4; outline-offset:1px}
.emp-table tbody tr.emp-off{opacity:.55}
.emp-table tbody tr.emp-off .emp-avatar{background:#94a3b8}
.form-switch .form-check-input{cursor:pointer; width:2.4em; height:1.25em}
.form-switch .form-check-input:checked{background-color:var(--teal-700,#0f766e); border-color:var(--teal-700,#0f766e)}
/* toast */
.emp-toasts{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:1080}
.emp-toast{min-width:160px; max-width:320px; padding:9px 14px; border-radius:10px; font-size:13.5px; color:#fff; box-shadow:0 6px 18px rgba(15,23,42,.18); opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s}
.emp-toast.show{opacity:1; transform:translateY(0)}
.emp-toast.is-ok{background:#0f766e}
.emp-toast.is-err{background:#dc2626}

/* 帳號／供應商沿用員工就地編輯樣式 */
.acc-table tbody tr.acc-off{opacity:.55}
.acc-table tbody tr.acc-off .emp-avatar{background:#94a3b8}
.sup-table tbody tr .sup-field{border-color:transparent; background:transparent; transition:border-color .12s,background .12s}
.sup-table tbody tr:hover .sup-field,.sup-table .sup-field:focus{border-color:#cbd5e1; background:#fff}