body{font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;background:#f4f7fb;color:#172033}
.topbar{background:linear-gradient(135deg,#050d1a,#0b1f3a 65%,#103f75);box-shadow:0 5px 22px rgba(4,18,40,.18)}
.brand{font-weight:800}.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#1d7cff,#27c2ff);display:inline-flex;align-items:center;justify-content:center;color:white;font-weight:900}
.hero{background:radial-gradient(circle at 85% 20%,rgba(39,183,255,.22),transparent 30%),linear-gradient(135deg,#050d1a,#0b1f3a 70%,#103b69);color:white;padding:54px 0 64px}
.search-panel{background:white;border-radius:18px;padding:9px;box-shadow:0 18px 45px rgba(0,0,0,.2)}
.search-panel .form-control,.search-panel .form-select{border:0;height:54px}
.card{border:1px solid #dfe7f2;border-radius:18px;box-shadow:0 8px 28px rgba(12,35,65,.06)}
.employee-card{transition:.2s}.employee-card:hover{transform:translateY(-3px)}
.avatar{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,#0b1f3a,#146ef5);color:white;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.extension{font-size:1.5rem;font-weight:900}.muted{color:#68768b}.sidebar{background:#071426;color:white;min-height:calc(100vh - 64px)}
.sidebar a{display:block;color:#aebdd0;text-decoration:none;padding:12px 14px;border-radius:10px;margin:4px 0}.sidebar a:hover,.sidebar a.active{background:#12345c;color:white}
.stat{background:linear-gradient(135deg,#fff,#f7faff);border:1px solid #dfe7f2;border-radius:16px;padding:20px}

/* V6.14 responsive desktop + mobile */
html{-webkit-text-size-adjust:100%} body{min-width:0;overflow-x:hidden} img{max-width:100%;height:auto}
.navbar .container,.navbar .container-fluid{gap:12px}.navbar-brand{min-width:0}.navbar-brand span{overflow:hidden;text-overflow:ellipsis}
.mobile-only{display:none}.desktop-only{display:block}
@media(max-width:991.98px){
 .navbar .container,.navbar .container-fluid{flex-wrap:wrap;align-items:center!important}
 .navbar .d-flex{flex-wrap:wrap}.navbar-brand{max-width:calc(100% - 58px);margin-right:0}
 .hero{padding:34px 0 40px}.hero .display-5{font-size:2rem}.search-panel{padding:10px;border-radius:14px}
 .search-panel .form-control,.search-panel .form-select{border:1px solid #dfe7f2}
}
@media(max-width:767.98px){
 body{font-size:.96rem}.container,.container-fluid{--bs-gutter-x:1.25rem}
 .py-5{padding-top:1.6rem!important;padding-bottom:1.6rem!important}.py-4{padding-top:1.15rem!important;padding-bottom:1.15rem!important}.p-4{padding:1rem!important}
 .card{border-radius:14px}.employee-card{padding:1rem!important}.employee-card:hover{transform:none}.avatar{width:46px;height:46px;border-radius:12px}.extension{font-size:1.35rem}
 .hero{padding:26px 0 30px}.hero .display-5{font-size:1.7rem}.hero .lead{font-size:1rem}
 .search-panel .row,.search-panel.row{row-gap:.5rem!important}.search-panel .form-control,.search-panel .form-select{height:48px;font-size:1rem}.search-panel .btn{height:48px}
 .navbar .btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
 .topbar .container>div.d-flex,.customer-top .customer-shell>div.d-flex{width:100%}
 .topbar .container>div.d-flex .btn,.customer-top .customer-shell>div.d-flex .btn{flex:1 1 auto}
 .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e3e9f2;border-radius:12px}
 .table-responsive table{margin-bottom:0;min-width:720px}
 .form-control,.form-select,.btn,textarea.form-control{font-size:16px}
 input[type="date"],input[type="time"],input[type="number"]{min-height:44px}
 .desktop-only{display:none!important}.mobile-only{display:block!important}
 .mobile-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:.5rem;width:100%}
 .mobile-actions>.btn,.mobile-actions>form,.mobile-actions>form>.btn{width:100%}
}
@media(max-width:575.98px){
 .navbar-brand img{max-width:92px!important;height:34px!important}.navbar-brand{font-size:1rem}.btn{white-space:normal}
 .mobile-actions{grid-template-columns:1fr}
}

/* V6.14.1 extension-directory mobile optimization */
.min-w-0{min-width:0}
.dept-quick{display:flex!important;gap:.45rem;overflow-x:auto;padding:.15rem 0 .35rem;scrollbar-width:none}
.dept-quick::-webkit-scrollbar{display:none}
.dept-chip{flex:0 0 auto;text-decoration:none;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:999px;padding:.42rem .75rem;font-size:.9rem;background:rgba(255,255,255,.08)}
.dept-chip.active{background:#fff;color:#17345e;border-color:#fff;font-weight:800}
.employee-touch-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:.5rem}
.employee-touch-actions .btn{min-height:44px;align-items:center;justify-content:center}
.employee-email{word-break:break-all}
@media(max-width:767.98px){
  .mobile-sticky-search{position:sticky;top:8px;z-index:20;box-shadow:0 8px 24px rgba(4,18,38,.18)}
  .employee-card{box-shadow:0 4px 16px rgba(13,36,64,.07)}
  .employee-card hr{margin:.8rem 0}
}
@media(max-width:420px){
  .employee-touch-actions{grid-template-columns:1fr}
}